\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\",\r\n hover: false,\r\n colorsColls: [],\r\n coloredColls: [],\r\n striped: false,\r\n customCellClasses: [],\r\n customClassesForCells: [],\r\n customHeadCellClasses: [],\r\n customHeadClassesForCells: []\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n // Of(PropTypes.arrayOf(PropTypes.node)) || Of(PropTypes.object),\r\n tableData: PropTypes.array,\r\n hover: PropTypes.bool,\r\n coloredColls: PropTypes.arrayOf(PropTypes.number),\r\n // Of([\"warning\",\"primary\",\"danger\",\"success\",\"info\",\"rose\",\"gray\"]) - colorsColls\r\n colorsColls: PropTypes.array,\r\n customCellClasses: PropTypes.arrayOf(PropTypes.string),\r\n customClassesForCells: PropTypes.arrayOf(PropTypes.number),\r\n customHeadCellClasses: PropTypes.arrayOf(PropTypes.string),\r\n customHeadClassesForCells: PropTypes.arrayOf(PropTypes.number),\r\n striped: PropTypes.bool,\r\n // this will cause some changes in font\r\n tableShopping: PropTypes.bool\r\n};\r\n","import Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport blueHeaderSectionStyle from \"assets/jss/xrs/views/sectionsSections/blueHeaderSectionStyle\";\r\nimport Context from \"../../../utils/context\";\r\nimport Table from \"components/Table/Table.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\n\r\nconst useStyles = makeStyles(blueHeaderSectionStyle);\r\nexport default function BlueHeaderSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [ballance, setBallance] = React.useState(0);\r\n const [site, setSite] = React.useState(\"\");\r\n const token = sessionStorage.getItem(\"access_token\");\r\n const [phone, setPhone] = React.useState(\"\");\r\n const stateSite = useSelector((state) => state.SiteReducer.site);\r\n const stateSelectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n const deptphonenumber = useSelector(\r\n (state) => state.GetSiteDetailsReducer.deptphonenumber\r\n );\r\n const numOfAccounts = useSelector(\r\n (state) => state.AccountsReducer.numOfAccounts\r\n );\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n\r\n React.useEffect(() => {\r\n if (stateSelectedAccount == \"NoAccount\") {\r\n setBallance(stateCustomer.totalbalance);\r\n } else {\r\n setBallance(stateSelectedAccount.balance);\r\n }\r\n\r\n if (deptphonenumber != \"\") {\r\n setPhone(deptphonenumber);\r\n } else {\r\n setPhone(stateSite.phonenumber);\r\n }\r\n }, [stateSelectedAccount]);\r\n\r\n return (\r\n \r\n {\" \"}\r\n {numOfAccounts > 1 && stateSelectedAccount != \"NoAccount\"\r\n ? \"Balance: \"\r\n : \"Total Balance: \"}\r\n
\r\n \r\n {\" \" +\r\n stateSelectedAccount.clientname +\r\n \": \" +\r\n stateSelectedAccount.accountnumber}\r\n
\r\n ) : null}\r\n\r\n Call us now:\r\n {isMobile ? (\r\n \r\n {phone}\r\n \r\n ) : (\r\n {phone}\r\n )}\r\n
\r\n\r\n \r\n \r\n {\r\n setTopNav(slider);\r\n }}\r\n {...SliderSettings}\r\n >\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n Verify User\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Change {CredentialToReset == \"password\" ? \"Password\" : \"Pin\"}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Confirmation\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n setReference(e.target.value);\r\n },\r\n }}\r\n />\r\n {registrationType == \"phone\" ? (\r\n {\r\n setMobileNumber(e.target.value);\r\n },\r\n }}\r\n />\r\n ) : registrationType == \"email\" ? (\r\n {\r\n setcEmail(e.target.value);\r\n },\r\n }}\r\n />\r\n ) : (\r\n <>\r\n {\r\n setMobileNumber(e.target.value);\r\n },\r\n }}\r\n />\r\n {\r\n setDateOfBirth(e.target.value);\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n\r\n \r\n \r\n
\r\n Verify by SMS
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n Back\r\n \r\n \r\n {step === steps.length - 1 ? \"Finish\" : \"Next\"}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n setOldPassword(e.target.value);\r\n },\r\n }}\r\n />\r\n {\r\n setNewPassword(e.target.value);\r\n },\r\n }}\r\n />\r\n {\r\n setConfirmPassword(e.target.value);\r\n },\r\n }}\r\n />\r\n {\r\n setSecurityCode(e.target.value);\r\n },\r\n }}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n A once off token has been sent to your Mobile. Please\r\n provide{\" \"}\r\n {CredentialToReset == \"password\" ? \"password\" : \"pin\"} and\r\n once off token details below\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n Back\r\n \r\n \r\n {step === steps.length - 1 ? \"Finish\" : \"Next\"}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","/* eslint-disable react/prop-types */\r\nimport { datePickerDefaultProps } from '@material-ui/pickers/constants/prop-types';\r\nimport React from 'react';\r\nimport Intercom from 'react-intercom';\r\n\r\nexport default function IntercomComponent(props) {\r\n\r\n const user = {\r\n user_id: props.id,\r\n email: props.email,\r\n name: props.name\r\n };\r\n const [value, setValue] = React.useState(\"\");\r\n const [visible, setVisible] = React.useState(false);\r\n React.useEffect(() => {\r\n setValue(props.authKey);\r\n setVisible(props.chatvisible);\r\n },[props.chatvisible])\r\n\r\n if (visible)\r\n {\r\n return (\r\n \r\n You have successfully changed your{\" \"}\r\n {CredentialToReset == \"password\" ? \"password\" : \"pin\"}\r\n
\r\n\r\n \r\n
\r\n\r\n Welcome
\r\n {buttons.length === 0 ? null : (\r\n <>\r\n {\" \"}\r\n {renderButton(\r\n \"viewOffer\",\r\n \"/viewoffer\",\r\n \"fa fa-suitcase\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"createPayment\",\r\n \"/createPayment\",\r\n \"fa fa-credit-card\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"payNow\",\r\n \"/payNow\",\r\n \"fa fa-credit-card-alt\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"viewAccount\",\r\n \"/viewAccount\",\r\n \"fa fa-user-circle-o\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"budgetPage\",\r\n \"/budgetPage\",\r\n \"fa fa-handshake-o\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"faq\",\r\n \"/faq\",\r\n \"fa fa-question-circle-o\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderButton(\r\n \"requestcallback-page\",\r\n \"/requestcallback-page\",\r\n \"fa fa-phone\",\r\n buttons,\r\n classes,\r\n page,\r\n resetDrawerState\r\n )}\r\n {renderUrlButtons(buttons, classes)}\r\n \r\n )}\r\n \r\n \r\n );\r\n } else if (numOfAccounts > 1) {\r\n return (\r\n\r\n \r\n {loading == true ? \r\n \r\n {stateCustomer.unreadmessages == 0 ? 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 {accounts.map((account, index) => (\r\n \r\n {buttons.length === 0 ? null : (\r\n <>\r\n {\" \"}\r\n {renderButton(\r\n \"viewOffer\",\r\n \"/viewoffer\",\r\n \"fa fa-suitcase\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"createPayment\",\r\n \"/createPayment\",\r\n \"fa fa-credit-card\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"payNow\",\r\n \"/payNow\",\r\n \"fa fa-credit-card-alt\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"viewAccount\",\r\n \"/viewAccount\",\r\n \"fa fa-user-circle-o\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"budgetPage\",\r\n \"/budgetPage\",\r\n \"fa fa-handshake-o\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"faq\",\r\n \"/faq\",\r\n \"fa fa-question-circle-o\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderButton(\r\n \"requestcallback-page\",\r\n \"/requestcallback-page\",\r\n \"fa fa-phone\",\r\n buttons,\r\n classes,\r\n page\r\n )}\r\n {renderUrlButtons(buttons, classes)}\r\n \r\n )}\r\n\r\n
\r\n );\r\n } else if (numOfAccounts == 0) {\r\n return \"loading...\";\r\n }\r\n}\r\n\r\nfunction useOnClickOutside(ref, handler) {\r\n React.useEffect(() => {\r\n if (isMobile) {\r\n const listener = (event) => {\r\n // Do nothing if clicking ref's element or descendent elements\r\n if (!ref.current || ref.current.contains(event.target)) {\r\n return;\r\n }\r\n handler(event);\r\n };\r\n document.addEventListener(\"mousedown\", listener);\r\n document.addEventListener(\"touchstart\", listener);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", listener);\r\n document.removeEventListener(\"touchstart\", listener);\r\n };\r\n\r\n // Add ref and handler to effect dependencies\r\n // It's worth noting that because passed in handler is a new ...\r\n // ... function on every render that will cause this effect ...\r\n // ... callback/cleanup to run every render. It's not a big deal ...\r\n // ... but to optimize you can wrap handler in useCallback before ...\r\n // ... passing it into this hook.\r\n }\r\n }, [ref, handler]);\r\n}\r\n\r\nfunction renderButton(name, path, icon, buttons, classes, page, handleClose) {\r\n const button = buttons.find((x) => x.buttonName === name);\r\n // console.log(button.buttonName);\r\n // console.log(button.buttonVisible);\r\n if (!button || button.buttonVisible !== \"Y\") {\r\n return null;\r\n }\r\n const openInNewTab = button.buttonFrameURL;\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n\r\n {logo === \"\" ? null : (\r\n \r\n \r\n
\r\n\r\n Welcome
\r\n\r\n\r\n \r\n
\r\n\r\n Accounts ({numOfAccounts})
\r\n\r\n\r\n \r\n
\r\n\r\n Buget Planner
\r\n\r\n \r\n
\r\n Faq
\r\n \r\n\r\n handleFirtstDrawerOpen(true)}\r\n className={classes.linkButton}\r\n color={page == \"back\" ? \"primary\" : \"linkedin\"}\r\n >\r\n
\r\n\r\n back
\r\n \r\n\r\n \r\n
\r\n back
\r\n \r\n\r\n \r\n
\r\n {button.buttonText}
\r\n \r\n );\r\n}\r\nfunction renderUrlButtons(buttons, classes) {\r\n const fillteredButtons = buttons.filter(\r\n (x) => x.buttonFrameURL && x.buttonVisible == \"Y\"\r\n );\r\n // console.log(button.buttonName);\r\n // console.log(button.buttonVisible);\r\n\r\n return (\r\n <>\r\n {fillteredButtons.map((el) => (\r\n\r\n
\r\n ))}\r\n \r\n );\r\n}\r\n\r\nfunction textClass(button) {\r\n return button.buttonVisible === \"Y\" ? \"DisplayY\" : \"DisplayN\";\r\n}\r\n","import {\r\n defaultFont,\r\n primaryColor,\r\n primaryBoxShadow,\r\n infoColor,\r\n infoBoxShadow,\r\n successColor,\r\n successBoxShadow,\r\n warningColor,\r\n warningBoxShadow,\r\n dangerColor,\r\n dangerBoxShadow,\r\n roseColor,\r\n roseBoxShadow,\r\n blackColor,\r\n whiteColor,\r\n grayColor,\r\n hexToRgb,\r\n} from \"assets/jss/xrs.js\";\r\n\r\nconst customDropdownStyle = (theme) => ({\r\n popperClose: {\r\n pointerEvents: \"none\",\r\n display: \"none !important\",\r\n },\r\n pooperNav: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n position: \"static !important\",\r\n left: \"unset !important\",\r\n top: \"unset !important\",\r\n transform: \"none !important\",\r\n willChange: \"none !important\",\r\n \"& > div\": {\r\n boxShadow: \"none !important\",\r\n marginLeft: \"1.5rem\",\r\n marginRight: \"1.5rem\",\r\n transition: \"none !important\",\r\n marginTop: \"0px !important\",\r\n marginBottom: \"5px !important\",\r\n padding: \"0px !important\",\r\n },\r\n },\r\n },\r\n manager: {\r\n \"& > div > button:first-child > span:first-child, & > div > a:first-child > span:first-child\": {\r\n width: \"100%\",\r\n },\r\n },\r\n innerManager: {\r\n display: \"block\",\r\n \"& > div > button,& > div > a\": {\r\n margin: \"0px !important\",\r\n color: \"inherit !important\",\r\n padding: \"10px 20px !important\",\r\n \"& > span:first-child\": {\r\n width: \"100%\",\r\n justifyContent: \"flex-start\",\r\n },\r\n },\r\n },\r\n target: {\r\n \"& > button:first-child > span:first-child, & > a:first-child > span:first-child\": {\r\n display: \"inline-block\",\r\n },\r\n \"& $caret\": {\r\n marginLeft: \"0px\",\r\n },\r\n },\r\n dropdown: {\r\n borderRadius: \"3px\",\r\n border: \"0\",\r\n boxShadow: \"0 2px 5px 0 rgba(\" + hexToRgb(blackColor) + \", 0.26)\",\r\n top: \"100%\",\r\n zIndex: \"1000\",\r\n minWidth: \"160px\",\r\n padding: \"5px 0\",\r\n margin: \"2px 0 0\",\r\n fontSize: \"14px\",\r\n textAlign: \"left\",\r\n listStyle: \"none\",\r\n backgroundColor: whiteColor,\r\n backgroundClip: \"padding-box\",\r\n },\r\n menuList: {\r\n padding: \"0\",\r\n },\r\n pooperResponsive: {\r\n zIndex: \"1200\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n zIndex: \"1640\",\r\n position: \"static\",\r\n float: \"none\",\r\n width: \"auto\",\r\n marginTop: \"0\",\r\n backgroundColor: \"transparent\",\r\n border: \"0\",\r\n boxShadow: \"none\",\r\n color: \"black\",\r\n },\r\n },\r\n dropdownItem: {\r\n ...defaultFont,\r\n fontSize: \"13px\",\r\n padding: \"10px 20px\",\r\n margin: \"0 5px\",\r\n borderRadius: \"2px\",\r\n position: \"relative\",\r\n transition: \"all 150ms linear\",\r\n display: \"block\",\r\n clear: \"both\",\r\n fontWeight: \"400\",\r\n height: \"100%\",\r\n color: grayColor[8],\r\n whiteSpace: \"nowrap\",\r\n minHeight: \"unset\",\r\n },\r\n darkHover: {\r\n \"&:hover\": {\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(grayColor[9]) +\r\n \", 0.4)\",\r\n backgroundColor: grayColor[9],\r\n color: whiteColor,\r\n },\r\n },\r\n primaryHover: {\r\n \"&:hover\": {\r\n backgroundColor: primaryColor[0],\r\n color: whiteColor,\r\n ...primaryBoxShadow,\r\n },\r\n },\r\n infoHover: {\r\n \"&:hover\": {\r\n backgroundColor: infoColor[0],\r\n color: whiteColor,\r\n ...infoBoxShadow,\r\n },\r\n },\r\n successHover: {\r\n \"&:hover\": {\r\n backgroundColor: successColor[0],\r\n color: whiteColor,\r\n ...successBoxShadow,\r\n },\r\n },\r\n warningHover: {\r\n \"&:hover\": {\r\n backgroundColor: warningColor[0],\r\n color: whiteColor,\r\n ...warningBoxShadow,\r\n },\r\n },\r\n dangerHover: {\r\n \"&:hover\": {\r\n backgroundColor: dangerColor[0],\r\n color: whiteColor,\r\n ...dangerBoxShadow,\r\n },\r\n },\r\n roseHover: {\r\n \"&:hover\": {\r\n backgroundColor: roseColor[0],\r\n color: whiteColor,\r\n ...roseBoxShadow,\r\n },\r\n },\r\n dropdownItemRTL: {\r\n textAlign: \"right\",\r\n },\r\n dropdownDividerItem: {\r\n margin: \"5px 0\",\r\n backgroundColor: \"rgba(\" + hexToRgb(blackColor) + \", 0.12)\",\r\n height: \"1px\",\r\n overflow: \"hidden\",\r\n },\r\n buttonIcon: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n },\r\n caret: {\r\n transition: \"all 150ms ease-in\",\r\n display: \"inline-block\",\r\n width: \"0\",\r\n height: \"0\",\r\n marginLeft: \"4px\",\r\n verticalAlign: \"middle\",\r\n borderTop: \"4px solid\",\r\n borderRight: \"4px solid transparent\",\r\n borderLeft: \"4px solid transparent\",\r\n },\r\n caretActive: {\r\n transform: \"rotate(180deg)\",\r\n },\r\n caretDropup: {\r\n transform: \"rotate(180deg)\",\r\n },\r\n caretRTL: {\r\n marginRight: \"4px\",\r\n },\r\n dropdownHeader: {\r\n display: \"block\",\r\n padding: \"0.1875rem 1.25rem\",\r\n fontSize: \"0.75rem\",\r\n lineHeight: \"1.428571\",\r\n color: grayColor[10],\r\n whiteSpace: \"nowrap\",\r\n fontWeight: \"inherit\",\r\n marginTop: \"10px\",\r\n minHeight: \"24px\",\r\n \"&:hover,&:focus\": {\r\n backgroundColor: \"transparent\",\r\n cursor: \"auto\",\r\n },\r\n },\r\n noLiPadding: {\r\n padding: \"0\",\r\n },\r\n});\r\n\r\nexport default customDropdownStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport MenuList from \"@material-ui/core/MenuList\";\r\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Grow from \"@material-ui/core/Grow\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport Popper from \"@material-ui/core/Popper\";\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/xrs/components/customDropdownStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomDropdown(props) {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n\r\n const handleClick = event => {\r\n if (anchorEl && anchorEl.contains(event.target)) {\r\n setAnchorEl(null);\r\n } else {\r\n setAnchorEl(event.currentTarget);\r\n }\r\n };\r\n const handleClose = event => {\r\n if (anchorEl.contains(event.target)) {\r\n return;\r\n }\r\n setAnchorEl(null);\r\n };\r\n const handleCloseMenu = param => {\r\n setAnchorEl(null);\r\n if (props && props.onClick) {\r\n props.onClick(param);\r\n }\r\n };\r\n const {\r\n buttonText,\r\n buttonIcon,\r\n dropdownList,\r\n buttonProps,\r\n dropup,\r\n dropdownHeader,\r\n caret,\r\n hoverColor,\r\n dropPlacement,\r\n rtlActive,\r\n noLiPadding,\r\n innerDropDown,\r\n navDropdown\r\n } = props;\r\n const classes = useStyles();\r\n const caretClasses = classNames({\r\n [classes.caret]: true,\r\n [classes.caretDropup]: dropup && !anchorEl,\r\n [classes.caretActive]: Boolean(anchorEl) && !dropup,\r\n [classes.caretRTL]: rtlActive\r\n });\r\n const dropdownItem = classNames({\r\n [classes.dropdownItem]: true,\r\n [classes[hoverColor + \"Hover\"]]: true,\r\n [classes.noLiPadding]: noLiPadding,\r\n [classes.dropdownItemRTL]: rtlActive\r\n });\r\n const dropDownMenu = (\r\n \r\n \r\n
\r\n {el.buttonText}
\r\n\r\n \r\n {() => (\r\n \r\n \r\n {innerDropDown ? (\r\n dropDownMenu\r\n ) : (\r\n \r\n {dropDownMenu}\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nCustomDropdown.defaultProps = {\r\n caret: true,\r\n dropup: false,\r\n hoverColor: \"primary\"\r\n};\r\n\r\nCustomDropdown.propTypes = {\r\n hoverColor: PropTypes.oneOf([\r\n \"dark\",\r\n \"primary\",\r\n \"info\",\r\n \"success\",\r\n \"warning\",\r\n \"danger\",\r\n \"rose\"\r\n ]),\r\n buttonText: PropTypes.node,\r\n buttonIcon: PropTypes.object,\r\n dropdownList: PropTypes.array,\r\n buttonProps: PropTypes.object,\r\n dropup: PropTypes.bool,\r\n dropdownHeader: PropTypes.node,\r\n rtlActive: PropTypes.bool,\r\n caret: PropTypes.bool,\r\n dropPlacement: PropTypes.oneOf([\r\n \"bottom\",\r\n \"top\",\r\n \"right\",\r\n \"left\",\r\n \"bottom-start\",\r\n \"bottom-end\",\r\n \"top-start\",\r\n \"top-end\",\r\n \"right-start\",\r\n \"right-end\",\r\n \"left-start\",\r\n \"left-end\"\r\n ]),\r\n noLiPadding: PropTypes.bool,\r\n innerDropDown: PropTypes.bool,\r\n navDropdown: PropTypes.bool,\r\n // This is a function that returns the clicked menu item\r\n onClick: PropTypes.func\r\n};\r\n","import { whiteColor, blackColor, grayColor, hexToRgb } from \"assets/jss/xrs.js\";\r\n\r\nconst tooltipsStyle = {\r\n tooltip: {\r\n padding: \"10px 15px\",\r\n minWidth: \"130px\",\r\n color: whiteColor,\r\n lineHeight: \"1.7em\",\r\n background: \"rgba(\" + hexToRgb(grayColor[15]) + \",0.9)\",\r\n border: \"none\",\r\n borderRadius: \"3px\",\r\n boxShadow:\r\n \"0 8px 10px 1px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 3px 14px 2px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 5px 5px -3px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.2)\",\r\n maxWidth: \"200px\",\r\n textAlign: \"center\",\r\n fontFamily: '\"Helvetica Neue\",Helvetica,Arial,sans-serif',\r\n fontSize: \"0.875em\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n textShadow: \"none\",\r\n textTransform: \"none\",\r\n letterSpacing: \"normal\",\r\n wordBreak: \"normal\",\r\n wordSpacing: \"normal\",\r\n wordWrap: \"normal\",\r\n whiteSpace: \"normal\",\r\n lineBreak: \"auto\"\r\n }\r\n};\r\n\r\nexport default tooltipsStyle;\r\n","import {\r\n grayColor,\r\n whiteColor,\r\n mlAuto,\r\n hexToRgb,\r\n primaryColor,\r\n} from \"assets/jss/xrs.js\";\r\n\r\nimport tooltip from \"assets/jss/xrs/tooltipsStyle.js\";\r\n\r\nconst headerLinksStyle = (theme) => ({\r\n list: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n WebkitBoxAlign: \"center\",\r\n MsFlexAlign: \"center\",\r\n alignItems: \"center\",\r\n WebkitBoxOrient: \"horizontal\",\r\n WebkitBoxDirection: \"normal\",\r\n MsFlexDirection: \"row\",\r\n flexDirection: \"row\",\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n display: \"block\",\r\n },\r\n marginTop: \"0px\",\r\n display: \"flex\",\r\n paddingLeft: \"0\",\r\n marginBottom: \"0\",\r\n listStyle: \"none\",\r\n padding: \"0\",\r\n },\r\n listItem: {\r\n float: \"left\",\r\n color: \"inherit\",\r\n position: \"relative\",\r\n display: \"block\",\r\n width: \"auto\",\r\n margin: \"0\",\r\n padding: \"0\",\r\n fontFamily: primaryColor[8],\r\n fontSize: primaryColor[9],\r\n [theme.breakpoints.down(\"sm\")]: {\r\n \"& ul\": {\r\n maxHeight: \"400px\",\r\n overflow: \"scroll\",\r\n },\r\n width: \"100%\",\r\n \"&:not(:last-child)\": {\r\n \"&:after\": {\r\n width: \"calc(100% - 30px)\",\r\n content: '\"\"',\r\n display: \"block\",\r\n height: \"1px\",\r\n marginLeft: \"15px\",\r\n backgroundColor: grayColor[14],\r\n },\r\n },\r\n },\r\n },\r\n listItemText: {\r\n padding: \"0 !important\",\r\n },\r\n navLink: {\r\n color: \"inherit\",\r\n position: \"relative\",\r\n padding: \"0.9375rem\",\r\n fontWeight: \"500\",\r\n fontSize: \"12px\",\r\n textTransform: \"uppercase\",\r\n lineHeight: \"20px\",\r\n textDecoration: \"none\",\r\n margin: \"0px\",\r\n display: \"inline-flex\",\r\n \"&:hover,&:focus\": {\r\n color: \"inherit\",\r\n },\r\n \"& .fab,& .far,& .fal,& .fas,& .material-icons\": {\r\n position: \"relative\",\r\n top: \"2px\",\r\n marginTop: \"-4px\",\r\n marginRight: \"4px\",\r\n marginBottom: \"0px\",\r\n fontSize: \"1.25rem\",\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"calc(100% - 30px)\",\r\n marginLeft: \"15px\",\r\n marginBottom: \"8px\",\r\n marginTop: \"8px\",\r\n textAlign: \"left\",\r\n \"& > span:first-child\": {\r\n justifyContent: \"flex-start\",\r\n },\r\n },\r\n \"& svg\": {\r\n marginRight: \"3px\",\r\n width: \"20px\",\r\n height: \"20px\",\r\n },\r\n },\r\n navLinkJustIcon: {\r\n \"& .fab,& .far,& .fal,& .fas,& .material-icons\": {\r\n marginRight: \"0px\",\r\n },\r\n \"& svg\": {\r\n marginRight: \"0px\",\r\n },\r\n },\r\n navButton: {\r\n position: \"relative\",\r\n fontWeight: \"400\",\r\n fontSize: \"12px\",\r\n textTransform: \"uppercase\",\r\n lineHeight: \"20px\",\r\n textDecoration: \"none\",\r\n margin: \"0px\",\r\n display: \"inline-flex\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"calc(100% - 30px)\",\r\n marginLeft: \"15px\",\r\n marginBottom: \"5px\",\r\n marginTop: \"5px\",\r\n textAlign: \"left\",\r\n \"& > span:first-child\": {\r\n justifyContent: \"flex-start\",\r\n },\r\n },\r\n \"& $icons\": {\r\n marginRight: \"3px\",\r\n },\r\n },\r\n notificationNavLink: {\r\n color: \"inherit\",\r\n padding: \"0.9375rem\",\r\n fontWeight: \"400\",\r\n fontSize: \"12px\",\r\n textTransform: \"uppercase\",\r\n lineHeight: \"20px\",\r\n textDecoration: \"none\",\r\n margin: \"0px\",\r\n display: \"inline-flex\",\r\n },\r\n registerNavLink: {\r\n position: \"relative\",\r\n fontWeight: \"400\",\r\n fontSize: \"12px\",\r\n textTransform: \"uppercase\",\r\n lineHeight: \"20px\",\r\n textDecoration: \"none\",\r\n margin: \"0px\",\r\n display: \"inline-flex\",\r\n },\r\n navLinkActive: {\r\n \"&, &:hover, &:focus,&:active \": {\r\n color: \"inherit\",\r\n backgroundColor: \"rgba(\" + hexToRgb(whiteColor) + \", 0.1)\",\r\n },\r\n },\r\n icons: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n marginRight: \"14px\",\r\n },\r\n dropdownIcons: {\r\n width: \"24px\",\r\n height: \"24px\",\r\n marginRight: \"14px\",\r\n opacity: \"0.5\",\r\n marginTop: \"-4px\",\r\n top: \"1px\",\r\n verticalAlign: \"middle\",\r\n fontSize: \"24px\",\r\n position: \"relative\",\r\n },\r\n socialIcons: {\r\n position: \"relative\",\r\n fontSize: \"1.25rem\",\r\n maxWidth: \"24px\",\r\n },\r\n dropdownLink: {\r\n \"&,&:hover,&:focus\": {\r\n color: primaryColor[10],\r\n textDecoration: \"none\",\r\n fontWeight: 400,\r\n display: \"flex\",\r\n padding: \"0.75rem 1.25rem 0.75rem 0.75rem\",\r\n },\r\n },\r\n img: {\r\n paddingLeft: \"10px\",\r\n },\r\n ...tooltip,\r\n marginRight5: {\r\n marginRight: \"5px\",\r\n },\r\n collapse: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex !important\",\r\n MsFlexPreferredSize: \"auto\",\r\n flexBasis: \"auto\",\r\n },\r\n WebkitBoxFlex: \"1\",\r\n MsFlexPositive: \"1\",\r\n flexGrow: \"1\",\r\n WebkitBoxAlign: \"center\",\r\n MsFlexAlign: \"center\",\r\n alignItems: \"center\",\r\n },\r\n mlAuto,\r\n});\r\n\r\nexport default headerLinksStyle;\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// react components for routing our app without refresh\r\nimport { Link } from \"react-router-dom\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// @material-ui/icons\r\nimport Apps from \"@material-ui/icons/Apps\";\r\nimport ShoppingCart from \"@material-ui/icons/ShoppingCart\";\r\nimport ViewDay from \"@material-ui/icons/ViewDay\";\r\nimport Dns from \"@material-ui/icons/Dns\";\r\nimport Build from \"@material-ui/icons/Build\";\r\nimport ListIcon from \"@material-ui/icons/List\";\r\nimport People from \"@material-ui/icons/People\";\r\nimport Assignment from \"@material-ui/icons/Assignment\";\r\nimport MonetizationOn from \"@material-ui/icons/MonetizationOn\";\r\nimport Chat from \"@material-ui/icons/Chat\";\r\nimport Call from \"@material-ui/icons/Call\";\r\nimport ViewCarousel from \"@material-ui/icons/ViewCarousel\";\r\nimport Home from \"@material-ui/icons/Home\";\r\nimport ArtTrack from \"@material-ui/icons/ArtTrack\";\r\nimport ViewQuilt from \"@material-ui/icons/ViewQuilt\";\r\nimport LocationOn from \"@material-ui/icons/LocationOn\";\r\nimport Fingerprint from \"@material-ui/icons/Fingerprint\";\r\nimport AttachMoney from \"@material-ui/icons/AttachMoney\";\r\nimport Store from \"@material-ui/icons/Store\";\r\nimport AccountCircle from \"@material-ui/icons/AccountCircle\";\r\nimport PersonAdd from \"@material-ui/icons/PersonAdd\";\r\nimport Layers from \"@material-ui/icons/Layers\";\r\nimport ShoppingBasket from \"@material-ui/icons/ShoppingBasket\";\r\nimport LineStyle from \"@material-ui/icons/LineStyle\";\r\nimport Error from \"@material-ui/icons/Error\";\r\n\r\n// core components\r\nimport CustomDropdown from \"components/CustomDropdown/CustomDropdown.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/xrs/components/headerLinksStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function HeaderLinks(props) {\r\n const easeInOutQuad = (t, b, c, d) => {\r\n t /= d / 2;\r\n if (t < 1) return (c / 2) * t * t + b;\r\n t--;\r\n return (-c / 2) * (t * (t - 2) - 1) + b;\r\n };\r\n\r\n const smoothScroll = (e, target) => {\r\n if (window.location.pathname === \"/sections\") {\r\n var isMobile = navigator.userAgent.match(\r\n /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i\r\n );\r\n if (isMobile) {\r\n // if we are on mobile device the scroll into view will be managed by the browser\r\n } else {\r\n e.preventDefault();\r\n var targetScroll = document.getElementById(target);\r\n scrollGo(document.documentElement, targetScroll.offsetTop, 1250);\r\n }\r\n }\r\n };\r\n const scrollGo = (element, to, duration) => {\r\n var start = element.scrollTop,\r\n change = to - start,\r\n currentTime = 0,\r\n increment = 20;\r\n\r\n var animateScroll = function() {\r\n currentTime += increment;\r\n var val = easeInOutQuad(currentTime, start, change, duration);\r\n element.scrollTop = val;\r\n if (currentTime < duration) {\r\n setTimeout(animateScroll, increment);\r\n }\r\n };\r\n animateScroll();\r\n };\r\n var onClickSections = {};\r\n\r\n const { dropdownHoverColor } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n {buttonIcon !== undefined ? (\r\n
\r\n \r\n \r\n \r\n Welcome\r\n \r\n \r\n \r\n \r\n Accounts\r\n \r\n \r\n \r\n \r\n Budget Planer\r\n \r\n \r\n \r\n \r\n Request Call Back\r\n \r\n \r\n \r\n \r\n FAQ\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nHeaderLinks.defaultProps = {\r\n hoverColor: \"primary\",\r\n};\r\n\r\nHeaderLinks.propTypes = {\r\n dropdownHoverColor: PropTypes.oneOf([\r\n \"dark\",\r\n \"primary\",\r\n \"info\",\r\n \"success\",\r\n \"warning\",\r\n \"danger\",\r\n \"rose\",\r\n ]),\r\n};\r\n","/*eslint-disable*/ import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport HeaderLoggedIN from \"components/Header/HeaderLoggedIN.js\";\r\nimport HeaderLinks from \"components/Header/HeaderLinksUser\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function HeaderSectionLoggedID(props) {\r\n const page = props.page;\r\n document.title = props.title;\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import imagesStyles from \"../../imagesStyles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst welcomeSectionStyle = {\r\n ...imagesStyles,\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: primaryColor[20],\r\n fontWeight: 400,\r\n marginBottom: 0,\r\n },\r\n RightText: {\r\n marginBottom: 5,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n tableWrapper: {\r\n maxHeight: 270,\r\n overflow: \"auto\",\r\n maxWidth: 600,\r\n },\r\n tableWrapperMobile: {\r\n maxHeight: 270,\r\n overflow: \"auto\",\r\n maxWidth: 400,\r\n marginTop: 10,\r\n marginBottom: 0,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n accountRow: {\r\n paddingRight: 15,\r\n marginLeft: 15,\r\n marginRight: -15,\r\n paddingTop: 3,\r\n paddingBottom: 3,\r\n },\r\n groupRow: {\r\n backgroundColor: \"#D3F3F3\",\r\n width: \"100%\",\r\n marginLeft: 30,\r\n marginRight: 0,\r\n borderBottom: \"1px solid\",\r\n borderColor: \"black\",\r\n fontWeight: 600,\r\n paddingLeft: 0,\r\n },\r\n totalRow: {\r\n paddingRight: 0,\r\n marginLeft: 0,\r\n marginRight: 15,\r\n fontWeight: 600,\r\n },\r\n};\r\n\r\nexport default welcomeSectionStyle;\r\n","import Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport welcomeSectionStyle from \"assets/jss/xrs/views/sectionsSections/welcomeSectionStyle\";\r\nimport Context from \"../../../utils/context\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport Moment from \"react-moment\";\r\nimport { isClassExpression } from \"typescript\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport * as ACTIONS from \"../../../store/actions/actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\nimport { textVariables } from \"assets/jss/xrs\";\r\n\r\nconst columns = [\r\n { id: textVariables[1], label: textVariables[1], minWidth: 50 },\r\n { id: textVariables[2], label: textVariables[2], minWidth: 50 },\r\n {\r\n id: textVariables[3],\r\n label: textVariables[3],\r\n minWidth: 50,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n {\r\n id: textVariables[4],\r\n label: textVariables[4],\r\n minWidth: 50,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n];\r\n\r\nconst MobileColumns = [\r\n { id: \"Account #\", label: \"Account #\", minWidth: 50 },\r\n {\r\n id: \"Balance\",\r\n label: \"Balance\",\r\n minWidth: 50,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n {\r\n id: \"Arrears\",\r\n label: \"Arrears\",\r\n minWidth: 50,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n];\r\n\r\nconst useStyles = makeStyles(welcomeSectionStyle);\r\nexport default function WellcomeSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const createData = (orgname, accountnumber, balance, arrearsamount, Id) => {\r\n return { Id, orgname, accountnumber, balance, arrearsamount };\r\n };\r\n const dispatch = useDispatch();\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n const [render, setRender] = React.useState(0);\r\n const [rowdata, setRowdata] = React.useState([]);\r\n const [site, setSite] = React.useState(\"\");\r\n const stateAccounts = useSelector((state) => state.AccountsReducer.accounts);\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n const selectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n\r\n const ReadContext = (accounts) => {\r\n const dataRows = [];\r\n var data = accounts;\r\n if (data != \"NoAccounts\") {\r\n var i = 1;\r\n data.forEach((item) => {\r\n dataRows.push(\r\n createData(\r\n item.orgname,\r\n item.accountnumber,\r\n item.balance,\r\n item.arrearsamount,\r\n i\r\n )\r\n );\r\n i++;\r\n });\r\n setRowdata(dataRows);\r\n }\r\n };\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n React.useEffect(() => {\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(ACTIONS.set_Site(response));\r\n\r\n setSite(response);\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get SiteDetatils\", error, context);\r\n }\r\n });\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n if (!context.authObj.isAuthenticatedUser()) {\r\n context.authObj.logout();\r\n } else {\r\n setBallance(stateCustomer.totalbalance);\r\n ReadContext(stateAccounts);\r\n }\r\n }, [ballance]);\r\n const [ballance, setBallance] = React.useState(0);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {ReactHtmlParser(stateCustomer.welcomE1)}\r\n \r\n \r\n \r\n \r\n {rowdata.map(function(row, index) {\r\n return (\r\n \r\n \r\n {row.orgname} ({row.accountnumber})\r\n \r\n \r\n \r\n Arrears\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n {ReactHtmlParser(stateCustomer.welcomE2)}\r\n \r\n \r\n Email
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport WellcomeSection from \"../SectionsPage/Sections/WellcomeSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nexport default function LandingPage(props) {\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n {textVariables[5]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.accountnumber\r\n : stateCustomer.custnumber}\r\n
\r\n{textVariables[6]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptofficehours\r\n : stateAccounts[0].deptofficehours}\r\n
\r\nAddress
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptaddress\r\n : stateAccounts[0].deptaddress}\r\n
\r\nPhone
\r\n\r\n {\" \"}\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptphonenumber\r\n : stateAccounts[0].deptphonenumber}\r\n
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptemail\r\n : stateAccounts[0].deptemail}\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { isMobile } from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst documentsPageStyle = (theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n});\r\n\r\nexport default documentsPageStyle;\r\n","import React, { useContext, useMemo } from \"react\";\r\nimport {\r\n primaryColor,\r\n primaryDarkColor,\r\n successColor,\r\n dangerColor,\r\n primaryBoxShadow,\r\n} from \"assets/jss/xrs.js\";\r\nimport { cameraActions } from \"../../../store/redux/redux-actions/redux_actions\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { isMobile } from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst baseStyle = {\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n padding: \"10px\",\r\n marginBottom: \"17px\",\r\n borderWidth: 2,\r\n borderRadius: 2,\r\n borderColor: primaryDarkColor[3],\r\n borderStyle: \"dashed\",\r\n backgroundColor: primaryDarkColor[3],\r\n color: \"white\",\r\n outline: \"none\",\r\n cursor: \"pointer\",\r\n transition: \"color .24s ease-in-out\",\r\n};\r\n\r\nconst activeStyle = {\r\n borderColor: primaryColor[0],\r\n color: primaryColor[0],\r\n};\r\n\r\nconst acceptStyle = {\r\n borderColor: successColor[0],\r\n color: successColor[0],\r\n};\r\n\r\nconst rejectStyle = {\r\n color: dangerColor[0],\r\n borderColor: dangerColor[0],\r\n};\r\n\r\nexport default function DocumentSection(props) {\r\n const [text, setText] = React.useState(\r\n isMobile\r\n ? \"Tap to upload\"\r\n : \"Drag 'n' drop some files here, or click to select files\"\r\n );\r\n\r\n React.useEffect(() => {\r\n if (props.uploadedDocument != \"\") {\r\n let txt = \"Uploaded documents: \";\r\n\r\n if (props.uploadedDocument.name !== undefined) {\r\n txt = txt + props.uploadedDocument.name;\r\n }\r\n //from documents\r\n else {\r\n txt = txt + props.uploadedDocument.document.name;\r\n }\r\n\r\n setText(txt);\r\n } else {\r\n setText(\r\n isMobile\r\n ? \"Tap to upload\"\r\n : \"Drag 'n' drop some files here, or click to select file\"\r\n );\r\n }\r\n }, [props]);\r\n\r\n const dispatch = useDispatch();\r\n\r\n const {\r\n acceptedFiles,\r\n fileRejections,\r\n getRootProps,\r\n getInputProps,\r\n isDragActive,\r\n isDragAccept,\r\n isDragReject,\r\n } = useDropzone({\r\n maxFiles: 1,\r\n accept: \".pdf, image/jpeg, image/png\",\r\n onDrop: (acceptedFiles) => {\r\n // window.open(URL.createObjectURL(acceptedFiles[0]));\r\n if (acceptedFiles[0]) {\r\n let docs = Object.assign(acceptedFiles[0], {\r\n preview: URL.createObjectURL(acceptedFiles[0]),\r\n });\r\n\r\n let document = {\r\n from: props.item.from,\r\n itemId: props.item.itemId,\r\n document: docs,\r\n };\r\n if (props.uploadedDocument != \"\") {\r\n dispatch(cameraActions.deleteDocument(props.uploadedDocument));\r\n }\r\n dispatch(cameraActions.addCapturedImage(document));\r\n }\r\n },\r\n });\r\n\r\n const style = useMemo(\r\n () => ({\r\n ...baseStyle,\r\n ...(isDragActive ? activeStyle : {}),\r\n ...(isDragAccept ? acceptStyle : {}),\r\n ...(isDragReject ? rejectStyle : {}),\r\n ...(props.uploadedDocument != \"\" ? acceptStyle : {}),\r\n }),\r\n [isDragActive, isDragReject, props.uploadedDocument]\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport documentsPageStyle from \"../../assets/jss/xrs/views/documentsPageStyle\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport DocumentSection from \"../SectionsPage/Sections/DocumentSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles(documentsPageStyle);\r\n\r\nexport default function DocumentsPage(props) {\r\n const context = useContext(Context);\r\n const openCamera = useSelector((state) => state.CameraReducer.open);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n if (openCamera) {\r\n return {text}
\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import imagesStyles from \"../../imagesStyles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst viewAccountSectionStyle = {\r\n ...imagesStyles,\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 60,\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: primaryColor[20],\r\n fontWeight: 400,\r\n marginBottom: 0,\r\n },\r\n RightText: {\r\n marginBottom: 5,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n tableWrapper: {\r\n maxHeight: 270,\r\n overflow: \"auto\",\r\n },\r\n tableWrapperMobile: {\r\n overflowX: \"hidden\",\r\n overflowY: \"scroll\",\r\n maxHeight: 270,\r\n marginLeft: 0,\r\n marginRight: 0,\r\n marginBottom: 10,\r\n },\r\n fullRow: {\r\n width: \"100%\",\r\n },\r\n accountRow: {\r\n paddingRight: 0,\r\n marginLeft: 0,\r\n marginRight: 0,\r\n },\r\n\r\n groupRow: {\r\n backgroundColor: \"#D3F3F3\",\r\n width: \"100%\",\r\n marginLeft: 0,\r\n marginRight: 0,\r\n borderBottom: \"1px solid\",\r\n borderColor: \"gray\",\r\n },\r\n totalRow: {\r\n paddingRight: 0,\r\n marginLeft: 0,\r\n marginRight: 15,\r\n fontWeight: 600,\r\n },\r\n};\r\n\r\nexport default viewAccountSectionStyle;\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport viewAccountSectionStyle from \"assets/jss/xrs/views/sectionsSections/viewAccountSectionStyle\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport * as ACTIONS from \"store/actions/actions\";\r\n\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport React, { useContext } from \"react\";\r\nimport Moment from \"react-moment\";\r\nimport fnmoment from \"moment/min/moment-with-locales\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport Context from \"../../../utils/context\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport groupArray from \"group-array\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n cameraActions,\r\n} from \"../../../store/redux/redux-actions/redux_actions\";\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\nimport { BorderBottom, BorderColor } from \"@material-ui/icons\";\r\nimport { textVariables } from \"assets/jss/xrs\";\r\n\r\nconst useStyles = makeStyles(viewAccountSectionStyle);\r\nexport default function ViewAccountSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [site, setSite] = React.useState(\"\");\r\n const [page, setPage] = React.useState(1);\r\n const [rowdata, setRowdata] = React.useState([]);\r\n const [grouprowdata, setGroupRowdata] = React.useState([]);\r\n const [total, setTotal] = React.useState(0);\r\n const stateSelectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n const selectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n const stateAccounts = useSelector((state) => state.AccountsReducer.accounts);\r\n const dispatch = useDispatch();\r\n\r\n const [account, setAccount] = React.useState([]);\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n\r\n const viewAccountText = useSelector(\r\n (state) => state.HtmlReducer.viewAccountText\r\n );\r\n const stateSite = useSelector((state) => state.SiteReducer.site);\r\n\r\n const createData = (Paydate, Description, Amount, Id) => {\r\n return { Id, Paydate, Description, Amount };\r\n };\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n React.useEffect(() => {\r\n fnmoment.locale(window.navigator.language.toLowerCase());\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n setSite(stateSite);\r\n setAccount(stateSelectedAccount);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n var getdata;\r\n var newDate = new Date();\r\n getdata = JSON.stringify({\r\n ITEMCODE: stateSelectedAccount.itemcode,\r\n RECNO: stateSelectedAccount.recno,\r\n STARTDATE: \"2020-01-01\",\r\n ENDDATE: newDate,\r\n });\r\n fetch(URLS.GetTransactionsAPIURL, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: getdata,\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Transactions\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then(\r\n (data) => {\r\n const dataRows = [];\r\n var tmptotal = 0;\r\n data.forEach((item, i) => {\r\n tmptotal += item.amount;\r\n dataRows.push(\r\n createData(\r\n fnmoment(item.paydate).format(\"L\"),\r\n item.description,\r\n item.amount,\r\n item.transactionid\r\n )\r\n );\r\n });\r\n setRowdata(dataRows);\r\n\r\n if (stateSelectedAccount == \"NoAccount\") {\r\n setTotal(stateCustomer.totalbalance);\r\n } else {\r\n setTotal(stateSelectedAccount.balance);\r\n }\r\n\r\n var groupedItems = groupArray(dataRows, \"Paydate\");\r\n setGroupRowdata(groupedItems);\r\n },\r\n [page]\r\n )\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Transactions\", error, context);\r\n }\r\n });\r\n // getMenu();\r\n }, [stateSelectedAccount]);\r\n const getMenu = () => {\r\n var url = URLS.GetWelcomeNavigation;\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"GET\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Welcome Navigation\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data1) => {\r\n dispatch(ACTIONS.set_menu(data1));\r\n\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", res, context);\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(\r\n data.activeAccounts[0].viewacccounttext\r\n )\r\n );\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n sessionStorage.setItem(\"user\", data.customer.cufname);\r\n\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n if (data.activeAccounts.length == 1) {\r\n dispatch(ACTIONS.set_selectedAccount(data.activeAccounts[0]));\r\n }\r\n dispatch(apiActions.clear());\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", error, context);\r\n }\r\n });\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Navigation\", error, context);\r\n }\r\n });\r\n };\r\n const columns = [\r\n { id: \"Paydate\", label: \"Date\", minWidth: 50 },\r\n { id: \"Description\", label: \"Description\", minWidth: 50 },\r\n {\r\n id: \"Ammount\",\r\n label: \"Amount\",\r\n minWidth: 50,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n ];\r\n const MobileColumns = [\r\n {\r\n id: \"Description\",\r\n label: \"Description\",\r\n minWidth: 10,\r\n align: \"left\",\r\n paddingLeft: \"0\",\r\n },\r\n {\r\n id: \"Ammount\",\r\n label: \"Amount\",\r\n minWidth: 50,\r\n align: \"right\",\r\n paddingLeft: \"10\",\r\n format: (value) => value.toFixed(2),\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\n \r\n {MobileColumns.map((column) => (\r\n \r\n {column.label}\r\n \r\n ))}\r\n {Object.keys(grouprowdata).map(function(date, index) {\r\n return (\r\n \r\n \r\n {date}\r\n \r\n {grouprowdata[date].map(function(row, index2) {\r\n return (\r\n \r\n \r\n {row.Description}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n Email
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport ViewAccountSection from \"../SectionsPage/Sections/ViewAccountSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport clsx from \"clsx\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles = makeStyles(landingPageStyle);\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nexport default function ViewAccountPage(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n return (\r\n {ReactHtmlParser(selectedAccount.viewacccounttext)}
\r\n {}\r\n \r\n \r\n
\r\n
\r\n {textVariables[5]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.accountnumber\r\n : stateCustomer.custnumber}\r\n
\r\n{textVariables[6]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptofficehours\r\n : stateAccounts[0].deptofficehours}\r\n
\r\nAddress
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptaddress\r\n : stateAccounts[0].deptaddress}\r\n
\r\nPhone
\r\n\r\n {\" \"}\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptphonenumber\r\n : stateAccounts[0].deptphonenumber}\r\n
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptemail\r\n : stateAccounts[0].deptemail}\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { isMobile } from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst createPaymentPlanPageStyle = (theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n});\r\n\r\nexport default createPaymentPlanPageStyle;\r\n","import React, { useContext } from \"react\";\r\nimport history from \"../../../utils/history\";\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n} from \"store/redux/redux-actions/redux_actions\";\r\nimport * as ACTIONS from \"store/actions/actions\";\r\nimport RadioGroup from \"@material-ui/core/RadioGroup\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\n\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport { useFormik } from \"formik\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport Radio from \"@material-ui/core/Radio\";\r\n\r\nimport fnmoment from \"moment/min/moment-with-locales\";\r\n\r\nimport TextField from \"components/CustomInput/CustomInput.js\";\r\nimport Iframe from \"react-iframe\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport clsx from \"clsx\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport ReactHtmlParser, {\r\n processNodes,\r\n convertNodeToElement,\r\n htmlparser2,\r\n} from \"react-html-parser\";\r\n\r\nimport html2canvas from \"html2canvas\";\r\nimport Context from \"../../..//utils/context\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\nimport { el } from \"date-fns/locale\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n// const useStyles2 = makeStyles((theme) => ({\r\n// content: {\r\n// paddingTop: 60,\r\n// paddingBottom: 38,\r\n// flexGrow: 1,\r\n// padding: theme.spacing(3),\r\n// transition: theme.transitions.create(\"margin\", {\r\n// easing: theme.transitions.easing.sharp,\r\n// duration: theme.transitions.duration.leavingScreen,\r\n// }),\r\n// marginLeft: 0,\r\n// },\r\n// contentShift: {\r\n// transition: theme.transitions.create(\"margin\", {\r\n// easing: theme.transitions.easing.easeOut,\r\n// duration: theme.transitions.duration.enteringScreen,\r\n// }),\r\n// marginLeft: drawerWidth,\r\n// },\r\n// }));\r\nlet eventListenerCopy = null;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n Hide: {\r\n display: \"none\",\r\n },\r\n button: {\r\n marginRight: theme.spacing(1),\r\n padding: 13,\r\n },\r\n instructions: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 60,\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n cardNOBORDER: {\r\n border: 0,\r\n },\r\n Middle: {\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n border: 0,\r\n },\r\n radioAlign: {\r\n marginLeft: \"-10px\",\r\n },\r\n blueText: {\r\n color: \"#0065a4\",\r\n fontWeight: 300,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n BoxFull: {\r\n width: \"100%\",\r\n },\r\n rightValues: {\r\n textAlign: \"right\",\r\n fontWeight: 300,\r\n },\r\n}));\r\nconst useStyles2 = makeStyles(landingPageStyle);\r\n\r\nexport default function PayNowSection(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const dispatch = useDispatch();\r\n const loading = useSelector((state) => state.ApiCallsReducer.loading);\r\n const [loadingButon, setloadingButon] = React.useState(false);\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n const convenienceFee = useSelector(\r\n (state) => state.GetSiteDetailsReducer.convenienceFee\r\n );\r\n\r\n const termsQuickPay = useSelector((state) => state.HtmlReducer.termsQuickPay);\r\n const termsPlan = useSelector((state) => state.HtmlReducer.termsPlan);\r\n const termsDiscount = useSelector((state) => state.HtmlReducer.termsDiscount);\r\n const [usesconveniencefee, setUsesconveniencefee] = React.useState(false);\r\n\r\n const [paymentgatewayurl, setPaymentgatewayurl] = React.useState(\"\");\r\n\r\n const [note, setNote] = React.useState(\"\");\r\n\r\n const classes2 = useStyles2();\r\n const context = useContext(Context);\r\n const [page, setPage] = React.useState(1);\r\n const [ifamevisible, setIfamevisible] = React.useState(false);\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n const [selectedDate, handleDateChange] = React.useState(new Date());\r\n const [screenstate, setScreenstate] = React.useState({ screenshot: \"\" });\r\n const [showQuickPay, setShowQuickPay] = React.useState(true);\r\n const [termsClicked, setTermsCliked] = React.useState(false);\r\n const [termsApiText, setTermsApiText] = React.useState(\"\");\r\n const [termsText, setTermsText] = React.useState(\"\");\r\n const [cardref, setCardref] = React.useState(\"\");\r\n const [cufphone, setCufphone] = React.useState(\"\");\r\n const [paymentDate, setPaymentDate] = React.useState(\"\");\r\n const [minPayment, setMinPayment] = React.useState(1);\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n const stateOffer = useSelector((state) => state.OfferReducer.offer);\r\n\r\n const [value, setValue] = React.useState(\"new\");\r\n\r\n const [amount, setAmmount] = React.useState(\"\");\r\n\r\n const stateSelectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n\r\n const paymentProvider = useSelector(\r\n (state) => state.GetSiteDetailsReducer.paymentProvider\r\n );\r\n\r\n const ChangeNote = (event) => {\r\n setNote(event.target.value);\r\n };\r\n const HideIframe = () => {\r\n setIfamevisible(false);\r\n };\r\n const ShowIframe = () => {\r\n setIfamevisible(true);\r\n };\r\n const handleTermsMobile = () => {\r\n setShowQuickPay(false);\r\n };\r\n const [quickPayAPIData, setquickPayAPIData] = React.useState(undefined);\r\n\r\n React.useEffect(() => {\r\n if (quickPayAPIData) {\r\n window.addEventListener(\"message\", tabaPayMessage, false);\r\n }\r\n return () => {\r\n window.removeEventListener(\"message\", tabaPayMessage);\r\n };\r\n }, [quickPayAPIData]);\r\n React.useEffect(() => {\r\n fnmoment.locale(window.navigator.language.toLowerCase());\r\n let today = fnmoment().format(\"YYYY-MM-DD\");\r\n setPaymentDate(today);\r\n dispatch(ACTIONS.set_PaymentStatusFrom(props.source === \"PayNow\"));\r\n }, []);\r\n React.useEffect(() => {\r\n window.RealexHpp = null;\r\n\r\n const script = document.createElement(\"script\");\r\n script.src = \"rxp-js.js\";\r\n script.async = true;\r\n document.body.appendChild(script);\r\n\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(getSiteDetailsActions.currency(response.sitecurrency));\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n getMenu();\r\n setTermsApiText(response.termsquickpay);\r\n setCardref(stateCustomer.cardref);\r\n stateCustomer.cardref ? setValue(\"card\") : setValue(\"new\");\r\n setMinPayment(stateCustomer.paynowmin);\r\n setUsesconveniencefee(response.usesconveniencefee);\r\n setPaymentgatewayurl(response.paymentgatewayurl);\r\n\r\n setCufphone(stateCustomer.cuphone);\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n }\r\n });\r\n return () => {\r\n dispatch(apiActions.clear());\r\n\r\n document.body.removeChild(script);\r\n window.RealexHpp = null;\r\n if (eventListenerCopy != null) {\r\n window.removeEventListener(\"message\", eventListenerCopy, false);\r\n }\r\n };\r\n }, []);\r\n const formik = useFormik({\r\n initialValues: {\r\n amount: value,\r\n },\r\n onSubmit: (values) => {\r\n if (!isMobile) {\r\n dispatch(apiActions.loading(true));\r\n setImageBase64();\r\n }\r\n\r\n if (isMobile) {\r\n if (termsClicked) {\r\n dispatch(apiActions.loading(true));\r\n setImageBase64();\r\n } else {\r\n setShowQuickPay(false);\r\n }\r\n }\r\n },\r\n });\r\n\r\n const RedirectResponse = (RedirecURL) => {\r\n getMenu();\r\n\r\n history.push(RedirecURL);\r\n };\r\n const RelalexInit = (values) => {\r\n var url = URLS.PayNowResponseNoCard;\r\n // ;\r\n if (props.source == \"CreatePaymentPlan\" || props.source == \"ViewOffer\") {\r\n url = URLS.WebOfferResponseNoCard;\r\n }\r\n if (props.oneMonth) {\r\n url = URLS.OnePaymentWebOfferResponseNoCard;\r\n }\r\n\r\n window.RealexHpp.setHppUrl(paymentgatewayurl);\r\n eventListenerCopy = window.RealexHpp.embedded.init(\r\n \"payButtonId\",\r\n \"paymentIframeID\",\r\n url,\r\n values,\r\n RedirectResponse\r\n );\r\n };\r\n const HandleTermsClicked = (e) => {\r\n if (e.target.checked) {\r\n setTermsText(\"I agree \");\r\n } else {\r\n setTermsText(\"I don't agree \");\r\n }\r\n setTermsCliked(e.target.checked);\r\n setShowQuickPay(true);\r\n };\r\n const submitFormPayNow = (values, screen) => {\r\n const token = sessionStorage.getItem(\"access_token\");\r\n setloadingButon(true);\r\n var url;\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.CreateCardRequestTabaPay;\r\n } else {\r\n url = URLS.PayNowURLNoCard;\r\n }\r\n var Amount = values;\r\n\r\n var data;\r\n var iremcode = stateSelectedAccount.itemcode;\r\n var recno = stateSelectedAccount.recno;\r\n var cardref = stateCustomer.cardref;\r\n if (value == \"card\") {\r\n data = {\r\n ItemRecno: recno,\r\n ItemCode: iremcode,\r\n PAYMENTAMOUNT: Amount,\r\n ScreenShot: screen,\r\n CURRENCYSYMBOL: \"EUR\",\r\n PAYERREF: stateCustomer.cardpayerref,\r\n CARDREF: cardref,\r\n };\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.UseExistingCardTabaPay;\r\n if (usesconveniencefee) {\r\n data.NOTE = note;\r\n }\r\n } else {\r\n url = URLS.PayNowURLCard;\r\n }\r\n data = JSON.stringify(data);\r\n } else {\r\n data = JSON.stringify({\r\n ItemRecno: recno,\r\n ItemCode: iremcode,\r\n Amount: Amount,\r\n ScreenShot: screen,\r\n });\r\n }\r\n\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: data,\r\n })\r\n .then((res) => {\r\n return res.json();\r\n })\r\n .then(\r\n (data) => {\r\n dispatch(apiActions.loading(false));\r\n if (\r\n (data.MESSAGE != undefined || data.message != undefined) &&\r\n data.AUTHCODE == null\r\n ) {\r\n setloadingButon(false);\r\n ApiErrorHandler(\"Pay Now\", data, context);\r\n } else {\r\n if (value == \"card\") {\r\n history.push(\r\n \"/paynow-paymentstatus?AUTHCODE=\" +\r\n data.AUTHCODE +\r\n \"&MESSAGE=\" +\r\n data.MESSAGE +\r\n \"&RESULTCODE=\" +\r\n data.RESULTCODE +\r\n \"&AMOUNT=\" +\r\n data.AMOUNT +\r\n \"&PASSREF=\" +\r\n data.PASSREF\r\n );\r\n } else {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n setquickPayAPIData(data);\r\n } else {\r\n RelalexInit(data);\r\n }\r\n if (isMobile) {\r\n setShowQuickPay(false);\r\n }\r\n setIfamevisible(true);\r\n }\r\n }\r\n },\r\n [page]\r\n )\r\n .catch((error) => {\r\n dispatch(apiActions.loading(false));\r\n setloadingButon(false);\r\n if (error.AUTHCODE) {\r\n if (error.message == \"\") {\r\n } else {\r\n if (stateCustomer.cardref) {\r\n history.push(\r\n \"/paynow-paymentstatus?AUTHCODE=\" +\r\n data.AUTHCODE +\r\n \"&MESSAGE=\" +\r\n data.MESSAGE +\r\n \"&RESULTCODE=\" +\r\n data.RESULTCODE +\r\n \"&AMOUNT=\" +\r\n data.AMOUNT +\r\n \"&PASSREF=\" +\r\n data.PASSREF\r\n );\r\n }\r\n }\r\n\r\n ApiErrorHandler(\"Pay Now \", error, context);\r\n }\r\n });\r\n };\r\n var tabaPayMessage = function(event) {\r\n //Check if it is from TabaPay\r\n let iframe = document.getElementById(\"SSO\");\r\n\r\n if (typeof event.data === \"string\") {\r\n if (event.data != \"Close\") {\r\n if (event.data.slice(0, 7) == \"Error: \") {\r\n // Error\r\n } else {\r\n var asData = event.data.split(\"|\");\r\n if (asData.length == 3) {\r\n let quickPayData = quickPayAPIData;\r\n let url;\r\n\r\n if (\r\n props.source == \"CreatePaymentPlan\" ||\r\n props.source == \"ViewOffer\"\r\n ) {\r\n url = URLS.SaveOfferResultTabaPay;\r\n\r\n if (props.oneMonth || props.source == \"ViewOffer\") {\r\n url = URLS.SaveSettlementOfferResultabaPay;\r\n }\r\n }\r\n if (props.source == \"PayNow\") {\r\n url = URLS.PayNowAndSaveCardResultTabaPay;\r\n if (usesconveniencefee) {\r\n quickPayData.NOTE = note;\r\n }\r\n }\r\n\r\n quickPayData.LASTDIGITS = asData[0];\r\n quickPayData.EXPIRATIONDATE = asData[1];\r\n quickPayData.CARDTOKEN = asData[2];\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: JSON.stringify(quickPayData),\r\n })\r\n .then((res) => {\r\n if (res.ok) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Pay now\", data, context);\r\n });\r\n setIfamevisible(false);\r\n setloadingButon(false);\r\n window.removeEventListener(\"message\", tabaPayMessage);\r\n iframe.src = iframe.src;\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n history.push(response.REDIRECTURL);\r\n })\r\n .catch((error) => {\r\n // if (error.message == \"\") {\r\n // ;\r\n // } else {\r\n // ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n // }\r\n });\r\n } else {\r\n // Data Error\r\n }\r\n }\r\n } else {\r\n setIfamevisible(false);\r\n setloadingButon(false);\r\n window.removeEventListener(\"message\", tabaPayMessage);\r\n iframe.src = iframe.src;\r\n }\r\n }\r\n };\r\n const getMenu = () => {\r\n var url = URLS.GetWelcomeNavigation;\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"GET\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Welcome Navigation\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data1) => {\r\n dispatch(ACTIONS.set_menu(data1));\r\n\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", res, context);\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(\r\n data.activeAccounts[0].viewacccounttext\r\n )\r\n );\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n sessionStorage.setItem(\"user\", data.customer.cufname);\r\n\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n if (data.activeAccounts.length == 1) {\r\n dispatch(ACTIONS.set_selectedAccount(data.activeAccounts[0]));\r\n }\r\n dispatch(apiActions.clear());\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", error, context);\r\n }\r\n });\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Navigation\", error, context);\r\n }\r\n });\r\n };\r\n const submitFormPaymentPlan = (values, screen) => {\r\n dispatch(apiActions.loading(true));\r\n setloadingButon(true);\r\n debugger;\r\n var url;\r\n const token = sessionStorage.getItem(\"access_token\");\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.CreateOfferRequestTabaPay;\r\n } else {\r\n url = URLS.GetWebOffersAPIUrl;\r\n }\r\n\r\n var cardref = stateCustomer.cardref;\r\n var postfreq =\r\n values.frequency == \"Week\"\r\n ? \"Weekly\"\r\n : values.frequency == \"FORT\"\r\n ? \"FORT\"\r\n : values.frequency == \"4WEEKLY\"\r\n ? \"4WEEKLY\"\r\n : \"Monthly\";\r\n\r\n var data;\r\n if (value == \"card\") {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.SetWebOfferTabaPay;\r\n } else {\r\n url = URLS.GetWebOffersCardAPIUrl;\r\n }\r\n data = JSON.stringify({\r\n OFFERID: stateOffer.WOOFFERID,\r\n DOWNPAYMENT: values.downpayment,\r\n REMAINGBAL: values.balanceToPay,\r\n STARTDATE: values.startdate,\r\n FREQUENCY: postfreq,\r\n AMOUNT: Number(values.amount).toFixed(2),\r\n FINALDATE: values.endDate,\r\n FINALAMOUNT: Number(values.amount).toFixed(2),\r\n APPLYDISCOUNT: \"N\",\r\n DISCOUNTOPTIONNUMBER: \"0\",\r\n SCREENSHOT: screen,\r\n PAYERREF: stateCustomer.cardpayerref,\r\n CARDREF: cardref,\r\n });\r\n } else {\r\n data = JSON.stringify({\r\n OFFERID: stateOffer.WOOFFERID,\r\n DOWNPAYMENT: values.downpayment,\r\n REMAINGBAL: values.balanceToPay,\r\n STARTDATE: values.startdate,\r\n FREQUENCY: postfreq,\r\n AMOUNT: Number(values.amount).toFixed(2),\r\n FINALDATE: values.endDate,\r\n FINALAMOUNT: Number(values.amount).toFixed(2),\r\n APPLYDISCOUNT: \"N\",\r\n DISCOUNTOPTIONNUMBER: \"0\",\r\n SCREENSHOT: screen,\r\n });\r\n }\r\n\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: data,\r\n })\r\n .then((res) => {\r\n dispatch(apiActions.loading(false));\r\n\r\n return res.json();\r\n })\r\n .then((data) => {\r\n if (\r\n (data.MESSAGE != undefined || data.message != undefined) &&\r\n data.AUTHCODE == null\r\n ) {\r\n ApiErrorHandler(\"Payment Plan\", data, context);\r\n } else {\r\n getMenu();\r\n if (value == \"card\") {\r\n history.push(\r\n \"/paynow-paymentstatus?AUTHCODE=\" +\r\n data.AUTHCODE +\r\n \"&MESSAGE=\" +\r\n data.MESSAGE +\r\n \"&RESULTCODE=\" +\r\n data.RESULTCODE +\r\n \"&AMOUNT=\" +\r\n data.AMOUNT +\r\n \"&PASSREF=\" +\r\n data.PASSREF\r\n );\r\n } else {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n setquickPayAPIData(data);\r\n } else {\r\n RelalexInit(data);\r\n }\r\n if (isMobile) {\r\n setShowQuickPay(false);\r\n }\r\n setIfamevisible(true);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n dispatch(apiActions.loading(false));\r\n\r\n ApiErrorHandler(\"Payment Plan\", error, context);\r\n }\r\n });\r\n };\r\n const submitFormViewOffer = (values, screen) => {\r\n const token = sessionStorage.getItem(\"access_token\");\r\n\r\n var url;\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.CreateOfferRequestTabaPay;\r\n } else {\r\n url = URLS.GetWebOffersAPIUrl;\r\n }\r\n dispatch(apiActions.loading(true));\r\n setloadingButon(true);\r\n var data;\r\n var end = paymentDate;\r\n var dateSetlementOffer = fnmoment\r\n .utc(fnmoment.utc().format())\r\n .local()\r\n .format();\r\n end = fnmoment(end)\r\n .add(values.TERM * 1, \"M\")\r\n .format(\"YYYY-MM-DD\");\r\n if (value == \"card\") {\r\n if (props.oneMonth) {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.SetWebSettlementOfferTabaPay;\r\n } else {\r\n url = URLS.OnePaymentPayNowURLWebOfferUseExistingCard;\r\n }\r\n data = JSON.stringify({\r\n OFFERID: values.OFFERID,\r\n DOWNPAYMENT: values.DOWNPAYMENT,\r\n REMAINGBAL: values.REMAINGBAL,\r\n OFFERACCEPTEDDECLINED: \"A\",\r\n OFFERDECLINEDREASON: \"OK\",\r\n STARTDATE: dateSetlementOffer,\r\n FREQUENCY: \"ONCEOFF\",\r\n AMOUNT: Number(values.AMOUNT).toFixed(2),\r\n FINALDATE: dateSetlementOffer,\r\n FINALAMOUNT: Number(values.FINALAMOUNT).toFixed(2),\r\n APPLYDISCOUNT: \"Y\",\r\n DISCOUNTOPTIONNUMBER: values.DISCOUNTOPTIONNUMBER,\r\n SCREENSHOT: screen,\r\n PAYERREF: stateCustomer.cardpayerref,\r\n CARDREF: stateCustomer.cardref,\r\n });\r\n } else {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.SetWebOfferTabaPay;\r\n } else {\r\n url = URLS.GetWebOffersCardAPIUrl;\r\n }\r\n data = JSON.stringify({\r\n OFFERID: values.OFFERID,\r\n DOWNPAYMENT: values.DOWNPAYMENT,\r\n REMAINGBAL: values.REMAINGBAL,\r\n OFFERACCEPTEDDECLINED: \"A\",\r\n OFFERDECLINEDREASON: \"OK\",\r\n STARTDATE: paymentDate,\r\n FREQUENCY: values.FREQUENCY,\r\n AMOUNT: Number(values.AMOUNT).toFixed(2),\r\n FINALDATE: end,\r\n FINALAMOUNT: Number(values.FINALAMOUNT).toFixed(2),\r\n APPLYDISCOUNT: \"Y\",\r\n DISCOUNTOPTIONNUMBER: values.DISCOUNTOPTIONNUMBER,\r\n SCREENSHOT: screen,\r\n PAYERREF: stateCustomer.cardpayerref,\r\n CARDREF: stateCustomer.cardref,\r\n });\r\n }\r\n } else {\r\n if (props.oneMonth) {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.CreateSettlementOfferRequestTabaPay;\r\n } else {\r\n url = URLS.OnePaymentURLSettlementOfferNoCard;\r\n }\r\n data = JSON.stringify({\r\n OFFERID: values.OFFERID,\r\n DOWNPAYMENT: values.DOWNPAYMENT,\r\n REMAINGBAL: values.REMAINGBAL,\r\n OFFERACCEPTEDDECLINED: \"A\",\r\n OFFERDECLINEDREASON: \"OK\",\r\n STARTDATE: dateSetlementOffer,\r\n FREQUENCY: \"ONCEOFF\",\r\n AMOUNT: Number(values.AMOUNT).toFixed(2),\r\n FINALDATE: dateSetlementOffer,\r\n FINALAMOUNT: Number(values.FINALAMOUNT).toFixed(2),\r\n APPLYDISCOUNT: \"Y\",\r\n DISCOUNTOPTIONNUMBER: values.DISCOUNTOPTIONNUMBER,\r\n SCREENSHOT: screen,\r\n });\r\n } else {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n url = URLS.CreateOfferRequestTabaPay;\r\n } else {\r\n url = URLS.GetWebOffersCardAPIUrl;\r\n }\r\n data = JSON.stringify({\r\n OFFERID: values.OFFERID,\r\n DOWNPAYMENT: values.DOWNPAYMENT,\r\n REMAINGBAL: values.REMAINGBAL,\r\n OFFERACCEPTEDDECLINED: \"A\",\r\n OFFERDECLINEDREASON: \"OK\",\r\n STARTDATE: paymentDate,\r\n FREQUENCY: values.FREQUENCY,\r\n AMOUNT: Number(values.AMOUNT).toFixed(2),\r\n FINALDATE: end,\r\n FINALAMOUNT: Number(values.FINALAMOUNT).toFixed(2),\r\n APPLYDISCOUNT: \"Y\",\r\n DISCOUNTOPTIONNUMBER: values.DISCOUNTOPTIONNUMBER,\r\n SCREENSHOT: screen,\r\n });\r\n }\r\n }\r\n\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: data,\r\n })\r\n .then((res) => {\r\n dispatch(apiActions.loading(false));\r\n\r\n return res.json();\r\n })\r\n .then((data) => {\r\n if (\r\n (data.MESSAGE != undefined || data.message != undefined) &&\r\n data.AUTHCODE == null\r\n ) {\r\n ApiErrorHandler(\"Offer Plan\", data, context);\r\n } else {\r\n if (value == \"card\") {\r\n getMenu();\r\n history.push(\r\n \"/paynow-paymentstatus?AUTHCODE=\" +\r\n data.AUTHCODE +\r\n \"&MESSAGE=\" +\r\n data.MESSAGE +\r\n \"&RESULTCODE=\" +\r\n data.RESULTCODE +\r\n \"&AMOUNT=\" +\r\n data.AMOUNT +\r\n \"&PASSREF=\" +\r\n data.PASSREF\r\n );\r\n } else {\r\n if (paymentProvider.toUpperCase() == \"TABAPAY\") {\r\n setquickPayAPIData(data);\r\n } else {\r\n RelalexInit(data);\r\n }\r\n if (isMobile) {\r\n setShowQuickPay(false);\r\n }\r\n setIfamevisible(true);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Offer Plan\", error, context);\r\n }\r\n });\r\n };\r\n\r\n const handlePayDateChange = (e) => {\r\n if (e.target.value == \"\") {\r\n setPaymentDate(\"0.00\");\r\n } else {\r\n setPaymentDate(e.target.value);\r\n }\r\n };\r\n\r\n const setImageBase64 = () => {\r\n html2canvas(document.getElementById(\"screen\"), {\r\n width: 800,\r\n height: 600,\r\n }).then(function(canvas) {\r\n const newScreenshot = canvas.toDataURL(\"image/png\");\r\n setScreenstate({ newScreenshot });\r\n if (props.source == \"PayNow\") {\r\n submitFormPayNow(\r\n convenienceFee == 0\r\n ? amount\r\n : (Number(amount) + convenienceFee).toFixed(2),\r\n newScreenshot\r\n );\r\n } else if (props.source == \"CreatePaymentPlan\") {\r\n submitFormPaymentPlan(props.value, newScreenshot);\r\n } else if (props.source == \"ViewOffer\") {\r\n submitFormViewOffer(props.value, newScreenshot);\r\n }\r\n });\r\n };\r\n\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const handleChangeAmmount = (event) => {\r\n setAmmount(event.target.value);\r\n };\r\n\r\n const classes = useStyles();\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 {props.enabled == \"true\" ? (\r\n \r\n \r\n Debit amount is{\" \"}\r\n \r\n \r\n {currency + \" \"}{\" \"}\r\n {amount != \"\"\r\n ? (Number(amount) + convenienceFee).toFixed(\r\n 2\r\n )\r\n : 0}\r\n \r\n
\r\n )}\r\n {props.showdate ? (\r\n \r\n {props.source != \"PayNow\" ? (\r\n \r\n {props.message}\r\n {props.showdate\r\n ? paymentDate\r\n ? \" \" + fnmoment(paymentDate).format(\"L\")\r\n : \"\"\r\n : null}\r\n
\r\n ) : (\r\n ReactHtmlParser(stateSelectedAccount.paynowtext)\r\n )}\r\n\r\n Payment
\r\n ) : (\r\nPay Now
\r\n )}\r\n\r\n {props.message ? (\r\n\r\n \r\n \r\n \r\n {/*
\r\n\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n\r\n \r\n
\r\n \r\n Proceed to pay\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n {props.source === \"PayNow\"\r\n ? termsQuickPay\r\n : props.source === \"CreatePaymentPlan\"\r\n ? termsPlan\r\n : props.source === \"ViewOffer\"\r\n ? termsDiscount\r\n : termsQuickPay}\r\n
\r\n\r\n {props.source === \"PayNow\"\r\n ? termsQuickPay\r\n : props.source === \"CreatePaymentPlan\"\r\n ? termsPlan\r\n : props.source === \"ViewOffer\"\r\n ? termsDiscount\r\n : null}\r\n\r\n
\r\n
\r\n );\r\n\r\n setPayNowSectionMessage(payNowSectionMessage);\r\n setTextMessage(textMessage);\r\n };\r\n\r\n const handleFinish = () => {\r\n setPaymentVisible(true);\r\n };\r\n\r\n const handleBack = () => {\r\n let newSkipped = skipped;\r\n if (isStepSkipped(step)) {\r\n newSkipped = new Set(newSkipped.values());\r\n newSkipped.delete(step);\r\n }\r\n setStep((prevActiveStep) => prevActiveStep - 1);\r\n setSkipped(newSkipped);\r\n topNav.slickPrev();\r\n };\r\n\r\n const handleSkip = () => {\r\n if (!isStepOptional(step)) {\r\n // You probably want to guard against something like this,\r\n // it should never occur unless someone's actively trying to break something.\r\n throw new Error(\"You can't skip a step that isn't optional.\");\r\n }\r\n\r\n setStep((prevActiveStep) => prevActiveStep + 1);\r\n setSkipped((prevSkipped) => {\r\n const newSkipped = new Set(prevSkipped.values());\r\n newSkipped.add(step);\r\n return newSkipped;\r\n });\r\n };\r\n\r\n const handleReset = () => {\r\n setStep(0);\r\n };\r\n\r\n return (\r\n \r\n {`I agree to pay ${site.companyname} ${currency}${formatPaymentAmount(\r\n convenienceFee != 0\r\n ? Number.parseFloat(Number(downpayment) + convenienceFee)\r\n : Number.parseFloat(downpayment)\r\n )} from my card now, followed by `}\r\n
\r\n\r\n \r\n {` starting on ${fnmoment(paymentDate).format(\"L\")}`}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n handleDownPaymentChange(e);\r\n },\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n handleDurationChange(e);\r\n },\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n handleFreqChange(e);\r\n }}\r\n >\r\n \r\n {paymentType == \"MONTHLY\" ? null : (\r\n <>\r\n \r\n \r\n \r\n \r\n {use4week ? (\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 handlePayDateChange(e);\r\n },\r\n format: \"DD-MM-YYYY\",\r\n value: paymentDate,\r\n name: \"paydate\",\r\n min: fnmoment().format(\"YYYY-MM-DD\"),\r\n max: fnmoment()\r\n .add(stateSelectedAccount.planmaxstart, \"days\")\r\n .format(\"YYYY-MM-DD\"),\r\n }}\r\n className={classes.control}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Initial Payment
\r\n\r\n I would like my initial payment to be\r\n
\r\n\r\n Minimum Amount{\" \"}\r\n
\r\n {paymentType == \"STANDARD\"\r\n ? \"Duration\"\r\n : \"Recurring amount\"}\r\n
\r\n\r\n {paymentType == \"STANDARD\"\r\n ? \"I would like to pay balance over a period of \" +\r\n duration +\r\n (Number(duration) === 1\r\n ? \" month\"\r\n : \" months\")\r\n : \"I would like my recurring amount to be\"}\r\n
\r\n\r\n {paymentType == \"STANDARD\"\r\n ? `Maximum Term ${stateSelectedAccount.planmaxduration} months`\r\n : `Minimum Payment Amount ${currency}${\r\n paymentType == \"MONTHLY\"\r\n ? stateSelectedAccount.planminpayment\r\n : paymentType == \"STANDARD\"\r\n ? 1\r\n : frequency == \"Week\"\r\n ? stateSelectedAccount.planminpayment.toFixed(\r\n 2\r\n )\r\n : frequency == \"Month\"\r\n ? (\r\n (stateSelectedAccount.planminpayment *\r\n 52) /\r\n 12\r\n ).toFixed(2)\r\n : frequency == \"4WEEKLY\"\r\n ? (\r\n stateSelectedAccount.planminpayment *\r\n 4\r\n ).toFixed(2)\r\n : (\r\n stateSelectedAccount.planminpayment *\r\n 2\r\n ).toFixed(2)\r\n }`}\r\n
\r\nFrequency
\r\n\r\n I would like my recurring payments to occur every\r\n
\r\nPayment Date
\r\nPayment Date
\r\n\r\n I would like my recurring payments to start on\r\n
\r\n\r\n Latest Start Date:{\" \"}\r\n {fnmoment()\r\n .add(stateSelectedAccount.planmaxstart, \"days\")\r\n .format(\"L\")}\r\n
\r\n\r\n \r\n \r\n \r\n Summary\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n {convenienceFee == 0 ? (\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\n {\" \"}\r\n
\r\n \r\n \r\n\r\n {stateSelectedAccount.interestrate > 0 &&\r\n paymentType != \"MONTHLY\" ? (\r\n \r\n \r\n ) : null}\r\n {stateSelectedAccount.interestrate > 0 &&\r\n paymentType != \"MONTHLY\" ? (\r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n ) : null}\r\n {paymentType == \"STANDARD\" &&\r\n stateSelectedAccount.interestrate != 0 ? (\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 Schedule Details\r\n \r\n \r\n {paymentType == \"STANDARD\" ? (\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\n \r\n \r\n {convenienceFee == 0 ? (\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 {paymentType == \"STANDARD\" ? (\r\n <>\r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n \r\n \r\n {convenienceFee != 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\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\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\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {paymentType == \"STANDARD\"\r\n ? \"Total Balance\"\r\n : \"Current Balance\"}\r\n
\r\n\r\n {\" \"}\r\n
\r\n \r\n Initial Payment\r\n
\r\n\r\n {\" \"}\r\n
\r\n \r\n {stateSelectedAccount.interestrate > 0\r\n ? \"Balance after Initial Payment\"\r\n : \"Balance to Pay\"}\r\n
\r\n\r\n {\" \"}\r\n
\r\n \r\n Forecast Interest\r\n
\r\n\r\n {\" \"}\r\n
\r\n \r\n Schedule Balance\r\n
\r\n\r\n {\" \"}\r\n
\r\n Term
\r\n\r\n {`${duration} months`}\r\n
\r\nStart Date
\r\n\r\n {fnmoment(paymentDate).format(\"L\")}\r\n
\r\n\r\n Payment Frequency\r\n
\r\n\r\n {frequency == \"Week\"\r\n ? \"Weekly\"\r\n : frequency == \"FORT\"\r\n ? \"Bi-Weekly\"\r\n : frequency == \"4WEEKLY\"\r\n ? \"Four-Weekly\"\r\n : \"Monthly\"}\r\n
\r\n\r\n Payment Amount\r\n
\r\n\r\n
\r\n End Date
\r\n\r\n {fnmoment(endDate).format(\"L\")}\r\n
\r\n\r\n\r\n
\r\n Initial Payment\r\n
\r\n\r\n {\" \"}\r\n
\r\n Fee
\r\n\r\n {\" \"}\r\n
\r\n Initial Debit
\r\n\r\n {\" \"}\r\n
\r\n \r\n
\r\n Payment Amount\r\n
\r\n\r\n
\r\n Fee
\r\n\r\n {\" \"}\r\n
\r\n \r\n Recurring Debit\r\n
\r\n\r\n {\" \"}\r\n
\r\n {textMessage}
\r\n\r\n {createPlantoc}\r\n
\r\n \r\n {step === steps.length ? (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n \r\n Back\r\n \r\n {isStepOptional(step) && (\r\n \r\n Skip\r\n \r\n )}\r\n\r\n \r\n {step === steps.length - 1 ? \"Finish\" : \"Next\"}\r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n container,\r\n primaryColor,\r\n whiteColor,\r\n btnLink,\r\n grayColor,\r\n twitterColor,\r\n dribbbleColor,\r\n instagramColor,\r\n hexToRgb,\r\n} from \"assets/jss/xrs.js\";\r\n\r\nconst footerStyle = {\r\n left: {\r\n float: \"left!important\",\r\n display: \"block\",\r\n },\r\n right: {\r\n padding: \"15px 0\",\r\n margin: \"0\",\r\n float: \"right\",\r\n },\r\n rightLinks: {\r\n float: \"right!important\",\r\n \"& ul\": {\r\n marginBottom: 0,\r\n marginTop: 10,\r\n padding: 0,\r\n listStyle: \"none\",\r\n height: 38,\r\n \"& li\": {\r\n display: \"inline-block\",\r\n },\r\n },\r\n \"& i\": {\r\n fontSize: \"20px\",\r\n },\r\n },\r\n footer: {\r\n padding: \"0.9375rem 0\",\r\n textAlign: \"center\",\r\n display: \"flex\",\r\n zIndex: \"2\",\r\n position: \"relative\",\r\n \"& ul\": {\r\n marginBottom: \"0\",\r\n padding: 0,\r\n listStyle: \"none\",\r\n },\r\n },\r\n big: {\r\n padding: \"1.875rem 0\",\r\n \"& h5, & h4\": {\r\n fontWeight: 700,\r\n fontFamily: \"Rubik ,serif\",\r\n marginBottom: \"15px\",\r\n },\r\n \"& p\": {\r\n color: grayColor[0],\r\n },\r\n },\r\n content: {\r\n textAlign: \"left\",\r\n },\r\n a: {\r\n color: primaryColor[0],\r\n textDecoration: \"none\",\r\n backgroundColor: \"transparent\",\r\n },\r\n dark: {\r\n background: primaryColor[12],\r\n backgroundSize: \"550% 450%\",\r\n color: whiteColor,\r\n \"& p\": {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n \"& i\": {\r\n color: whiteColor,\r\n },\r\n \"& a\": {\r\n color: whiteColor,\r\n opacity: \".86\",\r\n \"&:visited\": {\r\n color: whiteColor,\r\n },\r\n \"&:focus, &:hover\": {\r\n opacity: 1,\r\n },\r\n },\r\n \"& hr\": {\r\n borderColor: \"rgba(\" + hexToRgb(whiteColor) + \",0.2)\",\r\n },\r\n \"& $btnTwitter, & $btnDribbble, & $btnInstagram\": {\r\n color: whiteColor,\r\n },\r\n },\r\n white: {\r\n background: primaryColor[13],\r\n color: grayColor[1],\r\n textDecoration: \"none\",\r\n \"& a\": {\r\n \"&:visited\": {\r\n color: grayColor[1],\r\n },\r\n \"&:hover, &:focus\": {\r\n color: grayColor[20],\r\n },\r\n },\r\n },\r\n container,\r\n list: {\r\n marginBottom: \"0\",\r\n padding: \"0\",\r\n marginTop: \"0\",\r\n },\r\n inlineBlock: {\r\n display: \"inline-block\",\r\n padding: \"0px\",\r\n width: \"auto\",\r\n },\r\n icon: {\r\n width: \"18px\",\r\n height: \"18px\",\r\n position: \"relative\",\r\n top: \"3px\",\r\n },\r\n iconSocial: {\r\n width: \"41px\",\r\n height: \"41px\",\r\n fontSize: \"24px\",\r\n minWidth: \"41px\",\r\n padding: 0,\r\n overflow: \"hidden\",\r\n position: \"relative\",\r\n },\r\n btnTwitter: {\r\n ...btnLink,\r\n color: twitterColor,\r\n },\r\n btnDribbble: {\r\n ...btnLink,\r\n color: dribbbleColor,\r\n },\r\n btnInstagram: {\r\n ...btnLink,\r\n color: instagramColor,\r\n },\r\n footerBrand: {\r\n height: \"50px\",\r\n padding: \"15px 15px\",\r\n fontSize: \"18px\",\r\n lineHeight: \"50px\",\r\n marginLeft: \"-15px\",\r\n color: grayColor[1],\r\n textDecoration: \"none\",\r\n fontWeight: 700,\r\n fontFamily: \"Rubik,serif\",\r\n },\r\n pullCenter: {\r\n display: \"inline-block\",\r\n float: \"none\",\r\n },\r\n clearFix: {\r\n clear: \"both\",\r\n },\r\n};\r\nexport default footerStyle;\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\n// @material-ui/icons\r\nimport Favorite from \"@material-ui/icons/Favorite\";\r\n\r\nimport styles from \"assets/jss/xrs/components/footerStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Footer(props) {\r\n const { children, content, theme, big, className } = props;\r\n const classes = useStyles();\r\n const themeType =\r\n theme === \"transparent\" || theme == undefined ? false : true;\r\n const footerClasses = classNames({\r\n [classes.footer]: true,\r\n [classes[theme]]: themeType,\r\n [classes.big]: big || children !== undefined,\r\n [className]: className !== undefined\r\n });\r\n const aClasses = classNames({\r\n [classes.a]: true\r\n });\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nFooter.propTypes = {\r\n theme: PropTypes.oneOf([\"dark\", \"white\", \"transparent\"]),\r\n big: PropTypes.bool,\r\n content: PropTypes.node.isRequired\r\n};\r\n","/*eslint-disable*/ import React from \"react\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport { useSelector } from \"react-redux\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function FooterSection(props) {\r\n const classes = useStyles();\r\n const footerImage = useSelector(\r\n (state) => state.GetSiteDetailsReducer.footerImageUrl\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 {footerImage === \"\" ? null : (\r\n
\r\n )}\r\n \r\n \r\n }\r\n />\r\n
\r\n );\r\n}\r\n","import {\r\n container,\r\n defaultFont,\r\n primaryColor,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n roseColor,\r\n transition,\r\n boxShadow,\r\n drawerWidth,\r\n blackColor,\r\n whiteColor,\r\n grayColor,\r\n hexToRgb,\r\n} from \"assets/jss/xrs.js\";\r\n\r\nconst headerStyle = (theme) => ({\r\n appBar: {\r\n display: \"flex\",\r\n border: \"0\",\r\n borderRadius: \"3px\",\r\n padding: \"0.625rem 0\",\r\n marginBottom: \"0px\",\r\n color: grayColor[15],\r\n width: \"100%\",\r\n backgroundColor: primaryColor[6],\r\n boxShadow:\r\n \"0 4px 18px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.15)\",\r\n transition: \"all 150ms ease 0s\",\r\n alignItems: \"center\",\r\n flexFlow: \"row nowrap\",\r\n justifyContent: \"flex-start\",\r\n position: \"relative\",\r\n zIndex: 100,\r\n },\r\n absolute: {\r\n position: \"absolute\",\r\n top: \"auto\",\r\n },\r\n fixed: {\r\n position: \"fixed\",\r\n },\r\n container: {\r\n ...container,\r\n minHeight: \"60px\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n display: \"flex\",\r\n flexWrap: \"nowrap\",\r\n },\r\n title: {\r\n letterSpacing: \"unset\",\r\n \"&,& a\": {\r\n ...defaultFont,\r\n minWidth: \"unset\",\r\n lineHeight: \"30px\",\r\n fontSize: \"18px\",\r\n borderRadius: \"3px\",\r\n textTransform: \"none\",\r\n whiteSpace: \"nowrap\",\r\n color: \"inherit\",\r\n \"&:hover,&:focus\": {\r\n color: \"inherit\",\r\n background: \"transparent\",\r\n },\r\n },\r\n },\r\n appResponsive: {\r\n margin: \"20px 10px\",\r\n marginTop: \"0px\",\r\n },\r\n appResponsiveRight: {\r\n float: \"right\",\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(primaryColor[0]) +\r\n \", 0.46)\",\r\n },\r\n info: {\r\n backgroundColor: infoColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(infoColor[0]) +\r\n \", 0.46)\",\r\n },\r\n success: {\r\n backgroundColor: successColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.46)\",\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(warningColor[0]) +\r\n \", 0.46)\",\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(dangerColor[0]) +\r\n \", 0.46)\",\r\n },\r\n rose: {\r\n backgroundColor: roseColor[0],\r\n color: whiteColor,\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(roseColor[0]) +\r\n \", 0.46)\",\r\n },\r\n transparent: {\r\n backgroundColor: \"transparent !important\",\r\n boxShadow: \"none\",\r\n paddingTop: \"25px\",\r\n color: whiteColor,\r\n },\r\n dark: {\r\n color: whiteColor,\r\n backgroundColor: grayColor[9] + \" !important\",\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 12px -5px rgba(\" +\r\n hexToRgb(grayColor[9]) +\r\n \", 0.46)\",\r\n },\r\n white: {\r\n border: \"0\",\r\n padding: \"0.625rem 0\",\r\n marginBottom: \"0px\",\r\n color: grayColor[15],\r\n backgroundColor: whiteColor + \" !important\",\r\n boxShadow:\r\n \"0 4px 18px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.15)\",\r\n },\r\n drawerPaper: {\r\n border: \"none\",\r\n bottom: \"0\",\r\n transitionProperty: \"top, bottom, width\",\r\n transitionDuration: \".2s, .2s, .35s\",\r\n transitionTimingFunction: \"linear, linear, ease\",\r\n width: drawerWidth,\r\n ...boxShadow,\r\n position: \"fixed\",\r\n display: \"block\",\r\n top: \"0\",\r\n height: \"100vh\",\r\n right: \"0\",\r\n left: \"auto\",\r\n visibility: \"visible\",\r\n overflowY: \"visible\",\r\n borderTop: \"none\",\r\n textAlign: \"left\",\r\n paddingRight: \"0px\",\r\n paddingLeft: \"0\",\r\n ...transition,\r\n },\r\n hidden: {},\r\n collapse: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex !important\",\r\n MsFlexPreferredSize: \"auto\",\r\n flexBasis: \"auto\",\r\n },\r\n WebkitBoxFlex: \"1\",\r\n MsFlexPositive: \"1\",\r\n flexGrow: \"1\",\r\n WebkitBoxAlign: \"center\",\r\n MsFlexAlign: \"center\",\r\n alignItems: \"center\",\r\n },\r\n closeButtonDrawer: {\r\n position: \"absolute\",\r\n right: \"8px\",\r\n top: \"9px\",\r\n zIndex: \"1\",\r\n },\r\n});\r\n\r\nexport default headerStyle;\r\n","import AppBar from \"@material-ui/core/AppBar\";\r\nimport Drawer from \"@material-ui/core/Drawer\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport Close from \"@material-ui/icons/Close\";\r\n// @material-ui/icons\r\nimport Menu from \"@material-ui/icons/Menu\";\r\n// core components\r\nimport styles from \"assets/jss/xrs/components/headerStyle.js\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\nimport React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Header(props) {\r\n const [mobileOpen, setMobileOpen] = React.useState(false);\r\n const classes = useStyles();\r\n const logo = useSelector((state) => state.GetSiteDetailsReducer.logoimageurl);\r\n\r\n React.useEffect(() => {\r\n if (props.changeColorOnScroll) {\r\n window.addEventListener(\"scroll\", headerColorChange);\r\n }\r\n return function cleanup() {\r\n if (props.changeColorOnScroll) {\r\n window.removeEventListener(\"scroll\", headerColorChange);\r\n }\r\n };\r\n });\r\n const handleDrawerToggle = () => {\r\n setMobileOpen(!mobileOpen);\r\n };\r\n const headerColorChange = () => {\r\n const { color, changeColorOnScroll } = props;\r\n\r\n const windowsScrollTop = window.pageYOffset;\r\n if (windowsScrollTop > changeColorOnScroll.height) {\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.remove(classes[color]);\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.add(classes[changeColorOnScroll.color]);\r\n } else {\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.add(classes[color]);\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.remove(classes[changeColorOnScroll.color]);\r\n }\r\n };\r\n const { color, links, fixed, absolute } = props;\r\n const appBarClasses = classNames({\r\n [classes.appBar]: true,\r\n [classes[color]]: \"white\",\r\n [classes.absolute]: absolute,\r\n [classes.fixed]: fixed,\r\n [classes.border]: 0,\r\n });\r\n return (\r\n \r\n About {ReactHtmlParser(props.companyname)}\r\n
\r\n\r\n {ReactHtmlParser(props.AboutUs)}\r\n
\r\n{props.companyname}
\r\n{props.Address}
\r\n{props.WorkingHours}
\r\n\r\n Phone: {props.PhoneNumber}\r\n
\r\nE-Mail: {props.Email}
\r\n\r\n
\r\n {footerImage === \"\" ? null : (\r\n
{links}
\r\n \r\n \r\n \r\n \r\n Home\r\n \r\n \r\n \r\n \r\n Register\r\n \r\n \r\n \r\n \r\n Quick Pay\r\n \r\n \r\n \r\n \r\n Frequently Asked Questions\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nHeaderLinks.defaultProps = {\r\n hoverColor: \"primary\"\r\n};\r\n\r\nHeaderLinks.propTypes = {\r\n dropdownHoverColor: PropTypes.oneOf([\r\n \"dark\",\r\n \"primary\",\r\n \"info\",\r\n \"success\",\r\n \"warning\",\r\n \"danger\",\r\n \"rose\"\r\n ])\r\n};\r\n","/*eslint-disable*/ import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Header from \"components/Header/Header.js\";\r\nimport HeaderLinks from \"components/Header/HeaderLinksNoUser\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport { primaryColor } from \"assets/jss/xrs\";\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function headerSection(props) {\r\n document.title = props.title;\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","/*eslint-disable*/ import React from \"react\";\r\nimport classNames from \"classnames\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Link } from \"react-router-dom\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function LinksSection({ ...rest }) {\r\n const classes = useStyles();\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\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import { Collapse } from \"@material-ui/core\";\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 Icon from \"@material-ui/core/Icon\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport classNames from \"classnames\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomTextField from \"components/CustomInput/CustomInput\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport { useFormik } from \"formik\";\r\nimport React, { useContext } from \"react\";\r\nimport { API_ACTION_TYPES } from \"store/redux/redux-actions/redux_action_types\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport {\r\n Radio,\r\n RadioGroup,\r\n FormControlLabel,\r\n FormControl,\r\n FormLabel,\r\n} from \"@material-ui/core\";\r\n\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n} from \"../../store/redux/redux-actions/redux_actions\";\r\nimport * as ACTIONS from \"../../store/actions/actions\";\r\n\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nimport Context from \"../../utils/context\";\r\nimport history from \"../../utils/history\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport FooterSection from \"../../views/SectionsPage/Sections/FooterSection.js\";\r\nimport HeaderSection from \"../../views/SectionsPage/Sections/HeaderSection.js\";\r\nimport LinkSection from \"../../views/SectionsPage/Sections/LinksSection.js\";\r\nimport { string } from \"prop-types\";\r\nimport { textVariables } from \"assets/jss/xrs\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function LandingPage(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [page, setPage] = React.useState(1);\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n\r\n const [firstDigitName, setfirstDigitName] = React.useState(\"\");\r\n const [secondDigitName, setsecondDigitName] = React.useState(\"\");\r\n const [thirdDigitName, setthirdDigitName] = React.useState(\"\");\r\n const [firstDigitValue, setfirstDigitValue] = React.useState(\"\");\r\n const [secondDigitValue, setsecondDigitValue] = React.useState(\"\");\r\n const [thirdDigitValue, setthirdDigitValue] = React.useState(\"\");\r\n const [registrationType, setRegistrationType] = React.useState(\"both\");\r\n const [\r\n selectedregistrationType,\r\n setselectedRegistrationType,\r\n ] = React.useState(null);\r\n const [NotFound, setNotFound] = React.useState(false);\r\n const [registerValues, setRegisterValues] = React.useState(\"\");\r\n const [resetValues, setResetValues] = React.useState(\"\");\r\n const [retruevedUser, setretruevedUser] = React.useState(\"\");\r\n\r\n const [mainscreen, setMainScreen] = React.useState(true);\r\n const [verifyPin, setVerifyPin] = React.useState(false);\r\n const [registerscreen, setRegisterScreen] = React.useState(false);\r\n const [resetPinscreen, setResetPinscreen] = React.useState(false);\r\n const [changePinscreen, setChangePinscreen] = React.useState(false);\r\n const [paymentResult, setPaymentResult] = React.useState(\"\");\r\n const [alertOpen, setAlertOpen] = React.useState(false);\r\n const [alertText, setAlertText] = React.useState(\"None\");\r\n\r\n const loading = useSelector((state) => state.ApiCallsReducer.loading);\r\n const errorMessage = useSelector(\r\n (state) => state.ApiCallsReducer.errorMessage\r\n );\r\n const error = useSelector((state) => state.ApiCallsReducer.error);\r\n const dispatch = useDispatch();\r\n\r\n const [customerCaption, setcustomerCaption] = React.useState(\"\");\r\n\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n let search = window.location.search;\r\n dispatch(ACTIONS.set_Customer(\"NoCoutomer\"));\r\n dispatch(ACTIONS.set_Accounts(\"NoAccount\"));\r\n dispatch(ACTIONS.set_selectedAccount(\"NoAccount\"));\r\n context.dispatchDrawerTwo(false);\r\n context.dispatchDrawerThree(false);\r\n context.dispatchDrawerOne(true);\r\n context.dispatchDrawer(\"NoDrawer\");\r\n\r\n if (search.indexOf(\"Success\") !== -1) {\r\n setPaymentResult(\"Success\");\r\n setAlertText(\"Success\");\r\n setAlertOpen(true);\r\n }\r\n if (search.indexOf(\"Failure\") !== -1) {\r\n setPaymentResult(\"Failure\");\r\n setAlertText(\"Failure\");\r\n setAlertOpen(true);\r\n }\r\n }, []);\r\n\r\n const makeFormEncoder = (hash) => {\r\n return function(key) {\r\n return encodeURIComponent(key) + \"=\" + encodeURIComponent(hash[key]);\r\n };\r\n };\r\n\r\n React.useEffect(() => {\r\n dispatch(apiActions.clear());\r\n dispatch(apiActions.loading(true));\r\n\r\n dispatch(ACTIONS.set_Customer(\"NoCoutomer\"));\r\n dispatch(ACTIONS.set_Accounts(\"NoAccount\"));\r\n dispatch(ACTIONS.set_selectedAccount(\"NoAccount\"));\r\n\r\n if (props.create == \"true\") {\r\n setMainScreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n }\r\n getPINDigits();\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(\r\n getSiteDetailsActions.paymentProvider(response.paymentprovider)\r\n );\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(getSiteDetailsActions.currency(response.sitecurrency));\r\n let type = response.registrationtype\r\n ? response.registrationtype.toLowerCase()\r\n : null;\r\n setselectedRegistrationType(\r\n type == \"both\" ? \"personal\" : type == \"bothdob\" ? \"mobile\" : type\r\n );\r\n setRegistrationType(type);\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n setcustomerCaption(response.custcaption);\r\n dispatch(ACTIONS.set_Site(response));\r\n\r\n dispatch(ACTIONS.set_sessiontimeout(response.sessiontimeout));\r\n dispatch(ACTIONS.set_overalltimeout(response.overalltimeout));\r\n\r\n context.dispatchIntercomKey(\r\n response.chatauth,\r\n response.chatvisible == \"Y\" ? true : false\r\n );\r\n\r\n dispatch(apiActions.clear());\r\n })\r\n .catch((error) => {\r\n dispatch(apiActions.loading(false));\r\n dispatch(apiActions.error(error.toString()));\r\n });\r\n }, [page]);\r\n\r\n const handleClose = () => {\r\n setAlertOpen(false);\r\n };\r\n const changeRegisterType = (e, registrationTypeprop) => {\r\n setselectedRegistrationType(registrationTypeprop);\r\n };\r\n\r\n const registerClick = () => {\r\n setMainScreen(false);\r\n setResetPinscreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n\r\n const ResetPinAndPasswordClick = () => {\r\n setResetPinscreen(true);\r\n setMainScreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n const loginClick = () => {\r\n setMainScreen(true);\r\n setRegisterScreen(false);\r\n setResetPinscreen(false);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n const submitRegisterForm = (values) => {\r\n var xhr = new XMLHttpRequest();\r\n var data;\r\n var url;\r\n if (\r\n selectedregistrationType == null ||\r\n selectedregistrationType == \"mobile\"\r\n ) {\r\n url = URLS.GetcreateUserAPIUrl;\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n MobileNumber: values.phone,\r\n DateOfBirth: values.dob,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n if (resetPinscreen) {\r\n url = URLS.GetRecreateUserAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"email\") {\r\n url = URLS.GetcreateUserViaEmailAPIUrl;\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n Email: values.email,\r\n DateOfBirth: values.dob,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n if (resetPinscreen) {\r\n url = URLS.GetRecreateUserViaEmailAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"business\") {\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n Email: values.email,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n url = URLS.GetCreateBusinesUserAPIUrl;\r\n if (resetPinscreen) {\r\n url = URLS.GetReCreateBusinesUserAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"personal\") {\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n EmailAddress: values.email,\r\n MobileNumber: values.phone,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n url = URLS.GetCreatePersonalUserAPIUrl;\r\n if (resetPinscreen) {\r\n url = URLS.GetReCreatePersonalUserAPIUrl;\r\n }\r\n }\r\n\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n const json = JSON.parse(xhr.responseText);\r\n dispatch(apiActions.loading(false));\r\n\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n setretruevedUser(json);\r\n setMainScreen(false);\r\n setRegisterScreen(false);\r\n setVerifyPin(true);\r\n setNotFound(false);\r\n\r\n // case 404:\r\n // var message = \"User not found!\";\r\n // context.stateInfoDialog(\"Register\", message);\r\n // break;\r\n // case 400:\r\n // var errors = JSON.parse(xhr.responseText).errors;\r\n // var message = \"\";\r\n // errors.forEach((element) => (message += element + \"\\n\"));\r\n\r\n // context.stateInfoDialog(\"Register\", message);\r\n // break;\r\n // case 500:\r\n // var errors = JSON.parse(xhr.responseText).errors;\r\n // var message = \"\";\r\n // errors.forEach((element) => (message += element + \"\\n\"));\r\n // context.stateInfoDialog(\"Register\", message);\r\n\r\n // break;\r\n // default:\r\n // break;\r\n } else {\r\n // var errors = JSON.parse(xhr.responseText).errors;\r\n // var message = \"\";\r\n // errors.forEach((element) => (message += element + \"\\n\"));\r\n\r\n ApiErrorHandler(\"Create Account\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(data);\r\n };\r\n const submitResetForm = (values) => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetReset;\r\n\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n var data;\r\n data = JSON.stringify({\r\n Reference: values.resetcustomernumber,\r\n MobileNumber: values.resetphone,\r\n DateOfBirth: values.resetdob,\r\n CredentialToReset: \"Password\",\r\n });\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n const json = JSON.parse(xhr.responseText);\r\n\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n setMainScreen(false);\r\n setRegisterScreen(false);\r\n setResetPinscreen(false);\r\n setVerifyPin(true);\r\n setNotFound(false);\r\n dispatch(apiActions.loading(false));\r\n\r\n // break;\r\n // case 404:\r\n // setNotFound(true);\r\n // setMainScreen(false);\r\n // setRegisterScreen(false);\r\n // setResetPinscreen(false);\r\n // setVerifyPin(false);\r\n // break;\r\n // case 400:\r\n // alert(JSON.parse(xhr.responseText));\r\n // break;\r\n // case 500:\r\n // alert(JSON.parse(xhr.responseText));\r\n // break;\r\n // default:\r\n // break;\r\n // }\r\n } else {\r\n ApiErrorHandler(\"Reset\", xhr, context);\r\n dispatch(apiActions.loading(false));\r\n }\r\n }\r\n };\r\n\r\n xhr.send(data);\r\n };\r\n const displayDigits = (data) => {\r\n var first = data[0];\r\n setfirstDigitName(first.description);\r\n setfirstDigitValue(first.digit);\r\n var second = data[1];\r\n setsecondDigitName(second.description);\r\n setsecondDigitValue(second.digit);\r\n var third = data[2];\r\n setthirdDigitName(third.description);\r\n setthirdDigitValue(third.digit);\r\n };\r\n const getPINDigits = () => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetPINDigitsAPIUrl;\r\n xhr.open(\"GET\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n const json = JSON.parse(xhr.responseText);\r\n\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n if (json !== null) {\r\n displayDigits(json);\r\n } else {\r\n alert(json);\r\n }\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\"Retrieve pin digits\", xhr.responseText);\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\"Retrieve pin digits\", xhr.responseText);\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Get PIN Digits\", xhr, context);\r\n dispatch(apiActions.loading(false));\r\n }\r\n }\r\n };\r\n\r\n xhr.send();\r\n };\r\n const registerForm = useFormik({\r\n initialValues: {\r\n customernumber: \"\",\r\n regusername: \"\",\r\n phone: \"\",\r\n dob: \"\",\r\n pass: \"\",\r\n passconfirm: \"\",\r\n },\r\n onSubmit: (values) => {\r\n dispatch(apiActions.loading(true));\r\n scrollToTop();\r\n if (values.pass != values.passconfirm) {\r\n dispatch(apiActions.loading(false));\r\n\r\n context.stateInfoDialog(\r\n \"Create Account\",\r\n \"Passwords and Confirm password do not match!\"\r\n );\r\n return;\r\n }\r\n setRegisterValues(values);\r\n submitRegisterForm(values);\r\n },\r\n });\r\n const resetForm = useFormik({\r\n initialValues: {\r\n resetcustomernumber: \"\",\r\n resetphone: \"\",\r\n resetdob: \"\",\r\n },\r\n onSubmit: (values) => {\r\n setResetValues(values);\r\n submitResetForm(values);\r\n },\r\n });\r\n const scrollToTop = () => {\r\n window.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\", // Optional: Adds smooth scrolling effect\r\n });\r\n };\r\n const getMenu = () => {\r\n var url = URLS.GetWelcomeNavigation;\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"GET\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Welcome Navigation\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data1) => {\r\n dispatch(ACTIONS.set_menu(data1));\r\n\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", res, context);\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n\r\n dispatch(\r\n htmlActions.viewAccountText(\r\n data.activeAccounts[0].viewacccounttext\r\n )\r\n );\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n sessionStorage.setItem(\"user\", data.customer.cufname);\r\n\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n dispatch(\r\n ACTIONS.set_Registration_method(\r\n data.customer.registrationmethod == null\r\n ? data.customer.registrationmethod\r\n : data.customer.registrationmethod.toLowerCase()\r\n )\r\n );\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n if (data.activeAccounts.length == 1) {\r\n dispatch(ACTIONS.set_selectedAccount(data.activeAccounts[0]));\r\n }\r\n\r\n let multiplenum = data.activeAccounts[0].deptphonenumber.includes(\r\n \";\"\r\n );\r\n let num = data.activeAccounts[0].deptphonenumber;\r\n if (multiplenum) {\r\n let splited = data.activeAccounts[0].deptphonenumber.split(\";\");\r\n num = splited[0];\r\n }\r\n dispatch(getSiteDetailsActions.devNum(num));\r\n\r\n dispatch(apiActions.clear());\r\n\r\n history.replace(data1.targetURL);\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", error, context);\r\n }\r\n });\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Navigation\", error, context);\r\n }\r\n });\r\n };\r\n\r\n const Logon = (values, firstPosition, secondPosition, thirdPosition) => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetTokenURLAPI;\r\n\r\n dispatch(apiActions.loading(true));\r\n\r\n var formValues = {\r\n grant_type: \"password\",\r\n username: values.username,\r\n password: values.password,\r\n validatePIN: \"true\",\r\n client_id: \"PaymentPortal\",\r\n firstValue: values.firstValue,\r\n firstPosition: firstPosition,\r\n secondValue: values.secondValue,\r\n secondPosition: secondPosition,\r\n thirdValue: values.thirdValue,\r\n thirdPosition: thirdPosition,\r\n };\r\n\r\n const pairs = Object.keys(formValues).map(makeFormEncoder(formValues));\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n var json = JSON.parse(xhr.responseText);\r\n var access_token = json.access_token;\r\n var refresh_token = json.refresh_token;\r\n var expires_in_seconds = json.expires_in;\r\n var timeoutDate;\r\n timeoutDate = new Date();\r\n\r\n timeoutDate.setSeconds(timeoutDate.getSeconds() + expires_in_seconds);\r\n sessionStorage.setItem(\"user\", values.username);\r\n sessionStorage.setItem(\"expiresAt\", timeoutDate);\r\n sessionStorage.setItem(\"expiresInSeconds\", expires_in_seconds);\r\n\r\n sessionStorage.setItem(\"access_token\", access_token);\r\n sessionStorage.setItem(\"refresh_token\", refresh_token);\r\n dispatch(apiActions.loading(false));\r\n dispatch(ACTIONS.set_startoveralltimeout(true));\r\n getMenu();\r\n\r\n // break;\r\n // case 404:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // case 400:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // case 500:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // default:\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Sign in\", xhr, context);\r\n let parsedError = JSON.parse(xhr.responseText);\r\n if (\r\n parsedError.error_description === \"User did not enter correct PIN\"\r\n ) {\r\n ResetPins();\r\n }\r\n dispatch(apiActions.loading(false));\r\n }\r\n }\r\n };\r\n\r\n var postValues = pairs.join(\"&\");\r\n xhr.send(postValues);\r\n };\r\n\r\n const getPinVerification = (values, record, pin) => {\r\n var xhr = new XMLHttpRequest();\r\n var url =\r\n selectedregistrationType == null || selectedregistrationType == \"personal\"\r\n ? URLS.GetVerifyAPIUrl\r\n : URLS.GetVerifyByEmailAPIUrl;\r\n let verifyData = {};\r\n if (selectedregistrationType == \"business\") {\r\n verifyData.id = record.id;\r\n verifyData.userName = values.regusername;\r\n verifyData.emailComfirmed = record.emailConfirmed;\r\n verifyData.emailAddress = record.emailAddress;\r\n verifyData.reference = values.customernumber;\r\n verifyData.customerRecordNo = record.customerRecordNo;\r\n verifyData.pin = pin;\r\n } else {\r\n verifyData.id = record.id;\r\n verifyData.userName = values.regusername;\r\n verifyData.phoneConfirmed = record.phoneConfirmed;\r\n verifyData.mobileNumber = values.phone;\r\n\r\n verifyData.dateOfBirth = values.dob;\r\n\r\n verifyData.reference = values.customernumber;\r\n verifyData.customerRecordNo = record.customerRecordNo;\r\n verifyData.pin = pin;\r\n }\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n setMainScreen(true);\r\n setRegisterScreen(false);\r\n setVerifyPin(false);\r\n\r\n var xhrtoken = new XMLHttpRequest();\r\n var urltoken = URLS.GetTokenURLAPI;\r\n\r\n var valuesPost = {\r\n grant_type: \"password\",\r\n username: values.regusername,\r\n password: values.pass,\r\n validatePIN: \"false\",\r\n client_id: \"PaymentPortal\",\r\n };\r\n // eslint-disable-next-line no-case-declarations\r\n const pairs = Object.entries(valuesPost)\r\n .map(\r\n ([key, value]) =>\r\n `${encodeURIComponent(key)}=${encodeURIComponent(value)}`\r\n )\r\n .join(\"&\");\r\n\r\n xhrtoken.open(\"POST\", urltoken, true);\r\n xhrtoken.setRequestHeader(\r\n \"Content-Type\",\r\n \"application/x-www-form-urlencoded\"\r\n );\r\n xhrtoken.onreadystatechange = function() {\r\n if (xhrtoken.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n var json = JSON.parse(xhrtoken.responseText);\r\n var access_token = json.access_token;\r\n var refresh_token = json.refresh_token;\r\n var expires_in_seconds = json.expires_in;\r\n var timeoutDate;\r\n timeoutDate = new Date();\r\n timeoutDate.setSeconds(\r\n timeoutDate.getSeconds() + expires_in_seconds\r\n );\r\n sessionStorage.setItem(\"expiresAt\", timeoutDate);\r\n sessionStorage.setItem(\"access_token\", access_token);\r\n sessionStorage.setItem(\"refresh_token\", refresh_token);\r\n\r\n getMenu();\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhrtoken.responseText).error_description\r\n // );\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\"Login\", xhrtoken.responseText);\r\n\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Sign in\", xhr, context);\r\n }\r\n }\r\n };\r\n xhrtoken.send(pairs);\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\r\n // \"Verify Pin\",\r\n // JSON.parse(xhr.responseText).message\r\n // );\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\r\n // \"Verify Pin\",\r\n // JSON.parse(xhr.responseText).message\r\n // );\r\n // break;\r\n } else {\r\n ApiErrorHandler(\" Verify PIN\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(JSON.stringify(verifyData));\r\n };\r\n\r\n const LoginForm = useFormik({\r\n initialValues: {\r\n username: \"\",\r\n password: \"\",\r\n firstValue: \"\",\r\n secondValue: \"\",\r\n thirdValue: \"\",\r\n },\r\n\r\n onSubmit: (values) => {\r\n Logon(values, firstDigitValue, secondDigitValue, thirdDigitValue);\r\n },\r\n });\r\n const ResetPins = () => {\r\n LoginForm.values.firstValue = \"\";\r\n LoginForm.values.secondValue = \"\";\r\n LoginForm.values.thirdValue = \"\";\r\n };\r\n const focusUsername = document.querySelector(`input[id=username]`);\r\n const focusPass = document.querySelector(`input[id=pass]`);\r\n\r\n const focusFirst = document.querySelector(`input[id=firstValue]`);\r\n const focusSecond = document.querySelector(`input[id=secondValue]`);\r\n const focusThird = document.querySelector(`input[id=thirdValue]`);\r\n const focusButton = document.querySelector(`button[id=signIn]`);\r\n\r\n React.useEffect(() => {\r\n if (\r\n document.activeElement !== focusUsername &&\r\n document.activeElement !== focusPass\r\n ) {\r\n if (\r\n LoginForm.values.firstValue.length !== 1 &&\r\n (LoginForm.values.secondValue.length === 1 ||\r\n LoginForm.values.thirdValue.length === 1)\r\n ) {\r\n focusFirst.focus();\r\n }\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length !== 1\r\n ) {\r\n focusSecond.focus();\r\n }\r\n\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length === 1 &&\r\n LoginForm.values.thirdValue.length !== 1\r\n ) {\r\n focusThird.focus();\r\n }\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length === 1 &&\r\n LoginForm.values.thirdValue.length === 1\r\n ) {\r\n var isFocused =\r\n document.activeElement === focusSecond ||\r\n document.activeElement === focusFirst ||\r\n document.activeElement === focusThird;\r\n if (isFocused) {\r\n focusButton.focus();\r\n }\r\n }\r\n }\r\n }, [LoginForm.values]);\r\n\r\n const verifyPinForm = useFormik({\r\n initialValues: {\r\n pinnum: \"\",\r\n },\r\n onSubmit: (values) => {\r\n getPinVerification(registerValues, retruevedUser, values.pinnum);\r\n },\r\n });\r\n const changePinForm = useFormik({\r\n initialValues: {\r\n OldPin: \"\",\r\n NewPin: \"\",\r\n ConfirmPIN: \"\",\r\n SecurityCode: \"\",\r\n Reference: \"\",\r\n MobileNumber: \"\",\r\n DateOfBirth: \"\",\r\n },\r\n onSubmit: (values) => {},\r\n });\r\n\r\n return (\r\n Quick Pay
\r\nRegister
\r\n\r\n Frequently Asked Questions\r\n
\r\n\r\n \r\n Information \r\n \r\n \r\n {alertText}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n}\r\n","import { Collapse } from \"@material-ui/core\";\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 Icon from \"@material-ui/core/Icon\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport classNames from \"classnames\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomTextField from \"components/CustomInput/CustomInput\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport { useFormik } from \"formik\";\r\nimport React, { useContext } from \"react\";\r\nimport * as ACTIONS from \"../../store/actions/actions\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\n\r\nimport Context from \"../../utils/context\";\r\nimport history from \"../../utils/history\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport FooterSection from \"../../views/SectionsPage/Sections/FooterSection.js\";\r\nimport HeaderSection from \"../../views/SectionsPage/Sections/HeaderSection.js\";\r\nimport LinkSection from \"../../views/SectionsPage/Sections/LinksSection.js\";\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n} from \"../../store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n Radio,\r\n RadioGroup,\r\n FormControlLabel,\r\n FormControl,\r\n FormLabel,\r\n} from \"@material-ui/core\";\r\nimport { textVariables } from \"assets/jss/xrs\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function LandingPageCreateUser(props) {\r\n const dispatch = useDispatch();\r\n\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [page, setPage] = React.useState(1);\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n const [registrationType, setRegistrationType] = React.useState(\"both\");\r\n const [\r\n selectedregistrationType,\r\n setselectedRegistrationType,\r\n ] = React.useState(null);\r\n\r\n const [firstDigitName, setfirstDigitName] = React.useState(\"\");\r\n const [secondDigitName, setsecondDigitName] = React.useState(\"\");\r\n const [thirdDigitName, setthirdDigitName] = React.useState(\"\");\r\n const [firstDigitValue, setfirstDigitValue] = React.useState(\"\");\r\n const [secondDigitValue, setsecondDigitValue] = React.useState(\"\");\r\n const [thirdDigitValue, setthirdDigitValue] = React.useState(\"\");\r\n\r\n const [NotFound, setNotFound] = React.useState(false);\r\n const [registerValues, setRegisterValues] = React.useState(\"\");\r\n const [resetValues, setResetValues] = React.useState(\"\");\r\n const [retruevedUser, setretruevedUser] = React.useState(\"\");\r\n\r\n const [errorMessage, setErrorMessage] = React.useState(\"\");\r\n const [mainscreen, setMainScreen] = React.useState(false);\r\n const [verifyPin, setVerifyPin] = React.useState(false);\r\n const [registerscreen, setRegisterScreen] = React.useState(true);\r\n const [resetPinscreen, setResetPinscreen] = React.useState(false);\r\n const [changePinscreen, setChangePinscreen] = React.useState(false);\r\n const [paymentResult, setPaymentResult] = React.useState(\"\");\r\n const [alertOpen, setAlertOpen] = React.useState(false);\r\n const [alertText, setAlertText] = React.useState(\"None\");\r\n\r\n const loading = useSelector((state) => state.ApiCallsReducer.loading);\r\n\r\n const [customerCaption, setcustomerCaption] = React.useState(\"\");\r\n\r\n const ResetPins = () => {\r\n LoginForm.values.firstValue = \"\";\r\n LoginForm.values.secondValue = \"\";\r\n LoginForm.values.thirdValue = \"\";\r\n };\r\n const focusUsername = document.querySelector(`input[id=username]`);\r\n const focusPass = document.querySelector(`input[id=pass]`);\r\n\r\n const focusFirst = document.querySelector(`input[id=firstValue]`);\r\n const focusSecond = document.querySelector(`input[id=secondValue]`);\r\n const focusThird = document.querySelector(`input[id=thirdValue]`);\r\n const focusButton = document.querySelector(`button[id=signIn]`);\r\n\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n let search = window.location.search;\r\n dispatch(ACTIONS.set_Customer(\"NoCoutomer\"));\r\n dispatch(ACTIONS.set_Accounts(\"NoAccount\"));\r\n dispatch(ACTIONS.set_selectedAccount(\"NoAccount\"));\r\n context.dispatchDrawerTwo(false);\r\n context.dispatchDrawerThree(false);\r\n context.dispatchDrawerOne(true);\r\n context.dispatchDrawer(\"NoDrawer\");\r\n\r\n if (search.indexOf(\"Success\") !== -1) {\r\n setPaymentResult(\"Success\");\r\n setAlertText(\"Success\");\r\n setAlertOpen(true);\r\n }\r\n if (search.indexOf(\"Failure\") !== -1) {\r\n setPaymentResult(\"Failure\");\r\n setAlertText(\"Failure\");\r\n setAlertOpen(true);\r\n }\r\n }, []);\r\n\r\n const makeFormEncoder = (hash) => {\r\n return function(key) {\r\n return encodeURIComponent(key) + \"=\" + encodeURIComponent(hash[key]);\r\n };\r\n };\r\n\r\n React.useEffect(() => {\r\n dispatch(ACTIONS.set_Customer(\"NoCoutomer\"));\r\n\r\n dispatch(ACTIONS.set_Accounts(\"NoAccount\"));\r\n dispatch(ACTIONS.set_selectedAccount(\"NoAccount\"));\r\n\r\n if (props.create == \"true\") {\r\n setMainScreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n }\r\n getPINDigits();\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n //Set site details\r\n dispatch(\r\n getSiteDetailsActions.paymentProvider(response.paymentprovider)\r\n );\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(getSiteDetailsActions.currency(response.sitecurrency));\r\n\r\n let type = response.registrationtype\r\n ? response.registrationtype.toLowerCase()\r\n : null;\r\n setselectedRegistrationType(\r\n type == \"both\" ? \"personal\" : type == \"bothdob\" ? \"mobile\" : type\r\n );\r\n setRegistrationType(type);\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n setcustomerCaption(response.custcaption);\r\n dispatch(ACTIONS.set_Site(response));\r\n context.dispatchIntercomKey(\r\n response.chatauth,\r\n response.chatvisible == \"Y\" ? true : false\r\n );\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n }\r\n });\r\n }, [page]);\r\n\r\n const handleClose = () => {\r\n setAlertOpen(false);\r\n };\r\n const changeRegisterType = (e, registrationTypeprop) => {\r\n setselectedRegistrationType(registrationTypeprop);\r\n };\r\n const registerClick = () => {\r\n setMainScreen(false);\r\n setResetPinscreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n\r\n const ResetPinAndPasswordClick = () => {\r\n setResetPinscreen(true);\r\n setMainScreen(false);\r\n setRegisterScreen(true);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n const loginClick = () => {\r\n setMainScreen(true);\r\n setRegisterScreen(false);\r\n setResetPinscreen(false);\r\n setVerifyPin(false);\r\n setNotFound(false);\r\n };\r\n const submitRegisterForm = (values) => {\r\n var xhr = new XMLHttpRequest();\r\n var data;\r\n var url;\r\n if (\r\n selectedregistrationType == null ||\r\n selectedregistrationType == \"mobile\"\r\n ) {\r\n url = URLS.GetcreateUserAPIUrl;\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n MobileNumber: values.phone,\r\n DateOfBirth: values.dob,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n if (resetPinscreen) {\r\n url = URLS.GetRecreateUserAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"email\") {\r\n url = URLS.GetcreateUserViaEmailAPIUrl;\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n Email: values.email,\r\n DateOfBirth: values.dob,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n if (resetPinscreen) {\r\n url = URLS.GetRecreateUserViaEmailAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"business\") {\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n Email: values.email,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n url = URLS.GetCreateBusinesUserAPIUrl;\r\n if (resetPinscreen) {\r\n url = URLS.GetReCreateBusinesUserAPIUrl;\r\n }\r\n } else if (selectedregistrationType == \"personal\") {\r\n data = JSON.stringify({\r\n UserName: values.regusername,\r\n Reference: values.customernumber,\r\n EmailAddress: values.email,\r\n MobileNumber: values.phone,\r\n Password: values.pass,\r\n ConfirmPassword: values.passconfirm,\r\n });\r\n url = URLS.GetCreatePersonalUserAPIUrl;\r\n if (resetPinscreen) {\r\n url = URLS.GetReCreatePersonalUserAPIUrl;\r\n }\r\n }\r\n\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n dispatch(apiActions.loading(false));\r\n\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n const json = JSON.parse(xhr.responseText);\r\n\r\n setretruevedUser(json);\r\n setMainScreen(false);\r\n setRegisterScreen(false);\r\n setVerifyPin(true);\r\n setNotFound(false);\r\n // break;\r\n // case 404:\r\n // var message = \"User not found!\";\r\n // context.stateInfoDialog(\"Register\", message);\r\n // break;\r\n // case 400:\r\n // var errors = JSON.parse(xhr.responseText).errors;\r\n // var message = \"\";\r\n // errors.forEach((element) => (message += element + \"\\n\"));\r\n\r\n // context.stateInfoDialog(\"Register\", message);\r\n // break;\r\n // case 500:\r\n // var errors = JSON.parse(xhr.responseText).errors;\r\n // var message = \"\";\r\n // context.stateInfoDialog(\"Register\", message);\r\n // errors.forEach((element) => (message += element + \"\\n\"));\r\n // break;\r\n // default:\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Create Account\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(data);\r\n };\r\n const submitResetForm = (values) => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetReset;\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n var data;\r\n data = JSON.stringify({\r\n Reference: values.resetcustomernumber,\r\n MobileNumber: values.resetphone,\r\n DateOfBirth: values.resetdob,\r\n CredentialToReset: \"Password\",\r\n });\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n const json = JSON.parse(xhr.responseText);\r\n\r\n setMainScreen(false);\r\n setRegisterScreen(false);\r\n setResetPinscreen(false);\r\n setVerifyPin(true);\r\n setNotFound(false);\r\n // break;\r\n // case 404:\r\n // setNotFound(true);\r\n // setMainScreen(false);\r\n // setRegisterScreen(false);\r\n // setResetPinscreen(false);\r\n // setVerifyPin(false);\r\n // break;\r\n // case 400:\r\n // alert(JSON.parse(xhr.responseText));\r\n // break;\r\n // case 500:\r\n // alert(JSON.parse(xhr.responseText));\r\n // break;\r\n // default:\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Reset\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(data);\r\n };\r\n const displayDigits = (data) => {\r\n var first = data[0];\r\n setfirstDigitName(first.description);\r\n setfirstDigitValue(first.digit);\r\n var second = data[1];\r\n setsecondDigitName(second.description);\r\n setsecondDigitValue(second.digit);\r\n var third = data[2];\r\n setthirdDigitName(third.description);\r\n setthirdDigitValue(third.digit);\r\n };\r\n const getPINDigits = () => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetPINDigitsAPIUrl;\r\n xhr.open(\"GET\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n const json = JSON.parse(xhr.responseText);\r\n\r\n if (json !== null) {\r\n displayDigits(json);\r\n } else {\r\n alert(json);\r\n }\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\"Retrieve pin digits\", xhr.responseText);\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\"Retrieve pin digits\", xhr.responseText);\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Retrieve pin digits\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send();\r\n };\r\n const registerForm = useFormik({\r\n initialValues: {\r\n customernumber: \"\",\r\n email: \"\",\r\n regusername: \"\",\r\n phone: \"\",\r\n dob: \"\",\r\n pass: \"\",\r\n passconfirm: \"\",\r\n },\r\n onSubmit: (values) => {\r\n dispatch(apiActions.loading(true));\r\n scrollToTop();\r\n if (values.pass != values.passconfirm) {\r\n context.stateInfoDialog(\r\n \"Create Account\",\r\n \"Passwords and Confirm password do not match!\"\r\n );\r\n return;\r\n }\r\n setRegisterValues(values);\r\n submitRegisterForm(values);\r\n },\r\n });\r\n const resetForm = useFormik({\r\n initialValues: {\r\n resetcustomernumber: \"\",\r\n resetphone: \"\",\r\n resetdob: \"\",\r\n },\r\n onSubmit: (values) => {\r\n setResetValues(values);\r\n submitResetForm(values);\r\n },\r\n });\r\n const scrollToTop = () => {\r\n window.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\", // Optional: Adds smooth scrolling effect\r\n });\r\n };\r\n const getMenu = () => {\r\n var url = URLS.GetWelcomeNavigation;\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"GET\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Welcome Navigation\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data1) => {\r\n dispatch(ACTIONS.set_menu(data1));\r\n\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n ApiErrorHandler(\"Get Welcome Details\", res, context);\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(\r\n data.activeAccounts[0].viewacccounttext\r\n )\r\n );\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n sessionStorage.setItem(\"user\", data.customer.cufname);\r\n dispatch(\r\n ACTIONS.set_Registration_method(\r\n data.customer.registrationmethod == null\r\n ? data.customer.registrationmethod\r\n : data.customer.registrationmethod.toLowerCase()\r\n )\r\n );\r\n\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n\r\n if (data.activeAccounts.length == 1) {\r\n dispatch(ACTIONS.set_selectedAccount(data.activeAccounts[0]));\r\n }\r\n dispatch(apiActions.clear());\r\n history.replace(data1.targetURL);\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Welcome Details\", error, context);\r\n }\r\n });\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Welcome Navigation\", error, context);\r\n }\r\n });\r\n };\r\n\r\n const Logon = (values, firstPosition, secondPosition, thirdPosition) => {\r\n var xhr = new XMLHttpRequest();\r\n var url = URLS.GetTokenURLAPI;\r\n dispatch(apiActions.loading(true));\r\n var formValues = {\r\n grant_type: \"password\",\r\n username: values.username,\r\n password: values.password,\r\n validatePIN: \"true\",\r\n client_id: \"PaymentPortal\",\r\n firstValue: values.firstValue,\r\n firstPosition: firstPosition,\r\n secondValue: values.secondValue,\r\n secondPosition: secondPosition,\r\n thirdValue: values.thirdValue,\r\n thirdPosition: thirdPosition,\r\n };\r\n\r\n const pairs = Object.keys(formValues).map(makeFormEncoder(formValues));\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n var json = JSON.parse(xhr.responseText);\r\n var access_token = json.access_token;\r\n var refresh_token = json.refresh_token;\r\n var expires_in_seconds = json.expires_in;\r\n var timeoutDate;\r\n timeoutDate = new Date();\r\n timeoutDate.setSeconds(timeoutDate.getSeconds() + expires_in_seconds);\r\n sessionStorage.setItem(\"user\", values.username);\r\n sessionStorage.setItem(\"expiresAt\", timeoutDate);\r\n sessionStorage.setItem(\"access_token\", access_token);\r\n sessionStorage.setItem(\"refresh_token\", refresh_token);\r\n\r\n getMenu();\r\n\r\n // break;\r\n // case 404:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // case 400:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // case 500:\r\n // dispatch(\r\n // apiActions.error(JSON.parse(xhr.responseText).error_description)\r\n // );\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhr.responseText).error_description\r\n // );\r\n // break;\r\n // default:\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Sign in\", xhr, context);\r\n let parsedError = JSON.parse(xhr.responseText);\r\n if (\r\n parsedError.error_description === \"User did not enter correct PIN\"\r\n ) {\r\n ResetPins();\r\n }\r\n }\r\n }\r\n };\r\n var postValues = pairs.join(\"&\");\r\n xhr.send(postValues);\r\n };\r\n\r\n const getPinVerification = (values, record, pin) => {\r\n var xhr = new XMLHttpRequest();\r\n var url =\r\n selectedregistrationType == null || selectedregistrationType == \"personal\"\r\n ? URLS.GetVerifyAPIUrl\r\n : URLS.GetVerifyByEmailAPIUrl;\r\n let verifyData = {};\r\n if (selectedregistrationType == \"business\") {\r\n verifyData.id = record.id;\r\n verifyData.userName = values.regusername;\r\n verifyData.emailComfirmed = record.emailConfirmed;\r\n verifyData.emailAddress = record.emailAddress;\r\n verifyData.reference = values.customernumber;\r\n verifyData.customerRecordNo = record.customerRecordNo;\r\n verifyData.pin = pin;\r\n } else {\r\n verifyData.id = record.id;\r\n verifyData.userName = values.regusername;\r\n verifyData.phoneConfirmed = record.phoneConfirmed;\r\n verifyData.mobileNumber = values.phone;\r\n\r\n verifyData.dateOfBirth = values.dob;\r\n\r\n verifyData.reference = values.customernumber;\r\n verifyData.customerRecordNo = record.customerRecordNo;\r\n verifyData.pin = pin;\r\n }\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n setMainScreen(true);\r\n setRegisterScreen(false);\r\n setVerifyPin(false);\r\n\r\n var xhrtoken = new XMLHttpRequest();\r\n var urltoken = URLS.GetTokenURLAPI;\r\n\r\n var valuesPost = {\r\n grant_type: \"password\",\r\n username: values.regusername,\r\n password: values.pass,\r\n validatePIN: \"false\",\r\n client_id: \"PaymentPortal\",\r\n };\r\n // eslint-disable-next-line no-case-declarations\r\n const pairs = Object.entries(valuesPost)\r\n .map(\r\n ([key, value]) =>\r\n `${encodeURIComponent(key)}=${encodeURIComponent(value)}`\r\n )\r\n .join(\"&\");\r\n\r\n xhrtoken.open(\"POST\", urltoken, true);\r\n xhrtoken.setRequestHeader(\r\n \"Content-Type\",\r\n \"application/x-www-form-urlencoded\"\r\n );\r\n xhrtoken.onreadystatechange = function() {\r\n if (xhrtoken.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n var json = JSON.parse(xhrtoken.responseText);\r\n var access_token = json.access_token;\r\n var refresh_token = json.refresh_token;\r\n var expires_in_seconds = json.expires_in;\r\n var timeoutDate;\r\n timeoutDate = new Date();\r\n timeoutDate.setSeconds(\r\n timeoutDate.getSeconds() + expires_in_seconds\r\n );\r\n sessionStorage.setItem(\"expiresAt\", timeoutDate);\r\n sessionStorage.setItem(\"access_token\", access_token);\r\n sessionStorage.setItem(\"refresh_token\", refresh_token);\r\n\r\n getMenu();\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\r\n // \"Login\",\r\n // JSON.parse(xhrtoken.responseText).error_description\r\n // );\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\"Login\", xhrtoken.responseText);\r\n\r\n // break;\r\n } else {\r\n ApiErrorHandler(\"Sign in\", xhr, context);\r\n }\r\n }\r\n };\r\n xhrtoken.send(pairs);\r\n // break;\r\n // case 404:\r\n // context.stateInfoDialog(\r\n // \"Verify Pin\",\r\n // JSON.parse(xhr.responseText).message\r\n // );\r\n // break;\r\n // default:\r\n // context.stateInfoDialog(\r\n // \"Verify Pin\",\r\n // JSON.parse(xhr.responseText).message\r\n // );\r\n // break;\r\n } else {\r\n ApiErrorHandler(\" Verify PIN\", xhr, context);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(JSON.stringify(verifyData));\r\n };\r\n\r\n const LoginForm = useFormik({\r\n initialValues: {\r\n username: \"\",\r\n password: \"\",\r\n firstValue: \"\",\r\n secondValue: \"\",\r\n thirdValue: \"\",\r\n },\r\n onSubmit: (values) => {\r\n Logon(values, firstDigitValue, secondDigitValue, thirdDigitValue);\r\n },\r\n });\r\n React.useEffect(() => {\r\n if (\r\n document.activeElement !== focusUsername &&\r\n document.activeElement !== focusPass\r\n ) {\r\n if (\r\n LoginForm.values.firstValue.length !== 1 &&\r\n (LoginForm.values.secondValue.length === 1 ||\r\n LoginForm.values.thirdValue.length === 1)\r\n ) {\r\n focusFirst.focus();\r\n }\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length !== 1\r\n ) {\r\n focusSecond.focus();\r\n }\r\n\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length === 1 &&\r\n LoginForm.values.thirdValue.length !== 1\r\n ) {\r\n focusThird.focus();\r\n }\r\n if (\r\n LoginForm.values.firstValue.length === 1 &&\r\n LoginForm.values.secondValue.length === 1 &&\r\n LoginForm.values.thirdValue.length === 1\r\n ) {\r\n var isFocused =\r\n document.activeElement === focusSecond ||\r\n document.activeElement === focusFirst ||\r\n document.activeElement === focusThird;\r\n if (isFocused) {\r\n focusButton.focus();\r\n }\r\n }\r\n }\r\n }, [LoginForm.values]);\r\n const verifyPinForm = useFormik({\r\n initialValues: {\r\n pinnum: \"\",\r\n },\r\n onSubmit: (values) => {\r\n getPinVerification(registerValues, retruevedUser, values.pinnum);\r\n },\r\n });\r\n const changePinForm = useFormik({\r\n initialValues: {\r\n OldPin: \"\",\r\n NewPin: \"\",\r\n ConfirmPIN: \"\",\r\n SecurityCode: \"\",\r\n Reference: \"\",\r\n MobileNumber: \"\",\r\n DateOfBirth: \"\",\r\n },\r\n onSubmit: (values) => {},\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\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n verified_user Make a payment towards your\r\n account\r\n
\r\n \r\n verified_user View your account online\r\n
\r\n \r\n verified_user Choose your own payment plans\r\n
\r\n\r\n \r\n verified_user Talk to us, we can help!\r\n
\r\n \r\n {firstDigitName} DIGIT OF PIN\r\n
\r\n\r\n {secondDigitName} DIGIT OF PIN\r\n
\r\n\r\n {thirdDigitName} DIGIT OF PIN\r\n
\r\n\r\n \r\n SIGN IN\r\n \r\n
\r\n\r\n \r\n {\"Don’t have account? Sign up\"}{\" \"}\r\n registerClick(null)}\r\n className={classes.LinkHome}\r\n color=\"inherit\"\r\n >\r\n {\" \"}\r\n here.\r\n \r\n
\r\n \r\n ResetPinAndPasswordClick()}\r\n className={classes.LinkHome}\r\n color=\"inherit\"\r\n >\r\n {\" \"}\r\n Forgotten Password/Username\r\n \r\n
\r\n \r\n {\"Can't Sign in? Call \" + phonenumber}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {resetPinscreen\r\n ? \"Forgotten Password/Username\"\r\n : \"Create Account\"}{\" \"}\r\n
\r\n\r\n Fill in the form below to get instant access.\r\n
\r\n {registrationType == \"both\" ||\r\n registrationType == \"bothdob\" ? (\r\n\r\n \r\n
\r\n \r\n \r\n Back to login\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Verify Pin
\r\n\r\n Please enter the PIN number you received via{\" \"}\r\n {selectedregistrationType == null ||\r\n selectedregistrationType == \"personal\"\r\n ? \"SMS\"\r\n : \"email\"}\r\n
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n Back to login\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Back to login\r\n \r\n \r\n \r\n \r\n \r\n
\r\n The user is not Not Found
\r\n\r\n \r\n Information \r\n \r\n \r\n {alertText}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n}\r\n","import {\r\n defaultFont,\r\n primaryColor,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n roseColor,\r\n grayColor\r\n} from \"assets/jss/xrs.js\";\r\n\r\nconst typographyStyle = {\r\n defaultFontStyle: {\r\n ...defaultFont,\r\n fontSize: \"14px\"\r\n },\r\n defaultHeaderMargins: {\r\n marginTop: \"20px\",\r\n marginBottom: \"10px\"\r\n },\r\n quote: {\r\n padding: \"10px 20px\",\r\n margin: \"0 0 20px\",\r\n fontSize: \"1.25rem\",\r\n borderLeft: \"5px solid \" + grayColor[2]\r\n },\r\n quoteText: {\r\n margin: \"0 0 10px\",\r\n fontStyle: \"italic\"\r\n },\r\n quoteAuthor: {\r\n display: \"block\",\r\n fontSize: \"80%\",\r\n lineHeight: \"1.42857143\",\r\n color: grayColor[10]\r\n },\r\n mutedText: {\r\n \"&, & *\": {\r\n color: grayColor[7],\r\n display: \"inline-block\"\r\n }\r\n },\r\n primaryText: {\r\n \"&, & *\": {\r\n color: primaryColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n infoText: {\r\n \"&, & *\": {\r\n color: infoColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n successText: {\r\n \"&, & *\": {\r\n color: successColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n warningText: {\r\n \"&, & *\": {\r\n color: warningColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n dangerText: {\r\n \"&, & *\": {\r\n color: dangerColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n roseText: {\r\n \"&, & *\": {\r\n color: roseColor[0],\r\n display: \"inline-block\"\r\n }\r\n },\r\n smallText: {\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\",\r\n color: grayColor[10]\r\n }\r\n};\r\n\r\nexport default typographyStyle;\r\n","import React from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport styles from \"assets/jss/xrs/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Success(props) {\r\n const { children } = props;\r\n const classes = useStyles();\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\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n verified_user Make a payment towards your\r\n account{\" \"}\r\n
\r\n \r\n verified_user View your account online\r\n
\r\n\r\n \r\n verified_user Choose your own payment plans\r\n
\r\n\r\n \r\n verified_user Talk to us, we can help!\r\n
\r\n \r\n {firstDigitName} DIGIT OF PIN\r\n
\r\n\r\n {secondDigitName} DIGIT OF PIN\r\n
\r\n\r\n {thirdDigitName} DIGIT OF PIN\r\n
\r\n\r\n \r\n SIGN IN\r\n \r\n
\r\n\r\n \r\n {\"Don’t have account? Sign up\"}{\" \"}\r\n registerClick(null)}\r\n className={classes.LinkHome}\r\n color=\"inherit\"\r\n >\r\n {\" \"}\r\n here.\r\n \r\n
\r\n \r\n ResetPinAndPasswordClick(null)}\r\n className={classes.LinkHome}\r\n color=\"inherit\"\r\n >\r\n {\" \"}\r\n Forgotten Password/Username\r\n \r\n
\r\n \r\n {\"Can't Sign in? Call \" + phonenumber}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {resetPinscreen\r\n ? \"Forgotten Password/Username\"\r\n : \"Create Account\"}{\" \"}\r\n
\r\n\r\n Fill in the form below to get instant access.\r\n
\r\n {registrationType == \"both\" ||\r\n registrationType == \"bothdob\" ? (\r\n\r\n \r\n
\r\n \r\n \r\n Back to login\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Verify Pin
\r\n\r\n Please enter the PIN number you received via{\" \"}\r\n {selectedregistrationType == null ||\r\n selectedregistrationType == \"personal\"\r\n ? \"SMS\"\r\n : \"email\"}\r\n
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n Back to login\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Back to login\r\n \r\n \r\n \r\n \r\n \r\n
\r\n The user is not Not Found
\r\n\r\n {children}\r\n
\r\n );\r\n}\r\n\r\nSuccess.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import {\r\n primaryColor,\r\n primaryDarkColor,\r\n successColor,\r\n dangerColor,\r\n primaryBoxShadow,\r\n} from \"assets/jss/xrs.js\";\r\nconst fabStyle = {\r\n fabCameraContainer: {\r\n position: \"fixed\",\r\n bottom: \"50px\",\r\n left: \"50%\",\r\n marginLeft: \"-40px\",\r\n zIndex: \"999\",\r\n cursor: \"pointer\",\r\n },\r\n fabReturnContainer: {\r\n position: \"fixed\",\r\n bottom: \"50px\",\r\n marginLeft: \"-30px\",\r\n\r\n left: \"30%\",\r\n zIndex: \"999\",\r\n cursor: \"pointer\",\r\n },\r\n fabChangeCameraContainer: {\r\n position: \"fixed\",\r\n bottom: \"50px\",\r\n left: \"70%\",\r\n marginLeft: \"-30px\",\r\n\r\n zIndex: \"999\",\r\n cursor: \"pointer\",\r\n },\r\n fabIconHolder: {\r\n width: \"50px\",\r\n height: \"50px\",\r\n borderRadius: \"100%\",\r\n background: \"#016fb9\",\r\n boxShadow: \"0 6px 20px rgba(0,0,0,0.2)\",\r\n \"&:hover,&:focus\": {\r\n backgroundColor: primaryColor[0],\r\n ...primaryBoxShadow,\r\n },\r\n \"& i\": {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n height: \"100%\",\r\n fontStyle: \"25px\",\r\n color: \"#ffffff\",\r\n },\r\n },\r\n fab: {\r\n \"&:hover,&:focus\": {\r\n backgroundColor: primaryColor[0],\r\n },\r\n width: \"80px\",\r\n height: \"80px\",\r\n backgroundColor: primaryDarkColor[0],\r\n },\r\n fabReturn: {\r\n \"&:hover,&:focus\": {\r\n backgroundColor: primaryColor[0],\r\n },\r\n width: \"60px\",\r\n height: \"60px\",\r\n backgroundColor: primaryDarkColor[0],\r\n },\r\n fabLike: {\r\n \"&:hover,&:focus\": {\r\n backgroundColor: successColor[5],\r\n ...primaryBoxShadow,\r\n },\r\n width: \"60px\",\r\n height: \"60px\",\r\n backgroundColor: successColor[0],\r\n },\r\n fabDislike: {\r\n \"&:hover,&:focus\": {\r\n backgroundColor: dangerColor[5],\r\n ...primaryBoxShadow,\r\n },\r\n width: \"60px\",\r\n height: \"60px\",\r\n backgroundColor: dangerColor[0],\r\n },\r\n};\r\nexport default fabStyle;\r\n","import React from \"react\";\r\nimport styles from \"assets/jss/xrs/components/fabCameraStyle.js\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport CommentOutlinedIcon from \"@material-ui/icons/CommentOutlined\";\r\nimport InsertDriveFileOutlinedIcon from \"@material-ui/icons/InsertDriveFileOutlined\";\r\nimport CameraAltIcon from \"@material-ui/icons/CameraAlt\";\r\nimport FlipToFrontIcon from \"@material-ui/icons/FlipToFront\";\r\nimport KeyboardReturnIcon from \"@material-ui/icons/KeyboardReturn\";\r\nimport DoneIcon from \"@material-ui/icons/Done\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\n\r\nimport { cameraActions } from \"../../store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { isMobile } from \"react-device-detect\";\r\nconst useStyles = makeStyles(styles);\r\nexport default function FabOpenedCamera({ changeCamera, capturePicture }) {\r\n const classes = useStyles();\r\n const openCamera = useSelector((state) => state.CameraReducer.openFrom);\r\n const image = useSelector((state) => state.CameraReducer.capturedImage);\r\n const documents = useSelector((state) => state.CameraReducer.confirmedImages);\r\n const uploadimagestobudget = useSelector(\r\n (state) => state.GetSiteDetailsReducer.uploadimagestobudget\r\n );\r\n const [numberOfCameras, setNumberOfCameras] = React.useState(0);\r\n function closeFullscreen() {\r\n if (document.exitFullscreen) {\r\n document.exitFullscreen();\r\n } else if (document.webkitExitFullscreen) {\r\n /* Safari */\r\n document.webkitExitFullscreen();\r\n } else if (document.msExitFullscreen) {\r\n /* IE11 */\r\n document.msExitFullscreen();\r\n }\r\n }\r\n React.useEffect(() => {\r\n if (uploadimagestobudget && isMobile) {\r\n navigator.mediaDevices.getUserMedia({ video: true });\r\n navigator.mediaDevices.enumerateDevices().then((devices) => {\r\n var amount = 0;\r\n devices.map((item) => {\r\n if (item.kind === \"videoinput\") {\r\n amount++;\r\n }\r\n });\r\n\r\n setNumberOfCameras(amount);\r\n });\r\n }\r\n }, []);\r\n\r\n const dispatch = useDispatch();\r\n if (openCamera === \"\" ? false : true) {\r\n if (image === \"\") {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {numberOfCameras > 1 ? (\r\n \r\n \r\n
\r\n \r\n ) : null}\r\n \r\n );\r\n } else {\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 } else return null;\r\n}\r\n","import React from \"react\";\r\nimport Webcam from \"react-webcam\";\r\nimport FabOpenedCamera from \"components/Fab/FabOpenedCamera.js\";\r\nimport { cameraActions } from \"../../store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nconst videoConstraints = {\r\n facingMode: \"environment\",\r\n};\r\n\r\nconst CustomCamera = () => {\r\n const webcamRef = React.useRef(null);\r\n const image = useSelector((state) => state.CameraReducer.capturedImage);\r\n const dispatch = useDispatch();\r\n const [changeCamera, setChangeCamera] = React.useState(false);\r\n const size = useWindowSize();\r\n\r\n const isLandscape = size.height <= size.width;\r\n const ratio = isLandscape\r\n ? size.width / size.height\r\n : size.width / size.height;\r\n\r\n const capture = React.useCallback(() => {\r\n const imageSrc = webcamRef.current.getScreenshot();\r\n dispatch(cameraActions.setCapturedImage(imageSrc));\r\n }, [webcamRef]);\r\n const switchCamera = () => {\r\n setChangeCamera(!changeCamera);\r\n\r\n if (!changeCamera === true) {\r\n videoConstraints.facingMode = \"user\";\r\n } else {\r\n videoConstraints.facingMode = \"environment\";\r\n }\r\n };\r\n return (\r\n <>\r\n {image === \"\" ? (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n","const quickPaymentStyle = {\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n visible: {\r\n display: \"box\",\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n Title: {\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n blue: {\r\n backgroundColor: \"#0065a4\",\r\n borderRadius: 0,\r\n color: \"#ffffff\",\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 18,\r\n },\r\n green: {\r\n backgroundColor: \"#ffffff;\",\r\n borderRadius: 0,\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 19,\r\n paddingTop: 30,\r\n color: \"#0065a4\",\r\n },\r\n blueBox: {\r\n paddingLeft: 50,\r\n paddingRight: 50,\r\n paddingBottom: 10,\r\n borderRadius: 4,\r\n },\r\n DiscountBlue: {\r\n color: \"#0065a4\",\r\n textAlign: \"center\",\r\n paddingTop: 10,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountGreen: {\r\n color: \"#4caf50\",\r\n textAlign: \"center\",\r\n padding: 25,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountItem: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 16,\r\n backgroundColor: \"#e6f2e6\",\r\n Border: \"none\",\r\n borderRadius: 4,\r\n },\r\n DiscountItemRed: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 16,\r\n backgroundColor: \"#ffe5e5\",\r\n Border: \"none\",\r\n borderRadius: 4,\r\n },\r\n AmmountItemRed: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 40,\r\n backgroundColor: \"#ffe5e5\",\r\n Border: \"none\",\r\n Radiusradius: 4,\r\n },\r\n AmmountItem: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 40,\r\n backgroundColor: \"#e6f2e6\",\r\n Border: \"none\",\r\n Radiusradius: 4,\r\n },\r\n footer: {\r\n backgroundColor: \"#4caf50\",\r\n fontSize: 16,\r\n padding: 14,\r\n color: \"#fff\",\r\n borderRadius: 4,\r\n textAlign: \"center\",\r\n },\r\n footerRed: {\r\n backgroundColor: \"#990000\",\r\n fontSize: 16,\r\n padding: 14,\r\n color: \"#fff\",\r\n borderRadius: 4,\r\n textAlign: \"center\",\r\n },\r\n hidden: {\r\n display: \"none\",\r\n },\r\n textButton: {\r\n textTransform: \"none\",\r\n width: \"100%\",\r\n },\r\n box: {\r\n paddingLeft: 20,\r\n paddingRight: 20,\r\n backgroundColor: \"white\",\r\n },\r\n middle: {\r\n width: \"500px\",\r\n },\r\n};\r\n\r\nexport default quickPaymentStyle;\r\n","import classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport quickPaymentStyle from \"../../assets/jss/xrs/views/quickPaymentStyle\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport { useFormik } from \"formik\";\r\nimport { getSiteDetailsActions } from \"store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\n\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport FooterSection from \"../SectionsPage/Sections/FooterSection.js\";\r\nimport HeaderSection from \"../SectionsPage/Sections/HeaderSection.js\";\r\nimport LinkSection from \"../SectionsPage/Sections/LinksSection.js\";\r\nimport TextField from \"components/CustomInput/CustomInput.js\";\r\nimport Iframe from \"react-iframe\";\r\nimport fnmoment from \"moment\";\r\nimport queryString from \"query-string\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport CheckBoxIcon from \"@material-ui/icons/CheckBox\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport React, { useContext } from \"react\";\r\nimport Context from \"../../utils/context\";\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\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\r\nimport Fade from \"@material-ui/core/Fade\";\r\n\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { set } from \"date-fns\";\r\nimport { Hidden } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\nconst useStyles1 = makeStyles(quickPaymentStyle);\r\nexport default function QuickPayPaymentStatus(props) {\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n\r\n const [page, setPage] = React.useState(1);\r\n const [ifamevisible, setIfamevisible] = React.useState(false);\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n const [authcode, setAuthcode] = React.useState(\"\");\r\n const [message, setMessage] = React.useState(\"\");\r\n const [resultcode, setResultCode] = React.useState(\"\");\r\n const [ammount, setAmmount] = React.useState(\"\");\r\n const [passref, setPassref] = React.useState(\"\");\r\n const dispatch = useDispatch();\r\n const context = useContext(Context);\r\n const [paymentstatustext, setpaymentstatustext] = React.useState(\"\");\r\n\r\n const [vissibleSucc, setVissibleSucc] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n }, []);\r\n React.useEffect(() => {\r\n const parsed = queryString.parse(props.location.search);\r\n setAmmount(parsed.AMOUNT);\r\n setMessage(parsed.MESSAGE);\r\n setAuthcode(parsed.AUTHCODE);\r\n setPassref(parsed.PASSREF);\r\n setResultCode(parsed.RESULTCODE);\r\n\r\n if (parsed.RESULTCODE == \"00\") {\r\n setVissibleSucc(true);\r\n } else {\r\n setVissibleSucc(false);\r\n }\r\n\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Welcome Details\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(getSiteDetailsActions.currency(response.sitecurrency));\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n setpaymentstatustext(response.paymentstatustext);\r\n\r\n var date = fnmoment(new Date()).add(-110, \"years\");\r\n var maxdate = fnmoment(new Date()).add(-16, \"years\");\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n }\r\n });\r\n }, [page]);\r\n\r\n const classes = useStyles();\r\n const classes1 = useStyles1();\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 \r\n \r\n \r\n \r\n
\r\n {ReactHtmlParser(termsApiText)}\r\n \r\n \r\n \r\n \r\n
\r\n {ReactHtmlParser(termsApiText)}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {paymentProvider.toUpperCase() == \"TABAPAY\" ? (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\" \"}\r\n \r\n {useSSN != \"Y\" ? (\r\n \r\n \r\n ) : selectedregistrationType == 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 {termsText} Terms and Conditions\r\n \r\n \r\n
\r\n Pay Now
\r\n {quickPayText != \"\" ? (\r\n ReactHtmlParser(quickPayText)\r\n ) : (\r\n <>\r\n {\" \"}\r\nFill in the form with your account details.
\r\n\r\n You will then be redirected to a secure payment\r\n page to complete the payment.\r\n
\r\n \r\n )}\r\n\r\n {registrationType == \"both\" ? (\r\n\r\n \r\n Debit amount is{\" \"}\r\n \r\n \r\n {currency + \" \"}\r\n {formik.values.amount\r\n ? formik.values.amount + convenienceFee\r\n : 0}\r\n \r\n
\r\n )}\r\n \r\n \r\n PAY NOW\r\n \r\n \r\n REALEX NOW\r\n \r\n
\r\n \r\n \r\n {ReactHtmlParser(termsApiText)}\r\n
\r\n {ReactHtmlParser(termsApiText)}\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import Paper from \"@material-ui/core/Paper\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport DoneOutlineIcon from \"@material-ui/icons/DoneOutline\";\r\nimport clsx from \"clsx\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport queryString from \"query-string\";\r\nimport React, { useContext } from \"react\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport Context from \"../../utils/context\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport BlueHeader from \"../SectionsPage/Sections/BlueHeaderSection.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport * as ACTIONS from \"../../store/actions/actions\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\n\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n} from \"../../store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Hidden } from \"@material-ui/core\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n button: {\r\n marginRight: theme.spacing(1),\r\n padding: 13,\r\n },\r\n instructions: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 60,\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n cardNOBORDER: {\r\n border: 0,\r\n },\r\n Middle: {\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n border: 0,\r\n },\r\n blueText: {\r\n color: \"#0065a4\",\r\n fontWeight: 300,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n BoxFull: {\r\n width: \"100%\",\r\n },\r\n rightValues: {\r\n textAlign: \"right\",\r\n fontWeight: 300,\r\n },\r\n}));\r\nexport default function PayNowPaymentStatus(props) {\r\n const dispatch = useDispatch();\r\n\r\n const [authcode, setAuthcode] = React.useState(\"\");\r\n const [message, setMessage] = React.useState(\"\");\r\n //const [resultcode, setResultCode] = React.useState(\"\");\r\n const [ammount, setAmmount] = React.useState(\"\");\r\n const [passref, setPassref] = React.useState(\"0000000000\");\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n\r\n const [vissibleSucc, setVissibleSucc] = React.useState(false);\r\n const context = useContext(Context);\r\n const stateSelectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n const paymentStatusFrom = useSelector(\r\n (state) => state.SiteReducer.paymentStatusFrom\r\n );\r\n const [paymentstatustext, setpaymentstatustext] = React.useState(\"\");\r\n\r\n const style = {\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n visible: {\r\n display: \"box\",\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n Title: {\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n blue: {\r\n backgroundColor: \"#0065a4\",\r\n borderRadius: 0,\r\n color: \"#ffffff\",\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 18,\r\n },\r\n green: {\r\n backgroundColor: \"#ffffff;\",\r\n borderRadius: 0,\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 19,\r\n paddingTop: 30,\r\n color: \"#0065a4\",\r\n },\r\n red: {\r\n backgroundColor: \"#ffffff;\",\r\n borderRadius: 0,\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 19,\r\n paddingTop: 30,\r\n color: \"#ff0000\",\r\n },\r\n blueBox: {\r\n paddingLeft: 50,\r\n paddingRight: 50,\r\n paddingBottom: 10,\r\n borderRadius: 4,\r\n },\r\n DiscountBlue: {\r\n color: \"#0065a4\",\r\n textAlign: \"center\",\r\n paddingTop: 10,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountGreen: {\r\n color: \"#4caf50\",\r\n textAlign: \"center\",\r\n padding: 25,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountItem: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 16,\r\n backgroundColor: \"#e6f2e6\",\r\n Border: \"none\",\r\n borderRadius: 4,\r\n },\r\n GreenTick: {\r\n color: \"#4caf50\",\r\n },\r\n RedTick: {\r\n color: \"#990000\",\r\n },\r\n\r\n DiscountItemRed: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 16,\r\n backgroundColor: \"#ffe5e5\",\r\n Border: \"none\",\r\n borderRadius: 4,\r\n },\r\n AmmountItem: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 40,\r\n backgroundColor: \"#e6f2e6\",\r\n Border: \"none\",\r\n Radiusradius: 4,\r\n },\r\n AmmountItemRed: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 40,\r\n backgroundColor: \"#ffe5e5\",\r\n Border: \"none\",\r\n Radiusradius: 4,\r\n },\r\n footer: {\r\n backgroundColor: \"#4caf50\",\r\n fontSize: 16,\r\n padding: 14,\r\n color: \"#fff\",\r\n borderRadius: 4,\r\n textAlign: \"center\",\r\n },\r\n footerRed: {\r\n backgroundColor: \"#990000\",\r\n fontSize: 16,\r\n padding: 14,\r\n color: \"#fff\",\r\n borderRadius: 4,\r\n textAlign: \"center\",\r\n },\r\n hidden: {\r\n display: \"none\",\r\n },\r\n textButton: {\r\n textTransform: \"none\",\r\n width: \"100%\",\r\n },\r\n box: {\r\n paddingLeft: 20,\r\n paddingRight: 20,\r\n backgroundColor: \"white\",\r\n },\r\n middle: {\r\n width: \"500px\",\r\n },\r\n };\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n }, []);\r\n React.useEffect(() => {\r\n const parsed = queryString.parse(props.location.search);\r\n\r\n setAmmount(parsed.AMOUNT);\r\n setMessage(parsed.MESSAGE);\r\n\r\n setAuthcode(parsed.AUTHCODE);\r\n // setPassref(parsed.PASSREF);\r\n // setResultCode(parsed.RESULTCODE);\r\n if (parsed.RESULTCODE == \"00\") {\r\n setVissibleSucc(true);\r\n } else {\r\n setVissibleSucc(false);\r\n }\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Welcome Details\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then(\r\n (data) => {\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n if (data.customer.cardastdigits == null) {\r\n setPassref(\"000000\");\r\n } else {\r\n setPassref(data.customer.cardastdigits);\r\n }\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(data.activeAccounts[0].viewacccounttext)\r\n );\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n data.activeAccounts.map((account, index) => {\r\n if (stateSelectedAccount.recno == account.recno) {\r\n dispatch(ACTIONS.set_selectedAccount(account));\r\n }\r\n });\r\n },\r\n [0]\r\n )\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Welcome Details\", error, context);\r\n }\r\n });\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n setpaymentstatustext(response.paymentstatustext);\r\n });\r\n }, []);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n\r\n const useStyles1 = makeStyles(style);\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const classes1 = useStyles1();\r\n\r\n const [termsApiText, setTermsApiText] = React.useState(\"\");\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Did you know?\r\n \r\n \r\n {ReactHtmlParser(paymentstatustext)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Thank you for your payment of:\r\n
\r\n\r\n
\r\n Your Auth Code is:\r\n
\r\n{authcode}
\r\n\r\n\r\n Your account has been updated to reflect this\r\n transaction.\r\n
\r\n\r\n Your payment of:\r\n
\r\n\r\n {currency + \" \" + ammount}\r\n
\r\n\r\n\r\n Your payment has not been taken!.\r\n
\r\n\r\n Thank you for your payment of:\r\n
\r\n\r\n
\r\n Your Auth Code is:\r\n
\r\n{authcode}
\r\n\r\n\r\n Your account has been updated to reflect this\r\n transaction.\r\n
\r\n\r\n Your payment of:\r\n
\r\n\r\n {currency + \" \" + ammount}\r\n
\r\n\r\n\r\n Your payment has not been taken!.\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n SUCCESS{\" \"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {message}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {paymentStatusFrom ? (\r\n \r\n \r\n Did you know?\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}\r\n","import React, { useContext } from \"react\";\r\nimport history from \"../../utils/history\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport { useFormik } from \"formik\";\r\n\r\nimport TextField from \"components/CustomInput/CustomInput.js\";\r\nimport Iframe from \"react-iframe\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport clsx from \"clsx\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport ReactHtmlParser, {\r\n processNodes,\r\n convertNodeToElement,\r\n htmlparser2,\r\n} from \"react-html-parser\";\r\n\r\nimport PayNow from \"../SectionsPage/Sections/PayNowSection.js\";\r\n\r\nimport html2canvas from \"html2canvas\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport BlueHeader from \"../SectionsPage/Sections/BlueHeaderSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { el } from \"date-fns/locale\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nexport default function PayNowPage(props) {\r\n const classes2 = useStyles2();\r\n const context = useContext(Context);\r\n const [page, setPage] = React.useState(1);\r\n\r\n return (\r\n \r\n Thank you for your payment of:\r\n
\r\n\r\n
Payment method:
\r\n\r\n\r\n Card ending in **\r\n {passref != null ? passref.slice(-2) : \"\"}\r\n
\r\n\r\n\r\n Your Auth Code is:\r\n
\r\n{authcode}
\r\n\r\n\r\n Your account has been updated to reflect this\r\n transaction.\r\n
\r\n\r\n Your payment of:\r\n
\r\n\r\n
\r\n Your payment has not been taken!.\r\n
\r\n\r\n {ReactHtmlParser(paymentstatustext)}\r\n
\r\n\r\n \r\n \r\n\r\n
\r\n );\r\n}\r\n","import imagesStyles from \"../../imagesStyles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst viewOfferSectionsStyle = {\r\n ...imagesStyles,\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n visible: {\r\n display: \"box\",\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: primaryColor[20],\r\n fontWeight: 400,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n blue: {\r\n backgroundColor: \"#0065a4\",\r\n borderRadius: 0,\r\n color: \"#ffffff\",\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 18,\r\n },\r\n green: {\r\n backgroundColor: \"#4caf50;\",\r\n borderRadius: 0,\r\n color: \"#ffffff\",\r\n padding: 10,\r\n textAlign: \"center\",\r\n fontWeight: 500,\r\n fontSize: 18,\r\n },\r\n blueBox: {\r\n borderRadius: 0,\r\n margin: 10,\r\n },\r\n DiscountBlue: {\r\n color: \"#0065a4\",\r\n textAlign: \"center\",\r\n padding: 25,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountGreen: {\r\n color: \"#4caf50\",\r\n textAlign: \"center\",\r\n padding: 25,\r\n fontWeight: 500,\r\n fontSize: 16,\r\n },\r\n DiscountItem: {\r\n textAlign: \"center\",\r\n padding: 14,\r\n fontWeight: 500,\r\n margin: 1,\r\n fontSize: 14,\r\n backgroundColor: \"#f2f7fa\",\r\n Border: \"none\",\r\n },\r\n textButton: {\r\n textTransform: \"none\",\r\n width: \"100%\",\r\n },\r\n box: {\r\n paddingLeft: 20,\r\n paddingRight: 20,\r\n backgroundColor: \"white\",\r\n },\r\n};\r\n\r\nexport default viewOfferSectionsStyle;\r\n","import { Collapse } from \"@material-ui/core\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport viewOfferSectionsStyle from \"assets/jss/xrs/views/sectionsSections/viewOfferSectionsStyle\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport React, { useContext } from \"react\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport Context from \"../../../utils/context\";\r\nimport Paynow from \"../../SectionsPage/Sections/PayNowSection.js\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst useStyles = makeStyles(viewOfferSectionsStyle);\r\nexport default function ViewOfferSection(props) {\r\n const viewOfferText = useSelector((state) => state.HtmlReducer.viewOfferText);\r\n\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [site, setSite] = React.useState(\"\");\r\n const [page, setPage] = React.useState(1);\r\n const [termsVisible, setTermsVisible] = React.useState(false);\r\n const [width, setWidth] = React.useState(0);\r\n const [message, setMessage] = React.useState(\"\");\r\n const [showDate, setShowDate] = React.useState(true);\r\n const [oneMonth, setoneMonth] = React.useState(false);\r\n\r\n const [paymentDate, setPaymentDate] = React.useState(\"\");\r\n const [screenstate, setScreenstate] = React.useState({ screenshot: \"\" });\r\n const [showQuickPay, setShowQuickPay] = React.useState(true);\r\n const [ifamevisible, setIfamevisible] = React.useState(false);\r\n const [value, setValue] = React.useState(\"card\");\r\n const stateOffer = useSelector((state) => state.OfferReducer.offer);\r\n const stateSite = useSelector((state) => state.SiteReducer.site);\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n\r\n const [refValues, setrefValues] = React.useState([]);\r\n\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const values = {\r\n OFFERID: 0,\r\n DOWNPAYMENT: 0,\r\n REMAINGBAL: 1,\r\n OFFERACCEPTEDDECLINED: \"A\",\r\n OFFERDECLINEDREASON: \"OK\",\r\n STARTDATE: \"\",\r\n FREQUENCY: \"MONTHLY\",\r\n TERM: 1,\r\n AMOUNT: 0,\r\n FINALDATE: \"\",\r\n FINALAMOUNT: 0,\r\n APPLYDISCOUNT: \"Y\",\r\n DISCOUNTOPTIONNUMBER: \"0\",\r\n SCREENSHOT: \"\",\r\n PAYERREF: \"\",\r\n CARDREF: \"\",\r\n MAXPAYDATE: \"\",\r\n };\r\n\r\n const setValues = (termsChosen) => {\r\n values.MAXPAYDATE = stateOffer.WOOFFERMAXFIRSTPAYDATE;\r\n if (termsChosen == 1) {\r\n values.REMAINGBAL =\r\n stateOffer.WOOFFER1MONTHS === 1 ? 0 : stateOffer.WOOFFER1TOTALPAYABLE;\r\n values.OFFERID = stateOffer.WOOFFERID;\r\n values.DOWNPAYMENT = stateOffer.WOOFFER1MINPAY;\r\n //values.FREQUENCY =stateOffer.WOOFFER1MONTHS;\r\n values.AMOUNT = stateOffer.WOOFFER1AMOUNT;\r\n values.FINALDATE = \"\";\r\n values.FINALAMOUNT = 0;\r\n values.DISCOUNTOPTIONNUMBER = 1;\r\n values.TERM = stateOffer.WOOFFER1MONTHS;\r\n if (stateOffer.WOOFFER1MONTHS === 1) {\r\n setoneMonth(true);\r\n }\r\n } else if (termsChosen == 2) {\r\n values.REMAINGBAL =\r\n stateOffer.WOOFFER2MONTHS === 1 ? 0 : stateOffer.WOOFFER2TOTALPAYABLE;\r\n values.TERM = stateOffer.WOOFFER2MONTHS;\r\n\r\n values.OFFERID = stateOffer.WOOFFERID;\r\n values.DOWNPAYMENT = stateOffer.WOOFFER2MINPAY;\r\n // values.FREQUENCY =stateOffer.WOOFFER2MONTHS;\r\n values.AMOUNT =\r\n stateOffer.WOOFFER2MONTHS === 1 ? 0 : stateOffer.WOOFFER2AMOUNT;\r\n values.FINALDATE = \"\";\r\n values.FINALAMOUNT = 0;\r\n values.DISCOUNTOPTIONNUMBER = 2;\r\n if (stateOffer.WOOFFER2MONTHS === 1) {\r\n setoneMonth(true);\r\n }\r\n } else if (termsChosen == 3) {\r\n values.REMAINGBAL =\r\n stateOffer.WOOFFER3MONTHS === 1 ? 0 : stateOffer.WOOFFER3TOTALPAYABLE;\r\n values.TERM = stateOffer.WOOFFER3MONTHS;\r\n\r\n values.OFFERID = stateOffer.WOOFFERID;\r\n values.DOWNPAYMENT =\r\n stateOffer.WOOFFER3MONTHS === 1\r\n ? stateOffer.WOOFFER3MINPAY\r\n : stateOffer.WOOFFER3AMOUNT; // values.FREQUENCY =stateOffer.WOOFFER3MONTHS;\r\n values.AMOUNT =\r\n stateOffer.WOOFFER3MONTHS === 1 ? 0 : stateOffer.WOOFFER3AMOUNT;\r\n values.FINALDATE = \"\";\r\n values.FINALAMOUNT = 0;\r\n values.DISCOUNTOPTIONNUMBER = 3;\r\n if (stateOffer.WOOFFER3MONTHS === 1) {\r\n setoneMonth(true);\r\n }\r\n }\r\n };\r\n\r\n function handleClickOffer1(e) {\r\n setValues(1);\r\n setrefValues(values);\r\n if (stateOffer.WOOFFER1MONTHS === 1) {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER1MINPAY).toFixed(\"2\") +\r\n \" from my card now \";\r\n setMessage(text);\r\n setShowDate(false);\r\n setTermsVisible(true);\r\n } else {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER1MINPAY).toFixed(\"2\") +\r\n \" from my card now, followed by \" +\r\n stateOffer.WOOFFER1MONTHS +\r\n \" recurring monthly payments of \" +\r\n currency +\r\n stateOffer.WOOFFER1AMOUNT +\r\n \" and starting on \";\r\n setMessage(text);\r\n setTermsVisible(true);\r\n }\r\n }\r\n function handleClickOffer2(e) {\r\n setValues(2);\r\n setrefValues(values);\r\n\r\n if (stateOffer.WOOFFER2MONTHS === 1) {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER2MINPAY).toFixed(\"2\") +\r\n \" from my card now \";\r\n setMessage(text);\r\n setShowDate(false);\r\n\r\n setTermsVisible(true);\r\n } else {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER2MINPAY).toFixed(\"2\") +\r\n \" from my card now, followed by \" +\r\n stateOffer.WOOFFER2MONTHS +\r\n \" recurring monthly payments of \" +\r\n currency +\r\n stateOffer.WOOFFER2AMOUNT +\r\n \" and starting on \";\r\n setMessage(text);\r\n setTermsVisible(true);\r\n }\r\n }\r\n function handleClickOffer3(e) {\r\n setValues(3);\r\n setrefValues(values);\r\n\r\n if (stateOffer.WOOFFER3MONTHS === 1) {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER3MINPAY).toFixed(\"2\") +\r\n \" from my card now \";\r\n setMessage(text);\r\n setShowDate(false);\r\n\r\n setTermsVisible(true);\r\n } else {\r\n var text =\r\n \"I agree to pay \" +\r\n site.companyname +\r\n \" \" +\r\n currency +\r\n Number.parseFloat(stateOffer.WOOFFER3MINPAY).toFixed(\"2\") +\r\n \" from my card now, followed by \" +\r\n stateOffer.WOOFFER3MONTHS +\r\n \" recurring monthly payments of \" +\r\n currency +\r\n stateOffer.WOOFFER3AMOUNT +\r\n \" and starting on \";\r\n setMessage(text);\r\n setTermsVisible(true);\r\n }\r\n }\r\n function handleBackToOffers(e) {\r\n setTermsVisible(false);\r\n }\r\n const handlePayDateChange = (e) => {\r\n setPaymentDate(e.target.value);\r\n };\r\n\r\n React.useEffect(() => {\r\n setSite(stateSite);\r\n }, []);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {viewOfferText}\r\n \r\n {stateOffer.WOOFFER1MONTHS === 0 ? null : (\r\n \r\n \r\n \r\n {stateOffer.WOOFFER1TEXT}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {stateOffer.WOOFFER2MONTHS === 0 ? null : (\r\n \r\n \r\n \r\n {stateOffer.WOOFFER2TEXT}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {stateOffer.WOOFFER3MONTHS === 0 ? null : (\r\n \r\n \r\n \r\n {stateOffer.WOOFFER3TEXT}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n\r\n \r\n {termsVisible ? (\r\n \r\n ) : null}\r\n \r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport clsx from \"clsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport React, { useContext } from \"react\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport Context from \"../../utils/context\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport ViewOfferSection from \"../SectionsPage/Sections/ViewOfferSection.js\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport * as ACTIONS from \"../../store/actions/actions\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n} from \"../../store/redux/redux-actions/redux_actions\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\nexport default function ViewOfferPage(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const dispatch = useDispatch();\r\n\r\n const context = useContext(Context);\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n const stateSelectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n\r\n React.useEffect(() => {\r\n var account;\r\n var newDate = new Date();\r\n account = JSON.stringify({\r\n ITEMCODE: stateSelectedAccount.itemcode,\r\n RECNO: stateSelectedAccount.recno,\r\n STARTDATE: newDate,\r\n ENDDATE: newDate,\r\n });\r\n\r\n fetch(URLS.GetReturnAPIUrl, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: account,\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Return API\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n\r\n .then((data) => {\r\n dispatch(ACTIONS.set_Offer(data));\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Return API\", error, context);\r\n }\r\n });\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Welcome Details\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(data.activeAccounts[0].createbudgettext)\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(data.activeAccounts[0].viewacccounttext)\r\n );\r\n\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Welcome Details\", error, context);\r\n }\r\n });\r\n }, []);\r\n\r\n return (\r\n \r\n {stateOffer.WOOFFER1DISCOUNTPERCENT + \" % Discount\"}\r\n
\r\n\r\n Total To Pay:\r\n
\r\n Discount Value:\r\n
\r\n {stateOffer.WOOFFER1MONTHS === 1\r\n ? \"One payment\"\r\n : \"Term: \" + stateOffer.WOOFFER1MONTHS + \" Months\"}\r\n
\r\n\r\n\r\n Down Payment:\r\n
\r\n {stateOffer.WOOFFER1MONTHS === 1\r\n ? \"Recurring Amount:\"\r\n : \"Payment Amount:\"}\r\n
\r\n \r\n \r\n Proceed!\r\n \r\n \r\n
\r\n \r\n {stateOffer.WOOFFER2DISCOUNTPERCENT + \" % Discount\"}\r\n
\r\n\r\n Total To Pay:\r\n
\r\n Discount Value:\r\n
\r\n {stateOffer.WOOFFER2MONTHS === 1\r\n ? \"One payment\"\r\n : \"Term: \" + stateOffer.WOOFFER2MONTHS + \" Months\"}\r\n
\r\n\r\n\r\n Down Payment:\r\n
\r\n {stateOffer.WOOFFER2MONTHS === 1\r\n ? \"Recurring Amount:\"\r\n : \"Payment Amount:\"}\r\n
\r\n \r\n \r\n Proceed!\r\n \r\n \r\n
\r\n \r\n {stateOffer.WOOFFER3DISCOUNTPERCENT + \" % Discount\"}\r\n
\r\n\r\n Total To Pay:\r\n
\r\n Discount Value:\r\n
\r\n {stateOffer.WOOFFER3MONTHS === 1\r\n ? \"One payment\"\r\n : \"Term: \" + stateOffer.WOOFFER3MONTHS + \" Months\"}\r\n
\r\n\r\n\r\n Down Payment:\r\n
\r\n {stateOffer.WOOFFER3MONTHS === 1\r\n ? \"Recurring Amount:\"\r\n : \"Payment Amount:\"}{\" \"}\r\n
\r\n \r\n \r\n Proceed!\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n primaryColor,\r\n secondaryColor,\r\n warningColor,\r\n dangerColor,\r\n successColor,\r\n infoColor,\r\n roseColor,\r\n grayColor,\r\n} from \"assets/jss/xrs.js\";\r\nimport { whiteColor } from \"assets/jss/xrs\";\r\n\r\nconst accordionStyle = (theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n marginBottom: \"20px\",\r\n },\r\n expansionPanel: {\r\n boxShadow: \"none\",\r\n \"&:before\": {\r\n display: \"none !important\",\r\n },\r\n },\r\n expansionPanelExpanded: {\r\n margin: \"0 !important\",\r\n },\r\n expansionPanelSummary: {\r\n minHeight: \"auto !important\",\r\n backgroundColor: whiteColor,\r\n borderBottom: \"1px solid \" + grayColor[6],\r\n padding: \"15px 10px 5px 20px\",\r\n borderTopLeftRadius: \"3px\",\r\n borderTopRightRadius: \"3px\",\r\n color: primaryColor[1],\r\n },\r\n primaryExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: primaryColor[1],\r\n },\r\n },\r\n secondaryExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: primaryColor[1],\r\n },\r\n },\r\n warningExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: warningColor[0],\r\n },\r\n },\r\n dangerExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: dangerColor[0],\r\n },\r\n },\r\n successExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: successColor[0],\r\n },\r\n },\r\n infoExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: infoColor[0],\r\n },\r\n },\r\n roseExpansionPanelSummary: {\r\n \"&:hover\": {\r\n color: roseColor[0],\r\n },\r\n },\r\n expansionPanelSummaryExpaned: {\r\n \"& $expansionPanelSummaryExpandIcon\": {\r\n [theme.breakpoints.up(\"md\")]: {\r\n top: \"auto !important\",\r\n },\r\n transform: \"rotate(180deg)\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"10px !important\",\r\n },\r\n // some jss/css to make the cards look a bit better on Internet Explorer\r\n \"@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)\": {\r\n display: \"inline-block !important\",\r\n top: \"10px !important\",\r\n },\r\n },\r\n },\r\n primaryExpansionPanelSummaryExpaned: {\r\n color: primaryColor[21],\r\n },\r\n secondaryExpansionPanelSummaryExpaned: {\r\n color: secondaryColor[0],\r\n },\r\n warningExpansionPanelSummaryExpaned: {\r\n color: warningColor[0],\r\n },\r\n dangerExpansionPanelSummaryExpaned: {\r\n color: dangerColor[0],\r\n },\r\n successExpansionPanelSummaryExpaned: {\r\n color: successColor[0],\r\n },\r\n infoExpansionPanelSummaryExpaned: {\r\n color: infoColor[0],\r\n },\r\n roseExpansionPanelSummaryExpaned: {\r\n color: roseColor[0],\r\n },\r\n expansionPanelSummaryContent: {\r\n margin: \"0 !important\",\r\n },\r\n expansionPanelSummaryExpandIcon: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n top: \"auto !important\",\r\n },\r\n transform: \"rotate(0deg)\",\r\n color: \"inherit\",\r\n right: \"10px\",\r\n position: \"absolute\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"10px !important\",\r\n },\r\n // some jss/css to make the cards look a bit better on Internet Explorer\r\n \"@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)\": {\r\n display: \"inline-block !important\",\r\n },\r\n },\r\n expansionPanelSummaryExpandIconExpanded: {},\r\n title: {\r\n width: \"90%\",\r\n fontSize: \"15px\",\r\n fontWeight: \"bolder\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n color: \"inherit\",\r\n },\r\n expansionPanelDetails: {\r\n display: \"block\",\r\n padding: \"15px 0px 5px 10px\",\r\n fontSize: \".875rem\",\r\n },\r\n});\r\n\r\nexport default accordionStyle;\r\n","import React from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport ExpansionPanel from \"@material-ui/core/ExpansionPanel\";\r\nimport ExpansionPanelSummary from \"@material-ui/core/ExpansionPanelSummary\";\r\nimport ExpansionPanelDetails from \"@material-ui/core/ExpansionPanelDetails\";\r\n\r\n// @material-ui/icons\r\nimport ExpandMore from \"@material-ui/icons/ExpandMore\";\r\n\r\nimport styles from \"assets/jss/xrs/components/accordionStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Accordion(props) {\r\n const [active, setActive] = React.useState(\r\n props.active.length === undefined ? [props.active] : props.active\r\n );\r\n const [single] = React.useState(\r\n props.active.length === undefined ? true : false\r\n );\r\n\r\n React.useEffect(() => {\r\n setTimeout(() => {\r\n setActive([0]);\r\n }, 500);\r\n }, []);\r\n\r\n const handleChange = (panel) => () => {\r\n let newArray;\r\n if (single) {\r\n if (active[0] === panel) {\r\n newArray = [];\r\n } else {\r\n newArray = [panel];\r\n }\r\n } else {\r\n if (active.indexOf(panel) === -1) {\r\n newArray = [...active, panel];\r\n } else {\r\n newArray = [...active];\r\n newArray.splice(active.indexOf(panel), 1);\r\n }\r\n }\r\n setActive(newArray);\r\n };\r\n const { collapses, activeColor } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n {collapses.map((prop, key) => {\r\n return (\r\n \r\n \r\n {prop.content}\r\n \r\n \r\n );\r\n })}\r\n
\r\n );\r\n}\r\n\r\nAccordion.defaultProps = {\r\n active: -1,\r\n activeColor: \"primary\",\r\n};\r\n\r\nAccordion.propTypes = {\r\n // index of the default active collapse\r\n active: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.arrayOf(PropTypes.number),\r\n ]),\r\n collapses: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n title: PropTypes.string,\r\n content: PropTypes.node,\r\n })\r\n ).isRequired,\r\n activeColor: PropTypes.oneOf([\r\n \"primary\",\r\n \"secondary\",\r\n \"warning\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n ]),\r\n};\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport FooterSection from \"../SectionsPage/Sections/FooterSection.js\";\r\nimport HeaderSection from \"../SectionsPage/Sections/HeaderSection.js\";\r\nimport LinkSection from \"../SectionsPage/Sections/LinksSection.js\";\r\nimport Accordion from \"components/Accordion/Accordion.js\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport Context from \"../../utils/context\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport { getSiteDetailsActions } from \"../../store/redux/redux-actions/redux_actions\";\r\nimport * as ACTIONS from \"../../store/actions/actions\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\n\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\n\r\nexport default function FaqPage() {\r\n const context = useContext(Context);\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n });\r\n const dispatch = useDispatch();\r\n const [page, setPage] = React.useState(1);\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n const stateSite = useSelector((state) => state.SiteReducer.site);\r\n\r\n const createData = (title, content) => {\r\n return { title, content };\r\n };\r\n const [rowdata, setRowdata] = React.useState([]);\r\n const [site, setSite] = React.useState(\"\");\r\n\r\n const ReadContext = () => {\r\n const dataRows = [];\r\n var data = stateSite.faqs;\r\n if (data != \"NoAccounts\") {\r\n var i = 1;\r\n data.forEach((item) => {\r\n dataRows.push(\r\n createData(\r\n ReactHtmlParser(item.header),\r\n ReactHtmlParser(item.details)\r\n )\r\n );\r\n i++;\r\n setRowdata(dataRows);\r\n });\r\n }\r\n };\r\n\r\n React.useEffect(() => {\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n\r\n dispatch(ACTIONS.set_Site(response));\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n\r\n setTimeout(() => {\r\n setSite(stateSite);\r\n ReadContext();\r\n }, 100);\r\n })\r\n\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n }\r\n });\r\n }, [page]);\r\n const classes = useStyles();\r\n\r\n return (\r\n {prop.title}
\r\n \r\n\r\n \r\n \r\n
\r\n );\r\n}\r\n","import { isMobile } from \"react-device-detect\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst budgetPageStyle = (theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n});\r\n\r\nexport default budgetPageStyle;\r\n","import imagesStyles from \"../../imagesStyles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst budgetSectionStyle = {\r\n ...imagesStyles,\r\n showSummary: {\r\n display: \"visible\",\r\n },\r\n hideSummary: {\r\n display: \"none\",\r\n },\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n container: {\r\n padding: 40,\r\n },\r\n button: {\r\n textAlign: \"center\",\r\n },\r\n linkButton: {\r\n paddingLeft: \"5px\",\r\n paddingRight: \"5px\",\r\n\r\n display: \"inline\",\r\n width: 15,\r\n textAlign: \"center\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n Summary: {\r\n color: primaryColor[20],\r\n margin: 0,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n margin: 0,\r\n },\r\n TitleTop: {\r\n fontWeight: 500,\r\n margin: 0,\r\n textAlign: \"right\",\r\n },\r\n SubTitle: {\r\n fontWeight: 400,\r\n paddingTop: 0,\r\n margin: 0,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n Money: {\r\n textAlign: \"right\",\r\n },\r\n MoneyGreen: {\r\n textAlign: \"right\",\r\n color: \"#4BB543\",\r\n },\r\n Submited: {\r\n textAlign: \"left\",\r\n color: \"#4BB543\",\r\n fontSize: \"20px\",\r\n },\r\n MoneyRed: {\r\n textAlign: \"right\",\r\n color: \"#ff0033\",\r\n },\r\n FinaliseMoney: {\r\n textAlign: \"right\",\r\n },\r\n Line: {\r\n textAlign: \"right\",\r\n marginBottom: 5,\r\n marginTop: 5,\r\n },\r\n};\r\n\r\nexport default budgetSectionStyle;\r\n","import { primaryColor } from \"assets/jss/xrs.js\";\r\nconst incomeBudgetFieldsStyle = (theme) => ({\r\n controlWhite: {\r\n margin: 0,\r\n height: 40,\r\n borderRadius: 2,\r\n borderStyle: \"solid\",\r\n paddingLeft: 10,\r\n backgroundColor: \"#f5f9ff\",\r\n color: \"black\",\r\n borderColor: primaryColor[0],\r\n border: 1,\r\n },\r\n root: {\r\n width: \"100%\",\r\n margin: 0,\r\n padding: 0,\r\n },\r\n button: {\r\n marginRight: theme.spacing(1),\r\n padding: 13,\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n instructions: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 30,\r\n },\r\n whiteInfo: {\r\n color: \"white\",\r\n fontWeight: 400,\r\n paddingLeft: 0,\r\n paddingTop: 10,\r\n },\r\n whiteInfoMiddle: {\r\n color: \"white\",\r\n fontWeight: 400,\r\n paddingLeft: 0,\r\n\r\n textAlign: \"center\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n blueText: {\r\n color: \"#0065a4\",\r\n fontWeight: 300,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n BoxFull: {\r\n width: \"100%\",\r\n paddingLeft: 100,\r\n paddingRight: 100,\r\n },\r\n Middle: {\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n border: 0,\r\n },\r\n\r\n rightValues: {\r\n textAlign: \"right\",\r\n fontWeight: 300,\r\n },\r\n});\r\n\r\nexport default incomeBudgetFieldsStyle;\r\n","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport incomeBudgetFieldsStyle from \"../../assets/jss/xrs/views/incomeBudgetFieldsStyle\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport React from \"react\";\r\nimport TextField from \"../../components/CustomInput/CustomInput.js\";\r\nimport AttachFileIcon from \"@material-ui/icons/AttachFile\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport DocumentSection from \"../SectionsPage/Sections/DocumentSection.js\";\r\nimport PhotoCameraIcon from \"@material-ui/icons/PhotoCamera\";\r\nimport VisibilityIcon from \"@material-ui/icons/Visibility\";\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\n\r\nimport {\r\n cameraActions,\r\n documentsActions,\r\n} from \"../../store/redux/redux-actions/redux_actions\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { element } from \"prop-types\";\r\nlet disabledCamera = !isMobile;\r\n\r\nconst useStyles = makeStyles(incomeBudgetFieldsStyle);\r\nexport default function IncomeBudgetFields(props) {\r\n const classes = useStyles();\r\n const [selected, setSelected] = React.useState(props.selectedvalue);\r\n const [value, setValue] = React.useState(props.value);\r\n // const openDocumet = useSelector((state) => state.DocumentsReducer.open);\r\n const [openDocumet, setOpenDocumet] = React.useState(false);\r\n\r\n // const uploadedExpenses = useSelector(\r\n // (state) => state.DocumentsReducer.uploadedExpenses\r\n // );\r\n // const uploadedIncomes = useSelector(\r\n // (state) => state.DocumentsReducer.uploadedIncomes\r\n // );\r\n const documents = useSelector((state) => state.CameraReducer.confirmedImages);\r\n const [uploadedDocumet, setUploadedDocumet] = React.useState(\"\");\r\n const [cameraExist, setcameraExist] = React.useState(false);\r\n const dispatch = useDispatch();\r\n const uploadimagestobudget = useSelector(\r\n (state) => state.GetSiteDetailsReducer.uploadimagestobudget\r\n );\r\n React.useEffect(() => {\r\n if (uploadimagestobudget && isMobile) {\r\n navigator.mediaDevices.getUserMedia({ video: true });\r\n navigator.mediaDevices.enumerateDevices().then((devices) => {\r\n var amount = 0;\r\n devices.map((item) => {\r\n if (item.kind === \"videoinput\") {\r\n amount++;\r\n }\r\n });\r\n if (amount > 0) {\r\n setcameraExist(false);\r\n } else {\r\n setcameraExist(true);\r\n }\r\n });\r\n }\r\n }, []);\r\n React.useEffect(() => {\r\n if (documents.length > 0) {\r\n if (props.incomeId) {\r\n let exists = documents.find(\r\n (element) =>\r\n element.from == props.from && element.itemId == props.incomeId\r\n );\r\n\r\n if (exists) {\r\n setUploadedDocumet(exists);\r\n // setOpenDocumet(!openDocumet);\r\n } else {\r\n setUploadedDocumet(\"\");\r\n }\r\n }\r\n if (props.expenseId) {\r\n let exists = documents.find(\r\n (element) =>\r\n element.from == props.from && element.itemId == props.expenseId\r\n );\r\n\r\n if (exists) {\r\n setUploadedDocumet(exists);\r\n // setOpenDocumet(!openDocumet);\r\n } else {\r\n setUploadedDocumet(\"\");\r\n }\r\n }\r\n } else {\r\n setUploadedDocumet(\"\");\r\n }\r\n }, [documents]);\r\n\r\n const handleEvent = (event) => {\r\n if (event.target.value < 0) {\r\n setValue(0);\r\n } else {\r\n setValue(event.target.value);\r\n }\r\n props.onhandleChange(event);\r\n };\r\n const selectedhandleEvent = (event) => {\r\n setSelected(event.target.value);\r\n props.handleSelectedChange(event);\r\n };\r\n const onClick = () => {\r\n setOpenDocumet(!openDocumet);\r\n };\r\n var elem = document.documentElement;\r\n\r\n function openFullscreen() {\r\n if (elem.requestFullscreen) {\r\n elem.requestFullscreen();\r\n } else if (elem.webkitRequestFullscreen) {\r\n /* Safari */\r\n elem.webkitRequestFullscreen();\r\n } else if (elem.msRequestFullscreen) {\r\n /* IE11 */\r\n elem.msRequestFullscreen();\r\n }\r\n }\r\n const onOpenCamera = () => {\r\n openFullscreen();\r\n\r\n dispatch(\r\n cameraActions.openCamera({\r\n from: props.from,\r\n name: props.name,\r\n itemId:\r\n props.expenseId !== undefined ? props.expenseId : props.incomeId,\r\n })\r\n );\r\n };\r\n const onViewDocument = () => {\r\n let documentToShow;\r\n let pdf;\r\n if (uploadedDocumet.name === undefined) {\r\n pdf = true;\r\n documentToShow = uploadedDocumet.document.preview;\r\n } else {\r\n pdf = false;\r\n\r\n documentToShow = uploadedDocumet.preview;\r\n }\r\n if (pdf && isMobile) {\r\n window.open(documentToShow, \"_blank\");\r\n } else {\r\n dispatch(documentsActions.viewDocumet(uploadedDocumet));\r\n openFullscreen();\r\n }\r\n };\r\n const onDeleteDocument = () => {\r\n dispatch(cameraActions.deleteDocument(uploadedDocumet));\r\n setUploadedDocumet(\"\");\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n Frequently Asked Questions
\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n {isMobile ? (\r\n \r\n ) : null}\r\n {isMobile ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : null}\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 handleEvent(e);\r\n },\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n />\r\n \r\n \r\n {\r\n selectedhandleEvent(e);\r\n }}\r\n value={selected}\r\n fullWidth\r\n id=\"demo-customized-select\"\r\n >\r\n \r\n \r\n \r\n \r\n \r\n {props.canAttachFile && uploadedDocumet == \"\" ? (\r\n \r\n \r\n \r\n ) : uploadedDocumet != \"\" ? (\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\n}\r\n","import Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport React, { useContext } from \"react\";\r\nimport { makeStyles, withStyles } from \"@material-ui/core/styles\";\r\nimport budgetSectionStyle from \"assets/jss/xrs/views/sectionsSections/budgetSectionStyle\";\r\nimport Context from \"../../../utils/context\";\r\nimport { primaryColor } from \"assets/jss/xrs\";\r\nimport { UploadDocumentsURL } from \"../../../assets/jss/xrs\";\r\nimport \"./app.scss\";\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n htmlActions,\r\n cameraActions,\r\n} from \"../../../store/redux/redux-actions/redux_actions\";\r\nimport * as ACTIONS from \"../../../store/actions/actions\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport IncomeBudgetFields from \"../../BudgetPage/IncomeBudgetFields.js\";\r\nimport groupArray from \"group-array\";\r\nimport NavigateNext from \"@material-ui/icons/NavigateNext\";\r\nimport browserHistory from \"../../../utils/history\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport history from \"../../../utils/history\";\r\n\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport { element } from \"prop-types\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport AlertDialog from \"./Dialog.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport Slider from \"react-slick\";\r\nimport { Hidden } from \"@material-ui/core\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\n\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nconst SliderSettings = {\r\n infinite: false,\r\n arrows: false,\r\n centerMode: false,\r\n touchMove: false,\r\n\r\n variableWidth: false,\r\n dots: false,\r\n initialSlide: 0,\r\n slidesToShow: 5,\r\n responsive: [\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 1,\r\n dots: false,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n initialSlide: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n};\r\nconst useStyles = makeStyles(budgetSectionStyle);\r\nexport default function BudgetSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const [step, setStep] = React.useState(0);\r\n\r\n const [topNav, setTopNav] = React.useState(null);\r\n const [showSuccess, setshowSuccess] = React.useState(false);\r\n\r\n const dispatch = useDispatch();\r\n const documents = useSelector((state) => state.CameraReducer.confirmedImages);\r\n\r\n const [incomesToDisplay, setincomesToDisplay] = React.useState([]);\r\n const [expensesToDisplay, setexpensesToDisplay] = React.useState([]);\r\n\r\n const [incomeMonthlyTotal, setIncomeMonthlyTotal] = React.useState(0.0);\r\n const [incomeYearlyTotal, setIncomeYearlyTotal] = React.useState(0.0);\r\n const [incomeWeeklyTotal, setIncomeWeeklyTotal] = React.useState(0.0);\r\n\r\n const [expenceMonthlyTotal, setExpenceMonthlyTotal] = React.useState(0.0);\r\n const [expenceYearlyTotal, setExpenceYearlyTotal] = React.useState(0.0);\r\n const [expenceWeeklyTotal, setExpenceWeeklyTotal] = React.useState(0.0);\r\n\r\n const [balanceMonthlyTotal, setBalanceMonthlyTotal] = React.useState(0.0);\r\n const [balanceYearlyTotal, setBalanceYearlyTotal] = React.useState(0.0);\r\n const [balanceWeeklyTotal, setBalanceWeeklyTotal] = React.useState(0.0);\r\n\r\n const [\r\n showpaymentplanbuttonafterbudgetsubmitted,\r\n setShowpaymentplanbuttonafterbudgetsubmitted,\r\n ] = React.useState(false);\r\n\r\n const createBudgetText = useSelector(\r\n (state) => state.HtmlReducer.createBudgetText\r\n );\r\n const currency = useSelector((state) => state.GetSiteDetailsReducer.currency);\r\n const uploadimagestobudget = useSelector(\r\n (state) => state.GetSiteDetailsReducer.uploadimagestobudget\r\n );\r\n\r\n const [value, setValue] = React.useState(0);\r\n const callPaymentPlan = () => {\r\n browserHistory.push(\"/createPayment\");\r\n };\r\n React.useEffect(() => {\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n setShowpaymentplanbuttonafterbudgetsubmitted(\r\n response.showpaymentplanbuttonafterbudgetsubmitted\r\n );\r\n });\r\n }, []);\r\n\r\n const handleChange = (newValue) => {\r\n if (newValue == 4) {\r\n submitForm();\r\n } else {\r\n if (step < newValue) {\r\n topNav.slickNext();\r\n } else if (newValue < 4) {\r\n topNav.slickPrev();\r\n }\r\n setStep(newValue);\r\n window.scroll(0, 0);\r\n }\r\n\r\n let incomeslist = Object.values(incomesToDisplay).flat();\r\n let expencelist = Object.values(expensesToDisplay).flat();\r\n calculate(incomeslist, expencelist);\r\n };\r\n\r\n const calculate = (incomes, expences) => {\r\n let cincomeMonthlyTotal = 0;\r\n let cincomeYearlyTotal = 0;\r\n let cincomeWeeklyTotal = 0;\r\n incomes.forEach(function(element) {\r\n if (element.selectedvalue == \"Monthly\") {\r\n cincomeMonthlyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n cincomeYearlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) * 12;\r\n cincomeWeeklyTotal +=\r\n (parseInt(element.value == \"\" ? \"0.00\" : element.value) * 12) / 52;\r\n } else if (element.selectedvalue == \"Weekly\") {\r\n cincomeMonthlyTotal +=\r\n (parseInt(element.value == \"\" ? \"0.00\" : element.value) * 52) / 12;\r\n cincomeYearlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) * 52;\r\n cincomeWeeklyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n } else if (element.selectedvalue == \"Yearly\") {\r\n cincomeMonthlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) / 12;\r\n cincomeYearlyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n cincomeWeeklyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) / 52;\r\n }\r\n });\r\n let cexpenceMonthlyTotal = 0;\r\n let cexpenceYearlyTotal = 0;\r\n let cexpenceWeeklyTotal = 0;\r\n\r\n expences.forEach(function(element) {\r\n if (element.selectedvalue == \"Monthly\") {\r\n cexpenceMonthlyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n cexpenceYearlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) * 12;\r\n cexpenceWeeklyTotal +=\r\n (parseInt(element.value == \"\" ? \"0.00\" : element.value) * 12) / 52;\r\n } else if (element.selectedvalue == \"Weekly\") {\r\n cexpenceMonthlyTotal +=\r\n (parseInt(element.value == \"\" ? \"0.00\" : element.value) * 52) / 12;\r\n cexpenceYearlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) * 52;\r\n cexpenceWeeklyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n } else if (element.selectedvalue == \"Yearly\") {\r\n cexpenceMonthlyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) / 12;\r\n cexpenceYearlyTotal += parseInt(\r\n element.value == \"\" ? \"0.00\" : element.value\r\n );\r\n cexpenceWeeklyTotal +=\r\n parseInt(element.value == \"\" ? \"0.00\" : element.value) / 52;\r\n }\r\n });\r\n\r\n var cbalanceMonthlyTotal = cincomeMonthlyTotal - cexpenceMonthlyTotal;\r\n var cbalanceYearlyTotal = cincomeYearlyTotal - cexpenceYearlyTotal;\r\n var cbalanceWeeklyTotal = cincomeWeeklyTotal - cexpenceWeeklyTotal;\r\n\r\n setIncomeMonthlyTotal(cincomeMonthlyTotal);\r\n setIncomeYearlyTotal(cincomeYearlyTotal);\r\n setIncomeWeeklyTotal(cincomeWeeklyTotal);\r\n\r\n setExpenceMonthlyTotal(cexpenceMonthlyTotal);\r\n setExpenceYearlyTotal(cexpenceYearlyTotal);\r\n setExpenceWeeklyTotal(cexpenceWeeklyTotal);\r\n\r\n setBalanceMonthlyTotal(cbalanceMonthlyTotal);\r\n setBalanceYearlyTotal(cbalanceYearlyTotal);\r\n setBalanceWeeklyTotal(cbalanceWeeklyTotal);\r\n };\r\n const submitForm = () => {\r\n let incomeslist = Object.values(incomesToDisplay).flat();\r\n let expencelist = Object.values(expensesToDisplay).flat();\r\n var formData = new FormData();\r\n var data = {\r\n BudgetInformation: {\r\n YearlyIncomeTotal: incomeYearlyTotal.toFixed(2).toString(),\r\n MonthlyIncomeTotal: incomeMonthlyTotal.toFixed(2).toString(),\r\n WeeklyIncomeTotal: incomeWeeklyTotal.toFixed(2).toString(),\r\n YearlyExpenditureTotal: expenceYearlyTotal.toFixed(2).toString(),\r\n MonthlyExpenditureTotal: expenceMonthlyTotal.toFixed(2).toString(),\r\n WeeklyExpenditureTotal: expenceWeeklyTotal.toFixed(2).toString(),\r\n YearlySavingsTotal: balanceYearlyTotal.toFixed(2).toString(),\r\n MonthlySavingsTotal: balanceMonthlyTotal.toFixed(2).toString(),\r\n WeeklySavingsTotal: balanceWeeklyTotal.toFixed(2).toString(),\r\n Incomes: [],\r\n Expenditures: [],\r\n },\r\n };\r\n for (var i in incomeslist) {\r\n var item = incomeslist[i];\r\n\r\n let exists = documents.find(\r\n (x) => x.from == \"income\" && x.itemId == item.incomeId\r\n );\r\n\r\n if (exists) {\r\n formData.append(\r\n exists.name ? exists.name : exists.document.name,\r\n exists.document\r\n );\r\n }\r\n\r\n data.BudgetInformation.Incomes.push({\r\n IncomeName: item.incomeType,\r\n IncomeValue:\r\n item.value.toString() == \"\" ? \"0.00\" : item.value.toString(),\r\n IncomeFrequency: item.selectedvalue,\r\n AttachedFileName:\r\n exists === undefined\r\n ? \"\"\r\n : exists.name\r\n ? exists.name\r\n : exists.document.name,\r\n });\r\n }\r\n\r\n for (var i in expencelist) {\r\n var item = expencelist[i];\r\n let exists = documents.find(\r\n (x) => x.from == \"expense\" && x.itemId == item.expenseId\r\n );\r\n if (exists) {\r\n formData.append(\r\n exists.name ? exists.name : exists.document.name,\r\n exists.document\r\n );\r\n }\r\n\r\n data.BudgetInformation.Expenditures.push({\r\n ExpenditureName: item.expenseType,\r\n ExpenditureValue:\r\n item.value.toString() == \"\" ? \"0.00\" : item.value.toString(),\r\n ExpenditureFrequency: item.selectedvalue,\r\n AttachedFileName:\r\n exists === undefined\r\n ? \"\"\r\n : exists.name\r\n ? exists.name\r\n : exists.document.name,\r\n });\r\n }\r\n\r\n formData.append(\"BudgetInformation\", JSON.stringify(data));\r\n fetch(\r\n uploadimagestobudget\r\n ? UploadDocumentsURL\r\n : URLS.CreateBudgetAndAttachDocuments,\r\n {\r\n method: \"POST\",\r\n headers: {\r\n // \"Content-Type\": \"multipart/form-data\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n body: formData,\r\n // body: JSON.stringify(data),\r\n }\r\n )\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Create Budget\", data, context);\r\n });\r\n setStep(1);\r\n\r\n throw Error(\"\");\r\n }\r\n })\r\n\r\n .then((data) => {\r\n setshowSuccess(true);\r\n dispatch(cameraActions.resetDocuments());\r\n getMenu();\r\n\r\n topNav.slickNext();\r\n\r\n setStep(4);\r\n window.scroll(0, 0);\r\n }, [])\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Create Budget\", error, context);\r\n }\r\n });\r\n };\r\n const getMenu = () => {\r\n var url = URLS.GetWelcomeNavigation;\r\n var token = sessionStorage.getItem(\"access_token\");\r\n\r\n fetch(url, {\r\n method: \"GET\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + token,\r\n },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Welcome Navigation\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data1) => {\r\n dispatch(ACTIONS.set_menu(data1));\r\n\r\n fetch(URLS.GetWelcomeDetails, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", res, context);\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n dispatch(htmlActions.termsQuickPay(data.customer.termsquickpay));\r\n dispatch(htmlActions.termsPlan(data.customer.termsplan));\r\n dispatch(htmlActions.termsDiscount(data.customer.termsdiscount));\r\n\r\n dispatch(\r\n htmlActions.viewOfferText(data.activeAccounts[0].viewoffertext)\r\n );\r\n dispatch(\r\n htmlActions.createPlanText(data.activeAccounts[0].createplantext)\r\n );\r\n dispatch(\r\n htmlActions.createPlantoc(data.activeAccounts[0].createplantoc)\r\n );\r\n dispatch(\r\n htmlActions.createBudgetText(\r\n data.activeAccounts[0].createbudgettext\r\n )\r\n );\r\n dispatch(\r\n htmlActions.viewAccountText(\r\n data.activeAccounts[0].viewacccounttext\r\n )\r\n );\r\n dispatch(ACTIONS.set_Customer(data.customer));\r\n\r\n sessionStorage.setItem(\"user\", data.customer.cufname);\r\n\r\n dispatch(ACTIONS.set_Accounts(data.activeAccounts));\r\n\r\n dispatch(ACTIONS.set_Callbacks(data.callbackReasons));\r\n dispatch(ACTIONS.set_num_accounts(data.activeAccounts.length));\r\n if (data.activeAccounts.length == 1) {\r\n dispatch(ACTIONS.set_selectedAccount(data.activeAccounts[0]));\r\n }\r\n dispatch(apiActions.clear());\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Details\", error, context);\r\n }\r\n });\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Welcome Navigation\", error, context);\r\n }\r\n });\r\n };\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\r\n\r\n const createIncomeData = (\r\n incomeCategory,\r\n incomeOrder,\r\n incomeType,\r\n canAttachFile,\r\n incomeId,\r\n\r\n value,\r\n selectedvalue,\r\n atachedFileName\r\n ) => {\r\n return {\r\n incomeCategory,\r\n incomeOrder,\r\n incomeType,\r\n value,\r\n incomeId,\r\n selectedvalue,\r\n canAttachFile,\r\n atachedFileName,\r\n };\r\n };\r\n const createExpenceData = (\r\n expenseCategory,\r\n expenseOrder,\r\n expenseType,\r\n canAttachFile,\r\n expenseId,\r\n value,\r\n selectedvalue,\r\n atachedFileName\r\n ) => {\r\n return {\r\n expenseCategory,\r\n expenseOrder,\r\n expenseType,\r\n expenseId,\r\n value,\r\n selectedvalue,\r\n canAttachFile,\r\n atachedFileName,\r\n };\r\n };\r\n\r\n React.useEffect(() => {\r\n //window.initSlick();\r\n fetch(URLS.GetBugetColumns, {\r\n method: \"GET\",\r\n headers: { Authorization: \"Bearer \" + token },\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Buget Columns\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((data) => {\r\n const IncomedataRows = [];\r\n const ExpencedataRows = [];\r\n\r\n data.incomesToDisplay.forEach((item) => {\r\n IncomedataRows.push(\r\n createIncomeData(\r\n item.incomeCategory,\r\n item.incomeOrder,\r\n item.incomeType,\r\n item.canAttachFile,\r\n item.incomeId,\r\n\r\n \"\",\r\n \"Monthly\",\r\n \"\"\r\n )\r\n );\r\n });\r\n\r\n data.expensesToDisplay.forEach((item) => {\r\n ExpencedataRows.push(\r\n createExpenceData(\r\n item.expenseCategory,\r\n item.expenseOrder,\r\n item.expenseType,\r\n item.canAttachFile,\r\n item.expenseId,\r\n \"\",\r\n \"Monthly\",\r\n \"\"\r\n )\r\n );\r\n });\r\n\r\n var groupedItems = groupArray(IncomedataRows, \"incomeCategory\");\r\n var groupedItemse = groupArray(ExpencedataRows, \"expenseCategory\");\r\n\r\n setincomesToDisplay(groupedItems);\r\n setexpensesToDisplay(groupedItemse);\r\n }, [])\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Buget Columns\", error, context);\r\n }\r\n });\r\n }, []);\r\n\r\n function handleInputChange(event, index, cat) {\r\n incomesToDisplay[cat][index].value = event.target.value;\r\n setincomesToDisplay(incomesToDisplay);\r\n }\r\n function handleInputSelectedChange(event, index, cat) {\r\n incomesToDisplay[cat][index].selectedvalue = event.target.value;\r\n setincomesToDisplay(incomesToDisplay);\r\n }\r\n\r\n function handleInputExSelectedChange(event, index, cat) {\r\n expensesToDisplay[cat][index].selectedvalue = event.target.value;\r\n setexpensesToDisplay(expensesToDisplay);\r\n }\r\n\r\n function handleInputExChange(event, index, cat) {\r\n expensesToDisplay[cat][index].value = event.target.value;\r\n setexpensesToDisplay(expensesToDisplay);\r\n }\r\n\r\n return (\r\n {props.name}
\r\n{props.name}
\r\n\r\n \r\n \r\n {\r\n setTopNav(slider);\r\n }}\r\n {...SliderSettings}\r\n >\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n handleChange(0)}>Instructions\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n {createBudgetText}\r\n
\r\n \r\n {\r\n handleChange(1);\r\n }}\r\n color=\"primary\"\r\n icon={
\r\n Enter your incomes in the area below
\r\n\r\n {Object.keys(incomesToDisplay).map(function(cat, index) {\r\n return (\r\n\r\n \r\n handleInputChange(e, index2, cat)\r\n }\r\n handleSelectedChange={(e) =>\r\n handleInputSelectedChange(e, index2, cat)\r\n }\r\n value={item.value}\r\n selectedvalue={item.selectedvalue}\r\n >\r\n );\r\n })}\r\n
\r\n );\r\n })}\r\n {cat}
\r\n {incomesToDisplay[cat].map(function(item, index2) {\r\n return (\r\n\r\n handleChange(0)}\r\n color=\"primary\"\r\n icon={
\r\n \r\n \r\n\r\n Expenditure
\r\n\r\n {Object.keys(expensesToDisplay).map(function(cat, index) {\r\n return (\r\n\r\n \r\n handleInputExChange(e, index2, cat)\r\n }\r\n handleSelectedChange={(e) =>\r\n handleInputExSelectedChange(e, index2, cat)\r\n }\r\n selectedvalue={item.selectedvalue}\r\n >\r\n );\r\n })}\r\n
\r\n );\r\n })}\r\n {cat}
\r\n\r\n {expensesToDisplay[cat].map(function(item, index2) {\r\n return (\r\n\r\n handleChange(1)}\r\n color=\"primary\"\r\n icon={
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n\r\n Finalise Budget
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n\r\n \r\n Income Totals\r\n \r\n \r\n \r\n \r\n Expenditure Totals\r\n \r\n \r\n \r\n \r\n Your available money\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n
Yearly
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n Monthly
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n Weekly
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n Income Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n \r\n
\r\n Expenditure Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n \r\n
\r\n Your available Money
\r\n\r\n \r\n \r\n Yearly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Monthly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Weekly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n Income Totals
\r\n {Object.keys(incomesToDisplay).map(function(cat, index) {\r\n return (\r\n\r\n
\r\n );\r\n })}\r\n {cat}
\r\n {incomesToDisplay[cat].map(function(item, index2) {\r\n return (\r\n\r\n \r\n \r\n \r\n {item.incomeType}\r\n \r\n \r\n \r\n \r\n {item.selectedvalue}\r\n \r\n \r\n \r\n \r\n \r\n {item.selectedvalue}\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n
Expense Totals
\r\n {Object.keys(expensesToDisplay).map(function(cat, index) {\r\n return (\r\n\r\n
\r\n );\r\n })}\r\n {cat}
\r\n\r\n {expensesToDisplay[cat].map(function(item, index2) {\r\n return (\r\n\r\n \r\n \r\n \r\n {\" \"}\r\n {item.expenseType}\r\n \r\n \r\n \r\n \r\n {item.selectedvalue}\r\n \r\n \r\n \r\n \r\n \r\n {item.selectedvalue}\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n
\r\n Finalising the budget will save the details on our system. If\r\n you are unsure that the details are correct, please go back and\r\n amend before finalising\r\n
\r\n\r\n handleChange(2)}\r\n color=\"primary\"\r\n icon={ handleChange(4)}\r\n color=\"primary\"\r\n icon={
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {showSuccess ? (\r\n 0 &&\r\n showpaymentplanbuttonafterbudgetsubmitted\r\n ? classes.showSummary\r\n : classes.hideSummary\r\n }\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useState } from \"react\";\r\nimport { useWindowSize } from \"components/camera/Camera\";\r\nimport { isMobile } from \"react-device-detect\";\r\n\r\nexport default function PdfViewer({ pdf, documentToShow }) {\r\n const size = useWindowSize();\r\n\r\n React.useEffect(() => {\r\n if (pdf && isMobile) {\r\n window.open(documentToShow, \"_blank\");\r\n }\r\n }, [pdf]);\r\n if (pdf) {\r\n return (\r\n Summary
\r\nIncome Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n
\r\n Expenditure Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n
\r\n Your available Money
\r\n\r\n \r\n \r\n Yearly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Monthly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Weekly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n Income Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n \r\n
\r\n Expenditure Totals
\r\n\r\n \r\n \r\n Yearly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Monthly\r\n \r\n \r\n \r\n \r\n \r\n \r\n Weekly\r\n \r\n \r\n \r\n \r\n
\r\n Your available Money
\r\n\r\n \r\n \r\n Yearly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Monthly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n \r\n \r\n Weekly\r\n \r\n 0\r\n ? classes.MoneyGreen\r\n : balanceMonthlyTotal < 0\r\n ? classes.MoneyRed\r\n : classes.Money\r\n }\r\n >\r\n \r\n
\r\n - \r\n {\" \"}\r\n
- \r\n {\" \"}\r\n
\r\n Your budget has been submitted\r\n
\r\n \r\n
\r\n Please proceed to Create a Payment Plan by clicking on\r\n
\r\n \r\n
\r\n button{\" \"}\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n } else return null;\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport budgetPageStyle from \"../../assets/jss/xrs/views/budgetPageStyle\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport BudgetSection from \"../SectionsPage/Sections/BudgetSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport CustomCamera from \"components/camera/Camera\";\r\nimport PdfViewer from \"components/PdfViewer/PdfViewer\";\r\nimport FabViewDocument from \"components/Fab/FabViewDocument\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles(budgetPageStyle);\r\n\r\nexport default function BudgetPage(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n const viewDocument = useSelector(\r\n (state) => state.DocumentsReducer.documentToBeViewed\r\n );\r\n const context = useContext(Context);\r\n const open = useSelector((state) => state.CameraReducer.openFrom);\r\n const uploadimagestobudget = useSelector(\r\n (state) => state.GetSiteDetailsReducer.uploadimagestobudget\r\n );\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\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 {open === \"\" || !isMobile || !uploadimagestobudget ? null : (\r\n \r\n \r\n {viewDocument === \"\" ? null : (\r\n <>\r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CustomTextField from \"components/CustomInput/CustomInput\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport Context from \"../../../utils/context\";\r\nimport Datetime from \"react-datetime\";\r\n// @material-ui/core components\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport TextField from \"components/CustomInput/CustomInput.js\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport Select from \"@material-ui/core/Select\";\r\nimport fnmoment from \"moment/min/moment-with-locales\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport BlueHeader from \"../../SectionsPage/Sections/BlueHeaderSection.js\";\r\nimport {\r\n apiActions,\r\n getSiteDetailsActions,\r\n} from \"store/redux/redux-actions/redux_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n margin: 0,\r\n padding: 0,\r\n },\r\n button: {\r\n marginRight: theme.spacing(1),\r\n padding: 13,\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n instructions: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 30,\r\n },\r\n whiteInfo: {\r\n color: \"white\",\r\n fontWeight: 400,\r\n paddingLeft: 0,\r\n paddingTop: 10,\r\n },\r\n whiteInfoMiddle: {\r\n color: \"white\",\r\n fontWeight: 400,\r\n paddingLeft: 0,\r\n\r\n textAlign: \"center\",\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n },\r\n blueText: {\r\n color: \"#0065a4\",\r\n fontWeight: 300,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n BoxFull: {\r\n width: \"100%\",\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n },\r\n Middle: {\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n border: 0,\r\n },\r\n blueTextMiddle: {\r\n color: \"#0065a4\",\r\n fontWeight: 400,\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n border: 0,\r\n },\r\n controlWhite: {\r\n margin: 0,\r\n height: 40,\r\n borderRadius: 2,\r\n backgroundColor: \"#f5f9ff\",\r\n color: \"#0088cc\",\r\n borderColor: \"#0088cc\",\r\n border: 1,\r\n },\r\n rightValues: {\r\n textAlign: \"right\",\r\n fontWeight: 300,\r\n },\r\n}));\r\n\r\nexport default function RequestCallBackSection() {\r\n const classes = useStyles();\r\n const [page, setPage] = React.useState(1);\r\n const context = useContext(Context);\r\n const dispatch = useDispatch();\r\n const loading = useSelector((state) => state.ApiCallsReducer.loading);\r\n\r\n const [sitename, setSitename] = React.useState(\"\");\r\n const [companyname, setCompanyname] = React.useState(\"\");\r\n const [aboutus, setAboutus] = React.useState(\"\");\r\n const [address, setAddress] = React.useState(\"\");\r\n const [officehours, setOfficehours] = React.useState(\"\");\r\n const [phonenumber, setPhonenumber] = React.useState(\"\");\r\n const [email, setEmail] = React.useState(\"\");\r\n const [openTime, setopenTime] = React.useState(\"\");\r\n const [closeTime, setcloseTime] = React.useState(\"\");\r\n\r\n const [callbackReason, setCallbackReason] = React.useState(\"\");\r\n const [callbackDate, setCallBackDate] = React.useState(\"\");\r\n const [callbackDateMax, setCallBackDateMax] = React.useState(\"\");\r\n const [callbackTime, setCallBackTime] = React.useState(\"\");\r\n const [callbackphone, setCallbackphone] = React.useState(\"\");\r\n const [callbackDateTime, setCallbackDateTime] = React.useState(\"None\");\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n const stateCallbacks = useSelector(\r\n (state) => state.CallbacksReducer.callbacks\r\n );\r\n React.useEffect(() => {\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Welcome Details\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(getSiteDetailsActions.logo(response.logoimageurl));\r\n dispatch(getSiteDetailsActions.footerImage(response.footerimageurl));\r\n dispatch(getSiteDetailsActions.currency(response.sitecurrency));\r\n dispatch(getSiteDetailsActions.set4week(response.usE4WEEKLYFREQUENCY));\r\n\r\n dispatch(\r\n getSiteDetailsActions.uploadImagesToBudget(\r\n response.uploadimagestobudget\r\n )\r\n );\r\n if (response.usesconveniencefee) {\r\n dispatch(\r\n getSiteDetailsActions.convenienceFee(response.conveniencefee)\r\n );\r\n }\r\n setSitename(response.sitename);\r\n setCompanyname(response.companyname);\r\n setAboutus(response.aboutus);\r\n\r\n setOfficehours(response.officehours);\r\n setPhonenumber(response.phonenumber);\r\n setAddress(response.address);\r\n setEmail(response.email);\r\n setcloseTime(response.closinghours);\r\n setopenTime(response.openinghours);\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\r\n }\r\n });\r\n }, []);\r\n const handlecallbackReasonChange = (e) => {\r\n setCallbackReason(e.target.value);\r\n };\r\n\r\n const handleCallBackDateChange = (e) => {\r\n var d = fnmoment(e.target.value);\r\n\r\n setCallBackDate(d.format(\"YYYY-MM-DD\"));\r\n var date = d.format(\"L\");\r\n var time = callbackTime;\r\n var datetime = date + \" \" + time;\r\n setCallbackDateTime(datetime);\r\n };\r\n const handleCallBackTimeChange = (e) => {\r\n setCallBackTime(e.target.value);\r\n\r\n var date = callbackDate;\r\n var time = e.target.value;\r\n var datetime = date + \" \" + time;\r\n setCallbackDateTime(datetime);\r\n };\r\n const handleCallBackPhoneChange = (e) => {\r\n setCallbackphone(e.target.value);\r\n };\r\n const token = sessionStorage.getItem(\"access_token\");\r\n const submitForm = (event) => {\r\n event.preventDefault();\r\n if (document.forms[0].checkValidity()) {\r\n const xhr = new XMLHttpRequest();\r\n var url = URLS.SaveCallBack;\r\n\r\n dispatch(apiActions.loading(true));\r\n xhr.open(\"POST\", url, true);\r\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\r\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + token);\r\n\r\n var date = callbackDate;\r\n var time = callbackTime;\r\n var datetime = date + \" \" + time;\r\n var callBacklDate = fnmoment(datetime).format(\"YYYY-MM-DD HH:mm:ss \");\r\n var data = JSON.stringify({\r\n DateOfCallBack: callBacklDate,\r\n Note: callbackReason,\r\n PhoneNumber: callbackphone,\r\n PhoneType: \"Home\",\r\n });\r\n xhr.onreadystatechange = function() {\r\n if (xhr.readyState === 4) {\r\n if (xhr.status == 200 || xhr.status == 201) {\r\n context.stateInfoDialog(\r\n \"Callback Information\",\r\n JSON.parse(xhr.responseText).message,\r\n \"/welcome\"\r\n );\r\n //setIfamevisible(true);\r\n } else {\r\n ApiErrorHandler(\"Save Call Back\", xhr, context);\r\n }\r\n }\r\n };\r\n try {\r\n xhr.send(data);\r\n } catch (err) {\r\n ApiErrorHandler(\"Save Call Back\", err, context);\r\n }\r\n }\r\n };\r\n React.useEffect(() => {\r\n fnmoment.locale(window.navigator.language.toLowerCase());\r\n }, []);\r\n React.useEffect(() => {\r\n setCallbackphone(stateCustomer.cumobilephone);\r\n setCallBackDate(fnmoment().format(\"YYYY-MM-DD\"));\r\n setCallbackDateTime(fnmoment().format(\"L\"));\r\n\r\n var today = fnmoment()\r\n .add(stateCustomer.maxcallbackdate, \"days\")\r\n .format(\"YYYY-MM-DD\");\r\n setCallBackDateMax(today);\r\n return () => {\r\n dispatch(apiActions.clear());\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","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport RequestCallbackSection from \"../SectionsPage/Sections/RequestCallBackSection.js\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nexport default function RequestCallBackLoggedID(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\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","import { isMobile } from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst changePasswordOrPinPageStyle = (theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n});\r\n\r\nexport default changePasswordOrPinPageStyle;\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport changePasswordOrPinPageStyle from \"../../assets/jss/xrs/views/changePasswordOrPinPageStyle\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport ChangePasswordSection from \"./ChangePasswordOrPin.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles(changePasswordOrPinPageStyle);\r\n\r\nexport default function BudgetPage(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n const token = sessionStorage.getItem(\"access_token\");\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","import { isMobile } from \"react-device-detect\";\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\n\r\nconst faqPageLoginStyle = (theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n});\r\n\r\nexport default faqPageLoginStyle;\r\n","import imagesStyles from \"../../imagesStyles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst faqSectionStyle = {\r\n ...imagesStyles,\r\n white: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n paddingLeft: 20,\r\n },\r\n whiteRight: {\r\n color: \"white\",\r\n fontWeight: 500,\r\n textAlign: \"right\",\r\n },\r\n blueTitle: {\r\n color: primaryColor[20],\r\n fontWeight: 400,\r\n marginBottom: 0,\r\n },\r\n RightText: {\r\n marginBottom: 5,\r\n },\r\n Title: {\r\n fontWeight: 500,\r\n paddingTop: 30,\r\n },\r\n tableWrapper: {\r\n maxHeight: 270,\r\n overflow: \"auto\",\r\n },\r\n Wellcome: {\r\n fontWeight: 500,\r\n },\r\n};\r\nexport default faqSectionStyle;\r\n","import Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button\";\r\nimport React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport faqSectionStyle from \"assets/jss/xrs/views/sectionsSections/faqSectionStyle\";\r\nimport Context from \"../../../utils/context\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport * as ACTIONS from \"../../../store/actions/actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport Moment from \"react-moment\";\r\nimport Accordion from \"components/Accordion/Accordion.js\";\r\nimport { textVariables } from \"assets/jss/xrs\";\r\n\r\nconst columns = [\r\n { id: \"Description\", label: \"Description\", minWidth: 100 },\r\n { id: \"Account #\", label: \"Account #\", minWidth: 170 },\r\n {\r\n id: \"Balance\",\r\n label: \"Balance\",\r\n minWidth: 100,\r\n align: \"right\",\r\n format: (value) => value.toFixed(2),\r\n },\r\n];\r\n\r\nconst useStyles = makeStyles(faqSectionStyle);\r\nexport default function FaqSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const createData = (title, content) => {\r\n return { title, content };\r\n };\r\n const dispatch = useDispatch();\r\n const selectedAccount = useSelector(\r\n (state) => state.SelectedAccountsReducer.account\r\n );\r\n const stateAccounts = useSelector((state) => state.AccountsReducer.accounts);\r\n\r\n const [rowdata, setRowdata] = React.useState([]);\r\n const [site, setSite] = React.useState(\"\");\r\n const stateSite = useSelector((state) => state.SiteReducer.site);\r\n const stateCustomer = useSelector((state) => state.CustomerReducer.customer);\r\n const ReadContext = () => {\r\n setSite(stateSite);\r\n const dataRows = [];\r\n var data = stateSite.faqs;\r\n if (data != \"NoAccounts\") {\r\n var i = 1;\r\n data.forEach((item) => {\r\n dataRows.push(\r\n createData(\r\n ReactHtmlParser(item.header),\r\n ReactHtmlParser(item.details)\r\n )\r\n );\r\n i++;\r\n setRowdata(dataRows);\r\n });\r\n }\r\n };\r\n React.useEffect(() => {\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n dispatch(ACTIONS.set_Site(response));\r\n\r\n ReadContext();\r\n })\r\n .catch((error) => {\r\n if (error.message == \"\") {\r\n } else {\r\n ApiErrorHandler(\"Get Site Detatils\", error, context);\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 Email
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport faqPageLoginStyle from \"../../assets/jss/xrs/views/faqPageLoginStyle\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport FaqSection from \"../SectionsPage/Sections/FaqSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles(faqPageLoginStyle);\r\n\r\nexport default function FaqPageLogin(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n\r\n return (\r\n \r\n
\r\n Frequently Asked Questions
\r\n{textVariables[5]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.accountnumber\r\n : stateCustomer.custnumber}\r\n
\r\n{textVariables[6]}
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptofficehours\r\n : stateAccounts[0].deptofficehours}\r\n
\r\nAddress
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptaddress\r\n : stateAccounts[0].deptaddress}\r\n
\r\nPhone
\r\n\r\n {\" \"}\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptphonenumber\r\n : stateAccounts[0].deptphonenumber}\r\n
\r\n\r\n {selectedAccount !== \"NoAccount\"\r\n ? selectedAccount.deptemail\r\n : stateAccounts[0].deptemail}\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport history from \"../../utils/history\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport Iframe from \"react-iframe\";\r\n\r\nimport { useFormik } from \"formik\";\r\n\r\nimport TextField from \"components/CustomInput/CustomInput.js\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport clsx from \"clsx\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport ReactHtmlParser, {\r\n processNodes,\r\n convertNodeToElement,\r\n htmlparser2,\r\n} from \"react-html-parser\";\r\n\r\nimport PayNow from \"../SectionsPage/Sections/PayNowSection.js\";\r\n\r\nimport html2canvas from \"html2canvas\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport BlueHeader from \"../SectionsPage/Sections/BlueHeaderSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { el } from \"date-fns/locale\";\r\n\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n Iframecontainer: {\r\n position: \"relative\",\r\n overflow: \"hidden\",\r\n width: \"100%\",\r\n paddingTop: \"56.25%\" /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */,\r\n },\r\n\r\n /* Then style the iframe to fit in the container div with full height and width */\r\n responsiveIframe: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n}));\r\n\r\nexport default function IframePage(props) {\r\n const classes2 = useStyles2();\r\n const context = useContext(Context);\r\n const [page, setPage] = React.useState(1);\r\n const url = useSelector((state) => state.SiteReducer.iframeUrl);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport fnmoment from \"moment/min/moment-with-locales\";\r\nimport AttachFileIcon from \"@material-ui/icons/AttachFile\";\r\nimport Context from \"../../../utils/context\";\r\nimport * as URLS from \"../../../utils/XRSAPIs\";\r\nimport * as ACTIONS from \"../../../store/actions/actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { ApiErrorHandler } from \"utils/apiErrorHandler\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport BlueHeader from \"./BlueHeaderSection.js\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\nimport { Collapse } from \"@material-ui/core\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport {\r\n cameraActions,\r\n documentsActions,\r\n htmlActions,\r\n apiActions,\r\n} from \"../../../store/redux/redux-actions/redux_actions\";\r\nimport history from \"../../../utils/history\";\r\n\r\nimport { DataGrid, getThemePaletteMode } from \"@material-ui/data-grid\";\r\nimport { createMuiTheme, darken, lighten } from \"@material-ui/core/styles\";\r\n\r\nimport ReplayRoundedIcon from \"@material-ui/icons/ReplayRounded\";\r\n\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport PdfViewer from \"components/PdfViewer/PdfViewer\";\r\n\r\nconst defaultTheme = createMuiTheme();\r\nconst useStyles = makeStyles(\r\n (theme) => {\r\n const getBackgroundColor = (color) =>\r\n getThemePaletteMode(theme.palette) === \"dark\"\r\n ? darken(color, 0.6)\r\n : lighten(color, 0.6);\r\n\r\n const getHoverBackgroundColor = (color) =>\r\n getThemePaletteMode(theme.palette) === \"dark\"\r\n ? darken(color, 0.5)\r\n : lighten(color, 0.5);\r\n\r\n return {\r\n root: {\r\n \"& .rowStyle--READ\": {\r\n fontWeight: 400,\r\n \"&:hover\": {},\r\n },\r\n \"& .rowStyle--UNREAD\": {\r\n fontWeight: 700,\r\n backgroundColor: getBackgroundColor(\"#BEBEBE\"),\r\n \"&:hover\": {},\r\n },\r\n \"& .headerStyle\": {\r\n border: \"none\",\r\n },\r\n \"& .cellStyle\": {\r\n borderStyle: \"none\",\r\n },\r\n },\r\n };\r\n },\r\n { defaultTheme }\r\n);\r\n\r\nexport default function MessagesSection(props) {\r\n const context = useContext(Context);\r\n const classes = useStyles();\r\n const createData = (title, content) => {\r\n return { title, content };\r\n };\r\n const dispatch = useDispatch();\r\n\r\n const columnsDesktop = [\r\n {\r\n field: \"Status\",\r\n headerName: \"Status\",\r\n width: 130,\r\n hide: true,\r\n headerClassName: \"headerStyle\",\r\n cellClassName: \"cellStyle\",\r\n },\r\n {\r\n field: \"ReceivedAt\",\r\n headerName: \"Date/Time\",\r\n flex: 1,\r\n headerClassName: \"headerStyle\",\r\n cellClassName: \"cellStyle\",\r\n },\r\n //{\r\n // field: 'CustomerRecNo', headerName: 'First name', width: 130 },\r\n {\r\n field: \"Reference\",\r\n headerName: \"Ref\",\r\n flex: 1,\r\n headerClassName: \"headerStyle\",\r\n cellClassName: \"cellStyle\",\r\n },\r\n {\r\n field: \"Account\",\r\n headerName: \"Account\",\r\n flex: 1,\r\n headerClassName: \"headerStyle\",\r\n cellClassName: \"cellStyle\",\r\n },\r\n // {\r\n // field: \"Type\",\r\n // headerName: \"Type\",\r\n // flex: 1,\r\n // headerClassName: \"headerStyle\",\r\n // cellClassName: \"cellStyle\",\r\n // },\r\n {\r\n field: \"HasAttachment\",\r\n headerName: \"Attachment\",\r\n flex: 1,\r\n headerClassName: \"headerStyle\",\r\n cellClassName: \"cellStyle\",\r\n renderCell: (params) => {\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\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\nimport classNames from \"classnames\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport landingPageStyle from \"assets/jss/xrs/views/landingPageStyle.js\";\r\nimport HeaderSectionLoggedID from \"../SectionsPage/Sections/HeaderSectionLoggedID.js\";\r\nimport FaqSection from \"../SectionsPage/Sections/FaqSection.js\";\r\nimport Context from \"../../utils/context\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport MessagesSection from \"../SectionsPage/Sections/MessagesSection.js\";\r\nimport clsx from \"clsx\";\r\nimport * as URLS from \"../../utils/XRSAPIs\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport PdfViewer from \"components/PdfViewer/PdfViewer\";\r\nimport FabViewDocument from \"components/Fab/FabViewDocument\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\n\r\nimport { Collapse } from \"@material-ui/core\";\r\nconst useStyles = makeStyles(landingPageStyle);\r\nlet drawerWidth = 150;\r\nif (isMobile) {\r\n drawerWidth = 0;\r\n}\r\nconst useStyles2 = makeStyles((theme) => ({\r\n content: {\r\n paddingTop: 60,\r\n paddingBottom: 38,\r\n flexGrow: 1,\r\n padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: drawerWidth,\r\n },\r\n}));\r\n\r\nexport default function MessagesPage(props) {\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const context = useContext(Context);\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [page, setPage] = React.useState(1);\r\n const viewDocument = useSelector(\r\n (state) => state.DocumentsReducer.documentToBeViewed\r\n );\r\n return (\r\n \r\n \r\n Message inbox\r\n \r\n onRowEvent(row)}\r\n // getRowClassName={(params) => {\r\n // ;\r\n // let tet = `rowStyle--${\r\n // params.row.Status == \"READ\" ? \".Mui-selected\" : null\r\n // }`;\r\n\r\n // return \".Mui-selected\";\r\n // }}\r\n getRowClassName={(params) =>\r\n `rowStyle--${params.getValue(\r\n params.row.MessageId,\r\n \"Status\"\r\n )}`\r\n }\r\n getRowId={(row) => row.MessageId}\r\n density=\"compact\"\r\n autoHeight=\"true\"\r\n rows={rowdata}\r\n columns={isMobile ? columnsMobile : columnsDesktop}\r\n pageSize={10}\r\n />\r\n
\r\n \r\n {selectedRow !== null ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {selectedRow.Reference}, account number:\r\n {selectedRow.CustomerRecNo}\r\n \r\n \r\n \r\n \r\n \r\n {fnmoment(selectedRow.ReceivedAt).format(\r\n \"L HH:MM\"\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedRow.HasAttachment ? (\r\n <>\r\n \r\n \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 {selectedRow.Body}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {viewDocument === \"\" ? null : (\r\n <>\r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext } from \"react\";\r\n\r\nimport history from \"./utils/history\";\r\nimport Context from \"./utils/context\";\r\nimport MomentUtils from \"@date-io/moment\";\r\n\r\nimport { Router, Route, Switch, Redirect } from \"react-router\";\r\n\r\nimport \"assets/scss/xrs.scss\";\r\n// pages for this product\r\nimport WellcomePage from \"views/WellcomePage/WellcomePage.js\";\r\nimport DocumentsPage from \"views/DocumentsPage/DocumentsPage.js\";\r\n\r\nimport ViewAccountPage from \"views/ViewAccountPage/ViewAccountPage.js\";\r\nimport CreatePayment from \"views/CreatePaymentPage/CreatePaymentPlanPage.js\";\r\nimport LandingPage from \"views/LandingPage/LandingPage.js\";\r\nimport LandingPageCreateUser from \"views/LandingPage/LandingPageCreateUser.js\";\r\nimport QuickPayPage from \"views/QuickPayPage/QuickPayPage.js\";\r\nimport QuickPayPaymentStatus from \"views/QuickPayPage/QuickPayPaymentStatus.js\";\r\nimport PayNowPaymentStatus from \"views/PayNowPage/PayNowPaymentStatus.js\";\r\nimport PayNowPage from \"views/PayNowPage/PayNowPage.js\";\r\nimport ViewOfferPage from \"views/ViewOfferPage/ViewOfferPage.js\";\r\nimport FaqPage from \"views/FaqPage/FaqPage.js\";\r\nimport BudgetPage from \"views/BudgetPage/BudgetPage.js\";\r\nimport RequestCallBackPage from \"views/RequestCallBackPage/RequestCallBackPageLoggendIn.js\";\r\nimport ChangePassword from \"views/ChangePassworOrPin/ChangePasswordOrPinPage.js\";\r\nimport faq from \"views/FaqPageLogin/FaqPageLogin.js\";\r\nimport IframePage from \"views/IframePage/IframePage\";\r\n\r\nimport MessagesPage from \"views/MessagesPage/MessagesPage.js\";\r\n\r\nimport { MuiPickersUtilsProvider } from \"@material-ui/pickers\";\r\nimport { changePassword } from \"utils/XRSAPIs\";\r\n\r\nconst PrivateRoute = ({ component: Component, auth }) => (\r\n \r\n setopenFab(!openFab)}\r\n className={classes.fab + \" \" + classes.fabIconHolder}\r\n >\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {loading == true ? handleDispatchTrue(),\r\n dispatchContextFalse: () => handleDispatchFalse(),\r\n\r\n stateDrawer: drawerReducer.drawer,\r\n dispatchDrawer: (state) => handleDispatchDrawer(state),\r\n dispatchDrawerOne: (state) => handleDispatchDrawerOne(state),\r\n dispatchDrawerTwo: (state) => handleDispatchDrawerTwo(state),\r\n dispatchDrawerThree: (state) => handleDispatchDrawerThree(state),\r\n\r\n dispatchIntercomKey: (key, visible) =>\r\n handleIntercomKey(key, visible),\r\n\r\n stateOne: drawerReducerOne.drawer,\r\n stateTwo: drawerReducerTwo.drawer,\r\n stateThree: drawerReducerThree.drawer,\r\n\r\n statePlanText: planText,\r\n setstatePlanText: (value) => setPlanText(value),\r\n\r\n stateCallbacks: callbacksReducer.callbacks,\r\n dispatchCallbacksReducer: (callbacks) =>\r\n handleDispatchCallbacks(callbacks),\r\n\r\n stateInfoDialog: (title, value, redirectUrl) =>\r\n OpenInfoDialog(title, value, redirectUrl),\r\n\r\n stateSelectedAccount: selectAccountReducer.account,\r\n dispatchSelectAccountReducer: (account) =>\r\n handleDispatchSelectAccountReducer(account),\r\n\r\n stateCustomer: customerReducer.customer,\r\n dispatchCustomerReducer: (customer) =>\r\n handleDispatchCustomer(customer),\r\n\r\n dispatchMenuReducer: (menu) => handleMenuReducer(menu),\r\n\r\n stateMenu: menuReducer.menu,\r\n\r\n stateAccounts: accountsReducer.accounts,\r\n stateNumAcctions: numAccounts,\r\n dispatchAccountsReducer: (accounts) =>\r\n handleDispatchAccounts(accounts),\r\n\r\n stateSite: siteReducer.site,\r\n dispatchSiteReducer: (site) => handleDispatchSite(site),\r\n\r\n // stateSessionTimeout: sessionTimeout.sessionTimeout,\r\n // dispatchSessionTimeoutReducer: (time) =>\r\n // handleDispatchSessionTimeout(time),\r\n\r\n // stateOverallTimeout: overallTimeout.overallTimeout,\r\n // dispatchOverallTimeoutReducer: (time) =>\r\n // handleDispatchOverallTimeout(time),\r\n\r\n stateOffer: offerReducer.offer,\r\n dispatchOfferReducer: (offer) => handleDispatchOffer(offer),\r\n //Form Reducer\r\n useContextChangeState: stateFormReducer.user_textChange,\r\n useContextSubmitState: stateFormReducer.user_textSubmit,\r\n useContextSubmit: (event) => handleFormSubmit(event),\r\n useContextChange: (event) => handleFormChange(event),\r\n\r\n //Auth Reducer\r\n authState: stateAuthReducer.is_authenticated,\r\n profileState: stateAuthReducer.profile,\r\n handleUserLogin: () => handleLogin(),\r\n handleUserLogout: () => handleLogout(),\r\n handleUserAddProfile: (profile) => handleAddProfile(profile),\r\n handleUserRemoveProfile: () => handleRemoveProfile(),\r\n\r\n //Handle auth\r\n handleAuth: (props) => handleAuthentication(props),\r\n authObj: auth,\r\n }}\r\n >\r\n handleClose(e)}\r\n />\r\n handleInfoClose(e, redirect)}\r\n />\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default ContextState;\r\n\r\nconst useStyles = makeStyles({\r\n button: {\r\n textAlign: \"center\",\r\n },\r\n});\r\n\r\nif (window.performance) {\r\n if (performance.navigation.type == 1) {\r\n auth.logout();\r\n }\r\n}\r\n\r\nfunction IdleDialog(props) {\r\n const classes = useStyles();\r\n const { onClose, selectedValue, open } = props;\r\n const [left, setLeft] = React.useState(0);\r\n const { value, setValue } = React.useState(0);\r\n const calculateLeft = (from) => {\r\n return from - left;\r\n };\r\n const [autoLogout, setAutoLogout] = React.useState(60);\r\n const [display, setDisplay] = React.useState(60);\r\n const handleClose = (e) => {\r\n onClose(e);\r\n setAutoLogout(0);\r\n };\r\n const handleListItemClick = (value) => {\r\n onClose(value);\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction InfoDialog(props) {\r\n const classes = useStyles();\r\n const { onClose, open, title, text, redirectUrl } = props;\r\n const { value, setValue } = React.useState(0);\r\n const handleClose = (e) => {\r\n onClose(e, redirectUrl);\r\n };\r\n\r\n const handleListItemClick = (value) => {\r\n onClose(value, redirectUrl);\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport history from \"./utils/history\";\r\n\r\nimport ContextState from \"./context_state_config\";\r\nimport { primaryColor } from \"assets/jss/xrs.js\";\r\nimport ReactGA from \"react-ga\";\r\nimport * as URLS from \"./utils/XRSAPIs\";\r\n\r\nimport { Provider } from \"react-redux\";\r\nimport { store } from \"./store/redux/createReduxStore\";\r\n\r\nconst App = () => {\r\n const [trackingCode, settrackingCode] = React.useState(null);\r\n const [trackingCodeInit, settrackingCodeInit] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n document.body.style.backgroundColor = primaryColor[14];\r\n\r\n fetch(URLS.GetSiteDetatilsAPIUrl, {\r\n method: \"GET\",\r\n })\r\n .then((res) => {\r\n if (res.status == 200 || res.status == 201) {\r\n return res.json();\r\n } else {\r\n res.json().then((data) => {\r\n // ApiErrorHandler(\"Get Site Detatils\", data, context);\r\n });\r\n throw Error(\"\");\r\n }\r\n })\r\n .then((response) => {\r\n settrackingCode(response.trackingcode);\r\n })\r\n .catch((error) => {});\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n if (trackingCode) {\r\n ReactGA.initialize(trackingCode);\r\n settrackingCodeInit(true);\r\n }\r\n }, [trackingCode]);\r\n\r\n React.useEffect(() => {\r\n if (trackingCodeInit) {\r\n const unlisten = history.listen((location) => {\r\n ReactGA.pageview(location.pathname);\r\n });\r\n return () => {\r\n unlisten();\r\n };\r\n }\r\n }, [history]);\r\n\r\n return (\r\n