\r\n { props.handleclose() }}>\r\n { props.handleclose() }} color={getcolor()}> {getintialtext()} : {props.msg}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ErrorHandling;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Input } from '@material-ui/core';\r\nimport {genfunction} from '../../helpers';\r\n\r\nimport theme from '../../theme'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n leftrightbutton: {\r\n minWidth: \"auto\"\r\n },\r\n leftbutton: {\r\n width: \"20px\",\r\n borderTopLeftRadius: \"0px\",\r\n borderBottomLeftRadius: \"0px\"\r\n },\r\n rightbutton: {\r\n width: \"20px\",\r\n borderTopRightRadius: \"0px\",\r\n borderBottomRightRadius: \"0px\"\r\n },\r\n labelstyle: {\r\n flex: 1,\r\n padding: \"0px 5px 0px 5px\",\r\n verticalAlign: \"middle\",\r\n textAlign: \"center\"\r\n },\r\n box: {\r\n display: \"flex\",\r\n width: \"80px\"\r\n },\r\n input: {\r\n textAlign: \"center\"\r\n },\r\n boxVisble :{\r\n pointerEvents: \"none\", \r\n opacity: \"0.4\",\r\n backgroundColor:'#808080',\r\n color:'#000000'\r\n }\r\n}));\r\n\r\nconst NumberSpinner = props => {\r\n const classes = useStyles();\r\n\r\n const buttonClickHandler = (operation) => {\r\n let newvalue = 0;\r\n if (operation == \"Add\") {\r\n newvalue = props.value + props.steps;\r\n }\r\n else if (operation == \"Subtract\") {\r\n newvalue = props.value - props.steps;\r\n }\r\n\r\n if (newvalue > props.maxValue)\r\n newvalue = props.maxValue;\r\n else if (newvalue < props.minValue)\r\n newvalue = props.minValue;\r\n\r\n if (newvalue != props.value)\r\n props.changeHandler(props.refrence, newvalue);\r\n }\r\n const handleFocus = (event) => event.target.select();\r\n\r\n const textChangeHandler = (event) => {\r\n if (event.target.value != \"\") {\r\n if (isNaN(event.target.value))\r\n event.target.value = 0;\r\n\r\n let newvalue = parseInt(event.target.value);\r\n if (newvalue > props.maxValue)\r\n newvalue = props.maxValue;\r\n else if (newvalue < props.minValue)\r\n newvalue = props.minValue;\r\n\r\n if (newvalue != props.value)\r\n props.changeHandler(props.refrence, newvalue);\r\n }\r\n }\r\n\r\n const disableButton = (type) => {\r\n\r\n if (type == \"Max\")\r\n return props.value >= props.maxValue;\r\n else if (type == \"Min\")\r\n return props.value <= props.minValue;\r\n }\r\n\r\n\r\n let boxVis = props.disabled ? classes.boxVisble : '';\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nNumberSpinner.propTypes = {\r\n value: PropTypes.number,\r\n steps: PropTypes.number,\r\n minValue: PropTypes.number,\r\n maxValue: PropTypes.number\r\n};\r\n\r\nexport default NumberSpinner;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport NumberFormat from 'react-number-format';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport TextField from '@material-ui/core/TextField';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n // '& > *': {\r\n // margin: theme.spacing(1),\r\n // },\r\n display: \"unset\"\r\n }\r\n}));\r\n\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingBottom: \"20px\"\r\n }\r\n}));\r\n\r\nconst UDFText = (props) => {\r\n const { UDF } = props;\r\n const classes = useStyles();\r\n\r\n const onChangeHandler = (event) => {\r\n props.changecontrolvalue(event, props.bookingID, UDF.UDFCategoryName, UDF.UDFID);\r\n }\r\n\r\n const GetUserMemberValue = () => {\r\n if (props.isMembership) {\r\n let userV = \"\";\r\n\r\n if (UDF.Users.filter(x => x.userID == props.usernumber).length > 0) {\r\n let user = UDF.Users.find(x => x.userID == props.usernumber);\r\n\r\n if (user && user.hasOwnProperty('userUDFValue')) {\r\n userV = user.userUDFValue;\r\n }\r\n\r\n return userV;\r\n }\r\n }\r\n else {\r\n return UDF.Value;\r\n }\r\n }\r\n return (\r\n \r\n {UDF.UdfDescription} \r\n 200}\r\n inputProps={{ maxLength: UDF.UDFLength }}\r\n onChange={onChangeHandler}\r\n value={GetUserMemberValue()}\r\n {...props}\r\n sx={{ p: 4, '& .MuiInputLabel-root': { p: 4 } }}\r\n variant=\"standard\"\r\n InputLabelProps={{\r\n style: { padding: \"0 0 0 15px\" }\r\n }}\r\n />\r\n
\r\n );\r\n};\r\n\r\nUDFText.propTypes = {\r\n udf: PropTypes.object.isRequired\r\n};\r\n\r\nexport default UDFText;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { FormControlLabel, Checkbox, TextField } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingBottom: \"20px\"\r\n }\r\n}));\r\n\r\nconst UDFCheckBox = (props) => {\r\n const { UDF } = props;\r\n const classes = useStyles();\r\n\r\n const changeCheckBoxValue = (event) => {\r\n props.changecontrolvalue(event, props.bookingID, UDF.UDFCategoryName, UDF.UDFID);\r\n }\r\n\r\n const GetUserMemberValue = () => {\r\n if (props.isMembership) {\r\n let userV = \"\";\r\n\r\n if (UDF.Users.filter(x => x.userID == props.usernumber).length > 0) {\r\n let user = UDF.Users.find(x => x.userID == props.usernumber);\r\n\r\n if (user && user.hasOwnProperty('userUDFValue')) {\r\n userV = user.userUDFValue;\r\n }\r\n\r\n return userV;\r\n }\r\n }\r\n else {\r\n return UDF.Value;\r\n }\r\n }\r\n\r\n return (\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nUDFCheckBox.propTypes = {\r\n UDF: PropTypes.object.isRequired\r\n};\r\n\r\nexport default UDFCheckBox;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingBottom: \"20px\"\r\n }\r\n}));\r\n\r\nconst UDFDateTime = (props) => {\r\n const { UDF } = props;\r\n const classes = useStyles();\r\n\r\n const onChangeHandler = (event) => {\r\n props.changecontrolvalue(event, props.bookingID, UDF.UDFCategoryName, UDF.UDFID);\r\n }\r\n\r\n const GetUserMemberValue = () => {\r\n if (props.isMembership) {\r\n let userV = \"\";\r\n\r\n if (UDF.Users.filter(x => x.userID == props.usernumber).length > 0) {\r\n let user = UDF.Users.find(x => x.userID == props.usernumber);\r\n\r\n if (user && user.hasOwnProperty('userUDFValue')) {\r\n userV = user.userUDFValue;\r\n }\r\n\r\n return userV;\r\n }\r\n }\r\n else {\r\n return UDF.Value;\r\n }\r\n }\r\n\r\n return (\r\n \r\n {UDF.UdfDescription} \r\n
\r\n );\r\n};\r\n\r\nUDFDateTime.propTypes = {\r\n UDF: PropTypes.object.isRequired\r\n};\r\n\r\nexport default UDFDateTime;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingBottom: \"20px\"\r\n }\r\n}));\r\n\r\nconst UDFNumber = (props) => {\r\n const { UDF } = props;\r\n const classes = useStyles();\r\n\r\n const onChangeHandler = (event) => {\r\n props.changecontrolvalue(event, props.bookingID, UDF.UDFCategoryName, UDF.UDFID);\r\n }\r\n\r\n const GetUserMemberValue = () => {\r\n if (props.isMembership) {\r\n let userV = \"\";\r\n\r\n if (UDF.Users.filter(x => x.userID == props.usernumber).length > 0) {\r\n let user = UDF.Users.find(x => x.userID == props.usernumber);\r\n\r\n if (user && user.hasOwnProperty('userUDFValue')) {\r\n userV = user.userUDFValue;\r\n }\r\n\r\n return userV;\r\n }\r\n }\r\n else {\r\n return UDF.Value;\r\n }\r\n }\r\n\r\n return (\r\n \r\n {UDF.UdfDescription} \r\n
\r\n );\r\n};\r\n\r\nUDFNumber.propTypes = {\r\n UDF: PropTypes.object.isRequired\r\n};\r\n\r\nexport default UDFNumber;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Select, MenuItem, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingBottom: \"20px\",\r\n marginLeft: \"15px\"\r\n }\r\n}));\r\n\r\nconst UDFSelect = (props) => {\r\n const { UDF } = props;\r\n const classes = useStyles();\r\n\r\n const onChangeHandler = (event) => {\r\n props.changecontrolvalue(event, props.bookingID, UDF.UDFCategoryName, UDF.UDFID);\r\n }\r\n\r\n const GetUserMemberValue = () => {\r\n if (props.isMembership) {\r\n let userV = \"\";\r\n\r\n if (UDF.Users.filter(x => x.userID == props.usernumber).length > 0) {\r\n let user = UDF.Users.find(x => x.userID == props.usernumber);\r\n\r\n if (user && user.hasOwnProperty('userUDFValue')) {\r\n userV = user.userUDFValue;\r\n }\r\n\r\n return userV;\r\n }\r\n }\r\n else {\r\n return UDF.Value;\r\n }\r\n }\r\n\r\n return (\r\n \r\n {UDF.UdfDescription} \r\n\r\n \r\n {UDF.Picklist.map(picklist => (\r\n \r\n ))}\r\n \r\n {/* */}\r\n
\r\n );\r\n};\r\n\r\nUDFSelect.propTypes = {\r\n UDF: PropTypes.object.isRequired\r\n};\r\n\r\nexport default UDFSelect;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport NumberFormat from 'react-number-format';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport TextField from '@material-ui/core/TextField';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n\r\n}));\r\n\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nNumberInput.propTypes = {\r\n MinValue: PropTypes.number,\r\n MaxValue: PropTypes.number,\r\n onValidationChange: PropTypes.func,\r\n OnInputChange: PropTypes.func.isRequired,\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, CardActions, Typography, Button, CardHeader } from '@material-ui/core';\r\nimport { genfunction } from 'helpers';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n card: {\r\n \"&:hover\": {\r\n transform: 'scale(1.02)',\r\n WebkitTransform: 'scale(1.02)',\r\n boxShadow: \"inset 0 0 0 2px\",\r\n cursor: 'pointer'\r\n }\r\n },\r\n headerbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}));\r\n\r\nconst DisplayCard = props => {\r\n\r\n const { Title, Description, ButtonText, ButtonCallBack, ButtonCallBackReference } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(Description))}\r\n
\r\n \r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(props.Header))}\r\n \r\n {getSubTitle(props.SubTitle)}\r\n {getSubTitle(props.SubTitle2)}\r\n
\r\n );\r\n};\r\n\r\nTitle.propTypes = {\r\n Header: PropTypes.string,\r\n SubTitle: PropTypes.string,\r\n SubTitle2: PropTypes.string\r\n};\r\n\r\nexport default Title;\r\n","import React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Avatar, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n minHeight: 'fit-content'\n },\n avatar: {\n width: 60,\n height: 60\n },\n name: {\n marginTop: theme.spacing(1)\n }\n}));\n\nconst Profile = props => {\n const { className, ...rest } = props;\n\n const classes = useStyles();\n\n const user = {\n name: 'Centaman Dev',\n avatar: '/unset.png',\n bio: 'Dev'\n };\n\n return (\n {page.icon}
\n {page.title}\n \n \n ))}\n \n );\n};\n\nSidebarNav.propTypes = {\n className: PropTypes.string,\n pages: PropTypes.array.isRequired\n};\n\nexport default SidebarNav;\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Typography, Button, colors } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n backgroundColor: colors.grey[50]\n },\n media: {\n paddingTop: theme.spacing(2),\n height: 80,\n textAlign: 'center',\n '& > img': {\n height: '100%',\n width: 'auto'\n }\n },\n content: {\n padding: theme.spacing(1, 2)\n },\n actions: {\n padding: theme.spacing(1, 2),\n display: 'flex',\n justifyContent: 'center'\n }\n}));\n\nconst UpgradePlan = props => {\n const { className, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n
\n \n \n Upgrade to PRO\n \n \n Upgrade to Devias Kit PRO and get even more components\n \n
\n \n \n Upgrade\n \n
\n \n );\n};\n\nUpgradePlan.propTypes = {\n className: PropTypes.string\n};\n\nexport default UpgradePlan;\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Divider, Drawer } from '@material-ui/core';\nimport DashboardIcon from '@material-ui/icons/Dashboard';\nimport PeopleIcon from '@material-ui/icons/People';\nimport ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';\nimport TextFieldsIcon from '@material-ui/icons/TextFields';\nimport ImageIcon from '@material-ui/icons/Image';\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport LockOpenIcon from '@material-ui/icons/LockOpen';\n\nimport { Profile, SidebarNav, UpgradePlan } from './components';\n\nconst useStyles = makeStyles(theme => ({\n drawer: {\n width: 240,\n [theme.breakpoints.up('lg')]: {\n marginTop: 64,\n height: 'calc(100% - 64px)'\n }\n },\n root: {\n backgroundColor: theme.palette.white,\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n padding: theme.spacing(2)\n },\n divider: {\n margin: theme.spacing(2, 0)\n },\n nav: {\n marginBottom: theme.spacing(2)\n }\n}));\n\nconst Sidebar = props => {\n const { open, variant, onClose, className, ...rest } = props;\n\n const classes = useStyles();\n\n const pages = [\n {\n title: 'Dashboard',\n href: '/dashboard',\n icon: \r\n \r\n \r\n {\"New Version\"}\r\n \r\n \r\n \r\n {NewVersionAvailableMsg}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport default VersionCheck;","import React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { makeStyles } from '@material-ui/styles';\nimport { AppBar, Toolbar, Badge, IconButton, Button, Hidden } from '@material-ui/core';\nimport { withRouter } from 'react-router'\nimport { useSelector } from 'react-redux';\nimport CartDiscardTimeController from 'helpers/CartDiscardTimeController';\nimport {\n Restaurant as RestaurantIcon, Person as PersonIcon, ConfirmationNumber as ConfirmationNumberIcon,\n AddShoppingCart, CardGiftcard\n} from '@material-ui/icons';\nimport Link from '@material-ui/core/Link';\nimport Icon from '@material-ui/core/Icon';\nimport VersionCheck from 'helpers/VersionCheck';\n\nconst { RedirectLogoURL, GiftCardsHeading, HeaderExtraText, TicketsHeading, MembershipsHeading, TicketLinkHeading,\n FoodOrderLinkHeading, DonationLinkHeading, ManageMyBookingButtonTitle, ManageMyBookingButtonShow } = window['runConfig'];\n\nconst useStyles = makeStyles(theme => ({\n root: {\n '& > *': {\n margin: theme.spacing(0.3)\n },\n float: 'left',\n marginLeft: '20px',\n color: 'white',\n marginTop: '5px'\n },\n flexGrow: {\n flexGrow: 1\n },\n iconSize: {\n fontSize: \"2rem\"\n },\n desktopView: {\n color: theme.palette.primary.contrastText,\n fontSize: '14px', marginTop: '5px',\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"',\n cursor: 'pointer'\n },\n mobileView: {\n color: theme.palette.primary.contrastText,\n fontSize: '8px', marginTop: '8px',\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"',\n cursor: 'pointer'\n },\n headerExtraTxtHide: {\n display: 'none'\n },\n headerExtraTxtShow: {\n display: 'block'\n },\n disabledlink: {\n pointerEvents: 'none'\n }\n}));\n\nconst Topbar = props => {\n const { className, onSidebarOpen, ...rest } = props;\n\n const classes = useStyles();\n\n\n\n const events = useSelector(state => state.reducerShopCart.events);\n const memberships = useSelector(state => state.reducerShopCart.MembershipPackages);\n const GATickets = useSelector(state => state.reducerShopCart.GATickets);\n const managemybkng = useSelector(state => state.reducerShopCart.managemybooking);\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\n const giftcards = useSelector(state => state.reducerGiftCards);\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\n\n const handleClick = event => {\n if (managemybkng === false) {\n if (orderProducts && orderProducts.length > 0) {\n props.history.push('/revieworderproducts');\n }\n else\n props.history.push('/Checkout');\n }\n };\n\n const CountGiftCards = () => {\n let totalGFs = 0;\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\n totalGFs = giftcards.giftcards.filter(x => x.AddedToCart === true && x.CartQty > 0).map(({ CartQty }) => CartQty).reduce((sum, i) => sum + i, 0);\n }\n\n return totalGFs;\n }\n\n\n const eventitemcount = () => {\n if ((events == null || events.length == 0) && (memberships == null || memberships.length == 0) && (GATickets == null || GATickets.length == 0) && (orderProducts == null || orderProducts.length == 0) && (giftcards.giftcards == null || giftcards.giftcards.length == 0) && (donationProducts == null || donationProducts.length == 0))\n return 0;\n else {\n let qty = 0;\n events.forEach(event => {\n event.TourProducts.forEach(product => {\n qty += product.Quantity;\n })\n });\n\n GATickets.forEach(ticket => {\n qty += ticket.Quantity;\n })\n\n donationProducts.forEach(product => {\n qty++;\n })\n\n if (memberships && memberships.length > 0) {\n qty++;\n }\n\n orderProducts.forEach(p => {\n qty += p.Quantity;\n });\n\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\n qty += CountGiftCards();\n }\n\n return qty;\n }\n }\n\n return (\n {HeaderExtraText}
\n{HeaderExtraText}
\n{HeaderExtraText}
\n\n\n \n\n {TicketsHeading && TicketsHeading != \"\" ?\n \n \n \n : \"\"}\n\n \n\n \n\n {TicketsHeading && TicketsHeading != \"\" ?\n \n \n \n : \"\"}\n \n\n \n {TicketsHeading && TicketsHeading != \"\" ?\n \n \n \n : \"\"}\n \n\n \n\n {TicketLinkHeading && TicketLinkHeading != \"\" ?\n \n \n \n \n : \"\"}\n \n\n \n\n {TicketLinkHeading && TicketLinkHeading != \"\" ?\n \n \n \n \n : \"\"}\n \n\n \n\n {TicketLinkHeading && TicketLinkHeading != \"\" ?\n \n \n \n \n : \"\"}\n \n\n\n\n\n \n\n\n {MembershipsHeading && MembershipsHeading != \"\" ?\n \n \n { props.history.push('/memberships'); }}>\n {MembershipsHeading}\n \n \n : \"\"}\n\n \n\n \n {MembershipsHeading && MembershipsHeading != \"\" ?\n \n \n { props.history.push('/memberships'); }}>\n {MembershipsHeading}\n \n \n : \"\"}\n \n\n\n \n\n {MembershipsHeading && MembershipsHeading != \"\" ?\n \n \n { props.history.push('/memberships'); }}>\n {MembershipsHeading}\n \n \n : \"\"}\n\n \n\n \n {GiftCardsHeading && GiftCardsHeading != \"\" ?\n \n \n { props.history.push('/giftcards'); }}>\n {GiftCardsHeading}\n \n \n : \"\"}\n \n\n \n {GiftCardsHeading && GiftCardsHeading != \"\" ?\n \n \n { props.history.push('/giftcards'); }}>\n {GiftCardsHeading}\n \n \n : \"\"}\n \n\n \n {GiftCardsHeading && GiftCardsHeading != \"\" ?\n \n \n { props.history.push('/giftcards'); }}>\n {GiftCardsHeading}\n \n \n : \"\"}\n \n\n\n \n {FoodOrderLinkHeading && FoodOrderLinkHeading != \"\" ?\n \n \n { props.history.push('/orderlocation'); }}>\n {FoodOrderLinkHeading}\n \n \n : \"\"}\n \n\n \n {FoodOrderLinkHeading && FoodOrderLinkHeading != \"\" ?\n \n \n { props.history.push('/orderlocation'); }}>\n {FoodOrderLinkHeading}\n \n \n : \"\"}\n \n\n \n {FoodOrderLinkHeading && FoodOrderLinkHeading != \"\" ?\n \n \n { props.history.push('/orderlocation'); }}>\n {FoodOrderLinkHeading}\n \n \n : \"\"}\n \n\n\n \n {DonationLinkHeading && DonationLinkHeading != \"\" ?\n \n \n volunteer_activism \n { props.history.push('/donationareas'); }}>\n {DonationLinkHeading}\n \n \n : \"\"}\n \n\n \n {DonationLinkHeading && DonationLinkHeading != \"\" ?\n \n \n volunteer_activism \n { props.history.push('/donationareas'); }}>\n {DonationLinkHeading}\n \n \n : \"\"}\n \n\n \n {DonationLinkHeading && DonationLinkHeading != \"\" ?\n \n \n volunteer_activism \n { props.history.push('/donationareas'); }}>\n {DonationLinkHeading}\n \n \n : \"\"}\n \n\n
\n }\n\n \n\n <>\n {!managemybkng && ManageMyBookingButtonShow ?\n \n : \"\"}\n\n {!managemybkng ?\n \n {children} \n
\n );\n};\n\nMinimal.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string\n};\n\nexport default Minimal;\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport {\n Card,\n CardHeader,\n CardContent,\n CardActions,\n Divider,\n Grid,\n Button,\n TextField\n} from '@material-ui/core';\n\nconst useStyles = makeStyles(() => ({\n root: {}\n}));\n\nconst AccountDetails = props => {\n const { className, ...rest } = props;\n\n const classes = useStyles();\n\n const [values, setValues] = useState({\n firstName: 'Shen',\n lastName: 'Zhi',\n email: 'shen.zhi@devias.io',\n phone: '',\n state: 'Alabama',\n country: 'USA'\n });\n\n const handleChange = event => {\n setValues({\n ...values,\n [event.target.name]: event.target.value\n });\n };\n\n const states = [\n {\n value: 'alabama',\n label: 'Alabama'\n },\n {\n value: 'new-york',\n label: 'New York'\n },\n {\n value: 'san-francisco',\n label: 'San Francisco'\n }\n ];\n\n return (\n \n
\n \n \n John Doe\n \n \n {user.city}, {user.country}\n \n \n {moment().format('hh:mm A')} ({user.timezone})\n \n
\n \n Profile Completeness: 70% \n
\n \n \n \n \n
\n );\n};\n\nexport default Account;\n","import React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport Button from '@material-ui/core/Button';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { actionCalendarNavCalendarView, actionCalendarNavListView } from 'actions';\n\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n // border: \"solid 1px\",\n '& > *': {\n margin: theme.spacing(1),\n },\n },\n}));\n\n\n\nconst handleCalendarViewChange = (viewType, dispatch) => {\n\n if (viewType === \"CalendarView\") {\n actionCalendarNavCalendarView(dispatch);\n }\n else {\n actionCalendarNavListView(dispatch);\n }\n\n}\n\nconst CalendarNavBar = props => {\n const classes = useStyles();\n const dispatch = useDispatch();\n\n const bookingType = useSelector(state => state.reducerBookingTypes.bookingType);\n const displayAreasState = useSelector(state => state.reducerDisplayAreas);\n const [disableCalendarLink, setdisableCalendarLink] = React.useState(false);\n\n useEffect(() => {\n\n if (props.Path == \"/calendar/:id\") {\n\n if (props.bookingType != undefined) {\n if (props.bookingType && props.bookingType.ForceListView) {\n setdisableCalendarLink(true);\n }\n else {\n setdisableCalendarLink(false);\n }\n }\n }\n else {\n if (displayAreasState.displayAreas !== undefined && displayAreasState.displayAreas.length > 0) {\n let newDisplayAreas = JSON.parse(JSON.stringify(displayAreasState.displayAreas));\n let newObj = { ...newDisplayAreas.filter(x => x.DisplayAreaNo == props.urlID)[0] };\n\n if (newObj && newObj.ForceListView) {\n setdisableCalendarLink(true);\n }\n else {\n setdisableCalendarLink(false);\n }\n }\n }\n\n }, [bookingType, displayAreasState]);\n\n\n return (\n \n \n \n \n \n
\n );\n}\n\nexport default CalendarNavBar;\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Card, CardHeader, CardContent, Typography, Grid, Hidden } from '@material-ui/core';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { actionGetExtraItem, actionIncreaseQuantity } from 'actions';\r\nimport { genfunction } from '../../helpers';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { NumberSpinner } from '../InputControls'\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\n\r\nconst { OtherExtraItemHeader } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%'\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n hidetopheader: {\r\n display: 'none'\r\n },\r\n cardcontent: {\r\n \"&:last-child\": {\r\n paddingBottom: 5\r\n }\r\n }\r\n}));\r\n\r\nconst ExtraItemsProducts = (props) => {\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const dispatch = useDispatch()\r\n const reducerAppLoader = useSelector(state => state.reducerAppLoader.loading);\r\n\r\n\r\n const changeQuantityHandler = (reference, quantity) => {\r\n\r\n if (props.allowQuantityChange === false) {\r\n seterrorMsg(\"Please remove coupon code to make futher changes.\");\r\n return;\r\n }\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n if (cartEvents[0].TourProducts.filter(x => x.AffectsCapacity).length > 0) {\r\n actionIncreaseQuantity(dispatch, reference.TourProductID, quantity, true, reference.MinimumTickets, reference.MaximumTickets);\r\n\r\n if (bkngType.AddChaperoneTickets && bkngType.ShowTourProductsBasedOnGroupSize)\r\n calculateChaperoneTickets();\r\n\r\n return;\r\n }\r\n }\r\n\r\n actionIncreaseQuantity(dispatch, reference.TourProductID, quantity, false, reference.MinimumTickets, reference.MaximumTickets);\r\n\r\n if (bkngType.AddChaperoneTickets && bkngType.ShowTourProductsBasedOnGroupSize)\r\n calculateChaperoneTickets();\r\n }\r\n\r\n const apiData = useSelector(state => state.reducerExtraItems.extraItem);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0] : null;\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n\r\n const calculateChaperoneTickets = () => {\r\n\r\n let TotalTickets = 0;\r\n\r\n if (apiData && apiData.TourProducts.filter(p => p.AffectsCapacity && p.TourProductID != bkngType.ChaperoneTourProductID).length > 0) {\r\n TotalTickets = apiData.TourProducts.filter(p => p.AffectsCapacity && p.TourProductID != bkngType.ChaperoneTourProductID\r\n ).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = (b === undefined || b.Quantity === undefined) ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n\r\n let noOfChaperoneTickets =\r\n (TotalTickets !== 0 && bkngType.NumberOfTicketsRequiredPerChaperone !== 0) ? TotalTickets / bkngType.NumberOfTicketsRequiredPerChaperone : 0;\r\n\r\n noOfChaperoneTickets = noOfChaperoneTickets >= 1 ? noOfChaperoneTickets : 0;\r\n noOfChaperoneTickets = bkngType.RoundChaperoneTicketsUp ? Math.ceil(noOfChaperoneTickets) : Math.floor(noOfChaperoneTickets)\r\n\r\n actionIncreaseQuantity(dispatch, bkngType.ChaperoneTourProductID, noOfChaperoneTickets, false);\r\n\r\n }\r\n\r\n const CalculateMaxTickets = (TourProductID) => {\r\n let shopCartConsumed = 0;\r\n\r\n if (!props.isEditEvent)\r\n if (cartEvents && cartEvents.length > 0) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == apiData.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0) {\r\n shopCartConsumed = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n let consumedQty = 0;\r\n if (apiData.TourProducts.filter(p => p.TourProductID != TourProductID && p.AffectsCapacity && p.TourProductID != bkngType.ChaperoneTourProductID).length > 0) {\r\n consumedQty = apiData.TourProducts.filter(p => p.TourProductID != TourProductID && p.AffectsCapacity\r\n && p.TourProductID != bkngType.ChaperoneTourProductID\r\n ).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = (b === undefined || b.Quantity === undefined) ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n\r\n let MaximumTickets = genfunction.IsNotNullOrEmptyOrUndefined(props.groupSize) ? props.groupSize.toLowerCase().split(\" to \")[1] : bkngType.MaximumTickets;\r\n\r\n return bkngType !== undefined ? MaximumTickets - consumedQty - shopCartConsumed : 0;\r\n }\r\n\r\n const replaceEscapeCharacters = (item) => {\r\n var itemValue = item.split(\"\\\\r\\\\n\").join(\"\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (props.isEditEvent && reducerAppLoader === false)\r\n reloadQuantity();\r\n\r\n }, [reducerAppLoader]);\r\n\r\n useEffect(() => {\r\n if (props.isMMB)\r\n actionGetExtraItem(dispatch, props.tourEventId, props.ismembershipapplied, props.membercostrate, props.isIDME, props.isIDMECostrate, props.organizationCostRate);\r\n\r\n }, [])\r\n\r\n const reloadQuantity = () => {\r\n\r\n if (cartEvents && cartEvents.length > 0 && cartEvents.find(x => x.TourEventID === props.tourEventId)) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID === props.tourEventId);\r\n\r\n if (apiData.hasOwnProperty(\"TourProducts\")) {\r\n\r\n apiData.TourProducts.map(p => {\r\n if (cartTourEvent.TourProducts.filter(x => x.TourProductID === p.TourProductID).length > 0) {\r\n let pQty = cartTourEvent.TourProducts.filter(x => x.TourProductID === p.TourProductID)[0].Quantity;\r\n actionIncreaseQuantity(dispatch, p.TourProductID, pQty, true);\r\n\r\n }\r\n\r\n return p\r\n });\r\n }\r\n\r\n }\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n\r\n return (\r\n
\r\n \r\n \r\n\r\n \r\n {apiData.hasOwnProperty(\"TourProducts\") ?\r\n apiData.TourProducts.map((product, i) => {\r\n\r\n return product.AffectsCapacity && product.AvailableOnline && product.TourProductID !== bkngType.ChaperoneTourProductID &&\r\n (genfunction.IsNotNullOrEmptyOrUndefined(props.groupSize) ? product.LimitDisplayOnGroupSize && product.GroupSize === props.groupSize : true)\r\n && product.PriceMatrix !== undefined && product.PriceMatrix.length > 0 ?\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n : null\r\n }) : null}\r\n\r\n \r\n\r\n {apiData.hasOwnProperty(\"TourProducts\") ?\r\n apiData.TourProducts.filter(x => x.AffectsCapacity == false && x.AvailableOnline == true && x.PriceMatrix !== undefined && x.PriceMatrix.length > 0\r\n && x.TourProductID !== bkngType.ChaperoneTourProductID).length > 0 ?\r\n\r\n {OtherExtraItemHeader} \r\n : null\r\n : null}\r\n\r\n \r\n {apiData.hasOwnProperty(\"TourProducts\") ?\r\n apiData.TourProducts.map(product => {\r\n\r\n return product.AffectsCapacity == false && product.AvailableOnline && product.PriceMatrix !== undefined && product.PriceMatrix.length > 0\r\n && product.TourProductID !== bkngType.ChaperoneTourProductID ?\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n : null\r\n }) : null}\r\n\r\n \r\n\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ExtraItemsProducts;\r\n\r\n\r\nfunction ShowStartAndEndTime(bkngType, apiData) {\r\n let time = \"\";\r\n\r\n if (bkngType) {\r\n\r\n if (bkngType.ShowStartTime) {\r\n time += genfunction.GetEventDateReceiptFormat(apiData.EventStartDateTime);\r\n }\r\n\r\n if (bkngType.ShowEndTime && !bkngType.ShowStartTime) {\r\n time += genfunction.GetEventDateReceiptFormat(apiData.EventStartDateTime);\r\n }\r\n\r\n if (bkngType.ShowEndTime && bkngType.ShowStartTime) {\r\n time += ' - ' + genfunction.AppendEndTime(apiData.EventEndDateTime);\r\n }\r\n\r\n if (!bkngType.ShowStartTime && !bkngType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormatwithoutTime(apiData.EventStartDateTime);\r\n }\r\n }\r\n\r\n return time;\r\n}\r\n\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { UDFText, UDFCheckBox, UDFDateTime, UDFNumber, UDFSelect } from '../InputControls'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n}));\r\n\r\nconst UDFDataField = (props) => {\r\n\r\n const GetDataField = (type, UDF, props) => {\r\n\r\n switch (type) {\r\n case \"Text\": {\r\n if (UDF.Picklist && UDF.Picklist.length > 0) {\r\n return \r\n\r\n {bookingUDFS.length > 0 && bookingUDFS.filter(x => x.BookingTypeID === props.bookingtypeID).length > 0 ?\r\n bookingUDFS.filter(x => x.BookingTypeID === props.bookingtypeID)[0].UDFCategories != null &&\r\n bookingUDFS.filter(x => x.BookingTypeID === props.bookingtypeID)[0].UDFCategories.map((bookingUdfCategory, i) => (\r\n \r\n \r\n {bookingUdfCategory.UserDefinedFields.filter(x => x.toureventID === props.toureventID).map((udfs) => (\r\n <>\r\n \r\n {udfs.UDFDescription} {udfs.IsRequired ? '(required)' : ''}\r\n \r\n \r\n\r\n \r\n )) : null}\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default BookingUDFields;\r\n\r\n\r\n\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Typography, Grid, Card, CardHeader, CardContent, Hidden } from '@material-ui/core';\r\nimport { useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { NumberSpinner } from 'components/InputControls';\r\n\r\nconst { ChaperoneHeading } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n padding: \"7px 0px 7px 25px\"\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n }\r\n}));\r\n\r\nconst Chaperone = (props) => {\r\n const classes = useStyles();\r\n\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0];\r\n const apiData = useSelector(state => state.reducerExtraItems.extraItem);\r\n\r\n const productPrice = (priceMatrix) => {\r\n\r\n return priceMatrix !== undefined && priceMatrix.length > 0 ?\r\n genfunction.ccyFormat(priceMatrix[0].Price) : genfunction.ccyFormat(0);\r\n }\r\n\r\n return (\r\n \r\n\r\n {apiData.hasOwnProperty(\"TourProducts\") && apiData.TourProducts.filter(x => x.TourProductID === bkngType.ChaperoneTourProductID).length > 0 ?\r\n \r\n \r\n\r\n \r\n {apiData.TourProducts.filter(x => x.TourProductID === bkngType.ChaperoneTourProductID).map((product, i) => {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {product.TourProductName + ' ' + productPrice(product.PriceMatrix)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + productPrice(product.PriceMatrix)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + productPrice(product.PriceMatrix)} \r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n )\r\n })}\r\n \r\n\r\n \r\n \r\n : null}\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default Chaperone","import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { CardContent, FormControlLabel, CardHeader, Card, RadioGroup, Radio, Grid, FormHelperText } from '@material-ui/core'\r\nimport { genfunction } from 'helpers';\r\nimport { useSelector } from 'react-redux';\r\nimport { FormattedInputs } from 'components/InputControls';\r\n\r\nconst { CouponRemoveMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n padding: \"7px 0px 7px 25px\"\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n reverseOrder: {\r\n display: 'flex',\r\n flexDirection: 'column-reverse'\r\n }\r\n\r\n}));\r\n\r\nconst PaymentSelection = forwardRef((props, ref) => {\r\n\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [minDeposit, setMinDeposit] = useState(0);\r\n const [otherAmount, setOtherAmount] = useState('');\r\n\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0] : null;\r\n const apiData = useSelector(state => state.reducerExtraItems.extraItem);\r\n const reducerAppLoader = useSelector(state => state.reducerAppLoader.loading);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n\r\n const calculateMinimumDeposit = () => {\r\n\r\n // let MinDeposit = 0;\r\n\r\n // if (apiData && apiData.hasOwnProperty(\"TourProducts\") && apiData.TourEventID === props.toureventID && apiData.TourProducts.filter(x => x.Quantity !== 0 && x.TourProductID !== bkngType.ChaperoneTourProductID).length > 0)\r\n // apiData.TourProducts.filter(x => x.Quantity !== 0 && apiData.TourEventID === props.toureventID && x.TourProductID !== bkngType.ChaperoneTourProductID).map((product) => {\r\n // MinDeposit += (product.MinDepositPercent * product.ProductTotalAmount) / 100;\r\n // })\r\n\r\n // setMinDeposit(MinDeposit);\r\n // return MinDeposit;\r\n\r\n let minDeposit = genfunction.MinimumDepositCalculation(apiData, props.toureventID, bkngType.ChaperoneTourProductID);\r\n setMinDeposit(minDeposit);\r\n return minDeposit;\r\n }\r\n\r\n useEffect(() => {\r\n\r\n calculateMinimumDeposit();\r\n\r\n if (props.isEditEvent) {\r\n handleChange(props.paymentOption);\r\n }\r\n\r\n else {\r\n bkngType.DefaultToFullPayment ?\r\n props.onChangePaymentOption(\"FullPay\", apiData.TotalAmount ? apiData.TotalAmount : 0) :\r\n props.onChangePaymentOption(\"MinimumPay\", calculateMinimumDeposit())\r\n\r\n }\r\n\r\n }, [apiData]);\r\n\r\n\r\n useEffect(() => {\r\n\r\n if (props.isEditEvent && reducerAppLoader === false)\r\n reloadPaymentSelected();\r\n\r\n }, [reducerAppLoader]);\r\n\r\n\r\n const reloadPaymentSelected = () => {\r\n\r\n if (cartEvents && cartEvents.length > 0 && cartEvents.find(x => x.TourEventID === props.toureventID)) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID === props.toureventID);\r\n\r\n if (cartTourEvent && cartTourEvent.hasOwnProperty(\"PaymentOption\")) {\r\n\r\n if (cartTourEvent.PaymentOption === \"OtherPay\")\r\n setOtherAmount(cartTourEvent.TotalSelectedAmount);\r\n\r\n props.onChangePaymentOption(cartTourEvent.PaymentOption, cartTourEvent.TotalSelectedAmount);\r\n }\r\n\r\n }\r\n }\r\n\r\n useImperativeHandle(ref, () => ({\r\n validateAmountSelected() {\r\n if (props.amountSelected === \"\" || parseFloat(props.amountSelected) < minDeposit || parseFloat(props.amountSelected) > (apiData.TotalAmount ? apiData.TotalAmount : 0)) {\r\n Validated(false)\r\n return false;\r\n }\r\n else\r\n return true;\r\n }\r\n }));\r\n\r\n const handleOtherPrice = (event) => {\r\n setOtherAmount(event.target.value);\r\n props.onChangePaymentOption(\"OtherPay\", event.target.value);\r\n }\r\n\r\n const Validated = (val) => {\r\n if (val)\r\n seterrorMsg('');\r\n else\r\n seterrorMsg(\"Please enter valid amount\");\r\n }\r\n\r\n const checkIsRemoveCoupon = (value) => {\r\n\r\n if (cartEvents && cartEvents.length > 0 && cartEvents.find(x => x.TourEventID === props.toureventID)) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID === props.toureventID);\r\n\r\n if (cartTourEvent && cartTourEvent.hasOwnProperty(\"PaymentOption\")) {\r\n\r\n if (cartTourEvent.PaymentOption !== value && value === \"OtherPay\" && cartTourEvent.CouponItems.length > 0) {\r\n seterrorMsg(CouponRemoveMsg)\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n const handleChange = (value) => {\r\n\r\n if (props.isEditEvent) {\r\n checkIsRemoveCoupon(value);\r\n }\r\n\r\n if (value === \"FullPay\") {\r\n seterrorMsg('');\r\n setOtherAmount('');\r\n props.onChangePaymentOption(value, apiData.TotalAmount ? apiData.TotalAmount : 0);\r\n\r\n }\r\n else if (value === \"MinimumPay\") {\r\n seterrorMsg('');\r\n setOtherAmount('');\r\n props.onChangePaymentOption(value, calculateMinimumDeposit());\r\n\r\n }\r\n else if (value === \"OtherPay\") {\r\n props.onChangePaymentOption(value, otherAmount)\r\n\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n handleChange(value)}>\r\n\r\n \r\n\r\n \r\n {bkngType.AllowFlexiblePayment ?\r\n \r\n \r\n\r\n
Min (\".split(\"
\").join(\"\\n\") + genfunction.ccyFormat(minDeposit) + \")\"}\r\n />\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n {errorMsg} \r\n\r\n \r\n \r\n : null}\r\n \r\n\r\n \r\n \r\n \r\n
\r\n )\r\n})\r\n\r\nexport default PaymentSelection","import React, { useEffect, useState, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Button, Card, CardHeader, CardContent, Paper, Typography, Grid, Link } from '@material-ui/core';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { actionGetExtraItem, actionGetExtraItemAfterMembership } from 'actions';\r\nimport { actionShopCartAddEventWithTourHold, actionShopCartResetError, actionSetAddToCart } from 'actions';\r\nimport ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';\r\nimport { genfunction } from '../../helpers';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport ExtraItemsProducts from 'components/CalendarControls/ExtraItemsProducts';\r\nimport BookingUDFields from 'components/CalendarControls/BookingUDFields';\r\nimport Chaperone from './Chaperone';\r\nimport PaymentSelection from './PaymentSelection';\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions';\r\n\r\n\r\nconst { DisplayBookingTypeInfoCharacters, OrderItemsInCartError, PurchaseAsOrganizationButton, InvalidGroupSizeMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%'\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n arrowBtn: {\r\n float: 'left',\r\n marginLeft: '10px',\r\n marginTop: '3px'\r\n },\r\n BookingInfoCls: {\r\n paddingTop: '5px',\r\n paddingLeft: '16px',\r\n paddingRight: '16px',\r\n textAlign: 'justify'\r\n },\r\n readmoreBtn: {\r\n margin: 'auto',\r\n marginBottom: '10px',\r\n // marginTop: '5px'\r\n }\r\n}));\r\n\r\nconst ExtraItemDrawer = (props) => {\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [isredirectclicked, setisredirectclicked] = useState(false);\r\n const ref = useRef();\r\n\r\n const dispatch = useDispatch();\r\n const shopCartError = useSelector(state => state.reducerShopCart.error);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const apiData = useSelector(state => state.reducerExtraItems.extraItem);\r\n const tourEvents = useSelector(state => state.reducerExtraItems.extramItems);\r\n const isAddToCart = useSelector(state => state.reducerExtraItems.isAddToCart);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0];\r\n const [showMoreInfo, setShowMoreInfo] = useState(false);\r\n const [readmorebtnText, setreadmorebtnText] = useState('Read More');\r\n const bookingUDFS = useSelector(state => state.reducerBookingUserDefinedFields);\r\n const organizationList = useSelector(state => state.reducerOrganizationSection.organizationlist);\r\n const [saveBtn, setsaveBtn] = React.useState(false);\r\n\r\n const [state, setState] = useState({\r\n paymentOption: \"\",\r\n amountSelected: 0,\r\n\r\n });\r\n\r\n useEffect(() => {\r\n\r\n if (isredirectclicked) {\r\n if (shopCartError.length < 1) {\r\n props.callCheckout();\r\n }\r\n if (shopCartError.length > 0) {\r\n seterrorMsg(shopCartError);\r\n setisredirectclicked(false);\r\n }\r\n }\r\n\r\n }, [shopCartError, cartEvents]);\r\n\r\n useEffect(() => {\r\n\r\n if (props.isEditEvent)\r\n actionSetAddToCart(dispatch);\r\n\r\n }, [isAddToCart, apiData])\r\n\r\n const onChangePaymentOption = (paymentOptionSelected, paymentAmountSelected) => {\r\n setState({ ...state, amountSelected: genfunction.IsNotNullOrEmptyOrUndefined(paymentAmountSelected) ? parseFloat(paymentAmountSelected) : 0, paymentOption: paymentOptionSelected });\r\n }\r\n\r\n\r\n const redirectCall = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n if (ValidateBookingRequiredFields() && (genfunction.IsNotNullOrEmptyOrUndefined(props.groupSize) ? ValidateGroupQuanity() : ValidateQuanity())\r\n && (genfunction.IsShowPartPaymentSelection(apiData, bkngType, props.groupSize) ? ref.current.validateAmountSelected() : true)) {\r\n\r\n setisredirectclicked(true);\r\n\r\n setsaveBtn(true);\r\n\r\n setTimeout(() => {\r\n setsaveBtn(false);\r\n }, 1000)\r\n\r\n let filterdata = { ...apiData };\r\n filterdata.TourProducts = filterdata.TourProducts.filter(product => product.Quantity > 0);\r\n let cartdata = [...cartEvents];\r\n\r\n if (filterdata && filterdata.hasOwnProperty('BookingTypeID')) {\r\n let usealternamteMerchant = false;\r\n if (bkngType && bkngType.hasOwnProperty('UseAlternateMerchant')) {\r\n usealternamteMerchant = bkngType.UseAlternateMerchant;\r\n }\r\n\r\n filterdata.UseAlternateMerchant = usealternamteMerchant;\r\n\r\n }\r\n actionShopCartAddEventWithTourHold(dispatch, filterdata, cartdata, props.organizationID, props.groupSize, state.paymentOption, state.amountSelected, props.isEditEvent);\r\n //props.callCheckout();\r\n }\r\n }\r\n\r\n\r\n const ValidateQuanity = () => {\r\n let MinTicket = bkngType.MinimumTickets\r\n let MaxTicket = bkngType.MaximumTickets;\r\n\r\n let CartQty = 0;\r\n let NewQty = 0;\r\n let TotalTicketCount = 0;\r\n let SeatsAvailable = tourEvents.filter(x => x.TourEventID === props.tourEventId)[0].SeatsAvailable;\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == apiData.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0) {\r\n CartQty = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n NewQty = apiData.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n\r\n TotalTicketCount = props.isEditEvent ? NewQty : CartQty + NewQty;\r\n\r\n SeatsAvailable = props.isEditEvent ? CartQty + SeatsAvailable : SeatsAvailable;\r\n\r\n if (SeatsAvailable == 0 || apiData.BookNowOption != \"Book Now\" && !props.isEditEvent) {\r\n seterrorMsg(\"Tickets no longer available, please choose another time\");\r\n return false;\r\n }\r\n else if (NewQty > SeatsAvailable) {\r\n seterrorMsg(\"Maximum of \" + SeatsAvailable + \" tickets available\");\r\n return false;\r\n }\r\n else if (TotalTicketCount < MinTicket) {\r\n seterrorMsg(\"Minimum tickets per order is \" + MinTicket)\r\n return false;\r\n }\r\n else if (TotalTicketCount > MaxTicket) {\r\n seterrorMsg(\"Maximum of \" + MaxTicket + \" tickets allowed\")\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n const ValidateGroupQuanity = () => {\r\n const groupTicket = props.groupSize.toLowerCase().split(\" to \");\r\n\r\n let MinTicket = groupTicket[0];\r\n let MaxTicket = groupTicket[1];\r\n\r\n let CartQty = 0;\r\n let NewQty = 0;\r\n let TotalTicketCount = 0;\r\n let ChaperoneQty = 0;\r\n let SeatsAvailable = 0;\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == apiData.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0) {\r\n CartQty = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n NewQty = apiData.TourProducts.filter(p => p.AffectsCapacity\r\n && p.TourProductID != bkngType.ChaperoneTourProductID).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n\r\n\r\n let chaperoneTourProduct = apiData.TourProducts.filter(p => p.AffectsCapacity && p.TourProductID === bkngType.ChaperoneTourProductID);\r\n if (chaperoneTourProduct && chaperoneTourProduct.length > 0) {\r\n\r\n ChaperoneQty = apiData.TourProducts.filter(p => p.AffectsCapacity && p.TourProductID === bkngType.ChaperoneTourProductID)[0].Quantity;\r\n }\r\n\r\n TotalTicketCount = NewQty + ChaperoneQty;\r\n\r\n SeatsAvailable = props.isEditEvent ? CartQty + apiData.SeatsAvailable : apiData.SeatsAvailable;\r\n\r\n if (NewQty < MinTicket || NewQty > MaxTicket) {\r\n seterrorMsg(InvalidGroupSizeMsg + props.groupSize)\r\n return false;\r\n }\r\n\r\n else if (TotalTicketCount > SeatsAvailable) {\r\n seterrorMsg(\"Maximum of \" + SeatsAvailable + \" tickets available\");\r\n return false;\r\n }\r\n else if (SeatsAvailable == 0 || (apiData.BookNowOption != \"Book Now\" && !props.isEditEvent)) {\r\n seterrorMsg(\"Tickets no longer available, please choose another time\");\r\n return false;\r\n }\r\n\r\n else\r\n return true;\r\n }\r\n\r\n\r\n const ShowMoreInfoClick = () => {\r\n\r\n if (readmorebtnText === 'Read More') {\r\n setShowMoreInfo(true);\r\n setreadmorebtnText('Read Less');\r\n }\r\n else {\r\n setShowMoreInfo(false);\r\n setreadmorebtnText('Read More');\r\n }\r\n }\r\n\r\n\r\n const replaceEscapeCharacters = (item) => {\r\n var itemValue = item.split(\"\\\\r\\\\n\").join(\"Min (\".split(\"
\").join(\"\\n\") + genfunction.ccyFormat(minDeposit) + \")\"}\r\n />\r\n\r\n
\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (tourEvents && tourEvents.length > 0 && tourEvents !== 'nocontent' && tourEvents.find(x => x.TourEventID === props.tourEventId)) {\r\n let organizationCostRate = genfunction.IsNotNullOrEmptyOrUndefined(props.organizationID) && organizationList.length > 0 ? organizationList.filter(x => x.CustomerID === props.organizationID)[0].CostRateID : \"\";\r\n\r\n if (!props.isEditEvent || (!props.isContinueToExtraItemDrawer && apiData.TourEventID !== props.tourEventId)) {\r\n actionGetExtraItem(dispatch, props.tourEventId, props.ismembershipapplied, props.membercostrate, props.isIDME, props.isIDMECostrate, organizationCostRate)\r\n }\r\n else if (props.isEditEvent && !props.isContinueToExtraItemDrawer && (props.ismembershipapplied || props.isIDME)) {\r\n actionGetExtraItemAfterMembership(dispatch, apiData, props.tourEventId, props.ismembershipapplied, props.membercostrate, props.isIDME, props.isIDMECostrate, organizationCostRate)\r\n }\r\n }\r\n\r\n }, [tourEvents]);\r\n\r\n useEffect(() => {\r\n\r\n if (apiData && apiData.TourEventID !== props.tourEventId)\r\n actionStartAppLoader(dispatch);\r\n\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [apiData])\r\n\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n actionShopCartResetError(dispatch);\r\n }\r\n\r\n const GetBookingInfo = (bookingInfo) => {\r\n\r\n if (showMoreInfo) {\r\n return bookingInfo.substring(0, bookingInfo.length - 1);\r\n }\r\n\r\n return bookingInfo.substring(0, DisplayBookingTypeInfoCharacters);\r\n }\r\n\r\n\r\n const ValidateBookingRequiredFields = () => {\r\n let validate = true;\r\n\r\n if (bookingUDFS.bookingUDFs.length > 0 && bookingUDFS.bookingUDFs.filter(x => x.BookingTypeID === props.bookingtypeID).length > 0) {\r\n let booking = bookingUDFS.bookingUDFs.filter(x => x.BookingTypeID == props.bookingtypeID)[0];\r\n\r\n if (booking.UDFCategories && booking.UDFCategories.length > 0) {\r\n booking.UDFCategories.map(udfCategories => {\r\n\r\n let udfCat = { ...udfCategories };\r\n\r\n if (udfCat.UserDefinedFields && udfCat.UserDefinedFields.length > 0 && validate) {\r\n udfCat.UserDefinedFields.filter(x => x.toureventID > 0).map(UDF => {\r\n\r\n if (UDF.IsRequired && UDF.hasOwnProperty('Value') && validate) {\r\n\r\n if ((UDF.UDFType === \"Text\" || UDF.UDFType === \"Decimal\" || UDF.UDFType === \"Date\") && UDF.Value.length < 1) {\r\n validate = false;\r\n seterrorMsg('Please fill all required UDFs.');\r\n }\r\n else if (UDF.UDFType === \"Bit\" && (UDF.Value === false || UDF.Value.length < 1)) {\r\n validate = false;\r\n seterrorMsg('Please fill all required UDFs.');\r\n }\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n return validate;\r\n }\r\n return (\r\n
\r\n \r\n \r\n \r\n {window.matchMedia(\"(min-width: 600px)\").matches ? \"\" : { props.toggleDrawer(\"right\", false) }} />}\r\n {apiData.hasOwnProperty(\"EventName\") ? apiData.EventName : null}\r\n \r\n \r\n \r\n {bkngType !== undefined && bkngType.hasOwnProperty(\"BookingTypeInfo\") ? ReactHtmlParser(replaceEscapeCharacters(GetBookingInfo(bkngType.BookingTypeInfo ? bkngType.BookingTypeInfo : \"\"))) : null}\r\n \r\n\r\n\r\n ShowMoreInfoClick()}\r\n style={{ display: bkngType.BookingTypeInfo && bkngType.BookingTypeInfo.length < DisplayBookingTypeInfoCharacters ? 'none' : 'block' }}\r\n >\r\n {readmorebtnText}\r\n \r\n\r\n \r\n {bkngType.AllowedCustomerTypes === 'All' && !bkngType.ShowTourProductsBasedOnGroupSize && !genfunction.IsNotNullOrEmptyOrUndefined(props.organizationID) ?\r\n \r\n \r\n \r\n \r\n \r\n : null}\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n Tax = {genfunction.ccyFormat(apiData.TaxAmount ? apiData.TaxAmount : 0)} \r\n \r\n\r\n \r\n Total = {genfunction.ccyFormat(apiData.TotalAmount ? apiData.TotalAmount : 0)} \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ExtraItemDrawer;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Card, CardHeader, CardContent, Typography, Grid, TextField, Radio, FormControlLabel, RadioGroup } from '@material-ui/core';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { genfunction } from 'helpers';\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { actionGetOrganizationSection, actionResetOrganizationSection } from 'actions/actionOrganizationSection';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\n\r\nconst { OrganizationNameHeader, OrganizationInstructionText, OrganizationChangePopupMsg, PurchaseOrganizationBookingNotAllowedForMembership } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n OrganizationInfoCls: {\r\n padding: '16px',\r\n textAlign: 'justify'\r\n },\r\n\r\n}));\r\n\r\nconst OrganizationSection = (props) => {\r\n const classes = useStyles();\r\n\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [colorState, setColorState] = React.useState('');\r\n const dispatch = useDispatch();\r\n\r\n const reducerOrganizationSection = useSelector(state => state.reducerOrganizationSection);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0] : null;\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const countryandstates = useSelector(state => state.reducerCountryAndState.countryandstate);\r\n let defaultCountry = countryandstates && countryandstates.length > 0 ? countryandstates[0].Country : \"\";\r\n\r\n useEffect(() => {\r\n\r\n if (reducerOrganizationSection.organizationlisterror !== undefined && reducerOrganizationSection.organizationlisterror.length > 0) {\r\n seterrorMsg(reducerOrganizationSection.organizationlisterror);\r\n }\r\n }, [reducerOrganizationSection.organizationlisterror]);\r\n\r\n useEffect(() => {\r\n if (reducerOrganizationSection.loading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [reducerOrganizationSection.loading]);\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (bkngType.RestrictCompanyListByCostRate) {\r\n let costRateList = Object.keys(bkngType.AllowedCostRateIDs).map(function (k) { return bkngType.AllowedCostRateIDs[k].CostRateID }).join(\",\");\r\n actionGetOrganizationSection(dispatch, costRateList.toString());\r\n\r\n }\r\n else\r\n actionResetOrganizationSection(dispatch);\r\n\r\n if (genfunction.IsNotNullOrEmptyOrUndefined(props.organizationID))\r\n handleChange(\"Organization\");\r\n\r\n\r\n }, [])\r\n\r\n const errorcancelhandle = () => {\r\n if (reducerOrganizationSection.organizationlisterror.length > 0)\r\n actionResetOrganizationSection(dispatch)\r\n\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const handleChange = (value) => {\r\n\r\n if (value === \"Organization\")\r\n props.handleChange(true)\r\n\r\n else {\r\n props.handleChange(false);\r\n props.onChange(null);\r\n }\r\n\r\n }\r\n\r\n const validateChangeOrganization = (event, value) => {\r\n\r\n if (membershipPackages && membershipPackages.length > 0) {\r\n setColorState('info');\r\n seterrorMsg(PurchaseOrganizationBookingNotAllowedForMembership);\r\n }\r\n else if (genfunction.IsOrganization(cartEvents)) {\r\n\r\n let indexOrg = cartEvents.findIndex(x => x.OrganizationID !== \"\" && x.TourEventID !== props.tourEventId);\r\n\r\n if (indexOrg >= 0 && value && cartEvents[indexOrg].OrganizationID !== value.CustomerID)\r\n seterrorMsg(OrganizationChangePopupMsg);\r\n else\r\n props.onChange(value);\r\n }\r\n\r\n else\r\n props.onChange(value);\r\n }\r\n \r\n let organizationTxt = genfunction.GetValueFromCountryAndState(countryandstates, defaultCountry, \"OrganizationText\");\r\n\r\n return (\r\n \r\n \r\n \r\n {bkngType.AllowedCustomerTypes === \"All\" && bkngType.ShowTourProductsBasedOnGroupSize ?\r\n\r\n \r\n \r\n handleChange(value)}\r\n >\r\n\r\n \r\n \r\n \r\n : null\r\n }\r\n {props.showOrganization || bkngType.RequireCompanyName || (!bkngType.ShowTourProductsBasedOnGroupSize && props.isContinueToGroupDrawer) ?\r\n\r\n \r\n\r\n \r\n {reducerOrganizationSection.organizationlist && reducerOrganizationSection.organizationlist.length > 0 ?\r\n {\r\n if (option.hasOwnProperty('CustomerName')) {\r\n return option.CustomerName;\r\n }\r\n\r\n return option.toString();\r\n }}\r\n value={genfunction.IsNotNullOrEmptyOrUndefined(props.organizationID) ?\r\n reducerOrganizationSection.organizationlist.filter(x => x.CustomerID === props.organizationID)[0] : \"\"}\r\n\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) => \r\n \r\n \r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(OrganizationInstructionText))}\r\n \r\n \r\n \r\n : null}\r\n\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default OrganizationSection;\r\n\r\n\r\n","import React, { useState } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Card, CardHeader, CardContent, Typography, Grid, TextField } from '@material-ui/core';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { genfunction } from 'helpers';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { DialogeBox } from 'components/DialogeBox';\r\nimport { actionShopCartRemoveSingleTourWithTourHold } from 'actions';\r\n\r\nconst { GroupSizeHeader, GroupSizeChangePopupMsg, ClearCartEventPopupButton1Text, ClearCartEventPopupButton2Text } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n GroupInfoCls: {\r\n padding: '16px',\r\n textAlign: 'justify'\r\n }\r\n}));\r\n\r\nconst GroupSizeSection = (props) => {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [clearCartPopUp, setClearCartPopUp] = useState(false);\r\n\r\n\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0] : null;\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n\r\n const validateChangeGroupSize = (event, value) => {\r\n\r\n if (props.isEditEvent && cartEvents && cartEvents.length > 0 && cartEvents.find(x => x.TourEventID == props.tourEventId)) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == props.tourEventId);\r\n\r\n if (value && cartTourEvent.GroupSize !== value.GroupSize)\r\n setClearCartPopUp(true);\r\n else\r\n props.onChange(value);\r\n }\r\n\r\n else\r\n props.onChange(value);\r\n }\r\n\r\n const continueButtonHandler = () => {\r\n setClearCartPopUp(false);\r\n }\r\n\r\n const clearButtonHandler = (value) => {\r\n\r\n actionShopCartRemoveSingleTourWithTourHold(dispatch, cartEvents, props.tourEventId)\r\n\r\n setClearCartPopUp(false);\r\n props.toggleIsEdit(false);\r\n props.onChange(null);\r\n\r\n }\r\n\r\n return (\r\n \r\n\r\n \r\n \r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(bkngType.GroupSizeMessage))}\r\n \r\n\r\n \r\n\r\n \r\n \r\n {bkngType.GroupSizeOptions && bkngType.GroupSizeOptions.length > 0 ?\r\n\r\n {\r\n if (option.hasOwnProperty('GroupSize')) {\r\n return option.GroupSize;\r\n }\r\n return option.toString();\r\n }}\r\n value={props.groupSize}\r\n\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) => \r\n \r\n\r\n\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default GroupSizeSection;\r\n\r\n\r\n","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Button, Paper, Typography, Grid, Link } from '@material-ui/core';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport OrganizationSection from './OrganizationSection';\r\nimport GroupSizeSection from './GroupSizeSection';\r\nimport { genfunction } from 'helpers';\r\nimport { actionGetExtraItem, actionGetCountryAndState } from 'actions';\r\n\r\nconst { NoExtraItemFoundMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%'\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n arrowBtn: {\r\n float: 'left',\r\n marginLeft: '10px',\r\n marginTop: '3px'\r\n },\r\n section: {\r\n marginTop: '10px',\r\n borderRadius: \"0\",\r\n width: \"100%\"\r\n },\r\n\r\n}));\r\n\r\nconst GroupReservationDrawer = (props) => {\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [showOrganization, setShowOrganization] = useState(false);\r\n const [disableBeforeLoading, setDisableBeforeLoading] = useState(true);\r\n\r\n const dispatch = useDispatch();\r\n\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const bkngType = bookingTypes.filter(x => x.BookingTypeID == props.bookingtypeID)[0];\r\n const tourEvents = useSelector(state => state.reducerExtraItems.extramItems);\r\n const tourEvent = tourEvents && tourEvents.length > 0 ? tourEvents.filter(x => x.TourEventID == props.tourEventId)[0] : null;\r\n const reducerAppLoader = useSelector(state => state.reducerAppLoader.loading);\r\n const organizationList = useSelector(state => state.reducerOrganizationSection.organizationlist);\r\n const countryandstates = useSelector(state => state.reducerCountryAndState.countryandstate);\r\n let defaultCountry = countryandstates && countryandstates.length > 0 ? countryandstates[0].Country : \"\";\r\n\r\n useEffect(() => {\r\n if (reducerAppLoader === false)\r\n setDisableBeforeLoading(false);\r\n\r\n }, [reducerAppLoader])\r\n\r\n const continueHandler = () => {\r\n\r\n if (validateOrganization() && validateGroupSize()) {\r\n\r\n let organizationCostRate = genfunction.IsNotNullOrEmptyOrUndefined(props.organizationID) && organizationList.length > 0 ? organizationList.filter(x => x.CustomerID === props.organizationID)[0].CostRateID : \"\";\r\n actionGetExtraItem(dispatch, props.tourEventId, props.ismembershipapplied, props.membercostrate, props.isIDME, props.isIDMECostrate, organizationCostRate)\r\n\r\n props.goToExtraItemOrGroupDrawer(true);\r\n }\r\n }\r\n\r\n const validateGroupSize = () => {\r\n\r\n if (bkngType.ShowTourProductsBasedOnGroupSize && props.groupSize === \"\") {\r\n seterrorMsg(\"Please select Group Size\")\r\n return false\r\n }\r\n else if (bkngType.ShowTourProductsBasedOnGroupSize && tourEvent.TourProducts.findIndex(x => x.LimitDisplayOnGroupSize && x.GroupSize === props.groupSize) == -1) {\r\n seterrorMsg(NoExtraItemFoundMsg)\r\n return false\r\n }\r\n else\r\n return true\r\n }\r\n\r\n useEffect(() => {\r\n actionGetCountryAndState(dispatch);\r\n\r\n }, [])\r\n\r\n const validateOrganization = () => {\r\n if ((bkngType.RequireCompanyName || showOrganization || (!bkngType.ShowTourProductsBasedOnGroupSize && props.isContinueToGroupDrawer)) && props.organizationID === \"\") {\r\n seterrorMsg(\"Please select an \" + genfunction.GetValueFromCountryAndState(countryandstates, defaultCountry, \"OrganizationText\"));\r\n return false\r\n }\r\n else\r\n return true\r\n }\r\n\r\n const handleChange = (value) => {\r\n setShowOrganization(value);\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {window.matchMedia(\"(min-width: 600px)\").matches ? \"\" : { props.toggleDrawer(\"right\", false) }} />}\r\n {tourEvent ? tourEvent.EventName : null}\r\n \r\n \r\n\r\n \r\n {bkngType.RequireCompanyName || bkngType.AllowedCustomerTypes === 'All' ?\r\n \r\n\r\n \r\n {bkngType.ShowTourProductsBasedOnGroupSize ?\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n );\r\n}\r\n\r\nexport default GroupReservationDrawer;\r\n","import React, { useEffect, Children, useState } from 'react';\nimport BigCalendar from 'react-big-calendar';\nimport \"react-big-calendar/lib/css/react-big-calendar.css\";\nimport Drawer from '@material-ui/core/Drawer';\nimport { makeStyles } from '@material-ui/core/styles';\nimport moment from 'moment';\nimport { Button, Grid, Typography } from \"@material-ui/core\";\nimport ExtraItemDrawer from 'components/CalendarControls/ExtraItemDrawer';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { actionGetExtraItems, actionResetErrorMessage } from 'actions';\nimport Moment from 'moment';\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\nimport { actionResetDisplayAreas } from 'actions';\nimport { genfunction } from '../../helpers';\nimport { withRouter } from 'react-router';\nimport { actionShopCartSetManageMyBooking, actionShopCartResetMembership, actionShopCartResetIDME } from 'actions';\nimport { actionResetBooking } from 'actions';\nimport GroupReservationDrawer from './GroupReservationDrawer';\n\n\nconst { DefaultColor, EventNotAvailable, DefaultCostRateID, CalendarHeight, CalendarWidth, CalendarScreenDatTimeAlreadyBuyMsg,\n CalendarStartingHour, UnableToBuyTicketShowBookNowEnabled, UnableToBuyTicketShowBookNowDisabled, CalendarScreenMessage1, CalendarScreenMessage2 } = window['runConfig'];\nconst localizer = BigCalendar.momentLocalizer(moment);\n\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(3)\n },\n content: {\n marginTop: theme.spacing(2)\n },\n list: {\n width: 400,\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"'\n }\n ,\n list2: {\n width: '100%',\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"'\n }\n}));\n\nconst CalendarControl = (props) => {\n\n const classes = useStyles();\n\n let apiData = false;\n const dispatch = useDispatch();\n\n const tourEvents = useSelector(state => state.reducerExtraItems.extramItems);\n const bookingType = useSelector(state => state.reducerBookingTypes.bookingType);\n const errExtraItem = useSelector(state => state.reducerExtraItems.extramItemsError);\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\n const displayArea = useSelector(state => state.reducerDisplayAreas);\n const displayAreasState = useSelector(state => state.reducerDisplayAreas);\n const shopcartreducer = useSelector(state => state.reducerShopCart);\n const reducerBooking = useSelector(state => state.reducerBooking);\n const extraItem = useSelector(state => state.reducerExtraItems.extraItem);\n\n const [currentview, setcurrentview] = useState(\"\");\n const [nextWeekDate, setnextWeekDate] = useState('');\n\n\n useEffect(() => {\n GetMonthlyRecords();\n }, []);\n\n useEffect(() => {\n\n if (nextWeekDate) {\n actionGetExtraItems(dispatch, props.urlID, true, displayArea.isDisplay ? true : false,\n Moment(nextWeekDate).format('YYYY-MM-DD'), null, \"WeekView\", null);\n }\n\n }, [nextWeekDate]);\n\n const GetMonthlyRecords = () => {\n\n let propsEvent = props.location.event;\n\n if (props.Path == \"/calendar/:id\") {\n actionResetDisplayAreas(dispatch);\n actionGetExtraItems(dispatch, props.urlID, true, false);\n }\n else {\n\n if (displayAreasState.displayAreas !== undefined && displayAreasState.displayAreas.length > 0) {\n let newDisplayAreas = JSON.parse(JSON.stringify(displayAreasState.displayAreas));\n let newObj = { ...newDisplayAreas.filter(x => x.DisplayAreaNo == props.urlID)[0] };\n\n propsEvent && Moment(propsEvent.EventDate).format('YYYY-MM') !== Moment(newObj.NextTourDate).format('YYYY-MM') ?\n actionGetExtraItems(dispatch, props.urlID, false, true, propsEvent.EventDate, null, null)\n :\n actionGetExtraItems(dispatch, props.urlID, true, true, newObj.NextTourDate, null, null);\n }\n else {\n propsEvent && Moment(propsEvent.EventDate).format('YYYY-MM') !== Moment(displayAreasState.displayArea.NextTourDate).format('YYYY-MM') ?\n actionGetExtraItems(dispatch, props.urlID, false, true, propsEvent.EventDate, null, null)\n :\n actionGetExtraItems(dispatch, props.urlID, true, true, displayAreasState.displayArea.NextTourDate, null, null);\n }\n }\n };\n\n\n const GetCostRate = () => {\n let cstrate = 0;\n\n if (shopcartreducer.membershipValidation.ismembershipApplied) {\n cstrate = shopcartreducer.membershipValidation.membershipcostrate;\n }\n else if (shopcartreducer.IDME.isIdMeApplied) {\n cstrate = shopcartreducer.IDME.idmecostrate;\n }\n else {\n cstrate = DefaultCostRateID;\n }\n\n return cstrate;\n }\n\n\n const GetDefaultDate = () => {\n\n if (bookingType !== undefined && bookingType.hasOwnProperty(\"NextTourDate\")) {\n var year = Moment(bookingType.NextTourDate).format('YYYY');\n var month = Moment(bookingType.NextTourDate).format('MM');\n var dt = Moment(bookingType.NextTourDate).format('DD');\n\n return new Date(year, month - 1, dt);\n }\n else {\n var today = props.location.event ? new Date(props.location.event.EventDate) : new Date();\n return new Date(today.getFullYear(), today.getMonth(), today.getDate());\n }\n }\n\n if (tourEvents == undefined || tourEvents.length <= 0) {\n apiData = false;\n }\n else {\n apiData = true;\n }\n\n const constredirect = (products) => {\n props.constredirect(products);\n }\n\n let events = [];\n\n const ConvertTourEventsToEvents = (tourEvents) => {\n\n if ((tourEvents == 'nocontent' || tourEvents === undefined) ||\n (tourEvents.length > 0 && !tourEvents[0].hasOwnProperty(\"TourEventID\"))) {\n return;\n }\n\n for (let j = 0; j < tourEvents.length; j++) {\n\n if (bookingTypes === undefined) {\n return;\n }\n\n const bookType = bookingTypes.filter(x => x.BookingTypeID == tourEvents[j].BookingTypeID)[0];\n\n if (tourEvents[j].BookNowOption === 'Past Event' || tourEvents[j].BookNowOption === 'Cancelled') {\n continue;\n }\n\n if (tourEvents[j].BookNowOption === 'Sold Out' &&\n tourEvents[j].EventStartDateTime < tourEvents[j].CurrentDateTimeAtLocation) {\n continue;\n }\n\n if (tourEvents[j].TourDisplayDays && tourEvents[j].TourDisplayDays > 0) {\n let lastdisplaydate = new Date(tourEvents[j].CurrentDateTimeAtLocation);\n lastdisplaydate.setDate(lastdisplaydate.getDate() + tourEvents[j].TourDisplayDays);\n if (new Date(tourEvents[j].EventStartDateTime) > lastdisplaydate)\n continue;\n }\n\n var event = {\n\n toureventID: tourEvents[j].TourEventID,\n allDay: false,\n start: new Date(tourEvents[j].EventStartDateTime),\n end: new Date(tourEvents[j].EventEndDateTime),\n title: StartAndEndTime(tourEvents, j, bookType) + GetWebDisplayName(tourEvents, j, bookType),\n color: tourEvents[j].DisplayColor,\n level: tourEvents[j].DisplayColorLevel,\n isExtraItem: false,\n startDate: Moment(tourEvents[j].EventStartDateTime).format('YYYY-MM-DD'),\n bookingTypeID: tourEvents[j].BookingTypeID,\n isSaleable: tourEvents[j].BookNowOption === 'Book Now' ? true : false,\n isSingleTour: false,\n notavailableReason: ''\n }\n\n\n\n\n if (bookType != undefined && bookType.hasOwnProperty(\"ShowAvailability\") && bookType.ShowAvailability) {\n\n if (event.isSaleable)\n event.title += ' (' + tourEvents[j].SeatsAvailable + ' ' + bookType.AvailabilityText + ')';\n else\n event.title += ' (' + tourEvents[j].BookNowOption + ')';\n event.notavailableReason = tourEvents[j].BookNowOption;\n }\n\n if (shopcartreducer.managemybooking && reducerBooking.booking[0]) {\n\n if (reducerBooking.booking[0].TourEventID === event.toureventID) {\n event.isSaleable = false;\n event.title += ' (' + CalendarScreenDatTimeAlreadyBuyMsg + ')';\n event.notavailableReason = CalendarScreenDatTimeAlreadyBuyMsg;\n }\n }\n\n if (!event.isSaleable) {\n event.color = EventNotAvailable\n }\n\n var startEvent = Moment(tourEvents[j].EventStartDateTime).format('YYYY-MM-DD');\n\n if (!displayArea.isDisplay && events !== undefined &&\n events.filter(x => x.startDate == startEvent && x.isExtraItem).length == 0) {\n\n for (let k = 0; k < tourEvents[j].TourProducts.length; k++) {\n\n if (tourEvents[j].TourProducts[k].ShowOnCalendar) {\n\n var e = Object.assign({}, event);\n\n e.start = new Date(Moment(tourEvents[j].EventStartDateTime).format('YYYY-MM-DD 23:59:59'));\n e.end = new Date(Moment(tourEvents[j].EventEndDateTime).format('YYYY-MM-DD 23:59:59'));\n e.isExtraItem = true;\n e.isSingleTour = tourEvents.filter(x => Moment(x.EventStartDateTime).format('YYYY-MM-DD') == startEvent && x.BookNowOption !== 'Past Event' && x.BookNowOption !== 'Cancelled' && x.BookNowOption !== 'Sold Out').length > 1 ? false : true;\n\n if (tourEvents[j].TourProducts[k].hasOwnProperty(\"PriceMatrix\")) {\n let pmatrix;\n\n if (tourEvents[j].TourProducts[k].PriceMatrix && tourEvents[j].TourProducts[k].PriceMatrix.length > 1)\n pmatrix = tourEvents[j].TourProducts[k].PriceMatrix.find(x => x.CostRateID == GetCostRate());\n else\n pmatrix = tourEvents[j].TourProducts[k].PriceMatrix ? tourEvents[j].TourProducts[k].PriceMatrix[0] : undefined;\n\n if (pmatrix) {\n e.title = tourEvents[j].TourProducts[k].TourProductName + ' ' + genfunction.ccyFormat(pmatrix ? pmatrix.Price : 0)\n events.push(e)\n }\n }\n }\n }\n }\n\n events.push(event);\n }\n }\n\n if (apiData) {\n ConvertTourEventsToEvents(tourEvents);\n }\n\n const [state, setState] = useState({\n right: false,\n tourEventId: 0,\n bookingTypeID: 0,\n errorMsg: '',\n bookingunsoldReson: '',\n isContinueToExtraItemDrawer: false,\n isContinueToGroupDrawer: false,\n organizationID: \"\",\n groupSize: \"\",\n isEditEvent: false\n });\n\n useEffect(() => {\n reloadEventForGroups(props.location.event);\n }, [bookingTypes, tourEvents]);\n\n const toggleDrawer = (side, open, event) => {\n\n if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {\n return;\n }\n\n if (state.errorMsg.length > 0) {\n return;\n }\n\n if (event) {\n\n if ((event.isExtraItem && event.isSingleTour == false) || !event.isSaleable) {\n setState({ ...state, errorMsg: event.notavailableReason.length > 0 ? UnableToBuyTicketShowBookNowEnabled + event.notavailableReason : UnableToBuyTicketShowBookNowDisabled, bookingunsoldReson: event.notavailableReason.length > 0 ? event.notavailableReason : 'Sold Out' });\n return;\n }\n\n setState({ ...state, [side]: open, tourEventId: event.toureventID, bookingTypeID: event.bookingTypeID, bookingunsoldReson: '' });\n }\n else {\n\n props.location.event = null;\n setState({ ...state, [side]: open, tourEventId: 0, bookingunsoldReson: '', groupSize: \"\", organizationID: \"\", isContinueToExtraItemDrawer: false, isContinueToGroupDrawer: false, isEditEvent: false });\n }\n };\n\n const checkIsReloadEvent = (event) => {\n\n let reloadEvent = false;\n\n if (genfunction.IsEditEvent(bookingTypes, extraItem)) {\n\n if (shopcartreducer.events && shopcartreducer.events.length > 0 && shopcartreducer.events.find(x => x.TourEventID == event.toureventID)) {\n reloadEvent = true;\n event = shopcartreducer.events.filter(x => x.TourEventID == event.toureventID)[0];\n\n }\n\n reloadEvent ? reloadEventForGroups(event) : toggleDrawer('right', true, event);\n\n }\n else {\n toggleDrawer('right', true, event);\n }\n\n }\n\n const reloadEventForGroups = (event) => {\n\n if (event && event.hasOwnProperty(\"TourEventID\")) {\n\n setState({\n ...state,\n right: true,\n tourEventId: event.TourEventID,\n bookingTypeID: event.BookingTypeID,\n selectedDate: new Date(event.EventDate),\n groupSize: event.GroupSize,\n organizationID: event.OrganizationID,\n isContinueToGroupDrawer: event.OrganizationID !== \"\" ? true : false,\n isEditEvent: true\n });\n }\n\n }\n\n const setIsEditEvent = (value) => {\n setState({\n ...state, isEditEvent: value\n });\n }\n\n const goToExtraItemOrGroupDrawer = (value) => {\n setState({ ...state, isContinueToExtraItemDrawer: value, isContinueToGroupDrawer: !value });\n }\n\n const showGroupDrawer = () => {\n\n const bType = bookingTypes.filter(x => x.BookingTypeID == state.bookingTypeID)[0];\n\n if (bType && !state.isContinueToExtraItemDrawer) {\n if (bType.RequireCompanyName || bType.ShowTourProductsBasedOnGroupSize || state.isContinueToGroupDrawer)\n return true;\n }\n\n return false\n }\n\n const onChangeOrganization = (value) => {\n\n value ? setState({ ...state, organizationID: value.CustomerID }) : setState({ ...state, organizationID: \"\" })\n }\n\n const onChangeGroupSize = (value) => {\n\n value ? setState({ ...state, groupSize: value.GroupSize }) : setState({ ...state, groupSize: \"\" })\n\n }\n\n const sideList = side => {\n\n return (\n < div className={window.matchMedia(\"(min-width: 600px)\").matches ? classes.list : classes.list2} role=\"presentation\" >\n\n {showGroupDrawer() ?\n\n \n toggleDrawer('right', false)}>\n {sideList('right')}\n \n
\n \n\n\n }\n \n\n \n\n { 0 ? errExtraItem : state.errorMsg}\n open={errExtraItem.length > 0 || state.errorMsg != \"\" ? true : false}\n handleclose={errorcancelhandle} />}\n\n {shopcartreducer.managemybooking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('AllowDateTimeChanges') && !reducerBooking.booking[0].AllowDateTimeChanges ?\n <>\n \n\n \n {reducerBooking.booking[0].hasOwnProperty('NoChangesMessage') ? reducerBooking.booking[0].NoChangesMessage : 'Date Time Changes are not allowed.'}\n \n \n \n \n :\n <>\n {state.pagedEvents !== undefined\n && state.pagedEvents.length > 0\n ?\n \n\n \n {CalendarScreenMessage1} {Moment(reducerBooking.booking[0].EventStartDateTime).format('dddd,MMMM D')} at {Moment(reducerBooking.booking[0].EventStartDateTime).format('LT')} {CalendarScreenMessage2}\n \n \n : null}\n\n\n {state.pagedEvents !== undefined &&\n state.pagedEvents.length > 0\n && state.pagedEvents[0].hasOwnProperty(\"EventEndDateTime\") ?\n\n state.pagedEvents.map((e, i) => {\n\n if (e.BookNowOption === \"Past Event\" || e.BookNowOption === \"Cancelled\") {\n return null;\n }\n\n else if (e.TourDisplayDays && e.TourDisplayDays > 0) {\n let lastdisplaydate = new Date(e.CurrentDateTimeAtLocation);\n lastdisplaydate.setDate(lastdisplaydate.getDate() + e.TourDisplayDays);\n if (new Date(e.EventStartDateTime) > lastdisplaydate)\n return null;\n }\n\n return e.BookNowOption !== \"Past Event\" && e.BookNowOption !== \"Cancelled\" ?\n\n \n 0 ? e.DisplayColor : DefaultColor }}\n title={\n {Moment(e.EventStartDateTime).format('MMMM DD, YYYY')} \n\n }\n subheader={\n {Moment(e.EventStartDateTime).format('dddd hh:mm a') + ' - ' + Moment(e.EventEndDateTime).format('hh:mm a')} \n }\n />\n \n \n {WebDisplayName(e.EventName, e.BookingTypeID)}\n \n\n {e.TourProducts && e.TourProducts.length > 0 && e.TourProducts.map(product =>\n \n\n {product.ShowOnCalendar && product.AffectsCapacity && product.hasOwnProperty('PriceMatrix') && product.PriceMatrix !== undefined && GetDefaultCostRate(product.PriceMatrix) !== undefined ?\n ' ' + product.TourProductName + ' '\n + genfunction.ccyFormat(GetDefaultCostRate(product.PriceMatrix).Price)\n : null}\n\n \n )}\n\n {e.TourProducts && e.TourProducts.length > 0 && e.TourProducts.map(product =>\n \n\n {product.ShowOnCalendar && product.AffectsCapacity == false && product.hasOwnProperty('PriceMatrix') && product.PriceMatrix !== undefined && GetDefaultCostRate(product.PriceMatrix) !== undefined ?\n ' ' + product.TourProductName + ' '\n + genfunction.ccyFormat(GetDefaultCostRate(product.PriceMatrix).Price)\n : null}\n\n \n )}\n\n {e.BookNowOption === 'Book Now' ?\n \n {CheckShowAvailability(e.SeatsAvailable, e.BookingTypeID)}\n \n : null}\n \n\n \n \n \n \n : null\n })\n\n :\n \n {SearchRecordInfo}\n \n }\n\n \n {state.disablePreviousButton == true ?\n :\n }\n\n {state.pagedEvents !== undefined &&\n state.pagedEvents.length > 0\n && state.pagedEvents[0].hasOwnProperty(\"EventEndDateTime\") ?\n \n : }\n \n }\n \n
\n );\n}\nexport default withRouter(CalendarListView);\n","import Moment from 'moment';\r\nimport React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Grid, Button, FormControl, InputLabel, Select, MenuItem, Hidden } from \"@material-ui/core\";\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport { genfunction } from '../../helpers';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport ExtraItemDrawer from 'components/CalendarControls/ExtraItemDrawer';\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport { actionGetExtraItems, actionResetExtraItems } from 'actions';\r\nimport { withRouter } from 'react-router';\r\nimport { actionShopCartSetManageMyBooking } from 'actions';\r\nimport { actionResetBooking } from 'actions';\r\nimport * as underscore from 'underscore'\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport AdapterDateFns from '@mui/lab/AdapterDateFns';\r\nimport LocalizationProvider from '@mui/lab/LocalizationProvider';\r\nimport StaticDatePicker from '@mui/lab/StaticDatePicker';\r\nimport TextField from '@mui/material/TextField';\r\nimport Badge from '@mui/material/Badge';\r\nimport PickersDay from '@mui/lab/PickersDay';\r\nimport GroupReservationDrawer from './GroupReservationDrawer';\r\n\r\nconst { DefaultCostRateID, CalendarScreenMessage1, CalendarScreenMessage2, HybridViewDefaultLargeImage, HybridViewDefaultSmallImage, Currency, NoEventMessage } = window['runConfig'];\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3),\r\n justifyContent: \"center\"\r\n },\r\n list: {\r\n width: 400,\r\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"'\r\n }\r\n ,\r\n list2: {\r\n width: '100%',\r\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\"'\r\n },\r\n image: {\r\n marginBottom: \"10px\"\r\n },\r\n CardHeader: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n TimeSlotSelect: {\r\n marginLeft: 8,\r\n marginRight: 8\r\n },\r\n badgeDot: {\r\n [theme.breakpoints.up('md')]: {\r\n right: \"25% !important\"\r\n }\r\n },\r\n staticcal: {\r\n width: \"100% !important\",\r\n },\r\n hidden: {\r\n visibility: \"hidden\"\r\n },\r\n visible: {\r\n visibility: \"visible\"\r\n },\r\n '@global': {\r\n '.MuiPickerStaticWrapper-root': {\r\n width: \"100% !important\",\r\n minWidth: \"100% !important\"\r\n },\r\n '.css-epd502': {\r\n width: \"100% !important\"\r\n },\r\n '.MuiCalendarPicker-root': {\r\n width: \"100% !important\"\r\n },\r\n '.css-1n2mv2k': {\r\n display: \"flex !important\",\r\n flexDirection: \"row !important\"\r\n },\r\n '.css-mvmu1r': {\r\n paddingTop: \"5px !important\",\r\n // paddingBottom: \"5px !important\",\r\n display: \"flex !important\",\r\n flexDirection: \"row !important\"\r\n },\r\n '.css-1n2mv2k span': {\r\n flexGrow: \"1 !important\",\r\n width: \"auto !important\",\r\n [theme.breakpoints.up('md')]: {\r\n fontSize: \"1.2rem !important\"\r\n }\r\n },\r\n '.Badge_Price': {\r\n flexGrow: \"1 !important\",\r\n justifyContent: \"center !important\"\r\n },\r\n '.MuiPickersDay-root': {\r\n [theme.breakpoints.up('md')]: {\r\n fontSize: \"1.2rem !important\"\r\n }\r\n },\r\n '.MuiPickersDay-dayOutsideMonth': {\r\n [theme.breakpoints.down('xs')]: {\r\n width: \"20px !important\",\r\n }\r\n },\r\n '.MuiPickersDay-dayWithMargin': {\r\n [theme.breakpoints.down('xs')]: {\r\n width: \"20px !important\",\r\n }\r\n }\r\n }\r\n}));\r\n\r\nconst CalendarHybridView = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const [state, setState] = React.useState({\r\n right: false,\r\n tourEventId: 0,\r\n bookingTypeID: 0,\r\n errorMsg: '',\r\n TourEventTimeSlot: [],\r\n selectedDate: undefined,\r\n isContinueToExtraItemDrawer: false,\r\n isContinueToGroupDrawer: false,\r\n organizationID: \"\",\r\n groupSize: \"\",\r\n isEditEvent: false\r\n });\r\n\r\n let tourEvents = useSelector(state => state.reducerExtraItems.extramItems);\r\n const errExtraItem = useSelector(state => state.reducerExtraItems.extramItemsError);\r\n const displayAreasState = useSelector(state => state.reducerDisplayAreas);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n\r\n useEffect(() => {\r\n\r\n let propsEvent = props.location.event;\r\n if (props.Path == \"/calendar/:id\") {\r\n\r\n propsEvent && Moment(propsEvent.EventDate).format('YYYY-MM') !== Moment(bookingTypes.bookingType.NextTourDate).format('YYYY-MM') ?\r\n actionGetExtraItems(dispatch, props.urlID, false, false, propsEvent.EventDate, false, null)\r\n :\r\n actionGetExtraItems(dispatch, props.urlID, true, false, bookingTypes.bookingType.NextTourDate, false, null);\r\n\r\n }\r\n else {\r\n\r\n if (displayAreasState.displayAreas !== undefined && displayAreasState.displayAreas.length > 0) {\r\n let displayarea = displayAreasState.displayAreas.find(x => x.DisplayAreaNo == props.urlID);\r\n\r\n propsEvent && Moment(propsEvent.EventDate).format('YYYY-MM') !== Moment(displayarea.NextTourDate).format('YYYY-MM') ?\r\n actionGetExtraItems(dispatch, props.urlID, false, true, propsEvent.EventDate, false, null)\r\n :\r\n actionGetExtraItems(dispatch, props.urlID, true, true, displayarea.NextTourDate, false, null);\r\n }\r\n else {\r\n\r\n propsEvent && Moment(propsEvent.EventDate).format('YYYY-MM') !== Moment(displayAreasState.displayArea.NextTourDate).format('YYYY-MM') ?\r\n actionGetExtraItems(dispatch, props.urlID, false, true, propsEvent.EventDate, false, null)\r\n :\r\n actionGetExtraItems(dispatch, props.urlID, true, true, displayAreasState.displayArea.NextTourDate, false, null);\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (state.selectedDate && tourEvents && tourEvents.length > 0) {\r\n let BookingInfoFilter = underscore.filter(tourEvents, (item) => {\r\n return item.BookNowOption == 'Book Now'\r\n && item.BookingInfo && item.BookingInfo.length > 0\r\n && item.EventDate == Moment(state.selectedDate).format('YYYY-MM-DD')\r\n });\r\n\r\n let BookingInfoGroup = underscore.groupBy(BookingInfoFilter, (tourEvent) => { return tourEvent.BookingInfo });\r\n\r\n if (BookingInfoGroup && Object.keys(BookingInfoGroup).length == 1 && BookingInfoGroup[Object.keys(BookingInfoGroup)[0]].length > 0) {\r\n setState({ ...state, TourEventTimeSlot: BookingInfoFilter });\r\n }\r\n\r\n\r\n }\r\n\r\n }, [state.selectedDate, tourEvents]);\r\n\r\n useEffect(() => {\r\n getFirstEventDate();\r\n }, [bookingTypes, tourEvents]);\r\n\r\n const hideSelectButtonOnSingleBooking = () => {\r\n if (state.selectedDate && tourEvents && tourEvents.length > 0) {\r\n let BookingInfoFilter = underscore.filter(tourEvents, (item) => {\r\n return item.BookNowOption == 'Book Now'\r\n && item.BookingInfo && item.BookingInfo.length > 0\r\n && item.EventDate == Moment(state.selectedDate).format('YYYY-MM-DD')\r\n });\r\n\r\n let BookingInfoGroup = underscore.groupBy(BookingInfoFilter, (tourEvent) => { return tourEvent.BookingInfo });\r\n\r\n if (BookingInfoGroup && Object.keys(BookingInfoGroup).length == 1)\r\n return true;\r\n }\r\n\r\n }\r\n\r\n const toggleDrawer = (side, open, event) => {\r\n if (event)\r\n setState({ ...state, [side]: open, tourEventId: event.TourEventID, bookingTypeID: event.BookingTypeID });\r\n else {\r\n\r\n props.location.event = null;\r\n setState({ ...state, [side]: open, tourEventId: 0, groupSize: \"\", organizationID: \"\", isContinueToExtraItemDrawer: false, isContinueToGroupDrawer: false, isEditEvent: false });\r\n }\r\n };\r\n\r\n const checkIsReloadEvent = (event) => {\r\n\r\n let reloadEvent = false;\r\n\r\n if (genfunction.IsEditEvent(bookingTypes.bookingTypes, event)) {\r\n\r\n if (shopcartreducer.events && shopcartreducer.events.length > 0 && shopcartreducer.events.find(x => x.TourEventID == event.TourEventID)) {\r\n reloadEvent = true;\r\n event = shopcartreducer.events.filter(x => x.TourEventID == event.TourEventID)[0];\r\n }\r\n\r\n reloadEvent ? reloadEventForGroups(event) : toggleDrawer('right', true, event);\r\n\r\n }\r\n else {\r\n toggleDrawer('right', true, event);\r\n }\r\n }\r\n\r\n const reloadEventForGroups = (event) => {\r\n\r\n if (event && event.hasOwnProperty(\"TourEventID\")) {\r\n\r\n setState({\r\n ...state,\r\n right: true,\r\n tourEventId: event.TourEventID,\r\n bookingTypeID: event.BookingTypeID,\r\n selectedDate: new Date(event.EventDate),\r\n groupSize: event.GroupSize,\r\n organizationID: event.OrganizationID,\r\n isContinueToGroupDrawer: event.OrganizationID !== \"\" ? true : false,\r\n isEditEvent: true\r\n });\r\n }\r\n\r\n }\r\n\r\n const setIsEditEvent = (value) => {\r\n setState({\r\n ...state, isEditEvent: value\r\n });\r\n }\r\n\r\n const goToExtraItemOrGroupDrawer = (value) => {\r\n setState({ ...state, isContinueToExtraItemDrawer: value, isContinueToGroupDrawer: !value });\r\n }\r\n\r\n const showGroupDrawer = () => {\r\n\r\n const bType = bookingTypes.bookingTypes.filter(x => x.BookingTypeID == state.bookingTypeID)[0];\r\n\r\n if (bType && !state.isContinueToExtraItemDrawer) {\r\n if (bType.RequireCompanyName || bType.ShowTourProductsBasedOnGroupSize || state.isContinueToGroupDrawer)\r\n return true;\r\n }\r\n\r\n return false\r\n }\r\n const onChangeOrganization = (value) => {\r\n\r\n value ? setState({ ...state, organizationID: value.CustomerID }) : setState({ ...state, organizationID: \"\" })\r\n }\r\n\r\n const onChangeGroupSize = (value) => {\r\n\r\n value ? setState({ ...state, groupSize: value.GroupSize }) : setState({ ...state, groupSize: \"\" })\r\n\r\n }\r\n\r\n const sideList = side => {\r\n\r\n return (\r\n < div className={window.matchMedia(\"(min-width: 600px)\").matches ? classes.list : classes.list2} role=\"presentation\" >\r\n\r\n {showGroupDrawer() ?\r\n\r\n \n toggleDrawer('right', false)}>\n {sideList('right')}\n \n
\n \r\n toggleDrawer('right', false)}>\r\n {sideList('right')}\r\n \r\n
\r\n }\r\n \r\n {calendarNavState.viewType !== \"\" && calendarNavState.viewType !== \"HybridView\" ?\r\n <>\r\n
\r\n );\r\n}\r\n\r\nexport default Calendar;\r\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';\nimport ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';\nimport MoneyIcon from '@material-ui/icons/Money';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n height: '100%'\n },\n content: {\n alignItems: 'center',\n display: 'flex'\n },\n title: {\n fontWeight: 700\n },\n avatar: {\n backgroundColor: theme.palette.error.main,\n height: 56,\n width: 56\n },\n icon: {\n height: 32,\n width: 32\n },\n difference: {\n marginTop: theme.spacing(2),\n display: 'flex',\n alignItems: 'center'\n },\n differenceIcon: {\n color: theme.palette.error.dark\n },\n differenceValue: {\n color: theme.palette.error.dark,\n marginRight: theme.spacing(1)\n }\n}));\n\nconst Budget = props => {\n const { className, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \r\n {CalendarScreenHeading} \r\n
\r\n \n \n 12%\n \n \n Since last month\n \n
\n \n \n
\n
\n - \n {products.map((product, i) => (\n
\n
\n \n \n 16%\n \n \n Since last month\n \n
\n \n
\n \n {devices.map(device => (\n \n {device.icon}\n {device.title} \n \n {device.value}%\n \n
\n ))}\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default Dashboard;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/styles';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n iframe: {\n width: '100%',\n minHeight: 640,\n border: 0\n }\n}));\n\nconst Icons = () => {\n const classes = useStyles();\n\n return (\n \n
\n );\n};\n\nexport default Icons;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport { Grid, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n content: {\n paddingTop: 150,\n textAlign: 'center'\n },\n image: {\n marginTop: 50,\n display: 'inline-block',\n maxWidth: '100%',\n width: 560\n }\n}));\n\nconst NotFound = () => {\n const classes = useStyles();\n\n return (\n \n \n \n
\n );\n};\n\nexport default NotFound;\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, CardActions, Typography, Button, CardHeader, Grid } from '@material-ui/core';\r\nimport { genfunction } from 'helpers';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n card: {\r\n \"&:hover\": {\r\n transform: 'scale(1.02)',\r\n WebkitTransform: 'scale(1.02)',\r\n boxShadow: \"inset 0 0 0 2px\",\r\n cursor: 'pointer'\r\n }\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}));\r\n\r\nconst ProductCard = props => {\r\n\r\n const { className, area } = props;\r\n const classes = useStyles();\r\n return (\r\n \n \n 404: The page you are looking for isn???t here\n \n \n You either tried some shady route or you came here by mistake.\n Whichever it is, try using the navigation\n \n
\n \n \n \r\n \r\n \r\n \r\n \r\n {area.ImageURL && area.ImageURL != \"\" ?\r\n })
\r\n : null}\r\n \r\n \r\n \r\n
\r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(area.DisplayText))}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductCard;\r\n","import React, { useEffect } from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport { Grid, Button, Typography } from '@material-ui/core';\nimport { ProductCard } from './components';\nimport { useDispatch, useSelector } from 'react-redux';\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\nimport { actionGetDisplayAreasByType, actionResetDisplayAreas } from 'actions';\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\nimport { actionResetBookingTypes } from 'actions';\nimport { actionCalendarNavReset } from 'actions';\nimport { useHistory } from \"react-router-dom\";\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(3)\n },\n pagination: {\n marginTop: theme.spacing(3),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end'\n },\n TourPaddingLS: {\n paddingTop: \"100px\"\n },\n TourPaddingSS: {\n paddingTop: \"50px\"\n },\n displaynone: {\n display: \"none\"\n }\n}));\n\nconst ProductList = (props) => {\n\n const constredirect = (product) => {\n\n if (product.hasOwnProperty(\"UniqueBookingTypeID\")) {\n props.history.push({\n pathname: '/calendar/' + product.UniqueBookingTypeID\n })\n }\n else {\n props.history.push({\n pathname: '/calendar/Area/' + product.DisplayAreaNo\n })\n }\n\n }\n\n const dispatch = useDispatch()\n\n useEffect(() => {\n actionGetDisplayAreasByType(dispatch, \"bookingtypes\", null, false);\n actionCalendarNavReset(dispatch);\n }, []);\n\n\n const classes = useStyles();\n let history = useHistory();\n\n\n const displayAreasState = useSelector(state => state.reducerDisplayAreas);\n const error = useSelector(state => state.reducerDisplayAreas.displayAreasError);\n const events = useSelector(state => state.reducerShopCart.events);\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\n const managemybkng = useSelector(state => state.reducerShopCart.managemybooking);\n\n if (events && events.length < 1 && bookingTypes && bookingTypes.length > 0) {\n actionResetBookingTypes(dispatch);\n }\n\n useEffect(() => {\n\n if (displayAreasState.loading == true) {\n actionStartAppLoader(dispatch);\n }\n else {\n actionEndAppLoader(dispatch);\n }\n\n })\n\n const errorcancelhandle = () => {\n actionResetDisplayAreas(dispatch);\n }\n\n if (displayAreasState.displayAreas === undefined) {\n return \r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(area.DisplayText))}\r\n
\n 0 ? true : false}\n handleclose={errorcancelhandle} />\n
\n }\n\n return (\n\n \n\n
\n );\n};\n\nexport default ProductList;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport { Grid} from '@material-ui/core';\nimport { SearchInput } from 'components';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n row: {\n height: '60px',\n display: 'flex',\n alignItems: 'center',\n marginTop: theme.spacing(1)\n },\n spacer: {\n flexGrow: 1\n },\n searchInput : {\n marginRight: theme.spacing(2),\n boxShadow: \"inset 0 0 0 2px \"\n }\n}));\n\nconst ProductsToolbar = props => {\n const { className, ...rest } = props;\n const classes = useStyles();\n\n return (\n \n \n \n {displayAreasState.displayAreas.map((area, i) => {\n return area.ShowOnline && area !== undefined ?\n \n \n \n \n : null}\n
\n \n \n \n \n
\n );\n};\n\nexport default Settings;\n","import React, { Fragment } from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport { Grid, Typography as MuiTypography } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n }\n}));\n\nconst variants = {\n h1: 'Nisi euismod ante senectus consequat phasellus ut',\n h2: 'Nisi euismod ante senectus consequat phasellus ut',\n h3: 'Nisi euismod ante senectus consequat phasellus ut',\n h4: 'Nisi euismod ante senectus consequat phasellus ut',\n h5: 'Nisi euismod ante senectus consequat phasellus ut',\n h6: 'Nisi euismod ante senectus consequat phasellus ut',\n subtitle1: 'Leo varius justo aptent arcu urna felis pede nisl',\n subtitle2: 'Leo varius justo aptent arcu urna felis pede nisl',\n body1:\n 'Justo proin curabitur dictumst semper auctor, consequat tempor, nostra aenean neque turpis nunc. Leo. Sapien aliquet facilisi turpis, elit facilisi praesent porta metus leo. Dignissim amet dis nec ac integer inceptos erat dis Turpis sodales ad torquent. Dolor, erat convallis.Laoreet velit a fames commodo tristique hendrerit sociosqu rhoncus vel sapien penatibus facilisis faucibus ad. Mus purus vehicula imperdiet tempor lectus, feugiat Sapien erat viverra netus potenti mattis purus turpis. Interdum curabitur potenti tristique. Porta velit dignissim tristique ultrices primis.',\n body2:\n 'Justo proin curabitur dictumst semper auctor, consequat tempor, nostra aenean neque turpis nunc. Leo. Sapien aliquet facilisi turpis, elit facilisi praesent porta metus leo. Dignissim amet dis nec ac integer inceptos erat dis Turpis sodales ad torquent. Dolor, erat convallis.',\n caption: 'Accumsan leo pretium conubia ullamcorper.',\n overline: 'Accumsan leo pretium conubia ullamcorper.',\n button: 'Vivamus ultrices rutrum fames dictumst'\n};\n\nconst Typography = () => {\n const classes = useStyles();\n\n return (\n \n \n {Object.keys(variants).map((key, i) => (\n \n \n {key} \n \n \n {variants[key]} \n \n \n ))}\n \n
\n );\n};\n\nexport default Typography;\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport PerfectScrollbar from 'react-perfect-scrollbar';\nimport { makeStyles } from '@material-ui/styles';\nimport {\n Card,\n CardActions,\n CardContent,\n Avatar,\n Checkbox,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n Typography,\n TablePagination\n} from '@material-ui/core';\n\nimport { getInitials } from 'helpers';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n content: {\n padding: 0\n },\n inner: {\n minWidth: 1050\n },\n nameContainer: {\n display: 'flex',\n alignItems: 'center'\n },\n avatar: {\n marginRight: theme.spacing(2)\n },\n actions: {\n justifyContent: 'flex-end'\n }\n}));\n\nconst UsersTable = props => {\n const { className, users, ...rest } = props;\n\n const classes = useStyles();\n\n const [selectedUsers, setSelectedUsers] = useState([]);\n const [rowsPerPage, setRowsPerPage] = useState(10);\n const [page, setPage] = useState(0);\n\n const handleSelectAll = event => {\n const { users } = props;\n\n let selectedUsers;\n\n if (event.target.checked) {\n selectedUsers = users.map(user => user.id);\n } else {\n selectedUsers = [];\n }\n\n setSelectedUsers(selectedUsers);\n };\n\n const handleSelectOne = (event, id) => {\n const selectedIndex = selectedUsers.indexOf(id);\n let newSelectedUsers = [];\n\n if (selectedIndex === -1) {\n newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);\n } else if (selectedIndex === 0) {\n newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));\n } else if (selectedIndex === selectedUsers.length - 1) {\n newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));\n } else if (selectedIndex > 0) {\n newSelectedUsers = newSelectedUsers.concat(\n selectedUsers.slice(0, selectedIndex),\n selectedUsers.slice(selectedIndex + 1)\n );\n }\n\n setSelectedUsers(newSelectedUsers);\n };\n\n const handlePageChange = (event, page) => {\n setPage(page);\n };\n\n const handleRowsPerPageChange = event => {\n setRowsPerPage(event.target.value);\n };\n\n return (\n \n \n
\n
\n \n \n \n \n \n Add user\n \n
\n \n
\n \n );\n};\n\nUsersToolbar.propTypes = {\n className: PropTypes.string\n};\n\nexport default UsersToolbar;\n","import uuid from 'uuid/v1';\n\nexport default [\n {\n id: uuid(),\n name: 'Ekaterina Tankova',\n address: {\n country: 'USA',\n state: 'West Virginia',\n city: 'Parkersburg',\n street: '2849 Fulton Street'\n },\n email: 'ekaterina.tankova@devias.io',\n phone: '304-428-3097',\n avatarUrl: '/unset.png',\n createdAt: 1555016400000\n },\n {\n id: uuid(),\n name: 'Cao Yu',\n address: {\n country: 'USA',\n state: 'Bristow',\n city: 'Iowa',\n street: '1865 Pleasant Hill Road'\n },\n email: 'cao.yu@devias.io',\n avatarUrl: '/unset.png',\n phone: '712-351-5711',\n createdAt: 1555016400000\n },\n {\n id: uuid(),\n name: 'Alexa Richardson',\n address: {\n country: 'USA',\n state: 'Georgia',\n city: 'Atlanta',\n street: '4894 Lakeland Park Drive'\n },\n email: 'alexa.richardson@devias.io',\n phone: '770-635-2682',\n avatarUrl: '/unset.png',\n createdAt: 1555016400000\n },\n {\n id: uuid(),\n name: 'Anje Keizer',\n address: {\n country: 'USA',\n state: 'Ohio',\n city: 'Dover',\n street: '4158 Hedge Street'\n },\n email: 'anje.keizer@devias.io',\n avatarUrl: '/unset.png',\n phone: '908-691-3242',\n createdAt: 1554930000000\n },\n {\n id: uuid(),\n name: 'Clarke Gillebert',\n address: {\n country: 'USA',\n state: 'Texas',\n city: 'Dallas',\n street: '75247'\n },\n email: 'clarke.gillebert@devias.io',\n phone: '972-333-4106',\n avatarUrl: '/unset.png',\n createdAt: 1554757200000\n },\n {\n id: uuid(),\n name: 'Adam Denisov',\n address: {\n country: 'USA',\n state: 'California',\n city: 'Bakerfield',\n street: '317 Angus Road'\n },\n email: 'adam.denisov@devias.io',\n phone: '858-602-3409',\n avatarUrl: '/unset.png',\n createdAt: 1554670800000\n },\n {\n id: uuid(),\n name: 'Ava Gregoraci',\n address: {\n country: 'USA',\n state: 'California',\n city: 'Redondo Beach',\n street: '2188 Armbrester Drive'\n },\n email: 'ava.gregoraci@devias.io',\n avatarUrl: '/unset.png',\n phone: '415-907-2647',\n createdAt: 1554325200000\n },\n {\n id: uuid(),\n name: 'Emilee Simchenko',\n address: {\n country: 'USA',\n state: 'Nevada',\n city: 'Las Vegas',\n street: '1798 Hickory Ridge Drive'\n },\n email: 'emilee.simchenko@devias.io',\n phone: '702-661-1654',\n avatarUrl: '/unset.png',\n createdAt: 1523048400000\n },\n {\n id: uuid(),\n name: 'Kwak Seong-Min',\n address: {\n country: 'USA',\n state: 'Michigan',\n city: 'Detroit',\n street: '3934 Wildrose Lane'\n },\n email: 'kwak.seong.min@devias.io',\n avatarUrl: '/unset.png',\n phone: '313-812-8947'\n },\n {\n id: uuid(),\n name: 'Merrile Burgett',\n address: {\n country: 'USA',\n state: 'Utah',\n city: 'Salt Lake City',\n street: '368 Lamberts Branch Road'\n },\n email: 'merrile.burgett@devias.io',\n phone: '801-301-7894',\n avatarUrl: '/unset.png',\n createdAt: 1522702800000\n }\n];\n","import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/styles';\n\nimport { UsersToolbar, UsersTable } from './components';\nimport mockData from './data';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(3)\n },\n content: {\n marginTop: theme.spacing(2)\n }\n}));\n\nconst UserList = () => {\n const classes = useStyles();\n\n const [users] = useState(mockData);\n\n return (\n \n
\n );\n};\n\nexport default UserList;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { genfunction } from 'helpers'\nimport CancelIcon from '@material-ui/icons/Cancel'\n\nimport {\n Card, CardContent, Typography, CardHeader, IconButton,\n Table, TableBody, TableCell, TableRow, Hidden, Button\n} from '@material-ui/core';\n\nimport { NumberSpinner } from '../../../components/InputControls'\nimport { withRouter } from 'react-router'\nimport { useDispatch, useSelector } from 'react-redux';\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\nimport Moment from 'moment';\nimport { actionDeleteUniqueCoupon } from 'actions';\nimport { actionRemoveCoupon, actionShopCartResetError, actionCalendarNavReset } from 'actions';\n\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n tourheaderbox: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText\n },\n tourheadertext: {\n marginTop: \"8px\"\n },\n labelbold: {\n fontWeight: \"bold\",\n fontSize: \"18px\"\n },\n tablecell: {\n padding: \"5px\"\n }\n}));\n\nconst BookingTypeCard = props => {\n\n const { className, products } = props;\n const dispatch = useDispatch();\n const displateState = useSelector(state => state.reducerDisplayAreas);\n const [errorMsg, seterrorMsg] = useState(\"\");\n const classes = useStyles();\n\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\n const shopCartError = useSelector(state => state.reducerShopCart.error);\n\n\n const CalculateMaxTickets = (TourEventID, TourProductID) => {\n\n let event = products.find(event => event.TourEventID == TourEventID);\n\n let fproduct = event.TourProducts.filter(p => p.TourProductID != TourProductID && p.AffectsCapacity);\n let consumedQty = 0;\n if (fproduct && fproduct.length > 0) {\n consumedQty = fproduct.reduce((a, b) => {\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\n let newobj = { Quantity: aqty + bqty }\n return newobj;\n }).Quantity;\n }\n return event.TourProducts[0].MaximumTickets - consumedQty;\n }\n\n useEffect(() => {\n if (shopCartError && shopCartError.length > 0) {\n seterrorMsg(shopCartError)\n }\n }, [shopCartError])\n\n const changeQuantityHandler = (reference, value) => {\n\n if (ValidateQuanity(reference.eventId, reference.tourProductID, value)) {\n props.changeQuantityHandler(reference, value)\n }\n }\n\n const DeleteCouponsHolds = (CouponID) => {\n\n let removeCoupon = false;\n\n props.products.map(prod => {\n\n if (prod.CouponItems.filter(x => x.CouponID == CouponID && x.isUniqueCoupon).length < 2) {\n removeCoupon = true;\n }\n\n });\n\n return removeCoupon;\n }\n\n const removeclickhandler = (TourEventId, TourProductID, couponItems) => {\n\n\n let coupItem = couponItems ? couponItems.find(x => x.TourProductID == TourProductID && x.isUniqueCoupon) : null;\n\n if (coupItem) {\n if (DeleteCouponsHolds(coupItem.TourCouponID)) {\n actionDeleteUniqueCoupon(dispatch, coupItem.CouponHoldRef);\n }\n }\n\n CheckBeforeRemove(TourEventId, TourProductID);\n\n actionRemoveCoupon(dispatch, TourEventId, TourProductID);\n\n props.removeclickhandler(TourEventId, TourProductID);\n }\n\n const editClickHandler = (product) => {\n\n actionCalendarNavReset(dispatch);\n let bookType = bookingTypes.filter(x => x.BookingTypeID === product.BookingTypeID)[0];\n\n props.history.push({\n\n pathname: bookType.hasOwnProperty(\"UniqueBookingTypeID\") ? '/calendar/' + bookType.UniqueBookingTypeID : '/calendar/Area/' + bookType.DisplayArea,\n event: product\n })\n }\n\n const errorcancelhandle = () => {\n seterrorMsg(\"\");\n actionShopCartResetError(dispatch);\n }\n\n const CheckBeforeRemove = (TourEventId, TourProductID) => {\n let event = products.find(event => event.TourEventID == TourEventId);\n let MinTicket = event.TourProducts[0].MinimumTickets;\n let MaxTicket = event.TourProducts[0].MaximumTickets;\n\n let fproduct = event.TourProducts.filter(p => p.TourProductID != TourProductID & p.AffectsCapacity);\n let consumedQty = 0;\n if (fproduct && fproduct.length > 0) {\n consumedQty = fproduct.reduce((a, b) => {\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\n let newobj = { Quantity: aqty + bqty }\n return newobj;\n }).Quantity;\n }\n\n if (consumedQty < MinTicket) {\n seterrorMsg(\"Minimum tickets for this event is \" + MinTicket + \", please add more tickets.\")\n return false;\n }\n }\n\n const ValidateQuanity = (TourEventId, TourProductID, changedqty) => {\n\n let event = products.find(event => event.TourEventID == TourEventId);\n let MinTicket = event.TourProducts[0].MinimumTickets;\n let MaxTicket = event.TourProducts[0].MaximumTickets;\n let selectedTPQty;\n\n if (event.TourProducts.find(x => x.TourProductID == TourProductID && x.AffectsCapacity)) {\n selectedTPQty = event.TourProducts.find(x => x.TourProductID == TourProductID && x.AffectsCapacity).Quantity;\n }\n\n let fproduct = event.TourProducts.filter(p => p.AffectsCapacity);\n let consumedQty = 0;\n if (fproduct && fproduct.length > 0) {\n consumedQty = fproduct.reduce((a, b) => {\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\n let newobj = { Quantity: aqty + bqty }\n return newobj;\n }).Quantity;\n }\n\n let newQty = changedqty - selectedTPQty;\n consumedQty = consumedQty + newQty;\n\n if (event.SeatsAvailable == 0 || event.BookNowOption != \"Book Now\") {\n seterrorMsg(\"Tickets not longer available, please choose another time\");\n return false;\n }\n else if (consumedQty > event.SeatsAvailable) {\n seterrorMsg(\"Maximum of \" + event.SeatsAvailable + \" tickets available\");\n return false;\n }\n else if (consumedQty < MinTicket) {\n seterrorMsg(\"Minimum tickets per order is \" + MinTicket)\n return false;\n }\n else if (consumedQty > MaxTicket) {\n seterrorMsg(\"Maximum of \" + MaxTicket + \" tickets allowed\")\n return false;\n }\n else {\n return true;\n }\n\n }\n\n\n const VisibleStartAndEndTime = (bookingtypeID, starttime) => {\n\n let time = \"\";\n\n const bookType = bookingTypes.filter(x => x.BookingTypeID == bookingtypeID)[0];\n\n if (bookType) {\n if (bookType.ShowStartTime && bookType.ShowEndTime) {\n time += Moment(starttime.EventStartDateTime).format('hh:mm a') + ' - ' + Moment(starttime.EventEndDateTime).format('hh:mm a');\n }\n\n if (bookType.ShowStartTime && !bookType.ShowEndTime) {\n time += Moment(starttime.EventStartDateTime).format('hh:mm a');\n }\n\n if (!bookType.ShowStartTime && bookType.ShowEndTime) {\n time += Moment(starttime.EventEndDateTime).format('hh:mm a');\n }\n }\n\n return time;\n\n }\n\n const ShowWebDisplayName = (bookingtypeID, webName) => {\n\n const bookType = bookingTypes.filter(x => x.BookingTypeID == bookingtypeID)[0];\n return bookType ? webName : '';\n }\n return (\n products.map(product => (\n \n
\n \r\n
\r\n \r\n No item in the cart \r\n
\r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nProcessingBox.propTypes = {\r\n isshow: PropTypes.bool.isRequired,\r\n title: PropTypes.string.isRequired,\r\n text1: PropTypes.string.isRequired,\r\n text2: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default ProcessingBox;\r\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Typography, Button, Card, CardHeader, CardContent, CardActions, Grid, Link } from '@material-ui/core';\nimport { CheckCircleOutlineOutlined } from '@material-ui/icons';\nimport { genfunction } from '../../../helpers'\nimport theme from '../../../theme'\nimport DataAccess from '../../../api/constants';\nimport Moment from 'moment';\nimport { actionResetBookingTypes } from 'actions';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst { CustomMessageforconfirmpage, BookingTypeBarcodeHeader, PaymentCompleteTitle, ConfirmationReceiptMessage,\n DisableMemberPassBarcode, RedirectWaiverSigner, WaiverSignMessage, ShowReadableBarcode } = window['runConfig'];\n\nconst useStyles = makeStyles(theme => ({\n center: {\n position: \"relative\",\n margin: \"auto\",\n maxWidth: \"400px\"\n },\n diplaynone: {\n display: \"none\"\n },\n textaligncenter: {\n textAlign: \"center\"\n },\n headerbox: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n textAlign: \"left\"\n },\n footerbox: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n textAlign: \"left\",\n padding: \"16px\"\n },\n headertext: {\n marginTop: \"8px\",\n marginRight: \"10px\"\n },\n image: {\n border: \"5px solid white\"\n }\n\n}));\n\nconst PaymentCompletebox = props => {\n const { isshow, transaction } = props;\n const classes = useStyles();\n const dispatch = useDispatch();\n\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\n const ALLGATickets = useSelector(state => state.reducerGaTicket.GATickets);\n\n const onClickHandler = () => {\n actionResetBookingTypes(dispatch);\n props.onClickHandler()\n }\n\n const VisibleStartAndEndTime = (tourEvent) => {\n\n let time = \"\";\n\n const bookType = bookingTypes.filter(x => x.BookingTypeID == tourEvent.BookingTypeID)[0];\n\n if (bookType) {\n if (bookType.ShowStartTime && bookType.ShowEndTime) {\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventStartDateTime) + ' - ' + Moment(tourEvent.EventEndDateTime).format('hh:mm a');\n }\n\n if (bookType.ShowStartTime && !bookType.ShowEndTime) {\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventStartDateTime);\n }\n\n if (!bookType.ShowStartTime && bookType.ShowEndTime) {\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventEndDateTime);\n }\n\n if (!bookType.ShowStartTime && !bookType.ShowEndTime) {\n time += genfunction.GetEventDateReceiptFormatwithoutTime(tourEvent.EventStartDateTime);\n }\n }\n\n return time;\n }\n\n const ShowWebDisplayName = (tourEvent) => {\n const bookType = bookingTypes.filter(x => x.BookingTypeID == tourEvent.BookingTypeID)[0];\n return bookType ? tourEvent.EventName : '';\n }\n\n const ShowTicketDisplayName = (ticket) => {\n const t = ALLGATickets.find(x => x.ProductID === ticket.ProductID);\n return t && t.ProductName ? t.ProductName : '';\n }\n\n const ShowWaiverLinks = (tourEvent) => {\n const bookType = bookingTypes.find(x => x.BookingTypeID == tourEvent.BookingTypeID);\n return bookType && bookType.WaiverRequired;\n }\n\n const getEvent = (toureventid) => {\n if (toureventid)\n return transaction.Events.find(x => x.TourEventID == toureventid)\n }\n\n const getGATickets = () => {\n const tickets = transaction.Products.filter(ticket => ticket.GATickets && ticket.GATickets.length > 0);\n return tickets;\n }\n\n const GetGiftCards = () => {\n let giftcards = transaction.Products.filter(x => x.Giftcards && x.Giftcards.length > 0);\n return giftcards;\n }\n const groupbyTourEvent = () => {\n let products = [];\n transaction.Products.map(item => {\n let itemobj = products.find(x => x.TourEventID == item.TourEventID);\n if (itemobj == null || itemobj == undefined) {\n if (item.TourEventID !== undefined) {\n products.push(item);\n }\n }\n })\n return products;\n }\n\n const GetMembershipPackage = () => {\n\n let membershippackage = [];\n let memPack = {\n packagename: transaction.MembershipPackages[0] && transaction.MembershipPackages[0].hasOwnProperty(\"PackageName\") ? transaction.MembershipPackages[0].PackageName : \"\",\n expiry: '',\n primaryMemberNo: 0\n };\n\n if (transaction.Products && transaction.Products.length > 0) {\n transaction.Products.map(item => {\n if (item.hasOwnProperty(\"MemberCustomerID\") && item.hasOwnProperty(\"MembershipPackageID\")) {\n if (item.MemberCustomerID === transaction.CustomerID) {\n\n memPack.expiry = item.MembershipExpiryDate;\n memPack.primaryMemberNo = item.MemberNo;\n\n if (membershippackage.length == 0) {\n membershippackage.push(memPack);\n }\n }\n }\n });\n }\n\n return membershippackage;\n }\n\n const getProductOptions = (product) => {\n if (product.Options) {\n\n let productWithOptions = product.Options.filter(x => x.Products && x.Products.length > 0 && x.Products.find(y => y.IsSelected == true) != undefined);\n if (productWithOptions && productWithOptions.length > 0) {\n return (\n productWithOptions.map(option => {\n return (\n option.Products.map(opproduct => {\n return (\n opproduct.IsSelected ?\n \r\n {title} \r\n {text1} \r\n {text2} \r\n
\r\n \n
\n {PaymentCompleteTitle} \n Thank you {transaction.Customer.FirstName + \" \" + transaction.Customer.LastName}! \n {ConfirmationReceiptMessage} \n {transaction.Customer.CustomerAddress[0].Email} \n {transaction.TabID ?\n {\"Order #: \" + transaction.TabID + \" | \" + \"Location : \" + transaction.TabLocationName} \n : \"\"}\n \n Receipt # {transaction.ReceiptNo}}\n title={\"Transaction Summary\"}\n titleTypographyProps={{ color: \"inherit\" }}\n />\n \n \n \n {transaction.OrderProducts.map(product => {\n return (\n \n \n \n {product.Quantity}x{genfunction.replaceEscapeCharacters(product.ProductName)}\n \n {getProductOptions(product)}\n \n \n \n {genfunction.ccyFormat(genfunction.getOrderProductsTotalPrice([product]).subtotal)}\n \n \n \n )\n })}\n \n \n Total Sales \n Total Tax \n \n \n {genfunction.ccyFormat(amounts.totalExclTax)} \n {genfunction.ccyFormat(amounts.totalTax)} \n \n \n \n \n \n \n Total Paid \n \n \n {genfunction.ccyFormat(amounts.totalInclTax)} \n \n \n \n \n {hasAnyBarcodesToShow() ?\n \n \n {\n getGATickets().length > 0 ? getGATickets().map(ticket => (\n ticket.GATickets.map(gaticket => (\n
\n {ShowTicketDisplayName(ticket)} \n 
\n
\n ))\n : null\n }\n\n {\n GetMembershipPackage().length > 0 && GetMembershipPackage().map(item => (\n \n {item.packagename} \n {'Expire : ' + genfunction.GetEventDateReceiptFormatwithoutTime(item.expiry)} \n {DisableMemberPassBarcode ?\n ({\r\n\r\n box100per: {\r\n width: \"100%\",\r\n height: \"50px\",\r\n margin: \"5% 0% 5% 0%\"\r\n }\r\n}));\r\n\r\nconst FreeTicketForm = (props) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n {\r\n inputRef(ref ? ref.inputElement : null);\r\n }}\r\n onChange={onChange}\r\n mask={pnMask}\r\n />\r\n );\r\n}\r\n\r\nlet PaymentForm = forwardRef((props, ref) => {\r\n\r\n const paymentsRef = useRef();\r\n const classes = useStyles();\r\n const [pfstate, setpfstate] = useState(formstates.initialpaystate);\r\n //const [errorstate, seterrorstate] = useState(formstates.initialerrorstate)\r\n const dispatch = useDispatch();\r\n const { executeRecaptcha } = useGoogleReCaptcha();\r\n\r\n\r\n useImperativeHandle(ref, () => ({\r\n ReloadGateways() {\r\n ReloadGateway();\r\n }\r\n }));\r\n\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n const errorstate = useSelector(state => state.reducerFormError.errorstate);\r\n const formfields = useSelector(state => state.reducerFormError.formfields);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const costrate = useSelector(state => state.reducerCostRate);\r\n const idmeuserdata = useSelector(state => state.reducerIDMeUserData);\r\n const bookingUDFS = useSelector(state => state.reducerBookingUserDefinedFields);\r\n const membershipTypesUdfs = useSelector(state => state.reducerMembershipUserDefinedFields);\r\n const countryandstates = useSelector(state => state.reducerCountryAndState.countryandstate);\r\n const customerUdfs = useSelector(state => state.reducerCustomerUDFs);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const recaptacha = useSelector(state => state.reducerRecaptcha);\r\n const sessionID = useSelector(state => state.reducerGlobal.sessionID);\r\n const stopUserToPurchase = useSelector(state => state.reducerGlobal.stopUserToPurchase);\r\n\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [opentnc, setopentnc] = useState(false);\r\n const [tncchecked, settncChecked] = React.useState(false);\r\n const [colorState, setColorState] = React.useState('');\r\n const [removeMembershipState, setremoveMembershipState] = React.useState(false);\r\n const [removemembershipcouponandgifts, setremovemembershipcouponandgifts] = React.useState(false);\r\n\r\n var requiredFields = {};\r\n let inputreferences = [];\r\n\r\n inputreferences.first_name = React.useRef();\r\n inputreferences.last_name = React.useRef();\r\n inputreferences.email = React.useRef();\r\n inputreferences.phone_number = React.useRef();\r\n inputreferences.address1 = React.useRef();\r\n inputreferences.country = React.useRef();\r\n inputreferences.state = React.useRef();\r\n inputreferences.city = React.useRef();\r\n inputreferences.zip = React.useRef();\r\n inputreferences.memberno = React.useRef();\r\n inputreferences.shipping_phone_number = React.useRef();\r\n inputreferences.shipping_address1 = React.useRef();\r\n inputreferences.shipping_city = React.useRef();\r\n inputreferences.shipping_state = React.useRef();\r\n inputreferences.shipping_zip = React.useRef();\r\n inputreferences.shipping_country = React.useRef();\r\n\r\n const paymenttranstate = useSelector(state => {\r\n return (\r\n {\r\n loading: state.reducerPaymentTransaction.loading,\r\n haspaid: state.reducerPaymentTransaction.Payment.hasOwnProperty('Products'),\r\n paymentinfo: state.reducerPaymentTransaction.Payment,\r\n errormsg: state.reducerPaymentTransaction.PaymentInfoError\r\n }\r\n )\r\n\r\n });\r\n\r\n const ShowGiftCards = () => {\r\n let res = false;\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n }\r\n\r\n return res;\r\n }\r\n\r\n useEffect(() => {\r\n if (paymenttranstate.haspaid) {\r\n actionResetMemberValidation(dispatch);\r\n setTimeout(() => { window.scrollTo(0, 0) }, 0);\r\n\r\n }\r\n }, [paymenttranstate.haspaid])\r\n\r\n useEffect(() => {\r\n\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n actionShopCartShowTransFee(dispatch, true);\r\n }\r\n }\r\n\r\n }, [transactionfee])\r\n\r\n const handleReCaptchaVerify = useCallback(async () => {\r\n\r\n if (!executeRecaptcha) {\r\n console.log('Execute recaptcha not yet available.');\r\n return;\r\n }\r\n\r\n let token = await executeRecaptcha('ecommerce');\r\n\r\n if (token.length > 0) {\r\n actionValidateRecaptchaToken(dispatch, token, sessionID);\r\n }\r\n else {\r\n seterrorMsg(\"Recaptcha token not fetched.\");\r\n }\r\n\r\n }, [executeRecaptcha]);\r\n\r\n useEffect(() => {\r\n\r\n if ((events && events.length > 0) || (gatickets && gatickets.length > 0) ||\r\n (membershipPackages && membershipPackages.length > 0) || ShowGiftCards() ||\r\n (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '' && (stopUserToPurchase !== undefined\r\n && stopUserToPurchase === false) && (sessionID !== undefined && sessionID.length > 0)\r\n && (recaptacha.validToken !== undefined && recaptacha.validToken === false)) {\r\n\r\n handleReCaptchaVerify();\r\n }\r\n }\r\n\r\n }, [handleReCaptchaVerify, RecaptchaV3Client, stopUserToPurchase, sessionID, recaptacha.validToken])\r\n\r\n useEffect(() => {\r\n if (paymenttranstate.errormsg.includes(\"Payment has been unsuccessful. To make this purchase, please contact us directly.\")) {\r\n actionStopUserToPurchase(dispatch);\r\n }\r\n }, [paymenttranstate.errormsg]);\r\n\r\n\r\n\r\n useEffect(() => {\r\n if (recaptacha.validTokenError.length > 0) {\r\n\r\n // if (!recaptacha.validTokenError.includes('Browser Error')) {\r\n seterrorMsg(recaptacha.validTokenError);\r\n actionStopUserToPurchase(dispatch);\r\n // }\r\n }\r\n\r\n }, [recaptacha.validTokenError]);\r\n\r\n useEffect(() => {\r\n if ((events.length > 0 || membershipPackages.length > 0 || gatickets.length > 0 || orderProducts.length > 0 || ShowGiftCards() || (donationProducts && donationProducts.length > 0)) && paymenttranstate.haspaid) {\r\n actionShopCartResetState(dispatch);\r\n if (bookingUDFS.bookingUDFs.length > 0) {\r\n actionResetUDFs(dispatch);\r\n }\r\n\r\n actionValidateRecaptchaReset(dispatch);\r\n\r\n }\r\n\r\n if (ShowGiftCards() === true && paymenttranstate.haspaid) {\r\n actionResetGiftCards(dispatch);\r\n }\r\n\r\n })\r\n\r\n useEffect(() => {\r\n\r\n if (paymenttranstate.haspaid) {\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n actionResetMembershipUDFs(dispatch);\r\n }\r\n\r\n if (customerUdfs.customerUDFs && customerUdfs.customerUDFs.length > 0) {\r\n actionResetCustomerUdfs(dispatch);\r\n }\r\n }\r\n\r\n\r\n }, [paymenttranstate.haspaid])\r\n\r\n\r\n useEffect(() => {\r\n\r\n if ((events.length > 0 || membershipPackages.length > 0 || gatickets.length > 0 || orderProducts.length > 0 || ShowGiftCards() || (donationProducts && donationProducts.length > 0)) && tncchecked) {\r\n setpfstate({\r\n ...pfstate,\r\n disablepay: false\r\n })\r\n }\r\n else if (pfstate.disablepay == false) {\r\n setpfstate({\r\n ...pfstate,\r\n disablepay: true\r\n })\r\n }\r\n\r\n let btnStatus = document.getElementById(\"btnApplyMembership\");\r\n\r\n if (formfields.checkBoxMember.value === true &&\r\n btnStatus.name !== \"Remove\" &&\r\n removeMembershipState === false) {\r\n setpfstate({\r\n ...pfstate,\r\n disablepay: true\r\n })\r\n }\r\n\r\n }, [events, tncchecked, formfields])\r\n\r\n\r\n const getTNC = () => {\r\n return ReactHtmlParser(TermsnConditionCheckMsg);\r\n }\r\n\r\n const tnccheckeHandle = (event) => {\r\n settncChecked(event.target.checked);\r\n };\r\n\r\n const transFeeCheckHandler = (event) => {\r\n actionShopCartShowTransFee(dispatch, event.target.checked);\r\n };\r\n\r\n const filterOptions = createFilterOptions({\r\n stringify: (option) => option.Country + '' + option.State,\r\n });\r\n\r\n const errorcancelhandle = () => {\r\n actionResetPaymentTransaction(dispatch);\r\n\r\n seterrorMsg(\"\");\r\n\r\n if (colorState !== 'info') {\r\n actionResetIDMEUSERDATA(dispatch);\r\n actionResetCostRate(dispatch);\r\n }\r\n }\r\n\r\n const onClickPaymentHandler = () => {\r\n\r\n actionResetPaymentTransaction(dispatch);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n actionResetMemberValidation(dispatch);\r\n actionShopCartResetMembershipPackage(dispatch);\r\n actionResetExtraItems(dispatch);\r\n actionGetDonation(dispatch);\r\n actionResetMembershipPackages(dispatch);\r\n actionResetCostRate(dispatch);\r\n actionResetCountryAndState(dispatch);\r\n\r\n if (bookingUDFS.bookingUDFs.length > 0) {\r\n actionResetUDFs(dispatch);\r\n }\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n actionResetMembershipUDFs(dispatch);\r\n }\r\n\r\n if (customerUdfs.customerUDFs && customerUdfs.customerUDFs.length > 0) {\r\n actionResetCustomerUdfs(dispatch);\r\n }\r\n\r\n ReloadGateway();\r\n\r\n window.location.href = RedirectAfterCheckout;\r\n }\r\n\r\n\r\n const ReloadGateway = () => {\r\n if (PaymentMethodType === \"Spreedly\") {\r\n paymentsRef.current.ReloadSpreedly();\r\n }\r\n else {\r\n paymentsRef.current.GPReload();\r\n }\r\n }\r\n\r\n const reseterrorfield = () => {\r\n actionResetFormErrorState(dispatch);\r\n }\r\n\r\n const errorfield = (errorfield, errortext, errorstate) => {\r\n actionSetFormErrorState(dispatch, errorfield, errortext, errorstate)\r\n }\r\n\r\n const checkfieldvalidation = (fields) => {\r\n for (let prop in fields) {\r\n if (fields[prop] == \"\") {\r\n if (prop === 'phone_number') {\r\n errorfield(prop, PhoneNumberMessage, true);\r\n }\r\n else {\r\n errorfield(prop, prop + \" is required.\", true);\r\n }\r\n\r\n inputreferences[prop].current.focus();\r\n window.scrollBy(0, -65);\r\n return false\r\n }\r\n else {\r\n errorfield(prop, \"\", false)\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n const ValidateQuanity = () => {\r\n\r\n let isvalid = true;\r\n events.forEach(event => {\r\n\r\n if (genfunction.IsEditEvent(bookingTypes, event))\r\n return;\r\n\r\n let MinTicket = event.TourProducts[0].MinimumTickets;\r\n\r\n let fproduct = event.TourProducts.filter(p => p.AffectsCapacity);\r\n let consumedQty = 0;\r\n if (fproduct && fproduct.length > 0) {\r\n consumedQty = fproduct.reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n\r\n if (consumedQty < MinTicket) {\r\n seterrorMsg(\"Minimum tickets for event is \" + MinTicket + \", please add more tickets.\")\r\n isvalid = false;\r\n }\r\n });\r\n\r\n return isvalid;\r\n }\r\n\r\n const billingAddressSameAsAbover = () => {\r\n\r\n if (formfields.billingAddressSame.value) {\r\n formfields.shipping_address1.value = formfields.address1.value;\r\n formfields.shipping_address2.value = formfields.address2.value;\r\n formfields.shipping_city.value = formfields.city.value;\r\n formfields.shipping_state.value = formfields.state.value;\r\n formfields.shipping_zip.value = formfields.zip.value;\r\n formfields.shipping_country.value = formfields.country.value;\r\n formfields.shipping_phone_number.value = formfields.phone_number.value;\r\n }\r\n }\r\n\r\n const BindRequiredFields = () => {\r\n\r\n requiredFields = {};\r\n\r\n if (PhoneNumberMandatory || (orderProducts && orderProducts.length > 0)) {\r\n requiredFields[\"phone_number\"] = formfields.phone_number.value.trim();\r\n requiredFields[\"shipping_phone_number\"] = formfields.shipping_phone_number.value;\r\n }\r\n\r\n requiredFields[\"email\"] = formfields.email.value.trim();\r\n if (UseStreetAddressForAVS)\r\n requiredFields[\"address1\"] = formfields.address1.value;\r\n requiredFields[\"country\"] = formfields.country.value;\r\n requiredFields[\"city\"] = formfields.city.value;\r\n\r\n if (isShowCountryFields(\"ShowState\")) {\r\n requiredFields[\"state\"] = formfields.state.value;\r\n }\r\n else {\r\n formfields.state.value = \"0\";\r\n }\r\n\r\n if (isShowCountryFields(\"ShowPostalCode\")) {\r\n if (formfields.zip.value.length > 5)\r\n requiredFields[\"zip\"] = formfields.zip.value.substring(0, 5);\r\n else\r\n requiredFields[\"zip\"] = formfields.zip.value;\r\n }\r\n else {\r\n formfields.zip.value = \"0\";\r\n }\r\n\r\n requiredFields[\"first_name\"] = formfields.first_name.value;\r\n requiredFields[\"last_name\"] = formfields.last_name.value;\r\n\r\n requiredFields[\"shipping_address1\"] = formfields.shipping_address1.value;\r\n requiredFields[\"shipping_city\"] = formfields.shipping_city.value;\r\n\r\n if (isShowShippingCountryFields(\"ShowState\")) {\r\n requiredFields[\"shipping_state\"] = formfields.shipping_state.value;\r\n }\r\n else {\r\n formfields.shipping_state.value = \"0\";\r\n }\r\n\r\n if (isShowShippingCountryFields(\"ShowPostalCode\")) {\r\n requiredFields[\"shipping_zip\"] = formfields.shipping_zip.value;\r\n }\r\n else {\r\n formfields.shipping_zip.value = \"0\";\r\n }\r\n\r\n requiredFields[\"shipping_country\"] = formfields.shipping_country.value;\r\n\r\n if (ShowFullAddressOnCheckout == false) {\r\n requiredFields[\"address1\"] = requiredFields[\"country\"] = requiredFields[\"city\"] = requiredFields[\"state\"] = undefined;\r\n requiredFields[\"shipping_address1\"] = requiredFields[\"shipping_country\"] = requiredFields[\"shipping_city\"] = requiredFields[\"shipping_state\"] = undefined;\r\n }\r\n\r\n if (checkfieldvalidation(requiredFields) == false) { return; }\r\n if (validateEmail(requiredFields[\"email\"]) == false) {\r\n errorfield(\"email\", \"Please enter a valid email address\", true);\r\n inputreferences['email'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else if (requiredFields[\"phone_number\"] && validatePhoneNum(requiredFields[\"phone_number\"]) == false) {\r\n errorfield(\"phone_number\", \"Please enter a valid phone #\", true);\r\n inputreferences['phone_number'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else if (requiredFields[\"shipping_phone_number\"] && validatePhoneNum(requiredFields[\"shipping_phone_number\"]) == false) {\r\n errorfield(\"shipping_phone_number\", \"Please enter a valid phone #\", true);\r\n inputreferences['shipping_phone_number'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else {\r\n\r\n if (PhoneNumberMandatory || (orderProducts && orderProducts.length == 0)) {\r\n requiredFields[\"phone_number\"] = formfields.phone_number.value;\r\n requiredFields[\"shipping_phone_number\"] = formfields.shipping_phone_number.value;\r\n }\r\n\r\n requiredFields[\"address2\"] = formfields.address2.value;\r\n requiredFields[\"shipping_address2\"] = formfields.shipping_address2.value;\r\n\r\n if (shopcartreducer.membershipValidation.ismembershipApplied &&\r\n (shopcartreducer.membershipValidation.memberEmail !== formfields.email.value\r\n || shopcartreducer.membershipValidation.memberLastName !== formfields.last_name.value)) {\r\n setColorState('');\r\n seterrorMsg(UserMembershipValidatedEmailAndLastName);\r\n return;\r\n }\r\n }\r\n\r\n return requiredFields;\r\n }\r\n\r\n const ValidatePaymentFields = () => {\r\n setColorState('');\r\n\r\n if (ValidateQuanity() == false)\r\n return;\r\n\r\n billingAddressSameAsAbover();\r\n\r\n reseterrorfield();\r\n\r\n requiredFields = BindRequiredFields();\r\n\r\n return requiredFields ? true : false;\r\n }\r\n\r\n const submitPaymentForm = () => {\r\n\r\n if (ValidatePaymentFields()) {\r\n\r\n if (genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts) > 0) {\r\n requiredFields[\"month\"] = formfields.MonthSelect.value;\r\n requiredFields[\"year\"] = formfields.YearSelect.value;\r\n //reseterrorfield();\r\n paymentsRef.current.SpreedlyTransactionCall(requiredFields);\r\n }\r\n else {\r\n paymentsRef.current.SpreedlyZeroDollarTransactionCall(requiredFields);\r\n }\r\n }\r\n }\r\n\r\n const onClickPayBtn = useDebouncedCallback(submitPaymentForm, 5000, { leading: true });\r\n\r\n\r\n function validateEmail(email) {\r\n var re = new RegExp(EmailRegex);\r\n return re.test(String(email).toLowerCase());\r\n }\r\n\r\n function validatePhoneNum(phoneNum) {\r\n let cusNumber = phoneNum.replace(/\\D/g, \"\");\r\n if (cusNumber != \"\" && cusNumber.length < 10) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n const fieldhandleChange = (event) => {\r\n if (event.currentTarget.name === \"checkBoxMember\")\r\n actionSetFieldValueState(dispatch, event.currentTarget.name, event.target.checked);\r\n else\r\n actionSetFieldValueState(dispatch, event.currentTarget.name, event.target.value);\r\n\r\n };\r\n\r\n const onChangeCountry = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"country\", value === null ? \"\" : value.Country);\r\n onChangeState(event, null);\r\n }\r\n\r\n const onChangeState = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"state\", value === null ? \"\" : value.State);\r\n\r\n }\r\n\r\n const onChangeShippingCountry = (event, value) => {\r\n if (value === null) {\r\n actionSetFieldValueState(dispatch, \"shipping_country\", \"\")\r\n actionSetFieldValueState(dispatch, \"shipping_state\", \"\")\r\n }\r\n else\r\n actionSetFieldValueState(dispatch, \"shipping_country\", value.Country);\r\n\r\n onChangeShippingState(event, null);\r\n\r\n }\r\n const onChangeShippingState = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"shipping_state\", value === null ? \"\" : value.State);\r\n\r\n }\r\n useEffect(() => {\r\n actionGetCountryAndState(dispatch);\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (countryandstates && countryandstates.length > 0) {\r\n if (formfields.country.value == \"\")\r\n actionSetFieldValueState(dispatch, \"country\", countryandstates[0].Country);\r\n if (formfields.shipping_country.value == \"\") {\r\n actionSetFieldValueState(dispatch, \"shipping_country\", countryandstates[0].Country);\r\n }\r\n }\r\n }, [countryandstates]);\r\n\r\n const isShowCountryFields = (columnName) => {\r\n return genfunction.GetValueFromCountryAndState(countryandstates, formfields.country.value, columnName);\r\n\r\n }\r\n\r\n const isShowShippingCountryFields = (columnName) => {\r\n return genfunction.GetValueFromCountryAndState(countryandstates, formfields.shipping_country.value, columnName);\r\n }\r\n\r\n const openerrorpopup = () => {\r\n return (paymenttranstate.errormsg != \"\" || errorMsg != \"\")\r\n }\r\n\r\n //Membership Validation\r\n\r\n const [open, setOpen] = React.useState(false);\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleCloseDialog = (event) => {\r\n actionSetFieldValueState(dispatch, \"email\", event.currentTarget.name);\r\n actionShopCartUpdateMembershipEmail(dispatch, event.currentTarget.name);\r\n setOpen(false);\r\n };\r\n\r\n const memberValidationReducer = useSelector(state => state.reducerMemberValidation);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const tourEvents = useSelector(state => state.reducerExtraItems.extramItems);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n\r\n useEffect(() => {\r\n if (memberValidationReducer.loading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [memberValidationReducer.loading]);\r\n\r\n\r\n useEffect(() => {\r\n if (memberValidationReducer && (shopcartreducer.membershipValidation.ismembershipApplied === false)) {\r\n if (memberValidationReducer.membervalidationError && memberValidationReducer.membervalidationError.length > 0) {\r\n\r\n setColorState('');\r\n seterrorMsg(memberValidationReducer.membervalidationError);\r\n }\r\n\r\n if (memberValidationReducer.membervalidation && memberValidationReducer.membervalidation.MemberValidation !== undefined) {\r\n\r\n if (!genfunction.ValidateMemberValidate(memberValidationReducer.membervalidation.MemberValidation[0])) {\r\n seterrorMsg(LastNameAndEmailORPhoneORAddressForMembership);\r\n actionResetMemberValidation(dispatch);\r\n return;\r\n }\r\n\r\n if (events && events.length > 0) {\r\n\r\n if (memberValidationReducer.membervalidation.MemberValidation[0].hasOwnProperty('AlertMessage')\r\n ) {\r\n setColorState('info');\r\n seterrorMsg(memberValidationReducer.membervalidation.MemberValidation[0].AlertMessage);\r\n actionSetFieldValueState(dispatch, \"memberno\", \"\");\r\n actionResetMemberValidation(dispatch);\r\n\r\n return;\r\n }\r\n\r\n if (memberValidationReducer.membervalidation.MemberValidation[0].hasOwnProperty('CostRateID')) {\r\n if (DefaultCostRateID == memberValidationReducer.membervalidation.MemberValidation[0].CostRateID) {\r\n setColorState('info');\r\n seterrorMsg(MembershipCostRateMatches)\r\n actionSetFieldValueState(dispatch, \"memberno\", \"\");\r\n actionResetMemberValidation(dispatch);\r\n return;\r\n }\r\n\r\n if (DefaultCostRateID != memberValidationReducer.membervalidation.MemberValidation[0].CostRateID) {\r\n if (shopcartreducer.cashless.length > 0 || shopcartreducer.tourCoupons.length > 0) {\r\n RemoveCouponsAndGiftCards();\r\n }\r\n\r\n GetTourEvents();\r\n }\r\n }\r\n\r\n }\r\n else if ((membershipPackages && membershipPackages.length > 0) || (gatickets && gatickets.length > 0) || ShowGiftCards() || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n setColorState('info');\r\n seterrorMsg(ValidMemberMsg);\r\n\r\n actionShopCartValidMember(dispatch,\r\n memberValidationReducer.membervalidation.MemberValidation[0].CostRateID,\r\n formfields.memberno.value,\r\n formfields.email.value,\r\n formfields.last_name.value);\r\n }\r\n }\r\n }\r\n else {\r\n if (memberValidationReducer.membervalidation !== undefined && memberValidationReducer.membervalidation.MemberValidation !== undefined && memberValidationReducer.loading) {\r\n actionEndMemberValidationLoading(dispatch);\r\n }\r\n }\r\n }, [memberValidationReducer]);\r\n\r\n useEffect(() => {\r\n if ((shopcartreducer.IDME.isIdMeApplied || shopcartreducer.membershipValidation.ismembershipApplied) && removeMembershipState === false) {\r\n if (genfunction.IsOrganization(events)) {\r\n setremoveMembershipState(true);\r\n actionResetMemberValidation(dispatch);\r\n\r\n if (events && events.length > 0) {\r\n RemoveCouponsAndGiftCards();\r\n GetTourEvents();\r\n }\r\n else if ((membershipPackages && membershipPackages.length > 0) || (gatickets && gatickets.length > 0) || ShowGiftCards() || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n RemoveMembership();\r\n }\r\n }\r\n }\r\n }, [events])\r\n\r\n useEffect(() => {\r\n\r\n if (memberValidationReducer.membervalidation &&\r\n memberValidationReducer.membervalidation.MemberValidation !== undefined\r\n && (shopcartreducer.membershipValidation.ismembershipApplied === false) && events.length > 0 && formfields.checkBoxMember.value == true) {\r\n\r\n actionShopCartApplyMembershipOnEvents(dispatch, memberValidationReducer.membervalidation.MemberValidation[0].CostRateID, tourEvents, formfields.memberno.value, formfields.email.value, formfields.last_name.value);\r\n\r\n if (memberValidationReducer.membervalidation.MemberValidation[0].EmailMatched == false\r\n && document.getElementById('Email').value !== memberValidationReducer.membervalidation.MemberValidation[0].EmailOnFile) {\r\n handleClickOpen();\r\n }\r\n\r\n if (removemembershipcouponandgifts) {\r\n setColorState('info');\r\n seterrorMsg(CouponAndGiftcardAlreadyApplied);\r\n }\r\n else {\r\n if (colorState !== 'info') {\r\n setColorState('info');\r\n seterrorMsg(Membershipsuccess);\r\n\r\n if (idmeuserdata && idmeuserdata.userdata.hasOwnProperty('attributes') && idmeuserdata.userdataerror.length < 1) {\r\n actionResetCostRate(dispatch);\r\n actionResetIDMEUSERDATA(dispatch);\r\n }\r\n }\r\n }\r\n }\r\n\r\n let btnStatus = document.getElementById(\"btnApplyMembership\");\r\n\r\n if (btnStatus && btnStatus.name === \"Remove\" && removeMembershipState) {\r\n\r\n actionShopCartApplyMembershipOnEvents(dispatch, DefaultCostRateID, tourEvents, 0, \"\", \"\");\r\n RemoveMembership();\r\n }\r\n else if (genfunction.IsOrganization(events) && shopcartreducer.IDME.isIdMeApplied && removeMembershipState) {\r\n\r\n actionShopCartApplyidmeCostratesOnEvents(dispatch, DefaultCostRateID, tourEvents);\r\n RemoveMembership();\r\n }\r\n }, [tourEvents]);\r\n\r\n useEffect(() => {\r\n genfunction.CalculateAmountSelectedForMembers(events, bookingTypes);\r\n\r\n }, [tourEvents, events])\r\n\r\n const RemoveMembership = () => {\r\n\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n actionEndMemberValidationLoading(dispatch);\r\n actionSetFieldValueState(dispatch, \"memberno\", \"\");\r\n actionSetFieldValueState(dispatch, \"checkBoxMember\", false);\r\n\r\n setColorState('info');\r\n\r\n if (removemembershipcouponandgifts)\r\n seterrorMsg(RemoveMembershipCouponAndGiftcard)\r\n else\r\n seterrorMsg(RemoveMembershipsuccess)\r\n\r\n setremoveMembershipState(false);\r\n\r\n }\r\n\r\n const GetTourEvents = () => {\r\n\r\n let eventslist = genfunction.GetTourEventsList(events);\r\n actionGetExtraItems(dispatch, null, null, null, null, null, null, eventslist);\r\n }\r\n\r\n const RemoveCouponsAndGiftCards = () => {\r\n\r\n if (shopcartreducer.cashless.length > 0) {\r\n actionShopCartRemoveGiftcards(dispatch);\r\n setremovemembershipcouponandgifts(true);\r\n }\r\n\r\n if (shopcartreducer.tourCoupons.length > 0) {\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n setremovemembershipcouponandgifts(true);\r\n }\r\n }\r\n\r\n const MemberValidation = (memberno) => {\r\n\r\n errorcancelhandle();\r\n setColorState('');\r\n setremovemembershipcouponandgifts(false);\r\n\r\n var requiredFields1 = {};\r\n requiredFields1[\"memberno\"] = document.getElementById(\"memberno\").value;\r\n requiredFields1[\"last_name\"] = document.getElementById(\"Lname\").value;\r\n var email = document.getElementById(\"Email\").value.trim();\r\n var phone = document.getElementById(\"phone_number\").value;\r\n var address = '';\r\n\r\n if ((ShowFullAddressOnCheckout)) {\r\n address = document.getElementById(\"address1\").value;\r\n }\r\n var buttonState = document.getElementById(\"btnApplyMembership\").name;\r\n\r\n if (buttonState === \"Apply\") {\r\n\r\n if (checkfieldvalidation(requiredFields1) == false) { return; }\r\n\r\n if (email.length < 1 && phone.length < 1 && address.length < 1) {\r\n seterrorMsg(RequiredEmailORPhoneORAddressForMembership);\r\n return;\r\n }\r\n\r\n if (email.length > 0 && validateEmail(email) == false) {\r\n errorfield(\"email\", \"Please enter a valid email address\", true);\r\n inputreferences['email'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n\r\n if (memberno.trim().length > 1) {\r\n\r\n if (memberValidationReducer.membervalidation &&\r\n memberValidationReducer.membervalidation.MemberValidation !== undefined) {\r\n actionResetMemberValidation(dispatch);\r\n }\r\n\r\n if (events && events.length > 0) {\r\n let latestDate = genfunction.GetLatestTourEvent(events);\r\n actionGetMemberValidation(dispatch, memberno, requiredFields1[\"last_name\"], email, phone, address, latestDate);\r\n }\r\n else if ((membershipPackages && membershipPackages.length > 0) || (gatickets && gatickets.length > 0) || ShowGiftCards() || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n actionGetMemberValidation(dispatch, memberno, requiredFields1[\"last_name\"], email, phone, address, null);\r\n }\r\n }\r\n }\r\n else {\r\n\r\n setremoveMembershipState(true);\r\n actionResetMemberValidation(dispatch);\r\n\r\n if (events && events.length > 0) {\r\n RemoveCouponsAndGiftCards();\r\n GetTourEvents();\r\n }\r\n if ((membershipPackages && membershipPackages.length > 0) || (gatickets && gatickets.length > 0) || ShowGiftCards() || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n RemoveMembership();\r\n }\r\n }\r\n }\r\n\r\n //Membership Validation End\r\n\r\n\r\n //IDme Intregration Start\r\n\r\n useEffect(() => {\r\n if (events && events.length > 0 && window.location.href.includes('?#access_token=') && window.location.href.includes('token_type') && window.location.href.includes('expires_in')\r\n && !idmeuserdata.loading && !idmeuserdata.userdata.hasOwnProperty('attributes') && idmeuserdata.userdataerror.length < 1) {\r\n\r\n let indexOfAccessToken = parseInt(window.location.href.indexOf('access_token=')) + 13;\r\n let idmeAccessToken = window.location.href.substr(indexOfAccessToken, 32);\r\n actionGetIDMEUSERDATA(dispatch, idmeAccessToken);\r\n }\r\n\r\n if (events && events.length > 0 && window.location.href.includes('?#error=invalid_scope')) {\r\n seterrorMsg(IDmeInvalidGroup);\r\n }\r\n\r\n if (events && events.length > 0 && window.location.href.includes('?#error=unsupported_response_type')) {\r\n seterrorMsg(IDmeResponseTypeError);\r\n }\r\n\r\n if (events && events.length > 0 && window.location.href.includes('?#error=invalid_client')) {\r\n seterrorMsg(IDmeInvalidClient);\r\n }\r\n\r\n if (events && events.length > 0 && window.location.href.includes('?#error=invalid_redirect_uri')) {\r\n seterrorMsg(IDmeInvalidRedirectUri);\r\n }\r\n\r\n if (events && events.length > 0 && window.location.href.includes('?#error=access_denied')) {\r\n seterrorMsg(IDmeAccessDenied);\r\n }\r\n\r\n }, [window.location.href]);\r\n\r\n useEffect(() => {\r\n\r\n if (idmeuserdata.userdata &&\r\n idmeuserdata.userdata.hasOwnProperty('attributes') && idmeuserdata.userdata.hasOwnProperty('status')) {\r\n\r\n let group = '';\r\n let subgroups = '';\r\n\r\n if (idmeuserdata.userdata.status.length > 0) {\r\n group = idmeuserdata.userdata.status[0].group;\r\n subgroups = idmeuserdata.userdata.status[0].subgroups;\r\n }\r\n\r\n actionGetCostRate(dispatch, group, subgroups);\r\n }\r\n\r\n if (idmeuserdata.userdataerror.hasOwnProperty('Errors') && idmeuserdata.userdataerror.Errors.length > 0 && errorMsg.length == 0) {\r\n seterrorMsg(idmeuserdata.userdataerror.Errors[0].ErrorMessage)\r\n }\r\n }, [idmeuserdata]);\r\n\r\n useEffect(() => {\r\n\r\n if (costrate.costrate.hasOwnProperty('CostRateID') && costrate.costrate.CostRateID > -1 && shopcartreducer.IDME.idmecostrate !== costrate.costrate.CostRateID\r\n && costrate.loading === false && !genfunction.IsOrganization(events)) {\r\n GetTourEvents();\r\n }\r\n\r\n if (costrate.costraterror.length > 0) {\r\n seterrorMsg(costrate.costraterror);\r\n }\r\n }, [costrate.costrate]);\r\n\r\n useEffect(() => {\r\n if (costrate.costrate.hasOwnProperty('CostRateID') && costrate.costrate.CostRateID > -1 && shopcartreducer.IDME.isIdMeApplied === false\r\n && events.length > 0 && !genfunction.IsOrganization(events)) {\r\n actionShopCartApplyidmeCostratesOnEvents(dispatch, costrate.costrate.CostRateID, tourEvents);\r\n if (colorState !== 'info') {\r\n setColorState('info');\r\n seterrorMsg(IDmeSuccessMsg)\r\n }\r\n }\r\n\r\n }, [tourEvents]);\r\n\r\n const ConnectIDME = () => {\r\n\r\n let idmeApiurl = CryptoAES.decrypt(IDmeAPIurl, '1271').toString(CryptoENC);\r\n let idmeclientID = CryptoAES.decrypt(IDmeClientID, '1271').toString(CryptoENC);\r\n\r\n let idmeurl = idmeApiurl + idmeclientID + '&redirect_uri=' + IDmeRedirectURI + '&response_type=' + IDmeResponseType + '&scopes=' + IDmeScope;\r\n return idmeurl;\r\n }\r\n\r\n const ShowIDME = () => {\r\n\r\n let show = false;\r\n let costrate = DefaultCostRateID;\r\n\r\n if (shopcartreducer.membershipValidation.ismembershipApplied) {\r\n costrate = shopcartreducer.membershipValidation.membershipcostrate;\r\n }\r\n\r\n if (shopcartreducer.IDME.isIdMeApplied) {\r\n costrate = shopcartreducer.IDME.idmecostrate;\r\n }\r\n\r\n events && events.length > 0 && events.map(e => {\r\n e.TourProducts.map(prods => {\r\n if (prods.hasOwnProperty('PriceMatrix') &&\r\n prods.PriceMatrix.filter(x => x.CostRateID === costrate && x.VerifyGroupMembership === true).length > 0) {\r\n show = true;\r\n }\r\n })\r\n });\r\n\r\n if (show && genfunction.IsOrganization(events)) {\r\n show = false;\r\n }\r\n\r\n if (shopcartreducer.IDME.isIdMeApplied) {\r\n show = false;\r\n }\r\n\r\n return show && CheckForIDmeValidProducts;\r\n }\r\n\r\n //IDme Intregration End\r\n\r\n const changeBillingAddress = () => {\r\n actionSetFieldValueState(dispatch, 'billingAddressSame', !formfields.billingAddressSame.value);\r\n }\r\n let displayclass = \"\";\r\n if (paymenttranstate.loading)\r\n displayclass = classes.hidden;\r\n else if (paymenttranstate.haspaid)\r\n displayclass = classes.displaynone;\r\n\r\n\r\n\r\n const GetTransOptionalText = () => {\r\n let optionalTxt = '';\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n optionalTxt = transactionfee.transactionFee[0].TransactionFeeOptionalText;\r\n\r\n optionalTxt += ' [' + genfunction.ccyFormat(parseFloat(genfunction.TransactionFee(events, donation, transactionfee.transactionFee[0], cashless, membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts))) + ']';\r\n }\r\n\r\n return optionalTxt;\r\n }\r\n\r\n let showFreeTicket = ((events && events.length > 0) || (gatickets && gatickets.length > 0) || (membershipPackages && membershipPackages.length > 0) || (orderProducts && orderProducts.length) || (donationProducts && donationProducts.length > 0)) > 0 && genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts) == 0 ? true : false;\r\n\r\n let memberemailonFile = GetEmailOnFileVal(memberValidationReducer);\r\n\r\n let membershipInCart = membershipPackages && membershipPackages.length > 0 ? true : false;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {HideMemberValidation === false && !genfunction.IsOrganization(events) ?\r\n \r\n \r\n {IamMember}\r\n \r\n : null}\r\n\r\n {formfields.checkBoxMember.value ?\r\n \r\n : null}\r\n {formfields.checkBoxMember.value ?\r\n \r\n \r\n : null}\r\n\r\n {ShowIDME() ?\r\n \r\n \r\n : null}\r\n\r\n \r\n 0)) ? \"Phone #\" : \"Phone # (Optional)\"}\r\n onChange={fieldhandleChange}\r\n value={formfields.phone_number.value}\r\n inputRef={inputreferences['phone_number']}\r\n fullWidth={true}\r\n\r\n error={errorstate.phone_number.errorstate}\r\n helperText={errorstate.phone_number.errortext}\r\n InputProps={{\r\n inputComponent: TextMaskCustom,\r\n inputMode: 'numeric', pattern: '[0-9]*'\r\n }}\r\n disabled={membershipInCart}\r\n >\r\n \r\n \r\n\r\n\r\n {ShowFullAddressOnCheckout ?\r\n <>\r\n \r\n\r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) ?\r\n\r\n \r\n {\r\n if (option.hasOwnProperty('Country')) {\r\n return option.Country;\r\n }\r\n return option;\r\n }}\r\n value={formfields.country.value}\r\n // defaultValue={ countryandstates[0]}\r\n renderOption={(option) => (\r\n <>\r\n {errorstate.country.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) && isShowCountryFields(\"ShowState\") ?\r\n\r\n \r\n x.Country == formfields.country.value).map(o => o.hasOwnProperty(\"Picklist\") ? o.Picklist : [])[0]\r\n : []\r\n }\r\n fullWidth={true}\r\n onChange={onChangeState}\r\n getOptionLabel={(option) => {\r\n if (option.hasOwnProperty('State')) {\r\n return option.State;\r\n }\r\n return option;\r\n }}\r\n value={formfields.state.value}\r\n\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) =>\r\n ({errorstate.state.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n \r\n : \"\"}\r\n\r\n\r\n < Grid item xs={12} md={isShowCountryFields(\"ShowState\") ? 6 : 12}>\r\n {isShowCountryFields(\"ShowPostalCode\") == true ?\r\n \r\n\r\n\r\n {ShowFullAddressOnCheckout ?\r\n <>\r\n \r\n changeBillingAddress()}\r\n checked={formfields.billingAddressSame.value}\r\n disabled={membershipInCart}\r\n />\r\n }\r\n label=\"Billing Address same as above\"\r\n />\r\n \r\n {formfields.billingAddressSame.value == false ?\r\n <>\r\n \r\n Billing Address \r\n \r\n\r\n \r\n 0)) ? \"Phone #\" : \"Phone # (Optional)\"}\r\n inputRef={inputreferences['shipping_phone_number']}\r\n onChange={fieldhandleChange}\r\n value={formfields.shipping_phone_number.value}\r\n fullWidth={true}\r\n error={errorstate.shipping_phone_number.errorstate}\r\n helperText={errorstate.shipping_phone_number.errortext}\r\n InputProps={{\r\n inputComponent: TextMaskCustom,\r\n inputMode: 'numeric', pattern: '[0-9]*'\r\n }}\r\n disabled={membershipInCart}\r\n >\r\n \r\n \r\n \r\n\r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) ?\r\n\r\n \r\n {\r\n if (option.hasOwnProperty('Country')) {\r\n return option.Country;\r\n }\r\n return option;\r\n }}\r\n value={formfields.shipping_country.value}\r\n renderOption={(option) => (\r\n <>\r\n {errorstate.shipping_country.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) && isShowShippingCountryFields(\"ShowState\") ?\r\n\r\n \r\n\r\n x.Country == formfields.shipping_country.value).map(o => o.hasOwnProperty(\"Picklist\") ? o.Picklist : [])[0]\r\n : []\r\n }\r\n fullWidth={true}\r\n onChange={onChangeShippingState}\r\n getOptionLabel={(option) => {\r\n if (option.hasOwnProperty('State')) {\r\n return option.State;\r\n }\r\n return option;\r\n }}\r\n value={formfields.shipping_state.value}\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) =>\r\n ({errorstate.shipping_state.errortext} \r\n \r\n : \"\"}\r\n\r\n\r\n \r\n\r\n \r\n {isShowShippingCountryFields(\"ShowPostalCode\") ?\r\n \r\n \r\n : null}\r\n : \"\"}\r\n {showFreeTicket ? \r\n\r\n \r\n \r\n \r\n\r\n\r\n {PaymentMethodType === \"Spreedly\" ?\r\n <>\r\n {ApplyTransactionFee && showFreeTicket === false ?\r\n < Grid item xs={12}>\r\n \r\n {GetTransOptionalText()}\r\n \r\n \r\n : null}\r\n\r\n < Grid item xs={12}>\r\n \r\n {TermsnConditionCheckBoxText}\r\n { setopentnc(true) }} > Terms and Conditions \r\n \r\n\r\n \r\n \r\n {tncchecked && EnableAlternateMerchantOnline && !showFreeTicket && (orderProducts && orderProducts.length < 1) ? \r\n \r\n Pay\r\n : null}\r\n\r\n \r\n { setopentnc(false) }}> \r\n \r\n {\"Confirmation\"} \r\n \r\n \r\n Email does not match. Email on file is {memberemailonFile}. Would you like to use this email or update the email address on file?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n );\r\n\r\n});\r\n\r\nexport default PaymentForm;\r\n\r\nfunction GetEmailOnFileVal(memberValidationReducer) {\r\n return memberValidationReducer.membervalidation !== undefined\r\n && memberValidationReducer.membervalidation.MemberValidation !== undefined\r\n && memberValidationReducer.membervalidation.MemberValidation[0] !== undefined\r\n && memberValidationReducer.membervalidation.MemberValidation[0].hasOwnProperty(\"EmailOnFile\") ?\r\n memberValidationReducer.membervalidation.MemberValidation[0].EmailOnFile : '';\r\n}\r\n\r\n","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { TextField, Button, Card, CardContent, CardHeader, Grid } from '@material-ui/core';\r\nimport { actionGetCoupon, actionResetCoupon, actionEndCouponLoading } from 'actions';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport PinCodeDialogeBox from '../../../components/DialogeBox/PinCodeDialogeBox'\r\nimport { genfunction } from '../../../helpers'\r\nimport { actionAddGiftCardHold, actionResetGiftCardHoldState, actionRecalculateGiftCardHold } from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions';\r\nimport { actionShopCardAddGiftCard, actionResetCouponAlreadyApplied, actionResetCouponRemoveReset } from 'actions';\r\nimport { actionResetUniqueCouponCardHoldState } from 'actions';\r\nimport { actionDeleteUniqueCoupon } from 'actions';\r\n\r\nconst { HighestCouponAlreadyApplied, HideCoupons, HideGiftCards, GiftCardEnterPinTitle, GiftCardEnterPinSubTitle1, UseGiftcardPIN, CouponNotApplicableOnOtherPaymentMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n btnAlign: {\r\n marginTop: '17px'\r\n }\r\n}));\r\n\r\nconst CouponGiftCard = props => {\r\n const [state, setState] = React.useState({ couponCode: '' });\r\n const { products } = props;\r\n const classes = useStyles();\r\n const [giftCardno, setgiftCardno] = useState(\"\");\r\n const [Pin, setPin] = useState(\"\");\r\n const [showPinPopUp, setShowPinPopUp] = useState(\"\");\r\n const [errormsg, seterrormsg] = useState(\"\");\r\n const [colorState, setColorState] = React.useState('');\r\n\r\n const dispatch = useDispatch();\r\n const { GiftCardHold, GiftCardHoldLoading, GiftCardHoldError } = useSelector(state => state.reducerGiftCardHold);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n\r\n useEffect(() => {\r\n seterrormsg(GiftCardHoldError)\r\n }, [GiftCardHoldError]);\r\n\r\n\r\n useEffect(() => {\r\n if (GiftCardHoldLoading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [GiftCardHoldLoading]);\r\n\r\n useEffect(() => {\r\n if (GiftCardHold.GiftcardHoldRef)\r\n ValidateAndAddGiftCard(GiftCardHold)\r\n }, [GiftCardHold]);\r\n\r\n useEffect(() => {\r\n RecalculationGiftCard();\r\n }, [events, donation, showTransFee])\r\n\r\n const ValidateAndAddGiftCard = (giftcardholdresponse) => {\r\n if (giftcardholdresponse.HoldAmount == 0) {\r\n seterrormsg('Giftcard is already consumed');\r\n }\r\n else {\r\n actionShopCardAddGiftCard(dispatch, giftcardholdresponse);\r\n actionResetGiftCardHoldState(dispatch);\r\n }\r\n }\r\n\r\n const RecalculationGiftCard = () => {\r\n const totalamount = genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts);\r\n if (totalamount != 0 && cashless.length > 0) {\r\n actionRecalculateGiftCardHold(dispatch);\r\n }\r\n }\r\n\r\n const CheckGiftCard = (giftcardNo) => {\r\n const totalamount = genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts);\r\n if (totalamount <= 0) {\r\n seterrormsg('Please add item in cart before applying Giftcard.')\r\n }\r\n else if (giftCardno == '') {\r\n seterrormsg('Please enter Giftcard number.')\r\n }\r\n else {\r\n\r\n if (UseGiftcardPIN == \"false\") {\r\n actionAddGiftCardHold(dispatch, giftcardNo);\r\n setgiftCardno('');\r\n }\r\n else {\r\n setPin(\"\");\r\n setShowPinPopUp(true);\r\n }\r\n }\r\n }\r\n\r\n const hasamount = () => {\r\n const totalamount = genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts);\r\n return totalamount > 0;\r\n }\r\n\r\n const openerrorpopup = () => {\r\n return (errormsg != \"\")\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n actionResetGiftCardHoldState(dispatch);\r\n actionResetUniqueCouponCardHoldState(dispatch);\r\n actionResetCouponAlreadyApplied(dispatch);\r\n actionResetCoupon(dispatch);\r\n setgiftCardno('');\r\n seterrormsg('');\r\n }\r\n\r\n const reducerCoupon = useSelector(state => state.reducerCoupon);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const uniqueCouponHolds = useSelector(state => state.reducerUniqueCouponHolds);\r\n\r\n const handleChange = (e) => {\r\n\r\n setState({ ...state, couponCode: e.target.value });\r\n }\r\n\r\n useEffect(() => {\r\n if (reducerCoupon.couponError !== undefined && reducerCoupon.couponError.length > 0) {\r\n seterrormsg(reducerCoupon.couponError);\r\n }\r\n }, [reducerCoupon.couponError]);\r\n\r\n useEffect(() => {\r\n if (shopcartreducer !== undefined && shopcartreducer.couponAlreadyApplied) {\r\n seterrormsg(HighestCouponAlreadyApplied);\r\n }\r\n }, [shopcartreducer.couponAlreadyApplied]);\r\n\r\n useEffect(() => {\r\n if (uniqueCouponHolds !== undefined && uniqueCouponHolds.UniqueCouponError.length > 0) {\r\n seterrormsg(uniqueCouponHolds.UniqueCouponError);\r\n actionEndCouponLoading(dispatch);\r\n }\r\n }, [uniqueCouponHolds.UniqueCouponError]);\r\n\r\n useEffect(() => {\r\n if (shopcartreducer !== undefined && shopcartreducer.removeCoupon.length > 0) {\r\n actionDeleteUniqueCoupon(dispatch, shopcartreducer.removeCoupon);\r\n actionResetCouponRemoveReset(dispatch);\r\n }\r\n }, [shopcartreducer.removeCoupon]);\r\n\r\n useEffect(() => {\r\n if (reducerCoupon.loading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [reducerCoupon.loading]);\r\n\r\n const redirectCall = (couponCode) => {\r\n\r\n if (couponCode.length > 0) {\r\n\r\n if (!CheckUniqueCouponAlreadyApplied(couponCode)) {\r\n actionGetCoupon(dispatch, couponCode);\r\n setState({ ...state, couponCode: '' });\r\n\r\n if (shopcartreducer.events.filter(x => x.PaymentOption === \"OtherPay\").length > 0) {\r\n setColorState('info');\r\n seterrormsg(CouponNotApplicableOnOtherPaymentMsg)\r\n }\r\n }\r\n else {\r\n seterrormsg(\"Unique Coupon already applied, please remove existing coupon and try again.\");\r\n }\r\n }\r\n }\r\n\r\n const CheckUniqueCouponAlreadyApplied = (couponCode) => {\r\n\r\n let exist = false;\r\n if (events && events.length > 0) {\r\n\r\n events.map(e => {\r\n\r\n if (e.CouponItems.filter(x => x.UniqueCouponCode == couponCode && x.isUniqueCoupon).length > 0) {\r\n exist = true;\r\n }\r\n });\r\n }\r\n\r\n return exist;\r\n }\r\n\r\n const GetPinPopupButtonText = () => {\r\n if (UseGiftcardPIN == \"optional\")\r\n return \"Skip, I don???t have one\";\r\n else if (UseGiftcardPIN == \"required\")\r\n return \"Cancel\";\r\n }\r\n\r\n const PinConfirmHandler = () => {\r\n if (Pin == undefined || Pin == \"\") {\r\n seterrormsg(\"Please Enter valid Pin\")\r\n }\r\n else {\r\n setShowPinPopUp(false);\r\n actionAddGiftCardHold(dispatch, giftCardno + \"--\" + Pin);\r\n setgiftCardno('');\r\n }\r\n }\r\n\r\n const PinCancelHandler = () => {\r\n setShowPinPopUp(false);\r\n if (UseGiftcardPIN == \"optional\") {\r\n actionAddGiftCardHold(dispatch, giftCardno);\r\n }\r\n }\r\n\r\n const onChangePinHandler = (pin) => {\r\n setPin(pin);\r\n }\r\n\r\n const GiftCardsOnly = () => {\r\n let res = false;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0 && giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n\r\n if ((events && events.length > 0) || (membershipPackages && membershipPackages.length > 0) || (gatickets && gatickets.length > 0) || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n res = false;\r\n }\r\n\r\n return res;\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {HideCoupons === false ? \r\n handleChange(e)}\r\n label=\"Enter Coupon Code\"\r\n value={state.couponCode}\r\n />\r\n \r\n : null}\r\n\r\n {HideGiftCards === false ? \r\n {\r\n setgiftCardno(event.target.value);\r\n }} />\r\n \r\n : null}\r\n\r\n \r\n \r\n \r\n \r\n \r\n : null}\r\n\r\n \r\n );\r\n};\r\n\r\nexport default CouponGiftCard;\r\n","import React from 'react';\r\nimport { Typography } from '@material-ui/core';\r\nimport { useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers'\r\nconst { CartDiscardMsg, CartDiscardTime } = window['runConfig'];\r\n\r\n\r\n\r\nconst CartDiscardTimeInfo = props => {\r\n\r\n const carddiscard = useSelector(state => state.reducerCardDiscardTime);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const MembershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const GATickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n const ShowGiftCards = () => {\r\n let res = false;\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n }\r\n\r\n return res;\r\n }\r\n\r\n function millisecondsToTime(milli) {\r\n var seconds = Math.floor((milli / 1000) % 60);\r\n var minutes = Math.floor((milli / (60 * 1000)) % 60);\r\n return minutes + \":\" + genfunction.PaddingString(seconds, \"0\", 2);\r\n }\r\n\r\n return (\r\n (events.length > 0 || MembershipPackages.length > 0 || GATickets.length > 0 || orderProducts.length > 0 || ShowGiftCards() || donationProducts.length > 0) && CartDiscardTime > 0 ?\r\n\r\n \r\n {CartDiscardMsg} {\" \"} {millisecondsToTime(carddiscard.DiscardTime * 1000)}\r\n : \"\"\r\n\r\n );\r\n};\r\n\r\nexport default CartDiscardTimeInfo;\r\n","import React, { useEffect } from 'react';\r\nimport Button from '@material-ui/core/Button';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { actionGetDonation } from 'actions';\r\nimport { actionShopCartUpdatePopupCounts } from 'actions';\r\nimport { FormattedInputs } from '../../../components/InputControls';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nconst { DonationProductID, DonationHeading, DonationDetails, InvalidDOnationAmount } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n errorFont: {\r\n color: 'red'\r\n }\r\n}));\r\n\r\nexport default function DonationPopUp(props) {\r\n\r\n const classes = useStyles();\r\n\r\n useEffect(() => {\r\n if (DonationProductID !== undefined) {\r\n actionGetDonation(dispatch, DonationProductID, 'donation');\r\n }\r\n }, []);\r\n\r\n const dispatch = useDispatch();\r\n const donations = useSelector(state => state.reducerDonation);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n\r\n const [open, setOpen] = React.useState(false);\r\n const [showOthers, setshowOthers] = React.useState(false);\r\n const [donationPrice, setdonationPrice] = React.useState(0);\r\n const [productName, setproductName] = React.useState('');\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n const ShowGiftCards = () => {\r\n let res = false;\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n }\r\n\r\n return res;\r\n }\r\n\r\n if (props.showDialog && open === false && ((events && events.length > 0) || (gatickets && gatickets.length > 0) || (membershipPackages && membershipPackages.length > 0) || (donationProducts && donationProducts.length > 0) || ShowGiftCards()) && donation.popupCounts === 0 && donationProducts.length == 0) {\r\n setOpen(true);\r\n actionShopCartUpdatePopupCounts(dispatch)\r\n }\r\n\r\n const Validated = (val) => {\r\n if (val)\r\n seterrorMsg('');\r\n else\r\n seterrorMsg(InvalidDOnationAmount);\r\n }\r\n\r\n const ApplyDonation = () => {\r\n\r\n if (donationPrice === \"\" || donationPrice === 0 || donationPrice < 0.1) {\r\n Validated(false);\r\n return;\r\n }\r\n\r\n if (errorMsg !== '' && errorMsg.length > 0) {\r\n return;\r\n }\r\n\r\n props.ApplyDonation(DonationProductID, productName, donationPrice, showOthers ? true : false);\r\n props.CloseDonationPopUp();\r\n setOpen(false);\r\n }\r\n\r\n const handleClose = () => {\r\n props.CloseDonationPopUp();\r\n setOpen(false);\r\n Validated(true);\r\n };\r\n\r\n const handleChange = (event) => {\r\n\r\n if (event.target.value === \"Other\") {\r\n setdonationPrice('');\r\n setshowOthers(true)\r\n }\r\n else {\r\n setshowOthers(false);\r\n setdonationPrice(event.target.value);\r\n setproductName(event.target.name);\r\n Validated(true);\r\n }\r\n };\r\n\r\n const handleOtherPrice = (event) => {\r\n setdonationPrice(event.target.value);\r\n setproductName(event.target.name);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {DonationDetails}\r\n \r\n \r\n \r\n \r\n {validateMsg}\r\n \r\n \r\n \r\n\r\n \r\n\r\n {donations.donations !== \"nocontent\" && donations.donations.length > 0 ?\r\n donations.donations.map((dona, i) => {\r\n\r\n return dona.Price > 0 ?\r\n\r\n dona.hasOwnProperty(\"MaxPrice\") ?\r\n\r\n \r\n \r\n \r\n \r\n \r\n : null}\r\n\r\n \r\n );\r\n};\r\n\r\nexport default Donations;\r\n","import React, { useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { genfunction } from 'helpers'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport {\r\n Card, CardContent, Typography, CardHeader, IconButton,\r\n Table, TableBody, TableCell, TableRow, Hidden, Tab\r\n} from '@material-ui/core';\r\nimport { withRouter } from 'react-router';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { NumberSpinner } from '../../../components/InputControls'\r\nimport { actionShopCartAddMembershipPackage } from 'actions';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { actionRecalculateGiftCardHold } from 'actions';\r\n\r\nconst { MinimumMembershipQuantityError } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheadertext: {\r\n marginTop: \"8px\"\r\n },\r\n tourbox: {\r\n marginBottom: \"10px\"\r\n },\r\n labelbold: {\r\n fontWeight: \"bold\",\r\n fontSize: \"18px\"\r\n },\r\n tablecell: {\r\n padding: \"5px\"\r\n },\r\n AddHoverOnIcons: {\r\n cursor: \"pointer !important\"\r\n }\r\n}));\r\n\r\nconst MembershipPackagesCard = props => {\r\n\r\n const { className } = props;\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n\r\n\r\n const changeQuantityHandler = (reference, quantity, memTypeID, mempack) => {\r\n //Check Min and Max Quantity\r\n //need to add\r\n\r\n mempack.MembershipProducts = mempack.MembershipProducts.map(memprod => {\r\n\r\n if (memprod.MembershipType === \"AddOn\" && memprod.MembershipTypeID == memTypeID) {\r\n memprod.Quantity = quantity;\r\n }\r\n\r\n return memprod;\r\n })\r\n\r\n actionShopCartAddMembershipPackage(dispatch, mempack);\r\n }\r\n\r\n const removemembershipType = (memPackage, memType) => {\r\n\r\n if (memType && memType.MinQuantity < 1) {\r\n memPackage.MembershipProducts = memPackage.MembershipProducts.map(m => {\r\n\r\n if (m.MembershipTypeID == memType.MembershipTypeID) {\r\n if (m.MembershipType === \"Membership\") {\r\n m.Users = [];\r\n }\r\n else if (m.MembershipType === \"AddOn\") {\r\n m.Quantity = 0;\r\n }\r\n }\r\n return m;\r\n });\r\n\r\n actionShopCartAddMembershipPackage(dispatch, memPackage);\r\n }\r\n else {\r\n seterrorMsg('Minimum Quantity for this Membership is ' + memType.MinQuantity + ', You Can not remove it.');\r\n }\r\n }\r\n\r\n const removeUserFromMembershipType = (memPackage, memProdType, user) => {\r\n\r\n if (user && user.isPrimaryMember) {\r\n seterrorMsg(user.firstName + ' ' + user.lastName + ' is primary member, you cannot remove it.');\r\n return;\r\n }\r\n\r\n if (memProdType && memProdType.MinQuantity < 1 || (memProdType.MembershipType == \"Membership\" && memProdType.Users.length > memProdType.MinQuantity)) {\r\n\r\n memPackage.MembershipProducts = memPackage.MembershipProducts.map(m => {\r\n\r\n if (m.MembershipTypeID == m.MembershipTypeID && m.MembershipType === \"Membership\") {\r\n\r\n m.Users = m.Users.filter(x => x.userNo != user.userNo);\r\n }\r\n\r\n return m;\r\n });\r\n\r\n actionShopCartAddMembershipPackage(dispatch, memPackage);\r\n\r\n if (cashless && cashless.length > 0) {\r\n actionRecalculateGiftCardHold(dispatch);\r\n }\r\n }\r\n else {\r\n seterrorMsg('Minimum Quantity for this Membership is ' + memProdType.MinQuantity + ', You Can not remove it.');\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const replaceEscapeCharacters = (item) => {\r\n var itemValue = item.split(\"\\\\r\\\\n\").join(\"
\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n\r\n const EditMembershipPackage = (membership) => {\r\n\r\n props.history.push({\r\n pathname: '/memberships/join/' + membership.MembershipPackageID\r\n })\r\n }\r\n\r\n return (\r\n props.membershipPackages ?\r\n props.membershipPackages.map(memPackage => (\r\n\r\n { EditMembershipPackage(memPackage) }}\r\n />\r\n }\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n )) : null\r\n );\r\n};\r\n\r\n\r\nexport default withRouter(MembershipPackagesCard);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { genfunction } from 'helpers'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport {\r\n Card, CardContent, CardHeader, IconButton,\r\n Table, TableBody, TableCell, TableRow, Hidden\r\n} from '@material-ui/core';\r\n\r\nimport { NumberSpinner } from '../../../components/InputControls'\r\nimport { withRouter } from 'react-router'\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheadertext: {\r\n marginTop: \"8px\"\r\n },\r\n labelbold: {\r\n fontWeight: \"bold\",\r\n fontSize: \"18px\"\r\n },\r\n tablecell: {\r\n padding: \"5px\"\r\n }\r\n}));\r\n\r\nconst GATicketCard = props => {\r\n\r\n const { products } = props;\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const classes = useStyles();\r\n\r\n const changeQuantityHandler = (reference, value) => {\r\n props.changeQuantityHandler(reference, value);\r\n }\r\n\r\n const removeclickhandler = (ProductID) => {\r\n props.removeclickhandler(ProductID);\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const MaxTicketQuantity = (ProductID) => {\r\n let ticket = products.find(p => p.ProductID === ProductID);\r\n let fproduct = products.filter(p => p.ProductID === ProductID);\r\n let consumedQty = 0;\r\n if (fproduct && fproduct.length > 0) {\r\n consumedQty = fproduct.reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n return ticket.MaxQuantity - consumedQty;\r\n }\r\n\r\n const getTotalAmount = () => {\r\n let amount = {\r\n ticketamount: 0,\r\n tax: 0,\r\n total: 0,\r\n }\r\n\r\n products.forEach(ticket => {\r\n amount.ticketamount += ticket.OriginalTicketAmount;\r\n amount.tax += ticket.OriginalTaxAmount;\r\n amount.total += ticket.OriginalTotalAmount;\r\n });\r\n\r\n return amount;\r\n }\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nGATicketCard.propTypes = {\r\n products: PropTypes.array.isRequired,\r\n removeclickhandler: PropTypes.func\r\n};\r\n\r\nexport default withRouter(GATicketCard);\r\n","import React, { useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { genfunction } from 'helpers'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport { Card, CardContent, CardHeader, IconButton, Table, TableBody, TableCell, TableRow, Hidden, TextField } from '@material-ui/core';\r\n\r\nimport { NumberSpinner } from '../../../components/InputControls'\r\nimport { withRouter } from 'react-router'\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { actionUpdateGiftCrdQuantity, actionUpdateGiftCardCustomAmout, actionRemoveGiftCard } from 'actions';\r\nimport { actionRecalculateGiftCardHold } from 'actions';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheadertext: {\r\n marginTop: \"8px\"\r\n },\r\n labelbold: {\r\n fontWeight: \"bold\",\r\n fontSize: \"18px\"\r\n },\r\n tablecell: {\r\n padding: \"5px\"\r\n }\r\n}));\r\n\r\nconst GiftCards = props => {\r\n\r\n const { className, products } = props;\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const classes = useStyles();\r\n\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n\r\n const GiftCardsTotal = () => {\r\n let total = 0;\r\n total = giftcards ? giftcards.giftcards.map(({ CartTotalAmount }) => CartTotalAmount).reduce((sum, i) => sum + i, 0) : 0;\r\n return total;\r\n }\r\n\r\n const changeQuantityHandler = (refrence, value) => {\r\n actionUpdateGiftCrdQuantity(dispatch, refrence.tourProductID, value, true);\r\n }\r\n\r\n\r\n const UpdateCustomAmout = (event) => {\r\n\r\n if (parseFloat(event.target.value) >= 0) {\r\n var gc = giftcards.giftcards.find(x => x.ProductID === parseInt(event.target.id));\r\n\r\n if (gc && parseFloat(event.target.value) <= gc.MaxPrice && parseFloat(event.target.value) >= gc.Price) {\r\n actionUpdateGiftCardCustomAmout(dispatch, parseInt(event.target.id), parseFloat(event.target.value), true);\r\n }\r\n\r\n }\r\n }\r\n\r\n const CustomGiftCardVal = (prodID) => {\r\n\r\n let val = false;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.find(x => x.ProductID === prodID) !== undefined) {\r\n val = giftcards.giftcards.find(x => x.ProductID === prodID).CartTotalAmount;\r\n }\r\n }\r\n\r\n return val;\r\n }\r\n\r\n const RemoveGC = (prodID) => {\r\n\r\n if (prodID > 0) {\r\n actionRemoveGiftCard(dispatch, prodID);\r\n\r\n if (cashless && cashless.length > 0) {\r\n actionRecalculateGiftCardHold(dispatch);\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n )\r\n};\r\n\r\nexport default withRouter(GiftCards);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { genfunction } from 'helpers'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport {\r\n Card, CardContent, CardHeader, IconButton,\r\n Table, TableBody, TableCell, TableRow, Hidden,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nimport { NumberSpinner } from '../../../components/InputControls'\r\nimport { withRouter } from 'react-router'\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheadertext: {\r\n marginTop: \"8px\"\r\n },\r\n labelbold: {\r\n fontWeight: \"bold\",\r\n fontSize: \"18px\"\r\n },\r\n tablecell: {\r\n padding: \"5px\",\r\n alignSelf: \"\"\r\n }\r\n}));\r\n\r\nconst OrderItemsCard = props => {\r\n\r\n const { products } = props;\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const classes = useStyles();\r\n\r\n const changeQuantityHandler = (reference, value) => {\r\n props.changeQuantityHandler(reference, value);\r\n }\r\n\r\n const removeclickhandler = (ProductID) => {\r\n props.removeclickhandler(ProductID);\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const getProductOptions = (product) => {\r\n if (product.Options) {\r\n\r\n let productWithOptions = product.Options.filter(x => x.Products && x.Products.length > 0 && x.Products.find(y => y.IsSelected == true) != undefined);\r\n if (productWithOptions && productWithOptions.length > 0) {\r\n return (\r\n productWithOptions.map(option => {\r\n return (\r\n option.Products.map(opproduct => {\r\n return (\r\n opproduct.IsSelected ?\r\n \r\n {genfunction.replaceEscapeCharacters(opproduct.ProductName)}\r\n : \"\"\r\n )\r\n }))\r\n })\r\n );\r\n }\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n const getTotalAmount = () => {\r\n let amount = {\r\n subtotal: 0,\r\n tax: 0,\r\n total: 0,\r\n }\r\n\r\n let foodAmount = genfunction.getOrderProductsTotalPrice(products);\r\n amount.subtotal += foodAmount.subtotal;\r\n amount.tax += foodAmount.tax;\r\n amount.total += foodAmount.total;\r\n\r\n return amount;\r\n }\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nOrderItemsCard.propTypes = {\r\n products: PropTypes.array.isRequired,\r\n removeclickhandler: PropTypes.func\r\n};\r\n\r\nexport default withRouter(OrderItemsCard);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { genfunction } from 'helpers'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport {\r\n Card, CardContent, CardHeader, IconButton,\r\n Table, TableBody, TableCell, TableRow, Hidden\r\n} from '@material-ui/core';\r\n\r\nimport { NumberSpinner } from '../../../components/InputControls'\r\nimport { withRouter } from 'react-router'\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheadertext: {\r\n marginTop: \"8px\"\r\n },\r\n labelbold: {\r\n fontWeight: \"bold\",\r\n fontSize: \"18px\"\r\n },\r\n tablecell: {\r\n padding: \"5px\"\r\n }\r\n}));\r\n\r\nconst DonationProductCard = props => {\r\n\r\n const { products } = props;\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const classes = useStyles();\r\n\r\n const removeclickhandler = (ProductID) => {\r\n props.removeclickhandler(ProductID);\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const getTotalAmount = () => {\r\n let amount = {\r\n total: 0\r\n }\r\n\r\n products.forEach(product => {\r\n amount.total += product.Amount;\r\n });\r\n\r\n return amount;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nDonationProductCard.propTypes = {\r\n products: PropTypes.array.isRequired,\r\n removeclickhandler: PropTypes.func\r\n};\r\n\r\nexport default withRouter(DonationProductCard);\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Container, Link, Button } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport {\r\n GoogleReCaptchaProvider,\r\n} from 'react-google-recaptcha-v3';\r\n\r\nimport {\r\n BookingTypeCard, CouponGiftCard, Donations, PayableCard, PaymentForm, CartDiscardTimeInfo,\r\n DonationPopUp, MembershipPackagesCard, GATicketCard, GiftCards,\r\n OrderItemsCard, DonationProductCard\r\n} from './components';\r\n\r\nimport {\r\n actionShopCartResetStateWithTourHold,\r\n actionShopCartAddProductQuanityWithTourHold,\r\n actionShopCartRemoveTourWithTourHold,\r\n actionShopCartResetStateWithUniqueCouponHold,\r\n actionShopCartResetMembership, actionShopCartResetIDME, actionShopCartResetMembershipPackage,\r\n actionShopCartRemoveGATicket, actionShopCartGATicketUpdateQuanity, actionShopCartResetGATicket, actionShopCartRemoveGiftcards,\r\n actionDeleteOrderProduct, actionShopcartResetOrderProducts, actionShopCartResetDonation, actionShopCartApplyDonation,\r\n actionShopCartDeleteDonationProduct, actionShopCartResetDonationProduct,\r\n actionShopCartResetDonations\r\n} from 'actions';\r\n\r\nimport { actionResetMemberValidation } from 'actions';\r\nimport { actionResetExtraItems } from 'actions';\r\nimport { actionResetFieldValuesState } from 'actions';\r\nimport { actionResetBookingTypes } from 'actions';\r\nimport { actionResetDonations } from 'actions';\r\nimport { actionResetTransactionFee } from 'actions';\r\nimport { actionResetBooking } from 'actions';\r\nimport { actionResetGiftCards } from 'actions';\r\nimport { actionResetMembershipPackages } from 'actions';\r\nimport { actionResetCostRate } from 'actions';\r\nimport { actionResetIDMEUSERDATA } from 'actions';\r\nimport { actionResetUDFs } from 'actions';\r\nimport { actionResetMembershipUDFs } from 'actions';\r\nimport { actionResetCountryAndState } from 'actions'\r\nimport { actionResetCustomerUdfs } from 'actions';\r\nimport { actionValidateRecaptchaReset } from 'actions';\r\n\r\nconst { ApplyTransactionFee, ShowDonationPopUp, RecaptchaV3Client, HideCoupons, HideGiftCards, PaymentMethodType } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(2)\r\n },\r\n content: {\r\n //marginTop: theme.spacing(2)\r\n //textAlign: 'center'\r\n },\r\n closebutton: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n DialogeHeader: {\r\n backgroundColor: theme.palette.success.main,\r\n color: theme.palette.success.contrastText\r\n },\r\n DialogeHeaderText: {\r\n color: theme.palette.success.contrastText\r\n },\r\n hidden: {\r\n visibility: \"hidden\"\r\n },\r\n paymentbox: {\r\n height: \"100%\"\r\n },\r\n linkbutton: {\r\n padding: \"0px 5px 0px 0px\"\r\n },\r\n diplaynone: {\r\n display: 'none'\r\n }\r\n}));\r\n\r\nconst Checkout = (props) => {\r\n\r\n const gatewayRef = useRef();\r\n const classes = useStyles();\r\n\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const orderLocation = useSelector(state => state.reducerOrderLocations.orderLocation);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const bookingUDFS = useSelector(state => state.reducerBookingUserDefinedFields);\r\n const membershipTypesUdfs = useSelector(state => state.reducerMembershipUserDefinedFields);\r\n const customerUdfs = useSelector(state => state.reducerCustomerUDFs);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const donations = useSelector(state => state.reducerDonation);\r\n\r\n const [opendonationPopup, setopendonationPopup] = useState(true);\r\n\r\n const CloseDonationPopUp = () => {\r\n setopendonationPopup(false);\r\n }\r\n\r\n const ApplyDonation = (productID, productName, price, OthersAmount) => {\r\n\r\n let useAltMerchant = false;\r\n\r\n if (donations.donations && donations.donations.length > 0) {\r\n useAltMerchant = donations.donations[0].UseAlternateMerchantOnline\r\n }\r\n\r\n actionShopCartApplyDonation(dispatch, productID, productName, price, OthersAmount, useAltMerchant);\r\n }\r\n const paymenttranstate = useSelector(state => {\r\n return (\r\n {\r\n haspaid: state.reducerPaymentTransaction.Payment.hasOwnProperty('Products')\r\n }\r\n )\r\n });\r\n\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n\r\n if ((events && events.length === 0) && (membershipPackages && membershipPackages.length == 0) && gaTickets && gaTickets.length == 0 && giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0) {\r\n\r\n actionResetFieldValuesState(dispatch);\r\n actionResetTransactionFee(dispatch);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n\r\n if (shopcartreducer.membershipValidation.ismembershipApplied) {\r\n actionResetMemberValidation(dispatch);\r\n }\r\n }\r\n\r\n }, [events, membershipPackages, gaTickets, giftcards.giftcards, donationProducts])\r\n\r\n const removeclickhandler = (eventid, productid) => {\r\n actionShopCartRemoveTourWithTourHold(dispatch, events, eventid, productid)\r\n }\r\n\r\n const changeQuantityHandler = (reference, quantity) => {\r\n actionShopCartAddProductQuanityWithTourHold(dispatch, events, reference.eventId, reference.tourProductID, quantity);\r\n }\r\n\r\n const removeGATicketClickHandler = (ProductId) => {\r\n actionShopCartRemoveGATicket(dispatch, ProductId)\r\n }\r\n\r\n const removeOrderProductClickHandler = (product) => {\r\n actionDeleteOrderProduct(dispatch, product);\r\n }\r\n\r\n const changeGATicketQuantityHandler = (reference, quantity) => {\r\n actionShopCartGATicketUpdateQuanity(dispatch, reference.tourProductID, quantity);\r\n }\r\n\r\n const remoteDonationProductClickHandler = (productID) => {\r\n actionShopCartDeleteDonationProduct(dispatch, productID);\r\n }\r\n\r\n const goBack = () => {\r\n\r\n if (events && events.length > 0) {\r\n props.history.push('/products');\r\n return;\r\n }\r\n\r\n if (membershipPackages && membershipPackages.length > 0) {\r\n props.history.push('/memberships');\r\n return;\r\n }\r\n\r\n else if (gaTickets && gaTickets.length > 0) {\r\n props.history.push('/gatickets');\r\n return;\r\n }\r\n\r\n else if (donationProducts && donationProducts.length > 0) {\r\n props.history.push('/donation/Area/' + donationProducts[donationProducts.length - 1].DisplayArea);\r\n return;\r\n }\r\n\r\n else if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n props.history.push('/giftcards');\r\n return;\r\n }\r\n\r\n else if (orderProducts && orderProducts.length > 0) {\r\n if (orderLocation) {\r\n let tabLocationID = orderLocation.TabLocations[0].TabLocationID;\r\n props.history.push('/ordermenu/' + tabLocationID);\r\n }\r\n else {\r\n actionShopcartResetOrderProducts(dispatch);\r\n props.history.push('/orderlocation');\r\n }\r\n return;\r\n }\r\n }\r\n\r\n const ShowGiftCards = () => {\r\n let res = false;\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n }\r\n\r\n return res;\r\n }\r\n\r\n\r\n let displayclass = \"\";\r\n if (paymenttranstate.haspaid)\r\n displayclass = classes.hidden;\r\n\r\n return (\r\n \r\n {ShowDonationPopUp ? Checkout \r\n \r\n \r\n {(events && events.length > 0)\r\n || (membershipPackages && membershipPackages.length > 0)\r\n || (gaTickets && gaTickets.length > 0)\r\n || (orderProducts && orderProducts.length > 0)\r\n || (donationProducts && donationProducts.length > 0)\r\n || ShowGiftCards() ?\r\n \r\n {\r\n actionResetExtraItems(dispatch);\r\n goBack()\r\n }}\r\n >\r\n Continue Shopping\r\n \r\n\r\n {\r\n\r\n if (events && events.length > 0) {\r\n actionShopCartResetStateWithTourHold(dispatch, events);\r\n }\r\n\r\n if (shopcartreducer.donation.isdonationApplied) {\r\n actionShopCartResetDonation(dispatch);\r\n }\r\n\r\n if (shopcartreducer.tourCoupons.length > 0) {\r\n actionResetDonations(dispatch);\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n }\r\n\r\n if (shopcartreducer.cashless.length > 0) {\r\n actionShopCartRemoveGiftcards(dispatch);\r\n }\r\n\r\n actionResetMemberValidation(dispatch);\r\n actionResetFieldValuesState(dispatch);\r\n actionResetBookingTypes(dispatch);\r\n actionShopCartResetMembershipPackage(dispatch);\r\n actionResetExtraItems(dispatch);\r\n actionResetMembershipPackages(dispatch);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n\r\n if (ApplyTransactionFee) {\r\n actionResetTransactionFee(dispatch);\r\n }\r\n\r\n actionShopCartResetGATicket(dispatch);\r\n actionShopCartResetDonationProduct(dispatch);\r\n actionShopcartResetOrderProducts(dispatch);\r\n actionResetBooking(dispatch);\r\n actionResetGiftCards(dispatch);\r\n actionResetCostRate(dispatch);\r\n actionResetIDMEUSERDATA(dispatch);\r\n\r\n if (bookingUDFS.bookingUDFs.length > 0) {\r\n actionResetUDFs(dispatch);\r\n }\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n actionResetMembershipUDFs(dispatch);\r\n }\r\n\r\n if (customerUdfs.customerUDFs && customerUdfs.customerUDFs.length > 0) {\r\n actionResetCustomerUdfs(dispatch);\r\n }\r\n\r\n\r\n gatewayRef.current.ReloadGateways();\r\n\r\n actionShopCartResetDonations(dispatch);\r\n\r\n setTimeout(() => {\r\n actionValidateRecaptchaReset(dispatch);\r\n }, 1000)\r\n\r\n }}\r\n >\r\n Clear Cart\r\n \r\n \r\n : \"\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {events && events.length > 0 ?\r\n \r\n : null}\r\n\r\n {gaTickets && gaTickets.length > 0 ?\r\n \r\n \r\n : null}\r\n\r\n {orderProducts && orderProducts.length > 0 ?\r\n \r\n : null}\r\n {donationProducts && donationProducts.length > 0 ? \r\n : null}\r\n\r\n\r\n \r\n \r\n\r\n 0 ? '' : classes.diplaynone}>\r\n \r\n\r\n\r\n 0 && !HideCoupons) || (membershipPackages && membershipPackages.length > 0) || (gaTickets && gaTickets.length > 0) || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0) || ShowGiftCards() ? '' : classes.diplaynone}>\r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n 0) || (membershipPackages && membershipPackages.length > 0) || (gaTickets && gaTickets.length > 0) || (orderProducts && orderProducts.length > 0) || (donationProducts && donationProducts.length > 0) || ShowGiftCards() ? '' : classes.diplaynone}>\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Checkout;\r\n","export default {\r\n initialpaystate: {\r\n disablepay: true,\r\n firstname: \"\",\r\n lastname: \"\",\r\n email: \"\"\r\n },\r\n\r\n initialDialogstate: {\r\n open: false,\r\n dialogetitle: \"\",\r\n dialogemessage: \"\",\r\n },\r\n\r\n\r\n initialerrorhandler: {\r\n open: false,\r\n dialogemessage: \"\",\r\n }\r\n\r\n}","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, CardActions, Typography, Button, CardHeader } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n card: {\r\n \"&:hover\": {\r\n transform: 'scale(1.02)',\r\n WebkitTransform: 'scale(1.02)',\r\n boxShadow: \"inset 0 0 0 2px\",\r\n cursor: 'pointer'\r\n }\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}));\r\n\r\nconst MembershipCard = props => {\r\n const classes = useStyles();\r\n return (\r\n {\r\n inputRef(ref ? ref.inputElement : null);\r\n }}\r\n onChange={onChange}\r\n mask={pnMask}\r\n />\r\n );\r\n}\r\n\r\nexport default function MembershipTypes(props) {\r\n\r\n let memberPackage;\r\n let usersnotpartofpackage;\r\n const dispatch = useDispatch();\r\n\r\n\r\n const membershippackagesreducer = useSelector(state => state.reducerMembershipPackages);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n memberPackage = membershippackagesreducer.membershipPackage;\r\n usersnotpartofpackage = membershippackagesreducer.familymembersnotpartofPackage;\r\n const membermemberhisps = useSelector(state => state.reducerMemberMemberships);\r\n const memberValidationReducer = useSelector(state => state.reducerMemberValidation);\r\n const [isredirectclicked, setisredirectclicked] = useState(false);\r\n const memmemberhisps = useSelector(state => state.reducerMemberMemberships);\r\n const customer = useSelector(state => state.reducerCustomer);\r\n const membershipTypesUdfs = useSelector(state => state.reducerMembershipUserDefinedFields);\r\n const customerUdfs = useSelector(state => state.reducerCustomerUDFs);\r\n const shopcartMembershipPackage = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const countryandstates = useSelector(state => state.reducerCountryAndState.countryandstate);\r\n\r\n\r\n //Intialize States\r\n const [errorstate, seterrorstate] = React.useState({\r\n initialerrorstate: {\r\n first_name: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n last_name: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n email: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n membershipType: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n age: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n phone: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n address1: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n city: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n state: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n zipcode: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n country: {\r\n errorstate: false,\r\n errortext: \"\"\r\n }\r\n }\r\n });\r\n\r\n const filterOptions = createFilterOptions({\r\n stringify: (option) => option.Country + '' + option.State,\r\n });\r\n\r\n const [state, setState] = React.useState({\r\n memberpackageDetail: {\r\n popupTitle: 'Add Person',\r\n isPrimaryMember: false,\r\n firstName: '',\r\n lastName: '',\r\n email: '',\r\n dob: null,\r\n phone: '',\r\n address1: '',\r\n address2: '',\r\n city: '',\r\n state: '',\r\n zipcode: '',\r\n country: '',\r\n membershipPackageID: props.membershipPackage.hasOwnProperty(\"MembershipPackageID\") ? props.membershipPackage.MembershipPackageID : 0,\r\n membershipTypeID: 0,\r\n membershipTypeName: '',\r\n isRenewal: false,\r\n userNo: Math.floor((Math.random() * 100000) + 100000),// 0,\r\n isEdit: false,\r\n UniquePackageRef: '',\r\n MembershipExpiryDate: '',\r\n PreviousMembershipType: '',\r\n notPartOfPackage: false\r\n }\r\n });\r\n\r\n window.history.pushState({ name: \"browserBack\" }, \"on browser back click\", window.location.href);\r\n\r\n useEffect(() => {\r\n\r\n if (props.isRenewPackage && usersnotpartofpackage && usersnotpartofpackage.length == 0) {\r\n setopenMembership(true);\r\n }\r\n\r\n }, [props.isRenewPackage])\r\n\r\n useEffect(() => {\r\n actionGetCountryAndState(dispatch);\r\n\r\n }, [])\r\n\r\n const onChangeCountry = (event, value) => {\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n memberpackageDetail.country = (value === null ? '' : value.Country);\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n actionSetFieldValueState(dispatch, \"country\", memberpackageDetail.country);\r\n\r\n memberpackageDetail.state = \"\";\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"state\", \"\");\r\n\r\n }\r\n const onChangeState = (event, value) => {\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n memberpackageDetail.state = value === null ? \"\" : value.State\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"state\", memberpackageDetail.state);\r\n\r\n }\r\n\r\n const isShowCountryFields = (columnName) => {\r\n return genfunction.GetValueFromCountryAndState(countryandstates, state.memberpackageDetail.country, columnName);\r\n }\r\n\r\n const handleCloseMembership = () => {\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n if (memberpackageDetail.isPrimaryMember && !memberpackageDetail.isEdit) {\r\n\r\n props.history.push({\r\n pathname: '/memberships'\r\n })\r\n }\r\n else {\r\n setOpen(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n\r\n if (!props.shopcartmember) {\r\n handleClickOpen();\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n memberpackageDetail.isPrimaryMember = true;\r\n memberpackageDetail.popupTitle = \"Primary Member\";\r\n memberpackageDetail.country = countryandstates && countryandstates.length > 0 ? countryandstates[0].Country : '';\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n }\r\n else {\r\n actionUpdateMembershipPackage(dispatch, props.membershipPackage, true);\r\n memberPackage = props.membershipPackage;\r\n }\r\n\r\n\r\n if (props.isRenewPackage) {\r\n\r\n props.membershipPackage.MembershipProducts && props.membershipPackage.MembershipProducts.map(e => {\r\n\r\n if (e.MembershipType === \"Membership\" && e.Users.length > 0) {\r\n\r\n e.Users.map(u => {\r\n if (u.isPrimaryMember) {\r\n actionSetFieldValueState(dispatch, \"first_name\", u.firstName === undefined ? '' : u.firstName);\r\n actionSetFieldValueState(dispatch, \"last_name\", u.lastName === undefined ? '' : u.lastName);\r\n actionSetFieldValueState(dispatch, \"email\", u.email === undefined ? '' : u.email);\r\n actionSetFieldValueState(dispatch, \"phone_number\", u.phone === undefined ? '' : u.phone);\r\n actionSetFieldValueState(dispatch, \"address1\", u.address1 === undefined ? '' : u.address1);\r\n actionSetFieldValueState(dispatch, \"address2\", u.address2 === undefined ? '' : u.address2);\r\n actionSetFieldValueState(dispatch, \"city\", u.city === undefined ? '' : u.city);\r\n actionSetFieldValueState(dispatch, \"state\", u.state === undefined ? '' : u.state);\r\n actionSetFieldValueState(dispatch, \"zip\", u.zipcode === undefined ? '' : u.zipcode);\r\n actionSetFieldValueState(dispatch, \"country\", u.country === undefined ? '' : u.country);\r\n\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n //actionGetMembershipUserDefinedFields(dispatch, 'Memberships', null, GetMembershipTypes());\r\n }, []);\r\n\r\n //props\r\n\r\n useEffect(() => {\r\n\r\n if (props.membershipTypeIDs && props.membershipTypeIDs.length > 0 && membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length < 1)\r\n actionGetMembershipUserDefinedFields(dispatch, 'Memberships', null, props.membershipTypeIDs);\r\n }, [props.membershipTypeIDs]);\r\n\r\n let [membershipUdfsUpdated, setmembershipUdfsUpdated] = React.useState(0);\r\n\r\n useEffect(() => {\r\n\r\n if (membershipUdfsUpdated == 0 && customerUdfs.customerUDFs && customerUdfs.customerUDFs.length > 0 && membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0 && CountTotalMembers() > 0) {\r\n actionUpdateMembershipUdfsWithCustomerUdfsValues(dispatch, props.membershipPackage, customerUdfs.customerUDFs);\r\n setmembershipUdfsUpdated(setmembershipUdfsUpdated++);\r\n }\r\n\r\n }, [setmembershipUdfsUpdated, membershipTypesUdfs.membershipUdfs]);\r\n\r\n //Dialog Fields Start\r\n const [open, setOpen] = React.useState(false);\r\n\r\n //Dialog Membership Start\r\n const [openMembership, setopenMembership] = React.useState(false);\r\n\r\n //Confirmation Dialog\r\n const [confirmopen, setconfirmOpen] = React.useState({\r\n dialogBox: false,\r\n packageID: 0,\r\n memTypeID: 0,\r\n useNo: 0,\r\n deletemsg: ''\r\n });\r\n\r\n\r\n const handleClickOpen = () => {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n memberpackageDetail.popupTitle = 'Add Person';\r\n memberpackageDetail.isPrimaryMember = false;\r\n memberpackageDetail.firstName = '';\r\n memberpackageDetail.lastName = '';\r\n memberpackageDetail.email = '';\r\n memberpackageDetail.dob = 'DOB';\r\n memberpackageDetail.phone = '';\r\n memberpackageDetail.address1 = '';\r\n memberpackageDetail.address2 = '';\r\n memberpackageDetail.city = '';\r\n memberpackageDetail.state = '';\r\n memberpackageDetail.zipcode = '';\r\n memberpackageDetail.country = '';\r\n memberpackageDetail.MembershipPackageID = props.membershipPackage.hasOwnProperty(\"MembershipPackageID\") ? props.membershipPackage.MembershipPackageID : 0;\r\n memberpackageDetail.membershipTypeID = 0;\r\n memberpackageDetail.membershipTypeName = '';\r\n memberpackageDetail.PreviousMembershipType = '';\r\n memberpackageDetail.isEdit = false;\r\n memberpackageDetail.userNo = Math.floor((Math.random() * 100000) + 100000); //0;\r\n memberpackageDetail.MembershipTypeID = 0;\r\n memberpackageDetail.notPartOfPackage = false;\r\n\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n\r\n var initialerrorstate = { ...errorstate.initialerrorstate };\r\n\r\n initialerrorstate.first_name.errorstate = false;\r\n initialerrorstate.first_name.errortext = \"\";\r\n initialerrorstate.last_name.errorstate = false;\r\n initialerrorstate.last_name.errortext = \"\";\r\n initialerrorstate.email.errorstate = false;\r\n initialerrorstate.email.errortext = \"\";\r\n initialerrorstate.membershipType.errorstate = false;\r\n initialerrorstate.membershipType.errortext = \"\";\r\n initialerrorstate.age.errorstate = false;\r\n initialerrorstate.age.errortext = \"\";\r\n\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n\r\n setOpen(true);\r\n\r\n };\r\n\r\n useEffect(() => {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n if (memberpackageDetail && !memberpackageDetail.isEdit &&\r\n memberpackageDetail.membershipTypeID < 1\r\n && props.membershipPackage\r\n && (memberpackageDetail.popupTitle === 'Add Person' || memberpackageDetail.popupTitle === 'Add - Person' || memberpackageDetail.popupTitle === 'Primary Member')) {\r\n\r\n if (props.membershipPackage.MembershipProducts\r\n && props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").length == 1) {\r\n let membershipObj = props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\")[0];\r\n fieldhandleChange(null, membershipObj);\r\n }\r\n }\r\n\r\n }, [props.membershipPackage, state])\r\n\r\n const handleClose = (event, reason) => {\r\n\r\n if (reason === \"backdropClick\" || reason === \"escapeKeyDown\") {\r\n setOpen(true);\r\n }\r\n else {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n if (memberpackageDetail.isPrimaryMember && !memberpackageDetail.isEdit) {\r\n\r\n if (shopcartMembershipPackage && shopcartMembershipPackage.length < 1 &&\r\n membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n\r\n actionResetMembershipUDFs(dispatch);\r\n }\r\n\r\n actionResetMembershipPackage(dispatch);\r\n props.history.push({\r\n pathname: '/memberships'\r\n })\r\n }\r\n else {\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n const GetUserDOB = (user) => {\r\n let userDOB = \"\";\r\n\r\n if (user.hasOwnProperty('dob') && user.dob !== null && user.dob.length > 0 && user.dob != \"DOB\") {\r\n userDOB = Moment(user.dob).format('YYYY-MM-DD');\r\n }\r\n\r\n return userDOB;\r\n }\r\n //Edit Person\r\n const EditPerson = (member, memTypeID) => {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n var membershipType = memberPackage.MembershipProducts.filter(x => x.MembershipTypeID == memTypeID)[0];\r\n\r\n if (membershipType) {\r\n var user = membershipType.Users.filter(x => x.userNo == member.userNo && x.email == member.email)[0];\r\n if (user) {\r\n memberpackageDetail.popupTitle = user.isPrimaryMember ? 'Edit - Primary Member' : 'Edit - Person';\r\n memberpackageDetail.isPrimaryMember = user.isPrimaryMember;\r\n memberpackageDetail.firstName = user.firstName;\r\n memberpackageDetail.lastName = user.lastName;\r\n memberpackageDetail.email = user.email;\r\n memberpackageDetail.dob = GetUserDOB(user);\r\n memberpackageDetail.phone = user.phone;\r\n memberpackageDetail.address1 = user.address1;\r\n memberpackageDetail.address2 = user.address2;\r\n memberpackageDetail.city = user.city;\r\n memberpackageDetail.state = user.state;\r\n memberpackageDetail.zipcode = user.zipcode;\r\n memberpackageDetail.country = user.country;\r\n memberpackageDetail.isRenewal = user.isRenewal;\r\n memberpackageDetail.UniquePackageRef = user.UniquePackageRef;\r\n memberpackageDetail.MembershipExpiryDate = user.MembershipExpiryDate;\r\n memberpackageDetail.MembershipPackageID = memberPackage.MembershipPackageID;\r\n memberpackageDetail.membershipTypeID = membershipType.MembershipTypeID;\r\n memberpackageDetail.membershipTypeName = replaceEscapeCharacters(membershipType.ProductName);\r\n memberpackageDetail.PreviousMembershipType = user.PreviousMembershipType;\r\n memberpackageDetail.userNo = user.userNo;\r\n memberpackageDetail.isEdit = true;\r\n memberpackageDetail.notPartOfPackage = user.notPartOfPackage;\r\n\r\n }\r\n }\r\n\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n\r\n setOpen(true);\r\n }\r\n\r\n //Delete Person\r\n const DeletePerson = (memberTypeID, member) => {\r\n\r\n if (member.isPrimaryMember) {\r\n seterrorMsg(TryDeletePrimaryRecordOnMembership);\r\n }\r\n else {\r\n\r\n setconfirmOpen({\r\n dialogBox: true, packageID: memberPackage.MembershipPackageID,\r\n memTypeID: memberTypeID, useNo: member.userNo,\r\n deletemsg: ConfirmMsgRemovePersonFromMemberPackage + ' ' + member.firstName + ' ' + member.lastName + '?'\r\n });\r\n }\r\n }\r\n\r\n\r\n const ConfirmDeletePerson = () => {\r\n var deleteConfirmState = { ...confirmopen };\r\n actionDeleteMembershipTypePerson(dispatch, deleteConfirmState.packageID, deleteConfirmState.memTypeID, deleteConfirmState.useNo);\r\n\r\n\r\n if (usersnotpartofpackage && usersnotpartofpackage.length > 0 && usersnotpartofpackage.filter(x => x.userNo == deleteConfirmState.useNo && x.membershipTypeID == 0\r\n && x.MembershipExpiryDate == '').length > 0) {\r\n actionUpdateFamilyMemberNotPartOfPackage(dispatch, deleteConfirmState.useNo, false);\r\n }\r\n\r\n setconfirmOpen({\r\n dialogBox: false, packageID: 0,\r\n memTypeID: 0, useNo: 0, deletemsg: ''\r\n });\r\n }\r\n\r\n const CancelPersonDelete = () => {\r\n\r\n setconfirmOpen({\r\n dialogBox: false, packageID: 0,\r\n memTypeID: 0, useNo: 0, deletemsg: ''\r\n });\r\n }\r\n\r\n function validateEmail(email) {\r\n var re = new RegExp(EmailRegex);\r\n return re.test(String(email).toLowerCase());\r\n }\r\n\r\n function validateDOB(dob) {\r\n var re = new RegExp(DOBRegex);\r\n let resultRegex = re.test(String(dob).toLowerCase());\r\n if (resultRegex) {\r\n let isValidRange = Moment(dob).isBetween(Moment('1899-12-31'), Moment());\r\n return isValidRange;\r\n }\r\n else\r\n return resultRegex;\r\n }\r\n\r\n //Enable Confirm Buttom\r\n const [confirmBtn, setconfirmBtn] = React.useState(true);\r\n\r\n const ValidateMemberPackageQuantities = () => {\r\n let validRequest = false;\r\n\r\n if (memberPackage && memberPackage.MembershipProducts && memberPackage.MembershipProducts.length > 0) {\r\n memberPackage.MembershipProducts = memberPackage.MembershipProducts.map(memType => {\r\n\r\n if (memType.MembershipType === \"Membership\" && ((memType.Users.length < memType.MinQuantity) || (memType.Users.length > memType.MaxQuantity))) {\r\n validRequest = true;\r\n }\r\n\r\n if (memType.MembershipType === \"AddOn\") {\r\n if (((memType.Quantity < memType.MinQuantity) || (memType.Quantity > memType.MaxQuantity))) {\r\n validRequest = true;\r\n }\r\n }\r\n\r\n return memType;\r\n });\r\n }\r\n\r\n return validRequest;\r\n }\r\n\r\n const PersonNamesDuplicateCheck = (membership) => {\r\n\r\n let exist = false;\r\n if (memberPackage && memberPackage.MembershipProducts && membership.isEdit == false) {\r\n memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").map(m => {\r\n\r\n if (m.Users && m.Users.length > 0 && m.Users.filter(x => x.firstName.toLowerCase() == membership.firstName.toLowerCase() && x.lastName.toLowerCase() == membership.lastName.toLowerCase()).length > 0) {\r\n exist = true;\r\n }\r\n })\r\n }\r\n\r\n return exist;\r\n }\r\n\r\n //Save Button MultipleClicks\r\n const [saveBtn, setsaveBtn] = React.useState(false);\r\n\r\n const saveDialog = () => {\r\n\r\n setsaveBtn(true);\r\n\r\n setTimeout(() => {\r\n setsaveBtn(false);\r\n }, 1000)\r\n\r\n if (!ValidateMembershipType()) {\r\n seterrorMsg('Please fill the required UDFs.');\r\n return;\r\n }\r\n //Add Validation\r\n var initialerrorstate = { ...errorstate.initialerrorstate };\r\n\r\n if (state.memberpackageDetail.firstName.trim().length < 1) {\r\n initialerrorstate.first_name.errorstate = true;\r\n initialerrorstate.first_name.errortext = \"First Name is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.first_name.errorstate = false;\r\n initialerrorstate.first_name.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.memberpackageDetail.lastName.trim().length < 1) {\r\n initialerrorstate.last_name.errorstate = true;\r\n initialerrorstate.last_name.errortext = \"Last Name is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.last_name.errorstate = false;\r\n initialerrorstate.last_name.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.memberpackageDetail.membershipTypeID < 1) {\r\n initialerrorstate.membershipType.errorstate = true;\r\n initialerrorstate.membershipType.errortext = \"Membership Type is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.membershipType.errorstate = false;\r\n initialerrorstate.membershipType.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.memberpackageDetail.isPrimaryMember && state.memberpackageDetail.email.trim().length < 1) {\r\n initialerrorstate.email.errorstate = true;\r\n initialerrorstate.email.errortext = \"Email is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else if (state.memberpackageDetail.email.length > 0 && validateEmail(state.memberpackageDetail.email) == false) {\r\n initialerrorstate.email.errorstate = true;\r\n initialerrorstate.email.errortext = \"Please enter a valid email address.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.email.errorstate = false;\r\n initialerrorstate.email.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.memberpackageDetail.dob) {\r\n if (state.memberpackageDetail.dob.length > 0\r\n && state.memberpackageDetail.dob != \"DOB\"\r\n && validateDOB(state.memberpackageDetail.dob) == false) {\r\n\r\n initialerrorstate.age.errorstate = true;\r\n initialerrorstate.age.errortext = \"Please enter a valid date of birth.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.age.errorstate = false;\r\n initialerrorstate.age.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n }\r\n\r\n if (PhoneNumberMandatory && state.memberpackageDetail.phone.trim().length < 1) {\r\n initialerrorstate.phone.errorstate = true;\r\n initialerrorstate.phone.errortext = \"Phone is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.phone.errorstate = false;\r\n initialerrorstate.phone.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n\r\n if (state.memberpackageDetail.isPrimaryMember) {\r\n\r\n if (state.memberpackageDetail.address1.trim().length < 1) {\r\n initialerrorstate.address1.errorstate = true;\r\n initialerrorstate.address1.errortext = \"Address 1 is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.address1.errorstate = false;\r\n initialerrorstate.address1.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.memberpackageDetail.city.trim().length < 1) {\r\n initialerrorstate.city.errorstate = true;\r\n initialerrorstate.city.errortext = \"City is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.city.errorstate = false;\r\n initialerrorstate.city.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (isShowCountryFields(\"ShowState\")) {\r\n\r\n if (state.memberpackageDetail.state.trim().length < 1) {\r\n initialerrorstate.state.errorstate = true;\r\n initialerrorstate.state.errortext = \"State is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.state.errorstate = false;\r\n initialerrorstate.state.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n }\r\n else {\r\n state.memberpackageDetail.state = \"0\";\r\n }\r\n\r\n if (isShowCountryFields(\"ShowPostalCode\")) {\r\n if (state.memberpackageDetail.zipcode.trim().length < 1) {\r\n initialerrorstate.zipcode.errorstate = true;\r\n initialerrorstate.zipcode.errortext = \"Zipcode is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.zipcode.errorstate = false;\r\n initialerrorstate.zipcode.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n }\r\n else {\r\n state.memberpackageDetail.zipcode = \"0\";\r\n }\r\n\r\n if (state.memberpackageDetail.country.trim().length < 1) {\r\n initialerrorstate.country.errorstate = true;\r\n initialerrorstate.country.errortext = \"Country is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n } else {\r\n initialerrorstate.country.errorstate = false;\r\n initialerrorstate.country.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n }\r\n\r\n if (initialerrorstate.first_name.errorstate || initialerrorstate.last_name.errorstate || initialerrorstate.membershipType.errorstate || initialerrorstate.email.errorstate || initialerrorstate.age.errorstate ||\r\n initialerrorstate.address1.errorstate || initialerrorstate.city.errorstate || initialerrorstate.state.errorstate || initialerrorstate.zipcode.errorstate || initialerrorstate.country.errorstate\r\n || (PhoneNumberMandatory && initialerrorstate.phone.errorstate)) {\r\n setOpen(true);\r\n }\r\n else {\r\n var ageDiff = parseInt(calculateAge(new Date(state.memberpackageDetail.dob)));\r\n\r\n var memType = memberPackage.MembershipProducts.filter(x => x.MembershipTypeID == state.memberpackageDetail.membershipTypeID)[0];\r\n\r\n if (memType.AgeBasedMembership && (ageDiff < memType.MinAge || ageDiff > memType.MaxAge)) {\r\n initialerrorstate.age.errorstate = true;\r\n initialerrorstate.age.errortext = \"Please enter a valid DOB, Min Age is \" + memType.MinAge + \" and Max Age is : \" + memType.MaxAge;\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n if (PersonNamesDuplicateCheck(state.memberpackageDetail) == false) {\r\n actionUpdateMembershipPackage(dispatch, state.memberpackageDetail, false);\r\n\r\n if (state.memberpackageDetail.notPartOfPackage) {\r\n actionUpdateFamilyMemberNotPartOfPackage(dispatch, state.memberpackageDetail.userNo, true);\r\n }\r\n\r\n setOpen(false);\r\n }\r\n else {\r\n seterrorMsg('First Name and Last Name is already used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n const fieldhandleChange = (event, mem) => {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n if (mem) {\r\n let memTypeID = parseInt(mem.MembershipTypeID);\r\n memberpackageDetail.membershipTypeID = memTypeID;\r\n memberpackageDetail.membershipTypeName = mem.ProductName;\r\n\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n }\r\n\r\n if (event && event.target.name === \"fname\") {\r\n memberpackageDetail.firstName = event.target.value;\r\n memberpackageDetail.MembershipPackageID = props.membershipPackage.hasOwnProperty(\"MembershipPackageID\") ? props.membershipPackage.MembershipPackageID : 0;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n\r\n if (memberpackageDetail.isPrimaryMember) {\r\n actionSetFieldValueState(dispatch, \"first_name\", event.target.value);\r\n }\r\n }\r\n\r\n if (event && event.target.name === \"lname\") {\r\n memberpackageDetail.lastName = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n\r\n if (memberpackageDetail.isPrimaryMember) {\r\n actionSetFieldValueState(dispatch, \"last_name\", event.target.value);\r\n }\r\n }\r\n\r\n if (event && event.target.name === \"email\") {\r\n memberpackageDetail.email = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n\r\n if (memberpackageDetail.isPrimaryMember) {\r\n actionSetFieldValueState(dispatch, \"email\", event.target.value);\r\n }\r\n }\r\n\r\n if (event && event.target.name === \"dob\") {\r\n memberpackageDetail.dob = Moment(event.target.value).format('YYYY-MM-DD');\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n }\r\n\r\n if (memberpackageDetail.dob === \"Invalid date\") {\r\n memberpackageDetail.dob = \"\";\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n }\r\n\r\n if (event && event.target.name === \"phone\") {\r\n memberpackageDetail.phone = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n\r\n if (memberpackageDetail.isPrimaryMember) {\r\n actionSetFieldValueState(dispatch, \"phone_number\", event.target.value);\r\n }\r\n }\r\n\r\n if (event && event.target.name === \"membershipType\") {\r\n let memTypeID = parseInt(event.currentTarget.id);\r\n memberpackageDetail.membershipTypeID = memTypeID;\r\n memberpackageDetail.membershipTypeName = event.target.value;\r\n\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n }\r\n\r\n if (event && event.target.name === \"address1\") {\r\n memberpackageDetail.address1 = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"address1\", event.target.value);\r\n }\r\n\r\n if (event && event.target.name === \"address2\") {\r\n memberpackageDetail.address2 = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"address2\", event.target.value);\r\n }\r\n\r\n if (event && event.target.name === \"city\") {\r\n memberpackageDetail.city = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"city\", event.target.value);\r\n }\r\n\r\n // if (event && event.target.name === \"state\") {\r\n // memberpackageDetail.state = event.target.value;\r\n // setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n // actionSetFieldValueState(dispatch, \"state\", event.target.value);\r\n\r\n // }\r\n\r\n if (event && event.target.name === \"zipcode\") {\r\n memberpackageDetail.zipcode = event.target.value;\r\n setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n actionSetFieldValueState(dispatch, \"zip\", event.target.value);\r\n }\r\n\r\n // if (event && event.target.name === \"country\") {\r\n\r\n // memberpackageDetail.country = event.target.value;\r\n // setState({ ...state, memberpackageDetail: memberpackageDetail });\r\n // actionSetFieldValueState(dispatch, \"country\", event.target.value);\r\n // }\r\n };\r\n\r\n //Dialog Fields End\r\n\r\n //Error Handling Start\r\n\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg('');\r\n }\r\n\r\n //Error Handling Start\r\n\r\n\r\n const changeQuantityHandler = (memberType) => {\r\n //Check Min and Max Quantity\r\n //need to add\r\n memberType.MembershipPackageID = memberPackage.MembershipPackageID;\r\n actionUpdateMembershipAddonsQuantity(dispatch, memberType);\r\n }\r\n\r\n const ConfirmMembershipPackage = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n if (props.isRenewPackage) {\r\n let err = ValidateMembersUDFs();\r\n if (err.length > 0) {\r\n seterrorMsg(err);\r\n return;\r\n }\r\n }\r\n\r\n if (CountTotalMembers() > memberPackage.MaximumMembersInPackage) {\r\n seterrorMsg(PackageMaxQtyMsg + memberPackage.MaximumMembersInPackage);\r\n }\r\n else if (CountTotalMembers() < memberPackage.MinimumMembersInPackage) {\r\n seterrorMsg(PackageMinQtyMsg + memberPackage.MinimumMembersInPackage + ' membership(s).');\r\n }\r\n else {\r\n actionShopCartAddMembershipPackage(dispatch, memberPackage, props.isRenewPackage);\r\n props.constnextredirect();\r\n }\r\n }\r\n\r\n const CountTotalMembers = () => {\r\n\r\n let totalMembers = 0;\r\n\r\n if (memberPackage) {\r\n memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").map(m => {\r\n\r\n if (m.Users && m.Users.length > 0) {\r\n\r\n totalMembers += m.Users.length;\r\n }\r\n });\r\n }\r\n\r\n return totalMembers;\r\n }\r\n\r\n function calculateAge(birthday) { // birthday is a date\r\n var ageDifMs = Date.now() - birthday;\r\n var ageDate = new Date(ageDifMs); // miliseconds from epoch\r\n return Math.abs(ageDate.getUTCFullYear() - 1970);\r\n }\r\n\r\n //Click on Cancel Membership Package\r\n const constredirect = () => {\r\n\r\n if (shopcartMembershipPackage && shopcartMembershipPackage.length < 1) {\r\n\r\n if (props.isRenewPackage) {\r\n actionResetMemberValidation(dispatch);\r\n actionResetCustomerUdfs(dispatch);\r\n }\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n actionResetMembershipUDFs(dispatch);\r\n }\r\n\r\n actionResetFieldValuesState(dispatch);\r\n actionResetMembershipPackage(dispatch);\r\n }\r\n\r\n props.history.push({\r\n pathname: '/memberships'\r\n })\r\n }\r\n\r\n const [showMoreInfo, setShowMoreInfo] = React.useState(false);\r\n const [readmorebtnText, setreadmorebtnText] = React.useState('Read More');\r\n\r\n const ShowMoreInfoClick = () => {\r\n\r\n if (readmorebtnText === 'Read More') {\r\n setShowMoreInfo(true);\r\n setreadmorebtnText('Read Less');\r\n }\r\n else {\r\n setShowMoreInfo(false);\r\n setreadmorebtnText('Read More');\r\n }\r\n }\r\n\r\n\r\n const GetMembershipPackageDis = (discription) => {\r\n\r\n if (discription) {\r\n if (showMoreInfo) {\r\n return discription.substring(0, discription.length - 1);\r\n }\r\n\r\n return discription.substring(0, DisplayMemPackageDiscriptionCharacters);\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n\r\n const AddReviewMemberToPackage = (user) => {\r\n\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n if (user) {\r\n memberpackageDetail.popupTitle = 'Add - Person';\r\n memberpackageDetail.isPrimaryMember = false;\r\n memberpackageDetail.firstName = user.firstName;\r\n memberpackageDetail.lastName = user.lastName;\r\n memberpackageDetail.email = user.email;\r\n memberpackageDetail.dob = GetUserDOB(user);\r\n memberpackageDetail.phone = user.phone;\r\n memberpackageDetail.address1 = user.address1;\r\n memberpackageDetail.address2 = user.address2;\r\n memberpackageDetail.city = user.city;\r\n memberpackageDetail.state = user.state;\r\n memberpackageDetail.zipcode = user.zipcode;\r\n memberpackageDetail.isRenewal = user.isRenewal;\r\n memberpackageDetail.UniquePackageRef = user.UniquePackageRef;\r\n memberpackageDetail.MembershipExpiryDate = user.MembershipExpiryDate;\r\n memberpackageDetail.MembershipPackageID = memberPackage.MembershipPackageID;\r\n memberpackageDetail.membershipTypeID = 0;\r\n memberpackageDetail.membershipTypeName = '';\r\n memberpackageDetail.userNo = user.userNo;\r\n memberpackageDetail.isEdit = false;\r\n memberpackageDetail.notPartOfPackage = user.notpartofPackage;\r\n }\r\n\r\n\r\n setState({ ...state, memberpackageDetail: memberpackageDetail })\r\n\r\n setOpen(true);\r\n\r\n }\r\n\r\n //Membership Popup\r\n const BackMembershipPopup = () => {\r\n actionResetMemberValidation(dispatch);\r\n actionResetFieldValuesState(dispatch);\r\n setisredirectclicked(true);\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (isredirectclicked) {\r\n setisredirectclicked(false);\r\n let memPackID = 0;\r\n\r\n if (memberPackage && memberPackage.hasOwnProperty('MembershipPackageID')) {\r\n memPackID = memberPackage.MembershipPackageID;\r\n }\r\n\r\n props.history.push({\r\n pathname: '/memberships/membervalidate/' + memPackID\r\n })\r\n }\r\n\r\n }, [isredirectclicked]);\r\n\r\n const RenewMembershp = (mp) => {\r\n\r\n //Update Primar Record\r\n\r\n if (customer.customer.length > 0) {\r\n actionSetFieldValueState(dispatch, \"first_name\", customer.customer[0].FirstName);\r\n actionSetFieldValueState(dispatch, \"last_name\", customer.customer[0].LastName);\r\n actionSetFieldValueState(dispatch, \"email\", customer.customer[0].GuestEmail);\r\n actionSetFieldValueState(dispatch, \"phone_number\", customer.customer[0].CustomerAddress[0].MobilePhone);\r\n actionSetFieldValueState(dispatch, \"address1\", customer.customer[0].CustomerAddress[0].Street1);\r\n actionSetFieldValueState(dispatch, \"address2\", customer.customer[0].CustomerAddress[0].Street2);\r\n actionSetFieldValueState(dispatch, \"city\", customer.customer[0].CustomerAddress[0].CitySuburb);\r\n actionSetFieldValueState(dispatch, \"state\", customer.customer[0].CustomerAddress[0].State);\r\n actionSetFieldValueState(dispatch, \"zip\", customer.customer[0].CustomerAddress[0].Postcode);\r\n actionSetFieldValueState(dispatch, \"country\", customer.customer[0].CustomerAddress[0].Country);\r\n }\r\n\r\n actionUpdatePackageForRenew(dispatch, mp.MembershipPackageID, memmemberhisps, customer.customer);\r\n setopenMembership(false);\r\n\r\n props.history.push({\r\n pathname: '/memberships/renew/' + mp.MembershipPackageID\r\n })\r\n }\r\n\r\n const renewmembershipsdistinct = () => {\r\n const renewmemshipscollection = [];\r\n\r\n membermemberhisps.membermerberhips[0].Memberships.filter(x => x.IsRenewed == false).map(x => {\r\n\r\n if (renewmemshipscollection.filter(y => y.MembershipPackageID == x.MembershipPackageID).length == 0) {\r\n renewmemshipscollection.push(x);\r\n }\r\n });\r\n\r\n return renewmemshipscollection;\r\n }\r\n const classes = useStyles();\r\n\r\n //Show Fields\r\n\r\n let displayclass = \"\";\r\n if (state.memberpackageDetail.isPrimaryMember)\r\n displayclass = classes.visible;\r\n else\r\n displayclass = classes.displaynone;\r\n\r\n\r\n const replaceEscapeCharacters = (item) => {\r\n var itemValue = item.split(\"\\\\r\\\\n\").join(\"
\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n const GetMembershipTypeQty = (memPackage, memTypeProd) => {\r\n\r\n let availQty = '';\r\n\r\n if (memTypeProd) {\r\n\r\n if (memTypeProd.MinQuantity > 0) {\r\n availQty = '(Min Qty : ' + memTypeProd.MinQuantity + ', Max Qty : ' + memTypeProd.MaxQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MinQuantity < 1 || memTypeProd.MinQuantity == memTypeProd.MaxQuantity) {\r\n availQty = '(Max Qty : ' + memTypeProd.MaxQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MaxQuantity >= memPackage.MaximumMembersInPackage && memTypeProd.MinQuantity > 0) {\r\n availQty = '(Min Qty : ' + memTypeProd.MinQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MaxQuantity >= memPackage.MaximumMembersInPackage && memTypeProd.MinQuantity < 1) {\r\n availQty = '';\r\n }\r\n\r\n if (memTypeProd.MinQuantity == memPackage.MaximumMembersInPackage) {\r\n availQty = '';\r\n }\r\n }\r\n\r\n return availQty;\r\n }\r\n\r\n const GetDefaultMembershipName = (membershipTypeName) => {\r\n\r\n let memtypename = '';\r\n\r\n if (props.membershipPackage && props.membershipPackage.MembershipProducts)\r\n if (props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").length == 1) {\r\n memtypename = props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\")[0].ProductName;\r\n }\r\n else {\r\n memtypename = membershipTypeName;\r\n }\r\n\r\n return memtypename;\r\n }\r\n\r\n const ValidateMembershipType = () => {\r\n let valid = true;\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.MembershipTypeID == memberpackageDetail.membershipTypeID).filter(x => x.UDFCategories).map(udfCategorey => {\r\n\r\n if (udfCategorey.UDFCategories && udfCategorey.UDFCategories.length > 0 && valid) {\r\n\r\n udfCategorey.UDFCategories.map(udfCate => {\r\n udfCate.UserDefinedFields.map((udf) => {\r\n\r\n if (valid) {\r\n if (udf.IsRequired && udf.Users.length == 0) {\r\n valid = false;\r\n }\r\n else if (udf.IsRequired && udf.Users.length > 0 && udf.Users.filter(x => x.userID == memberpackageDetail.userNo).length < 1) {\r\n valid = false;\r\n }\r\n else if (udf.IsRequired && udf.Users.length > 0 && udf.Users.filter(x => x.userID == memberpackageDetail.userNo).length > 0) {\r\n let user = udf.Users.filter(x => x.userID == memberpackageDetail.userNo)[0];\r\n\r\n if (user.userUDFValue !== undefined && user.userUDFValue !== null) {\r\n\r\n if ((udf.UDFType === \"Text\" || udf.UDFType === \"Decimal\") && user.userUDFValue.length < 1) {\r\n valid = false;\r\n }\r\n else if (udf.UDFType === \"Bit\" && user.userUDFValue === false) {\r\n valid = false;\r\n }\r\n }\r\n }\r\n }\r\n })\r\n });\r\n }\r\n });\r\n }\r\n\r\n return valid;\r\n }\r\n const ValidateMembersUDFs = () => {\r\n\r\n let error = '';\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.UDFCategories).map(membershipType => {\r\n\r\n let memberusers = GetMembershipTypeUserCount(membershipType.MembershipTypeID);\r\n\r\n if (membershipType.UDFCategories != null && membershipType.UDFCategories.length > 0 && error.length == 0 && memberusers > 0) {\r\n\r\n membershipType.UDFCategories.map((udfCategorey, i) => {\r\n\r\n udfCategorey.UserDefinedFields.map((udf) => {\r\n if (error.length == 0 && udf.IsRequired && udf.hasOwnProperty('Users') && udf.Users !== undefined && memberusers != udf.Users.length) {\r\n error = 'Please fill the required UDFs for Membership Type ' + GetMembershipTypeName(membershipType.MembershipTypeID);\r\n return;\r\n }\r\n })\r\n });\r\n }\r\n })\r\n }\r\n\r\n return error;\r\n }\r\n\r\n const GetMembershipTypeName = (memTypeID) => {\r\n let memberTypeName = '';\r\n\r\n if (memberPackage) {\r\n memberTypeName = memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\" && x.MembershipTypeID == memTypeID)[0].ProductName;\r\n }\r\n\r\n return memberTypeName;\r\n }\r\n\r\n const GetMembershipTypeUserCount = (memTypeID) => {\r\n let totalMembers = 0;\r\n\r\n if (memberPackage) {\r\n memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\" && x.MembershipTypeID == memTypeID).map(m => {\r\n\r\n if (m.Users && m.Users.length > 0) {\r\n\r\n totalMembers += m.Users.length;\r\n }\r\n });\r\n }\r\n\r\n return totalMembers;\r\n }\r\n\r\n return (\r\n\r\n \r\n {TicketPageHeader} \r\n \r\n\r\n \r\n {TicketPageHeader} \r\n \r\n\r\n \r\n {TicketPageHeader} \r\n \r\n\r\n\r\n {ReactHtmlParser(genfunction.replaceEscapeCharacters(getDisplayAreaText()))} \r\n \r\n \r\n {underscore.map(getGroupedGATickets(), (items, key) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n { settnchandler(0) }}>\r\n \r\n \r\n );\r\n};\r\n\r\nexport default GATickets;\r\n","import React, { useEffect } from 'react';\r\nimport { Container, Grid, Typography, TextField, Button, Hidden } from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { actionGetBooking, actionResetBooking } from 'actions';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport { useLocation } from \"react-router-dom\";\r\nimport {\r\n actionShopCartSetManageMyBooking, actionShopCartApplyMemberCostrate, actionShopCartResetDonation, actionShopCartResetStateWithTourHold\r\n} from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\nimport { actionResetPaymentTransaction } from 'actions';\r\n\r\nconst { EmailRegex, FindMyBookingTitle, OrderItemsInCartError, InvalidFindMyBookingFieldsErrorMsg, FindBookingIDNumberNumbericOnly } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n content: {\r\n textAlign: 'center'\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n boxBorder:\r\n {\r\n border: '4px solid ' + theme.palette.primary.main,\r\n borderRadius: '2px'\r\n },\r\n itemPadding: {\r\n padding: '15px'\r\n },\r\n searchButton: {\r\n marginBottom: '10px'\r\n }\r\n}));\r\n\r\n\r\nconst FindMyBooking = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n //States Initializing Start\r\n\r\n const [state, setState] = React.useState({\r\n FindBooking: {\r\n bookingID: '',\r\n lastName: '',\r\n email: ''\r\n }\r\n });\r\n\r\n const [errorstate, seterrorstate] = React.useState({\r\n initialerrorstate: {\r\n bookingID: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n lastName: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n email: {\r\n errorstate: false,\r\n errortext: \"\"\r\n }\r\n }\r\n });\r\n\r\n //States Initializing End\r\n\r\n\r\n //Error Handling Start\r\n\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n const errorcancelhandle = () => {\r\n actionShopCartSetManageMyBooking(dispatch, false, false);\r\n actionResetBooking(dispatch);\r\n seterrorMsg('');\r\n }\r\n\r\n //Error Handling Start\r\n\r\n\r\n\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const paymenttranstate = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n useEffect(() => {\r\n if (events && events.length == 0 && membershipPackages && membershipPackages.length == 0 && gaTickets && gaTickets.length == 0 &&\r\n giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0 && paymenttranstate.hasOwnProperty(\"ReceiptNo\") && paymenttranstate.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n if (reducerBooking.loading == true) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n })\r\n\r\n const constnextredirect = () => {\r\n props.history.push({\r\n pathname: '/managebooking'\r\n })\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (reducerBooking.booking !== 'nocontent' && reducerBooking.booking !== 'no-content') {\r\n reducerBooking.booking[0] = [];\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n\r\n if (reducerBooking.booking && reducerBooking.booking === \"nocontent\") {\r\n seterrorMsg(InvalidFindMyBookingFieldsErrorMsg);\r\n return;\r\n }\r\n\r\n if (reducerBooking.bookingError && reducerBooking.bookingError.length > 0) {\r\n seterrorMsg(reducerBooking.bookingError);\r\n return;\r\n }\r\n\r\n if (reducerBooking.booking && reducerBooking.booking.length > 0 && reducerBooking.booking[0].hasOwnProperty('BookingID')) {\r\n\r\n if (reducerBooking.booking[0].hasOwnProperty('BookingEmailAddress') && reducerBooking.booking[0].hasOwnProperty('BookingSearchName')) {\r\n if ((reducerBooking.booking[0].BookingSearchName.toLowerCase() !== state.FindBooking.lastName.toLowerCase()) &&\r\n (reducerBooking.booking[0].BookingEmailAddress.toLowerCase() !== state.FindBooking.email.toLowerCase())) {\r\n\r\n seterrorMsg('Last Name and Email does not match.');\r\n }\r\n else if (reducerBooking.booking[0].BookingSearchName.toLowerCase() !== state.FindBooking.lastName.toLowerCase()) {\r\n seterrorMsg('Last Name does not match.');\r\n }\r\n\r\n else if (reducerBooking.booking[0].BookingEmailAddress.toLowerCase() !== state.FindBooking.email.toLowerCase()) {\r\n seterrorMsg('Email does not match.');\r\n }\r\n else {\r\n actionShopCartSetManageMyBooking(dispatch, true, false);\r\n actionShopCartApplyMemberCostrate(dispatch, reducerBooking.booking[0].CustomerCostRateID, reducerBooking.booking[0].CustomerID, reducerBooking.booking[0].BookingEmailAddress, reducerBooking.booking[0].BookingSearchName);\r\n\r\n constnextredirect();\r\n }\r\n }\r\n else {\r\n seterrorMsg('Last Name and Email does not match.');\r\n actionResetBooking(dispatch);\r\n }\r\n }\r\n }, [reducerBooking]);\r\n\r\n\r\n const useQuery = () => {\r\n return new URLSearchParams(useLocation().search);\r\n }\r\n\r\n const paramBookingid = useQuery().get(\"bookingID\");\r\n const paramName = useQuery().get(\"Name\");\r\n const paramEmail = useQuery().get(\"Email\");\r\n\r\n useEffect(() => {\r\n\r\n if ((paramBookingid && paramBookingid.trim().length > 0) && (paramName && paramName.trim().length > 0) && (paramEmail && paramEmail.trim().length > 0)) {\r\n var findBookingObj = { ...state.FindBooking };\r\n findBookingObj.bookingID = paramBookingid;\r\n findBookingObj.lastName = paramName;\r\n findBookingObj.email = paramEmail;\r\n setState({ ...state, FindBooking: findBookingObj });\r\n\r\n actionGetBooking(dispatch, paramBookingid, paramEmail, paramName);\r\n }\r\n }, [])\r\n\r\n const fieldhandleChange = (event) => {\r\n\r\n var findBookingObj = { ...state.FindBooking };\r\n\r\n if (event.target.name === \"bookingID\") {\r\n findBookingObj.bookingID = event.target.value;\r\n setState({ ...state, FindBooking: findBookingObj });\r\n }\r\n\r\n if (event.target.name === \"lastname\") {\r\n findBookingObj.lastName = event.target.value;\r\n setState({ ...state, FindBooking: findBookingObj });\r\n }\r\n\r\n if (event.target.name === \"email\") {\r\n findBookingObj.email = event.target.value;\r\n setState({ ...state, FindBooking: findBookingObj });\r\n }\r\n\r\n }\r\n\r\n const searchBooking = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n var initialerrorstate = { ...errorstate.initialerrorstate };\r\n\r\n if (state.FindBooking.bookingID.trim().length < 1) {\r\n initialerrorstate.bookingID.errorstate = true;\r\n initialerrorstate.bookingID.errortext = \"Booking ID is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.bookingID.errorstate = false;\r\n initialerrorstate.bookingID.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.FindBooking.lastName.trim().length < 1) {\r\n initialerrorstate.lastName.errorstate = true;\r\n initialerrorstate.lastName.errortext = \"Last Name is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else {\r\n initialerrorstate.lastName.errorstate = false;\r\n initialerrorstate.lastName.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.FindBooking.email.trim().length < 1) {\r\n\r\n initialerrorstate.email.errorstate = true;\r\n initialerrorstate.email.errortext = \"Email is required.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n else if (state.FindBooking.email.trim().length > 0 && validateEmail(state.FindBooking.email) == false) {\r\n initialerrorstate.email.errorstate = true;\r\n initialerrorstate.email.errortext = \"Please enter a valid email address.\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n return;\r\n }\r\n else {\r\n initialerrorstate.email.errorstate = false;\r\n initialerrorstate.email.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrorstate });\r\n }\r\n\r\n if (state.FindBooking.bookingID.trim().length > 0 && state.FindBooking.lastName.trim().length > 0 && state.FindBooking.email.trim().length > 0) {\r\n\r\n if (shopcartreducer.events && shopcartreducer.events.length > 0) {\r\n actionShopCartResetStateWithTourHold(dispatch, shopcartreducer.events);\r\n }\r\n\r\n if (shopcartreducer.donation && shopcartreducer.donation.length > 0) {\r\n actionShopCartResetDonation(dispatch);\r\n }\r\n\r\n var findBookingObj = { ...state.FindBooking };\r\n findBookingObj.lastName = findBookingObj.lastName.trim();\r\n setState({ ...state, FindBooking: findBookingObj });\r\n\r\n actionGetBooking(dispatch, state.FindBooking.bookingID, state.FindBooking.email, state.FindBooking.lastName.trim());\r\n }\r\n }\r\n\r\n function validateEmail(email) {\r\n var re = new RegExp(EmailRegex);\r\n return re.test(String(email).toLowerCase());\r\n }\r\n\r\n return (\r\n \r\n 0 ? errorMsg : ''}\r\n open={errorMsg && errorMsg.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n \r\n \r\n \r\n {FindMyBookingTitle}\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default FindMyBooking;","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Container, Grid, Typography, Hidden } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport DataAccess from '../../api/constants';\r\nimport Moment from 'moment';\r\nimport { genfunction } from '../../helpers';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport { actionShopCartSetManageMyBooking, actionShopCartSetRefundType, actionShopCartSetMmbAmountToPay, actionShopCartResetMembership, actionGetTransactionFee, actionShopCartResetIDME, actionShopCartSetEnteredAmountToPay } from 'actions';\r\nimport { actionGetBookingTypes, actionResetBookingTypes } from 'actions';\r\nimport { actionGetExtraItems, actionResetExtraItems } from 'actions';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport { actionResetBooking } from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\n\r\nconst { ShowReadableBarcode, TransactionFeeProductID, ApplyTransactionFee } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n tourheaderboxMobView: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px',\r\n marginTop: '40px'\r\n },\r\n image: {\r\n border: \"5px solid white\",\r\n padding: '10px',\r\n align: 'center'\r\n },\r\n warningMsg: {\r\n color: 'Red'\r\n },\r\n AdjustContext: {\r\n padding: '12px'\r\n },\r\n hideBtn: {\r\n display: 'none'\r\n }\r\n}));\r\n\r\nconst ManageMyBooking = (props) => {\r\n\r\n const dispatch = useDispatch();\r\n\r\n //States Initializing Start\r\n\r\n const [open, setOpen] = React.useState(false);\r\n const [openPaymentmethod, setOpenPaymentMethod] = React.useState(false);\r\n\r\n //States Initializing End\r\n\r\n\r\n //Set States Start\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n\r\n const handleClickOpenPaymentMethod = () => {\r\n setOpenPaymentMethod(true);\r\n };\r\n\r\n const handleClosePaymentMethod = () => {\r\n setOpenPaymentMethod(false);\r\n };\r\n\r\n //Set States End\r\n\r\n const classes = useStyles();\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n const displayAreasState = useSelector(state => state.reducerDisplayAreas);\r\n const tourEvents = useSelector(state => state.reducerExtraItems);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n window.history.pushState({ name: \"browserBack\" }, \"on browser back click\", window.location.href);\r\n\r\n useEffect(() => {\r\n if (tourEvents.loading == true) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (ApplyTransactionFee && TransactionFeeProductID > 0) {\r\n actionGetTransactionFee(dispatch, TransactionFeeProductID, 'transactionfee');\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (bookingTypes.bookingTypesError && bookingTypes.bookingTypesError.length > 0) {\r\n seterrorMsg(bookingTypes.bookingTypesError);\r\n }\r\n }, [bookingTypes]);\r\n\r\n useEffect(() => {\r\n if (tourEvents.extramItemsError && tourEvents.extramItemsError.length > 0) {\r\n seterrorMsg(tourEvents.extramItemsError);\r\n }\r\n }, [tourEvents]);\r\n\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg('');\r\n if (tourEvents.extramItemsError && tourEvents.extramItemsError.length > 0) {\r\n actionResetExtraItems(dispatch);\r\n }\r\n\r\n if (bookingTypes.bookingTypesError && bookingTypes.bookingTypesError.length > 0) {\r\n actionResetBookingTypes(dispatch);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n\r\n let displayareaNo = reducerBooking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingTypeDisplayArea') ? reducerBooking.booking[0].BookingTypeDisplayArea : 0;\r\n\r\n if (reducerBooking && reducerBooking.booking[0]) {\r\n\r\n if (reducerBooking.booking[0].AllowDateTimeChanges && !reducerBooking.booking[0].AllowDateTimeChangesWithinArea) {\r\n\r\n if (bookingTypes && bookingTypes.bookingTypes && bookingTypes.bookingTypes.length >= 0 && bookingTypes.bookingTypes.filter(x => x.BookingTypeID === reducerBooking.booking[0].BookingTypeID).length < 1) {\r\n actionGetBookingTypes(dispatch, reducerBooking.booking[0].BookingTypeID, false);\r\n }\r\n }\r\n else if (reducerBooking.booking[0].hasOwnProperty('AllowDateTimeChangesWithinArea') && reducerBooking.booking[0].AllowDateTimeChangesWithinArea) {\r\n actionGetBookingTypes(dispatch, displayareaNo, true);\r\n }\r\n }\r\n\r\n }, [reducerBooking]);\r\n\r\n useEffect(() => {\r\n let startFilterDate = reducerBooking && reducerBooking.booking[0] ? reducerBooking.booking[0].EventStartDateTime : '';\r\n let bookingID = reducerBooking && reducerBooking.booking[0] ? reducerBooking.booking[0].BookingTypeID : 0;\r\n startFilterDate = Moment(startFilterDate).format('YYYY-MM-DD');\r\n\r\n if (reducerBooking && reducerBooking.booking[0]) {\r\n if (reducerBooking.booking[0].AllowDateTimeChanges && !reducerBooking.booking[0].AllowDateTimeChangesWithinArea) {\r\n actionGetExtraItems(dispatch, bookingID, true, false, startFilterDate, null, \"SingleDay\");\r\n }\r\n }\r\n\r\n }, [bookingTypes.bookingTypes]);\r\n\r\n\r\n useEffect(() => {\r\n let startFilterDate = reducerBooking && reducerBooking.booking[0] ? reducerBooking.booking[0].EventStartDateTime : '';\r\n startFilterDate = Moment(startFilterDate).format('YYYY-MM-DD');\r\n\r\n if (reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('AllowDateTimeChangesWithinArea') && reducerBooking.booking[0].AllowDateTimeChangesWithinArea) {\r\n\r\n let displayareaNo = reducerBooking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingTypeDisplayArea') ? reducerBooking.booking[0].BookingTypeDisplayArea : 0;\r\n\r\n if (displayAreasState.displayAreas !== undefined && displayAreasState.displayAreas.length > 0) {\r\n actionGetExtraItems(dispatch, displayareaNo, true, true, startFilterDate, null, \"SingleDay\");\r\n }\r\n else {\r\n actionGetExtraItems(dispatch, displayareaNo, true, true, startFilterDate, null, \"SingleDay\");\r\n }\r\n }\r\n\r\n }, [displayAreasState.displayAreas]);\r\n\r\n\r\n\r\n const ConstRedirectCHangeDateTime = (booking) => {\r\n\r\n if (booking) {\r\n if (booking.AllowDateTimeChanges && booking.AllowDateTimeChangesWithinArea === false) {\r\n props.history.push({\r\n pathname: '/calendar/' + booking.BookingTypeID\r\n })\r\n }\r\n if (booking.hasOwnProperty('BookingTypeDisplayArea') && booking.AllowDateTimeChanges && booking.AllowDateTimeChangesWithinArea) {\r\n props.history.push({\r\n pathname: '/calendar/Area/' + booking.BookingTypeDisplayArea\r\n })\r\n }\r\n }\r\n }\r\n\r\n const ConstRedirectModifyTickets = () => {\r\n\r\n if (reducerBooking.booking[0] && reducerBooking.booking[0].TourEventID) {\r\n props.history.push({\r\n pathname: '/modifytickets',\r\n toureventID: reducerBooking.booking[0].TourEventID\r\n })\r\n }\r\n }\r\n\r\n const CancelBooking = () => {\r\n\r\n if (totalpayments() === 0) {\r\n //actionShopCartSetRefundType(dispatch, \"CancelBooking\");\r\n applyrefund('CancelBooking');\r\n\r\n }\r\n else if (reducerBooking.booking[0]) {\r\n handleClickOpenPaymentMethod();\r\n }\r\n }\r\n\r\n const constredirecttofindmybpooking = () => {\r\n\r\n actionResetBooking(dispatch);\r\n actionShopCartSetManageMyBooking(dispatch, false, false);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n\r\n }\r\n\r\n const redirecttofindmybpooking = () => {\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n const reditecttocheckout = () => {\r\n\r\n let BalanceOwe = reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BalanceOwing') && reducerBooking.booking[0].BalanceOwing > 0 ? reducerBooking.booking[0].BalanceOwing : 0;\r\n\r\n if (BalanceOwe > 0) {\r\n actionShopCartSetRefundType(dispatch, \"AdditionalPayment\");\r\n\r\n BalanceOwe = addTransFeeWithBalance(BalanceOwe);\r\n\r\n actionShopCartSetMmbAmountToPay(dispatch, BalanceOwe);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: 'AdditionalPayment'\r\n })\r\n }\r\n }\r\n\r\n const addTransFeeWithBalance = (balanceOwe) => {\r\n\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n let transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], balanceOwe, cashlesstotal)\r\n\r\n if (transFee > 0) {\r\n actionShopCartSetEnteredAmountToPay(dispatch, balanceOwe);\r\n return genfunction.Rounded(balanceOwe + transFee);\r\n }\r\n }\r\n }\r\n return balanceOwe;\r\n }\r\n\r\n const totalpaid = () => {\r\n let total = 0;\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingPayments') && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n total = reducerBooking.booking[0].BookingPayments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const totalpayments = () => {\r\n let total = 0;\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingPayments') && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n total = reducerBooking.booking[0].BookingPayments.length;\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const applyrefund = (type) => {\r\n\r\n actionShopCartSetMmbAmountToPay(dispatch, - totalpaid());\r\n actionShopCartSetRefundType(dispatch, type);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: type\r\n })\r\n }\r\n\r\n const eligibletxtReturnClass = () => {\r\n let eligibleTxt = \"\";\r\n if (reducerBooking.booking[0]) {\r\n if (reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].AllowRefundToGiftcardOnly) {\r\n\r\n if (reducerBooking.booking[0].hasOwnProperty('PaymentToken')) {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0) + \" to a gift card or card on file \" + (reducerBooking.booking[0].PaymentDescription !== undefined ? reducerBooking.booking[0].PaymentDescription : '');\r\n }\r\n else {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0) + \" to a gift card.\";\r\n }\r\n }\r\n else if (reducerBooking.booking[0].AllowRefundToGiftcardOnly && reducerBooking.booking[0].AllowRefunds == false) {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0) + \" to a gift card.\";\r\n }\r\n else if (reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].hasOwnProperty('PaymentToken')) {\r\n eligibleTxt = \"You are eligible for a refund of \" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0) + \" through card on file \" + (reducerBooking.booking[0].PaymentDescription !== undefined ? reducerBooking.booking[0].PaymentDescription : '');\r\n }\r\n else if (reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds || reducerBooking.booking[0].AllowRefundToGiftcardOnly) && totalpayments() > 1) {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0) + \" to a gift card.\";\r\n }\r\n return eligibleTxt;\r\n }\r\n }\r\n\r\n const totalbookingcost = () => {\r\n let total = 0;\r\n if (reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingProducts') && reducerBooking.booking[0].BookingProducts.length > 0) {\r\n total = reducerBooking.booking[0].BookingProducts.map(({ ProductLinePriceInclTax }) => ProductLinePriceInclTax).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const CancelGCRefund = () => {\r\n applyrefund('CancelGiftCardRefund');\r\n //actionShopCartSetRefundType(dispatch, \"CancelGiftCardRefund\");\r\n }\r\n\r\n\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n \r\n 0 ? errorMsg : ''}\r\n open={errorMsg && errorMsg.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n\r\n \r\n \r\n \r\n \r\n {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingName : ''}\r\n \r\n \r\n\r\n \r\n \r\n {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingName : ''}\r\n \r\n \r\n\r\n \r\n \r\n {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingName : ''}\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n {reducerBooking.booking[0] ? reducerBooking.booking[0].NoChangesMessage : ''}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Booking Details\r\n \r\n \r\n\r\n \r\n \r\n Booking Details\r\n \r\n \r\n\r\n \r\n \r\n Booking Details\r\n \r\n \r\n\r\n \r\n \r\n Confirmation Number : {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingID : ''}\r\n \r\n \r\n\r\n \r\n \r\n Confirmation Number : {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingID : ''}\r\n \r\n \r\n \r\n \r\n Confirmation Number : {reducerBooking.booking[0] ? reducerBooking.booking[0].BookingID : ''}\r\n \r\n \r\n\r\n \r\n \r\n Name : {reducerBooking.booking[0] ? reducerBooking.booking[0].CustomerName : ''}\r\n \r\n \r\n\r\n \r\n \r\n Name : {reducerBooking.booking[0] ? reducerBooking.booking[0].CustomerName : ''}\r\n \r\n \r\n\r\n \r\n \r\n Name : {reducerBooking.booking[0] ? reducerBooking.booking[0].CustomerName : ''}\r\n \r\n \r\n\r\n \r\n \r\n Date : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('MMM D, YYYY') : ''}\r\n \r\n \r\n \r\n \r\n Date : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('MMM D, YYYY') : ''}\r\n \r\n \r\n\r\n \r\n \r\n Date : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('MMM D, YYYY') : ''}\r\n \r\n \r\n\r\n\r\n \r\n \r\n Start Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n \r\n \r\n Start Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n \r\n \r\n Start Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventStartDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n \r\n \r\n End Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventEndDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n \r\n \r\n End Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventEndDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n \r\n \r\n End Time : {reducerBooking.booking[0] ? Moment(reducerBooking.booking[0].EventEndDateTime).format('hh:mm a') : ''}\r\n \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n {\"Cancel Booking?\"} \r\n \r\n \r\n\r\n \r\n \r\n Are you sure you want to cancel Booking ID {reducerBooking.booking[0] && reducerBooking.booking[0] !== undefined ? reducerBooking.booking[0].BookingID : ''}?\r\n \r\n \r\n \r\n \r\n Are you sure you want to cancel Booking ID {reducerBooking.booking[0] && reducerBooking.booking[0] !== undefined ? reducerBooking.booking[0].BookingID : ''}?\r\n \r\n \r\n \r\n \r\n Are you sure you want to cancel Booking ID {reducerBooking.booking[0] && reducerBooking.booking[0] !== undefined ? reducerBooking.booking[0].BookingID : ''}?\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n\r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n \r\n \r\n Tickets\r\n \r\n \r\n\r\n {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingProducts') && reducerBooking.booking[0].BookingProducts ?\r\n\r\n reducerBooking.booking[0].BookingProducts.filter(x => x.AffectsCapacity).map(prod => (\r\n\r\n <>\r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n \r\n ))\r\n\r\n : ''}\r\n\r\n {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingProducts') && reducerBooking.booking[0].BookingProducts.filter(x => x.AffectsCapacity === false).length > 0 ?\r\n <>\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n : null}\r\n\r\n {reducerBooking.booking[0] && reducerBooking.booking[0].BookingProducts ?\r\n\r\n reducerBooking.booking[0].BookingProducts.filter(x => x.AffectsCapacity === false).map(prod => (\r\n\r\n <>\r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName} {\" \"} {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n\r\n ))\r\n\r\n : ''}\r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n Payment\r\n \r\n \r\n\r\n \r\n \r\n Payment\r\n \r\n \r\n\r\n \r\n \r\n Payment\r\n \r\n \r\n\r\n \r\n \r\n Status : {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BalanceOwing') && reducerBooking.booking[0].BalanceOwing > 0 ? 'Unpaid' : 'Paid'}\r\n \r\n \r\n\r\n \r\n \r\n Status : {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BalanceOwing') && reducerBooking.booking[0].BalanceOwing > 0 ? 'Unpaid' : 'Paid'}\r\n \r\n \r\n\r\n \r\n \r\n Status : {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BalanceOwing') && reducerBooking.booking[0].BalanceOwing > 0 ? 'Unpaid' : 'Paid'}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n\r\n \r\n \r\n Total Paid : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Total Paid : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Total Paid : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n\r\n\r\n {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BalanceOwing') && reducerBooking.booking[0].BalanceOwing > 0 ?\r\n <>\r\n \r\n \r\n Balance Owing : {genfunction.ccyFormat(reducerBooking.booking[0].BalanceOwing)}\r\n \r\n \r\n\r\n \r\n \r\n Balance Owing : {genfunction.ccyFormat(reducerBooking.booking[0].BalanceOwing)}\r\n \r\n \r\n\r\n \r\n \r\n Balance Owing : {genfunction.ccyFormat(reducerBooking.booking[0].BalanceOwing)}\r\n \r\n \r\n \r\n\r\n : null}\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {\"Refund Transaction\"} \r\n \r\n \r\n \r\n \r\n {eligibletxtReturnClass()}\r\n \r\n \r\n\r\n \r\n \r\n {eligibletxtReturnClass()}\r\n \r\n \r\n\r\n \r\n \r\n {eligibletxtReturnClass()}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n applyrefund('CancelBooking')}\r\n variant=\"contained\" size=\"medium\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].hasOwnProperty('PaymentToken')) ? '' : classes.hideBtn} >\r\n Refund to Credit Card\r\n \r\n\r\n CancelGCRefund()}\r\n variant=\"contained\" size=\"medium\" color=\"primary\"\r\n className={reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefundToGiftcardOnly ? '' : classes.hideBtn} >\r\n Refund to Gift Card\r\n \r\n \r\n\r\n \r\n \r\n\r\n applyrefund('CancelBooking')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].hasOwnProperty('PaymentToken')) ? '' : classes.hideBtn} >\r\n Refund to Credit Card\r\n \r\n\r\n CancelGCRefund()}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefundToGiftcardOnly ? '' : classes.hideBtn} >\r\n Refund to Gift Card\r\n \r\n \r\n\r\n \r\n \r\n\r\n applyrefund('CancelBooking')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].hasOwnProperty('PaymentToken')) ? '' : classes.hideBtn} >\r\n Refund to Credit Card\r\n \r\n\r\n CancelGCRefund()}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefundToGiftcardOnly ? '' : classes.hideBtn} >\r\n Refund to Gift Card\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n Please go to find my booking page to Update Booking.\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ManageMyBooking;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport { Typography, Grid, Container, Button, Hidden, IconButton, TextField, Table, TableBody, TableCell, TableRow } from '@material-ui/core';\r\nimport ExtraItemsProducts from '../../components/CalendarControls/ExtraItemsProducts';\r\nimport { genfunction } from '../../helpers';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n actionShopCartAddEventWithTourHold, actionShopCartSetManageMyBooking,\r\n actionShopCartResetStateWithTourHold, actionShopCartResetStateWithUniqueCouponHold, actionRemoveCoupon,\r\n actionShopCartSetMmbAmountToPay, actionShopCartSetRefundType, actionShopCartSetEnteredAmountToPay\r\n} from 'actions';\r\nimport { actionResetBooking } from 'actions';\r\nimport { actionResetExtraItems } from 'actions';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport { actionGetCoupon, actionResetCoupon, actionEndCouponLoading } from 'actions';\r\nimport { actionResetUniqueCouponCardHoldState } from 'actions';\r\nimport { actionResetCouponAlreadyApplied, actionShopCartRemoveCoupons, actionShopCartResetError, actionShopCartResetMembership, actionShopCartResetIDME } from 'actions';\r\nimport { actionDeleteUniqueCoupon } from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\n\r\nconst { DefaultCostRateID, ChangeDateTimeHeading, RefundCreditCardButton, RefundGiftCardButton } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n diplaynone: {\r\n display: \"none\"\r\n },\r\n hideBtn: {\r\n display: 'none'\r\n }\r\n}));\r\n\r\nconst ConfimBookingChanges = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const bookingreducer = useSelector(state => state.reducerBooking);\r\n const newExtraItem = useSelector(state => state.reducerExtraItems.extraItem);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n const reducerCoupon = useSelector(state => state.reducerCoupon);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n let bookingID = bookingreducer && bookingreducer.booking[0] ? bookingreducer.booking[0].BookingTypeID : 0;\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == bookingID)[0] : null;\r\n const uniqueCouponHolds = useSelector(state => state.reducerUniqueCouponHolds);\r\n\r\n let amountaftercoupon = genfunction.subproducttotal(cartEvents, null, null, null, null, null, null, [], []);\r\n\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n\r\n //States Initializing Start\r\n\r\n const [couponNo, setcouponNo] = useState(\"\");\r\n const [errormsg, seterrormsg] = useState(\"\");\r\n const [open, setOpen] = React.useState(false);\r\n const [isredirectclicked, setisredirectclicked] = useState(false);\r\n\r\n //States Initializing End\r\n\r\n\r\n //Set States Start\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n useEffect(() => {\r\n if (reducerCoupon.loading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [reducerCoupon.loading]);\r\n\r\n useEffect(() => {\r\n if (reducerCoupon.couponError !== undefined && reducerCoupon.couponError.length > 0) {\r\n seterrormsg(reducerCoupon.couponError);\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n actionShopCartResetStateWithTourHold(dispatch, cartEvents);\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n }\r\n }\r\n }, [reducerCoupon.couponError]);\r\n\r\n //Set States End\r\n\r\n useEffect(() => {\r\n if (cartEvents && cartEvents.length > 0 && shopcartreducer.tourCoupons && shopcartreducer.tourCoupons.length < 1) {\r\n actionShopCartResetStateWithTourHold(dispatch, cartEvents);\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n }\r\n }, [shopcartreducer.tourCoupons])\r\n\r\n\r\n const CouponsTotal = () => {\r\n let total = 0;\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n cartEvents.map(x => {\r\n x.CouponItems.map(e => {\r\n total += e.TotalAmount;\r\n });\r\n })\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const AmountToPay = () => {\r\n\r\n let previouspaid = totalpaid();\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n return amountaftercoupon - previouspaid;\r\n }\r\n\r\n if (newExtraItem && newExtraItem.TotalAmount) {\r\n return newExtraItem.TotalAmount - previouspaid;\r\n }\r\n return 0;\r\n }\r\n\r\n\r\n const constredirecttofindmybpooking = () => {\r\n\r\n actionResetBooking(dispatch);\r\n actionResetExtraItems(dispatch);\r\n actionShopCartSetManageMyBooking(dispatch, false, false);\r\n actionResetCoupon(dispatch);\r\n actionShopCartRemoveCoupons(dispatch);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n\r\n if ((cartEvents && cartEvents.length > 0) || (shopcartreducer.tourCoupons && shopcartreducer.tourCoupons.length > 0)) {\r\n actionShopCartResetStateWithTourHold(dispatch, cartEvents);\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n }\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n\r\n useEffect(() => {\r\n let BalanceOwe = AmountToPay();\r\n\r\n if (isredirectclicked && shopcartreducer.error.length < 1 && shopcartreducer.events && shopcartreducer.events.length > 0 && BalanceOwe > -1) {\r\n BalanceOwe = addTransFeeWithBalance(BalanceOwe);\r\n\r\n actionShopCartSetMmbAmountToPay(dispatch, BalanceOwe);\r\n setisredirectclicked(false);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: ''\r\n })\r\n }\r\n if (isredirectclicked && shopcartreducer.error.length > 0) {\r\n seterrormsg(shopcartreducer.error);\r\n setisredirectclicked(false);\r\n }\r\n }, [shopcartreducer, (isredirectclicked === true)]);\r\n\r\n const addTransFeeWithBalance = (balanceOwe) => {\r\n\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n let transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], balanceOwe, cashlesstotal)\r\n\r\n if (transFee > 0) {\r\n actionShopCartSetEnteredAmountToPay(dispatch, balanceOwe);\r\n return genfunction.Rounded(balanceOwe + transFee);\r\n }\r\n }\r\n }\r\n return balanceOwe;\r\n }\r\n\r\n const addeventstotourholdaction = () => {\r\n let filterdata = { ...newExtraItem };\r\n filterdata.TourProducts = filterdata.TourProducts.filter(product => product.Quantity > 0);\r\n let cartdata = [...cartEvents];\r\n\r\n if (filterdata && filterdata.hasOwnProperty('BookingTypeID')) {\r\n let usealternamteMerchant = false;\r\n if (bkngType && bkngType.hasOwnProperty('UseAlternateMerchant')) {\r\n usealternamteMerchant = bkngType.UseAlternateMerchant;\r\n }\r\n\r\n filterdata.UseAlternateMerchant = usealternamteMerchant;\r\n }\r\n\r\n actionShopCartAddEventWithTourHold(dispatch, filterdata, cartdata);\r\n }\r\n\r\n const constredirecttomanagecheckout = () => {\r\n\r\n if (ValidateQuanity()) {\r\n if (AmountToPay() >= 0 && newExtraItem && newExtraItem.hasOwnProperty('TotalAmount')) {\r\n\r\n if (shopcartreducer.tourCoupons && shopcartreducer.tourCoupons.length < 1) {\r\n addeventstotourholdaction();\r\n }\r\n\r\n setisredirectclicked(true);\r\n }\r\n else {\r\n handleClickOpen();\r\n }\r\n }\r\n }\r\n\r\n const ValidateQuanity = () => {\r\n let MinTicket = bkngType.MinimumTickets\r\n let MaxTicket = bkngType.MaximumTickets;\r\n\r\n let CartQty = 0;\r\n let NewQty = 0;\r\n let TotalTicketCount = 0;\r\n if (cartEvents && cartEvents.length > 0) {\r\n\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == newExtraItem.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0) {\r\n CartQty = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n NewQty = newExtraItem.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n\r\n TotalTicketCount = CartQty + NewQty;\r\n\r\n if (newExtraItem.SeatsAvailable == 0 || newExtraItem.BookNowOption != \"Book Now\") {\r\n seterrormsg(\"Tickets not longer available, please choose another time\");\r\n return false;\r\n }\r\n else if (NewQty > newExtraItem.SeatsAvailable) {\r\n seterrormsg(\"Maximum of \" + newExtraItem.SeatsAvailable + \" tickets available\");\r\n return false;\r\n }\r\n else if (TotalTicketCount < MinTicket) {\r\n seterrormsg(\"Minimum tickets per order is \" + MinTicket)\r\n return false;\r\n }\r\n else if (TotalTicketCount > MaxTicket) {\r\n seterrormsg(\"Maximum of \" + MaxTicket + \" tickets allowed\")\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n const applyrefund = (type) => {\r\n\r\n if (shopcartreducer.tourCoupons && shopcartreducer.tourCoupons.length < 1) {\r\n addeventstotourholdaction();\r\n }\r\n\r\n actionShopCartSetMmbAmountToPay(dispatch, AmountToPay());\r\n actionShopCartSetRefundType(dispatch, type);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: type\r\n })\r\n }\r\n\r\n const totalpaid = () => {\r\n let total = 0;\r\n if (bookingreducer.booking && bookingreducer.booking[0] && bookingreducer.booking[0].BookingPayments && bookingreducer.booking[0].BookingPayments.length > 0) {\r\n total = bookingreducer.booking[0].BookingPayments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return total;\r\n }\r\n\r\n\r\n const CheckCouponNo = (couponCode) => {\r\n if (couponCode == '') {\r\n seterrormsg('Please enter Coupon number.')\r\n }\r\n else {\r\n if (couponCode.length > 0) {\r\n\r\n if (!CheckUniqueCouponAlreadyApplied(couponCode)) {\r\n if (newExtraItem && newExtraItem.TotalAmount) {\r\n addeventstotourholdaction();\r\n setcouponNo(couponCode);\r\n }\r\n }\r\n else {\r\n seterrormsg(\"Unique Coupon already applied, please remove existing coupon and try again.\");\r\n setcouponNo('');\r\n }\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (cartEvents && cartEvents.length > 0 && couponNo.length > 0) {\r\n actionGetCoupon(dispatch, couponNo);\r\n setcouponNo('');\r\n }\r\n }, [cartEvents]);\r\n\r\n const errorcancelhandle = () => {\r\n\r\n // Reset Coupons\r\n actionResetUniqueCouponCardHoldState(dispatch);\r\n actionResetCouponAlreadyApplied(dispatch);\r\n actionResetCoupon(dispatch);\r\n actionShopCartResetError(dispatch);\r\n setcouponNo('');\r\n seterrormsg('');\r\n setisredirectclicked(false);\r\n }\r\n\r\n const CheckUniqueCouponAlreadyApplied = (couponCode) => {\r\n\r\n let exist = false;\r\n if (cartEvents && cartEvents.length > 0) {\r\n\r\n cartEvents.map(e => {\r\n\r\n if (e.CouponItems.filter(x => x.UniqueCouponCode == couponCode && x.isUniqueCoupon).length > 0) {\r\n exist = true;\r\n }\r\n });\r\n }\r\n\r\n return exist;\r\n }\r\n\r\n useEffect(() => {\r\n if (uniqueCouponHolds.UniqueCouponError && uniqueCouponHolds.UniqueCouponError.length > 0) {\r\n seterrormsg(uniqueCouponHolds.UniqueCouponError);\r\n actionEndCouponLoading(dispatch);\r\n }\r\n }, [uniqueCouponHolds.UniqueCouponError]);\r\n\r\n const openerrorpopup = () => {\r\n return (errormsg != \"\")\r\n }\r\n\r\n function ShowCurrentBookingStartAndEndTime() {\r\n let time = \"\";\r\n\r\n if (bookingreducer.booking && bookingreducer.booking[0]) {\r\n\r\n time += genfunction.GetEventDateReceiptFormat(bookingreducer.booking[0].EventStartDateTime);\r\n time += ' - ' + genfunction.AppendEndTime(bookingreducer.booking[0].EventEndDateTime);\r\n }\r\n\r\n return time;\r\n }\r\n\r\n function ShowStartAndEndTime(bkngType, newExtraItem) {\r\n let time = \"\";\r\n\r\n if (bkngType && newExtraItem) {\r\n\r\n if (bkngType.ShowStartTime) {\r\n time += genfunction.GetEventDateReceiptFormat(newExtraItem.EventStartDateTime);\r\n }\r\n\r\n if (bkngType.ShowEndTime && !bkngType.ShowStartTime) {\r\n time += genfunction.GetEventDateReceiptFormat(newExtraItem.EventStartDateTime);\r\n }\r\n\r\n if (bkngType.ShowEndTime && bkngType.ShowStartTime) {\r\n time += ' - ' + genfunction.AppendEndTime(newExtraItem.EventEndDateTime);\r\n }\r\n\r\n if (!bkngType.ShowStartTime && !bkngType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormatwithoutTime(newExtraItem.EventStartDateTime);\r\n }\r\n }\r\n\r\n return time;\r\n }\r\n\r\n const removeclickhandler = (eventid, productid, couponID, couponRefHold) => {\r\n if (couponRefHold !== null) {\r\n if (DeleteCouponsHolds(couponID)) {\r\n actionDeleteUniqueCoupon(dispatch, couponRefHold);\r\n }\r\n }\r\n\r\n actionRemoveCoupon(dispatch, eventid, productid);\r\n }\r\n\r\n const DeleteCouponsHolds = (CouponID) => {\r\n let removeUniqueCouponHolds = false;\r\n if (cartEvents) {\r\n\r\n cartEvents.map(x => {\r\n if (x.CouponItems.filter(x => x.CouponID == CouponID && x.isUniqueCoupon).length < 2) {\r\n removeUniqueCouponHolds = true;\r\n }\r\n })\r\n }\r\n\r\n return removeUniqueCouponHolds;\r\n }\r\n\r\n const redirecttofindmybpooking = () => {\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n \r\n \r\n \r\n \r\n \r\n {ChangeDateTimeHeading}\r\n \r\n \r\n\r\n \r\n \r\n {ChangeDateTimeHeading}\r\n \r\n \r\n\r\n \r\n \r\n {ChangeDateTimeHeading}\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n Original Booking : {ShowCurrentBookingStartAndEndTime()}\r\n \r\n \r\n\r\n \r\n \r\n Original Booking : {ShowCurrentBookingStartAndEndTime()}\r\n \r\n \r\n\r\n \r\n \r\n Original Booking : {ShowCurrentBookingStartAndEndTime()}\r\n \r\n \r\n\r\n \r\n \r\n For reference, here are the original tickets in your order.\r\n \r\n \r\n\r\n \r\n \r\n For reference, here are the original tickets in your order.\r\n \r\n \r\n\r\n \r\n \r\n For reference, here are the original tickets in your order.\r\n \r\n \r\n\r\n\r\n \r\n \r\n These will all be replaced with tickets selected below.\r\n \r\n \r\n\r\n \r\n \r\n These will all be replaced with tickets selected below.\r\n \r\n \r\n\r\n \r\n \r\n These will all be replaced with tickets selected below.\r\n \r\n \r\n\r\n\r\n\r\n {bookingreducer.booking[0] && bookingreducer.booking[0].hasOwnProperty('BookingProducts') && bookingreducer.booking[0].BookingProducts.length > 0 ?\r\n\r\n bookingreducer.booking[0].BookingProducts.map((prod, i) => {\r\n return prod.Quantity > 0 ?\r\n \r\n \r\n\r\n \r\n \r\n {prod.Quantity} x {prod.TourProductName}\r\n \r\n \r\n\r\n \r\n \r\n\r\n {prod.Quantity} x {prod.TourProductName}\r\n \r\n \r\n\r\n \r\n \r\n\r\n {prod.Quantity} x {prod.TourProductName}\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n\r\n {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n \r\n\r\n {genfunction.ccyFormat(prod.ProductLinePriceInclTax)}\r\n \r\n \r\n\r\n \r\n : null\r\n }) : null}\r\n \r\n\r\n \r\n \r\n \r\n New Booking : {ShowStartAndEndTime(bkngType, newExtraItem)}\r\n \r\n \r\n\r\n \r\n \r\n New Booking : {ShowStartAndEndTime(bkngType, newExtraItem)}\r\n \r\n \r\n\r\n \r\n \r\n New Booking : {ShowStartAndEndTime(bkngType, newExtraItem)}\r\n \r\n \r\n\r\n \r\n \r\n Select the tickets and add ons for your new date / time.\r\n \r\n \r\n\r\n \r\n \r\n Select the tickets and add ons for your new date / time.\r\n \r\n \r\n\r\n \r\n \r\n Select the tickets and add ons for your new date / time.\r\n \r\n \r\n\r\n\r\n \r\n \r\n These tickets will replace the tickets from your original order.\r\n \r\n \r\n\r\n \r\n \r\n These tickets will replace the tickets from your original order.\r\n \r\n \r\n\r\n \r\n \r\n These tickets will replace the tickets from your original order.\r\n \r\n \r\n\r\n \r\n 0 ? false : true}\r\n hidetopheading={true} isMMB={true}\r\n tourEventId={props.location.eventID} ismembershipapplied={props.location.ismembershipapplied ? props.location.ismembershipapplied : false}\r\n membercostrate={props.location.membercostrate ? props.location.membercostrate : DefaultCostRateID}\r\n bookingtypeID={props.location.bookingtypeID !== undefined && props.location.bookingtypeID > 0 ? props.location.bookingtypeID : bookingID} />\r\n \r\n\r\n \r\n\r\n \r\n {\r\n setcouponNo(event.target.value);\r\n }}\r\n />\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n\r\n \r\n \r\n Original Cost : {bookingreducer.booking[0] && bookingreducer.booking[0].BookingPayments ? genfunction.ccyFormat(bookingreducer.booking[0].BookingPayments[0].PaymentAmount) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Original Cost : {bookingreducer.booking[0] && bookingreducer.booking[0].BookingPayments ? genfunction.ccyFormat(bookingreducer.booking[0].BookingPayments[0].PaymentAmount) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Original Cost : {bookingreducer.booking[0] && bookingreducer.booking[0].BookingPayments ? genfunction.ccyFormat(bookingreducer.booking[0].BookingPayments[0].PaymentAmount) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n New Cost : {genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n \r\n \r\n New Cost : {genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n \r\n \r\n New Cost : {genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n Amount to Pay\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay\r\n \r\n \r\n\r\n \r\n \r\n New Cost :{genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n \r\n \r\n New Cost :{genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n \r\n \r\n New Cost :{genfunction.ccyFormat(newExtraItem.TotalAmount ? newExtraItem.TotalAmount : 0)}\r\n \r\n \r\n\r\n \r\n \r\n Coupon Applied : {genfunction.ccyFormat(CouponsTotal())}\r\n \r\n \r\n\r\n \r\n \r\n Coupon Applied : {genfunction.ccyFormat(CouponsTotal())}\r\n \r\n \r\n\r\n \r\n \r\n Coupon Applied : {genfunction.ccyFormat(CouponsTotal())}\r\n \r\n \r\n\r\n\r\n 0 ? \"\" : classes.diplaynone}>\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Previous Payment : {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n Previous Payment : {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n Previous Payment : {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {genfunction.ccyFormat(AmountToPay())}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {genfunction.ccyFormat(AmountToPay())}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {genfunction.ccyFormat(AmountToPay())}\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n {\"Refund Transaction\"} \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n Your new booking total is {genfunction.ccyFormat(AmountToPay())} and your total paid is {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}.\r\n \r\n \r\n\r\n \r\n \r\n Your new booking total is {genfunction.ccyFormat(AmountToPay())} and your total paid is {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}.\r\n \r\n \r\n\r\n \r\n \r\n Your new booking total is {genfunction.ccyFormat(AmountToPay())} and your total paid is {bookingreducer.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}.\r\n \r\n */}\r\n\r\n\r\n \r\n \r\n {\"Your previous payment:\" + genfunction.ccyFormat(totalpaid())}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(AmountToPay()))}\r\n \r\n \r\n\r\n \r\n \r\n {\"Your previous payment:\" + genfunction.ccyFormat(totalpaid())}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(AmountToPay()))}\r\n \r\n \r\n\r\n \r\n \r\n {\"Your previous payment:\" + genfunction.ccyFormat(totalpaid())}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(AmountToPay()))}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"medium\" color=\"primary\"\r\n className={bookingreducer.booking[0] && (bookingreducer.booking[0].AllowRefunds || bookingreducer.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={bookingreducer.booking[0] && (bookingreducer.booking[0].AllowRefunds || bookingreducer.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={bookingreducer.booking[0] && (bookingreducer.booking[0].AllowRefunds || bookingreducer.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n Please go to find my booking page to Update Booking.\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ConfimBookingChanges;\r\n","import React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n Button, Checkbox, Card, CardContent, CardHeader, FormControl, FormControlLabel, Hidden, FormHelperText, Grid, InputLabel, InputAdornment,\r\n Link, MenuItem, Radio, RadioGroup, Select, Typography, TextField\r\n} from '@material-ui/core';\r\nimport { CreditCard, DateRange, VpnKey } from '@material-ui/icons';\r\nimport { genfunction } from '../../../helpers';\r\nimport { actionPostPaymentTransaction, actionResetPaymentTransaction, actionShopCartShowTransFee } from 'actions';\r\nimport CryptoAES from 'crypto-js/aes';\r\nimport CryptoENC from 'crypto-js/enc-utf8';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport DialogeBox from '../../../components/DialogeBox/DialogeBox';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport MaskedInput from 'react-text-mask';\r\nimport { actionResetFormErrorState, actionSetFormErrorState, actionSetFieldValueState } from 'actions';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { actionGetCustomer, actionResetCustomer } from 'actions';\r\nimport { actionShopCartSetRefundType, actionShopCartSetAdditionalBookingAmount, actionShopCartSetMmbAmountToPay } from 'actions';\r\nimport { actionGetCountryAndState } from 'actions';\r\nimport { useGoogleReCaptcha } from 'react-google-recaptcha-v3';\r\nimport Payments from '../../../components/Payments/Payments';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { createFilterOptions } from '@material-ui/lab/Autocomplete';\r\nimport MultiPayments from '../../Checkout/components/MultiPayments';\r\nimport { useDebouncedCallback } from 'use-debounce';\r\nimport { actionStopUserToPurchase } from 'actions';\r\nimport { actionValidateRecaptchaToken } from 'actions';\r\n\r\nconst { EnableAlternateMerchantOnline, EmailRegex, PhoneNumberMessage, spreedlyEnvironment, RecaptchaV3Client, TermsnConditionCheckBoxText,\r\n TermsnConditionCheckMsg, UseStreetAddressForAVS, ShowFullAddressOnCheckout, PaymentMethodType, PhoneNumberMandatory, ApplyTransactionFee } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n }, primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n box95per: {\r\n width: \"97%\"\r\n },\r\n iconforiframe: {\r\n marginTop: \"18px\"\r\n },\r\n iframebox: {\r\n marginTop: \"-13px\",\r\n height: \"31px\",\r\n },\r\n visible: {\r\n visibility: \"visible\"\r\n },\r\n hideVisiblity: {\r\n display: \"none\"\r\n },\r\n cancelbtnconfig:\r\n {\r\n marginTop: \"-40px !important\"\r\n },\r\n cancelbtnconfig10per:\r\n {\r\n marginTop: \"10px !important\"\r\n },\r\n clearButton: {\r\n \"& .MuiButtonBase-root.MuiAutocomplete-clearIndicator\": {\r\n color: theme.palette.primary.main\r\n }\r\n }\r\n}));\r\n\r\nfunction TextMaskCustom(props) {\r\n const { inputRef, onChange, value, ...other } = props;\r\n let pnMask = ['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/];\r\n return (\r\n {\r\n inputRef(ref ? ref.inputElement : null);\r\n }}\r\n onChange={onChange}\r\n mask={pnMask}\r\n />\r\n );\r\n}\r\n\r\nconst CreditCardPayment = (props) => {\r\n\r\n const paymentsRef = useRef();\r\n var requiredFields = {};\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { executeRecaptcha } = useGoogleReCaptcha();\r\n\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const errorstate = useSelector(state => state.reducerFormError.errorstate);\r\n const formfields = useSelector(state => state.reducerFormError.formfields);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n const customer = useSelector(state => state.reducerCustomer);\r\n const managebkngTicketsModify = useSelector(state => state.reducerShopCart.managebookingticketsmodification);\r\n let shopcartamounttoPay = useSelector(state => state.reducerShopCart.mmbAmountToPay);\r\n let refundType = useSelector(state => state.reducerShopCart.refundType);\r\n const countryandstates = useSelector(state => state.reducerCountryAndState.countryandstate);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n let enteredAmountToPay = useSelector(state => state.reducerShopCart.enteredAmountToPay);\r\n const recaptacha = useSelector(state => state.reducerRecaptcha);\r\n const sessionID = useSelector(state => state.reducerGlobal.sessionID);\r\n const stopUserToPurchase = useSelector(state => state.reducerGlobal.stopUserToPurchase);\r\n const mmbHasPaid = useSelector(state => state.reducerShopCart.MMBHasPaid);\r\n\r\n const environmentKey = CryptoAES.decrypt(spreedlyEnvironment, '1271').toString(CryptoENC);\r\n const [CreditCardValue, setCreditCardValue] = React.useState(''); //NewCardDetails\r\n const [opentnc, setopentnc] = useState(false);\r\n const [tncchecked, settncChecked] = React.useState(false);\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n\r\n const paymenttranstate = useSelector(state => {\r\n return (\r\n {\r\n loading: state.reducerPaymentTransaction.loading,\r\n haspaid: state.reducerPaymentTransaction.Payment.hasOwnProperty('Products'),\r\n paymentinfo: state.reducerPaymentTransaction.Payment,\r\n errormsg: state.reducerPaymentTransaction.PaymentInfoError\r\n }\r\n )\r\n });\r\n\r\n let inputreferences = [];\r\n\r\n inputreferences.first_name = React.useRef();\r\n inputreferences.last_name = React.useRef();\r\n inputreferences.email = React.useRef();\r\n inputreferences.phone_number = React.useRef();\r\n inputreferences.address1 = React.useRef();\r\n inputreferences.country = React.useRef();\r\n inputreferences.state = React.useRef();\r\n inputreferences.city = React.useRef();\r\n inputreferences.zip = React.useRef();\r\n inputreferences.memberno = React.useRef();\r\n inputreferences.shipping_phone_number = React.useRef();\r\n inputreferences.shipping_address1 = React.useRef();\r\n inputreferences.shipping_city = React.useRef();\r\n inputreferences.shipping_state = React.useRef();\r\n inputreferences.shipping_zip = React.useRef();\r\n inputreferences.shipping_country = React.useRef();\r\n\r\n const openerrorpopup = () => {\r\n return (paymenttranstate.errormsg != \"\" || errorMsg != \"\")\r\n }\r\n\r\n const filterOptions = createFilterOptions({\r\n stringify: (option) => option.Country + '' + option.State,\r\n });\r\n\r\n useEffect(() => {\r\n if (shopcartamounttoPay > 0) {\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n actionShopCartShowTransFee(dispatch, true);\r\n }\r\n }\r\n }\r\n\r\n }, [transactionfee])\r\n\r\n const handleReCaptchaVerify = useCallback(async () => {\r\n\r\n if (!executeRecaptcha) {\r\n console.log('Execute recaptcha not yet available.');\r\n return;\r\n }\r\n\r\n let token = await executeRecaptcha('ecommerce');\r\n\r\n if (token.length > 0) {\r\n actionValidateRecaptchaToken(dispatch, token, sessionID);\r\n }\r\n else {\r\n seterrorMsg(\"Recaptcha token not fetched.\");\r\n }\r\n\r\n }, [executeRecaptcha]);\r\n\r\n useEffect(() => {\r\n\r\n if ((events && events.length > 0) || refundType === \"AdditionalPayment\") {\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '' && (stopUserToPurchase !== undefined\r\n && stopUserToPurchase === false) && (sessionID !== undefined && sessionID.length > 0)\r\n && (recaptacha.validToken !== undefined && recaptacha.validToken === false)) {\r\n\r\n handleReCaptchaVerify();\r\n }\r\n }\r\n\r\n }, [handleReCaptchaVerify, RecaptchaV3Client, stopUserToPurchase, sessionID, recaptacha.validToken])\r\n\r\n\r\n useEffect(() => {\r\n if (paymenttranstate.errormsg.includes(\"Payment has been unsuccessful. To make this purchase, please contact us directly.\")) {\r\n actionStopUserToPurchase(dispatch);\r\n }\r\n }, [paymenttranstate.errormsg]);\r\n\r\n useEffect(() => {\r\n if (recaptacha.validTokenError.length > 0) {\r\n seterrorMsg(recaptacha.validTokenError);\r\n actionStopUserToPurchase(dispatch);\r\n }\r\n\r\n }, [recaptacha.validTokenError]);\r\n\r\n const transFeeCheckHandler = (event) => {\r\n let transFee;\r\n\r\n if (refundType === \"AdditionalPayment\" || (refundType === \"\" && shopcartamounttoPay > 0)) {\r\n transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], enteredAmountToPay, cashlesstotal)\r\n }\r\n else {\r\n transFee = genfunction.TransactionFee(events, donation, transactionfee.transactionFee[0], cashless, membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts);\r\n }\r\n\r\n let amoutToPay = event.target.checked ? genfunction.Rounded(shopcartamounttoPay + transFee) : genfunction.Rounded(shopcartamounttoPay - transFee);\r\n actionShopCartShowTransFee(dispatch, event.target.checked);\r\n actionShopCartSetMmbAmountToPay(dispatch, amoutToPay);\r\n };\r\n\r\n useEffect(() => {\r\n\r\n if (props.booking && props.booking.hasOwnProperty('CustomerID') && props.booking.CustomerID > 0 && mmbHasPaid === false) {\r\n\r\n let cstID = props.booking.CustomerID;\r\n if (props.booking.hasOwnProperty('BookingContactID') && props.booking.BookingContactID) {\r\n cstID = props.booking.BookingContactID;\r\n }\r\n\r\n actionGetCustomer(dispatch, cstID, props.booking.BookingEmailAddress);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.amounttopay <= 0 || shopcartamounttoPay <= 0) {\r\n setCreditCardValue(\"\");\r\n }\r\n }, [cashless])\r\n\r\n\r\n useEffect(() => {\r\n if (customer.customerError && customer.customerError.length > 0) {\r\n seterrorMsg(customer.customerError);\r\n }\r\n }, [customer]);\r\n\r\n useEffect(() => {\r\n\r\n if (shopcartamounttoPay == 0 && refundType !== \"CancelBooking\" && customer.customer && customer.customer.length > 0) {\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n }\r\n }, [customer]);\r\n\r\n useEffect(() => {\r\n\r\n if (shopcartamounttoPay < 0 && (refundType == \"GiftCardRefund\" || refundType == \"CancelGiftCardRefund\") && customer.customer && customer.customer.length > 0) {\r\n actionShopCartSetRefundType(dispatch, refundType)\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n }\r\n }, [customer]);\r\n\r\n useEffect(() => {\r\n\r\n if ((refundType == \"CancelBooking\" || refundType == \"CreditCardRefund\") && customer.customer && customer.customer.length > 0) {\r\n\r\n let cardonfileToken = \"\";\r\n let cardType = \"\";\r\n let cardMaskedNum = \"\";\r\n\r\n\r\n if (props.booking.hasOwnProperty('PaymentToken') && props.booking.PaymentToken.length > 0) {\r\n cardonfileToken = PaymentMethodType === \"Spreedly\" ?\r\n props.booking.PaymentToken.substring(9, props.booking.PaymentToken.length) :\r\n props.booking.PaymentToken.substring(props.booking.PaymentToken.length - 10);\r\n }\r\n\r\n if (props.booking.hasOwnProperty('PaymentDescription') && props.booking.PaymentDescription.length > 0) {\r\n cardType = PaymentMethodType === \"Spreedly\" ?\r\n props.booking.PaymentDescription.substr(0, props.booking.PaymentDescription.indexOf('-')) :\r\n props.booking.PaymentDescription.substring(0, props.booking.PaymentDescription.indexOf('-') - 1).trim();\r\n\r\n cardMaskedNum = props.booking.PaymentDescription.substring(props.booking.PaymentDescription.indexOf('-') + 1, props.booking.PaymentDescription.length).trim();\r\n }\r\n\r\n if (cardonfileToken.length > 0) {\r\n actionShopCartSetRefundType(dispatch, refundType);\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: cardonfileToken, cardtype: cardType, cardnumber: cardMaskedNum }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: cardonfileToken, cardtype: cardType, cardnumber: cardMaskedNum }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n\r\n }\r\n }\r\n }, [customer]);\r\n\r\n const GetTransOptionalText = () => {\r\n let optionalTxt = '';\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n optionalTxt = transactionfee.transactionFee[0].TransactionFeeOptionalText;\r\n\r\n if (refundType === \"AdditionalPayment\" || (refundType === \"\" && shopcartamounttoPay > 0))\r\n optionalTxt += ' [' + genfunction.ccyFormat(parseFloat(genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], enteredAmountToPay, cashlesstotal))) + ']';\r\n\r\n else\r\n optionalTxt += ' [' + genfunction.ccyFormat(parseFloat(genfunction.TransactionFee(events, donation, transactionfee.transactionFee[0], cashless, membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts))) + ']';\r\n }\r\n\r\n return optionalTxt;\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n actionResetPaymentTransaction(dispatch);\r\n actionResetCustomer(dispatch);\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const fieldhandleChange = (event) => {\r\n if (event.currentTarget.name === \"checkBoxMember\")\r\n actionSetFieldValueState(dispatch, event.currentTarget.name, event.target.checked);\r\n else if (event.target.name === \"MonthSelect\" || event.target.name === \"YearSelect\")\r\n actionSetFieldValueState(dispatch, event.target.name, event.target.value);\r\n else\r\n actionSetFieldValueState(dispatch, event.currentTarget.name, event.target.value);\r\n\r\n };\r\n\r\n const getTNC = () => {\r\n return ReactHtmlParser(TermsnConditionCheckMsg);\r\n }\r\n\r\n const handleChange = (event) => {\r\n setCreditCardValue(event.target.value);\r\n };\r\n\r\n const tnccheckeHandle = (event) => {\r\n settncChecked(event.target.checked);\r\n };\r\n\r\n const paymentTokenHandler = (token, client, recaptchaToken) => {\r\n actionPostPaymentTransaction(dispatch, token, client, recaptchaToken);\r\n }\r\n\r\n const changeBillingAddress = () => {\r\n actionSetFieldValueState(dispatch, 'billingAddressSame', !formfields.billingAddressSame.value);\r\n }\r\n\r\n const ZeroDollaroRGiftCardOnlyTransCall = () => {\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: \"\", cardtype: \"\" }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n }\r\n\r\n const ProcessAndConfigurePaymentsWithoutCard = () => {\r\n\r\n if ((refundType == \"AdditionalPayment\" || refundType === \"\") && shopcartamounttoPay > 0) {\r\n\r\n if (cashlesstotal === 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay);\r\n }\r\n\r\n if (cashlesstotal > 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay - cashlesstotal);\r\n }\r\n }\r\n\r\n if (formfields.billingAddressSame.value) {\r\n billingAddressSameAsAbover();\r\n }\r\n\r\n reseterrorfield();\r\n\r\n requiredFields = BindRequiredFields();\r\n\r\n return requiredFields ? true : false;\r\n }\r\n\r\n const onChangeCountry = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"country\", value === null ? \"\" : value.Country);\r\n onChangeState(event, null);\r\n }\r\n\r\n const onChangeState = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"state\", value === null ? \"\" : value.State);\r\n }\r\n\r\n const onChangeShippingCountry = (event, value) => {\r\n if (value === null) {\r\n actionSetFieldValueState(dispatch, \"shipping_country\", \"\")\r\n actionSetFieldValueState(dispatch, \"shipping_state\", \"\")\r\n }\r\n else\r\n actionSetFieldValueState(dispatch, \"shipping_country\", value.Country);\r\n\r\n onChangeShippingState(event, null);\r\n }\r\n const onChangeShippingState = (event, value) => {\r\n actionSetFieldValueState(dispatch, \"shipping_state\", value === null ? \"\" : value.State);\r\n }\r\n\r\n useEffect(() => {\r\n actionGetCountryAndState(dispatch);\r\n\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (countryandstates && countryandstates.length > 0) {\r\n if (formfields.country.value == \"\")\r\n actionSetFieldValueState(dispatch, \"country\", countryandstates[0].Country);\r\n if (formfields.shipping_country.value == \"\")\r\n actionSetFieldValueState(dispatch, \"shipping_country\", countryandstates[0].Country);\r\n\r\n }\r\n }, [countryandstates]);\r\n\r\n const isShowCountryFields = (columnName) => {\r\n return genfunction.GetValueFromCountryAndState(countryandstates, formfields.country.value, columnName);\r\n }\r\n\r\n const isShowShippingCountryFields = (columnName) => {\r\n return genfunction.GetValueFromCountryAndState(countryandstates, formfields.shipping_country.value, columnName);\r\n }\r\n\r\n const BindRequiredFields = () => {\r\n\r\n if (PhoneNumberMandatory) {\r\n requiredFields[\"phone_number\"] = formfields.phone_number.value.trim();\r\n requiredFields[\"shipping_phone_number\"] = formfields.shipping_phone_number.value;\r\n }\r\n\r\n requiredFields[\"email\"] = formfields.email.value.trim();\r\n if (UseStreetAddressForAVS)\r\n requiredFields[\"address1\"] = formfields.address1.value;\r\n requiredFields[\"country\"] = formfields.country.value;\r\n requiredFields[\"city\"] = formfields.city.value;\r\n\r\n if (isShowCountryFields(\"ShowState\")) {\r\n requiredFields[\"state\"] = formfields.state.value;\r\n }\r\n else {\r\n formfields.state.value = \"0\";\r\n }\r\n\r\n if (isShowCountryFields(\"ShowPostalCode\")) {\r\n requiredFields[\"zip\"] = formfields.zip.value;\r\n }\r\n else {\r\n formfields.zip.value = \"0\";\r\n }\r\n\r\n requiredFields[\"first_name\"] = formfields.first_name.value;\r\n requiredFields[\"last_name\"] = formfields.last_name.value;\r\n\r\n requiredFields[\"shipping_address1\"] = formfields.shipping_address1.value;\r\n requiredFields[\"shipping_city\"] = formfields.shipping_city.value;\r\n\r\n if (isShowShippingCountryFields(\"ShowState\")) {\r\n requiredFields[\"shipping_state\"] = formfields.shipping_state.value;\r\n }\r\n else {\r\n formfields.shipping_state.value = \"0\";\r\n }\r\n\r\n if (isShowShippingCountryFields(\"ShowPostalCode\")) {\r\n requiredFields[\"shipping_zip\"] = formfields.shipping_zip.value;\r\n }\r\n else {\r\n formfields.shipping_zip.value = \"0\";\r\n }\r\n\r\n requiredFields[\"shipping_country\"] = formfields.shipping_country.value;\r\n\r\n if (ShowFullAddressOnCheckout == false) {\r\n requiredFields[\"address1\"] = requiredFields[\"country\"] = requiredFields[\"city\"] = requiredFields[\"state\"] = undefined;\r\n requiredFields[\"shipping_address1\"] = requiredFields[\"shipping_country\"] = requiredFields[\"shipping_city\"] = requiredFields[\"shipping_state\"] = undefined;\r\n }\r\n\r\n if (checkfieldvalidation(requiredFields) == false) { return; }\r\n\r\n if (validateEmail(requiredFields[\"email\"]) == false) {\r\n errorfield(\"email\", \"Please enter a valid email address\", true);\r\n inputreferences['email'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else if (requiredFields[\"phone_number\"] && validatePhoneNum(requiredFields[\"phone_number\"]) == false) {\r\n errorfield(\"phone_number\", \"Please enter a valid phone #\", true);\r\n inputreferences['phone_number'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else if (requiredFields[\"shipping_phone_number\"] && validatePhoneNum(requiredFields[\"shipping_phone_number\"]) == false) {\r\n errorfield(\"shipping_phone_number\", \"Please enter a valid phone #\", true);\r\n inputreferences['shipping_phone_number'].current.focus();\r\n window.scrollBy(0, -65);\r\n return;\r\n }\r\n else {\r\n if (PhoneNumberMandatory) {\r\n requiredFields[\"phone_number\"] = formfields.phone_number.value;\r\n requiredFields[\"shipping_phone_number\"] = formfields.shipping_phone_number.value;\r\n }\r\n\r\n requiredFields[\"address2\"] = formfields.address2.value;\r\n requiredFields[\"shipping_address2\"] = formfields.shipping_address2.value;\r\n\r\n }\r\n\r\n return requiredFields;\r\n }\r\n\r\n\r\n const submitPaymentForm = () => {\r\n\r\n if (shopcartamounttoPay === 0 || props.amounttopay === 0) {\r\n ZeroDollaroRGiftCardOnlyTransCall();\r\n return;\r\n }\r\n\r\n if (CreditCardValue === \"NewCardDetails\") {\r\n\r\n if (ProcessAndConfigurePaymentsWithoutCard()) {\r\n if (genfunction.subproducttotal(events, cashless, null, (showTransFee ? transactionfee.transactionFee[0] : null), null, null, null, [], []) > 0) {\r\n requiredFields[\"month\"] = formfields.MonthSelect.value;\r\n requiredFields[\"year\"] = formfields.YearSelect.value;\r\n paymentsRef.current.SpreedlyTransactionCall(requiredFields);\r\n }\r\n else if ((refundType === 'AdditionalPayment' || refundType === \"\") && shopcartamounttoPay > 0) {\r\n requiredFields[\"month\"] = formfields.MonthSelect.value;\r\n requiredFields[\"year\"] = formfields.YearSelect.value;\r\n paymentsRef.current.SpreedlyTransactionCall(requiredFields);\r\n }\r\n else {\r\n paymentsRef.current.SpreedlyZeroDollarTransactionCall(requiredFields);\r\n }\r\n }\r\n }\r\n else {\r\n if ((refundType == \"AdditionalPayment\" || refundType === \"\") && shopcartamounttoPay > 0) {\r\n\r\n if (cashlesstotal === 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay);\r\n }\r\n\r\n if (cashlesstotal > 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay - cashlesstotal);\r\n }\r\n }\r\n\r\n paymentsRef.current.SpreedlyCardOnFileTransaction();\r\n }\r\n }\r\n\r\n const onClickPayBtn = useDebouncedCallback(submitPaymentForm, 5000, { leading: true });\r\n\r\n const PayByGlobalPayment = () => {\r\n\r\n if ((refundType == \"AdditionalPayment\" || refundType === \"\") && shopcartamounttoPay > 0) {\r\n\r\n if (cashlesstotal === 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay);\r\n }\r\n\r\n if (cashlesstotal > 0) {\r\n actionShopCartSetAdditionalBookingAmount(dispatch, shopcartamounttoPay - cashlesstotal);\r\n }\r\n }\r\n\r\n paymentsRef.current.PayByCardOnFile();\r\n }\r\n\r\n const onClickGPPayBtn = useDebouncedCallback(PayByGlobalPayment, 5000, { leading: true });\r\n\r\n const ManageNonPaymentMethodTrans = () => {\r\n if (CreditCardValue === \"\" && cashlesstotal > 0 && (parseFloat(shopcartamounttoPay) === parseFloat(cashlesstotal.toFixed(2)))) {\r\n ZeroDollaroRGiftCardOnlyTransCall();\r\n }\r\n }\r\n\r\n\r\n const CancelChanges = () => {\r\n props.onClickHandler()\r\n }\r\n\r\n const reseterrorfield = () => {\r\n actionResetFormErrorState(dispatch);\r\n }\r\n\r\n function validateEmail(email) {\r\n var re = new RegExp(EmailRegex);\r\n return re.test(String(email).toLowerCase());\r\n }\r\n\r\n function validatePhoneNum(phoneNum) {\r\n let cusNumber = phoneNum.replace(/\\D/g, \"\");\r\n if (cusNumber != \"\" && cusNumber.length < 10) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n const errorfield = (errorfield, errortext, errorstate) => {\r\n actionSetFormErrorState(dispatch, errorfield, errortext, errorstate)\r\n }\r\n\r\n const checkfieldvalidation = (fields) => {\r\n for (let prop in fields) {\r\n if (fields[prop] == \"\") {\r\n\r\n if (prop === 'phone_number') {\r\n errorfield(prop, PhoneNumberMessage, true);\r\n }\r\n else {\r\n errorfield(prop, prop + \" is required.\", true);\r\n }\r\n\r\n inputreferences[prop].current.focus();\r\n window.scrollBy(0, -65);\r\n return false\r\n }\r\n else {\r\n errorfield(prop, \"\", false)\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n const billingAddressSameAsAbover = () => {\r\n\r\n formfields.shipping_address1.value = formfields.address1.value;\r\n formfields.shipping_address2.value = formfields.address2.value;\r\n formfields.shipping_city.value = formfields.city.value;\r\n formfields.shipping_state.value = formfields.state.value;\r\n formfields.shipping_zip.value = formfields.zip.value;\r\n formfields.shipping_country.value = formfields.country.value;\r\n formfields.shipping_phone_number.value = formfields.phone_number.value;\r\n }\r\n\r\n\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n \r\n \r\n \r\n Credit Card Payment\r\n \r\n \r\n\r\n \r\n \r\n Credit Card Payment\r\n \r\n \r\n\r\n \r\n \r\n Credit Card Payment\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n {CreditCardValue === \"NewCardDetails\" || CreditCardValue === \"UseCardOnFile\" ?\r\n \r\n \r\n \r\n\r\n \r\n\r\n {CreditCardValue === \"NewCardDetails\" ?\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {ShowFullAddressOnCheckout ?\r\n <>\r\n\r\n \r\n\r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) ?\r\n\r\n \r\n {\r\n if (option.hasOwnProperty('Country')) {\r\n return option.Country;\r\n }\r\n return option;\r\n }}\r\n value={formfields.country.value}\r\n renderOption={(option) => (\r\n <>\r\n {errorstate.country.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n {isShowCountryFields(\"ShowState\") ?\r\n \r\n\r\n x.Country == formfields.country.value).map(o => o.hasOwnProperty(\"Picklist\") ? o.Picklist : [])[0]\r\n : []\r\n }\r\n fullWidth={true}\r\n onChange={onChangeState}\r\n getOptionLabel={(option) => {\r\n if (option.hasOwnProperty('State')) {\r\n return option.State;\r\n }\r\n return option;\r\n }}\r\n value={formfields.state.value}\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) =>\r\n ({errorstate.state.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n \r\n : \"\"}\r\n \r\n {isShowCountryFields(\"ShowPostalCode\") ?\r\n\r\n \r\n {ShowFullAddressOnCheckout ?\r\n <>\r\n \r\n changeBillingAddress()}\r\n checked={formfields.billingAddressSame.value}\r\n />\r\n }\r\n label=\"Billing Address same as above\"\r\n />\r\n \r\n\r\n {formfields.billingAddressSame.value == false ?\r\n <>\r\n \r\n Billing Address \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n {genfunction.IsObjectNotNullOrEmptyOrUndefined(countryandstates) ?\r\n\r\n \r\n\r\n {\r\n if (option.hasOwnProperty('Country')) {\r\n return option.Country;\r\n }\r\n return option;\r\n }}\r\n value={formfields.shipping_country.value}\r\n renderOption={(option) => (\r\n <>\r\n {errorstate.shipping_country.errortext} \r\n \r\n : \"\"}\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n {isShowShippingCountryFields(\"ShowState\") ?\r\n\r\n \r\n\r\n x.Country == formfields.shipping_country.value).map(o => o.hasOwnProperty(\"Picklist\") ? o.Picklist : [])[0]\r\n : []\r\n }\r\n fullWidth={true}\r\n onChange={onChangeShippingState}\r\n getOptionLabel={(option) => {\r\n if (option.hasOwnProperty('State')) {\r\n return option.State;\r\n }\r\n return option;\r\n }}\r\n value={formfields.shipping_state.value}\r\n style={{ width: \"100%\" }}\r\n renderInput={(params) =>\r\n ({errorstate.shipping_state.errortext} \r\n \r\n : \"\"}\r\n \r\n\r\n \r\n {isShowShippingCountryFields(\"ShowPostalCode\") ?\r\n\r\n \r\n\r\n \r\n : null}\r\n : \"\"}\r\n \r\n : null}\r\n\r\n {PaymentMethodType === \"Spreedly\" ?\r\n <>\r\n \r\n \r\n\r\n {ApplyTransactionFee && !(props.amounttopay <= 0 || shopcartamounttoPay <= 0)\r\n ?\r\n < Grid item xs={12} >\r\n \r\n {GetTransOptionalText()}\r\n \r\n \r\n : null}\r\n\r\n \r\n \r\n {TermsnConditionCheckBoxText}\r\n { setopentnc(true) }} > Terms and Conditions \r\n \r\n\r\n \r\n\r\n \r\n {tncchecked && EnableAlternateMerchantOnline && (orderProducts && orderProducts.length < 1) ? \r\n\r\n \r\n\r\n \r\n\r\n \r\n Pay\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n\r\n \r\n \r\n\r\n {CreditCardValue === \"UseCardOnFile\" ?\r\n <>\r\n {ApplyTransactionFee && !(props.amounttopay <= 0 || shopcartamounttoPay <= 0)\r\n ?\r\n < Grid item xs={12} >\r\n \r\n {GetTransOptionalText()}\r\n \r\n \r\n : null}\r\n\r\n \r\n \r\n {TermsnConditionCheckBoxText}\r\n { setopentnc(true) }} > Terms and Conditions \r\n \r\n \r\n\r\n \r\n {tncchecked && EnableAlternateMerchantOnline && (orderProducts && orderProducts.length < 1) ? \r\n\r\n \r\n Pay\r\n \r\n \r\n : null}\r\n\r\n \r\n 0 && CreditCardValue == \"NewCardDetails\" ? classes.cancelbtnconfig : classes.cancelbtnconfig10per)}\r\n onClick={CancelChanges} >Cancel Changes\r\n \r\n \r\n }\r\n\r\n \r\n \r\n \r\n \r\n : null}\r\n\r\n {CreditCardValue === \"\" ?\r\n <>\r\n {ApplyTransactionFee && !(props.amounttopay <= 0 || shopcartamounttoPay <= 0)\r\n ?\r\n < Grid item xs={12} >\r\n \r\n {GetTransOptionalText()}\r\n \r\n \r\n : null}\r\n\r\n \r\n \r\n {TermsnConditionCheckBoxText}\r\n { setopentnc(true) }} > Terms and Conditions \r\n \r\n \r\n\r\n \r\n 0)}\r\n variant=\"contained\" className={classes.primarycolor + \" \" + classes.box95per} onClick={ManageNonPaymentMethodTrans} >Pay\r\n \r\n\r\n \r\n Cancel Changes\r\n \r\n \r\n :\r\n null\r\n }\r\n\r\n { setopentnc(false) }}> \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CreditCardPayment;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Container, Grid, Typography, TextField, Hidden } from '@material-ui/core';\r\nimport CreditCardPayment from '../components/CreditCardPayment';\r\nimport { genfunction } from '../../../helpers';\r\nimport { actionAddGiftCardHold, actionResetGiftCardHoldState, actionRecalculateGiftCardHold } from 'actions';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { actionShopCardAddGiftCard, actionShopCartSetMmbAmountToPay, actionShopCartSetEnteredAmountToPay } from 'actions';\r\nimport { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';\r\nimport { withRouter } from 'react-router';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../../actions/actionAppLoader';\r\n\r\nconst { AmountToPayLength, Currency, RecaptchaV3Client } = window['runConfig'];\r\n\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n }, tourheaderboxMobView: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '80px'\r\n }, hideGrid: {\r\n display: 'none'\r\n }\r\n}));\r\n\r\nconst MakePayment = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const [giftCardno, setgiftCardno] = useState(\"\");\r\n const [errormsg, seterrormsg] = useState(\"\");\r\n const { GiftCardHold, GiftCardHoldLoading, GiftCardHoldError } = useSelector(state => state.reducerGiftCardHold);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n const currentDateEvent = useSelector(state => state.reducerExtraItems.extraItem);\r\n const managebkngTicketsModify = useSelector(state => state.reducerShopCart.managebookingticketsmodification);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n let shopcartamounttoPay = useSelector(state => state.reducerShopCart.mmbAmountToPay);\r\n let refundType = useSelector(state => state.reducerShopCart.refundType);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n let enteredAmountToPay = useSelector(state => state.reducerShopCart.enteredAmountToPay);\r\n\r\n const [amounttopayTxtBox, setamounttopayTxtBox] = useState(0);\r\n\r\n let amountaftercoupon = genfunction.subproducttotal(cartEvents, null, null, null, null, null, null, [], []);\r\n\r\n const CheckGiftCard = (giftcardNo) => {\r\n if (shopcartamounttoPay <= 0) {\r\n seterrormsg('Please add item in cart before applying Giftcard.')\r\n }\r\n else if (giftCardno == '') {\r\n seterrormsg('Please enter Giftcard number.')\r\n }\r\n else {\r\n actionShopCartSetMmbAmountToPay(dispatch, shopcartamounttoPay);\r\n actionAddGiftCardHold(dispatch, giftcardNo);\r\n setgiftCardno('');\r\n }\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n actionResetGiftCardHoldState(dispatch);\r\n setgiftCardno('');\r\n seterrormsg('');\r\n }\r\n\r\n const openerrorpopup = () => {\r\n return (errormsg != \"\")\r\n }\r\n\r\n\r\n //Gift Card Handling\r\n\r\n useEffect(() => {\r\n seterrormsg(GiftCardHoldError)\r\n }, [GiftCardHoldError]);\r\n\r\n useEffect(() => {\r\n if (GiftCardHoldLoading)\r\n actionStartAppLoader(dispatch)\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [GiftCardHoldLoading]);\r\n\r\n useEffect(() => {\r\n if (GiftCardHold.GiftcardHoldRef)\r\n ValidateAndAddGiftCard(GiftCardHold)\r\n }, [GiftCardHold]);\r\n\r\n const ValidateAndAddGiftCard = (giftcardholdresponse) => {\r\n if (giftcardholdresponse.HoldAmount == 0) {\r\n seterrormsg('Giftcard is already consumed');\r\n }\r\n else {\r\n actionShopCardAddGiftCard(dispatch, giftcardholdresponse);\r\n actionResetGiftCardHoldState(dispatch);\r\n }\r\n }\r\n useEffect(() => {\r\n let total;\r\n let isTransFeeApplicable = showTransFee && transactionfee.transactionFee[0] && transactionfee.transactionFee[0].PriceIsAPercentage ? transactionfee.transactionFee[0] : undefined;\r\n\r\n if (cashlesstotal > 0 && isTransFeeApplicable) {\r\n total = AmountToPayCalCulation();\r\n if (parseFloat(total) === 0)\r\n actionShopCartSetMmbAmountToPay(dispatch, enteredAmountToPay);\r\n else\r\n actionShopCartSetMmbAmountToPay(dispatch, genfunction.AddCashlessAndAdditionalPayment(cashless, parseFloat(total)));\r\n }\r\n\r\n }, [cashless]);\r\n\r\n useEffect(() => {\r\n RecalculationGiftCard();\r\n }, [showTransFee])\r\n\r\n const RecalculationGiftCard = () => {\r\n if (enteredAmountToPay > 0 && cashless.length > 0) {\r\n actionRecalculateGiftCardHold(dispatch);\r\n }\r\n }\r\n\r\n const totalpaid = () => {\r\n let total = 0;\r\n let actualTotal = 0;\r\n let newTotal = 0;\r\n let eventTotal = cartEvents && cartEvents.length ? amountaftercoupon : currentDateEvent.TotalAmount ? currentDateEvent.TotalAmount : 0;\r\n\r\n if (props.booking && props.booking && props.booking.BookingPayments && props.booking.BookingPayments.length > 0 && props.booking.BookingProducts\r\n && props.booking.BookingProducts.length > 0) {\r\n\r\n actualTotal = props.booking.BookingProducts.map(({ ProductLinePriceInclTax }) => ProductLinePriceInclTax).reduce((sum, i) => sum + i, 0);\r\n if (managebkngTicketsModify) {\r\n props.booking.BookingProducts.map(prod => {\r\n if (prod.hasOwnProperty('isModify') && prod.isModify) {\r\n newTotal += prod.newQuantity * prod.Price;\r\n }\r\n else {\r\n newTotal += prod.ProductLinePriceInclTax;\r\n }\r\n })\r\n }\r\n total = parseFloat(((actualTotal - newTotal) * 100) / 100);\r\n }\r\n\r\n return (eventTotal - total).toFixed(2);\r\n\r\n }\r\n\r\n const totalbookingcost = () => {\r\n let total = 0;\r\n if (props.booking && props.booking.hasOwnProperty('BookingProducts') && props.booking.BookingProducts.length > 0) {\r\n total = props.booking.BookingProducts.map(({ ProductLinePriceInclTax }) => ProductLinePriceInclTax).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const totalbookingpaid = () => {\r\n let totalpaid = 0;\r\n\r\n if (props.booking && props.booking.hasOwnProperty('BookingPayments') && props.booking.BookingPayments.length > 0) {\r\n totalpaid = props.booking.BookingPayments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return totalpaid;\r\n }\r\n\r\n useEffect(() => {\r\n if (managebkngTicketsModify || refundType === 'AdditionalPayment' || (refundType === \"\" && shopcartamounttoPay > 0)) {\r\n setamounttopayTxtBox(parseFloat(enteredAmountToPay > 0 ? enteredAmountToPay : shopcartamounttoPay).toFixed(2));\r\n actionShopCartSetMmbAmountToPay(dispatch, genfunction.Rounded(shopcartamounttoPay));\r\n }\r\n else {\r\n\r\n setamounttopayTxtBox(parseFloat(totalpaid()));\r\n actionShopCartSetMmbAmountToPay(dispatch, parseFloat(totalpaid()));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n actionShopCartSetEnteredAmountToPay(dispatch, parseFloat(amounttopayTxtBox));\r\n }, [amounttopayTxtBox])\r\n\r\n const amounttopayTxtUpdate = (event) => {\r\n\r\n let totalcst = totalbookingcost();\r\n let totalpd = totalbookingpaid();\r\n let txtBoxValue = parseFloat(event.target.value);\r\n\r\n if (txtBoxValue > 0 && (txtBoxValue <= genfunction.Rounded(totalcst - totalpd))) {\r\n\r\n setamounttopayTxtBox(genfunction.Rounded(txtBoxValue));\r\n\r\n let transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], txtBoxValue, cashlesstotal);\r\n actionShopCartSetMmbAmountToPay(dispatch, showTransFee ? genfunction.Rounded(txtBoxValue + transFee) : genfunction.Rounded(txtBoxValue));\r\n }\r\n else {\r\n setamounttopayTxtBox(0);\r\n actionShopCartSetMmbAmountToPay(dispatch, 0);\r\n }\r\n }\r\n\r\n const AmountToPayCalCulation = () => {\r\n let total = 0;\r\n if (refundType === \"GiftCardRefund\" || refundType === \"CreditCardRefund\" || refundType === \"CancelBooking\" || refundType === \"CancelGiftCardRefund\") {\r\n total = shopcartamounttoPay;\r\n }\r\n else if (refundType === \"AdditionalPayment\" || (refundType === \"\" && shopcartamounttoPay > 0)) {\r\n\r\n if (showTransFee) {\r\n\r\n let transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], enteredAmountToPay, cashlesstotal);\r\n total = genfunction.Rounded(enteredAmountToPay + transFee) - cashlesstotal;\r\n\r\n }\r\n else {\r\n\r\n total = enteredAmountToPay - cashlesstotal;\r\n }\r\n\r\n }\r\n else {\r\n total = shopcartamounttoPay - cashlesstotal;\r\n }\r\n\r\n return parseFloat(total).toFixed(2);\r\n }\r\n\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n \r\n \r\n \r\n \r\n \r\n {props.booking !== undefined && props.booking.hasOwnProperty('BookingName') ? props.booking.BookingName : ''}\r\n \r\n \r\n\r\n \r\n \r\n {props.booking !== undefined && props.booking.hasOwnProperty('BookingName') ? props.booking.BookingName : ''}\r\n \r\n \r\n\r\n \r\n \r\n {props.booking !== undefined && props.booking.hasOwnProperty('BookingName') ? props.booking.BookingName : ''}\r\n \r\n \r\n\r\n \r\n \r\n Make Payment for Booking ID {props.booking && props.booking.hasOwnProperty('BookingID') ? props.booking.BookingID : 0}\r\n \r\n \r\n\r\n \r\n \r\n Make Payment for Booking ID {props.booking && props.booking.hasOwnProperty('BookingID') ? props.booking.BookingID : 0}\r\n \r\n \r\n\r\n \r\n \r\n Make Payment for Booking ID {props.booking && props.booking.hasOwnProperty('BookingID') ? props.booking.BookingID : 0}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(totalbookingcost())}\r\n \r\n \r\n\r\n \r\n \r\n Total Paid : {genfunction.ccyFormat(totalbookingpaid())}\r\n \r\n \r\n\r\n \r\n \r\n Total Paid : {genfunction.ccyFormat(totalbookingpaid())}\r\n \r\n \r\n\r\n \r\n \r\n Total Paid : {genfunction.ccyFormat(totalbookingpaid())}\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n Amount to Pay :\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay :\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay :\r\n \r\n \r\n\r\n\r\n {Currency} \r\n \r\n\r\n \r\n \r\n \r\n Apply a Gift Card\r\n \r\n \r\n\r\n \r\n \r\n Apply a Gift Card\r\n \r\n \r\n\r\n \r\n \r\n Apply a Gift Card\r\n \r\n \r\n\r\n\r\n\r\n\r\n \r\n {\r\n setgiftCardno(event.target.value);\r\n }}\r\n />\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n To Pay\r\n \r\n \r\n\r\n \r\n \r\n To Pay\r\n \r\n \r\n\r\n \r\n \r\n To Pay\r\n \r\n \r\n\r\n\r\n \r\n \r\n Gift Card Applied : {cashlesstotal > 0 ? genfunction.ccyFormat(cashlesstotal) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Gift Card Applied : {cashlesstotal > 0 ? genfunction.ccyFormat(cashlesstotal) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Gift Card Applied : {cashlesstotal > 0 ? genfunction.ccyFormat(cashlesstotal) : genfunction.ccyFormat(0)}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {Currency} {AmountToPayCalCulation()}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {Currency} {AmountToPayCalCulation()}\r\n \r\n \r\n\r\n \r\n \r\n Amount to Pay : {Currency} {AmountToPayCalCulation()}\r\n \r\n \r\n\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default withRouter(MakePayment);\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Typography, Button, Card, CardHeader, CardContent, Table, TableRow, TableCell, Grid } from '@material-ui/core';\r\nimport { CheckCircleOutlineOutlined } from '@material-ui/icons';\r\nimport { genfunction } from '../../../helpers'\r\nimport theme from '../../../theme'\r\nimport DataAccess from '../../../api/constants';\r\nimport Moment from 'moment';\r\nimport { actionResetBookingTypes } from 'actions';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nconst { BookingCancelMsg, BookingSuccessfullyUpdate, CustomMessageforconfirmpage, BookingTypeBarcodeHeader, TransactionCompleteTitle, ConfirmationReceiptMessage,\r\n ShowReadableBarcode } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n center: {\r\n position: \"relative\",\r\n margin: \"auto\",\r\n maxWidth: \"550px\"\r\n },\r\n diplaynone: {\r\n display: \"none\"\r\n },\r\n textaligncenter: {\r\n textAlign: \"center\"\r\n },\r\n headerbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n textAlign: \"left\"\r\n },\r\n footerbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n textAlign: \"left\",\r\n padding: \"16px\"\r\n },\r\n headertext: {\r\n marginTop: \"8px\",\r\n marginRight: \"10px\"\r\n },\r\n image: {\r\n border: \"5px solid white\"\r\n },\r\n receiptfileds: {\r\n textAlign: \"left\"\r\n },\r\n ReceiptTableCell: {\r\n 'border-bottom': '0px solid #000 !important',\r\n fontSize: '16px !important',\r\n padding: '5px !important'\r\n }\r\n\r\n}));\r\n\r\nconst PaymentCompletePage = props => {\r\n const { isshow, transaction } = props;\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n const Payment = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n\r\n useEffect(() => {\r\n if (props.mmbHasPaid && transaction.hasOwnProperty('Products') == false) {\r\n onClickHandler();\r\n }\r\n }, [])\r\n\r\n const onClickHandler = () => {\r\n actionResetBookingTypes(dispatch);\r\n props.onClickHandler()\r\n }\r\n\r\n const ShowWebDisplayName = (tourEvent) => {\r\n if (!tourEvent || tourEvent || tourEvent.BookingTypeID === undefined) { return ''; }\r\n const bookType = bookingTypes.filter(x => x.BookingTypeID == tourEvent.BookingTypeID)[0];\r\n return bookType ? tourEvent.EventName : '';\r\n }\r\n\r\n const groupbyTourEvent = () => {\r\n let products = [];\r\n transaction.Products.filter(x => x.Quantity > 0).map(item => {\r\n let itemobj = products.find(x => x.TourEventID == item.TourEventID);\r\n if (itemobj == null || itemobj == undefined) {\r\n if (item.TourEventID !== undefined) {\r\n products.push(item);\r\n }\r\n }\r\n })\r\n return products;\r\n }\r\n\r\n const GetGiftCards = () => {\r\n let giftcards = transaction.Products.filter(x => x.Giftcards && x.Giftcards.length > 0);\r\n return giftcards;\r\n }\r\n\r\n const getEvent = (toureventid) => {\r\n if (toureventid)\r\n return transaction.Events.find(x => x.TourEventID == toureventid)\r\n }\r\n\r\n const VisibleStartAndEndTime = (tourEvent) => {\r\n\r\n let time = \"\";\r\n if (tourEvent === undefined || tourEvent.BookingTypeID === undefined) {\r\n return '';\r\n }\r\n\r\n const bookType = bookingTypes.filter(x => x.BookingTypeID == tourEvent.BookingTypeID)[0];\r\n\r\n if (bookType) {\r\n if (bookType.ShowStartTime && bookType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventStartDateTime) + ' - ' + Moment(tourEvent.EventEndDateTime).format('hh:mm a');\r\n }\r\n\r\n if (bookType.ShowStartTime && !bookType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventStartDateTime);\r\n }\r\n\r\n if (!bookType.ShowStartTime && bookType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormat(tourEvent.EventEndDateTime);\r\n }\r\n\r\n if (!bookType.ShowStartTime && !bookType.ShowEndTime) {\r\n time += genfunction.GetEventDateReceiptFormatwithoutTime(tourEvent.EventStartDateTime);\r\n }\r\n }\r\n\r\n return time;\r\n }\r\n\r\n const TotalPaid = () => {\r\n let total = 0;\r\n if (transaction) {\r\n if (transaction.Payments && transaction.Payments.length > 0) {\r\n total = transaction.Payments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n if ((props.refundType === 'GiftCardRefund' || props.refundType === 'CancelGiftCardRefund') && transaction.Products && transaction.Products.length > 0 && transaction.Products.filter(x => x.Giftcards !== undefined).length > 0) {\r\n total -= transaction.Products.filter(x => x.Giftcards !== undefined).map(({ LinePriceIncTax }) => LinePriceIncTax).reduce((sum, i) => sum + i, 0);\r\n }\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const GetTourName = () => {\r\n let tourname = \"\";\r\n\r\n if (Payment.Events && Payment.Events.length > 0) {\r\n tourname = Payment.Events[0].EventName;\r\n }\r\n\r\n if (tourname.length < 1 && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty(\"BookingName\")) {\r\n tourname = reducerBooking.booking[0].BookingName;\r\n }\r\n\r\n return tourname;\r\n }\r\n\r\n const GetTourDetails = () => {\r\n let tourdetails = \"\";\r\n let bookingID = reducerBooking.booking[0] ? reducerBooking.booking[0].BookingTypeID : 0;\r\n\r\n if (Payment.Events && Payment.Events.length > 0) {\r\n bookingID = Payment.Events[0].BookingTypeID;\r\n }\r\n\r\n if (transaction && transaction.Products && transaction.Events.length > 0 && transaction.Events.filter(x => x.BookingTypeID === bookingID).length > 0) {\r\n tourdetails = transaction.Events.filter(x => x.BookingTypeID === bookingID)[0].EventStartDateTime;\r\n }\r\n\r\n if (transaction && transaction.Products && transaction.Events.length < 1 && reducerBooking.booking[0].hasOwnProperty('EventStartDateTime')) {\r\n tourdetails = reducerBooking.booking[0].EventStartDateTime;\r\n }\r\n\r\n return tourdetails;\r\n }\r\n\r\n const GetBookingPrevPaid = () => {\r\n let bookingPaid = 0;\r\n\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].BookingPayments && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n bookingPaid = reducerBooking.booking[0].BookingPayments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0)\r\n }\r\n\r\n return bookingPaid;\r\n }\r\n\r\n if (transaction.hasOwnProperty('Products') == false)\r\n return (\"\");\r\n else {\r\n\r\n let amounts = genfunction.GetProdsTotalAmount(transaction.Products)\r\n\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n
\r\n \r\n \r\n {FreeBookingMessage1}\r\n \r\n
\r\n\r\n {FreeBookingMessage2}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default FreeTicketForm;","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, InputAdornment, InputLabel, FormControl, Select, MenuItem, FormHelperText } from '@material-ui/core';\r\nimport { actionResetFormErrorState, actionSetFormErrorState, actionSetFieldValueState } from 'actions';\r\nimport CryptoENC from 'crypto-js/enc-utf8';\r\nimport CryptoAES from 'crypto-js/aes'\r\nimport { useGoogleReCaptcha } from 'react-google-recaptcha-v3';\r\nimport theme from '../../theme';\r\nimport { CreditCard, VpnKey, DateRange } from '@material-ui/icons';\r\nimport { genfunction } from 'helpers';\r\nimport { actionPostPaymentTransaction } from 'actions';\r\n\r\nconst { spreedlyEnvironment, RecaptchaV3Client, StreetAddressTypeID, BillingAddressTypeID, UseStreetAddressForAVS } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n iframebox: {\r\n marginTop: \"-13px\",\r\n height: \"31px\"\r\n },\r\n iconforiframe: {\r\n marginTop: \"18px\"\r\n },\r\n displaynone: {\r\n display: \"none\"\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n}));\r\n\r\nlet iframeinputstyle = \"font-family: Roboto, Helvetica, Arial, sans-serif; padding: 4px 5px 4px 30px; font-size: 16px;\"\r\n\r\n\r\nconst { forwardRef, useRef, useImperativeHandle } = React;\r\n\r\nconst Spreedly = forwardRef((props, ref) => {\r\n\r\n const customer = useSelector(state => state.reducerCustomer);\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n let booking = {};\r\n\r\n if (reducerBooking.booking[0] != null) {\r\n booking = reducerBooking.booking[0];\r\n }\r\n\r\n\r\n useImperativeHandle(ref, () => ({\r\n\r\n TransactionCall(requiredFields) {\r\n requiredFields[\"eligible_for_card_updater\"] = 'false';\r\n window.Spreedly.tokenizeCreditCard(requiredFields);\r\n },\r\n ZeroDollarTransactionCall(requiredFields) {\r\n\r\n var client = GetClient(requiredFields[\"first_name\"], requiredFields[\"last_name\"],\r\n requiredFields[\"email\"], UseStreetAddressForAVS ? requiredFields[\"address1\"] : '',\r\n requiredFields[\"address2\"], requiredFields[\"city\"],\r\n requiredFields[\"state\"], requiredFields[\"zip\"], requiredFields[\"country\"], requiredFields[\"phone_number\"], requiredFields[\"shipping_address1\"], requiredFields[\"shipping_address2\"],\r\n requiredFields[\"shipping_city\"], requiredFields[\"shipping_state\"], requiredFields[\"shipping_zip\"], requiredFields[\"shipping_country\"], requiredFields[\"shipping_phone_number\"]);\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: null }, client, recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: null }, client, \"\");\r\n }\r\n },\r\n CardOnFileTransaction() {\r\n\r\n let cardonfileToken = booking.hasOwnProperty('PaymentToken') && booking.PaymentToken.length > 0 ?\r\n booking.PaymentToken.substring(9, booking.PaymentToken.length) : '';\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: cardonfileToken }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: cardonfileToken }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n },\r\n\r\n ReloadSpreedly() {\r\n window.Spreedly.reload();\r\n },\r\n PaymentLoaded() {\r\n return window.Spreedly;\r\n }\r\n\r\n }));\r\n\r\n\r\n //const Spreedly = props => {\r\n\r\n const dispatch = useDispatch();\r\n const environmentKey = CryptoAES.decrypt(spreedlyEnvironment, '1271').toString(CryptoENC);\r\n const { executeRecaptcha } = useGoogleReCaptcha();\r\n const classes = useStyles();\r\n\r\n const errorstate = useSelector(state => state.reducerFormError.errorstate);\r\n const formfields = useSelector(state => state.reducerFormError.formfields);\r\n\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n\r\n useEffect(() => {\r\n const script = document.createElement(\"script\");\r\n script.src = \"https://core.spreedly.com/iframe/iframe-v1.min.js\";\r\n script.async = true;\r\n document.body.appendChild(script);\r\n script.onload = () => scriptLoaded();\r\n }, []);\r\n\r\n const GetClient = (firstName, lastName, email, street1, stree2, city, state, postCode, country, mobilePhone, shipping_address1, shipping_address2, shipping_city, shipping_state,\r\n shipping_zip, shipping_country, shipping_phone_number) => {\r\n\r\n var client = [\r\n {\r\n \"CustomerType\": \"Individual\",\r\n \"FirstName\": firstName,\r\n \"LastName\": lastName,\r\n \"CreatedAsGuest\": true,\r\n \"GuestEmail\": email,\r\n \"DateOfBirth\": null,\r\n \"CustomerAddress\": [\r\n {\r\n \"IsPrimaryAddress\": true,\r\n \"AddressTypeID\": StreetAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": street1,\r\n \"Street2\": stree2,\r\n \"CitySuburb\": city,\r\n \"State\": state,\r\n \"Postcode\": postCode,\r\n \"Country\": country,\r\n \"MobilePhone\": mobilePhone\r\n },\r\n {\r\n \"IsPrimaryAddress\": false,\r\n \"AddressTypeID\": BillingAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": shipping_address1,\r\n \"Street2\": shipping_address2,\r\n \"CitySuburb\": shipping_city,\r\n \"State\": shipping_state,\r\n \"Postcode\": shipping_zip,\r\n \"Country\": shipping_country,\r\n \"MobilePhone\": shipping_phone_number\r\n }\r\n ],\r\n \"LinkedIndividuals\": []\r\n }\r\n ]\r\n\r\n return client;\r\n }\r\n\r\n const reseterrorfield = () => {\r\n window.Spreedly.setStyle(\"number\", iframeinputstyle + \"width:75%;border-bottom: 1px solid gray;\")\r\n window.Spreedly.setStyle(\"cvv\", iframeinputstyle + \"width:25%;border-bottom: 1px solid gray;\")\r\n actionResetFormErrorState(dispatch);\r\n }\r\n\r\n const errorfield = (errorfield, errortext, errorstate) => {\r\n actionSetFormErrorState(dispatch, errorfield, errortext, errorstate)\r\n\r\n if (errorfield === \"number\")\r\n window.Spreedly.setStyle(\"number\", iframeinputstyle + \"width:75%;border-bottom: 2px solid \" + theme.palette.error.main + \"; \");\r\n else if (errorfield === \"cvv\")\r\n window.Spreedly.setStyle(\"cvv\", iframeinputstyle + \"width:25%;border-bottom: 2px solid \" + theme.palette.error.main + \"; \");\r\n }\r\n\r\n const scriptLoaded = () => {\r\n\r\n window.Spreedly.on(\"ready\", () => {\r\n window.Spreedly.setFieldType(\"cvv\", \"text\");\r\n window.Spreedly.setFieldType(\"number\", \"text\");\r\n window.Spreedly.setNumberFormat(\"prettyFormat\");\r\n window.Spreedly.setStyle(\"number\", iframeinputstyle + \"width:75%;border-bottom: 1px solid gray;\")\r\n window.Spreedly.setStyle(\"cvv\", iframeinputstyle + \"width:25%;border-bottom: 1px solid gray;\")\r\n });\r\n\r\n window.Spreedly.on('errors', (errors) => {\r\n for (var i = 0; i < errors.length; i++) {\r\n if (errors[i].key === \"errors.blank\" || errors[i].key === \"errors.invalid\" ||\r\n errors[i].key === \"errors.blank_card_type\" || errors[i].key === \"errors.expired\") {\r\n errorfield(errors[i].attribute, errors[i].message, true);\r\n window.Spreedly.transferFocus(errors[i].attribute);\r\n }\r\n else {\r\n window.Spreedly.transferFocus(errors[i].attribute);\r\n }\r\n };\r\n });\r\n\r\n window.Spreedly.on('paymentMethod', (token, pmData) => {\r\n\r\n reseterrorfield();\r\n\r\n var client = GetClient(pmData.first_name, pmData.last_name, pmData.email, UseStreetAddressForAVS ? pmData.address1 : '',\r\n pmData.address2, pmData.city, pmData.state, pmData.zip, pmData.country, pmData.phone_number, pmData.shipping_address1, pmData.shipping_address2, pmData.shipping_city, pmData.shipping_state,\r\n pmData.shipping_zip, pmData.shipping_country, pmData.shipping_phone_number);\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: token, cardtype: pmData.card_type, cardnumber: pmData.number }, client, recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: token, cardtype: pmData.card_type, cardnumber: pmData.number }, client, \"\");\r\n }\r\n });\r\n\r\n window.Spreedly.init(environmentKey, {\r\n \"numberEl\": \"spreedly-number\",\r\n \"cvvEl\": \"spreedly-cvv\"\r\n });\r\n\r\n\r\n window.Spreedly.on('fieldEvent', function (name, type, activeEl, inputProperties) {\r\n if ((name == \"cvv\" || name == \"number\") && (type == \"input\" || type == \"mouseout\" || type == \"tab\" || type == \"shiftTab\")) {\r\n window.Spreedly.validate();\r\n }\r\n });\r\n\r\n\r\n window.Spreedly.on('validation', function (inputProperties) {\r\n\r\n if (inputProperties && inputProperties.numberLength > 0) {\r\n if (inputProperties.cvvLength < 1) {\r\n errorfield(\"cvv\", \"cvv is required\", true);\r\n }\r\n else if (!inputProperties.validCvv) {\r\n errorfield(\"cvv\", \"cvv entered is not valid\", true);\r\n }\r\n else {\r\n errorfield(\"cvv\", \"\", false);\r\n }\r\n }\r\n else {\r\n errorfield(\"cvv\", \"\", false);\r\n }\r\n });\r\n }\r\n\r\n const fieldhandleChange = (event) => {\r\n\r\n if (event.target.name === \"MonthSelect\" || event.target.name === \"YearSelect\")\r\n actionSetFieldValueState(dispatch, event.target.name, event.target.value);\r\n else\r\n actionSetFieldValueState(dispatch, event.currentTarget.name, event.target.value);\r\n };\r\n\r\n const paymentTokenHandler = (token, client, recaptchaToken) => {\r\n actionPostPaymentTransaction(dispatch, token, client, recaptchaToken);\r\n }\r\n\r\n return (\r\n \r\n
\r\n {/* className={showFreeTicket || paymenttranstate.loading ? classes.displaynone : classes.visible} */}\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n Month\r\n \r\n {errorstate.month.errortext} \r\n \r\n \r\n\r\n \r\n \r\n \r\n Year\r\n \r\n {errorstate.year.errortext} \r\n \r\n \r\n\r\n \r\n\r\n
\r\n );\r\n});\r\n\r\nexport default Spreedly;\r\n","import React from 'react'\r\nimport { useSelector } from 'react-redux';\r\nimport { Typography } from '@material-ui/core';\r\nimport { genfunction } from 'helpers';\r\n\r\nconst { Merchant1, Merchant2 } = window['runConfig'];\r\n\r\nconst MultiPayments = () => {\r\n\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const manageMyBooking = useSelector(state => state.reducerShopCart.managemybooking);\r\n const enteredAmountToPay = useSelector(state => state.reducerShopCart.enteredAmountToPay);\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n let booking = reducerBooking && reducerBooking.booking[0] ? reducerBooking.booking[0] : null;\r\n\r\n let merchantTotals = 0;\r\n let merchant1Total = 0;\r\n let merchant2Total = 0;\r\n\r\n\r\n merchantTotals = manageMyBooking ?\r\n genfunction.CalculateMultiMerchantTotalForMMB(events, cashless, (showTransFee ? transactionfee.transactionFee[0] : null), enteredAmountToPay, booking)\r\n : genfunction.CalculateMultiMerchantTotal(events, gaTickets, membershipPackages, giftcards.giftcards, donation, (showTransFee ? transactionfee.transactionFee[0] : null), cashless, donationProducts);\r\n\r\n merchant1Total = merchantTotals.merchant1Total;\r\n merchant2Total = merchantTotals.merchant2Total;\r\n\r\n return (\r\n \r\n \r\n Card Number\r\n \r\n \r\n \r\n {errorstate.number.errortext} \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n CVV\r\n \r\n \r\n \r\n 0}>{errorstate.cvv.errortext} \r\n
\r\n \r\n\r\n
\r\n \r\n {merchant1Total > 0 && merchant2Total > 0 ?\r\n <>\r\n The total\r\n {' ' + (manageMyBooking ? genfunction.ccyFormat(merchant1Total + merchant2Total) : genfunction.ccyFormat(genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gaTickets, giftcards.giftcards, orderProducts, donationProducts))) + ' '}\r\n will be charged in two payments: \r\n
\r\n{Merchant1}: {' ' + genfunction.ccyFormat(merchant1Total) + ' '} \r\n {Merchant2}: {' ' + genfunction.ccyFormat(merchant2Total) + ' '} \r\n :\r\n\r\n merchant1Total > 0 || merchant2Total > 0 ?\r\n\r\n \r\n The total\r\n {' ' + (manageMyBooking ? genfunction.ccyFormat(merchant1Total + merchant2Total) : genfunction.ccyFormat(genfunction.subproducttotal(events, cashless, donation, (showTransFee ? transactionfee.transactionFee[0] : null), membershipPackages, gaTickets, giftcards.giftcards, orderProducts, donationProducts))) + ' '}\r\n will appear on your statement as {merchant1Total > 0 ? Merchant1 : Merchant2} \r\n : null\r\n\r\n }\r\n
\r\n )\r\n}\r\n\r\nexport default MultiPayments\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Button, Checkbox, FormHelperText, FormControl, Grid, InputAdornment, InputLabel, Link, MenuItem, Select, Typography } from '@material-ui/core';\r\nimport { makeStyles, useTheme } from '@material-ui/styles';\r\nimport { CreditCard, VpnKey, DateRange, Label } from '@material-ui/icons';\r\nimport { actionPostPaymentTransaction, actionShopCartShowTransFee, actionShopCartSetMmbAmountToPay } from 'actions';\r\nimport { useGoogleReCaptcha } from 'react-google-recaptcha-v3';\r\nimport CryptoAES from 'crypto-js/aes'\r\nimport CryptoENC from 'crypto-js/enc-utf8';\r\nimport { actionSetFormErrorState } from 'actions';\r\nimport ErrorHandling from '../ErrorHandling/ErrorHandling';\r\nimport { red } from '@material-ui/core/colors';\r\nimport './Globalpayments.css';\r\nimport DialogeBox from '../DialogeBox/DialogeBox';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport MultiPayments from '../../views/Checkout/components/MultiPayments';\r\nimport { genfunction } from 'helpers'\r\n\r\nconst { BillingAddressTypeID, GPCardNumberErrorMsg, GPCVVErrorMsg, GPExpiryErrorMsg, GlobalPaymentsApiKey,\r\n GlobalPaymentsEnvironment, GlobalPaymentsBaseURL, GlobalPaymentsEnableAutocomplete, TermsnConditionCheckMsg,\r\n StreetAddressTypeID, RecaptchaV3Client, TermsnConditionCheckBoxText, UseStreetAddressForAVS, EnableAlternateMerchantOnline, ApplyTransactionFee } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n heading: {\r\n marginTop: \"-18px\",\r\n color: \"#000000\",\r\n \"font-size\": \"11px\",\r\n \"font-family\": \"Roboto, Helvetica, Arial, sans-serif\",\r\n \"font-weight\": \"400\",\r\n \"letter-spacing\": \"-0.05px\",\r\n \"transform\": \"translate(0, 1.5px) scale(0.75)\",\r\n \"transform-origin\": \"top left\"\r\n },\r\n iconforiframe: {\r\n \"z-index\": \"1 !important\",\r\n \"margin-top\": \"20px\"\r\n },\r\n box100per: {\r\n \"margin-top\": \"-72px\"\r\n },\r\n mmbfakedisableButton: {\r\n \"margin-top\": \"-72px\"\r\n },\r\n errorTxt: {\r\n color: \"#e53935\"\r\n },\r\n errorInput: {\r\n border: red\r\n },\r\n hidden: {\r\n visibility: \"hidden\"\r\n },\r\n visible: {\r\n visibility: \"visible\"\r\n },\r\n FullWidth: {\r\n width: \"100%\"\r\n },\r\n PayBtnDisable: {\r\n 'pointer-events': 'none !important'\r\n },\r\n PayBtnUnDisable: {\r\n 'pointer-events': 'auto !important'\r\n }\r\n\r\n}));\r\n\r\n\r\nconst { forwardRef, useRef, useImperativeHandle } = React;\r\n\r\nconst GlobalPayments = forwardRef((props, ref) => {\r\n\r\n useImperativeHandle(ref, () => ({\r\n\r\n refPayByCardOnFile() {\r\n PayByCardOnFile();\r\n },\r\n refReload() {\r\n Reload();\r\n }\r\n\r\n }));\r\n\r\n\r\n let val = 0;\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const dispatch = useDispatch();\r\n const { executeRecaptcha } = useGoogleReCaptcha();\r\n\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const errorstate = useSelector(state => state.reducerFormError.errorstate);\r\n const formfields = useSelector(state => state.reducerFormError.formfields);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const customer = useSelector(state => state.reducerCustomer);\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const showTransFee = useSelector(state => state.reducerShopCart.showTransactionFee);\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n let shopcartamounttoPay = useSelector(state => state.reducerShopCart.mmbAmountToPay);\r\n const refundType = useSelector(state => state.reducerShopCart.refundType);\r\n let enteredAmountToPay = useSelector(state => state.reducerShopCart.enteredAmountToPay);\r\n const PaymentInfoError = useSelector(state => state.reducerPaymentTransaction.PaymentInfoError);\r\n const stopUserToPurchase = useSelector(state => state.reducerGlobal.stopUserToPurchase);\r\n\r\n\r\n const [showPayBtn, setShowPayBtn] = useState(false);\r\n const [tncchecked, settncChecked] = React.useState(false);\r\n const [opentnc, setopentnc] = useState(false);\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [cardDetails, setCardDetails] = useState({});\r\n\r\n let cardNumberRef = useRef();\r\n let cvvRef = useRef();\r\n let expiryDateRef = useRef();\r\n let submitRef = useRef();\r\n\r\n const tnccheckeHandle = (event) => {\r\n settncChecked(event.target.checked);\r\n };\r\n\r\n useEffect(() => {\r\n // if (val == 0) {\r\n const script = document.createElement(\"script\");\r\n script.src = GlobalPaymentsBaseURL;\r\n script.async = true;\r\n document.body.appendChild(script);\r\n script.onload = () => scriptLoaded();\r\n // val++;\r\n // }\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n\r\n if ((events.length > 0 || membershipPackages.length > 0 || gatickets.length > 0 || orderProducts.length > 0 || ShowGiftCards() || donationProducts.length > 0) || props.AdditionBooking && tncchecked) {\r\n setShowPayBtn(true);\r\n }\r\n else {\r\n setShowPayBtn(false);\r\n }\r\n }, [events, tncchecked, formfields])\r\n\r\n useEffect(() => {\r\n\r\n if (errorMsg && errorMsg.length > 0 || PaymentInfoError && PaymentInfoError.length > 0) {\r\n if (window && window.toggleButtonState) {\r\n window.toggleButtonState(true);\r\n }\r\n }\r\n\r\n }, [errorMsg, PaymentInfoError]);\r\n\r\n\r\n const Reload = () => {\r\n\r\n if (cardNumberRef.current && cvvRef.current && expiryDateRef.current && submitRef.current) {\r\n cardNumberRef.current.innerHTML = \"\";\r\n cvvRef.current.innerHTML = \"\";\r\n expiryDateRef.current.innerHTML = \"\";\r\n submitRef.current.innerHTML = \"\";\r\n }\r\n\r\n window.GlobalPayments.configure({\r\n \"X-GP-Api-Key\": CryptoAES.decrypt(GlobalPaymentsApiKey, '1271').toString(CryptoENC),\r\n \"X-GP-Environment\": GlobalPaymentsEnvironment,\r\n enableAutocomplete: GlobalPaymentsEnableAutocomplete,\r\n });\r\n\r\n var cardForm = window.GlobalPayments.ui.form({\r\n fields: {\r\n \"card-number\": {\r\n target: \"#card-number\",\r\n placeholder: \"???????????? ???????????? ???????????? ????????????\",\r\n },\r\n \"card-expiration\": {\r\n target: \"#card-expiration\",\r\n placeholder: \"MM / YYYY\",\r\n },\r\n \"card-cvv\": {\r\n target: \"#card-cvv\",\r\n placeholder: \"?????????\",\r\n },\r\n submit: {\r\n target: \"#submit\",\r\n text: \"Pay\",\r\n },\r\n },\r\n styles: {\r\n //adding a radius on all text inputs\r\n\r\n \"#secure-payment-field.card-number\": {\r\n \"font-family\": \"Roboto, Helvetica, Arial, sans-serif\",\r\n \"padding\": \"4px 5px 4px 30px\",\r\n \"font-size\": \"16px\",\r\n \"border\": \"none !important\",\r\n \"border-bottom\": \"1px solid gray !important\",\r\n \"width\": \"100% !important\"\r\n },\r\n\r\n \".card-number.card-type-amex\": {\r\n \"background\": \"#f3faff url(https://hps.github.io/token/gp-1.0.0/images/logo-amex@2x.png) no-repeat right\",\r\n \"background-position-y\": \"-12px\",\r\n \"background-size\": \"55px 98px\"\r\n },\r\n \".card-number.card-type-discover\": {\r\n \"background\": \"#f3faff url(https://hps.github.io/token/gp-1.0.0/images/logo-discover@2x.png) no-repeat right\",\r\n \"background-position-y\": \"-11px\",\r\n \"background-size\": \"90px 96px\"\r\n },\r\n \".card-number.card-type-jcb\": {\r\n \"background\": \"#f3faff url(https://hps.github.io/token/gp-1.0.0/images/logo-jcb@2x.png) no-repeat right\",\r\n \"background-position-y\": \"-6px\",\r\n \"background-size\": \"48px 82px\"\r\n },\r\n \".card-number.card-type-mastercard\": {\r\n \"background\": \"#f3faff url(https://hps.github.io/token/gp-1.0.0/images/logo-mastercard@2x.png) no-repeat right\",\r\n \"background-position-y\": \"-3px\",\r\n \"background-size\": \"60px 64px\"\r\n },\r\n \".card-number.card-type-visa\": {\r\n \"background\": \"#f3faff url(https://hps.github.io/token/gp-1.0.0/images/logo-visa@2x.png) no-repeat right\",\r\n \"background-position-y\": \"-6px\",\r\n \"background-size\": \"70px 75px\"\r\n },\r\n\r\n \"#secure-payment-field.card-cvv\": {\r\n \"font-family\": \"Roboto, Helvetica, Arial, sans-serif\",\r\n \"padding\": \"4px 5px 4px 30px\",\r\n \"font-size\": \"16px\",\r\n \"border\": \"none !important\",\r\n \"border-bottom\": \"1px solid gray !important\",\r\n \"width\": \"25% !important\"\r\n },\r\n\r\n \"#secure-payment-field.card-expiration\": {\r\n \"font-family\": \"Roboto, Helvetica, Arial, sans-serif\",\r\n \"padding\": \"4px 5px 4px 30px\",\r\n \"font-size\": \"16px\",\r\n \"border\": \"none !important\",\r\n \"border-bottom\": \"1px solid gray !important\",\r\n \"width\": \"25% !important\"\r\n },\r\n\r\n \"input[type=text]:focus-visible, input[type=tel]:focus-visible\": {\r\n \"outline\": \"none !important\",\r\n \"border\": \"none !important\",\r\n \"border-bottom\": \"1px solid gray !important\",\r\n },\r\n\r\n \"#secure-payment-field.submit:hover\": {\r\n \"text-decoration\": \"none\",\r\n \"background-color\": \"rgba(0, 0, 0, 0.04)\",\r\n \"color\": \"#000000\"\r\n },\r\n \"input.invalid\": {\r\n \"-webkit-box-shadow\": \"inset 0px 0px 4px 0px #ff0a0a\",\r\n \"box-shadow\": \"inset 0px 0px 4px 0px #ff0a0a\",\r\n \"border-color\": \"#ff8282\"\r\n },\r\n\r\n \"button[type=button]\": {\r\n \"background-color\": theme.palette.primary.main,\r\n \"color\": theme.palette.primary.contrastText,\r\n \"flex-basis\": \"100%\",\r\n \"font-size\": \"14px\",\r\n \"margin\": \"0 auto\",\r\n \"height\": \"38px\",\r\n \"box-sizing\": \"border-box\",\r\n \"border\": \"none\",\r\n \"border-radius\": \"4px\",\r\n \"cursor\": \"pointer\",\r\n \"position\": \"relative\",\r\n \"align-items\": \"center\",\r\n \"font-weight\": \"500 !important\",\r\n \"line-height\": \"1.75\",\r\n \"text-transform\": \"uppercase\",\r\n \"letter-spacing\": \"0.02857em\",\r\n \"font-family\": \"Roboto Helvetica Arial sans-serif !important\"\r\n },\r\n \"button:active\": {\r\n \"filter\": \"brightness(112%)\"\r\n }\r\n }\r\n });\r\n\r\n return cardForm;\r\n }\r\n const scriptLoaded = () => {\r\n\r\n var cardForm = Reload();\r\n var isCallInititaed = false;\r\n\r\n window.GlobalPayments.on(\"error\", (resp) => {\r\n if (props.showFreeTicket === false) {\r\n seterrorMsg(\"Global Payment is not configured correctly, please contact administrator for more details.\");\r\n }\r\n });\r\n\r\n cardForm.on(\"token-success\", (resp) => {\r\n if (!isCallInititaed) {\r\n window.toggleButtonState(false);\r\n setCardDetails(resp);\r\n }\r\n\r\n });\r\n\r\n function timeout(ms) {\r\n return new Promise(resolve => setTimeout(resolve, ms));\r\n }\r\n async function updatetsates() {\r\n ResetCreditCard();\r\n await timeout(3000);\r\n }\r\n\r\n cardForm.on(\"token-error\", function (resp) {\r\n\r\n window.toggleButtonState(true);\r\n updatetsates();\r\n\r\n if (resp && resp.error) {\r\n\r\n if (resp.error.detail && resp.error.detail.length > 0 && resp.error.detail[0].hasOwnProperty('data_path')) {\r\n\r\n if (resp.error.detail[0].data_path.includes('card_number') || resp.error.detail[0].data_path.includes('card-number')) {\r\n errorfield('number', GPCardNumberErrorMsg, true);\r\n }\r\n\r\n if (resp.error.detail[0].data_path.includes('security')) {\r\n errorfield('cvv', GPCVVErrorMsg, true);\r\n }\r\n\r\n if (resp.error.detail[0].data_path.includes('expiry_year') || resp.error.detail[0].data_path.includes('card-expiration')) {\r\n errorfield('MonthAndYear', GPExpiryErrorMsg, true);\r\n }\r\n\r\n if (resp.error.detail[0].description.includes('expiry')) {\r\n errorfield('MonthAndYear', GPExpiryErrorMsg, true);\r\n }\r\n }\r\n\r\n if (resp.error.code && resp.error.code.includes('invalid_card')) {\r\n errorfield('number', GPCardNumberErrorMsg, true);\r\n }\r\n }\r\n });\r\n\r\n cardForm.on(\"card-number-test\", (resp) => {\r\n if (resp.valid)\r\n errorfield('number', '', false);\r\n });\r\n\r\n cardForm.on(\"card-expiration-test\", (resp) => {\r\n if (resp.valid)\r\n errorfield('MonthAndYear', '', false);\r\n });\r\n\r\n\r\n cardForm.on(\"card-cvv-test\", (resp) => {\r\n if (resp.valid)\r\n errorfield('cvv', '', false);\r\n });\r\n\r\n // called during callbacks, changes CSS of Submit button if all 3 callbacks return true\r\n // by calling addStylesheet on cardForm (PayFields) object\r\n window.toggleButtonState = (isEnabled) => {\r\n\r\n cardForm.addStylesheet(isEnabled ? {\r\n \"button\": {\r\n \"color\": \"#FFFFFF\",\r\n \"background-color\": \"#0000FF\",\r\n \"pointer-events\": \"auto\",\r\n \"cursor\": \"pointer\"\r\n }\r\n } : {\r\n \"button\": {\r\n \"background\": \"#e0f1ff\",\r\n \"color\": \" #808080\",\r\n \"pointer-events\": \"none\",\r\n \"cursor\": \"not-allowed\"\r\n }\r\n });\r\n\r\n if (!isEnabled) {\r\n isCallInititaed = true;\r\n } else {\r\n isCallInititaed = false;\r\n }\r\n };\r\n };\r\n\r\n const PayByCardOnFile = () => {\r\n\r\n var booking = reducerBooking.booking[0];\r\n\r\n let cardonfileToken = \"\";\r\n let cardMaskedNum = \"\";\r\n let cardType = \"\";\r\n\r\n if (booking && booking.hasOwnProperty('PaymentToken') && booking.PaymentToken.length > 10) {\r\n cardonfileToken = booking.PaymentToken.substring(booking.PaymentToken.length - 10);\r\n }\r\n\r\n if (booking && booking.hasOwnProperty('PaymentDescription') && booking.PaymentDescription.length > 10) {\r\n cardType = booking.PaymentDescription.substring(0, booking.PaymentDescription.indexOf('-') - 1).trim();\r\n cardMaskedNum = booking.PaymentDescription.substring(booking.PaymentDescription.indexOf('-') + 1, booking.PaymentDescription.length).trim();\r\n }\r\n\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: cardonfileToken, cardtype: cardType, cardnumber: cardMaskedNum }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: cardonfileToken, cardtype: cardType, cardnumber: cardMaskedNum }, customer.customer && customer.customer.length > 0 ? customer.customer : \"\", \"\");\r\n }\r\n }\r\n\r\n\r\n const PurchaseItems = (resp) => {\r\n\r\n if (resp.hasOwnProperty('cvv_present') && resp.cvv_present === false) {\r\n errorfield('cvv', 'Card CVV is required.', true);\r\n window.toggleButtonState(true);\r\n return;\r\n }\r\n\r\n if (!props.ValidatePaymentFields()) {\r\n window.toggleButtonState(true);\r\n return;\r\n }\r\n\r\n if (props.ValidatePaymentFields()) {\r\n\r\n ResetCreditCard();\r\n\r\n if (props.mmbPayBy === undefined || props.mmbPayBy !== \"CardOnFile\") {\r\n\r\n var client = GetClient(formfields.first_name.value, formfields.last_name.value, formfields.email.value.trim(), UseStreetAddressForAVS ? formfields.address1.value : '',\r\n formfields.address2.value, formfields.city.value, formfields.state.value, formfields.zip.value, formfields.country.value, formfields.phone_number.value,\r\n formfields.shipping_address1.value, formfields.shipping_address2.value, formfields.shipping_city.value, formfields.shipping_state.value,\r\n formfields.shipping_zip.value, formfields.shipping_country.value, formfields.shipping_phone_number.value);\r\n\r\n if (!props.showFreeTicket) {\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: resp.temporary_token, cardtype: resp.card.type, cardnumber: resp.card.masked_card_number }, client, recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: resp.temporary_token, cardtype: resp.card.type, cardnumber: resp.card.masked_card_number }, client, \"\");\r\n }\r\n }\r\n\r\n if (props.showFreeTicket) {\r\n if (RecaptchaV3Client && RecaptchaV3Client != '') {\r\n executeRecaptcha(\"checkout\").then(recaptchaToken => {\r\n paymentTokenHandler({ token: null }, client, recaptchaToken);\r\n }).catch(error => {\r\n seterrorMsg(\"Recaptcha token not fetched\")\r\n })\r\n }\r\n else {\r\n paymentTokenHandler({ token: null }, client, \"\");\r\n }\r\n }\r\n }\r\n }\r\n else if (props.managemyBooking && props.mmbPayBy === \"CardOnFile\") {\r\n PayByCardOnFile();\r\n }\r\n }\r\n\r\n\r\n useEffect(() => {\r\n\r\n if (cardDetails && cardDetails.hasOwnProperty('temporary_token') && cardDetails.temporary_token.length > 0) {\r\n PurchaseItems(cardDetails);\r\n }\r\n }, [cardDetails])\r\n\r\n const ResetCreditCard = () => {\r\n\r\n errorfield('number', '', false);\r\n errorfield('cvv', '', false);\r\n errorfield('MonthAndYear', '', false);\r\n }\r\n\r\n const ShowGiftCards = () => {\r\n let res = false;\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.AddedToCart === true).length > 0) {\r\n res = true;\r\n }\r\n }\r\n return res;\r\n }\r\n\r\n const errorfield = (errorfield, errortext, errorstate) => {\r\n actionSetFormErrorState(dispatch, errorfield, errortext, errorstate);\r\n }\r\n\r\n const paymentTokenHandler = (token, client, recaptchaToken) => {\r\n actionPostPaymentTransaction(dispatch, token, client, recaptchaToken);\r\n }\r\n\r\n const GetClient = (firstName, lastName, email, street1, stree2, city, state, postCode, country, mobilePhone, shipping_address1, shipping_address2, shipping_city, shipping_state,\r\n shipping_zip, shipping_country, shipping_phone_number) => {\r\n\r\n var client = [\r\n {\r\n \"CustomerType\": \"Individual\",\r\n \"FirstName\": firstName,\r\n \"LastName\": lastName,\r\n \"CreatedAsGuest\": true,\r\n \"GuestEmail\": email,\r\n \"DateOfBirth\": null,\r\n \"CustomerAddress\": [\r\n {\r\n \"IsPrimaryAddress\": true,\r\n \"AddressTypeID\": StreetAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": street1,\r\n \"Street2\": stree2,\r\n \"CitySuburb\": city,\r\n \"State\": state,\r\n \"Postcode\": postCode,\r\n \"Country\": country,\r\n \"MobilePhone\": mobilePhone\r\n },\r\n {\r\n \"IsPrimaryAddress\": false,\r\n \"AddressTypeID\": BillingAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": shipping_address1,\r\n \"Street2\": shipping_address2,\r\n \"CitySuburb\": shipping_city,\r\n \"State\": shipping_state,\r\n \"Postcode\": shipping_zip,\r\n \"Country\": shipping_country,\r\n \"MobilePhone\": shipping_phone_number\r\n }\r\n ],\r\n \"LinkedIndividuals\": []\r\n }\r\n ]\r\n\r\n return client;\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const getTNC = () => {\r\n return ReactHtmlParser(TermsnConditionCheckMsg);\r\n }\r\n\r\n const GetTransOptionalText = () => {\r\n let optionalTxt = '';\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n optionalTxt = transactionfee.transactionFee[0].TransactionFeeOptionalText;\r\n\r\n if (refundType === \"AdditionalPayment\" || (refundType === \"\" && shopcartamounttoPay > 0))\r\n optionalTxt += ' [' + genfunction.ccyFormat(parseFloat(genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], enteredAmountToPay, cashlesstotal))) + ']';\r\n\r\n else\r\n optionalTxt += ' [' + genfunction.ccyFormat(parseFloat(genfunction.TransactionFee(events, donation, transactionfee.transactionFee[0], cashless, membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts))) + ']';\r\n }\r\n\r\n return optionalTxt;\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n actionShopCartShowTransFee(dispatch, true);\r\n }\r\n }\r\n\r\n }, [transactionfee])\r\n\r\n const transFeeCheckHandler = (event) => {\r\n actionShopCartShowTransFee(dispatch, event.target.checked);\r\n\r\n let transFee;\r\n if (props.managemyBooking) {\r\n\r\n if (refundType === \"AdditionalPayment\" || (refundType === \"\" && shopcartamounttoPay > 0)) {\r\n transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], enteredAmountToPay, cashlesstotal)\r\n }\r\n else {\r\n transFee = genfunction.TransactionFee(events, donation, transactionfee.transactionFee[0], cashless, membershipPackages, gatickets, giftcards.giftcards, orderProducts, donationProducts);\r\n }\r\n\r\n let amoutToPay = event.target.checked ? genfunction.Rounded(shopcartamounttoPay + transFee) : genfunction.Rounded(shopcartamounttoPay - transFee);\r\n actionShopCartSetMmbAmountToPay(dispatch, amoutToPay);\r\n }\r\n\r\n };\r\n\r\n return (\r\n \r\n
\r\n 0} handleclose={errorcancelhandle} />\r\n {props.showFreeTicket === false ?\r\n <>\r\n \r\n \r\n :\r\n <>\r\n \r\n \r\n {TermsnConditionCheckBoxText}\r\n { setopentnc(true) }} > Terms and Conditions \r\n \r\n \r\n \r\n PurchaseItems(null)}>Pay\r\n \r\n \r\n }\r\n\r\n { setopentnc(false) }}> \r\n\r\n
\r\n );\r\n});\r\n\r\nexport default GlobalPayments;\r\n","const { StreetAddressTypeID, BillingAddressTypeID } = window['runConfig'];\r\n\r\nexport default {\r\n\r\n GetClient(firstName, lastName, email, street1, stree2, city, state, postCode, country, mobilePhone, shipping_address1, shipping_address2, shipping_city, shipping_state,\r\n shipping_zip, shipping_country, shipping_phone_number) {\r\n\r\n var client = [\r\n {\r\n \"CustomerType\": \"Individual\",\r\n \"FirstName\": firstName,\r\n \"LastName\": lastName,\r\n \"CreatedAsGuest\": true,\r\n \"GuestEmail\": email,\r\n \"DateOfBirth\": null,\r\n \"CustomerAddress\": [\r\n {\r\n \"IsPrimaryAddress\": true,\r\n \"AddressTypeID\": StreetAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": street1,\r\n \"Street2\": stree2,\r\n \"CitySuburb\": city,\r\n \"State\": state,\r\n \"Postcode\": postCode,\r\n \"Country\": country,\r\n \"MobilePhone\": mobilePhone\r\n },\r\n {\r\n \"IsPrimaryAddress\": false,\r\n \"AddressTypeID\": BillingAddressTypeID,\r\n \"Email\": email,\r\n \"Street1\": shipping_address1,\r\n \"Street2\": shipping_address2,\r\n \"CitySuburb\": shipping_city,\r\n \"State\": shipping_state,\r\n \"Postcode\": shipping_zip,\r\n \"Country\": shipping_country,\r\n \"MobilePhone\": shipping_phone_number\r\n }\r\n ],\r\n \"LinkedIndividuals\": []\r\n }\r\n ]\r\n\r\n return client;\r\n }\r\n}","import React, { useState } from 'react';\r\nimport { Spreedly, GlobalPayments } from './index'\r\nimport PropTypes from 'prop-types';\r\n\r\nconst { forwardRef, useRef, useImperativeHandle } = React;\r\n\r\n//const Payments = props => {\r\nconst Payments = forwardRef((props, ref) => {\r\n\r\n const { type, showFreeTkt, managemyBooking, mmbPayBy } = props;\r\n\r\n const spreedlyRef = useRef();\r\n const globalPaymentsRef = useRef();\r\n\r\n\r\n useImperativeHandle(ref, () => ({\r\n\r\n SpreedlyTransactionCall(requiredFields) {\r\n spreedlyRef.current.TransactionCall(requiredFields);\r\n },\r\n SpreedlyZeroDollarTransactionCall(requiredFields) {\r\n spreedlyRef.current.ZeroDollarTransactionCall(requiredFields);\r\n },\r\n ReloadSpreedly() {\r\n spreedlyRef.current.ReloadSpreedly();\r\n },\r\n PaymentLoaded() {\r\n spreedlyRef.current.PaymentLoaded();\r\n },\r\n SpreedlyCardOnFileTransaction() {\r\n spreedlyRef.current.CardOnFileTransaction();\r\n },\r\n PayByCardOnFile() {\r\n globalPaymentsRef.current.refPayByCardOnFile();\r\n },\r\n GPReload() {\r\n globalPaymentsRef.current.refReload();\r\n }\r\n }));\r\n\r\n return (\r\n \r\n {type === 'Spreedly' ?
\r\n );\r\n});\r\n\r\nPayments.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n tokenization: PropTypes.func.isRequired\r\n};\r\n\r\nexport default Payments;\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, Grid, CardHeader, Button, TextField, FormControl, FormControlLabel, FormHelperText, Checkbox, Typography, Link, useForkRef } from '@material-ui/core';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useGoogleReCaptcha } from 'react-google-recaptcha-v3';\r\nimport MaskedInput from 'react-text-mask'\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { createFilterOptions } from '@material-ui/lab/Autocomplete';\r\n\r\nimport ProcessingBox from './ProcessingBox'\r\nimport PaymentCompletebox from './PaymentCompletebox'\r\nimport { actionEndMemberValidationLoading, actionResetPaymentTransaction } from 'actions';\r\nimport {\r\n actionShopCartResetState, actionShopCartResetStateWithUniqueCouponHold,\r\n actionShopCartRemoveGiftcards, actionShopCartApplyMembershipOnEvents, actionShopCartResetMembership, actionShopCartResetIDME,\r\n actionShopCartUpdateMembershipEmail, actionShopCartResetMembershipPackage, actionShopCartApplyidmeCostratesOnEvents,\r\n actionShopCartValidMember, actionShopCartShowTransFee\r\n} from 'actions';\r\nimport { actionResetFormErrorState, actionSetFormErrorState, actionSetFieldValueState } from 'actions';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport DialogeBox from '../../../components/DialogeBox/DialogeBox';\r\nimport { genfunction } from 'helpers'\r\nimport { formstates } from '../';\r\nimport FreeTicketForm from '../components/FreeTicketForm';\r\nimport CryptoAES from 'crypto-js/aes'\r\nimport CryptoENC from 'crypto-js/enc-utf8';\r\nimport { actionGetMemberValidation, actionResetMemberValidation, actionStartLoadingOnRemoveMembership } from 'actions';\r\nimport { actionGetExtraItems, actionResetExtraItems } from 'actions';\r\nimport { actionGetCostRate, actionResetCostRate } from 'actions';\r\nimport { actionGetIDMEUSERDATA, actionResetIDMEUSERDATA } from 'actions';\r\nimport { actionGetCountryAndState, actionResetCountryAndState } from 'actions';\r\nimport { actionValidateRecaptchaToken, actionValidateRecaptchaReset } from 'actions';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../../actions/actionAppLoader';\r\nimport { actionResetGiftCards } from 'actions';\r\nimport { actionGetDonation } from 'actions';\r\nimport { actionResetMembershipPackages } from 'actions';\r\nimport { actionResetUDFs } from 'actions';\r\nimport { actionResetMembershipUDFs } from 'actions';\r\nimport Payments from '../../../components/Payments/Payments';\r\nimport { actionResetCustomerUdfs } from 'actions';\r\nimport MultiPayments from './MultiPayments';\r\nimport { useDebouncedCallback } from 'use-debounce';\r\nimport { actionStopUserToPurchase } from 'actions';\r\n\r\n\r\nconst { forwardRef, useRef, useImperativeHandle } = React;\r\n\r\nconst { RedirectAfterCheckout, Titleforloadingpayment, Subtitle1forloadingpayment, Subtitle2forloadingpayment,\r\n EmailRegex, DefaultCostRateID, MembershipCostRateMatches, CouponAndGiftcardAlreadyApplied, Membershipsuccess,\r\n HideMemberValidation, UserMembershipValidatedEmailAndLastName, RemoveMembershipCouponAndGiftcard, TermsnConditionCheckBoxText, TermsnConditionCheckMsg,\r\n RemoveMembershipsuccess, IamMember, LastNameAndEmailORPhoneORAddressForMembership, RequiredEmailORPhoneORAddressForMembership,\r\n PaymentFormHeading, UseStreetAddressForAVS, RecaptchaV3Client, ShowFullAddressOnCheckout,\r\n CheckForIDmeValidProducts, IDmeAPIurl, IDmeClientID, IDmeRedirectURI, IDmeResponseType, IDmeScope, IDmeHeading, IDmeSuccessMsg,\r\n IDmeInvalidGroup, IDmeResponseTypeError, IDmeInvalidClient, IDmeInvalidRedirectUri, IDmeAccessDenied, AddPersonZipCodeLength,\r\n AddPersonCityLength, AddPersonAddress1Length, AddPersonAddress2Length, AddPersonEmailLength,\r\n AddPersonFirstNameLength, AddPersonLastNameLength, PaymentMethodType, PhoneNumberMandatory, ValidMemberMsg, ApplyTransactionFee, EnableAlternateMerchantOnline,\r\n PhoneNumberMessage } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n iconforiframe: {\r\n marginTop: \"18px\"\r\n },\r\n iframebox: {\r\n marginTop: \"-13px\",\r\n height: \"31px\"\r\n },\r\n hidden: {\r\n visibility: \"hidden\"\r\n },\r\n displaynone: {\r\n display: \"none\"\r\n },\r\n visible: {\r\n visibility: \"visible\"\r\n },\r\n btnAlign: {\r\n marginTop: '10px'\r\n },\r\n imMember: {\r\n marginTop: '15px'\r\n },\r\n clearButton: {\r\n \"& .MuiButtonBase-root.MuiAutocomplete-clearIndicator\": {\r\n color: theme.palette.primary.main\r\n\r\n }\r\n }\r\n}));\r\n\r\nfunction TextMaskCustom(props) {\r\n const { inputRef, onChange, value, ...other } = props;\r\n let pnMask = ['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/];\r\n return (\r\n \r\n {IDmeHeading} \r\n \r\n ![](\"https://s3.amazonaws.com/idme/developer/idme-buttons/assets/img/verify.svg\")
\r\n \r\n
\r\n \r\n \r\n \r\n ![](\"https://developers.id.me/assets/buttons/lock-icon-a5b18fbb34d393a80967c08399786f95955ee818b693b97d3f37698e2bc113f2.svg\"){kind=icon}
\r\n Verification by ID.me ???\r\n What is ID.me?\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, CardHeader, Grid, Typography, Button } from '@material-ui/core';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { FormattedInputs } from '../../../components/InputControls';\r\nimport { actionGetDonation } from 'actions';\r\n\r\nconst { DonationHeading, DonationDetails, ShowDonationsSections, DonationProductID, InvalidDOnationAmount } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n itemsmarginR: {\r\n 'margin-right': '10px',\r\n display: 'block !important'\r\n },\r\n donateBtn: {\r\n justifyContent: 'center',\r\n display: 'flex',\r\n marginTop: '10px'\r\n },\r\n errorFont: {\r\n color: 'red'\r\n }\r\n}));\r\n\r\n\r\nconst Donations = props => {\r\n\r\n const donations = useSelector(state => state.reducerDonation);\r\n const donation = useSelector(state => state.reducerShopCart.donation);\r\n\r\n const [showOthers, setshowOthers] = React.useState(false);\r\n const [donationPrice, setdonationPrice] = React.useState(0);\r\n const [productName, setproductName] = React.useState('');\r\n const [checkexist, setcheckexist] = React.useState(false);\r\n const [validateMsg, setvalidateMsg] = useState('');\r\n\r\n const [errormsg, seterrormsg] = useState(\"\");\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n if (DonationProductID !== undefined && (donations.donations.length === 0 || donations.donations.length === undefined))\r\n actionGetDonation(dispatch, DonationProductID, 'donation');\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n if (donation.isdonationApplied === false) {\r\n setcheckexist(false);\r\n setdonationPrice(0);\r\n }\r\n }, [donation.isdonationApplied]);\r\n\r\n const openerrorpopup = () => {\r\n return (errormsg != \"\")\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n\r\n seterrormsg('');\r\n }\r\n\r\n\r\n const ApplyDonation = () => {\r\n\r\n if (donationPrice === \"\" || donationPrice === 0 || donationPrice < 0.1) {\r\n Validated(false);\r\n return;\r\n }\r\n\r\n if (validateMsg !== '' && validateMsg.length > 0) {\r\n return;\r\n }\r\n\r\n props.ApplyDonation(DonationProductID, productName, donationPrice, showOthers ? true : false);\r\n }\r\n\r\n const Validated = (val) => {\r\n if (val)\r\n setvalidateMsg('');\r\n else\r\n setvalidateMsg(InvalidDOnationAmount);\r\n }\r\n\r\n const handleChange = (event) => {\r\n\r\n setcheckexist(true);\r\n\r\n if (event.target.value === \"Other\") {\r\n setshowOthers(true)\r\n setdonationPrice('');\r\n }\r\n else {\r\n setshowOthers(false);\r\n setdonationPrice(event.target.value);\r\n setproductName(event.target.name);\r\n setvalidateMsg('');\r\n }\r\n };\r\n\r\n const handleOtherPrice = (event) => {\r\n setdonationPrice(event.target.value);\r\n setproductName(event.target.name);\r\n \r\n if (donation && donation.isdonationApplied && donation.otherAmount) {\r\n setshowOthers(true);\r\n setcheckexist(true);\r\n }\r\n }\r\n\r\n return (\r\n \r\n\r\n : null}\r\n\r\n
\r\n :\r\n\r\n \r\n \r\n
\r\n \");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n\r\n const EditMembershipPackage = (membership) => {\r\n\r\n props.history.push({\r\n pathname: '/memberships/join/' + membership.MembershipPackageID\r\n })\r\n }\r\n\r\n return (\r\n props.membershipPackages ?\r\n props.membershipPackages.map(memPackage => (\r\n
\r\n \r\n \r\n \r\n
\r\n {props.membership.PackageName}\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default MembershipCard;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport { MembershipCard } from './components/';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { actionGetMembershipPackages, actionResetMembershipPackage } from 'actions';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\nimport { actionResetPaymentTransaction } from 'actions';\r\nimport { genfunction } from 'helpers';\r\n\r\nconst { MembershipPackagesDisplayAreaNo, PurchaseMembershipNotAllowedForOrganizationBooking } = window['runConfig'];\r\n\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n pagination: {\r\n marginTop: theme.spacing(3),\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end'\r\n }\r\n}));\r\n\r\n\r\nconst MembershipList = (props) => {\r\n const classes = useStyles();\r\n\r\n const dispatch = useDispatch();\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const reducerMembershipPackages = useSelector(state => state.reducerMembershipPackages);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const paymenttranstate = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n const [colorState, setColorState] = React.useState('');\r\n const [error, seterror] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (events && events.length == 0 && membershipPackages && membershipPackages.length == 0 && gaTickets && gaTickets.length == 0 &&\r\n giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0 && paymenttranstate.hasOwnProperty(\"ReceiptNo\") && paymenttranstate.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (membershipPackages && membershipPackages.length < 1 && reducerMembershipPackages && reducerMembershipPackages.membershipPackage && reducerMembershipPackages.membershipPackage.hasOwnProperty('MembershipPackageID')) {\r\n actionResetMembershipPackage(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (reducerMembershipPackages && reducerMembershipPackages.membershippackagesError && reducerMembershipPackages.membershippackagesError.length > 0) {\r\n seterror(reducerMembershipPackages.membershippackagesError);\r\n }\r\n }, [reducerMembershipPackages.membershippackagesError]);\r\n\r\n useEffect(() => {\r\n\r\n if (reducerMembershipPackages.loading == true) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n\r\n })\r\n\r\n useEffect(() => {\r\n actionGetMembershipPackages(dispatch, MembershipPackagesDisplayAreaNo);\r\n }, []);\r\n\r\n const errorcancelhandle = () => {\r\n seterror('');\r\n }\r\n\r\n const Joinredirect = (membership) => {\r\n\r\n if (membershipPackages && membershipPackages.length > 0 && membershipPackages.filter(x => x.MembershipPackageID == membership.MembershipPackageID).length == 0) {\r\n seterror('You already have one membership package in your cart!');\r\n }\r\n else if (genfunction.IsOrganization(events)) {\r\n setColorState('info');\r\n seterror(PurchaseMembershipNotAllowedForOrganizationBooking);\r\n }\r\n else {\r\n props.history.push({\r\n pathname: '/memberships/join/' + membership.MembershipPackageID\r\n })\r\n }\r\n }\r\n\r\n const RenewRedirect = (membership) => {\r\n \r\n if (genfunction.IsOrganization(events)) {\r\n setColorState('info');\r\n seterror(PurchaseMembershipNotAllowedForOrganizationBooking);\r\n }\r\n else {\r\n props.history.push({\r\n pathname: '/memberships/membervalidate/' + membership.MembershipPackageID\r\n })\r\n }\r\n }\r\n\r\n return (\r\n\r\n \r\n {props.membership.PackageName}\r\n
\r\n 0 ? error : ''}\r\n open={error.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n
\r\n );\r\n};\r\n\r\nexport default MembershipList;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Height } from '@material-ui/icons';\r\nimport { Typography, Hidden } from '@material-ui/core';\r\nconst { MembershipDetails, SuccessRenewMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%'\r\n },\r\n mainHeading: {\r\n padding: theme.spacing(1),\r\n textAlign: 'center',\r\n color: theme.palette.text.secondary\r\n },\r\n SuccessMsg: {\r\n padding: theme.spacing(1),\r\n textAlign: 'center',\r\n color: theme.palette.text.secondary\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}));\r\n\r\nexport default function MembershipHeader(props) {\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n\r\n \r\n \r\n\r\n {reducerMembershipPackages.membershippackages.map((membership, i) => {\r\n return membership !== undefined ?\r\n \r\n \r\n\r\n : null\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n {MembershipDetails}\r\n \r\n\r\n \r\n {props.displayMsg} {props.membershipPackage.PackageName}.\r\n \r\n \r\n\r\n \r\n \r\n {MembershipDetails}\r\n \r\n\r\n \r\n {props.displayMsg} {props.membershipPackage.PackageName}.\r\n \r\n \r\n\r\n \r\n \r\n {MembershipDetails}\r\n \r\n\r\n \r\n {props.displayMsg} {props.membershipPackage.PackageName}.\r\n \r\n \r\n\r\n\r\n \r\n {props.isRenew ? SuccessRenewMsg : ''}\r\n \r\n \r\n \r\n
\r\n );\r\n};","import React from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport Card from '@mui/material/Card';\r\nimport CardHeader from '@mui/material/CardHeader';\r\nimport CardContent from '@mui/material/CardContent';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Typography, Hidden } from '@material-ui/core';\r\nimport UDFDataField from '../CalendarControls/UDFDataField';\r\nimport { actionUpdateMemberUDF } from 'actions';\r\n\r\nconst { MembershipUDFsHeading } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n largetourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '60px'\r\n },\r\n removeFontSize: {\r\n fontSize: 'initial !important'\r\n }\r\n}));\r\n\r\nconst MembershipUDF = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const membershipTypesUdfs = useSelector(state => state.reducerMembershipUserDefinedFields);\r\n\r\n const onChangeHandler = (event, bookingID, categoryName, udfID) => {\r\n let udfValue = '';\r\n if (event.target.type != undefined && event.target.type == \"checkbox\")\r\n udfValue = event.target.checked;\r\n else\r\n udfValue = event.target.value;\r\n actionUpdateMemberUDF(dispatch, props.MembershipTypeID, props.userNo, categoryName, udfID, udfValue);\r\n }\r\n\r\n return (\r\n \r\n \r\n {membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0 &&\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.MembershipTypeID === props.MembershipTypeID).length > 0 ?\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.MembershipTypeID === props.MembershipTypeID)[0].UDFCategories != null &&\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.MembershipTypeID === props.MembershipTypeID)[0].UDFCategories.map((udfCategorey, i) => (\r\n\r\n \r\n \r\n\r\n\r\n {udfCategorey.UserDefinedFields.map((udfs) => (\r\n \r\n \r\n \r\n \r\n {udfs.UDFDescription} {udfs.IsRequired ? '(required)' : ''}\r\n \r\n \r\n\r\n \r\n \r\n {udfs.UDFDescription} {udfs.IsRequired ? '(required)' : ''}\r\n \r\n \r\n\r\n \r\n \r\n {udfs.UDFDescription} {udfs.IsRequired ? '(required)' : ''}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n )) : null}\r\n\r\n \r\n\r\n
\r\n )\r\n};\r\n\r\nexport default MembershipUDF;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport PersonAddIcon from '@material-ui/icons/PersonAdd';\r\nimport Button from '@material-ui/core/Button';\r\nimport { Typography, MenuItem, Hidden, TextField, Divider, Link, TableRow, FormHelperText } from '@material-ui/core';\r\nimport { genfunction } from '../../../helpers';\r\nimport { NumberSpinner } from '../../../components/InputControls';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Moment from 'moment';\r\nimport Select from '@material-ui/core/Select';\r\n\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\n\r\n\r\nimport {\r\n actionUpdateMembershipPackage, actionDeleteMembershipTypePerson, actionUpdateMembershipAddonsQuantity,\r\n actionUpdateFamilyMemberNotPartOfPackage, actionUpdatePackageForRenew, actionResetMembershipPackage\r\n} from 'actions';\r\nimport { actionShopCartAddMembershipPackage } from 'actions';\r\nimport { actionGetCountryAndState, actionResetCountryAndState } from 'actions';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport ErrorHandling from '../../../components/ErrorHandling/ErrorHandling';\r\nimport { FormControl } from '@material-ui/core';\r\nimport { actionSetFieldValueState, actionResetFieldValuesState } from 'actions';\r\nimport DialogeBox from '../../../components/DialogeBox/DialogeBox';\r\nimport { Table, TableBody, TableCell, TableHead } from '@material-ui/core';\r\nimport { actionResetMemberValidation } from 'actions';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport MaskedInput from 'react-text-mask';\r\nimport MembershipUDF from '../../../components/UDFs/MembershipUDF';\r\nimport { actionGetMembershipUserDefinedFields, actionUpdateMembershipUdfsWithCustomerUdfsValues, actionResetMembershipUDFs } from 'actions';\r\nimport { actionResetCustomerUdfs } from 'actions';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { createFilterOptions } from '@material-ui/lab/Autocomplete';\r\n\r\nconst { AddPersonFirstNameLength, AddPersonLastNameLength, AddPersonEmailLength, AddPersonDOBLength, AddPersonZipCodeLength, AddPersonCityLength,\r\n PhoneNumberMandatory, AddPersonAddress1Length, AddPersonAddress2Length, DOBRegex, EmailRegex, ValidateMembershipMinQuantity,\r\n TryDeletePrimaryRecordOnMembership, ConfirmMsgRemovePersonFromMemberPackage, DisplayMemPackageDiscriptionCharacters, PackageDiscriptionHeading,\r\n ValidateMembershipMaxQuantity, PackageMaxQtyMsg, PackageMinQtyMsg, OrderItemsInCartError\r\n} = window['runConfig'];\r\n\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n mainHeading: {\r\n padding: theme.spacing(2),\r\n textAlign: 'center',\r\n color: theme.palette.text.secondary\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n minHeight: '40px',\r\n maxHeight: '70px'\r\n },\r\n dialogTitleHeader: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '50px'\r\n },\r\n smalltourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n minHeight: '25px',\r\n maxHeight: '60px'\r\n },\r\n hr: {\r\n display: 'block',\r\n height: '1px',\r\n border: 0,\r\n borderTop: '1px solid #ccc',\r\n padding: 0\r\n },\r\n displaynone: {\r\n display: \"none\"\r\n },\r\n visible: {\r\n visibility: \"visible\"\r\n },\r\n box100per: {\r\n width: \"100%\"\r\n },\r\n AddHoverOnIcons: {\r\n cursor: \"pointer !important\"\r\n },\r\n tablecell: {\r\n padding: \"5px\"\r\n },\r\n errorColor: {\r\n color: 'red !mportant'\r\n },\r\n defaultColor: {\r\n color: theme.palette.text.secondary\r\n },\r\n udfWidth: {\r\n\r\n minWidth: 300,\r\n\r\n },\r\n clearButton: {\r\n \"& .MuiButtonBase-root.MuiAutocomplete-clearIndicator\": {\r\n color: theme.palette.primary.main\r\n\r\n }\r\n }\r\n\r\n}));\r\n\r\nfunction TextMaskCustom(props) {\r\n const { inputRef, onChange, value, ...other } = props;\r\n let pnMask = ['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/];\r\n return (\r\n \");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n const GetMembershipTypeQty = (memPackage, memTypeProd) => {\r\n\r\n let availQty = '';\r\n\r\n if (memTypeProd) {\r\n\r\n if (memTypeProd.MinQuantity > 0) {\r\n availQty = '(Min Qty : ' + memTypeProd.MinQuantity + ', Max Qty : ' + memTypeProd.MaxQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MinQuantity < 1 || memTypeProd.MinQuantity == memTypeProd.MaxQuantity) {\r\n availQty = '(Max Qty : ' + memTypeProd.MaxQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MaxQuantity >= memPackage.MaximumMembersInPackage && memTypeProd.MinQuantity > 0) {\r\n availQty = '(Min Qty : ' + memTypeProd.MinQuantity + ')';\r\n }\r\n\r\n if (memTypeProd.MaxQuantity >= memPackage.MaximumMembersInPackage && memTypeProd.MinQuantity < 1) {\r\n availQty = '';\r\n }\r\n\r\n if (memTypeProd.MinQuantity == memPackage.MaximumMembersInPackage) {\r\n availQty = '';\r\n }\r\n }\r\n\r\n return availQty;\r\n }\r\n\r\n const GetDefaultMembershipName = (membershipTypeName) => {\r\n\r\n let memtypename = '';\r\n\r\n if (props.membershipPackage && props.membershipPackage.MembershipProducts)\r\n if (props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").length == 1) {\r\n memtypename = props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\")[0].ProductName;\r\n }\r\n else {\r\n memtypename = membershipTypeName;\r\n }\r\n\r\n return memtypename;\r\n }\r\n\r\n const ValidateMembershipType = () => {\r\n let valid = true;\r\n var memberpackageDetail = { ...state.memberpackageDetail };\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.MembershipTypeID == memberpackageDetail.membershipTypeID).filter(x => x.UDFCategories).map(udfCategorey => {\r\n\r\n if (udfCategorey.UDFCategories && udfCategorey.UDFCategories.length > 0 && valid) {\r\n\r\n udfCategorey.UDFCategories.map(udfCate => {\r\n udfCate.UserDefinedFields.map((udf) => {\r\n\r\n if (valid) {\r\n if (udf.IsRequired && udf.Users.length == 0) {\r\n valid = false;\r\n }\r\n else if (udf.IsRequired && udf.Users.length > 0 && udf.Users.filter(x => x.userID == memberpackageDetail.userNo).length < 1) {\r\n valid = false;\r\n }\r\n else if (udf.IsRequired && udf.Users.length > 0 && udf.Users.filter(x => x.userID == memberpackageDetail.userNo).length > 0) {\r\n let user = udf.Users.filter(x => x.userID == memberpackageDetail.userNo)[0];\r\n\r\n if (user.userUDFValue !== undefined && user.userUDFValue !== null) {\r\n\r\n if ((udf.UDFType === \"Text\" || udf.UDFType === \"Decimal\") && user.userUDFValue.length < 1) {\r\n valid = false;\r\n }\r\n else if (udf.UDFType === \"Bit\" && user.userUDFValue === false) {\r\n valid = false;\r\n }\r\n }\r\n }\r\n }\r\n })\r\n });\r\n }\r\n });\r\n }\r\n\r\n return valid;\r\n }\r\n const ValidateMembersUDFs = () => {\r\n\r\n let error = '';\r\n\r\n if (membershipTypesUdfs.membershipUdfs && membershipTypesUdfs.membershipUdfs.length > 0) {\r\n\r\n membershipTypesUdfs.membershipUdfs.filter(x => x.UDFCategories).map(membershipType => {\r\n\r\n let memberusers = GetMembershipTypeUserCount(membershipType.MembershipTypeID);\r\n\r\n if (membershipType.UDFCategories != null && membershipType.UDFCategories.length > 0 && error.length == 0 && memberusers > 0) {\r\n\r\n membershipType.UDFCategories.map((udfCategorey, i) => {\r\n\r\n udfCategorey.UserDefinedFields.map((udf) => {\r\n if (error.length == 0 && udf.IsRequired && udf.hasOwnProperty('Users') && udf.Users !== undefined && memberusers != udf.Users.length) {\r\n error = 'Please fill the required UDFs for Membership Type ' + GetMembershipTypeName(membershipType.MembershipTypeID);\r\n return;\r\n }\r\n })\r\n });\r\n }\r\n })\r\n }\r\n\r\n return error;\r\n }\r\n\r\n const GetMembershipTypeName = (memTypeID) => {\r\n let memberTypeName = '';\r\n\r\n if (memberPackage) {\r\n memberTypeName = memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\" && x.MembershipTypeID == memTypeID)[0].ProductName;\r\n }\r\n\r\n return memberTypeName;\r\n }\r\n\r\n const GetMembershipTypeUserCount = (memTypeID) => {\r\n let totalMembers = 0;\r\n\r\n if (memberPackage) {\r\n memberPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\" && x.MembershipTypeID == memTypeID).map(m => {\r\n\r\n if (m.Users && m.Users.length > 0) {\r\n\r\n totalMembers += m.Users.length;\r\n }\r\n });\r\n }\r\n\r\n return totalMembers;\r\n }\r\n\r\n return (\r\n
\r\n 0 ? errorMsg : ''}\r\n open={errorMsg.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n {PackageDiscriptionHeading}\r\n \r\n\r\n \r\n \r\n {ReactHtmlParser(GetMembershipPackageDis(props.membershipPackage.Description))}\r\n \r\n\r\n \r\n {readmorebtnText}\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n {PackageDiscriptionHeading}\r\n \r\n\r\n \r\n \r\n {ReactHtmlParser(GetMembershipPackageDis(props.membershipPackage.Description))}\r\n \r\n\r\n \r\n {readmorebtnText}\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n }\r\n onClick={handleClickOpen}>\r\n Add Person\r\n \r\n \r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n Membership Types\r\n \r\n \r\n\r\n \r\n \r\n Membership Types\r\n \r\n \r\n\r\n \r\n \r\n Membership Types\r\n \r\n \r\n \r\n\r\n {props.membershipPackage.hasOwnProperty(\"MembershipProducts\") && props.membershipPackage.MembershipProducts.map((membershipProduct, i) => {\r\n\r\n return membershipProduct.MembershipType === \"Membership\" ?\r\n\r\n \r\n \r\n\r\n \r\n {replaceEscapeCharacters(membershipProduct.ProductName)} \r\n membershipProduct.MaxQuantity ? classes.errorColor : classes.defaultColor} style={{ marginTop: \"3px\", marginLeft: \"5px\" }}> {membershipProduct.AgeBasedMembership ? '(Min Age : ' + membershipProduct.MinAge + ', Max Age : ' + membershipProduct.MaxAge + ')' : ''} {GetMembershipTypeQty(props.membershipPackage, membershipProduct)}\r\n \r\n \r\n\r\n \r\n {replaceEscapeCharacters(membershipProduct.ProductName)} \r\n membershipProduct.MaxQuantity ? classes.errorColor : classes.defaultColor} variant=\"h6\" style={{ marginTop: \"3px\", marginLeft: \"5px\" }}> {membershipProduct.AgeBasedMembership ? '(Min Age : ' + membershipProduct.MinAge + ', Max Age : ' + membershipProduct.MaxAge + ')' : ''} {GetMembershipTypeQty(props.membershipPackage, membershipProduct)}\r\n \r\n \r\n\r\n \r\n {replaceEscapeCharacters(membershipProduct.ProductName)} \r\n membershipProduct.MaxQuantity ? classes.errorColor : classes.defaultColor} variant=\"h6\" style={{ marginTop: \"3px\", marginLeft: \"5px\" }}> {membershipProduct.AgeBasedMembership ? '(Min Age : ' + membershipProduct.MinAge + ', Max Age : ' + membershipProduct.MaxAge + ')' : ''} {GetMembershipTypeQty(props.membershipPackage, membershipProduct)}\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n {genfunction.ccyFormat(membershipProduct.Price)} \r\n \r\n\r\n \r\n {genfunction.ccyFormat(membershipProduct.Price)} \r\n \r\n\r\n \r\n {genfunction.ccyFormat(membershipProduct.Price)} \r\n \r\n \r\n \r\n \r\n\r\n \r\n {membershipProduct.Users && membershipProduct.Users.length > 0\r\n ? membershipProduct.Users.map((membership, i) => {\r\n return (\r\n \r\n\r\n {membershipProduct.hasOwnProperty('Users') && membershipProduct.Users.length < membershipProduct.MinQuantity ?\r\n <>\r\n \r\n {ValidateMembershipMinQuantity} \r\n \r\n\r\n \r\n {ValidateMembershipMinQuantity} \r\n\r\n \r\n\r\n \r\n {ValidateMembershipMinQuantity} \r\n \r\n\r\n : ''\r\n }\r\n\r\n\r\n\r\n {membershipProduct.hasOwnProperty('Users') && membershipProduct.Users.length <= membershipProduct.MaxQuantity && membershipProduct.Users.length >= membershipProduct.MinQuantity ?\r\n <>\r\n \r\n No person is currently assigned to this type. \r\n \r\n\r\n \r\n No person is currently assigned to this type. \r\n\r\n \r\n\r\n \r\n No person is currently assigned to this type. \r\n\r\n \r\n : ''\r\n }\r\n \r\n\r\n\r\n }\r\n\r\n {membershipProduct.hasOwnProperty('Users') && membershipProduct.Users.length > membershipProduct.MaxQuantity ?\r\n \r\n\r\n \r\n {ValidateMembershipMaxQuantity} \r\n\r\n \r\n\r\n \r\n {ValidateMembershipMaxQuantity} \r\n \r\n\r\n \r\n {ValidateMembershipMaxQuantity} \r\n \r\n \r\n :\r\n ''\r\n }\r\n\r\n \r\n \r\n\r\n : null\r\n })}\r\n\r\n {props.isRenewPackage ?\r\n \r\n\r\n \r\n Individuals not included in Renewal\r\n \r\n \r\n \r\n Some or all of the members are not available in this package. If you wish to review these members then add them to the appropriate membership type.\r\n \r\n\r\n\r\n {usersnotpartofpackage && usersnotpartofpackage.length > 0 && usersnotpartofpackage.filter(x => x.notpartofPackage == true).length > 0 ?\r\n \r\n
\r\n :\r\n \r\n No member record found.\r\n \r\n }\r\n\r\n \r\n : null}\r\n\r\n\r\n {props.membershipPackage.hasOwnProperty(\"MembershipProducts\") &&\r\n props.membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"AddOn\").length > 0 ?\r\n <>\r\n \r\n\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n \r\n Add Ons\r\n \r\n \r\n\r\n \r\n \r\n \r\n : null}\r\n\r\n {props.membershipPackage.hasOwnProperty(\"MembershipProducts\") && props.membershipPackage.MembershipProducts.map((addonMembership, i) => {\r\n\r\n return addonMembership.MembershipType === \"AddOn\" ?\r\n \r\n \r\n\r\n \r\n {replaceEscapeCharacters(addonMembership.ProductName)} \r\n \r\n\r\n \r\n {replaceEscapeCharacters(addonMembership.ProductName)} \r\n \r\n\r\n \r\n {replaceEscapeCharacters(addonMembership.ProductName)} \r\n \r\n\r\n \r\n \r\n {(addonMembership.Quantity > 0 || addonMembership.MinQuantity > 0) ? () => changeQuantityHandler(addonMembership) : ''}\r\n changeQuantityHandler(addonMembership)}\r\n checked={(addonMembership.Quantity > 0 || addonMembership.MinQuantity > 0)}\r\n />\r\n \r\n\r\n \r\n \r\n {genfunction.ccyFormat(addonMembership.Price)} \r\n \r\n\r\n \r\n {genfunction.ccyFormat(addonMembership.Price)} \r\n \r\n\r\n \r\n {genfunction.ccyFormat(addonMembership.Price)} \r\n \r\n \r\n \r\n\r\n : null\r\n })}\r\n\r\n \r\n \r\n \r\n\r\n \r\n Tax = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TaxTotal)} \r\n Total = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TotalAmount)} \r\n \r\n\r\n \r\n Tax = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TaxTotal)} \r\n Total = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TotalAmount)} \r\n \r\n\r\n \r\n Tax = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TaxTotal)} \r\n Total = {genfunction.ccyFormat(genfunction.CalculateMembershipPackageTotal(memberPackage).TotalAmount)} \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n {PackageDiscriptionHeading}\r\n \r\n \r\n \r\n {ReactHtmlParser(GetMembershipPackageDis(props.membershipPackage.Description))}\r\n \r\n\r\n \r\n {readmorebtnText}\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Show Memberships Start */}\r\n\r\n \r\n\r\n {/* Show Memberships End */}\r\n\r\n \r\n\r\n\r\n\r\n {/* Add/Edit Person Dialog Start */}\r\n\r\n \r\n\r\n \r\n \r\n {state.memberpackageDetail.popupTitle}\r\n \r\n \r\n \r\n\r\n\r\n \r\n\r\n {/* Membership UDFs */}\r\n \r\n \r\n {state.memberpackageDetail.membershipTypeID && state.memberpackageDetail.membershipTypeID > 0\r\n && props.membershipPackage.hasOwnProperty(\"MembershipProducts\") ? props.membershipPackage.MembershipProducts.map((membershipProduct) => {\r\n\r\n return membershipProduct.MembershipTypeID && membershipProduct.MembershipTypeID === state.memberpackageDetail.membershipTypeID ?\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Add/Edit Person Dialog End */}\r\n\r\n\r\n {/* Confirmation Box Start*/}\r\n
\r\n );\r\n};","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { MembershipHeader, MembershipTypes } from './components';\r\nimport { actionGetMembershipPackage } from 'actions';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Grid } from '@material-ui/core';\r\nconst { Membershipheadernewmsg, Membershipheaderrenewmsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n }\r\n}));\r\n\r\nconst Memberships = (props) => {\r\n\r\n const constnextredirect = () => {\r\n props.history.push({\r\n pathname: '/checkout'\r\n })\r\n }\r\n\r\n let shopcartmember = false;\r\n let membershipPackage;\r\n let isRenewPackage = false;\r\n const dispatch = useDispatch();\r\n\r\n const GetMemberShip = () => {\r\n\r\n let membership;\r\n\r\n if (membershippackagesreducer.membershipPackage && membershippackagesreducer.membershipPackage.MembershipPackageID == props.match.params.id) {\r\n membership = membershippackagesreducer.membershipPackage;\r\n\r\n if (props.match.path == \"/memberships/join/:id\") {\r\n //original shopcartmember = false;\r\n shopcartmember = true;\r\n\r\n }\r\n else {\r\n shopcartmember = true;\r\n }\r\n }\r\n else if (membershipPackages && membershipPackages.length > 0 && membershipPackages.find(x => x.MembershipPackageID == parseInt(props.match.params.id)) !== undefined) {\r\n membership = membershipPackages.find(x => x.MembershipPackageID == props.match.params.id);\r\n shopcartmember = true;\r\n }\r\n else {\r\n membership = membershippackagesreducer.membershipPackage;\r\n shopcartmember = false;\r\n }\r\n\r\n if (props.match.path == \"/memberships/renew/:id\") {\r\n isRenewPackage = true;\r\n }\r\n\r\n return membership;\r\n }\r\n\r\n\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const membershippackagesreducer = useSelector(state => state.reducerMembershipPackages);\r\n membershipPackage = GetMemberShip();\r\n\r\n useEffect(() => {\r\n if (props.match.path == \"/memberships/join/:id\") {\r\n actionGetMembershipPackage(dispatch, props.match.params.id);\r\n }\r\n }, []);\r\n\r\n const GetMembershipTypes = () => {\r\n let membershipTypesID = \"\";\r\n if (membershipPackage && membershipPackage.MembershipProducts && membershipPackage.MembershipProducts.length > 0) {\r\n membershipPackage.MembershipProducts.filter(x => x.MembershipType === \"Membership\").map(m => {\r\n\r\n if (membershipTypesID.length == 0) {\r\n membershipTypesID += m.MembershipTypeID;\r\n }\r\n else {\r\n membershipTypesID += \",\" + m.MembershipTypeID;\r\n }\r\n });\r\n }\r\n\r\n return membershipTypesID;\r\n }\r\n\r\n return (\r\n\r\n \r\n \r\n { DeletePerson(membershipProduct.MembershipTypeID, membership) }}\r\n color={\"error\"}\r\n />\r\n { EditPerson(membership, membershipProduct.MembershipTypeID) }}\r\n />\r\n\r\n \r\n \r\n {membership.firstName} {membership.lastName}\r\n \r\n \r\n\r\n \r\n \r\n {membership.firstName} {membership.lastName}\r\n \r\n \r\n\r\n \r\n \r\n {membership.firstName} {membership.lastName}\r\n \r\n \r\n \r\n\r\n \r\n\r\n {membershipProduct.hasOwnProperty('Users') && membershipProduct.Users.length < membershipProduct.MinQuantity ?\r\n <>\r\n \r\n {ValidateMembershipMinQuantity} \r\n \r\n\r\n \r\n {ValidateMembershipMinQuantity} \r\n \r\n\r\n \r\n {ValidateMembershipMinQuantity} \r\n \r\n\r\n : ''\r\n }\r\n \r\n
\r\n )\r\n })\r\n\r\n :\r\n \r\n \r\n \r\n
\r\n : null\r\n })\r\n : null\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Memberships;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { MembershipHeader } from './components';\r\nimport { actionGetMembershipPackage, actionUpdatePackageForRenew } from 'actions';\r\nimport { actionGetMemberMemberships } from 'actions';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Button, Grid, Link, TextField, Typography, Hidden } from \"@material-ui/core\";\r\nimport { actionGetMemberValidation, actionResetMemberValidation, actionSetErrorMemberValidation } from 'actions';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport { actionSendEmail, actionResetSendEmail } from 'actions';\r\nimport ProcessingBox from '../Checkout/components/ProcessingBox';\r\nimport { actionGetCustomer, actionResetCustomer } from 'actions';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { actionGetCustomerUdfs } from 'actions';\r\n\r\nconst { TitleforloadingSendLostMemberemail, Subtitle1forloadingSendLostMemberemail, Subtitle2forloadingSendLostMemberemail, DisplayMemPackageDiscriptionCharacters,\r\n PhoneOrAddress1ForMemberValidate, RenewMembershipNotAllowedForNonPrimarMemberMsg, RenewMembershipIfUserHaveNoMembership } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n }\r\n}));\r\n\r\nconst MemberValidation = (props) => {\r\n\r\n const dispatch = useDispatch();\r\n const membershippackagesreducer = useSelector(state => state.reducerMembershipPackages);\r\n let membershipPackage = membershippackagesreducer.membershipPackage;\r\n const memberValidationReducer = useSelector(state => state.reducerMemberValidation);\r\n const reducerLostMember = useSelector(state => state.reducerLostMember);\r\n const memmemberhisps = useSelector(state => state.reducerMemberMemberships);\r\n const customer = useSelector(state => state.reducerCustomer);\r\n\r\n const [showMainValidate, setshowMainBalidate] = React.useState(false);\r\n const [showProgBox, setshowProgBox] = React.useState(false);\r\n const [showMainValidateAllFields, setshowMainValidateAllFields] = React.useState(false);\r\n\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n\r\n if (memberValidationReducer.membervalidation && memberValidationReducer.membervalidation.MemberValidation && memberValidationReducer.membervalidation.MemberValidation[0].hasOwnProperty(\"EmailMatched\")) {\r\n\r\n if (!memberValidationReducer.membervalidation.MemberValidation[0].EmailMatched && memberValidationReducer.membervalidation.MemberValidation[0].PhoneMatched == undefined) {\r\n actionSetErrorMemberValidation(dispatch, 'Email does not match.');\r\n setshowMainValidateAllFields(true);\r\n }\r\n\r\n if (showMainValidateAllFields) {\r\n if ((memberValidationReducer.membervalidation.MemberValidation[0].PhoneMatched == undefined || memberValidationReducer.membervalidation.MemberValidation[0].PhoneMatched == false)\r\n && (memberValidationReducer.membervalidation.MemberValidation[0].AddressMatched == undefined || memberValidationReducer.membervalidation.MemberValidation[0].AddressMatched == false)) {\r\n actionSetErrorMemberValidation(dispatch, 'Phone or Address 1 does not match.');\r\n setshowMainValidateAllFields(true);\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (reducerLostMember.emailsend || reducerLostMember.lostmemberError.length > 0) {\r\n setshowProgBox(false);\r\n }\r\n }, [reducerLostMember])\r\n\r\n useEffect(() => {\r\n if (memberValidationReducer.membervalidation && memberValidationReducer.membervalidation.MemberValidation && validationfields.email && validationfields.email.trim().length > 0) {\r\n\r\n actionGetCustomer(dispatch, memberValidationReducer.membervalidation.MemberValidation[0].CustomerID, validationfields.email);\r\n\r\n // if (memberValidationReducer.loading) {\r\n // actionResetMemberValidation(dispatch);\r\n // }\r\n }\r\n }, [memberValidationReducer.membervalidation]);\r\n\r\n const GetCustomersIDList = () => {\r\n let ids = \"\";\r\n\r\n ids += customer.customer[0].CustomerID;\r\n\r\n if (customer.customer[0].hasOwnProperty(\"LinkedIndividuals\") && customer.customer[0].LinkedIndividuals.length > 0) {\r\n\r\n customer.customer[0].LinkedIndividuals.forEach(c => {\r\n ids += \",\" + c.CustomerID;\r\n });\r\n }\r\n\r\n return ids;\r\n }\r\n useEffect(() => {\r\n\r\n if (customer.customer && customer.customer.length > 0) {\r\n\r\n //Call Memberships with member ID\r\n if (memmemberhisps && memmemberhisps.membermerberhips) {\r\n actionGetMemberMemberships(dispatch, customer.customer[0].CustomerID);\r\n actionGetCustomerUdfs(dispatch, GetCustomersIDList());\r\n }\r\n }\r\n\r\n if (customer.customerError && customer.customerError.length) {\r\n seterrorMsg(customer.customerError);\r\n }\r\n\r\n }, [customer.customer]);\r\n\r\n useEffect(() => {\r\n\r\n if (memmemberhisps.membermerberhips && memmemberhisps.membermerberhips.length > 0 && memberValidationReducer.membervalidation &&\r\n memberValidationReducer.membervalidation.MemberValidation) {\r\n if (memmemberhisps.membermerberhips[0].Memberships && memmemberhisps.membermerberhips[0].Memberships.length > 0) {\r\n\r\n if (memmemberhisps.membermerberhips[0].CustomerID !== customer.customer[0].CustomerID) {\r\n actionSetErrorMemberValidation(dispatch, RenewMembershipNotAllowedForNonPrimarMemberMsg);\r\n }\r\n else {\r\n\r\n actionUpdatePackageForRenew(dispatch, props.match.params.id, memmemberhisps, customer.customer);\r\n\r\n props.history.push({\r\n pathname: '/memberships/renew/' + props.match.params.id\r\n })\r\n }\r\n }\r\n\r\n if (!memmemberhisps.membermerberhips[0].hasOwnProperty('Memberships')) {\r\n actionSetErrorMemberValidation(dispatch, RenewMembershipIfUserHaveNoMembership);\r\n }\r\n\r\n }\r\n }, [memmemberhisps.membermerberhips]);\r\n\r\n const [validationfields, setvalidationfields] = React.useState({\r\n lastName: '',\r\n email: '',\r\n memberNo: '',\r\n phone: '',\r\n address1: ''\r\n });\r\n\r\n //Intialize States\r\n const [errorstate, seterrorstate] = React.useState({\r\n initialerrorstate: {\r\n last_name: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n email: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n member_no: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n phone: {\r\n errorstate: false,\r\n errortext: \"\"\r\n },\r\n address1: {\r\n errorstate: false,\r\n errortext: \"\"\r\n }\r\n }\r\n });\r\n\r\n const fieldhandleChange = (event) => {\r\n\r\n if (event.target.name === \"lname\") {\r\n setvalidationfields({ ...validationfields, lastName: event.target.value });\r\n }\r\n\r\n if (event.target.name === \"email\") {\r\n setvalidationfields({ ...validationfields, email: event.target.value });\r\n }\r\n\r\n if (event.target.name === \"memberno\") {\r\n setvalidationfields({ ...validationfields, memberNo: event.target.value });\r\n }\r\n\r\n if (event.target.name === \"phone\") {\r\n setvalidationfields({ ...validationfields, phone: event.target.value });\r\n }\r\n\r\n\r\n if (event.target.name === \"address1\") {\r\n setvalidationfields({ ...validationfields, address1: event.target.value });\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.match.path == \"/memberships/membervalidate/:id\") {\r\n actionGetMembershipPackage(dispatch, props.match.params.id);\r\n }\r\n }, []);\r\n\r\n const ValidateMember = () => {\r\n\r\n var valFields = { ...validationfields };\r\n var initialerrstate = { ...errorstate.initialerrorstate };\r\n\r\n\r\n if (valFields.lastName.trim().length < 1) {\r\n initialerrstate.last_name.errorstate = true;\r\n initialerrstate.last_name.errortext = \"Last Name is required.\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.last_name.errorstate = false;\r\n initialerrstate.last_name.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n\r\n\r\n if (showMainValidateAllFields == false) {\r\n if (valFields.email.trim().length < 1) {\r\n initialerrstate.email.errorstate = true;\r\n initialerrstate.email.errortext = \"Email is required.\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.email.errorstate = false;\r\n initialerrstate.email.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n }\r\n\r\n\r\n if (valFields.memberNo.trim().length < 1) {\r\n initialerrstate.member_no.errorstate = true;\r\n initialerrstate.member_no.errortext = \"Member No is required.\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.member_no.errorstate = false;\r\n initialerrstate.member_no.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n\r\n if (showMainValidateAllFields) {\r\n\r\n if (valFields.phone.trim().length < 1 && valFields.address1.trim().length < 1) {\r\n initialerrstate.phone.errorstate = true;\r\n initialerrstate.phone.errortext = \"Phone No is missing.\";\r\n\r\n initialerrstate.address1.errorstate = true;\r\n initialerrstate.address1.errortext = \"Address 1 is missing.\";\r\n\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.phone.errorstate = false;\r\n initialerrstate.phone.errortext = \"\";\r\n initialerrstate.address1.errorstate = false;\r\n initialerrstate.address1.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n\r\n\r\n if (valFields.lastName.trim().length > 0 && valFields.memberNo.trim().length > 0 && (valFields.phone.trim().length > 0 || valFields.address1.trim().length > 0)) {\r\n actionGetMemberValidation(dispatch, validationfields.memberNo, validationfields.lastName, '', validationfields.phone, validationfields.address1);\r\n }\r\n }\r\n else {\r\n if (valFields.lastName.trim().length > 0 && valFields.lastName.trim().length > 0 && valFields.memberNo.trim().length > 0) {\r\n actionGetMemberValidation(dispatch, validationfields.memberNo, validationfields.lastName, validationfields.email);\r\n }\r\n }\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n actionResetMemberValidation(dispatch);\r\n\r\n if (customer.customerError && customer.customerError.length) {\r\n actionResetCustomer(dispatch);\r\n }\r\n\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const errorcancelhandleemail = () => {\r\n actionResetSendEmail(dispatch);\r\n }\r\n\r\n const ShowEmailView = () => {\r\n setshowMainBalidate(true);\r\n setshowMainValidateAllFields(false);\r\n }\r\n\r\n const ShowValidateView = () => {\r\n setshowMainBalidate(false);\r\n actionResetSendEmail(dispatch);\r\n\r\n setvalidationfields({ ...validationfields, lastName: '' });\r\n setvalidationfields({ ...validationfields, email: '' });\r\n setvalidationfields({ ...validationfields, memberNo: '' });\r\n }\r\n\r\n const SendEmailToCst = () => {\r\n\r\n var valFields = { ...validationfields };\r\n var initialerrstate = { ...errorstate.initialerrorstate };\r\n\r\n if (valFields.lastName.trim().length < 1) {\r\n initialerrstate.last_name.errorstate = true;\r\n initialerrstate.last_name.errortext = \"Last Name is required.\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.last_name.errorstate = false;\r\n initialerrstate.last_name.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n\r\n\r\n if (valFields.email.trim().length < 1) {\r\n initialerrstate.email.errorstate = true;\r\n initialerrstate.email.errortext = \"Email is required.\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n else {\r\n initialerrstate.email.errorstate = false;\r\n initialerrstate.email.errortext = \"\";\r\n seterrorstate({ ...errorstate, initialerrstate });\r\n }\r\n\r\n\r\n if (valFields.lastName.trim().length > 0 && valFields.email.trim().length > 0) {\r\n var request = [{\r\n \"LastName\": valFields.lastName,\r\n \"Email\": valFields.email\r\n }]\r\n\r\n setshowProgBox(true);\r\n actionSendEmail(dispatch, request);\r\n }\r\n\r\n }\r\n\r\n const [showMoreInfo, setShowMoreInfo] = React.useState(false);\r\n const [readmorebtnText, setreadmorebtnText] = React.useState('Read More');\r\n\r\n const ShowMoreInfoClick = () => {\r\n\r\n if (readmorebtnText === 'Read More') {\r\n setShowMoreInfo(true);\r\n setreadmorebtnText('Read Less');\r\n }\r\n else {\r\n setShowMoreInfo(false);\r\n setreadmorebtnText('Read More');\r\n }\r\n }\r\n\r\n\r\n const GetMembershipPackageDis = (discription) => {\r\n\r\n if (discription) {\r\n if (showMoreInfo) {\r\n return discription.substring(0, discription.length - 1);\r\n }\r\n\r\n return discription.substring(0, DisplayMemPackageDiscriptionCharacters);\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n return (\r\n\r\n \r\n 0 ? memberValidationReducer.membervalidationError : ''}\r\n open={memberValidationReducer.membervalidationError.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n\r\n 0 ? reducerLostMember.lostmemberError : ''}\r\n open={reducerLostMember.lostmemberError.length > 0 ? true : false} handleclose={errorcancelhandleemail} />\r\n\r\n 0 ? errorMsg : ''}\r\n open={errorMsg && errorMsg.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n\r\n \r\n \r\n \r\n {ReactHtmlParser(GetMembershipPackageDis(membershipPackage.Description))}\r\n \r\n\r\n \r\n {readmorebtnText}\r\n \r\n \r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n {ReactHtmlParser(GetMembershipPackageDis(membershipPackage.Description))}\r\n \r\n \r\n {readmorebtnText}\r\n \r\n \r\n \r\n\r\n\r\n\r\n {\r\n showMainValidateAllFields ?\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default MemberValidation;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { useSelector } from 'react-redux';\r\nimport { Typography, TableCell, IconButton, TableRow, Grid } from '@material-ui/core';\r\nimport InfoIcon from '@material-ui/icons/Info'\r\nimport { genfunction } from 'helpers'\r\n\r\nimport NumberSpinner from 'components/InputControls/NumberSpinner';\r\nconst { DisplayGATicketExpiryValidity } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n header: {\r\n textAlign: \"center\",\r\n padding: 10,\r\n\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n items: {\r\n padding: 20\r\n }\r\n}));\r\n\r\nconst GAGroupItem = props => {\r\n\r\n const classes = useStyles();\r\n\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n\r\n const getShopcartTicketQty = (ProductID) => {\r\n let ticket = gatickets.find(t => t.ProductID === ProductID);\r\n if (ticket)\r\n return ticket.Quantity\r\n else\r\n return 0;\r\n }\r\n\r\n return (\r\n \r\n \r\n To find your existing membership, please enter following information to validate.\r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n \r\n {PhoneOrAddress1ForMemberValidate} \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n :\r\n \r\n {showMainValidate ?\r\n
\r\n }\r\n \r\n\r\n \r\n Can't remember your member #? Please enter your last name + email and we'll send you an email with the member number to verify and renew.\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n {!reducerLostMember.emailsend ? \r\n \r\n : null}\r\n\r\n {reducerLostMember.emailsend ?\r\n \r\n\r\n
:\r\n \r\n \r\n Email sent successfully!\r\n \r\n \r\n \r\n \r\n
: null}\r\n \r\n \r\n To find your existing membership, please enter following information to validate.\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n }\r\n \r\n {props.GroupHeader} \r\n
\r\n );\r\n};\r\n\r\nexport default GAGroupItem;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Container, Link, Button, Typography, TableCell, TableRow, Table, TableBody } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers'\r\nimport * as underscore from 'underscore'\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions/actionAppLoader';\r\nimport { actionGetGATickets, actionUpdateQuantityToProduct } from 'actions';\r\nimport { actionShopCartAddGATicket } from 'actions';\r\nimport ErrorHandling from 'components/ErrorHandling/ErrorHandling';\r\nimport DialogeBox from 'components/DialogeBox/DialogeBox';\r\nimport GAGroupItem from './components/GAGroupItem'\r\nimport { Hidden } from '@material-ui/core';\r\nimport { actionResetPaymentTransaction } from 'actions';\r\n\r\nconst { DefaultGATicketDisplayAreaNo, TicketPageHeader, OrderItemsInCartError } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(2)\r\n },\r\n headerText: {\r\n paddingBottom: 15,\r\n textAlign: \"center\"\r\n },\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n footertablecell: {\r\n paddingRight: 0\r\n }\r\n}));\r\n\r\nconst useQuery = () => {\r\n return new URLSearchParams(useLocation().search);\r\n}\r\n\r\nconst GATickets = (props) => {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [tnc, settnc] = useState({\r\n tncOpen: false,\r\n tncMessage: \"\",\r\n })\r\n const [DisplayArea, setDisplayArea] = useState(DefaultGATicketDisplayAreaNo);\r\n const GATickets = useSelector(state => state.reducerGaTicket.GATickets);\r\n const GATicketsError = useSelector(state => state.reducerGaTicket.GATicketsError);\r\n const GADisplayAreas = useSelector(state => state.reducerGaTicket.GADisplayAreas);\r\n const GACouponCode = useQuery().get(\"coupon\");\r\n\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const paymenttranstate = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n useEffect(() => {\r\n if (events && events.length == 0 && membershipPackages && membershipPackages.length == 0 && gaTickets && gaTickets.length == 0 &&\r\n giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0 && paymenttranstate.hasOwnProperty(\"ReceiptNo\") && paymenttranstate.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (GATickets && GATickets.length > 0) {\r\n actionEndAppLoader(dispatch);\r\n }\r\n }, [GATickets])\r\n\r\n useEffect(() => {\r\n seterrorMsg(GATicketsError);\r\n }, [GATicketsError])\r\n\r\n useEffect(() => {\r\n actionStartAppLoader(dispatch);\r\n if (props.match.path == \"/gatickets/Area/:id\") {\r\n var areaNo = props.match.params.id;\r\n setDisplayArea(areaNo);\r\n actionGetGATickets(dispatch, areaNo, GACouponCode);\r\n }\r\n else\r\n actionGetGATickets(dispatch, DisplayArea, GACouponCode);\r\n }, [])\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const settnchandler = (ProductID) => {\r\n let ticket = GATickets.find(x => x.ProductID === ProductID);\r\n if (ticket) {\r\n settnc({\r\n tncOpen: true,\r\n tncMessage: ReactHtmlParser(genfunction.replaceEscapeCharacters(ticket.TermsConditions))\r\n })\r\n }\r\n else {\r\n settnc({\r\n tncOpen: false,\r\n tncMessage: \"\"\r\n })\r\n }\r\n }\r\n\r\n const changeQuantityHandler = (refrence, value) => {\r\n actionUpdateQuantityToProduct(dispatch, refrence.tourProductID, value);\r\n }\r\n\r\n const getGroupedGATickets = () => {\r\n\r\n var SellTickets = GATickets.filter(ticket => new Date().getTime() >= new Date(ticket.ProductSellStartDate).getTime() && new Date().getTime() <= new Date(ticket.ProductSellEndDate).getTime());\r\n SellTickets = SellTickets.filter(ticket => DisplayArea == 0 || ticket.DisplayArea == DisplayArea)\r\n let sortticket = underscore.sortBy(SellTickets, ticket => ticket.GATicketDepartments[0].DepartmentSortOrder);\r\n let group = underscore.groupBy(sortticket, (ticket) => { return ticket.GATicketDepartments[0].DepartmentName; });\r\n return group;\r\n }\r\n\r\n const getTotalAmount = () => {\r\n let amount = {\r\n tax: 0,\r\n total: 0,\r\n }\r\n\r\n GATickets.forEach(ticket => {\r\n amount.tax += ticket.TaxAmount;\r\n amount.total += ticket.TotalAmount;\r\n });\r\n\r\n return amount;\r\n }\r\n\r\n const getDisplayAreaText = () => {\r\n var DA = GADisplayAreas.find(da => da.DisplayAreaNo == DisplayArea && da.ShowOnline === true);\r\n if (DA)\r\n return DA.DisplayText;\r\n else\r\n return \"\";\r\n }\r\n\r\n const AddToCartHandler = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n var tickets = GATickets.filter(ticket => ticket.Quantity > 0);\r\n if (tickets && tickets.length > 0) {\r\n var minQtytickets = GATickets.find(ticket => ticket.Quantity > 0 && ticket.Quantity < ticket.MinQuantity);\r\n if (minQtytickets) {\r\n seterrorMsg(minQtytickets.ProductName + \" (Please select at least \" + minQtytickets.MinQuantity + \" quantity)\");\r\n return;\r\n }\r\n else {\r\n let newtickets = tickets.map(ticket => ({ ...ticket, CouponCodeApplied: (ticket.OriginalPrice && ticket.Price < ticket.OriginalPrice) ? GACouponCode : null, OriginalPrice: (ticket.OriginalPrice ? ticket.OriginalPrice : ticket.Price) }))\r\n actionShopCartAddGATicket(dispatch, newtickets);\r\n props.history.push('/checkout');\r\n }\r\n }\r\n else {\r\n seterrorMsg(\"Please select quantity first\");\r\n }\r\n }\r\n\r\n return (\r\n \r\n {props.GroupItems.map(ticket => (\r\n \r\n \r\n \r\n { props.InfoClickHandler(ticket.ProductID) }}\r\n >\r\n \r\n \r\n {ticket.ProductName} {genfunction.ccyFormat(ticket.Price)} \r\n {DisplayGATicketExpiryValidity ?\r\n {'Valid until ' + genfunction.GetEventDate(ticket.GATicketExpiryDate)} \r\n : \"\"}\r\n {ticket.OriginalPrice && (ticket.OriginalPrice > ticket.Price) ?\r\n \r\n \r\n \r\n { props.ChangeQuantityHandler(refrence, value) }}> \r\n \r\n \r\n ))}\r\n
\r\n \r\n {'You Save ' + genfunction.ccyFormat((ticket.OriginalPrice - ticket.Price))} \r\n
\r\n : \"\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Please go to find my booking page to Update Booking.\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ManageCheckout;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Typography, Grid, Container, Button, Hidden } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n actionShopCartAddEventWithTourHold, actionShopCartSetManageMyBooking, actionShopCartSetMmbAmountToPay, actionShopCartSetEnteredAmountToPay,\r\n actionShopCartResetError, actionShopCartResetMembership, actionShopCartSetRefundType, actionShopCartResetIDME\r\n} from 'actions';\r\nimport { actionResetBooking, actionUpdateQuantity } from 'actions';\r\nimport { NumberSpinner } from '../../components/InputControls';\r\nimport { genfunction } from '../../helpers';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\nimport { actionGetExtraItem, actionIncreaseQuantity, actionResetExtraItems } from 'actions';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nconst { ModifyTicketsHeading, RefundCreditCardButton, RefundGiftCardButton } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n },\r\n hideBtn: {\r\n display: 'none'\r\n }\r\n}));\r\n\r\nconst ModifyTicketsAddons = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n const currentDateEvent = useSelector(state => state.reducerExtraItems.extraItem);\r\n const cartEvents = useSelector(state => state.reducerShopCart.events);\r\n const bookingTypes = useSelector(state => state.reducerBookingTypes.bookingTypes);\r\n let bookingID = reducerBooking && reducerBooking.booking[0] ? reducerBooking.booking[0].BookingTypeID : 0;\r\n const bkngType = bookingTypes && bookingTypes.length > 0 ? bookingTypes.filter(x => x.BookingTypeID == bookingID)[0] : null;\r\n const extramItemsstate = useSelector(state => state.reducerExtraItems);\r\n const shopcartreducer = useSelector(state => state.reducerShopCart);\r\n\r\n const transactionfee = useSelector(state => state.reducerTransactionFee);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n let cashlesstotal = cashless.map(({ HoldAmount }) => HoldAmount).reduce((sum, i) => sum + i, 0);\r\n \r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [isredirectclicked, setisredirectclicked] = useState(false);\r\n const [open, setOpen] = React.useState(false);\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const errorcancelhandle = () => {\r\n actionShopCartResetError(dispatch);\r\n seterrorMsg(\"\");\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (reducerBooking.booking) {\r\n if (reducerBooking.booking.length < 1) {\r\n // props.history.push({\r\n // pathname: '/findmybooking'\r\n // })\r\n }\r\n }\r\n }, []);\r\n\r\n const changeQuantityHandler = (reference, quantity) => {\r\n\r\n if (cartEvents !== undefined && cartEvents.length > 0) {\r\n if (cartEvents[0].TourProducts.filter(x => x.AffectsCapacity).length > 0) {\r\n actionIncreaseQuantity(dispatch, reference.TourProductID, quantity, true, reference.MinimumTickets, reference.MaximumTickets);\r\n return;\r\n }\r\n }\r\n actionIncreaseQuantity(dispatch, reference.TourProductID, quantity, false, reference.MinimumTickets, reference.MaximumTickets);\r\n }\r\n\r\n const changeQuantityCurrentBooking = (reference, quantity) => {\r\n if (reducerBooking && reducerBooking.booking[0]) {\r\n if (quantity < reference.MinimumTickets) {\r\n seterrorMsg(\"Minimum tickets for this event is \" + reference.MinimumTickets + \".\")\r\n return;\r\n }\r\n\r\n actionUpdateQuantity(dispatch, reference.TourProductID, quantity);\r\n\r\n return;\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let tourevntID = props.location.toureventID ? props.location.toureventID : reducerBooking.booking[0] ? reducerBooking.booking[0].TourEventID : 0;\r\n let memcstRate = reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('CustomerCostRateID') ? reducerBooking.booking[0].CustomerCostRateID : 0;\r\n actionGetExtraItem(dispatch, tourevntID, true, memcstRate);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (extramItemsstate.loading == true) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n })\r\n\r\n const constredirecttofindmybpooking = () => {\r\n actionResetBooking(dispatch);\r\n actionResetExtraItems(dispatch);\r\n actionShopCartSetManageMyBooking(dispatch, false, true);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n const addeventstotourholdaction = () => {\r\n\r\n let filterdata = { ...currentDateEvent };\r\n filterdata.TourProducts = filterdata.TourProducts.filter(product => product.Quantity > 0);\r\n let cartdata = [...cartEvents];\r\n\r\n if (filterdata && filterdata.hasOwnProperty('BookingTypeID')) {\r\n let usealternamteMerchant = false;\r\n if (bkngType && bkngType.hasOwnProperty('UseAlternateMerchant')) {\r\n usealternamteMerchant = bkngType.UseAlternateMerchant;\r\n }\r\n\r\n filterdata.UseAlternateMerchant = usealternamteMerchant;\r\n\r\n }\r\n\r\n\r\n actionShopCartAddEventWithTourHold(dispatch, filterdata, cartdata);\r\n\r\n actionShopCartSetManageMyBooking(dispatch, true, true);\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (isredirectclicked && shopcartreducer.error.length < 1 && shopcartreducer.events && shopcartreducer.events.length > 0) {\r\n let amountToPay = returnproducts();\r\n\r\n amountToPay = addTransFeeWithBalance(amountToPay);\r\n\r\n actionShopCartSetMmbAmountToPay(dispatch, amountToPay);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: ''\r\n })\r\n }\r\n if (isredirectclicked && shopcartreducer.error.length > 0) {\r\n seterrorMsg(shopcartreducer.error);\r\n setisredirectclicked(false);\r\n }\r\n }, [cartEvents, shopcartreducer.error.length > 0]);\r\n\r\n const addTransFeeWithBalance = (balanceOwe) => {\r\n\r\n if (transactionfee.transactionFee && transactionfee.transactionFee.length > 0) {\r\n if (transactionfee.transactionFee[0].TransactionFeeByDefault) {\r\n let transFee = genfunction.TransactionFeeForPartialPayment(transactionfee.transactionFee[0], balanceOwe, cashlesstotal)\r\n\r\n if (transFee > 0) {\r\n actionShopCartSetEnteredAmountToPay(dispatch, balanceOwe);\r\n return genfunction.Rounded(balanceOwe + transFee);\r\n }\r\n }\r\n }\r\n return balanceOwe;\r\n }\r\n\r\n const constredirecttomanagecheckout = () => {\r\n\r\n if (ValidateQuanity()) {\r\n let amounttop = returnproducts();\r\n\r\n let NewQty = currentDateEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n\r\n let PreviousQtyChanges = false;\r\n\r\n if (reducerBooking.booking[0].BookingProducts) {\r\n PreviousQtyChanges = reducerBooking.booking[0].BookingProducts.filter(x => x.isModify).length > 0 ? true : false;\r\n }\r\n\r\n if (amounttop === 0 && NewQty == 0 && !PreviousQtyChanges) {\r\n seterrorMsg(\"No tickets changes are applied.\")\r\n return;\r\n }\r\n\r\n if (amounttop >= 0) {\r\n\r\n addeventstotourholdaction();\r\n setisredirectclicked(true);\r\n }\r\n else {\r\n handleClickOpen();\r\n }\r\n }\r\n\r\n }\r\n\r\n const ValidateQuanity = () => {\r\n let MinTicket = bkngType.MinimumTickets\r\n let MaxTicket = bkngType.MaximumTickets;\r\n\r\n let CartQty = 0;\r\n let NewQty = 0;\r\n let TotalTicketCount = 0;\r\n if (cartEvents && cartEvents.length > 0) {\r\n\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == currentDateEvent.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0) {\r\n CartQty = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n NewQty = currentDateEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n\r\n TotalTicketCount = CartQty + NewQty;\r\n\r\n if (currentDateEvent.SeatsAvailable == 0 || currentDateEvent.BookNowOption != \"Book Now\") {\r\n seterrorMsg(\"Tickets not longer available, please choose another time\");\r\n return false;\r\n }\r\n else if (NewQty > currentDateEvent.SeatsAvailable) {\r\n seterrorMsg(\"Maximum of \" + currentDateEvent.SeatsAvailable + \" tickets available\");\r\n return false;\r\n }\r\n else if (TotalTicketCount > MaxTicket) {\r\n seterrorMsg(\"Maximum of \" + MaxTicket + \" tickets allowed\")\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n const applyrefund = (type) => {\r\n\r\n addeventstotourholdaction();\r\n actionShopCartSetMmbAmountToPay(dispatch, returnproducts());\r\n actionShopCartSetRefundType(dispatch, type);\r\n\r\n props.history.push({\r\n pathname: '/managecheckout',\r\n refundType: type\r\n })\r\n }\r\n\r\n const CalculateMaxTickets = (TourProductID) => {\r\n let shopCartConsumed = 0;\r\n\r\n if (cartEvents && cartEvents.length > 0) {\r\n let cartTourEvent = cartEvents.find(x => x.TourEventID == currentDateEvent.TourEventID);\r\n if (cartTourEvent && cartTourEvent.TourProducts.length > 0 && cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).length > 0) {\r\n shopCartConsumed = cartTourEvent.TourProducts.filter(p => p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = b.Quantity === undefined ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n }\r\n\r\n let consumedQty = 0;\r\n if (currentDateEvent.TourProducts.filter(p => p.TourProductID != TourProductID && p.AffectsCapacity).length > 0) {\r\n consumedQty = currentDateEvent.TourProducts.filter(p => p.TourProductID != TourProductID && p.AffectsCapacity).reduce((a, b) => {\r\n let aqty = a.Quantity === undefined ? 0 : a.Quantity;\r\n let bqty = (b === undefined || b.Quantity === undefined) ? 0 : b.Quantity;\r\n let newobj = { Quantity: aqty + bqty }\r\n return newobj;\r\n }).Quantity;\r\n }\r\n\r\n return bkngType !== undefined ? bkngType.MaximumTickets - consumedQty - shopCartConsumed : 0;\r\n }\r\n\r\n const totalpaid = () => {\r\n let total = 0;\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].BookingPayments && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n total = reducerBooking.booking[0].BookingPayments.map(({ PaymentAmount }) => PaymentAmount).reduce((sum, i) => sum + i, 0);\r\n }\r\n\r\n return total;\r\n }\r\n\r\n const returnproducts = () => {\r\n let total = 0;\r\n let actualTotal = 0;\r\n let newTotal = 0;\r\n let eventTotal = currentDateEvent.TotalAmount ? currentDateEvent.TotalAmount : 0;\r\n\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].BookingPayments && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n actualTotal = parseFloat(Math.round(reducerBooking.booking[0].BookingProducts.map(({ ProductLinePriceInclTax }) => ProductLinePriceInclTax).reduce((sum, i) => sum + i, 0) * 100) / 100).toFixed(2);\r\n reducerBooking.booking[0].BookingProducts.map(prod => {\r\n if (prod.hasOwnProperty('isModify') && prod.isModify) {\r\n newTotal += prod.newQuantity * (prod.ProductLinePriceInclTax / prod.Quantity);\r\n }\r\n else {\r\n newTotal += prod.ProductLinePriceInclTax;\r\n }\r\n })\r\n\r\n total = parseFloat(Math.round((actualTotal - newTotal) * 100) / 100).toFixed(2);\r\n }\r\n\r\n return eventTotal - parseFloat(total);\r\n }\r\n\r\n const totalpayments = () => {\r\n let total = 0;\r\n if (reducerBooking.booking && reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty('BookingPayments') && reducerBooking.booking[0].BookingPayments.length > 0) {\r\n total = reducerBooking.booking[0].BookingPayments.length;\r\n }\r\n\r\n return total;\r\n }\r\n\r\n\r\n const eligibletxtReturnClass = () => {\r\n let eligibleTxt = \"\";\r\n if (reducerBooking.booking[0]) {\r\n if (reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].AllowRefundToGiftcardOnly) {\r\n\r\n if (reducerBooking.booking[0].hasOwnProperty('PaymentToken')) {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(Math.abs(returnproducts())) : 0) + \" to a gift card or card on file \" + (reducerBooking.booking[0].PaymentDescription !== undefined ? reducerBooking.booking[0].PaymentDescription : '');\r\n }\r\n else {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(Math.abs(returnproducts())) : 0) + \" to a gift card.\";\r\n }\r\n }\r\n else if (reducerBooking.booking[0].AllowRefundToGiftcardOnly && reducerBooking.booking[0].AllowRefunds == false) {\r\n eligibleTxt = \"You are eligible for a refund of\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(Math.abs(returnproducts())) : 0) + \" to a gift card.\";\r\n }\r\n else if (reducerBooking.booking[0] && reducerBooking.booking[0].AllowRefunds && totalpayments() === 1 && reducerBooking.booking[0].hasOwnProperty('PaymentToken')) {\r\n eligibleTxt = \"You are eligible for a refund of \" + (reducerBooking.booking[0] ? genfunction.ccyFormat(Math.abs(returnproducts())) : 0) + \" through card on file \" + (reducerBooking.booking[0].PaymentDescription !== undefined ? reducerBooking.booking[0].PaymentDescription : '');\r\n }\r\n\r\n return eligibleTxt;\r\n }\r\n }\r\n\r\n const redirecttofindmybpooking = () => {\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n return (\r\n\r\n\r\n //Desktop and Laptop (smDown)\r\n //Tablet (xsDown mdUp)\r\n //Mobile (smUp)\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n {ModifyTicketsHeading}\r\n \r\n \r\n\r\n \r\n \r\n {ModifyTicketsHeading}\r\n \r\n \r\n\r\n \r\n \r\n {ModifyTicketsHeading}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Current Tickets\r\n \r\n \r\n\r\n \r\n \r\n Current Tickets\r\n \r\n \r\n\r\n \r\n \r\n Current Tickets\r\n \r\n \r\n\r\n \r\n \r\n These are the current tickets in your existing order. You can either remove items here and/or use the section below to add any available tickets to your order.\r\n \r\n\r\n \r\n\r\n \r\n \r\n These are the current tickets in your existing order. You can either remove items here and/or use the section below to add any available tickets to your order.\r\n \r\n\r\n \r\n\r\n \r\n \r\n These are the current tickets in your existing order. You can either remove items here and/or use the section below to add any available tickets to your order.\r\n \r\n\r\n \r\n\r\n\r\n \r\n {reducerBooking.booking[0] && reducerBooking.booking[0].hasOwnProperty(\"BookingProducts\") ?\r\n reducerBooking.booking[0].BookingProducts.map((product, i) => {\r\n\r\n return product.Quantity ?\r\n\r\n \r\n\r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.Price)} \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n {product.IsRefundable === false ? \"Not Refundable\" : \"\"} \r\n \r\n\r\n \r\n {product.IsRefundable === false ? \"Not Refundable\" : \"\"} \r\n \r\n\r\n \r\n {product.IsRefundable === false ? \"Not Refundable\" : \"\"} \r\n \r\n\r\n \r\n \r\n : null\r\n }) : null}\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n Tickets Available\r\n \r\n \r\n\r\n \r\n \r\n Tickets Available\r\n \r\n \r\n\r\n \r\n \r\n Tickets Available\r\n \r\n \r\n\r\n \r\n \r\n Use plus button to add tickets to this reservation.\r\n \r\n \r\n\r\n \r\n \r\n Use plus button to add tickets to this reservation.\r\n \r\n \r\n\r\n \r\n \r\n Use plus button to add tickets to this reservation.\r\n \r\n \r\n\r\n\r\n \r\n {currentDateEvent.hasOwnProperty(\"TourProducts\") ?\r\n currentDateEvent.TourProducts.map((product, i) => {\r\n\r\n return product.AffectsCapacity && product.AvailableOnline && product.PriceMatrix !== undefined && product.PriceMatrix.length > 0\r\n && product.TourProductID !== bkngType.ChaperoneTourProductID ?\r\n\r\n \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n \r\n\r\n \r\n \r\n \r\n {\r\n \r\n {currentDateEvent.hasOwnProperty('SeatsAvailable') && currentDateEvent.SeatsAvailable < 1 ? \"No available tickets\" : \"\"} \r\n \r\n\r\n \r\n {currentDateEvent.hasOwnProperty('SeatsAvailable') && currentDateEvent.SeatsAvailable < 1 ? \"No available tickets\" : \"\"} \r\n \r\n\r\n \r\n {currentDateEvent.hasOwnProperty('SeatsAvailable') && currentDateEvent.SeatsAvailable < 1 ? \"No available tickets\" : \"\"} \r\n \r\n\r\n }\r\n \r\n : null\r\n }) : null}\r\n\r\n \r\n \r\n Use plus and minus buttons to adjust selected add ons.\r\n \r\n \r\n\r\n \r\n \r\n Use plus and minus buttons to adjust selected add ons.\r\n \r\n \r\n\r\n \r\n \r\n Use plus and minus buttons to adjust selected add ons.\r\n \r\n \r\n\r\n {currentDateEvent.hasOwnProperty(\"TourProducts\") ?\r\n currentDateEvent.TourProducts.map((product, i) => {\r\n\r\n return product.AffectsCapacity === false && product.AvailableOnline && product.PriceMatrix !== undefined && product.PriceMatrix.length > 0\r\n && product.TourProductID !== bkngType.ChaperoneTourProductID ?\r\n\r\n \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n {product.TourProductName + ' ' + genfunction.ccyFormat(product.PriceMatrix[0].Price)} \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n : null\r\n }) : null}\r\n \r\n \r\n\r\n \r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n \r\n \r\n Booking Summary\r\n \r\n \r\n\r\n \r\n \r\n Current Booking Cost : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n Current Booking Cost : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n Current Booking Cost : {reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0}\r\n \r\n \r\n\r\n \r\n \r\n New Total Cost : {genfunction.ccyFormat(returnproducts())}\r\n \r\n \r\n\r\n \r\n \r\n New Total Cost : {genfunction.ccyFormat(returnproducts())}\r\n \r\n \r\n\r\n \r\n \r\n New Total Cost : {genfunction.ccyFormat(returnproducts())}\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {\"Refund Transaction\"} \r\n \r\n \r\n\r\n\r\n \r\n \r\n {\"Your previous payment: \" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0)}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(returnproducts()))}\r\n \r\n \r\n\r\n \r\n \r\n {\"Your previous payment:\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0)}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(returnproducts()))}\r\n \r\n \r\n\r\n \r\n \r\n {\"Your previous payment:\" + (reducerBooking.booking[0] ? genfunction.ccyFormat(totalpaid()) : 0)}\r\n \r\n \r\n {\"Now we owe you: \" + genfunction.ccyFormat(Math.abs(returnproducts()))}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"medium\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds || reducerBooking.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds || reducerBooking.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n applyrefund('GiftCardRefund')}\r\n variant=\"contained\" size=\"small\" color=\"primary\"\r\n className={reducerBooking.booking[0] && (reducerBooking.booking[0].AllowRefunds || reducerBooking.booking[0].AllowRefundToGiftcardOnly) ? '' : classes.hideBtn} >\r\n {RefundGiftCardButton}\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n \r\n \r\n Please go to find my booking page to Update Booking.\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ModifyTicketsAddons;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, CardActions, Typography, Button, CardHeader } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n card: {\r\n \"&:hover\": {\r\n transform: 'scale(1.02)',\r\n WebkitTransform: 'scale(1.02)',\r\n boxShadow: \"inset 0 0 0 2px\",\r\n cursor: 'pointer'\r\n }\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}));\r\n\r\nconst GiftCardAreaCard = props => {\r\n\r\n const { className, area } = props;\r\n const classes = useStyles();\r\n return (\r\n
\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n const GiftCardsTotal = () => {\r\n let total = 0;\r\n total = giftcards.giftcards ? giftcards.giftcards.filter(x => x.DisplayArea === parseInt(props.match.params.id)).map(({ TotalAmount }) => TotalAmount).reduce((sum, i) => sum + i, 0) : 0;\r\n return total;\r\n }\r\n\r\n const UpdateCustomAmout = (event) => {\r\n\r\n if (parseFloat(event.target.value) >= 0) {\r\n\r\n var gc = giftcards.giftcards.find(x => x.ProductID === parseInt(event.target.id));\r\n\r\n if (gc && parseFloat(event.target.value) > 0) {\r\n actionUpdateGiftCardCustomAmout(dispatch, parseInt(event.target.id), parseFloat(event.target.value), false);\r\n }\r\n }\r\n }\r\n\r\n const CustomGiftCardVal = (prodID) => {\r\n\r\n let val = false;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.find(x => x.ProductID === prodID) !== undefined) {\r\n val = giftcards.giftcards.find(x => x.ProductID === prodID).TotalAmount;\r\n }\r\n }\r\n return val;\r\n }\r\n\r\n const ValidateCustomGCs = () => {\r\n\r\n let valid = true;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0 && giftcards.giftcards.filter(x => x.CustomAmount !== undefined).length > 0) {\r\n giftcards.giftcards.filter(x => x.CustomAmount !== undefined).map(gc => {\r\n if (gc.InvalidAmount) {\r\n valid = false;\r\n }\r\n });\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n const AddToCard = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.find(x => x.Qty > 0) !== undefined) {\r\n\r\n if (!ValidateCustomGCs()) {\r\n seterrorMsg('Please enter valid amount.');\r\n return;\r\n }\r\n\r\n actionAddToCartGiftCards(dispatch, parseInt(props.match.params.id));\r\n\r\n props.history.push({\r\n pathname: '/checkout'\r\n })\r\n }\r\n else {\r\n seterrorMsg('Please select any giftcard');\r\n }\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg('');\r\n }\r\n\r\n return (\r\n\r\n 0 ? errorMsg : ''}\r\n open={errorMsg && errorMsg.length > 0 ? true : false} handleclose={errorcancelhandle} />\r\n {GiftCardsHeading} \r\n \r\n \r\n\r\n {giftcards.giftcards && underscore.map(GetGroupedGiftCards(), (items, key) => {\r\n return (\r\n <>\r\n \r\n {items.DisplayArea === parseInt(props.match.params.id) && items.length > 1 || !CustomGiftCard(key) ?\r\n \r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImg} />\r\n \r\n\r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImgSmall} />\r\n \r\n\r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImgSmall} />\r\n \r\n\r\n \r\n :\r\n \r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImg} />\r\n \r\n\r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImgSmall} />\r\n \r\n\r\n \r\n < img src={genfunction.replaceEscapeCharacters(key)} className={classes.gcImgSmall} />\r\n \r\n\r\n \r\n }\r\n \r\n \r\n\r\n {items.length > 1 ?\r\n \r\n \r\n {items.map((item, i) =>\r\n ())}\r\n \r\n \r\n { changeQuantityHandler(refrence, value) }}\r\n >\r\n \r\n \r\n \r\n {Currency} \r\n\r\n \r\n\r\n (Min ${items[0].Price}, Max ${items[0].MaxPrice}) \r\n \r\n :\r\n \r\n {items[0].ProductName} \r\n { changeQuantityHandler(refrence, value) }}\r\n >\r\n \r\n }\r\n \r\n }\r\n\r\n \r\n \r\n )\r\n })}\r\n\r\n \r\n \r\n \r\n Total = {genfunction.ccyFormat(GiftCardsTotal())}\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n );\r\n};\r\n\r\nexport default MainGiftCards;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { GiftCardAreaCard } from './components';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport ErrorHandling from '../../components/ErrorHandling/ErrorHandling';\r\nimport { actionGetGiftCardDisplayAreas, actionResetGiftCardDisplayAreas } from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\nimport { actionResetPaymentTransaction } from 'actions';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n pagination: {\r\n marginTop: theme.spacing(3),\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end'\r\n }\r\n}));\r\n\r\nconst GiftCardsAreasList = (props) => {\r\n\r\n const constredirect = (area) => {\r\n\r\n if (area) {\r\n props.history.push({\r\n pathname: 'giftcards/' + area.DisplayAreaNo\r\n })\r\n }\r\n }\r\n\r\n const dispatch = useDispatch()\r\n\r\n useEffect(() => {\r\n actionGetGiftCardDisplayAreas(dispatch);\r\n }, []);\r\n\r\n\r\n const classes = useStyles();\r\n const giftcardAreaNumbers = useSelector(state => state.reducerGiftCardDisplayAreas);\r\n const error = useSelector(state => state.reducerDisplayAreas.displayAreasError);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const paymenttranstate = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n useEffect(() => {\r\n if (events && events.length == 0 && membershipPackages && membershipPackages.length == 0 && gaTickets && gaTickets.length == 0 &&\r\n giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0 && paymenttranstate.hasOwnProperty(\"ReceiptNo\") && paymenttranstate.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n\r\n if (giftcardAreaNumbers.loading == true) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n })\r\n\r\n const errorcancelhandle = () => {\r\n actionResetGiftCardDisplayAreas(dispatch);\r\n }\r\n\r\n if (giftcardAreaNumbers.giftcardsdisplayAreas === undefined) {\r\n return \r\n \r\n \r\n {Location.OrderLocation} \r\n {getStoreOpenTimes()} \r\n {Location.AverageWaitMinutes ?\r\n {\"Avg Wait Time : \" + Location.AverageWaitMinutes + \" minutes\"} : \"\"}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default OrderLocationItem;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nimport {\r\n actionGetOrderLocationsByDisplayArea, actionShopcartResetOrderProducts,\r\n actionResetPaymentTransaction\r\n} from 'actions'\r\n\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions/actionAppLoader';\r\nimport ErrorHandling from 'components/ErrorHandling/ErrorHandling';\r\nimport OrderLocationItem from './components/OrderLocationItem'\r\n\r\nconst { } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n }\r\n}));\r\n\r\nconst OrderLocationScreen = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n\r\n const payment = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const orderLocationsLoading = useSelector(state => state.reducerOrderLocations.loading);\r\n const orderLocations = useSelector(state => state.reducerOrderLocations.orderLocations);\r\n\r\n useEffect(() => {\r\n if (payment && payment.ReceiptNo && payment.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let areaNo = 0;\r\n\r\n if (props.match.path == \"/orderlocation/Area/:id\")\r\n areaNo = props.match.params.id;\r\n\r\n actionGetOrderLocationsByDisplayArea(dispatch, areaNo);\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (orderLocationsLoading) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n }, [orderLocationsLoading])\r\n\r\n useEffect(() => {\r\n if (orderLocations && orderLocations.length == 1) {\r\n actionShopcartResetOrderProducts(dispatch);\r\n props.history.push('/orderlocationtab/' + orderLocations[0].OrderLocation);\r\n }\r\n }, [orderLocationsLoading])\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n return (\r\n { onClickMenuHandler(Menu.MenuName); }}>\r\n \r\n {Menu.MenuImageURL && Menu.MenuImageURL != \"\" ?\r\n \r\n \r\n {Menu.MenuName} \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default MenuItem;","import React, { useEffect, useState, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Grid, Typography, Link } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers'\r\n\r\nimport {\r\n actionGetOrderLocationsByDisplayArea, actionGetOrderMenuByDisplayArea,\r\n actionSetOrderLocation, actionResetPaymentTransaction\r\n} from 'actions'\r\n\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions/actionAppLoader';\r\nimport ErrorHandling from 'components/ErrorHandling/ErrorHandling';\r\nimport MenuItem from './components/MenuItem'\r\n\r\nconst { ShowOrderItemPriceAs } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n MenuImage: {\r\n width: 100,\r\n height: 100,\r\n maxWidth: 100,\r\n maxHeight: 100\r\n },\r\n MenuBox: {\r\n cursor: \"pointer\"\r\n }\r\n}));\r\n\r\nconst OrderMenu = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n\r\n const payment = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const orderLocationsLoading = useSelector(state => state.reducerOrderLocations.loading);\r\n const orderLocations = useSelector(state => state.reducerOrderLocations.orderLocations);\r\n const orderLocation = useSelector(state => state.reducerOrderLocations.orderLocation);\r\n const orderMenuloading = useSelector(state => state.reducerOrderMenu.loading);\r\n const orderMenu = useSelector(state => state.reducerOrderMenu.orderMenu);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n\r\n useEffect(() => {\r\n if (payment && payment.ReceiptNo && payment.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.match.path == \"/ordermenu/:id\") {\r\n if (orderLocations == undefined || orderLocations.length == 0)\r\n actionGetOrderLocationsByDisplayArea(dispatch, 0);\r\n }\r\n else {\r\n props.history.push('/notfound');\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n window.scrollTo(0, 0)\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (orderLocations && orderLocations.length > 0) {\r\n var tabLocationID = props.match.params.id;\r\n let tl = { ...orderLocations.find(x => x.TabLocations.find(x => x.TabLocationID == tabLocationID) != undefined) };\r\n tl.TabLocations = tl.TabLocations.filter(x => x.TabLocationID == tabLocationID);\r\n actionSetOrderLocation(dispatch, tl);\r\n actionGetOrderMenuByDisplayArea(dispatch, tl.DisplayArea);\r\n }\r\n }, [orderLocations])\r\n\r\n useEffect(() => {\r\n if (orderLocationsLoading || orderMenuloading) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else if (orderLocationsLoading == false && orderMenuloading == false) {\r\n actionEndAppLoader(dispatch);\r\n }\r\n }, [orderLocationsLoading, orderMenuloading])\r\n\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const onClickCheckoutHandler = () => {\r\n if (orderProducts && orderProducts.length > 0) {\r\n props.history.push('/revieworderproducts');\r\n }\r\n else {\r\n seterrorMsg(\"Please select item first\");\r\n }\r\n }\r\n\r\n if (orderLocation == undefined || orderMenu == undefined)\r\n return null\r\n else\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {product.ProductImageURL && product.ProductImageURL != \"\" ?\r\n \r\n \r\n {genfunction.replaceEscapeCharacters(product.ProductName)} \r\n {genfunction.replaceEscapeCharacters(product.ProductDescription)} \r\n \r\n \r\n\r\n {product.Options && product.Options.length > 0 ?\r\n product.Options\r\n .filter(x => x.IsRequired == true)\r\n .map(option => {\r\n return (\r\n \r\n \r\n \r\n {genfunction.replaceEscapeCharacters(option.OptionName)} {option.IsRequired ? \"(Required)\" : \"(Optional)\"} \r\n \r\n \r\n { onChangeSubOptionHandler(event.target.value, option) }}\r\n >\r\n \r\n\r\n {option.Products && option.Products.length > 0 ?\r\n option.Products.map(optionproduct => {\r\n return (\r\n \r\n )\r\n })\r\n : \"\"}\r\n \r\n \r\n \r\n )\r\n })\r\n : \"\"}\r\n\r\n {product.Options && product.Options.filter(x => x.IsRequired == false).length > 0 ?\r\n \r\n Optional Items \r\n : \"\"}\r\n\r\n {product.Options && product.Options.length > 0 ?\r\n product.Options\r\n .filter(x => x.IsRequired == false)\r\n .map(option => {\r\n return (\r\n \r\n \r\n {genfunction.replaceEscapeCharacters(option.OptionName)} \r\n \r\n \r\n \r\n\r\n {option.Products && option.Products.length > 0 ?\r\n option.Products.map(optionproduct => {\r\n return (\r\n \r\n \r\n { optionproduct.IsSelected ? onChangeDeleteSubOptionHandler(event.target.value, option) : onChangeSubOptionHandler(event.target.value, option) }}\r\n name={optionproduct.ProductID} />}\r\n label={genfunction.replaceEscapeCharacters(optionproduct.ProductName) + (optionproduct.PriceIncTax > 0 ? (\" \" + genfunction.ccyFormat(genfunction.getOrderProductPrice(optionproduct))) : \"\")}\r\n /> \r\n \r\n )\r\n })\r\n : \"\"}\r\n\r\n \r\n\r\n\r\n \r\n \r\n \r\n )\r\n })\r\n : \"\"}\r\n {product.GetProductNotes ?\r\n \r\n \r\n {OrderSubMenuPageOrderProductNoteText} \r\n \r\n \r\n { onChangeProductNoteHanlder(event.target.value); }}\r\n >\r\n \r\n \r\n : \"\"}\r\n\r\n \r\n \r\n Total : {genfunction.ccyFormat(getTotalPrice() * product.Quantity)} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n { onConfirm(product); }}\r\n color=\"primary\" variant='contained'>\r\n {product.UniqueID ? \"Save\" : \"Add to cart\"}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nOrderProduct.propTypes = {\r\n open: PropTypes.bool.isRequired\r\n};\r\n\r\nexport default OrderProduct;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Grid, Typography, Card, CardHeader, CardContent, IconButton, Badge } from '@material-ui/core';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport { useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n headerbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n MenuImage: {\r\n width: 70,\r\n height: 70,\r\n maxWidth: 70,\r\n maxHeight: 70\r\n },\r\n badge: {\r\n fontSize: 22\r\n },\r\n badgebox: {\r\n marginBottom: 20,\r\n width: \"100%\",\r\n }\r\n}));\r\n\r\nconst SubMenuItem = (props) => {\r\n\r\n const classes = useStyles();\r\n const { Department, onClickAddProduct, onClickProductInfo } = props;\r\n\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n\r\n const getProductQuantity = (ProductID) => {\r\n let products = orderProducts.filter(x => x.ProductID == ProductID);\r\n let qty = 0;\r\n products.forEach(p => {\r\n qty += p.Quantity;\r\n });\r\n return qty;\r\n }\r\n\r\n const SubMenuItem = (product, dep) => {\r\n return \r\n \r\n \r\n \r\n { onClickProductInfo(product); }}>\r\n \r\n \r\n \r\n \r\n \r\n {genfunction.replaceEscapeCharacters(product.ProductName)} \r\n {genfunction.ccyFormat(genfunction.getOrderProductPrice(product))} \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ;\r\n }\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {Department.Products.map(product => {\r\n return SubMenuItem(product, Department)\r\n })}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SubMenuItem;","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Grid, Typography, IconButton } from '@material-ui/core';\r\nimport ArrowLeftIcon from '@material-ui/icons/ArrowBack';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { actionAddOrderProduct, actionUpdateOrderProduct } from 'actions/actionShopCart';\r\n\r\nimport { DialogeBox, ErrorHandling } from 'components';\r\nimport { genfunction } from 'helpers'\r\nimport OrderProduct from './components/OrderProduct'\r\nimport SubMenuItem from './components/SubMenuItem'\r\n\r\nconst { ShowOrderItemPriceAs, OrderItemsInCartError2 } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n RightButtonlIcon: {\r\n '& svg': {\r\n fontSize: 40\r\n }\r\n }\r\n}));\r\n\r\nconst OrderSubMenu = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [infoProduct, setInfoProduct] = useState(null);\r\n let [productPopUp, setProductPopUp] = useState({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n\r\n const orderLocation = useSelector(state => state.reducerOrderLocations.orderLocation);\r\n const orderMenu = useSelector(state => state.reducerOrderMenu.orderMenu);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const gatickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const giftcards = useSelector(state => state.reducerGiftCards.giftcards);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n useEffect(() => {\r\n window.scrollTo(0, 0);\r\n if (props.match.path == \"/ordersubmenu/:name\") {\r\n\r\n }\r\n else {\r\n props.history.push('/notfound');\r\n }\r\n }, [])\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const onClickBackButtonHandler = () => {\r\n props.history.goBack();\r\n }\r\n\r\n const onClickProductHandler = (department, product) => {\r\n setProductPopUp({\r\n isOpen: true,\r\n Product: product,\r\n Department: department\r\n });\r\n }\r\n\r\n const onClickCancelProductHanlder = () => {\r\n errorcancelhandle();\r\n setProductPopUp({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n }\r\n\r\n const hasSameOptions = (ProductA, ProductB) => {\r\n if (ProductA.Options && ProductB.Options) {\r\n return ProductA.Options.every(PAOption => {\r\n let PBOption = ProductB.Options.find(x => x.OptionName === PAOption.OptionName);\r\n if (PAOption.Products && PBOption.Products) {\r\n let PAProduct = PAOption.Products.filter(x => x.IsSelected);\r\n let PBProduct = PBOption.Products.filter(x => x.IsSelected);\r\n if (PAProduct.length == PBProduct.length) {\r\n return PAProduct.every(AProduct => {\r\n if (PBProduct.find(x => x.ProductID === AProduct.ProductID) == undefined) {\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n });\r\n }\r\n }\r\n });\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n const isDifferentItemsAlreadyInCart = () => {\r\n if ((events && events.length > 0) || (gatickets && gatickets.length > 0) || (membershipPackages && membershipPackages.length > 0) || (giftcards && giftcards.length > 0) || (donationProducts && donationProducts.length > 0)) {\r\n return true;\r\n }\r\n else\r\n return false;\r\n }\r\n\r\n const onClickAddToCartProductHanlder = (Product) => {\r\n\r\n if (isDifferentItemsAlreadyInCart()) {\r\n seterrorMsg(OrderItemsInCartError2);\r\n }\r\n else if (Product.Quantity == 0) {\r\n seterrorMsg(\"Please select quantity\")\r\n }\r\n else if (genfunction.IsRequiredOptionsSelectedForOrderItem(Product) == false) {\r\n seterrorMsg(\"Please select required option first\");\r\n }\r\n else {\r\n errorcancelhandle();\r\n let objSelectedProducts = [...orderProducts];\r\n let objProduct = objSelectedProducts.find(p => p.ProductID === Product.ProductID && p.ProductNotes === Product.ProductNotes && hasSameOptions(p, Product));\r\n if (objProduct) {\r\n objProduct.Quantity += Product.Quantity;\r\n actionUpdateOrderProduct(dispatch, objProduct);\r\n }\r\n else {\r\n objProduct = Object.assign({}, Product);\r\n objProduct.UniqueID = uuidv4();\r\n actionAddOrderProduct(dispatch, objProduct);\r\n }\r\n setProductPopUp({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n }\r\n }\r\n\r\n const onClickCheckoutHandler = () => {\r\n if (orderProducts && orderProducts.length > 0) {\r\n props.history.push('/revieworderproducts');\r\n }\r\n else {\r\n seterrorMsg(\"Please select item first\");\r\n }\r\n }\r\n\r\n if (orderLocation == undefined || orderMenu == undefined)\r\n return null\r\n else\r\n return (\r\n \r\n {genfunction.replaceEscapeCharacters(opproduct.ProductName)}\r\n : \"\"\r\n )\r\n }))\r\n })\r\n );\r\n }\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n const onClickMakeChangesHandler = () => {\r\n let tabLocationID = orderLocation.TabLocations[0].TabLocationID;\r\n props.history.push('/ordermenu/' + tabLocationID);\r\n }\r\n\r\n const onClickFinishHandler = () => {\r\n props.history.push('/checkout');\r\n }\r\n\r\n\r\n const onClickProductHandler = (department, product) => {\r\n setProductPopUp({\r\n isOpen: true,\r\n Product: product,\r\n Department: department\r\n });\r\n }\r\n\r\n const onClickCancelProductHanlder = () => {\r\n errorcancelhandle();\r\n setProductPopUp({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n }\r\n\r\n const hasSameOptions = (ProductA, ProductB) => {\r\n if (ProductA.Options && ProductB.Options) {\r\n return ProductA.Options.every(PAOption => {\r\n let PBOption = ProductB.Options.find(x => x.OptionName === PAOption.OptionName);\r\n if (PAOption.Products && PBOption.Products) {\r\n let PAProduct = PAOption.Products.filter(x => x.IsSelected);\r\n let PBProduct = PBOption.Products.filter(x => x.IsSelected);\r\n if (PAProduct.length == PBProduct.length) {\r\n return PAProduct.every(AProduct => {\r\n if (PBProduct.find(x => x.ProductID === AProduct.ProductID) == undefined) {\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n });\r\n }\r\n }\r\n });\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n const onClickAddToCartProductHanlder = (Product) => {\r\n if (Product.Quantity == 0) {\r\n seterrorMsg(\"Please select quantity\")\r\n }\r\n else if (genfunction.IsRequiredOptionsSelectedForOrderItem(Product) == false) {\r\n seterrorMsg(\"Please select required option first\");\r\n }\r\n else {\r\n errorcancelhandle();\r\n let objSelectedProducts = [...orderProducts];\r\n\r\n let objProduct = objSelectedProducts.find(p => p.ProductID === Product.ProductID && p.ProductNotes === Product.ProductNotes && hasSameOptions(p, Product));\r\n if (objProduct) {\r\n if (objProduct.UniqueID == Product.UniqueID) {\r\n objProduct.Quantity = Product.Quantity;\r\n }\r\n else {\r\n objProduct.Quantity += Product.Quantity;\r\n objSelectedProducts = objSelectedProducts.filter(x => x.UniqueID != Product.UniqueID);\r\n }\r\n }\r\n else {\r\n objProduct = Object.assign({}, Product);\r\n objProduct.UniqueID = uuidv4();\r\n objSelectedProducts.push(objProduct);\r\n objSelectedProducts = objSelectedProducts.filter(x => x.UniqueID != Product.UniqueID);\r\n }\r\n\r\n actionUpdateOrderProducts(dispatch, objSelectedProducts);\r\n\r\n setProductPopUp({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n }\r\n }\r\n\r\n function millisecondsToTime(milli) {\r\n var seconds = Math.floor((milli / 1000) % 60);\r\n var minutes = Math.floor((milli / (60 * 1000)) % 60);\r\n return minutes + \":\" + genfunction.PaddingString(seconds, \"0\", 2);\r\n }\r\n\r\n return (\r\n \r\n {product.DisplayAmounts?.sort((a, b) => a.SortOrder - b.SortOrder).map(amount => {\r\n return \r\n {Currency + amount.Amount}\r\n \r\n })}\r\n {product.OtherValue && product.OtherValue.length > 0 ?\r\n \r\n Other\r\n : \"\"}\r\n {selectedToogleButton == \"other\" ?\r\n : \"\"}\r\n\r\n \r\n }\r\n\r\n return (\r\n \r\n \r\n {Product.ProductName} \r\n \r\n \r\n {hasImage ?\r\n \r\n })
\r\n : \"\"}\r\n \r\n \r\n {Product.ProductDescription} \r\n \r\n \r\n {getDisplayAmountButtons(Product)} \r\n \r\n {validationInfo != \"\" ?\r\n {validationInfo} : \"\"}\r\n \r\n \r\n \r\n\r\n \r\n );\r\n};\r\n\r\nexport default DonationProduct;","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Container } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Grid, TextField, Typography } from '@material-ui/core';\r\n\r\nimport { genfunction } from 'helpers'\r\nimport {\r\n actionStartAppLoader, actionEndAppLoader, actionGetProductsByTypeAndDisplayAreas,\r\n actionShopCartUpdateDonationProduct, actionGetDisplayAreasByIdAndType,\r\n actionResetPaymentTransaction\r\n} from 'actions';\r\nimport { ErrorHandling, Title } from 'components';\r\nimport DonationProduct from './components/DonationProduct'\r\n\r\nconst { OrderItemsInCartError } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3),\r\n marginTop: 50\r\n }\r\n}));\r\n\r\nconst DonationProducts = (props) => {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [displayArea, setDisplayArea] = useState(null);\r\n const [selectedProducts, setSelectedProducts] = useState([]);\r\n const [viewProducts, setViewProducts] = useState([]);\r\n const [note, setNote] = useState(\"\");\r\n\r\n const cartDonationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n const products = useSelector(state => state.reducerProduct.products);\r\n const loading = useSelector(state => state.reducerProduct.loading);\r\n const error = useSelector(state => state.reducerProduct.error);\r\n\r\n const displayAreas = useSelector(state => state.reducerDisplayAreas.displayAreas);\r\n const displayAreasLoading = useSelector(state => state.reducerDisplayAreas.loading);\r\n const displayAreasError = useSelector(state => state.reducerDisplayAreas.displayAreasError);\r\n\r\n const gaTickets = useSelector(state => state.reducerShopCart.GATickets);\r\n const membershipPackages = useSelector(state => state.reducerShopCart.MembershipPackages);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const paymenttranstate = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const donationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n useEffect(() => {\r\n var areaNo = props.match.params.id;\r\n if (isDisplayAreaExists(areaNo))\r\n actionGetProductsByTypeAndDisplayAreas(dispatch, \"donationpage\", areaNo);\r\n }, [displayAreas])\r\n\r\n useEffect(() => {\r\n if (products && products.length > 0) {\r\n setItemIntoView();\r\n }\r\n }, [products])\r\n\r\n useEffect(() => {\r\n if (events && events.length == 0 && membershipPackages && membershipPackages.length == 0 && gaTickets && gaTickets.length == 0 &&\r\n giftcards.giftcards && giftcards.giftcards.length == 0 && donationProducts && donationProducts.length == 0 && paymenttranstate.hasOwnProperty(\"ReceiptNo\") && paymenttranstate.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.match.path == \"/donation/Area/:id\") {\r\n var areaNo = props.match.params.id;\r\n if (isDisplayAreaExists(areaNo) == false) {\r\n actionGetDisplayAreasByIdAndType(dispatch, areaNo, \"donationpage\");\r\n }\r\n }\r\n else {\r\n props.history.push('/not-found');\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (loading || displayAreasLoading)\r\n actionStartAppLoader(dispatch);\r\n else\r\n actionEndAppLoader(dispatch);\r\n }, [loading, displayAreasLoading])\r\n\r\n useEffect(() => {\r\n if (displayAreasError && displayAreasError != \"\")\r\n seterrorMsg(displayAreasError)\r\n else if (error && error != \"\")\r\n seterrorMsg(error);\r\n }, [error, displayAreasError])\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const isDisplayAreaExists = (areaNo) => {\r\n let displayArea;\r\n if (displayAreas)\r\n displayArea = displayAreas.find(area => area.DisplayAreaNo == areaNo);\r\n\r\n if (displayArea)\r\n setDisplayArea(displayArea)\r\n\r\n return displayArea != undefined;\r\n }\r\n\r\n const getTotalAmount = () => {\r\n let total = 0;\r\n selectedProducts.forEach(product => {\r\n total += product.Amount;\r\n });\r\n return total;\r\n }\r\n\r\n const onChangeDonationProductSelection = (product) => {\r\n AddProductToList(product);\r\n }\r\n\r\n const AddProductToList = (product) => {\r\n let donationProducts = [...selectedProducts];\r\n donationProducts = donationProducts.filter(x => x.ProductID != product.ProductID);\r\n if (IsValidProduct(product))\r\n donationProducts.push(product);\r\n setSelectedProducts(donationProducts);\r\n }\r\n\r\n const IsValidProduct = (product) => {\r\n let p = products.find(x => x.ProductID == product.ProductID);\r\n if (p) {\r\n if (product.DisplayAmount == \"\")\r\n return false;\r\n if (product.DisplayAmount != \"other\")\r\n return true;\r\n else if (product.Amount >= p.OtherValue[0].MinAmount && product.Amount <= p.OtherValue[0].MaxAmount)\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n const onClickContinueButtonHandler = () => {\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n else if (selectedProducts.length == 0) {\r\n seterrorMsg(\"Please select item first\");\r\n return;\r\n }\r\n\r\n let newselectedProducts = [...selectedProducts];\r\n if (note != \"\")\r\n newselectedProducts.forEach(product => {\r\n product.ProductNotes = note;\r\n });\r\n\r\n actionShopCartUpdateDonationProduct(dispatch, newselectedProducts);\r\n props.history.push('/checkout');\r\n }\r\n\r\n const setItemIntoView = () => {\r\n let items = [...products];\r\n cartDonationProducts.forEach(cartItem => {\r\n let existItem = items.find(x => x.ProductID == cartItem.ProductID)\r\n if (existItem) {\r\n existItem.DisplayAmount = cartItem.DisplayAmount;\r\n existItem.Amount = cartItem.Amount\r\n }\r\n });\r\n\r\n let selectedItem = items.filter(x => x.DisplayAmount).map(item => {\r\n return getNewProductObj(item)\r\n })\r\n setSelectedProducts(selectedItem);\r\n setViewProducts(items);\r\n }\r\n\r\n const getNewProductObj = (product) => {\r\n let prod = {\r\n ProductID: product.ProductID,\r\n ProductName: product.ProductName,\r\n DisplayArea: product.DisplayArea,\r\n DisplayAmount: product.DisplayAmount,\r\n Amount: product.Amount,\r\n UseAlternateMerchantOnline: product.UseAlternateMerchantOnline\r\n }\r\n return prod;\r\n }\r\n\r\n return (\r\n \n \n {displayAreas?.filter(area => area.ShowOnline).sort((a, b) => a.SortOrder - b.SortOrder).map(area => {\n return \n \n );\n};\n\nexport default DonationAreas;","import React from 'react';\nimport { Switch, Redirect } from 'react-router-dom';\n\nimport { RouteWithLayout } from './components';\nimport { Main as MainLayout, Minimal as MinimalLayout } from './layouts';\n\nimport {\n Calendar as CalendarView,\n Dashboard as DashboardView,\n ProductList as ProductListView,\n MembershipList as MembershipListView,\n Memberships as MembershipsView,\n MemberValidation as MembershipsMemberValidateView,\n GiftCardsAreasList as GiftCardsAreasListView,\n MainGiftCards as MainGiftCardsView,\n FindMyBooking as FindMyBookingView,\n ManageBooking as ManageBookingView,\n ConfimBookingChanges as ConfimBookingChangesView,\n ModifyTicketsAddons as ModifyTicketsAddonsView,\n ManageCheckout as ManageCheckoutView,\n UserList as UserListView,\n Typography as TypographyView,\n Icons as IconsView,\n Account as AccountView,\n Settings as SettingsView,\n NotFound as NotFoundView,\n Checkout as CheckoutView,\n GATickets as GATickets,\n OrderLocationScreen as FoodOrderLocationScreen,\n OrderLocationTab as OrderLocationTabScreen,\n OrderMenu as OrderMenuScreen,\n OrderSubMenu as OrderSubMenuScreen,\n OrderItemsReview as OrderItemsReviewScreen,\n DonationAreas as DonationAreasView,\n DonationProducts as DonationProductsView\n} from './views';\n\nconst Routes = () => {\n return (\n \n\n \n );\n};\n\nexport default Routes;\n","import React from 'react';\nimport { LinearProgress, Backdrop } from '@material-ui/core';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport palette from '../../theme/palette'\n\nconst useStyles = makeStyles(theme => ({\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: '#fff',\n backgroundColor: 'rgba(0, 0, 0, 0.8)'\n },\n image: {\n marginBottom: \"10px\"\n }\n}));\n\nconst BorderLinearProgress = withStyles({\n root: {\n height: 10,\n width: \"200px\",\n margin: \"auto\",\n borderRadius: 20,\n border: \"1px solid white\",\n paddingTop: \"10px\",\n backgroundColor: palette.primary.light\n },\n bar: {\n borderRadius: 20,\n backgroundColor: palette.primary.main\n },\n})(LinearProgress);\n\nconst Apploader = props => {\n const { loading } = props;\n const classes = useStyles();\n return (\n \n \n );\n};\n\nexport default Apploader;\n","import React, { useEffect } from 'react';\nimport { Router } from 'react-router-dom';\nimport { createBrowserHistory } from 'history';\nimport { Chart } from 'react-chartjs-2';\nimport { ThemeProvider } from '@material-ui/styles';\nimport validate from 'validate.js';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { chartjs } from './helpers';\nimport theme from './theme';\nimport 'react-perfect-scrollbar/dist/css/styles.css';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport './assets/scss/index.scss';\nimport validators from './common/validators';\nimport Routes from './Routes';\nimport { Apploader } from './components/Apploaders';\nimport { actionGenerateUserSessionID } from 'actions';\nimport {\n GoogleReCaptchaProvider,\n} from 'react-google-recaptcha-v3';\n\nconst { ExpiryTimeCacheInMins, RecaptchaV3Client } = window['runConfig'];\n\nconst browserHistory = createBrowserHistory({ basename: '/BlankParkZooTickets' });\n\nChart.helpers.extend(Chart.elements.Rectangle.prototype, {\n draw: chartjs.draw\n});\n\nvalidate.validators = {\n ...validate.validators,\n ...validators\n};\n\nexport default function App() {\n const dispatch = useDispatch();\n\n const loading = useSelector(state => state.reducerAppLoader.loading);\n const sessionID = useSelector(state => state.reducerGlobal.sessionID);\n\n useEffect(() => {\n if (sessionID.length < 1) {\n actionGenerateUserSessionID(dispatch);\n }\n }, []);\n\n\n useEffect(() => {\n var ms = ExpiryTimeCacheInMins * 60000;\n setInterval(function () { window.location.reload(); }, ms);\n });\n\n\n return (\n
\r\n {TransactionCompleteTitle} \r\n Thank you {transaction.Customer.FirstName + \" \" + transaction.Customer.LastName}! \r\n {ConfirmationReceiptMessage} \r\n {transaction.Customer.CustomerAddress[0].Email} \r\n\r\n {Payment && Payment.hasOwnProperty('isCancelBooking') === false && reducerBooking.booking[0] && reducerBooking.booking[0].BookingID ?\r\n \r\n Receipt # {transaction.ReceiptNo}}\r\n title={\"Transaction Summary\"}\r\n titleTypographyProps={{ color: \"inherit\" }}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n groupbyTourEvent().length > 0 ? groupbyTourEvent().map(item => (\r\n\r\n
\r\n\r\n );\r\n }\r\n};\r\n\r\nPaymentCompletePage.propTypes = {\r\n isshow: PropTypes.bool.isRequired,\r\n transaction: PropTypes.object.isRequired\r\n};\r\n\r\nexport default PaymentCompletePage;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport MakePayment from '../ManageCheckout/components/MakePayment';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { actionResetPaymentTransaction } from 'actions';\r\nimport {\r\n actionShopCartResetMembership, actionShopCartResetIDME, actionShopCartResetMembershipPackage, actionShopCartResetStateWithTourHold,\r\n actionShopCartResetStateWithUniqueCouponHold, actionShopCartResetGiftcards, actionResetCountryAndState\r\n} from 'actions';\r\nimport PaymentCompletePage from './components/PaymentCompletePage';\r\nimport ProcessingBox from '../Checkout/components/ProcessingBox';\r\nimport { actionShopCartSetManageMyBooking, actionShopCartSetRefundType, actionShopCartSetAdditionalBookingAmount, actionShopCartResetState } from 'actions';\r\nimport { actionResetBooking } from 'actions';\r\nimport { actionResetFieldValuesState } from 'actions';\r\nimport { actionDeleteGiftCardHold } from 'actions';\r\nimport { actionStartAppLoader, actionEndAppLoader } from '../../actions/actionAppLoader';\r\nimport { actionResetExtraItems } from 'actions';\r\nimport { Typography, Grid, Container, Button } from '@material-ui/core';\r\nimport { actionValidateRecaptchaReset } from 'actions';\r\nimport { actionShopCartSetMMBHasPaid } from 'actions/actionShopCart';\r\n\r\nconst { RedirectAfterCheckout, Titleforloadingpayment, Subtitle1forloadingpayment, Subtitle2forloadingpayment, } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n tourheaderbox: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText,\r\n height: '40px'\r\n }, hidden: {\r\n visibility: \"hidden\"\r\n },\r\n displaynone: {\r\n display: \"none\"\r\n }\r\n}));\r\n\r\nconst ManageCheckout = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const reducerBooking = useSelector(state => state.reducerBooking);\r\n const events = useSelector(state => state.reducerShopCart.events);\r\n const cashless = useSelector(state => state.reducerShopCart.cashless);\r\n const mmbHasPaid = useSelector(state => state.reducerShopCart.MMBHasPaid);\r\n\r\n const paymenttranstate = useSelector(state => {\r\n return (\r\n {\r\n loading: state.reducerPaymentTransaction.loading,\r\n haspaid: state.reducerPaymentTransaction.Payment.hasOwnProperty('Products'),\r\n paymentinfo: state.reducerPaymentTransaction.Payment,\r\n errormsg: state.reducerPaymentTransaction.PaymentInfoError\r\n }\r\n )\r\n\r\n });\r\n\r\n\r\n const onClickPaymentHandler = () => {\r\n actionStartAppLoader(dispatch);\r\n actionShopCartResetStateWithTourHold(dispatch, events);\r\n actionResetPaymentTransaction(dispatch);\r\n actionResetFieldValuesState(dispatch);\r\n actionShopCartResetStateWithUniqueCouponHold(dispatch);\r\n actionShopCartResetMembershipPackage(dispatch);\r\n actionShopCartResetMembership(dispatch);\r\n actionShopCartResetIDME(dispatch);\r\n actionResetBooking(dispatch);\r\n actionResetExtraItems(dispatch);\r\n actionShopCartSetManageMyBooking(dispatch, false, false);\r\n actionShopCartSetRefundType(dispatch, '');\r\n actionShopCartSetAdditionalBookingAmount(dispatch, 0);\r\n actionShopCartResetState(dispatch);\r\n actionResetCountryAndState(dispatch);\r\n actionShopCartSetMMBHasPaid(dispatch, false);\r\n \r\n if (cashless && cashless.length > 0) {\r\n actionDeleteGiftCardHold(dispatch, cashless[0].GiftcardHoldRef);\r\n actionShopCartResetGiftcards(dispatch);\r\n }\r\n\r\n actionValidateRecaptchaReset(dispatch);\r\n\r\n setTimeout(function () {\r\n actionEndAppLoader(dispatch);\r\n window.location.href = RedirectAfterCheckout;\r\n }, 2000);\r\n }\r\n\r\n\r\n const redirecttofindmybpooking = () => {\r\n\r\n props.history.push({\r\n pathname: '/findmybooking'\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (paymenttranstate.paymentinfo.hasOwnProperty('Products') == true) {\r\n actionShopCartSetMMBHasPaid(dispatch, true);\r\n }\r\n }, [paymenttranstate.paymentinfo.hasOwnProperty('Products') == true])\r\n\r\n let displayclass = \"\";\r\n if (paymenttranstate.loading)\r\n displayclass = classes.displaynone;\r\n else if (paymenttranstate.haspaid)\r\n displayclass = classes.displaynone;\r\n else if (mmbHasPaid)\r\n displayclass = classes.displaynone;\r\n\r\n return (\r\n\r\n \r\n Booking ID {reducerBooking.booking[0].BookingID} {BookingSuccessfullyUpdate} \r\n
\r\n : null\r\n }\r\n\r\n\r\n \r\n\r\n {ShowWebDisplayName(getEvent(item.TourEventID))} \r\n {VisibleStartAndEndTime(getEvent(item.TourEventID))} \r\n \r\n
\r\n ))\r\n : null\r\n }\r\n\r\n {\r\n GetGiftCards().length > 0 ? GetGiftCards().map(giftcard => (\r\n giftcard.Giftcards.map(gc => (\r\n \r\n {giftcard.ProductName} \r\n \r\n \r\n {\r\n Payment.Products.filter(x => x.Giftcards).map(item => (\r\n\r\n : null}\r\n\r\n {Payment && Payment.hasOwnProperty('isCancelBooking') && Payment.isCancelBooking ?\r\n \r\n {\r\n Payment && Payment.hasOwnProperty('isCancelBooking') && Payment.isCancelBooking ?\r\n \r\n : null}\r\n\r\n \r\n {CustomMessageforconfirmpage} \r\n \r\n \r\n \r\n\r\n
\r\n \r\n Thank You \r\n Amount Paid was {genfunction.ccyFormat(0)} \r\n No Refund is due. \r\n
\r\n \r\n : null\r\n }\r\n\r\n {Payment && Payment.hasOwnProperty('Products') && Payment.Products.length > 0 ?\r\n \r\n Gift Card Number # \r\n {item.Giftcards[0].GiftcardNo} \r\n\r\n Balance Available \r\n {genfunction.ccyFormat(item.Giftcards[0].TotalBalance)} \r\n\r\n
\r\n ))\r\n }\r\n\r\n \r\n {Payment.hasOwnProperty('BookingID') ?\r\n Booking ID {Payment.BookingID} {BookingCancelMsg} \r\n : null}\r\n
\r\n : null\r\n }\r\n\r\n \r\n \r\n \r\n \r\n
\r\n {area.DisplayText}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GiftCardAreaCard;\r\n","import Moment from 'moment';\r\nimport React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Container, Grid, Hidden, CardContent, TextField, Typography, Button, MenuItem, Select, CardHeader } from '@material-ui/core';\r\nimport { actionAddToCartGiftCards, actionGetGiftCards, actionUpdateGiftCardDropDown, actionUpdateGiftCrdQuantity, actionUpdateGiftCardCustomAmout } from 'actions';\r\nimport * as underscore from 'underscore';\r\nimport NumberSpinner from 'components/InputControls/NumberSpinner';\r\nimport { genfunction } from '../../../../helpers';\r\nimport ErrorHandling from '../../../../components/ErrorHandling/ErrorHandling';\r\n\r\n\r\nconst { GiftCardsHeading, OrderItemsInCartError, Currency } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {},\r\n gcImg: {\r\n minHeight: '80px',\r\n maxHeight: '250px',\r\n minWidth: '100px',\r\n maxWidth: '340px'\r\n },\r\n gcImgSmall: {\r\n minHeight: '60px',\r\n maxHeight: '110px',\r\n minWidth: '70px',\r\n maxWidth: '140px'\r\n },\r\n headerText: {\r\n paddingBottom: 15,\r\n textAlign: \"center\"\r\n },\r\n}));\r\n\r\n\r\nconst MainGiftCards = props => {\r\n\r\n const dispatch = useDispatch()\r\n const classes = useStyles();\r\n const [errorMsg, seterrorMsg] = React.useState('');\r\n\r\n useEffect(() => {\r\n if (giftcards.giftcards && giftcards.giftcards.length < 1) {\r\n actionGetGiftCards(dispatch, props.match.params.id);\r\n }\r\n else if (giftcards.giftcards && giftcards.giftcards.length > 0 && giftcards.giftcards.find(x => x.DisplayArea === parseInt(props.match.params.id)) === undefined) {\r\n actionGetGiftCards(dispatch, props.match.params.id);\r\n }\r\n }, []);\r\n\r\n\r\n const giftcards = useSelector(state => state.reducerGiftCards);\r\n const error = useSelector(state => state.reducerGiftCards.giftcardsError);\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n\r\n const GetGroupedGiftCards = () => {\r\n let today = Moment(Moment().format(\"YYYY-MM-DD\"), \"YYYY-MM-DD\");\r\n\r\n let filteredGCs = underscore.filter(giftcards.giftcards, (item) => {\r\n\r\n let sellStart = Moment(item.SellStart, \"YYYY-MM-DD\");\r\n let sellEnd = Moment(item.SellEnd, \"YYYY-MM-DD\");\r\n\r\n return item.DisplayArea == parseInt(props.match.params.id) && today.isBetween(sellStart, sellEnd, null, '[]');\r\n\r\n });\r\n\r\n let group = underscore\r\n .groupBy(filteredGCs, (giftcard) => { return giftcard.ProductImageURL; });\r\n\r\n return group;\r\n }\r\n\r\n const [state, setState] = React.useState([]);\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0 && state.length < 1) {\r\n\r\n //giftcards.giftcards = giftcards.giftcards.filter(x => x.DisplayArea === parseInt(props.match.params.id));\r\n\r\n setState([...state, giftcards.giftcards]);\r\n }\r\n\r\n\r\n const fieldhandleChange = (event) => {\r\n if (event.target.name === \"cstAmount\") {\r\n actionUpdateGiftCardDropDown(dispatch, event.target.name, parseFloat(event.target.id));\r\n }\r\n else {\r\n actionUpdateGiftCardDropDown(dispatch, event.target.name, event.target.value);\r\n }\r\n }\r\n\r\n const SelectedGiftCardValue = (key) => {\r\n let val = \"None\";\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.ProductImageURL === key && x.isSelected).length > 0) {\r\n if (giftcards.giftcards.find(x => x.ProductImageURL === key && x.isSelected) !== undefined) {\r\n val = giftcards.giftcards.find(x => x.ProductImageURL === key && x.isSelected).Price;\r\n }\r\n\r\n }\r\n }\r\n\r\n return val;\r\n }\r\n\r\n const SelectedGiftCardProdID = (key) => {\r\n let prodID = 0;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.ProductImageURL === key && x.isSelected).length > 0) {\r\n\r\n if (giftcards.giftcards.find(x => x.ProductImageURL === key && x.isSelected) !== undefined) {\r\n prodID = giftcards.giftcards.find(x => x.ProductImageURL === key && x.isSelected).ProductID;\r\n }\r\n }\r\n }\r\n\r\n return prodID;\r\n }\r\n\r\n const SelectedGiftCardQty = (key) => {\r\n let quantity = 0;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.filter(x => x.ProductImageURL === key && x.isSelected).length > 0) {\r\n quantity = giftcards.giftcards.find(x => x.ProductImageURL === key && x.isSelected).Qty;\r\n }\r\n }\r\n\r\n return quantity;\r\n }\r\n\r\n const CustomGiftCard = (key) => {\r\n let cstGiftCard = false;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.find(x => x.ProductImageURL === key && x.MaxPrice !== undefined) !== undefined) {\r\n cstGiftCard = true;\r\n }\r\n }\r\n\r\n return cstGiftCard;\r\n }\r\n\r\n const changeQuantityHandler = (refrence, value) => {\r\n actionUpdateGiftCrdQuantity(dispatch, refrence.tourProductID, value, false);\r\n }\r\n\r\n const replaceEscapeCharacters = (item) => {\r\n var itemValue = item.split(\"\\\\r\\\\n\").join(\"\r\n {area.DisplayText}\r\n
\");\r\n itemValue = itemValue.split(\"\\\\\").join(\"\");\r\n return itemValue;\r\n }\r\n\r\n const GiftCardsTotal = () => {\r\n let total = 0;\r\n total = giftcards.giftcards ? giftcards.giftcards.filter(x => x.DisplayArea === parseInt(props.match.params.id)).map(({ TotalAmount }) => TotalAmount).reduce((sum, i) => sum + i, 0) : 0;\r\n return total;\r\n }\r\n\r\n const UpdateCustomAmout = (event) => {\r\n\r\n if (parseFloat(event.target.value) >= 0) {\r\n\r\n var gc = giftcards.giftcards.find(x => x.ProductID === parseInt(event.target.id));\r\n\r\n if (gc && parseFloat(event.target.value) > 0) {\r\n actionUpdateGiftCardCustomAmout(dispatch, parseInt(event.target.id), parseFloat(event.target.value), false);\r\n }\r\n }\r\n }\r\n\r\n const CustomGiftCardVal = (prodID) => {\r\n\r\n let val = false;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0) {\r\n if (giftcards.giftcards.find(x => x.ProductID === prodID) !== undefined) {\r\n val = giftcards.giftcards.find(x => x.ProductID === prodID).TotalAmount;\r\n }\r\n }\r\n return val;\r\n }\r\n\r\n const ValidateCustomGCs = () => {\r\n\r\n let valid = true;\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.length > 0 && giftcards.giftcards.filter(x => x.CustomAmount !== undefined).length > 0) {\r\n giftcards.giftcards.filter(x => x.CustomAmount !== undefined).map(gc => {\r\n if (gc.InvalidAmount) {\r\n valid = false;\r\n }\r\n });\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n const AddToCard = () => {\r\n\r\n if (orderProducts && orderProducts.length > 0) {\r\n seterrorMsg(OrderItemsInCartError);\r\n return;\r\n }\r\n\r\n if (giftcards.giftcards && giftcards.giftcards.find(x => x.Qty > 0) !== undefined) {\r\n\r\n if (!ValidateCustomGCs()) {\r\n seterrorMsg('Please enter valid amount.');\r\n return;\r\n }\r\n\r\n actionAddToCartGiftCards(dispatch, parseInt(props.match.params.id));\r\n\r\n props.history.push({\r\n pathname: '/checkout'\r\n })\r\n }\r\n else {\r\n seterrorMsg('Please select any giftcard');\r\n }\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg('');\r\n }\r\n\r\n return (\r\n
\r\n 0 ? true : false}\r\n handleclose={errorcancelhandle} />\r\n
\r\n }\r\n\r\n return (\r\n\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default GiftCardsAreasList;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Grid, Typography, IconButton } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { genfunction } from 'helpers'\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useLocation } from \"react-router-dom\";\r\nimport InfoIcon from '@material-ui/icons/Info'\r\nimport moment from 'moment';\r\n\r\nimport { actionShopcartResetOrderProducts } from 'actions'\r\nimport ErrorHandling from 'components/ErrorHandling/ErrorHandling';\r\n\r\nconst { } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n paddingTop: 10,\r\n paddingBottom: 10\r\n },\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n titleText: {\r\n paddingLeft: 5,\r\n paddingRight: 5\r\n },\r\n subTitleText: {\r\n paddingLeft: 5,\r\n paddingRight: 5\r\n },\r\n button: {\r\n width: 130\r\n }\r\n}));\r\n\r\nconst OrderLocationItem = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { Location } = props;\r\n\r\n const getStoreOpenDays = () => {\r\n let openDays = \"\";\r\n if (Location.OpeningTimes) {\r\n openDays = Location.OpeningTimes[0].Day.substr(0, 3);\r\n if (Location.OpeningTimes.length > 0) {\r\n openDays += \" - \" + Location.OpeningTimes[Location.OpeningTimes.length - 1].Day.substr(0, 3);\r\n }\r\n }\r\n\r\n return openDays;\r\n }\r\n\r\n const getDayOfWeek = (date) => {\r\n const dayOfWeek = new Date(date).getDay();\r\n return isNaN(dayOfWeek) ? null :\r\n ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];\r\n }\r\n\r\n const getStoreOpenTimes = () => {\r\n let openDaysTime = \"\";\r\n let day = getDayOfWeek(Date.now());\r\n if (Location.OpeningTimes && Location.OpeningTimes.length > 0) {\r\n let times = Location.OpeningTimes.find(x => x.Day.toUpperCase() == day.toUpperCase());\r\n if (times) {\r\n let storeOpenTime = moment(moment().format(\"DD-MMM-YYYY \") + Location.OpeningTimes[0].Open);\r\n let storeCloseTime = moment(moment().format(\"DD-MMM-YYYY \") + Location.OpeningTimes[0].Close);\r\n openDaysTime = \"Open Today : \" + storeOpenTime.format(\"hh:mm a\") + \" - \" + storeCloseTime.format(\"hh:mm a\")\r\n }\r\n }\r\n\r\n return openDaysTime;\r\n }\r\n\r\n const isStoreOpenNow = () => {\r\n let isOpen = false;\r\n let day = getDayOfWeek(Date.now());\r\n if (Location.OpeningTimes && Location.OpeningTimes.length > 0) {\r\n let times = Location.OpeningTimes.find(x => x.Day.toUpperCase() == day.toUpperCase());\r\n if (times) {\r\n let storeOpenTime = moment(moment().format(\"DD-MMM-YYYY \") + Location.OpeningTimes[0].Open);\r\n let storeCloseTime = moment(moment().format(\"DD-MMM-YYYY \") + Location.OpeningTimes[0].Close);\r\n let now = moment();\r\n if (now > storeOpenTime && now < storeCloseTime) {\r\n isOpen = true;\r\n }\r\n }\r\n }\r\n\r\n return isOpen;\r\n }\r\n\r\n const onClickStoreHandler = () => {\r\n actionShopcartResetOrderProducts(dispatch);\r\n props.history.push('/orderlocationtab/' + Location.OrderLocation);\r\n }\r\n\r\n\r\n return (\r\n \r\n \r\n {giftcardAreaNumbers.giftcardsdisplayAreas.map((area, i) => {\r\n return area.ShowOnline && area !== undefined ?\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {orderLocations.map(location => {\r\n return ( \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderLocationScreen;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button, Grid, Typography, FormControl, RadioGroup, FormControlLabel, Radio } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n actionGetOrderLocationsByDisplayArea, actionShopcartResetOrderProducts,\r\n actionResetPaymentTransaction\r\n} from 'actions'\r\n\r\nimport { actionStartAppLoader, actionEndAppLoader } from 'actions/actionAppLoader';\r\nimport ErrorHandling from 'components/ErrorHandling/ErrorHandling';\r\n\r\nconst { OrderLocationPageTabTitle } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3)\r\n },\r\n radioGroup: {\r\n display: \"flex !important\"\r\n }\r\n}));\r\n\r\nconst OrderLocationTab = (props) => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n let [orderLocation, setOrderLocation] = useState(null);\r\n let [tabLocation, setTabLocation] = useState(0);\r\n\r\n const payment = useSelector(state => state.reducerPaymentTransaction.Payment);\r\n const orderLocationsLoading = useSelector(state => state.reducerOrderLocations.loading);\r\n const orderLocations = useSelector(state => state.reducerOrderLocations.orderLocations);\r\n const orderLocationOrignal = useSelector(state => state.reducerOrderLocations.orderLocation);\r\n\r\n useEffect(() => {\r\n if (props.match.path == \"/orderlocationtab/:name\") {\r\n if (orderLocations == undefined || orderLocations.length == 0)\r\n actionGetOrderLocationsByDisplayArea(dispatch, 0);\r\n }\r\n else {\r\n props.history.push('/notfound');\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (orderLocations && orderLocations.length > 0) {\r\n var orderLocation = orderLocations.find(x => x.OrderLocation == props.match.params.name);\r\n\r\n setOrderLocation(orderLocation)\r\n if (orderLocationOrignal && orderLocationOrignal.OrderLocation != orderLocation.OrderLocation) {\r\n actionShopcartResetOrderProducts(dispatch);\r\n }\r\n\r\n if (orderLocation && orderLocation.TabLocations && orderLocation.TabLocations.length == 1) {\r\n props.history.push('/ordermenu/' + orderLocation.TabLocations[0].TabLocationID);\r\n }\r\n }\r\n }, [orderLocations])\r\n\r\n useEffect(() => {\r\n if (orderLocationsLoading) {\r\n actionStartAppLoader(dispatch);\r\n }\r\n else {\r\n actionEndAppLoader(dispatch);\r\n }\r\n }, [orderLocationsLoading])\r\n\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const onClickBrowserMenuHandler = () => {\r\n let tabLocationID = orderLocation.TabLocations.find(x => x.TabLocationName == tabLocation).TabLocationID;\r\n props.history.push('/ordermenu/' + tabLocationID);\r\n }\r\n\r\n useEffect(() => {\r\n if (payment && payment.ReceiptNo && payment.ReceiptNo.toString().length > 0) {\r\n actionResetPaymentTransaction(dispatch);\r\n }\r\n }, []);\r\n\r\n if (orderLocation == undefined)\r\n return null\r\n else\r\n return (\r\n \r\n \r\n \r\n {orderLocation.OrderLocation} \r\n \r\n \r\n \r\n {OrderLocationPageTabTitle} \r\n { setTabLocation(event.target.value) }}>\r\n {orderLocation.TabLocations.map(tl => {\r\n return ( \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderLocationTab;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport { genfunction } from 'helpers'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n MenuImage: {\r\n width: 100,\r\n height: 100,\r\n maxWidth: 100,\r\n maxHeight: 100\r\n },\r\n MenuBox: {\r\n cursor: \"pointer\"\r\n }\r\n}));\r\n\r\nconst MenuItem = (props) => {\r\n\r\n const classes = useStyles();\r\n const { Menu } = props;\r\n\r\n const onClickMenuHandler = (menuName) => {\r\n props.history.push('/ordersubmenu/' + menuName);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n You are ordering from \r\n {orderLocation.OrderLocation + \" , \"} \r\n {\r\n props.history.push('/orderlocationtab/' + orderLocation.OrderLocation);\r\n }}\r\n >\r\n {orderLocation.TabLocations[0].TabLocationName}\r\n \r\n \r\n \r\n {orderMenu.map(menu => {\r\n return (\r\n \r\n )\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderMenu;","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n Dialog, DialogContent, DialogActions, Button, Grid,\r\n Typography, Select, MenuItem, Accordion, FormGroup, FormControlLabel,\r\n AccordionDetails, Checkbox, AccordionSummary, TextField\r\n} from '@material-ui/core';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport { NumberSpinner } from 'components'\r\nimport { genfunction } from 'helpers'\r\n\r\n\r\nconst { OrderSubMenuPageOrderProductNoteText } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n primarycolor: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n MenuImage: {\r\n width: 70,\r\n height: 70,\r\n maxWidth: 70,\r\n maxHeight: 70\r\n },\r\n button: {\r\n //borderRadius: 20\r\n }\r\n}));\r\n\r\nconst OrderProduct = props => {\r\n const { open, Product, onCancel, onConfirm } = props;\r\n const classes = useStyles();\r\n let [product, SetProduct] = useState(JSON.parse(JSON.stringify(Product)));\r\n\r\n if (product && product.Quantity == undefined) {\r\n let objProduct = { ...product };\r\n objProduct.Quantity = 1;\r\n objProduct.ProductNotes = \"\";\r\n SetProduct(objProduct);\r\n }\r\n\r\n const onChangeSubOptionHandler = (optionProductID, option) => {\r\n let objProduct = { ...product };\r\n let o = objProduct.Options.find(o => o.OptionName === option.OptionName);\r\n if (option.IsRequired == true)\r\n o.Products = o.Products.map(p => { p.IsSelected = false; return p; })\r\n if (optionProductID && optionProductID != \"\") {\r\n let p = o.Products.find(p => p.ProductID == optionProductID);\r\n p.IsSelected = true;\r\n }\r\n SetProduct(objProduct);\r\n }\r\n\r\n const onChangeDeleteSubOptionHandler = (optionProductID, option) => {\r\n let objProduct = { ...product };\r\n let o = objProduct.Options.find(o => o.OptionName === option.OptionName);\r\n let p = o.Products.find(p => p.ProductID == optionProductID);\r\n p.IsSelected = false;\r\n SetProduct(objProduct);\r\n }\r\n\r\n const onClickQuantityChangeHandler = (ref, Quantity) => {\r\n let objProduct = { ...product };\r\n objProduct.Quantity = Quantity;\r\n SetProduct(objProduct);\r\n }\r\n\r\n const onChangeProductNoteHanlder = (text) => {\r\n let objProduct = { ...product };\r\n objProduct.ProductNotes = text;\r\n SetProduct(objProduct);\r\n }\r\n\r\n const getTotalPrice = () => {\r\n let optionPrice = 0;\r\n if (product.Options && product.Options.length > 0) {\r\n product.Options.forEach(option => {\r\n if (option.Products && option.Products.length > 0) {\r\n option.Products.filter(p => p.IsSelected).forEach(p => {\r\n optionPrice += genfunction.getOrderProductPrice(p);\r\n });\r\n }\r\n });\r\n }\r\n return genfunction.getOrderProductPrice(product) + optionPrice;\r\n }\r\n\r\n const getOptionProductID = (option) => {\r\n let p;\r\n if (option && option.Products)\r\n p = option.Products.find(x => x.IsSelected == true);\r\n\r\n return p ? p.ProductID : \"\";\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {props.match.params.name} \r\n \r\n \r\n \r\n \r\n {orderMenu.find(x => x.MenuName == props.match.params.name && x.Departments && x.Departments.length > 0).Departments.filter(x => x.Products).map(dep => {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n { setInfoProduct(null) }}>\r\n \r\n {productPopUp && productPopUp.Product ?\r\n \r\n \r\n : \"\"}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderSubMenu;","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n Typography, Grid, IconButton, Button\r\n} from '@material-ui/core';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { ErrorHandling, DialogeBox } from 'components'\r\nimport { genfunction } from 'helpers'\r\nimport OrderProduct from './components/OrderProduct'\r\n\r\nimport { actionDeleteOrderProduct, actionUpdateOrderProducts } from 'actions/actionShopCart'\r\n\r\nconst { CartDiscardMsg } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(3),\r\n // paddingTop: 30,\r\n // paddingBottom: 30\r\n },\r\n canceButtonlIcon: {\r\n '& svg': {\r\n fontSize: 20\r\n },\r\n padding: 0,\r\n paddingLeft: 10\r\n }\r\n}));\r\n\r\nconst OrderItemsReview = props => {\r\n\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const [errorMsg, seterrorMsg] = useState(\"\");\r\n const [productPopUp, setProductPopUp] = useState({\r\n isOpen: false,\r\n Product: null,\r\n Department: null\r\n });\r\n\r\n const [productDeletePopUp, setProductDeletePopUp] = useState({\r\n isOpen: false,\r\n Product: null\r\n });\r\n\r\n const orderProducts = useSelector(state => state.reducerShopCart.orderProducts);\r\n const orderLocation = useSelector(state => state.reducerOrderLocations.orderLocation);\r\n const carddiscard = useSelector(state => state.reducerCardDiscardTime);\r\n\r\n useEffect(() => {\r\n if ((orderProducts && orderProducts.length == 0)) {\r\n let tabLocationID = orderLocation.TabLocations[0].TabLocationID;\r\n props.history.push('/ordermenu/' + tabLocationID);\r\n }\r\n }, [orderProducts])\r\n\r\n const getAllTotal = () => {\r\n\r\n let amount = {\r\n subtotal: 0,\r\n tax: 0,\r\n total: 0\r\n }\r\n\r\n let foodAmount = genfunction.getOrderProductsTotalPrice(orderProducts);\r\n amount.subtotal += foodAmount.subtotal;\r\n amount.tax += foodAmount.tax;\r\n amount.total += foodAmount.total;\r\n\r\n return amount;\r\n }\r\n\r\n const errorcancelhandle = () => {\r\n seterrorMsg(\"\");\r\n }\r\n\r\n const getProductOptions = (product) => {\r\n if (product.Options) {\r\n\r\n let productWithOptions = product.Options.filter(x => x.Products && x.Products.length > 0 && x.Products.find(y => y.IsSelected == true) != undefined);\r\n if (productWithOptions && productWithOptions.length > 0) {\r\n return (\r\n productWithOptions.map(option => {\r\n return (\r\n option.Products.map(opproduct => {\r\n return (\r\n opproduct.IsSelected ?\r\n \r\n \r\n \r\n \r\n Review your Order \r\n {orderLocation.OrderLocation + \" , \" + orderLocation.TabLocations[0].TabLocationName} \r\n\r\n \r\n {CartDiscardMsg} {\" \"} {millisecondsToTime(carddiscard.DiscardTime * 1000)}\r\n \r\n\r\n \r\n {/* Food Order */}\r\n \r\n {orderProducts.map(product => {\r\n return (\r\n \r\n \r\n { onClickProductHandler(null, product) }}\r\n >\r\n \r\n \r\n \r\n {genfunction.replaceEscapeCharacters(product.ProductName)}\r\n \r\n {getProductOptions(product)}\r\n\r\n \r\n \r\n \r\n x {product.Quantity}\r\n \r\n \r\n \r\n \r\n {genfunction.ccyFormat(genfunction.getOrderProductsTotalPrice([product]).subtotal)}\r\n \r\n \r\n \r\n setProductDeletePopUp({ isOpen: true, Product: product })}\r\n >\r\n \r\n \r\n )\r\n })}\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n Subtotal\r\n \r\n \r\n \r\n \r\n {genfunction.ccyFormat(getAllTotal().subtotal)}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Tax\r\n \r\n \r\n \r\n \r\n {genfunction.ccyFormat(getAllTotal().tax)}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Total\r\n \r\n \r\n \r\n \r\n {genfunction.ccyFormat(getAllTotal().total)}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n { actionDeleteOrderProduct(dispatch, productDeletePopUp.Product); setProductDeletePopUp({ isOpen: false, Product: null }) }}\r\n button2text=\"No\"\r\n button2clickhandler={() => setProductDeletePopUp({ isOpen: false, Product: null })}\r\n > \r\n\r\n {productPopUp && productPopUp.Product ?\r\n \r\n \r\n : \"\"}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderItemsReview;","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles, withStyles } from '@material-ui/styles';\r\nimport { useSelector } from 'react-redux';\r\nimport {\r\n Typography, TableCell, IconButton, TableRow, Grid, RadioGroup,\r\n FormControlLabel, Radio, Switch, Button, FormControl, TextField, useTheme, useMediaQuery\r\n} from '@material-ui/core';\r\n\r\nimport ToggleButton from '@material-ui/lab/ToggleButton';\r\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';\r\n\r\nimport InfoIcon from '@material-ui/icons/Info'\r\nimport { genfunction } from 'helpers'\r\nimport { NumberInput, FormattedInputs } from 'components'\r\nimport { Height } from '@material-ui/icons';\r\n\r\nconst { Currency } = window['runConfig'];\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n amountBtn: {\r\n margin: 3\r\n },\r\n img: {\r\n width: \"100%\",\r\n //Height: 200,\r\n objectFit: \"cover\",\r\n objectPosition: \"bottom\"\r\n }\r\n}));\r\n\r\nconst StyledToggleButtonGroup = withStyles((theme) => ({\r\n grouped: {\r\n marginRight: theme.spacing(1),\r\n marginTop: theme.spacing(1),\r\n display: \"unset\",\r\n minWidth: 60,\r\n border: '1px solid !important',\r\n '&:not(:first-child)': {\r\n borderRadius: theme.shape.borderRadius,\r\n },\r\n '&:first-child': {\r\n borderRadius: theme.shape.borderRadius,\r\n },\r\n }\r\n\r\n}))(ToggleButtonGroup);\r\n\r\nconst DonationProduct = props => {\r\n const { Product, onChangeAmount } = props;\r\n const classes = useStyles();\r\n\r\n const cartDonationProducts = useSelector(state => state.reducerShopCart.donationProducts);\r\n\r\n let [selectedToogleButton, setSelectedToogleButton] = React.useState(null);\r\n let [otherAmount, setOtherAmount] = React.useState(null);\r\n let [validationInfo, setValidationInfo] = React.useState(\"\");\r\n\r\n let hasImage = Product.ProductImageURL && Product.ProductImageURL != \"\";\r\n\r\n useEffect(() => {\r\n if (cartDonationProducts && cartDonationProducts.length > 0) {\r\n let item = cartDonationProducts.find(x => x.ProductID == Product.ProductID)\r\n if (item) {\r\n if (item.DisplayAmount == \"other\")\r\n setOtherAmount(item.Amount);\r\n\r\n setSelectedToogleButton(item.DisplayAmount);\r\n }\r\n }\r\n }, [cartDonationProducts])\r\n\r\n const onChangeToogleButtonHandler = (event, newValue) => {\r\n setSelectedToogleButton(newValue);\r\n if (newValue)\r\n onChangeAmount(getNewProductObj(Product, newValue.toString(), newValue == \"other\" ? 0 : parseFloat(newValue)))\r\n else\r\n onChangeAmount(getNewProductObj(Product, \"\", 0))\r\n\r\n if (newValue != \"other\")\r\n setOtherAmount(null);\r\n };\r\n\r\n const getNewProductObj = (product, displayAmount, amount) => {\r\n let prod = {\r\n ProductID: product.ProductID,\r\n ProductName: product.ProductName,\r\n DisplayArea: product.DisplayArea,\r\n DisplayAmount: displayAmount,\r\n Amount: amount,\r\n UseAlternateMerchantOnline: product.UseAlternateMerchantOnline\r\n }\r\n return prod;\r\n }\r\n\r\n const onValidationChangeOtherAmount = (info) => {\r\n setValidationInfo(info);\r\n }\r\n\r\n const onChangeOtherAmount = (event) => {\r\n setOtherAmount(event.target.value);\r\n onChangeAmount(getNewProductObj(Product, \"other\", parseFloat(event.target.value)))\r\n }\r\n\r\n const getDisplayAmountButtons = (product) => {\r\n\r\n return \r\n \r\n \r\n \r\n
\r\n\r\n {viewProducts.sort((a, b) => a.SortOrder - b.SortOrder).map(product => {\r\n return \r\n \r\n Total : {genfunction.ccyFormat(getTotalAmount())} \r\n \r\n \r\n { setNote(event.target.value) }}\r\n minRows={4} variant=\"outlined\" fullWidth={true} multiline={true} inputProps={{ maxLength: 256 }}> \r\n \r\n \r\n \r\n \r\n : {errorMsg} }\r\n
\r\n );\r\n};\r\n\r\nexport default DonationProducts;\r\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { makeStyles } from '@material-ui/styles';\nimport { Grid } from '@material-ui/core';\nimport { ErrorHandling, DisplayCard } from 'components';\nimport { actionStartAppLoader, actionEndAppLoader, actionGetDisplayAreasByType } from 'actions';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(3),\n marginTop: theme.spacing(5)\n }\n}));\n\nconst DonationAreas = (props) => {\n\n const dispatch = useDispatch()\n const classes = useStyles();\n\n const [errorMsg, seterrorMsg] = useState(\"\");\n\n const loading = useSelector(state => state.reducerDisplayAreas.loading);\n const displayAreas = useSelector(state => state.reducerDisplayAreas.displayAreas);\n const error = useSelector(state => state.reducerDisplayAreas.displayAreasError);\n\n useEffect(() => {\n actionGetDisplayAreasByType(dispatch, 'donationpage', null, false);\n }, [])\n\n useEffect(() => {\n if (loading)\n actionStartAppLoader(dispatch);\n else\n actionEndAppLoader(dispatch);\n }, [loading])\n\n useEffect(() => {\n seterrorMsg(error);\n }, [error])\n\n const errorcancelhandle = () => {\n seterrorMsg(\"\");\n }\n\n const onClickDonateHandler = (ref) => {\n props.history.push({\n pathname: 'donation/Area/' + ref.DisplayAreaNo\n })\n }\n\n return (\n \r\n
\n 
\n
\n \n {RecaptchaV3Client && RecaptchaV3Client != \"\" ?\n \n \n \n \n \n \n \n \n \n
\n )\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { applyMiddleware, compose, createStore } from 'redux';\nimport {Provider} from 'react-redux'\nimport createSagaMiddleware from 'redux-saga'\n\nimport rootReducer from './reducers';\nimport { rootSaga } from './saga';\n\nimport * as serviceWorker from './serviceWorker';\nimport App from './App';\n\nconst sagaMiddleware = createSagaMiddleware();\nconst store = createStore(\n rootReducer,\n applyMiddleware(sagaMiddleware)\n)\nsagaMiddleware.run(rootSaga);\n\nReactDOM.render(