\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {filteredMenuItems.map((menuItem) => {\r\n const {\r\n subRoutes,\r\n selected,\r\n icon,\r\n name,\r\n isExternal,\r\n path,\r\n } = menuItem;\r\n\r\n return menuItem.subRoutes && menuItem.subRoutes.length > 0 ? (\r\n
\r\n );\r\n })}\r\n
\r\n \r\n\r\n {isSideBarOpen && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nSideMenu.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n isSideBarOpen: PropTypes.bool.isRequired,\r\n handleSideBarClose: PropTypes.func.isRequired,\r\n theme: PropTypes.object.isRequired,\r\n sideMenuEntries: PropTypes.array.isRequired,\r\n userPermissions: PropTypes.array,\r\n profileName: PropTypes.string.isRequired,\r\n profileMenuEntries: PropTypes.array.isRequired,\r\n featureFlags: PropTypes.object,\r\n};\r\n\r\nSideMenu.defaultProps = {\r\n userPermissions: [],\r\n featureFlags: {},\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(SideMenu);\r\n","import { styled } from '@material-ui/core';\r\n\r\nexport const Container = styled('div')({});\r\n\r\nexport const ContentBody = styled('p')(({ theme }) => ({\r\n color: theme.palette.common.black,\r\n fontSize: '14px',\r\n}));\r\n\r\nexport const ContentSubHeading = styled('h3')(({ theme }) => ({\r\n color: theme.palette.common.black,\r\n fontSize: '16px',\r\n fontWeight: 'bold',\r\n padding: '15px 0px 10px 0px',\r\n}));\r\n\r\nexport const HrBreak = styled('hr')({\r\n borderRadius: '6px',\r\n borderTop: '1px solid rgba(0, 0, 0, 0.08)',\r\n margin: '0px -15px 0px -15px',\r\n});\r\n\r\nexport const ContentUnorderedList = styled('ul')(({ theme }) => ({\r\n fontSize: '14px',\r\n color: theme.palette.common.black,\r\n}));\r\n\r\nexport const ContentOrderedList = styled('ol')(({ theme }) => ({\r\n fontSize: '14px',\r\n color: theme.palette.common.black,\r\n}));\r\n","import React from 'react';\r\nimport * as Styled from './TcContent.styled';\r\n\r\nconst TcContent = () => {\r\n return (\r\n \r\n \r\n These terms and conditions govern your use of this website, by using\r\n this website you accept these terms and conditions in full. If you\r\n disagree with these terms and conditions or any part of these terms and\r\n conditions, you must not use this website.\r\n \r\n Use of content \r\n \r\n Debitsuccess owns the copyright and all other intellectual property\r\n rights associated with the content on this website. We cannot warrant\r\n that use of the site will not be interrupted or unavailable due to any\r\n factors outside our control. You may view, download or print off content\r\n from this site for your personal, non-commercial, use and information,\r\n subject to the following restrictions.\r\n \r\n \r\n You must not:\r\n \r\n \r\n \r\n copy, reproduce, republish or duplicate the content of this website;\r\n \r\n \r\n create an archive or database containing the content, for any business\r\n purpose or other commercial exploitation, without specific consent;\r\n \r\n sell, rent or sub-licence material from this website; or \r\n \r\n copy, distribute or display the website or any part of it to third\r\n parties.\r\n \r\n \r\n Acceptable use \r\n \r\n You must not use this website in any way that causes, or may cause,\r\n damage to the website or impairment of the availability or accessibility\r\n of the website; or in any way which is unlawful, illegal, fraudulent or\r\n harmful, or in connection with any unlawful, illegal, fraudulent or\r\n harmful purpose or activity.\r\n \r\n \r\n You must not use this website to copy, store, host, transmit, send, use,\r\n publish or distribute any material which consists of (or is linked to)\r\n any spyware, computer virus, Trojan horse, worm, keystroke logger,\r\n rootkit or other malicious computer software.\r\n \r\n \r\n You must not conduct any systematic or automated data collection\r\n activities on or in relation to this website without Debitsuccess’\r\n express written consent.\r\n \r\n Restricted access \r\n \r\n Debitsuccess reserves the right to restrict access to areas of this\r\n website, or indeed this entire website at Debitsuccess’ discretion.\r\n \r\n \r\n If Debitsuccess provides you with a user ID and password to enable you\r\n to access restricted areas of this website or services, you must ensure\r\n that the user ID and password are kept confidential.\r\n \r\n \r\n Debitsuccess may disable your user ID and password at Debitsuccess’ sole\r\n discretion without notice or explanation.\r\n \r\n \r\n Changes to customers’ details\r\n \r\n \r\n You confirm that should you make any changes to your customers’ details\r\n or particulars through accessing a restricted area of this website,\r\n that:\r\n \r\n \r\n you have the required authority to make such change(s); \r\n \r\n you will, in the event of a dispute arising as a consequence of such\r\n change(s), provide Debitsuccess with evidence to substantiate your\r\n authority to make the change(s) within 48 hours of Debitsuccess\r\n requesting evidence;\r\n \r\n \r\n you are solely responsible to your customers for any losses, costs,\r\n actions, claims, demands, expenses or other liabilities arising as a\r\n result of the change(s); and\r\n \r\n \r\n you agree to indemnify Debitsuccess to the fullest extent possible\r\n under law from any losses, costs, actions, claims, demands, expenses\r\n or other liabilities arising as a result of the change(s).\r\n \r\n \r\n User Content \r\n \r\n In these terms and conditions, “your user content” means material\r\n (including without limitation text, images, audio material, video\r\n material and audio-visual material) that you submit to this website.\r\n \r\n \r\n You grant to Debitsuccess a worldwide, irrevocable, non-exclusive,\r\n royalty-free license to use, reproduce, adapt, publish, translate and\r\n distribute your user content in any existing or future media. You also\r\n grant to Debitsuccess the right to sub-license these rights, and the\r\n right to bring an action for infringement of these rights.\r\n \r\n \r\n Your user content must not be illegal or unlawful, must not infringe any\r\n third party’s legal rights, and must not be capable of giving rise to\r\n legal action whether against you or Debitsuccess or a third party (in\r\n each case under any applicable law).\r\n \r\n \r\n You must not submit any user content to the website that is or has ever\r\n been the subject of any threatened or actual legal proceedings or other\r\n similar complaint.\r\n \r\n \r\n Debitsuccess reserves the right to edit or remove any material submitted\r\n to this website, or stored on Debitsuccess’ servers, or hosted or\r\n published upon this website.\r\n \r\n \r\n Notwithstanding Debitsuccess’ rights under these terms and conditions in\r\n relation to user content, Debitsuccess does not undertake to monitor the\r\n submission of such content to this website.\r\n \r\n No warranties \r\n \r\n This website is provided “as is” without any representations or\r\n warranties, express or implied. Debitsuccess makes no representations or\r\n warranties in relation to this website or the information and materials\r\n provided on this website.\r\n \r\n \r\n Without prejudice to the generality of the foregoing paragraph,\r\n Debitsuccess does not warrant that:\r\n \r\n \r\n \r\n this website will be constantly available, or available at all; or\r\n \r\n \r\n the information on this website is complete, true, accurate or\r\n non-misleading.\r\n \r\n \r\n \r\n Nothing on this website constitutes, or is meant to constitute, advice\r\n of any kind.\r\n \r\n \r\n Limitation of liability\r\n \r\n \r\n Debitsuccess will not be liable to you (whether under the law of\r\n contract, the law of torts or otherwise) in relation to the contents of,\r\n or use of, or otherwise in connection with, this website:\r\n \r\n \r\n for any indirect, special or consequential loss; or \r\n \r\n for any business losses, loss of revenue, income, profits or\r\n anticipated savings, loss of contracts or business relationships, loss\r\n of reputation or goodwill, or loss or corruption of information or\r\n data.\r\n \r\n \r\n \r\n These limitations of liability apply even if Debitsuccess has been\r\n expressly advised of the potential loss.\r\n \r\n\r\n Exceptions \r\n \r\n Nothing in this website disclaimer will exclude or limit any warranty\r\n implied by law that it would be unlawful to exclude or limit\r\n Debitsuccess’ liability in respect of any:\r\n \r\n \r\n death or personal injury caused by Debitsuccess’ negligence; \r\n \r\n fraud or fraudulent misrepresentation on the part of Debitsuccess; or\r\n \r\n \r\n matter which it would be illegal or unlawful for Debitsuccess to\r\n exclude or limit or to attempt or purport to exclude or limit, its\r\n liability.\r\n \r\n \r\n Reasonableness \r\n \r\n By using this website, you agree that the exclusions and limitations of\r\n liability set out in this website disclaimer are reasonable.\r\n \r\n \r\n If you do not think they are reasonable you must not use this website.\r\n \r\n Other Parties \r\n \r\n You accept that, as a limited liability entity, Debitsuccess has an\r\n interest in limiting the personal liability of its employees. You agree\r\n that you will not bring any claim personally against Debitsuccess’\r\n employees in respect of any losses you suffer in connection with this\r\n website.\r\n \r\n \r\n Without prejudice to the foregoing paragraph, you agree that the\r\n limitations of warranties and liability set out in this website\r\n disclaimer will protect Debitsuccess’ employees, agents, subsidiaries,\r\n successors, assigns and sub-contractors as well as Debitsuccess.\r\n \r\n \r\n Unenforceable provisions\r\n \r\n \r\n If any provision of this website disclaimer is, or is found to be,\r\n unenforceable under applicable law, that will not affect the\r\n enforceability of the other provisions of this website disclaimer.\r\n \r\n Indemnity \r\n \r\n Without limiting any other provision of these terms and conditions, you\r\n agree to indemnify Debitsuccess and undertake to keep Debitsuccess\r\n indemnified against any losses, damages, costs, liabilities and expenses\r\n (including without limitation legal expenses and any amount paid by\r\n Debitsuccess to a third party in settlement of a claim or dispute on the\r\n advice of Debitsuccess’ legal advisors) incurred or suffered by\r\n Debitsuccess arising out of any breach by you of any provision of these\r\n terms and conditions.\r\n \r\n \r\n Breaches of these terms and conditions\r\n \r\n \r\n Without prejudice to Debitsuccess’ other rights under these terms and\r\n conditions, if you breach these terms and conditions in any way,\r\n Debitsuccess may take such action as Debitsuccess deems appropriate to\r\n deal with the breach, including suspending your access to the website,\r\n prohibiting you from accessing the website, blocking computers using\r\n your IP address from accessing the website, contacting your internet\r\n service provider to request that they block your access to the website\r\n and/or bringing court proceedings against you.\r\n \r\n Variation \r\n \r\n Debitsuccess may revise these terms and conditions from time to time.\r\n Revised terms and conditions will apply to the use of this website from\r\n the date of the publication of the revised terms and conditions on this\r\n website. Please check this page regularly to ensure you are familiar\r\n with the current version.\r\n \r\n Severability \r\n \r\n If a provision of these terms and conditions is determined by any court\r\n or other competent authority to be unlawful and/or unenforceable, the\r\n other provisions will continue in effect. If any unlawful and/or\r\n unenforceable provision would be lawful or enforceable if part of it\r\n were deleted, that part will be deemed to be deleted, and the rest of\r\n the provision will continue in effect.\r\n \r\n Entire agreement \r\n \r\n These terms and conditions constitute the agreement between you and\r\n Debitsuccess in relation to your use of this website, and supersede all\r\n previous agreements in respect of your use of this website.\r\n \r\n
\r\n );\r\n};\r\n\r\nTcContent.propTypes = {};\r\n\r\nexport default TcContent;\r\n","import {\r\n styled,\r\n DialogTitle,\r\n DialogContent,\r\n DialogActions,\r\n} from '@material-ui/core';\r\nimport { FilledButton, BackgroundPaper } from '@ds/react-components';\r\n\r\nexport const PageContainer = styled('div')({});\r\n\r\nexport const TermsTitle = styled('h1')(({ theme }) => ({\r\n color: theme.palette.common.darkgray,\r\n fontSize: '26px',\r\n fontWeight: 'bold',\r\n}));\r\n\r\nexport const NonModalPaper = styled(BackgroundPaper)({\r\n width: '100%',\r\n marginTop: '24px',\r\n});\r\n\r\nexport const NonModalHeaderContainer = styled('div')({\r\n padding: '15px',\r\n borderBottom: '1px solid rgba(0, 0, 0, 0.08)',\r\n});\r\n\r\nexport const NonModalBodyContainer = styled('div')({\r\n padding: '15px',\r\n});\r\n\r\nexport const TermsModalTitle = styled('h2')(({ theme }) => ({\r\n color: theme.palette.common.black,\r\n fontSize: '20px',\r\n fontWeight: 'bold',\r\n}));\r\n\r\nexport const NonModalCheckboxContainer = styled('div')({\r\n marginTop: '12px',\r\n display: 'flex',\r\n});\r\n\r\nexport const ModalHeaderContainer = styled(DialogTitle)({\r\n padding: '15px',\r\n borderBottom: '1px solid rgba(0, 0, 0, 0.08)',\r\n margin: 0,\r\n});\r\n\r\nexport const ModalBodyContainer = styled(DialogContent)({\r\n padding: '15px',\r\n});\r\n\r\nexport const ModalActionsContainer = styled(DialogActions)({\r\n padding: '15px',\r\n justifyContent: 'flex-start',\r\n borderTop: '1px solid rgba(0, 0, 0, 0.08)',\r\n});\r\n\r\nexport const ModalActionsWrapper = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n width: '100%',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-start',\r\n [theme.breakpoints.up('sm')]: {\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n}));\r\n\r\nexport const ActionButtonsContainer = styled('div')(({ theme }) => ({\r\n marginTop: '15px',\r\n alignSelf: 'flex-end',\r\n [theme.breakpoints.up('sm')]: {\r\n marginTop: 0,\r\n alignSelf: 'auto',\r\n },\r\n}));\r\n\r\nexport const AcceptButton = styled(FilledButton)({\r\n marginLeft: '4px',\r\n});\r\n","import React, { useState, useCallback } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { Dialog } from '@material-ui/core';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport { FilledButton, Checkbox } from '@ds/react-components';\r\nimport {\r\n setUserTcPreference,\r\n getUserTcPreference,\r\n} from 'utils/userPreferences';\r\nimport TcContent from './TcContent';\r\n\r\nimport * as Styled from './TermsAndConditions.styled';\r\n\r\nconst TermsAndConditions = (props) => {\r\n const { hasAcceptedTC, updateTcAccepted, userId } = props;\r\n\r\n const history = useHistory();\r\n\r\n const [tcReadStatus, setTcReadStatus] = useState({\r\n tcReadComplete: false,\r\n tcCheckboxChecked: false,\r\n });\r\n\r\n const onClickDismiss = () => {\r\n history.push('/Logout');\r\n };\r\n\r\n const onClickAccept = () => {\r\n updateTcAccepted(true);\r\n setUserTcPreference(userId); //The server update is not immediate. So storing locally as well.\r\n };\r\n\r\n const onTcCheckboxChange = () => {\r\n setTcReadStatus((prevState) => ({\r\n ...prevState,\r\n tcCheckboxChecked: !prevState.tcCheckboxChecked,\r\n }));\r\n };\r\n\r\n const scrolledToEnd = useCallback(() => {\r\n setTcReadStatus((prevState) => ({\r\n ...prevState,\r\n tcReadComplete: true,\r\n }));\r\n }, [setTcReadStatus]);\r\n\r\n const onModalScroll = useCallback(\r\n (event) =>\r\n event.target.offsetHeight + event.target.scrollTop >=\r\n event.target.scrollHeight - 10 && scrolledToEnd(),\r\n [scrolledToEnd]\r\n );\r\n\r\n //If the user has already accepted the terms and condition then do not show the accept option again.\r\n if (hasAcceptedTC || getUserTcPreference(userId)) {\r\n return (\r\n \r\n \r\n {'Terms and Conditions'} \r\n \r\n \r\n \r\n {'Debitsuccess Website Terms and Conditions'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {'Debitsuccess Terms and Conditions'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {'Decline'}\r\n \r\n \r\n {'Accept'}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nTermsAndConditions.propTypes = {\r\n hasAcceptedTC: PropTypes.bool,\r\n updateTcAccepted: PropTypes.func.isRequired,\r\n userId: PropTypes.string.isRequired,\r\n};\r\n\r\nTermsAndConditions.defaultProps = {\r\n hasAcceptedTC: false,\r\n};\r\n\r\nexport default TermsAndConditions;\r\n","import { connect } from 'react-redux';\r\nimport { updateTcAccepted } from 'ducks/auth';\r\nimport TermsAndConditions from './TermsAndConditions';\r\n\r\nconst mapStateToProps = (state) => ({\r\n hasAcceptedTC: state.auth.hasAcceptedTC,\r\n userId: state.auth.userId,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n updateTcAccepted,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TermsAndConditions);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"none\",\n fillRule: \"evenodd\",\n transform: \"translate(1)\"\n}, React.createElement(\"circle\", {\n cx: 77,\n cy: 41,\n r: 40,\n fill: \"#B4DAF6\"\n}), React.createElement(\"circle\", {\n cx: 211,\n cy: 85,\n r: 45,\n fill: \"#F1F4F7\"\n}), React.createElement(\"circle\", {\n cx: 319,\n cy: 35,\n r: 35,\n fill: \"#DAF1CB\"\n}), React.createElement(\"path\", {\n fill: \"#004A8C\",\n fillRule: \"nonzero\",\n stroke: \"#FFF\",\n strokeWidth: 2,\n d: \"M224.75 29h-62.5c-3.45 0-6.25 2.8-6.25 6.25v37.5c0 3.45 2.8 6.25 6.25 6.25h25l-3.125 12.5h-9.375a2.09 2.09 0 0 0-2.083 2.083 2.09 2.09 0 0 0 2.083 2.084h37.5a2.09 2.09 0 0 0 2.083-2.084 2.09 2.09 0 0 0-2.083-2.083h-9.375L199.75 79h25c3.45 0 6.25-2.8 6.25-6.25v-37.5c0-3.45-2.8-6.25-6.25-6.25zm-36.328 62.5l2.083-8.333h5.99l2.083 8.333h-10.156zm38.411-18.75a2.09 2.09 0 0 1-2.083 2.083h-62.5a2.09 2.09 0 0 1-2.083-2.083v-37.5a2.09 2.09 0 0 1 2.083-2.083h62.5a2.09 2.09 0 0 1 2.083 2.083v37.5zM64.167 35H5.833A5.835 5.835 0 0 0 0 40.833v42.778a5.835 5.835 0 0 0 5.833 5.833h58.334A5.835 5.835 0 0 0 70 83.611V40.833A5.835 5.835 0 0 0 64.167 35zM5.833 38.889h58.334a1.95 1.95 0 0 1 1.944 1.944v5.834H3.89v-5.834a1.95 1.95 0 0 1 1.944-1.944zm58.334 46.667H5.833A1.95 1.95 0 0 1 3.89 83.61V58.333H66.11v25.278a1.95 1.95 0 0 1-1.944 1.945zM23.333 75.347v.972c0 .803-.656 1.459-1.458 1.459h-8.75a1.463 1.463 0 0 1-1.458-1.459v-.972c0-.802.656-1.458 1.458-1.458h8.75c.802 0 1.458.656 1.458 1.458zm23.334 0v.972c0 .803-.657 1.459-1.459 1.459H28.681a1.463 1.463 0 0 1-1.459-1.459v-.972c0-.802.656-1.458 1.459-1.458h16.527c.802 0 1.459.656 1.459 1.458zM319.122 71.053a2.128 2.128 0 0 0 2.121-2.122 2.128 2.128 0 0 0-2.121-2.121A2.128 2.128 0 0 0 317 68.93a2.12 2.12 0 0 0 2.122 2.122zm81.685-25.434l-15.051.027-6.79-6.617a6.31 6.31 0 0 0-4.495-1.87h-13.393c-1.38 0-2.665.517-3.753 1.326-1.114-.862-2.48-1.366-3.885-1.366h-9.216a6.365 6.365 0 0 0-4.495 1.87l-6.63 6.63H318.06c-.584 0-1.061.478-1.061 1.061v2.122c0 .583.477 1.06 1.06 1.06h7.427V75.31h-7.426c-.584 0-1.061.477-1.061 1.06v2.122c0 .584.477 1.061 1.06 1.061h7.427a4.228 4.228 0 0 0 4.23-4.204h4.402l10.808 10.344c3.951 3.195 9.52 3.103 13.393-.027l.955.822a7 7 0 0 0 4.442 1.578 7.05 7.05 0 0 0 5.49-2.599l2.904-3.567c2.174 1.18 5.689 1.194 7.956-1.591l1.26-1.552a6.358 6.358 0 0 0 1.392-3.408h6.445a4.236 4.236 0 0 0 4.23 4.204h7.426c.583 0 1.06-.477 1.06-1.06V76.37c0-.584-.477-1.061-1.06-1.061h-7.426V49.89l7.426-.027c.583 0 1.06-.478 1.06-1.061V46.68a1.075 1.075 0 0 0-1.073-1.06zm-22.782 30.447l-1.26 1.551a2.118 2.118 0 0 1-2.983.305l-2.36-1.91-5.504 6.763c-.994 1.234-2.785 1.353-3.898.451l-4.058-3.46-1.38 1.697c-2.214 2.718-6.232 3.142-8.83 1.047L335.83 71.093h-6.1V49.849h5.119l7.863-7.863a2.13 2.13 0 0 1 1.499-.623h9.216c.119.291.04.093.146.384l-7.824 7.187a9.087 9.087 0 0 0-.557 12.85c1.896 2.069 7.77 5.211 12.85.557l3.023-2.772 16.655 13.513a2.137 2.137 0 0 1 .305 2.984zm11.112-4.973h-7.585c-.331-.464-.703-.915-1.167-1.3l-16.164-13.128 3.766-3.46a2.12 2.12 0 0 0 .132-2.998 2.131 2.131 0 0 0-2.997-.132l-9.958 9.123c-1.91 1.737-5.119 1.591-6.856-.292a4.86 4.86 0 0 1 .292-6.855l11.02-10.105a2.133 2.133 0 0 1 1.431-.557h13.394c.57 0 1.1.226 1.511.637l8.05 7.837h5.131v21.23zm10.609-4.27a2.128 2.128 0 0 0-2.122 2.122c0 1.167.955 2.121 2.122 2.121a2.128 2.128 0 0 0 2.121-2.121 2.12 2.12 0 0 0-2.121-2.122z\"\n}));\n\nvar SvgWelcome = function SvgWelcome(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 404,\n height: 130,\n viewBox: \"0 0 404 130\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgWelcome, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/welcome.7324d264.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport { withStyles, Paper, Typography } from '@material-ui/core';\r\nimport { ReactComponent as WelcomeImage } from 'assets/welcome.svg';\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n width: '100%',\r\n height: '80vh',\r\n display: 'flex',\r\n textAlign: 'center',\r\n alignItems: 'center',\r\n },\r\n content: {\r\n flex: 1,\r\n marginBottom: '10vh',\r\n },\r\n subHeading: {\r\n color: '#6b6c6f',\r\n fontWeight: 'normal',\r\n },\r\n});\r\n\r\nconst Welcome = (props) => {\r\n const { classes } = props;\r\n return (\r\n \r\n \r\n \r\n Welcome to SelfService, a Debitsuccess online portal.\r\n \r\n \r\n We make billing simpler for you!\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withStyles(styles)(Welcome);\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport Welcome from './Welcome';\r\n\r\nconst HomePage = (props) => {\r\n const { permissions } = props;\r\n const history = useHistory();\r\n useEffect(() => {\r\n if (\r\n permissions.includes('IsAdmin') ||\r\n permissions.includes('CanAccessCustomerInfo')\r\n ) {\r\n history.push('/Customers');\r\n }\r\n }, [history, permissions]);\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nHomePage.propTypes = {\r\n permissions: PropTypes.array,\r\n};\r\n\r\nHomePage.defaultProps = {\r\n permissions: [],\r\n};\r\n\r\nexport default HomePage;\r\n","import { connect } from 'react-redux';\r\nimport HomePage from './HomePage';\r\n\r\nconst mapStateToProps = (state) => ({\r\n permissions: state.auth.permissions,\r\n hasAcceptedTC: state.auth.hasAcceptedTC,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(HomePage);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { compose } from 'redux';\r\nimport { BounceLoader } from 'react-spinners';\r\nimport PropTypes from 'prop-types';\r\nimport 'iframe-resizer';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { oldSelfServiceLink, oidcConfig } from 'config';\r\n\r\nconst styles = {\r\n frame: {\r\n width: '1px',\r\n minWidth: '100%',\r\n border: 'none',\r\n visibility: 'hidden',\r\n },\r\n spinner: {\r\n width: '100%',\r\n position: 'relative',\r\n top: '200px',\r\n justifyContent: 'center',\r\n display: 'flex',\r\n },\r\n};\r\n\r\nconst EmbedFrame = (props) => {\r\n const { frameSrc, classes, locationKey } = props;\r\n\r\n const [isFrameLoading, setIsFrameLoading] = useState(true);\r\n\r\n const frameRef = useRef(null);\r\n\r\n const history = useHistory();\r\n\r\n useEffect(() => {\r\n bindIframeOnLoadEvent();\r\n });\r\n\r\n const bindIframeOnLoadEvent = () => {\r\n if (!frameRef) return;\r\n\r\n frameRef.current.onload = () => {\r\n try {\r\n window.iFrameResize(\r\n {\r\n log: false,\r\n onMessage: (messageData) => {\r\n //receving iframe url (supports cross domain), TODO: check iframe link here\r\n },\r\n },\r\n '#selfserviceFrame'\r\n ); //resize the iframe to prevent scrolling\r\n window.scroll(0, 0);\r\n // console.log('Frame Source: ' + frame.contentWindow.location.href);\r\n checkIframeStillLoggedIn(frameRef.current);\r\n } catch (err) {\r\n console.error('EmbedFrame Error: ' + err);\r\n }\r\n setIsFrameLoading(false);\r\n frameRef.current.style.visibility = 'visible';\r\n };\r\n };\r\n\r\n const checkIframeStillLoggedIn = (frame) => {\r\n //Just a hack to check if the iframe app is logged out, this only works in the same origin (i.e.not locally with IIS Express)\r\n const frameLocation = frame.contentWindow.location.href.toLowerCase();\r\n const identityServerUrl = oidcConfig.authority.toLowerCase();\r\n const oldSsLink = oldSelfServiceLink.toLowerCase();\r\n if (\r\n frameLocation.includes(identityServerUrl + '/account/login') ||\r\n frameLocation.includes(identityServerUrl + '/account/logout')\r\n ) {\r\n history.push('/Logout');\r\n } else if (\r\n frameLocation === oldSsLink + '/customer' ||\r\n frameLocation === oldSsLink + '/customer/'\r\n ) {\r\n history.push('/');\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\nIFramePage.propTypes = {\r\n userId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n frameSrc: PropTypes.string.isRequired,\r\n noAppendQuery: PropTypes.bool,\r\n};\r\n\r\nIFramePage.defaultProps = {\r\n appendQuery: true,\r\n};\r\nexport default connect(\r\n (state) => ({\r\n userId: state.auth.userId,\r\n }),\r\n null\r\n)(IFramePage);\r\n","export const iframeSrcAppendQuery = (iframeSrc, siteQueryString) => {\r\n const iframeUrl = iframeSrc.split('?')[0];\r\n const iframeQueryString = iframeSrc.split('?')[1];\r\n\r\n const iframeQuery = new URLSearchParams(iframeQueryString);\r\n const siteQuery = new URLSearchParams(siteQueryString);\r\n\r\n siteQuery.forEach((value, key) => {\r\n iframeQuery.append(key, value);\r\n });\r\n\r\n return iframeUrl + '?' + iframeQuery.toString();\r\n};\r\n","import React from 'react';\r\nimport {\r\n Redirect,\r\n useLocation,\r\n useRouteMatch,\r\n useParams,\r\n} from 'react-router-dom';\r\n\r\nconst CustomerDetailsRedirect = () => {\r\n const location = useLocation();\r\n\r\n // The old link for overview page redirect. Remove after some days.\r\n const oldOverviewLinkMatch = useRouteMatch('/Customers/:adfitNo');\r\n\r\n const { adfitNo } = useParams();\r\n\r\n if (location.search && location.search.startsWith('?debitsuccessId=')) {\r\n let pathAdfitNo = location.search.replace('?debitsuccessId=', '');\r\n return \r\n \r\n {checkboxSelection && (\r\n \r\n 0 && numSelected < rowCount}\r\n checked={rowCount > 0 && numSelected === rowCount}\r\n onChange={onSelectAllClick}\r\n inputProps={{ 'aria-label': 'select all items' }}\r\n />\r\n \r\n )}\r\n {rows.map((row) => (\r\n \r\n {enableSorting ? (\r\n \r\n \r\n {row.label}\r\n \r\n \r\n ) : (\r\n {row.label}
\r\n )}\r\n \r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nTableHead.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n onRequestSort: PropTypes.func.isRequired,\r\n onSelectAllClick: PropTypes.func.isRequired,\r\n order: PropTypes.string,\r\n orderBy: PropTypes.string,\r\n rowCount: PropTypes.number.isRequired,\r\n enableSorting: PropTypes.bool,\r\n checkboxSelection: PropTypes.bool,\r\n};\r\n\r\nexport default withStyles(styles)(TableHead);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Pagination from 'react-paginate';\r\nimport RightIcon from '@material-ui/icons/ChevronRight';\r\nimport LeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport ButtonBase from '@material-ui/core/ButtonBase';\r\nimport classNames from 'classnames';\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n pageInfo: {\r\n marginRight: theme.spacing(1),\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n [theme.breakpoints.down('sm')]: {\r\n display: 'none',\r\n },\r\n },\r\n pagination: {\r\n marginLeft: 'auto',\r\n display: 'flex',\r\n '& a': {\r\n border: `1px solid ${theme.palette.xpl.stoke}`,\r\n marginLeft: -1,\r\n padding: '7px 12px',\r\n textAlign: 'center',\r\n display: 'block',\r\n height: '32px',\r\n width: 'auto',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n color: theme.palette.xpl.text.primary,\r\n backgroundColor: theme.palette.xpl.foreground,\r\n },\r\n '& li:first-child a': {\r\n padding: 0,\r\n borderRadius: `100px 0px 0px 100px`,\r\n },\r\n '& li:first-child .MuiTouchRipple-root': {\r\n marginTop: '1.5px',\r\n borderRadius: `100px 0px 0px 100px`,\r\n },\r\n '& li:first-child button': {\r\n padding: '3px 4px 2px 4px',\r\n },\r\n '& li:last-child a': {\r\n padding: 0,\r\n borderRadius: `0px 100px 100px 0px`,\r\n },\r\n '& li:last-child .MuiTouchRipple-root': {\r\n marginTop: '1.5px',\r\n borderRadius: `0px 100px 100px 0px`,\r\n },\r\n '& li:last-child button': {\r\n padding: '3px 4px 2px 4px',\r\n },\r\n '& li.break': {\r\n fontWeight: 'bold',\r\n },\r\n '& li.active a': {\r\n backgroundColor: theme.palette.xpl.secondary.background,\r\n borderColor: theme.palette.xpl.stoke,\r\n color: theme.palette.xpl.text.primary,\r\n },\r\n },\r\n paginationList: {},\r\n});\r\nconst TablePagination = (props) => {\r\n const {\r\n classes,\r\n className,\r\n dataCount,\r\n onPageChange,\r\n rowsPerPage,\r\n currentPage,\r\n pageCount,\r\n } = props;\r\n\r\n // const pageCount = Math.ceil(dataCount / rowsPerPage);\r\n return (\r\n \r\n
\r\n Viewing{' '}\r\n \r\n {currentPage * rowsPerPage + 1}-\r\n {Math.min(currentPage * rowsPerPage + rowsPerPage, dataCount)}\r\n {' '}\r\n of {dataCount} \r\n
\r\n
\r\n \r\n \r\n }\r\n // breakLabel={null}\r\n pageCount={pageCount}\r\n marginPagesDisplayed={1}\r\n pageRangeDisplayed={4}\r\n onPageChange={onPageChange}\r\n subContainerClassName={'pages pagination'}\r\n activeClassName={'active'}\r\n forcePage={currentPage}\r\n />\r\n setIsExpanded(!isExpanded)}>\r\n {metadata.map((column, j) => {\r\n if (column.id === expandableColumn) {\r\n return (\r\n \r\n {row[column.renderingField]}\r\n setIsExpanded(!isExpanded)}>\r\n {isExpanded ? (\r\n \r\n {row[column.renderingField]}\r\n \r\n );\r\n })}\r\n \r\n {isExpanded && (\r\n <>\r\n {row.__childrens.map((row, i) => {\r\n return (\r\n \r\n {metadata.map((column, j) => {\r\n return (\r\n \r\n {row[column.renderingField]}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nTableExpandableRow.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n metadata: PropTypes.array.isRequired,\r\n row: PropTypes.object,\r\n expandableColumn: PropTypes.string,\r\n};\r\n\r\nexport default withStyles(styles)(TableExpandableRow);\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport MaterialTable from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport TableHead from './TableHead.js';\r\nimport Pagination from './TablePagination.js';\r\nimport TableExpandableRow from './TableExpandableRow.js';\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n padding: '0 15px',\r\n background: theme.palette.xpl.foreground,\r\n boxShadow: 'none',\r\n },\r\n noBackground: {\r\n background: 'transparent',\r\n boxShadow: 'none',\r\n padding: 0,\r\n margin: 0,\r\n },\r\n border: {\r\n border: `1px solid ${theme.palette.xpl.stoke}`,\r\n },\r\n table: {\r\n '& tr:last-child td': {\r\n borderBottom: 'none',\r\n },\r\n '& .MuiCheckbox-colorSecondary.Mui-checked': {\r\n color: theme.palette.xpl.secondary.default,\r\n },\r\n '& .MuiTableRow-root.Mui-selected': {\r\n background: theme.palette.xpl.foreground,\r\n },\r\n '& .MuiTableRow-root.Mui-selected:hover': {\r\n background: theme.palette.xpl.secondary.background,\r\n },\r\n '& .MuiCheckbox-root': {\r\n padding: '0px',\r\n },\r\n },\r\n tableWrapper: {\r\n // overflowX: 'auto',\r\n },\r\n cell: {\r\n padding: '18px 15px',\r\n color: theme.palette.xpl.text.secondary,\r\n lineHeight: '20px',\r\n borderBottomColor: theme.palette.xpl.stoke,\r\n },\r\n cellMobile: {\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n row: {},\r\n noResults: {\r\n textAlign: 'center',\r\n fontSize: '22px',\r\n color: theme.palette.xpl.text.primary,\r\n },\r\n footer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n height: 60,\r\n },\r\n pagination: {\r\n marginLeft: 'auto',\r\n },\r\n});\r\n\r\nfunction descendingComparator(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction stableSort(array, comparator) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = comparator(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map((el) => el[0]);\r\n}\r\n\r\nfunction getComparator(order, orderBy) {\r\n return order === 'desc'\r\n ? (a, b) => descendingComparator(a, b, orderBy)\r\n : (a, b) => -descendingComparator(a, b, orderBy);\r\n}\r\n\r\nfunction Table(props) {\r\n const {\r\n classes,\r\n data,\r\n metadata,\r\n showNoResults,\r\n footerText,\r\n enableSorting,\r\n showFooter,\r\n noBackground,\r\n showEmptyRows,\r\n currentPage,\r\n onPageChange,\r\n showBorder,\r\n enableExpandableRow,\r\n expandableColumn,\r\n checkboxSelection,\r\n selectedItems,\r\n setSelectedItems,\r\n onRowClick,\r\n } = props;\r\n\r\n const [orderBy, setOrderBy] = React.useState('id');\r\n const [order, setOrder] = React.useState('asc');\r\n const [rowsPerPage, setRowsPerPage] = React.useState(props.rowsPerPage || 10);\r\n React.useEffect(() => {\r\n setRowsPerPage(props.rowsPerPage || 10);\r\n }, [props.rowsPerPage]);\r\n\r\n const page = currentPage || 0;\r\n const emptyRows = showEmptyRows\r\n ? rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage)\r\n : 0;\r\n\r\n const defaultColWidth = (1 / metadata.length) * 100 + '%';\r\n const pageCount = Math.ceil(data.length / rowsPerPage);\r\n const showHeader = !!metadata.find((row) => !!row.label);\r\n\r\n const handleRequestSort = (event, property) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n onPageChange({ selected: 0 });\r\n };\r\n\r\n const handleSelectAllClick = (event) => {\r\n if (event.target.checked) {\r\n const newSelecteds = data.map((n) => n.id);\r\n setSelectedItems(newSelecteds);\r\n return;\r\n }\r\n setSelectedItems([]);\r\n };\r\n\r\n const handleClick = (event, id) => {\r\n if (checkboxSelection) {\r\n const selectedIndex = selectedItems.indexOf(id);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selectedItems, id);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selectedItems.slice(1));\r\n } else if (selectedIndex === selectedItems.length - 1) {\r\n newSelected = newSelected.concat(selectedItems.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selectedItems.slice(0, selectedIndex),\r\n selectedItems.slice(selectedIndex + 1)\r\n );\r\n }\r\n\r\n setSelectedItems(newSelected);\r\n } else {\r\n if (onRowClick) {\r\n onRowClick(event, id);\r\n }\r\n }\r\n };\r\n\r\n const isSelected = (id) => selectedItems.indexOf(id) !== -1;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {checkboxSelection && (\r\n \r\n {showHeader && (\r\n \r\n \r\n \r\n No Results Found\r\n \r\n \r\n \r\n ) : (\r\n \r\n {stableSort(data, getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, i) => {\r\n const isItemSelected = checkboxSelection\r\n ? isSelected(row.id)\r\n : false;\r\n const labelId = `table-checkbox-${i}`;\r\n if (enableExpandableRow && row.__childrens?.length > 0) {\r\n return (\r\n handleClick(event, row.id)}\r\n role=\"checkbox\"\r\n aria-checked={isItemSelected}\r\n tabIndex={-1}\r\n key={i}\r\n selected={isItemSelected}\r\n className={classes.row}\r\n />\r\n );\r\n }\r\n return (\r\n handleClick(event, row.id)}\r\n role=\"checkbox\"\r\n aria-checked={isItemSelected}\r\n tabIndex={-1}\r\n key={i}\r\n selected={isItemSelected}\r\n className={classes.row}>\r\n {checkboxSelection && (\r\n \r\n \r\n {row[column.renderingField]}\r\n \r\n ))}\r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n
\r\n
{footerText}
\r\n {pageCount > 1 && (\r\n
\r\n )}\r\n
\r\n \r\n Edit \r\n \r\n \r\n );\r\n return rule;\r\n });\r\n};\r\n\r\nconst SuspensionRuleList = (props) => {\r\n const { getSuspensionRules, appLoading, classes, rules } = props;\r\n\r\n const history = useHistory();\r\n\r\n const [formState, setFormState] = useState({\r\n currentPage: 0,\r\n filteredRules: null,\r\n });\r\n\r\n useEffect(() => {\r\n const getRules = async () => {\r\n getSuspensionRules();\r\n };\r\n\r\n getRules();\r\n }, [getSuspensionRules]);\r\n\r\n const rulesData =\r\n formState.filteredRules === null ? rules : formState.filteredRules;\r\n\r\n const suspensionRules = useMemo(() => processRuleData(rulesData), [\r\n rulesData,\r\n ]);\r\n\r\n const showNoResults =\r\n !appLoading &&\r\n formState.filteredRules !== null &&\r\n formState.filteredRules.length === 0;\r\n\r\n const formatText = (text) => {\r\n // Replace hyphen symbols and double spaces if any\r\n return (text || '').replace(/-/g, ' ').replace(/ +/g, ' ');\r\n };\r\n\r\n const handleFilter = (data) => {\r\n const { search } = data;\r\n let searchResult = rules;\r\n\r\n if (search) {\r\n searchResult = rules.filter((item) => {\r\n const businessAccount = formatText(\r\n item.businessName + ' ' + item.businessId\r\n ).toLowerCase();\r\n const formattedSearch = formatText(search).toLowerCase();\r\n return businessAccount.includes(formattedSearch);\r\n });\r\n }\r\n\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: 0,\r\n filteredRules: searchResult,\r\n }));\r\n };\r\n\r\n const handleRowClick = (event, id) => {\r\n event.preventDefault();\r\n history.push(`/SuspensionRules/${id}/Edit`);\r\n };\r\n\r\n const handlePageClick = (data) => {\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: data.selected,\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n Suspension Rules\r\n \r\n {!appLoading && (\r\n <>\r\n \r\n \r\n \r\n {suspensionRules.length} Results Found\r\n \r\n }\r\n />\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nSuspensionRuleList.propTypes = {\r\n rules: PropTypes.arrayOf(PropTypes.object),\r\n getSuspensionRules: PropTypes.func.isRequired,\r\n appLoading: PropTypes.bool.isRequired,\r\n};\r\n\r\nSuspensionRuleList.defaultProps = {\r\n rules: [],\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionRuleList);\r\n","import { getSuspensionRules } from 'ducks/suspensionRules';\r\nimport { connect } from 'react-redux';\r\nimport SuspensionRuleList from './SuspensionRuleList';\r\n\r\nconst mapStateToProps = (state) => ({\r\n rules: state.suspensionRules.rules,\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getSuspensionRules,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SuspensionRuleList);\r\n","// Useful in forms where if not a number is entered then store null.\r\nexport const convertToInteger = (value) => {\r\n const parsed = parseInt(value, 10);\r\n return isNaN(parsed) ? null : parsed;\r\n};\r\n\r\nexport const convertToFloat = (value) => {\r\n const parsed = parseFloat(value);\r\n return isNaN(parsed) ? null : parsed;\r\n};\r\n\r\n// toFixed converts the result to string and also does not work in some cases.\r\n// If we want to round and keep it as float use this method.\r\nexport const roundToTwoDecimals = (number) =>\r\n Number(Math.round(number + 'e2') + 'e-2');\r\n","import ContentLoader from 'react-content-loader';\r\nimport React from 'react';\r\nimport {\r\n Alert,\r\n Input,\r\n FormLabel,\r\n BackgroundPaper,\r\n FilledButton,\r\n SubtleButton,\r\n TextButton,\r\n} from '@ds/react-components';\r\nimport { styled, Typography } from '@material-ui/core';\r\n\r\nexport const BusinessAccountName = styled((props) => (\r\n \r\n \r\n \r\n);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useHistory, useParams } from 'react-router-dom';\r\nimport { Controller, useForm } from 'react-hook-form';\r\nimport { FilledButton, Alert } from '@ds/react-components';\r\nimport { isNegativeNumber } from 'utils/misc';\r\nimport {\r\n convertToInteger,\r\n convertToFloat,\r\n roundToTwoDecimals,\r\n} from 'utils/numbers';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport * as Styled from './SuspensionRuleDetail.styled';\r\nimport {\r\n fetchSuspensionRule,\r\n updateSuspensionRule,\r\n} from '../../../../services/suspensionRules';\r\n\r\nconst SuspensionRuleDetail = () => {\r\n const history = useHistory();\r\n const { facilityAccountId } = useParams();\r\n const { handleSubmit, control, errors, reset } = useForm({\r\n defaultValues: {\r\n fee: null,\r\n duration: null,\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n });\r\n const [suspensionRule, setSuspensionRule] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isSubmittingForm, setIsSubmittingForm] = useState(false);\r\n const [submissionError, setSubmissionError] = useState('');\r\n\r\n useEffect(() => {\r\n const getSuspensionRule = async (facilityAccountId) => {\r\n try {\r\n setIsLoading(true);\r\n const result = await fetchSuspensionRule(facilityAccountId);\r\n reset({ fee: result.fee, duration: result.duration });\r\n setSuspensionRule(result);\r\n setIsLoading(false);\r\n } catch (error) {\r\n setIsLoading(false);\r\n console.warn(error);\r\n }\r\n };\r\n\r\n getSuspensionRule(facilityAccountId);\r\n }, [facilityAccountId, reset]);\r\n\r\n const validateNegativeNumber = (number) => {\r\n return !isNegativeNumber(number);\r\n };\r\n\r\n const onClearAll = () => {\r\n reset({ fee: '', duration: '' });\r\n };\r\n\r\n const onSubmit = async (data) => {\r\n const { fee, duration } = data;\r\n const submittingData = {\r\n fee: fee,\r\n duration: duration,\r\n facilityAccountId,\r\n };\r\n\r\n try {\r\n setIsSubmittingForm(true);\r\n await updateSuspensionRule(submittingData);\r\n setSubmissionError('');\r\n history.push('/SuspensionRules');\r\n } catch (error) {\r\n setIsSubmittingForm(false);\r\n setSubmissionError(\r\n error.message || 'Something went wrong. Please try again.'\r\n );\r\n console.error(error);\r\n }\r\n };\r\n\r\n const onBack = () => {\r\n history.push(`/SuspensionRules`);\r\n };\r\n\r\n if (isLoading) {\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 if (!suspensionRule) {\r\n return (\r\n \r\n \r\n \r\n {\r\n 'The supension rule does not exist or you do not have permission to access it.'\r\n }\r\n \r\n \r\n \r\n \r\n {'Back'}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n suspensionRule && (\r\n \r\n {!!submissionError && (\r\n \r\n \r\n {submissionError}\r\n \r\n \r\n )}\r\n \r\n {`${suspensionRule.businessName} - ${suspensionRule.businessId}`}\r\n \r\n \r\n \r\n \r\n \r\n {'Edit Suspension Rule'}\r\n \r\n \r\n Clear all\r\n \r\n \r\n \r\n \r\n (\r\n <>\r\n \r\n \r\n {'Suspension fee (Weekly) '}\r\n \r\n \r\n {\r\n onBlur(event);\r\n onChange(roundToTwoDecimals(event.target.value));\r\n }}\r\n onChange={(event) => {\r\n onChange(convertToFloat(event.target.value));\r\n }}\r\n startAdornment={'$'}\r\n showStartAdornmentDivider={true}\r\n showInlineIcons={false}\r\n error={\r\n errors.fee &&\r\n (errors.fee.message || errors.fee.type === 'validate')\r\n }\r\n />\r\n {errors.fee && errors.fee.type === 'validate' && (\r\n \r\n {'Fee cannot be less than 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 {'Allowed supension period (Weeks) '}\r\n \r\n \r\n {\r\n onBlur(event);\r\n }}\r\n onChange={(event) => {\r\n onChange(convertToInteger(event.target.value));\r\n }}\r\n showInlineIcons={false}\r\n error={\r\n errors.duration &&\r\n (errors.duration.message ||\r\n errors.duration.type === 'validate')\r\n }\r\n />\r\n {errors.duration &&\r\n errors.duration.type === 'validate' && (\r\n \r\n {'Duration cannot be less than 0.'}\r\n \r\n )}\r\n \r\n )}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n {'Save'}\r\n \r\n \r\n {'Cancel'}\r\n \r\n \r\n \r\n \r\n )\r\n );\r\n};\r\n\r\nexport default SuspensionRuleDetail;\r\n","import { getKyClient } from './client';\r\n\r\nexport const fetchSsoGroups = async () => {\r\n let url = `v1/SsoGroup`;\r\n\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\nexport const fetchSsoGroup = async (ssoGroupId) => {\r\n let url = `v1/SsoGroup/${ssoGroupId}`;\r\n\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\nexport const fetchSsoRoles = async () => {\r\n let url = `v1/SsoGroup/Roles`;\r\n\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\n\r\nexport const deleteSsoGroup = async (ssoGroupId) => {\r\n let url = `v1/SsoGroup/${ssoGroupId}`;\r\n\r\n const kyClient = await getKyClient();\r\n return kyClient.delete(url).json();\r\n};\r\n\r\nexport const updateSsoGroup = async ({\r\n ssoGroupId,\r\n name,\r\n groupExternalId,\r\n description,\r\n permissions,\r\n}) => {\r\n let url = `v1/SsoGroup/` + ssoGroupId;\r\n const kyClient = await getKyClient();\r\n return kyClient.put(url, {\r\n json: { name, groupExternalId, description, permissions },\r\n });\r\n};\r\nexport const addSsoGroup = async (ssoGroupDetail) => {\r\n const url = `v1/SsoGroup`;\r\n const kyClient = await getKyClient();\r\n return kyClient\r\n .post(url, {\r\n json: ssoGroupDetail,\r\n })\r\n .json();\r\n};\r\n","import { createReducer } from 'utils/reduxCreators';\r\nimport { fetchSsoGroups, fetchSsoRoles } from 'services/ssoGroups';\r\nimport { updateAppLoading } from './meta';\r\n\r\nexport const RECEIVED_SSO_GROUPS = 'ssoGroups/RECEIVED_SSO_GROUPS';\r\nexport const RECEIVED_SSO_ROLES = 'ssoGroups/RECEIVED_SSO_ROLES';\r\n\r\nconst initialState = {\r\n groups: [],\r\n roles: [],\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [RECEIVED_SSO_GROUPS]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n groups: payload,\r\n };\r\n },\r\n [RECEIVED_SSO_ROLES]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n roles: payload,\r\n };\r\n },\r\n});\r\n\r\nexport const getSsoGroups = () => async (dispatch) => {\r\n dispatch(updateAppLoading(true));\r\n try {\r\n const groups = await fetchSsoGroups();\r\n dispatch(updateAppLoading(false));\r\n dispatch({ type: RECEIVED_SSO_GROUPS, payload: groups });\r\n } catch (e) {\r\n dispatch(updateAppLoading(false));\r\n // Important to throw it back as it gets caught by the middleware.\r\n throw e;\r\n }\r\n};\r\n\r\nexport const getSsoRoles = () => async (dispatch) => {\r\n dispatch(updateAppLoading(true));\r\n try {\r\n const roles = await fetchSsoRoles();\r\n dispatch(updateAppLoading(false));\r\n dispatch({ type: RECEIVED_SSO_ROLES, payload: roles });\r\n } catch (e) {\r\n dispatch(updateAppLoading(false));\r\n // Important to throw it back as it gets caught by the middleware.\r\n throw e;\r\n }\r\n};\r\n","const tableMetadata = [\r\n {\r\n id: 'name',\r\n renderingField: 'name',\r\n width: '25%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Name',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'description',\r\n renderingField: 'description',\r\n width: '50%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Description',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'action',\r\n renderingField: 'action',\r\n width: '25%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: '',\r\n alignment: 'right',\r\n },\r\n];\r\n\r\nexport default tableMetadata;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useForm } from 'react-hook-form';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { SearchInput } from '@ds/react-components';\r\n\r\nconst styles = (theme) => ({\r\n startAdornmentContainer: {\r\n backgroundColor: theme.palette.xpl.foreground,\r\n color: theme.palette.xpl.text.action,\r\n },\r\n filterIcon: {\r\n width: '15px',\r\n height: '15px',\r\n marginRight: '6px',\r\n },\r\n dobGrid: {\r\n maxWidth: 250,\r\n },\r\n});\r\n\r\nconst SsoGroupListFilter = (props) => {\r\n const { onSubmit } = props;\r\n\r\n const { handleSubmit, register } = useForm({\r\n defaultValues: {\r\n search: '',\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n });\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nSsoGroupListFilter.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n onSubmit: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(SsoGroupListFilter);\r\n","import {\r\n DialogTitle,\r\n styled,\r\n Typography,\r\n DialogActions,\r\n DialogContent,\r\n} from '@material-ui/core';\r\n\r\nexport const TitleContainer = styled(DialogTitle)(({ theme }) => ({\r\n borderBottom: `solid 1px ${theme.palette.xpl.stoke}`,\r\n}));\r\n\r\nexport const ContentContainer = styled(DialogContent)(({ theme }) => ({\r\n color: theme.palette.xpl.text.secondary,\r\n fontSize: '14px',\r\n fontWeight: '400',\r\n lineHeight: '20px',\r\n marginBottom: '8px',\r\n}));\r\n\r\nexport const FooterContainer = styled(DialogActions)({\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n paddingBottom: '16px',\r\n});\r\n\r\nexport const Title = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.xpl.text.primary,\r\n fontSize: '20px',\r\n fontWeight: '700',\r\n lineHeight: '28px',\r\n}));\r\n\r\nexport const Content = styled(Typography)(({ theme }) => ({\r\n marginTop: '8px',\r\n marginBottom: '8px',\r\n}));\r\n","import * as React from 'react';\r\nimport { OutlinedButton, FilledButton } from '@ds/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport { Dialog, withStyles } from '@material-ui/core';\r\nimport * as Styled from './SsoGroupDeleteMessage.styled';\r\n\r\nconst styles = (theme) => ({\r\n groupName: {\r\n fontWeight: 'bold',\r\n },\r\n});\r\n\r\nconst SsoGroupDeleteConfirmDialog = (props) => {\r\n const { classes, groupName, isOpen, onDelete, onClose } = props;\r\n\r\n return (\r\n \r\n \r\n {'Delete group?'} \r\n \r\n \r\n \r\n Are you sure you want to permanently delete this group \r\n {' ' + groupName} \r\n ? \r\n \r\n \r\n Users who are associated with this group will permanently lose\r\n permissions once deleted.\r\n \r\n \r\n \r\n \r\n Delete\r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nSsoGroupDeleteConfirmDialog.propTypes = {\r\n groupName: PropTypes.string.isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n onDelete: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(SsoGroupDeleteConfirmDialog);\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { Typography, Grid, withStyles } from '@material-ui/core';\r\nimport { TextButton, FilledButton, Alert } from '@ds/react-components';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport Table from 'components/ui/Table';\r\nimport { deleteSsoGroup } from 'services/ssoGroups';\r\nimport tableMetadata from './tableMetaData';\r\nimport SsoGroupListFilter from './SsoGroupListFilter';\r\nimport SsoGroupDeleteConfirmDialog from '../Delete/SsoGroupDeleteConfirmDialog';\r\n\r\nconst styles = (theme) => ({\r\n row: {\r\n cursor: 'pointer',\r\n },\r\n pageHeader: {\r\n marginBottom: '20px',\r\n },\r\n errorContainer: {\r\n marginTop: '16px',\r\n marginBottom: '16px',\r\n maxWidth: '910px',\r\n },\r\n deleteButton: {\r\n color: theme.palette.xpl.text.warning,\r\n },\r\n});\r\n\r\nconst SsoGroupList = (props) => {\r\n const { getSsoGroups, appLoading, classes, groups } = props;\r\n const [deletingGroupId, setDeletingGroupId] = useState(null);\r\n const [errorMessage, setErrorMessage] = useState(null);\r\n const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);\r\n const [formState, setFormState] = useState({\r\n currentPage: 0,\r\n filteredGroups: null,\r\n });\r\n\r\n const history = useHistory();\r\n\r\n const processGroupData = (groups) => {\r\n return groups.map((r) => {\r\n const group = { ...r };\r\n group.id = group.groupId;\r\n group.groupName = group.name;\r\n group.groupDescription = group.description;\r\n group.action = (\r\n \r\n \r\n handleEditGroupClick(event, group.id)}>\r\n Edit\r\n \r\n handleDeleteGroupClick(event, group.id)}>\r\n Delete\r\n \r\n \r\n \r\n );\r\n return group;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n const getGroups = async () => {\r\n await getSsoGroups();\r\n };\r\n\r\n getGroups();\r\n }, [getSsoGroups]);\r\n\r\n const groupsData =\r\n formState.filteredGroups === null ? groups : formState.filteredGroups;\r\n\r\n const ssoGroups = useMemo(() => processGroupData(groupsData), [groupsData]);\r\n\r\n const showNoResults =\r\n !appLoading &&\r\n formState.filteredGroups !== null &&\r\n formState.filteredGroups.length === 0;\r\n\r\n const formatText = (text) => {\r\n // Replace hyphen symbols and double spaces if any\r\n return (text || '').replace(/-/g, ' ').replace(/ +/g, ' ');\r\n };\r\n\r\n const handleFilter = (data) => {\r\n const { search } = data;\r\n let searchResult = groups;\r\n\r\n if (search) {\r\n searchResult = groups.filter((item) => {\r\n const groupName = formatText(item.name).toLowerCase();\r\n const formattedSearch = formatText(search).toLowerCase();\r\n return groupName.includes(formattedSearch);\r\n });\r\n }\r\n\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: 0,\r\n filteredGroups: searchResult,\r\n }));\r\n };\r\n\r\n const getGroupName = (id) => {\r\n const group = ssoGroups.find((x) => x.id === id);\r\n return group?.name;\r\n };\r\n\r\n const handleAddGroupClick = (event) => {\r\n event.preventDefault();\r\n history.push(`/SsoGroupManagement/Add`);\r\n };\r\n\r\n const handleEditGroupClick = (event, id) => {\r\n event.preventDefault();\r\n history.push(`/SsoGroupManagement/${id}/Edit`);\r\n };\r\n\r\n const handlePageClick = (data) => {\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: data.selected,\r\n }));\r\n };\r\n\r\n const handleDeleteGroupClick = (event, id) => {\r\n event.preventDefault();\r\n setDeletingGroupId(id);\r\n setDeleteDialogOpen(true);\r\n };\r\n\r\n const onDelete = async (groupId) => {\r\n try {\r\n await deleteSsoGroup(groupId);\r\n setDeleteDialogOpen(false);\r\n setErrorMessage('');\r\n await getSsoGroups();\r\n } catch (error) {\r\n setErrorMessage('Error occurred when deleting group. Please try again.');\r\n console.error(error);\r\n }\r\n };\r\n\r\n const closeDeleteDialog = () => {\r\n setDeleteDialogOpen(false);\r\n };\r\n\r\n return (\r\n \r\n {errorMessage && (\r\n <>\r\n \r\n {errorMessage} \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n Group Management\r\n \r\n \r\n \r\n Add Group \r\n \r\n \r\n {!appLoading && (\r\n <>\r\n onDelete(deletingGroupId)}\r\n isOpen={isDeleteDialogOpen}\r\n onClose={closeDeleteDialog}>\r\n \r\n \r\n \r\n {ssoGroups.length} Results Found\r\n \r\n }\r\n />\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nSsoGroupList.propTypes = {\r\n groups: PropTypes.arrayOf(PropTypes.object),\r\n getSsoGroups: PropTypes.func.isRequired,\r\n appLoading: PropTypes.bool.isRequired,\r\n};\r\n\r\nSsoGroupList.defaultProps = {\r\n groups: [],\r\n};\r\n\r\nexport default withStyles(styles)(SsoGroupList);\r\n","import { getSsoGroups } from 'ducks/ssoGroupManagement';\r\nimport { connect } from 'react-redux';\r\nimport SsoGroupList from './SsoGroupList';\r\n\r\nconst mapStateToProps = (state) => ({\r\n groups: state.ssoGroups.groups,\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getSsoGroups,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SsoGroupList);\r\n","export const formatSearchText = (text) => {\r\n // Replace hyphen symbols and double spaces if any\r\n return (text || '').replace(/-/g, ' ').replace(/ +/g, ' ');\r\n};\r\n","const tableMetadata = [\r\n {\r\n id: 'name',\r\n renderingField: 'name',\r\n width: '25%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Name',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'description',\r\n renderingField: 'description',\r\n width: '75%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Description',\r\n alignment: 'left',\r\n },\r\n];\r\n\r\nexport default tableMetadata;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { Dropdown, SearchInput } from '@ds/react-components';\r\n\r\nconst styles = (theme) => ({\r\n searchContainer: {\r\n marginBottom: '16px',\r\n },\r\n});\r\n\r\nconst SsoRoleListFilter = (props) => {\r\n const {\r\n classes,\r\n onSearchFilterChange,\r\n onSearchKeywordChange,\r\n onSearchClick,\r\n } = props;\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\nSsoRoleListFilter.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n onSearchFilterChange: PropTypes.func.isRequired,\r\n onSearchKeywordChange: PropTypes.func.isRequired,\r\n onSearchClick: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(SsoRoleListFilter);\r\n","import React, { useState, useMemo, useEffect } from 'react';\r\nimport { Grid, withStyles } from '@material-ui/core';\r\nimport { formatSearchText } from 'utils/search';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport PropTypes from 'prop-types';\r\nimport Table from 'components/ui/Table';\r\nimport tableMetadata from './tableMetaData';\r\nimport SsoRoleListFilter from './SsoRoleListFilter';\r\n\r\nconst styles = (theme) => ({\r\n mainContainer: {\r\n padding: '30px',\r\n },\r\n tableContainer: {\r\n maxHeight: 500,\r\n },\r\n footer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n marginTop: '32px',\r\n },\r\n});\r\n\r\nconst SsoRoleList = (props) => {\r\n const { classes, roles, selectedRoles, setSelectedRoles } = props;\r\n const [searchFilter, setSearchFilter] = useState(1);\r\n const [searchKeyword, setSearchKeyword] = useState('');\r\n const [formState, setFormState] = useState({\r\n currentPage: 0,\r\n rowsPerPage: 10,\r\n filteredRoles: null,\r\n });\r\n\r\n const filterPermission = useMemo(\r\n () => (searchFilter, searchKeyword) => {\r\n let searchResult = roles;\r\n\r\n if (searchFilter !== null && searchFilter !== 1) {\r\n const isAssignedPermissions = searchFilter === 2 ? true : false;\r\n searchResult = searchResult.filter((item) => {\r\n return isAssignedPermissions\r\n ? selectedRoles.includes(item.roleId)\r\n : !selectedRoles.includes(item.roleId);\r\n });\r\n }\r\n\r\n if (searchKeyword) {\r\n searchResult = searchResult.filter((item) => {\r\n const roleName = formatSearchText(item.roleName).toLowerCase();\r\n const formattedSearch = formatSearchText(\r\n searchKeyword || ''\r\n ).toLowerCase();\r\n return roleName.includes(formattedSearch);\r\n });\r\n }\r\n\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: 0,\r\n filteredRoles: searchResult,\r\n }));\r\n },\r\n [roles, selectedRoles]\r\n );\r\n\r\n useEffect(() => {\r\n filterPermission(searchFilter, searchKeyword);\r\n }, [selectedRoles, searchFilter, filterPermission]);\r\n\r\n const processRoleData = (roles) => {\r\n return roles.map((r) => {\r\n const role = { ...r };\r\n role.id = role.roleId;\r\n role.name = role.roleName;\r\n return role;\r\n });\r\n };\r\n\r\n const rolesData =\r\n formState.filteredRoles === null ? roles : formState.filteredRoles;\r\n const ssoRoles = useMemo(() => processRoleData(rolesData), [rolesData]);\r\n const showNoResults =\r\n formState.filteredRoles !== null && formState.filteredRoles.length === 0;\r\n\r\n const onSearchClick = (e) => {\r\n e.preventDefault();\r\n filterPermission(searchFilter, searchKeyword);\r\n };\r\n\r\n const onSearchFilterChange = (selectedItem) => {\r\n setSearchFilter(selectedItem.value);\r\n };\r\n\r\n const onSearchKeywordChange = (e) => {\r\n setSearchKeyword(e.target.value);\r\n };\r\n\r\n const onSetSelectedItems = (data) => {\r\n setSelectedRoles(data);\r\n };\r\n\r\n const handlePageClick = (data) => {\r\n setFormState((prevState) => ({\r\n ...prevState,\r\n currentPage: data.selected,\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {ssoRoles.length} Results Found\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nSsoRoleList.propTypes = {\r\n roles: PropTypes.arrayOf(PropTypes.object),\r\n setSelectedRoles: PropTypes.func.isRequired,\r\n selectedRoles: PropTypes.arrayOf(PropTypes.object),\r\n};\r\n\r\nSsoRoleList.defaultProps = {\r\n roles: [],\r\n selectedRoles: [],\r\n};\r\n\r\nexport default withStyles(styles)(SsoRoleList);\r\n","import { connect } from 'react-redux';\r\nimport SsoRoleList from './SsoRoleList';\r\n\r\nconst mapStateToProps = (state) => ({\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n});\r\n\r\nexport default connect(mapStateToProps)(SsoRoleList);\r\n","import ContentLoader from 'react-content-loader';\r\nimport React from 'react';\r\nimport { Alert, BackgroundPaper, SubtleButton } from '@ds/react-components';\r\nimport { styled, Typography } from '@material-ui/core';\r\n\r\nexport const PageTitle = styled((props) => (\r\n \r\n \r\n \r\n);\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useForm, Controller } from 'react-hook-form';\r\nimport { useHistory, useParams } from 'react-router-dom';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { FilledButton, Alert, Input, Textarea } from '@ds/react-components';\r\nimport { updateSsoGroup, fetchSsoGroup } from 'services/ssoGroups';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport RoleList from '../Role';\r\nimport * as Styled from '../common/SsoGroupForm.styled';\r\n\r\nconst styles = (theme) => ({});\r\n\r\nconst SsoGroupEdit = (props) => {\r\n const { roles, getSsoRoles } = props;\r\n const history = useHistory();\r\n const { ssoGroupId } = useParams();\r\n const [ssoGroup, setSsoGroup] = useState(null);\r\n const [selectedRoles, setSelectedRoles] = useState([]);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [permissionsCount, setPermissionsCount] = useState(0);\r\n const [isSubmittingForm, setIsSubmittingForm] = useState(false);\r\n const [submissionError, setSubmissionError] = useState('');\r\n\r\n const {\r\n handleSubmit,\r\n register,\r\n reset,\r\n control,\r\n setValue,\r\n formState: { errors },\r\n } = useForm({\r\n defaultValues: {\r\n groupId: null,\r\n name: null,\r\n groupExternalId: null,\r\n description: null,\r\n permissions: [],\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n });\r\n\r\n useEffect(() => {\r\n const getRoles = async () => {\r\n await getSsoRoles();\r\n };\r\n\r\n const getSsoGroup = async (ssoGroupId) => {\r\n const result = await fetchSsoGroup(ssoGroupId);\r\n setSsoGroup(result);\r\n setIsLoading(false);\r\n reset({\r\n groupId: result.groupId,\r\n name: result.name,\r\n groupExternalId: result.groupExternalId,\r\n description: result.description,\r\n permissions: result.permissions,\r\n });\r\n\r\n if (result.permissions) {\r\n setSelectedRoles(result.permissions.map((p) => p.roleId));\r\n }\r\n };\r\n\r\n try {\r\n setIsLoading(true);\r\n getRoles();\r\n getSsoGroup(ssoGroupId);\r\n } catch (error) {\r\n setIsLoading(false);\r\n console.error(error);\r\n }\r\n }, [ssoGroupId, getSsoRoles, reset]);\r\n\r\n useEffect(() => {\r\n setPermissionsCount(selectedRoles.length);\r\n setValue('permissionsCount', selectedRoles.length);\r\n }, [setValue, selectedRoles]);\r\n\r\n const onCancel = (e) => {\r\n e.preventDefault();\r\n history.push(`/SsoGroupManagement`);\r\n };\r\n\r\n const onSubmit = async (data) => {\r\n const { name, groupExternalId, description } = data;\r\n const payload = {\r\n ssoGroupId,\r\n name,\r\n groupExternalId,\r\n description,\r\n permissions: selectedRoles.map((id) => {\r\n return { roleId: id };\r\n }),\r\n };\r\n\r\n try {\r\n setIsSubmittingForm(true);\r\n await updateSsoGroup(payload);\r\n history.push(`/SsoGroupManagement`);\r\n } catch (error) {\r\n setIsSubmittingForm(false);\r\n setSubmissionError(\r\n error.message || 'Something went wrong. Please try again.'\r\n );\r\n console.error(error);\r\n }\r\n };\r\n\r\n const onBack = () => {\r\n history.push(`/SsoGroupManagement`);\r\n };\r\n\r\n if (isLoading) {\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 if (!isLoading && !ssoGroup) {\r\n return (\r\n \r\n \r\n \r\n {\r\n 'The SSO group does not exist or you do not have permission to access it.'\r\n }\r\n \r\n \r\n \r\n \r\n {'Back'}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {!!submissionError && (\r\n \r\n \r\n {submissionError}\r\n \r\n \r\n )}\r\n {'Edit Group'} \r\n \r\n \r\n \r\n {'Group Details'} \r\n \r\n \r\n \r\n (\r\n <>\r\n {\r\n onChange(event.target.value);\r\n }}\r\n error={errors.name && errors.name.message}\r\n />\r\n \r\n )}\r\n />\r\n \r\n \r\n (\r\n <>\r\n {\r\n onChange(event.target.value);\r\n }}\r\n error={\r\n errors.groupExternalId && errors.groupExternalId.message\r\n }\r\n />\r\n \r\n )}\r\n />\r\n \r\n \r\n (\r\n <>\r\n {\r\n onChange(event.target.value);\r\n }}\r\n error={errors.description && errors.description.message}\r\n />\r\n \r\n )}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {'Permissions (' + selectedRoles.length + ' selected)'}\r\n \r\n \r\n \r\n \r\n \r\n {errors.permissionsCount && errors.permissionsCount.type === 'min' && (\r\n \r\n {'Select at least one permission.'} \r\n \r\n )}\r\n \r\n \r\n \r\n {'Save'}\r\n \r\n \r\n {'Cancel'}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nSsoGroupEdit.propTypes = {\r\n appLoading: PropTypes.bool.isRequired,\r\n roles: PropTypes.arrayOf(PropTypes.object),\r\n};\r\n\r\nSsoGroupEdit.defaultValues = {\r\n roles: [],\r\n};\r\n\r\nexport default withStyles(styles)(SsoGroupEdit);\r\n","import { connect } from 'react-redux';\r\nimport { getSsoRoles } from 'ducks/ssoGroupManagement';\r\nimport SsoGroupEdit from './SsoGroupEdit';\r\n\r\nconst mapStateToProps = (state) => ({\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n roles: state.ssoGroups.roles,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getSsoRoles,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SsoGroupEdit);\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useForm, Controller } from 'react-hook-form';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { FilledButton, Alert, Input, Textarea } from '@ds/react-components';\r\nimport { addSsoGroup } from 'services/ssoGroups';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport RoleList from '../Role';\r\nimport * as Styled from '../common/SsoGroupForm.styled';\r\n\r\nconst styles = (theme) => ({});\r\n\r\nconst SsoGroupAdd = (props) => {\r\n const { roles, getSsoRoles } = props;\r\n const [selectedRoles, setSelectedRoles] = useState([]);\r\n const [permissionsCount, setPermissionsCount] = useState(0);\r\n const [isSubmittingForm, setIsSubmittingForm] = useState(false);\r\n const [submissionError, setSubmissionError] = useState('');\r\n const history = useHistory();\r\n const {\r\n handleSubmit,\r\n register,\r\n control,\r\n setValue,\r\n formState: { errors },\r\n } = useForm({\r\n defaultValues: {\r\n name: '',\r\n groupExternalId: '',\r\n description: '',\r\n permissions: [],\r\n },\r\n });\r\n\r\n useEffect(() => {\r\n const getRoles = async () => {\r\n await getSsoRoles();\r\n };\r\n getRoles();\r\n }, [getSsoRoles]);\r\n\r\n useEffect(() => {\r\n setPermissionsCount(selectedRoles.length);\r\n setValue('permissionsCount', selectedRoles.length);\r\n }, [setValue, selectedRoles]);\r\n\r\n const onCancel = (e) => {\r\n e.preventDefault();\r\n history.push(`/SsoGroupManagement`);\r\n };\r\n\r\n const onSubmit = async (data) => {\r\n const { name, groupExternalId, description } = data;\r\n const payload = {\r\n name,\r\n groupExternalId,\r\n description,\r\n permissions: selectedRoles.map((id) => {\r\n return { roleId: id };\r\n }),\r\n };\r\n\r\n try {\r\n setIsSubmittingForm(true);\r\n await addSsoGroup(payload);\r\n history.push(`/SsoGroupManagement`);\r\n } catch (error) {\r\n setIsSubmittingForm(false);\r\n setSubmissionError(\r\n error.message || 'Something went wrong. Please try again.'\r\n );\r\n console.error(error);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {!!submissionError && (\r\n \r\n \r\n {submissionError}\r\n \r\n \r\n )}\r\n {'Add Group'} \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nSsoGroupAdd.propTypes = {\r\n appLoading: PropTypes.bool.isRequired,\r\n roles: PropTypes.arrayOf(PropTypes.object),\r\n};\r\n\r\nSsoGroupAdd.defaultValues = {\r\n roles: [],\r\n};\r\n\r\nexport default withStyles(styles)(SsoGroupAdd);\r\n","import { connect } from 'react-redux';\r\nimport { getSsoRoles } from 'ducks/ssoGroupManagement';\r\nimport SsoGroupAdd from './SsoGroupAdd';\r\n\r\nconst mapStateToProps = (state) => ({\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n roles: state.ssoGroups.roles,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getSsoRoles,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SsoGroupAdd);\r\n","import { getKyClient } from './client';\r\n\r\nexport const fetchCustomerAccounts = async (searchText, dob) => {\r\n let url = `v1.0/accounts?basicSearch=`;\r\n url += searchText || 'empty';\r\n url += '&dob=' + (dob || 'empty');\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\n","import { createReducer } from 'utils/reduxCreators';\r\nimport { fetchCustomerAccounts } from 'services/accountSearch';\r\nimport { updateAppLoading } from './meta';\r\n\r\nexport const RECEIVED_ACCOUNTS = 'accountSearch/RECEIVED_ACCOUNTS';\r\n\r\nconst initialState = {\r\n accounts: [],\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [RECEIVED_ACCOUNTS]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n accounts: payload,\r\n };\r\n },\r\n});\r\n\r\nexport const searchAccounts = (searchText, dob) => async (dispatch) => {\r\n dispatch(updateAppLoading(true));\r\n try {\r\n const accounts = await fetchCustomerAccounts(searchText, dob);\r\n dispatch(updateAppLoading(false));\r\n dispatch({ type: RECEIVED_ACCOUNTS, payload: accounts });\r\n } catch (e) {\r\n dispatch(updateAppLoading(false));\r\n // Important to throw it back as it gets caught by the middleware.\r\n throw e;\r\n }\r\n};\r\n","const tableMetadata = [\r\n {\r\n id: 'debitsuccessId',\r\n renderingField: 'debitsuccessIdRender',\r\n width: '10%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Debitsuccess ID',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'businessId',\r\n renderingField: 'businessId',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Business ID',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'name',\r\n renderingField: 'name',\r\n width: '20%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Name',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'facilityName',\r\n renderingField: 'facilityName',\r\n width: '20%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Business name',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'contact',\r\n renderingField: 'contact',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Contact',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'dob',\r\n renderingField: 'dobRender',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Date of birth',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'status',\r\n renderingField: 'statusRender',\r\n width: '20%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Status',\r\n alignment: 'left',\r\n },\r\n];\r\n\r\nexport default tableMetadata;\r\n","import React from 'react';\r\n\r\n/**\r\n * Helper hook for use when all you want to do is toggle something. E.g. a modal\r\n */\r\nconst useToggle = (initial = false) => {\r\n const [isOn, setOn] = React.useState(initial);\r\n\r\n const toggleValue = React.useCallback(() => {\r\n setOn((on) => !on);\r\n }, [setOn]);\r\n return [isOn, toggleValue];\r\n};\r\n\r\nexport default useToggle;\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M479.968 0H32.038C3.613 0-10.729 34.487 9.41 54.627L192 237.255V424a31.996 31.996 0 0 0 10.928 24.082l64 55.983c20.438 17.883 53.072 3.68 53.072-24.082V237.255L502.595 54.627C522.695 34.528 508.45 0 479.968 0zM288 224v256l-64-56V224L32 32h448L288 224z\"\n});\n\nvar SvgFaFilter = function SvgFaFilter(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n viewBox: \"0 0 512 512\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgFaFilter, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/fa-filter.44a01139.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useForm, Controller } from 'react-hook-form';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport useToggle from 'hooks/useToggle';\r\nimport moment from 'moment';\r\nimport { Grid } from '@material-ui/core';\r\nimport {\r\n OutlinedButton,\r\n SearchInput,\r\n Input as FormInput,\r\n} from '@ds/react-components';\r\nimport { ReactComponent as FilterIcon } from 'assets/icons/fa-filter.svg';\r\n\r\nconst styles = (theme) => ({\r\n startAdornmentContainer: {\r\n backgroundColor: theme.palette.xpl.foreground,\r\n color: theme.palette.xpl.text.action,\r\n },\r\n filterIcon: {\r\n width: '15px',\r\n height: '15px',\r\n marginRight: '6px',\r\n },\r\n dobGrid: {\r\n maxWidth: 250,\r\n },\r\n});\r\n\r\nconst SearchFields = (props) => {\r\n const { classes, dateFormat, onSubmit } = props;\r\n\r\n const [showDob, toggleShowDob] = useToggle(false);\r\n\r\n const { handleSubmit, control, errors, register } = useForm({\r\n defaultValues: {\r\n search: '',\r\n dob: null,\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n });\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nSearchFields.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n onSubmit: PropTypes.func.isRequired,\r\n dateFormat: PropTypes.string,\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(SearchFields);\r\n","import React, { useState, useMemo, Fragment, useCallback } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport { Typography, Grid, withStyles } from '@material-ui/core';\r\nimport { Badge } from '@ds/react-components';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport Table from 'components/ui/Table';\r\nimport tableMetadata from './tableMetaData';\r\nimport SearchFields from './SearchFields';\r\n\r\n//fixed date format that conforms to the API, regardless of the region\r\nconst dobParameterDateFormat = 'YYYY-MM-DD';\r\nconst dobResultDateFormat = 'YYYY-MM-DDTHH:mm:ssZ';\r\n\r\nconst styles = (theme) => ({\r\n row: {\r\n cursor: 'pointer',\r\n },\r\n pageHeader: {\r\n marginBottom: '20px',\r\n },\r\n debitsuccessId: {\r\n color: theme.palette.xpl.text.primary,\r\n fontWeight: 'bold',\r\n },\r\n});\r\n\r\nconst processAccountData = (accounts, dateFormat, classes) => {\r\n return accounts.map((a) => {\r\n //If a column needs to be sortable, then it needs to have a rendering field and a sortable(data) field\r\n const account = { ...a };\r\n account.id = account.debitsuccessId; //required for table component for selection\r\n\r\n let items = '';\r\n let sortableStatus = 0;\r\n if (!account.isActive) {\r\n items = (\r\n \r\n {items}\r\n \r\n Cancelled \r\n \r\n \r\n );\r\n sortableStatus = 2; //cancelled\r\n } else if (account.isSuspended) {\r\n items = (\r\n \r\n {items}\r\n \r\n Suspended \r\n \r\n \r\n );\r\n sortableStatus = 3; //suspended\r\n } else {\r\n items = (\r\n \r\n {items}\r\n \r\n Active \r\n \r\n \r\n );\r\n items = account.isFixedTerm ? (\r\n \r\n {items}\r\n \r\n Set to Term \r\n \r\n \r\n ) : (\r\n \r\n {items}\r\n \r\n Ongoing \r\n \r\n \r\n );\r\n sortableStatus = 1; //active + ongoning/fixed\r\n }\r\n account.status = sortableStatus;\r\n account.statusRender = (\r\n \r\n {items}\r\n \r\n );\r\n account.debitsuccessIdRender = (\r\n \r\n {account.debitsuccessId}\r\n \r\n );\r\n\r\n const dob = moment(account.dob, dobResultDateFormat).add(12, 'hours');\r\n const minDate = new Date();\r\n\r\n minDate.setFullYear(minDate.getFullYear() - 200);\r\n account.dobRender = dob.toDate() < minDate ? '' : dob.format(dateFormat);\r\n account.dob = dob.toDate();\r\n return account;\r\n });\r\n};\r\n\r\nconst CustomerSearch = (props) => {\r\n const { localisation, searchAccounts, appLoading, classes, accounts } = props;\r\n\r\n const history = useHistory();\r\n\r\n const [formMeta, setFormMeta] = useState({\r\n searchComplete: false,\r\n searchClicked: false,\r\n currentPage: 0,\r\n });\r\n\r\n const onSearchSubmit = useCallback(\r\n async (data) => {\r\n const { search, dob } = data;\r\n const dobFormatted =\r\n dob &&\r\n moment(dob, localisation.locales.dateFormat).format(\r\n dobParameterDateFormat\r\n );\r\n searchAccounts(search, dobFormatted);\r\n\r\n setFormMeta((prevState) => ({\r\n ...prevState,\r\n searchComplete: true,\r\n currentPage: 0,\r\n }));\r\n },\r\n [searchAccounts, setFormMeta, localisation]\r\n );\r\n\r\n const handleRowClick = (event, id) => {\r\n history.push(`/Customers/${id}/Overview`);\r\n };\r\n\r\n const handlePageClick = (data) => {\r\n setFormMeta((prevState) => ({\r\n ...prevState,\r\n currentPage: data.selected,\r\n }));\r\n };\r\n\r\n const { dateFormat } = localisation.locales;\r\n const accountComponents = useMemo(\r\n () => processAccountData(accounts, dateFormat, classes),\r\n [accounts, dateFormat, classes]\r\n );\r\n const showNoResults =\r\n accounts.length === 0 && formMeta.searchComplete && !appLoading;\r\n return (\r\n \r\n \r\n Customers\r\n \r\n \r\n \r\n \r\n {accountComponents.length} Results Found\r\n \r\n }\r\n showBorder={true}\r\n />\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nCustomerSearch.propTypes = {\r\n accounts: PropTypes.arrayOf(PropTypes.object),\r\n localisation: PropTypes.object.isRequired,\r\n searchAccounts: PropTypes.func.isRequired,\r\n appLoading: PropTypes.bool.isRequired,\r\n};\r\n\r\nCustomerSearch.defaultProps = {\r\n accounts: [],\r\n};\r\n\r\nexport default withStyles(styles)(CustomerSearch);\r\n","import { searchAccounts } from 'ducks/accountSearchResult';\r\nimport { connect } from 'react-redux';\r\nimport CustomerSearch from './CustomerSearch';\r\n\r\nconst mapStateToProps = (state) => ({\r\n accounts: state.accountSearchResult.accounts,\r\n ajaxStatus: state.ajax,\r\n localisation: state.localisation,\r\n appLoading: state.meta.appLoading,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n searchAccounts: searchAccounts,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CustomerSearch);\r\n","import React from 'react';\r\nimport { getDisplayName } from 'utils/misc';\r\nimport { useParams } from 'react-router-dom';\r\n\r\n//a HOC component to pass matched url params. Mainly useful in react redux connect. Replaces withRouter HOC as it is being deprecated.\r\nconst withRouteParams = (WrappedComponent, displayName = '') => {\r\n const WithRouteParams = (props) => {\r\n const routeParams = useParams();\r\n return \r\n \r\n \r\n {tabsList.map((item) => {\r\n return \r\n \r\n \r\n {permissions.includes('CanTransferAccount') && (\r\n \r\n {'Transfer Account'}\r\n \r\n \r\n )}\r\n {(permissions.includes(permissionTypes.isAdmin) ||\r\n (permissions.includes(permissionTypes.canManageVariations) &&\r\n permissions.includes(permissionTypes.canManageSuspensions))) && (\r\n \r\n {'Suspend Account'}\r\n \r\n \r\n )}\r\n {permissions.includes(permissionTypes.canManageVariations) &&\r\n (permissions.includes(permissionTypes.canCancelAllAccounts) ||\r\n permissions.includes(permissionTypes.canSetToTerm)) &&\r\n customerDetails &&\r\n customerDetails.isActive && (\r\n \r\n {'Cancel Account'}\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nCustomerActions.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n permissions: PropTypes.array.isRequired,\r\n adfitNo: PropTypes.string.isRequired,\r\n customerDetails: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(CustomerActions);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"UID\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, React.createElement(\"g\", {\n id: \"UI-Elements\",\n transform: \"translate(-1418.000000, -2802.000000)\",\n fill: \"currentColor\"\n}, React.createElement(\"g\", {\n id: \"ic-duplicate-copy\",\n transform: \"translate(1415.000000, 2800.000000)\"\n}, React.createElement(\"g\", {\n id: \"ic-duplicate\"\n}, React.createElement(\"path\", {\n d: \"M14.8655742,3.80307422 L13.4469258,2.38442578 C13.2007857,2.13828387 12.8669475,2 12.5188516,2 L7.8125,2 C7.08761719,2 6.5,2.58761719 6.5,3.3125 L6.5,4.625 L4.3125,4.625 C3.58761719,4.625 3,5.21261719 3,5.9375 L3,14.6875 C3,15.4123828 3.58761719,16 4.3125,16 L10.4375,16 C11.1623828,16 11.75,15.4123828 11.75,14.6875 L11.75,13.375 L13.9375,13.375 C14.6623828,13.375 15.25,12.7873828 15.25,12.0625 L15.25,4.73114844 C15.25,4.38305249 15.1117161,4.04921431 14.8655742,3.80307422 Z M10.2734375,14.6875 L4.4765625,14.6875 C4.38595328,14.6875 4.3125,14.6140467 4.3125,14.5234375 L4.3125,6.1015625 C4.3125,6.01095328 4.38595328,5.9375 4.4765625,5.9375 L6.5,5.9375 L6.5,12.0625 C6.5,12.7873828 7.08761719,13.375 7.8125,13.375 L10.4375,13.375 L10.4375,14.5234375 C10.4375,14.6140467 10.3640467,14.6875 10.2734375,14.6875 Z M13.7734375,12.0625 L7.9765625,12.0625 C7.88595328,12.0625 7.8125,11.9890467 7.8125,11.8984375 L7.8125,3.4765625 C7.8125,3.38595328 7.88595328,3.3125 7.9765625,3.3125 L10.875,3.3125 L10.875,5.71875 C10.875,6.08119141 11.1688086,6.375 11.53125,6.375 L13.9375,6.375 L13.9375,11.8984375 C13.9375,11.9890467 13.8640467,12.0625 13.7734375,12.0625 L13.7734375,12.0625 Z M13.9375,5.0625 L12.1875,5.0625 L12.1875,3.3125 L12.450875,3.3125 C12.4943789,3.3125 12.5361055,3.32978125 12.5668945,3.36054297 L13.889457,4.68310547 C13.9202235,4.71387717 13.9375,4.75561093 13.9375,4.799125 L13.9375,5.0625 L13.9375,5.0625 Z\",\n id: \"Shape\"\n})))));\n\nvar SvgIcDuplicate = function SvgIcDuplicate(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: \"13px\",\n height: \"14px\",\n viewBox: \"0 0 13 14\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcDuplicate, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-duplicate.bfff17a6.svg\";\nexport { ForwardRef as ReactComponent };","import ContentLoader from 'react-content-loader';\r\nimport React from 'react';\r\n\r\n//can be created from here: http://danilowoz.com/create-content-loader/\r\nconst SkeletonLoader = () => (\r\n \r\n
)(\r\n ({ last }) => ({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n flexWrap: 'nowrap',\r\n marginBottom: last ? '0px' : '20px',\r\n })\r\n);\r\n\r\nexport const RowLeftText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.xpl.text.secondary,\r\n textAlign: 'left',\r\n marginRight: '15px',\r\n}));\r\n\r\nexport const RowRightText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.xpl.text.primary,\r\n textAlign: 'right',\r\n marginLeft: '15px',\r\n}));\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 5L5.00437 1L9 5\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgIcArrowUp = function SvgIcArrowUp(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 10,\n height: 6,\n viewBox: \"0 0 10 6\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcArrowUp, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-arrow-up.226b398e.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 1L5.00437 5L9 1\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgIcArrowDown = function SvgIcArrowDown(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 10,\n height: 6,\n viewBox: \"0 0 10 6\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcArrowDown, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-arrow-down.840a2f3f.svg\";\nexport { ForwardRef as ReactComponent };","import { Collapse, styled } from '@material-ui/core';\r\nimport { IconButton, TextButton } from '@ds/react-components';\r\nimport { ReactComponent as ArrowUpIcon } from 'assets/icons/ic-arrow-up.svg';\r\nimport { ReactComponent as ArrowDownIcon } from 'assets/icons/ic-arrow-down.svg';\r\n\r\nexport const Container = styled('div')({\r\n minHeight: 450,\r\n});\r\n\r\nexport const TitleContainer = styled('div')({\r\n display: 'flex',\r\n});\r\n\r\nexport const Title = styled('h3')(({ theme }) => ({\r\n fontWeight: 'bold',\r\n fontSize: '26px',\r\n lineHeight: '31px',\r\n marginBottom: '10px',\r\n padding: 0,\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n}));\r\n\r\nexport const AccountTagsContainer = styled('div')({\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n '& span': {\r\n marginRight: 5,\r\n },\r\n marginBottom: '40px',\r\n});\r\n\r\nexport const CopyButtonContainer = styled('div')({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n});\r\n\r\nexport const CopyButton = styled(IconButton)({\r\n marginLeft: 3,\r\n});\r\n\r\nexport const Divider = styled('div')(({ theme }) => ({\r\n border: `1px solid ${theme.palette.xpl.stoke}`,\r\n marginBottom: '20px',\r\n}));\r\n\r\nexport const RowRightTextButton = styled(TextButton)(({ theme }) => ({\r\n color: theme.palette.xpl.text.primary,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n width: '100%',\r\n textAlign: 'right',\r\n}));\r\n\r\nconst getArrowStyles = (theme) => ({\r\n width: '8px',\r\n height: '4px',\r\n color: theme.palette.xpl.secondary.default,\r\n marginLeft: '8px',\r\n});\r\n\r\nexport const ExpandMoreIcon = styled(ArrowDownIcon)(({ theme }) => ({\r\n ...getArrowStyles(theme),\r\n}));\r\n\r\nexport const ExpandLessIcon = styled(ArrowUpIcon)(({ theme }) => ({\r\n ...getArrowStyles(theme),\r\n}));\r\n\r\nexport const Collapsible = styled(Collapse)(({ theme }) => ({\r\n borderRadius: '6px',\r\n backgroundColor: theme.palette.xpl.background,\r\n padding: '10px 16px 10px 16px',\r\n marginBottom: '19px',\r\n}));\r\n","import React, { Fragment, useState, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport { TextButton, InfoWidget, Badge } from '@ds/react-components';\r\nimport { ReactComponent as CopyIcon } from 'assets/icons/ic-duplicate.svg';\r\nimport ClipboardJS from 'clipboard';\r\nimport { isNotEmptyArray } from 'utils/misc';\r\nimport useToggle from 'hooks/useToggle';\r\nimport SkeletonLoader from './SkeletonLoader';\r\nimport {\r\n RowLeftText,\r\n RowRightText,\r\n RowContainer,\r\n} from '../common/InfoRowComponents';\r\n\r\nimport * as Styled from './PersonalInformation.styled';\r\n\r\nconst PersonalInformationPreview = (props) => {\r\n const { customerDetails, localisation, permissions } = props;\r\n\r\n const { dateFormat } = localisation.locales;\r\n\r\n const {\r\n adfitNo,\r\n businessId,\r\n name,\r\n fullName,\r\n dob,\r\n prefContact,\r\n contacts,\r\n prefAddress,\r\n addresses,\r\n firstName,\r\n isActive,\r\n cancelReason = 'Business request',\r\n customCancelReason,\r\n facilityName,\r\n } = customerDetails;\r\n\r\n const [expandContact, toggleExpandContact] = useToggle(false);\r\n const [expandAddress, toggleExpandAddress] = useToggle(false);\r\n const [clipButtonState, setClipButtonState] = useState({});\r\n\r\n const dobStr = dob && moment(dob).format(dateFormat);\r\n\r\n const { prompts } = localisation;\r\n\r\n useEffect(() => {\r\n const clipBoard = new ClipboardJS('button[data-clipboard-text]');\r\n clipBoard.on('success', (e) => {\r\n setClipButtonState((prevState) => ({\r\n ...prevState,\r\n [e.trigger.id]: 'Copied!',\r\n }));\r\n });\r\n return () => {\r\n clipBoard.destroy();\r\n };\r\n }, [setClipButtonState]);\r\n\r\n const preferredContact = useMemo(() => {\r\n if (!isNotEmptyArray(contacts)) return null;\r\n\r\n //Check if there is a preferred contact based on prefContact in customer table.\r\n if (prefContact) {\r\n const result = contacts.find((c) => c.contact === prefContact);\r\n if (result) return result;\r\n }\r\n\r\n //Check if any of the contacts are marked as preferred or else return the first one.\r\n return contacts.find((c) => c.preferred === true) || contacts[0];\r\n }, [contacts, prefContact]);\r\n\r\n const preferredAddress = useMemo(() => {\r\n if (!isNotEmptyArray(addresses)) return null;\r\n if (prefAddress) {\r\n const result = addresses.find((a) => a.addressId === prefAddress);\r\n if (result) return result;\r\n }\r\n return addresses.find((a) => a.preferred === true) || addresses[0];\r\n }, [addresses, prefAddress]);\r\n\r\n const filteredContacts = useMemo(() => {\r\n if (!isNotEmptyArray(contacts)) return [];\r\n return contacts.filter((c) => c.contactType !== 'PE');\r\n }, [contacts]);\r\n\r\n const filteredAddress = useMemo(() => {\r\n if (!isNotEmptyArray(addresses)) return [];\r\n return addresses.filter((c) => c.addressType !== 'PV');\r\n }, [addresses]);\r\n\r\n const previousAddress = useMemo(() => {\r\n if (!isNotEmptyArray(addresses)) return [];\r\n return addresses.filter((c) => c.addressType === 'PV');\r\n }, [addresses]);\r\n\r\n const getContactDisplayType = (contactType) => {\r\n if (\r\n !prompts ||\r\n !prompts.contactTypes ||\r\n !prompts.contactTypes[contactType]\r\n ) {\r\n return '';\r\n }\r\n return prompts.contactTypes[contactType] || '';\r\n };\r\n\r\n const renderContactByType = (contact) => {\r\n const { contactType, contactDetail } = contact;\r\n\r\n if (contactType === 'EM') {\r\n return {contactDetail} ;\r\n }\r\n return {contactDetail} ;\r\n };\r\n\r\n const getAccountStatus = (account) => {\r\n let status = null;\r\n if (!account.isActive) {\r\n status = (\r\n \r\n Cancelled \r\n \r\n );\r\n } else if (account.isSuspended) {\r\n status = (\r\n \r\n Suspended \r\n \r\n );\r\n } else {\r\n status = (\r\n \r\n Active \r\n \r\n );\r\n status = account.isFixedTerm ? (\r\n \r\n {status}\r\n Set to Term \r\n \r\n ) : (\r\n \r\n {status}\r\n Ongoing \r\n \r\n );\r\n }\r\n if (account.overdueAmount > 0) {\r\n status = (\r\n \r\n {status}\r\n Overdue \r\n \r\n );\r\n }\r\n return status;\r\n };\r\n\r\n return (\r\n \r\n {'Edit'} \r\n \r\n )\r\n }\r\n isLoading={!customerDetails.adfitNo}\r\n contentLoader={\r\n {name || firstName} \r\n \r\n {getAccountStatus(customerDetails)}\r\n \r\n\r\n \r\n {'Debitsucess ID'} \r\n \r\n {adfitNo} \r\n \r\n \r\n \r\n\r\n \r\n {'Business ID'} \r\n \r\n {businessId} \r\n \r\n \r\n \r\n\r\n \r\n {'Business Name'} \r\n {facilityName} \r\n \r\n\r\n {!isActive && (\r\n \r\n {'Cancellation reason'} \r\n \r\n {(customCancelReason &&\r\n 'Facility request -' + customCancelReason) ||\r\n cancelReason}\r\n \r\n \r\n )}\r\n\r\n \r\n {'Full name'} \r\n {fullName} \r\n \r\n\r\n \r\n {'Date of birth'} \r\n {dobStr} \r\n \r\n\r\n \r\n {'Contact'} \r\n {preferredContact ? (\r\n \r\n {renderContactByType(preferredContact)} \r\n {expandContact ? (\r\n \r\n ) : (\r\n {'-'} \r\n )}\r\n \r\n\r\n \r\n {filteredContacts.map((contact, index) => (\r\n \r\n \r\n {getContactDisplayType(contact.contactType)}\r\n \r\n {renderContactByType(contact)} \r\n \r\n ))}\r\n \r\n\r\n \r\n {'Address'} \r\n {preferredAddress ? (\r\n \r\n {preferredAddress.address} \r\n {isNotEmptyArray(addresses) ? (\r\n expandAddress ? (\r\n \r\n ) : (\r\n {'-'} \r\n )}\r\n \r\n\r\n \r\n {filteredAddress.map((adrs) => {\r\n return (\r\n \r\n \r\n {' '}\r\n {localisation.prompts.addressType[adrs.addressType]}{' '}\r\n \r\n {adrs.address} \r\n \r\n );\r\n })}\r\n\r\n {previousAddress.length > 0 && \r\n \r\n {localisation.prompts.addressType[adrs.addressType]}{' '}\r\n \r\n {adrs.address} \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nPersonalInformationPreview.propTypes = {\r\n localisation: PropTypes.object,\r\n permissions: PropTypes.array.isRequired,\r\n customerDetails: PropTypes.object,\r\n};\r\n\r\nPersonalInformationPreview.defaultProps = {\r\n customerDetails: {},\r\n};\r\n\r\nexport default PersonalInformationPreview;\r\n","import { styled } from '@material-ui/core';\r\n\r\nexport const Container = styled('div')({});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Link } from 'react-router-dom';\r\nimport { TextButton, InfoWidget } from '@ds/react-components';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport {\r\n RowRightText,\r\n RowLeftText,\r\n RowContainer,\r\n} from '../common/InfoRowComponents';\r\n\r\nimport * as Styled from './EmergencyContactPreview.styled';\r\n\r\nconst styles = (theme) => ({\r\n root: {},\r\n data: {\r\n height: 40,\r\n },\r\n loader: {\r\n height: 150,\r\n width: '100%',\r\n },\r\n});\r\n\r\nconst EmergencyContactPreview = (props) => {\r\n const { classes, customerDetails, permissions } = props;\r\n const { adfitNo, contacts } = customerDetails;\r\n const anyContact = contacts && contacts[0];\r\n const emergencyContact =\r\n anyContact && contacts.find((c) => c.contactType === 'PE');\r\n const showEmergency = emergencyContact && emergencyContact.contactName;\r\n\r\n return (\r\n \r\n {showEmergency ? 'Edit' : Add } \r\n \r\n )\r\n }\r\n isLoading={!adfitNo}\r\n contentLoader={\r\n \r\n {'Full Name'} \r\n \r\n {emergencyContact && emergencyContact.contactName}\r\n \r\n \r\n \r\n {'Contact'} \r\n \r\n {emergencyContact && emergencyContact.contactDetail}\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nEmergencyContactPreview.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n permissions: PropTypes.array.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(EmergencyContactPreview);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"none\",\n fillRule: \"evenodd\",\n stroke: \"currentColor\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 1.5\n}, React.createElement(\"path\", {\n d: \"M1.21 11.123l4.913-5.005L1.21 1.123M11.456 1.123L6.544 6.128l4.912 4.995\"\n}));\n\nvar SvgIcCloseModal = function SvgIcCloseModal(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 13,\n height: 12,\n viewBox: \"0 0 13 12\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcCloseModal, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-close-modal.84fcae0f.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useCallback, useMemo, useState } from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n FilledButton,\r\n IconButton,\r\n TextButton,\r\n InfoWidget,\r\n} from '@ds/react-components';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport { Typography, Dialog } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport { ReactComponent as CloseSvg } from 'assets/icons/ic-close-modal.svg';\r\n\r\nconst styles = (theme) => ({\r\n root: {},\r\n expandButton: {\r\n color: theme.palette.common.lightText,\r\n },\r\n dialog: {\r\n maxWidth: '750px',\r\n },\r\n dialogTitleContainer: {\r\n display: 'flex',\r\n flex: '0 0 auto',\r\n flexDirection: 'row',\r\n margin: '30px 32px 0 40px',\r\n justifyContent: 'space-between',\r\n alignContent: 'center',\r\n },\r\n closeButton: {\r\n margin: '0',\r\n color: theme.palette.common.black,\r\n },\r\n closeIcon: {\r\n width: '16px',\r\n height: '16px',\r\n },\r\n dialogContentContainer: {\r\n flex: '1 1 auto',\r\n overflowY: 'auto',\r\n maxHeight: '400px',\r\n minHeight: '40px',\r\n margin: '30px 36px 0 40px',\r\n padding: '0 14px 10px 0',\r\n },\r\n dialogText: {\r\n color: theme.palette.common.darkerText,\r\n padding: '1px 14px 1px 1px',\r\n margin: '10px 0',\r\n },\r\n dialogActionItemContainer: {\r\n flex: '0 0 auto',\r\n margin: '30px 36px 30px 40px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n loader: {\r\n height: 150,\r\n width: '100%',\r\n },\r\n});\r\n\r\nconst AdditionalInfoPreview = (props) => {\r\n const { classes, customerDetails, localisation, className } = props;\r\n const { adfitNo, notes, loadDate } = customerDetails;\r\n const [isDialogOpen, setDialogOpen] = useState(false);\r\n const closeDialog = useCallback(() => {\r\n setDialogOpen(false);\r\n }, [setDialogOpen]);\r\n\r\n //Check if the string has just blank spaces.\r\n const isNotEmptyString = (value) => (!value ? false : !/^\\s*$/g.test(value));\r\n\r\n const formattedNotes = useMemo(() => {\r\n if (!notes) return '';\r\n return (\r\n notes\r\n .trim()\r\n .split(/(?:\\r|\\n|\\r\\n)+$/gim)\r\n // Remove lines with empty strings in them.\r\n .filter(isNotEmptyString)\r\n );\r\n }, [notes]);\r\n\r\n return (\r\n <>\r\n setDialogOpen(true)}>\r\n View All\r\n \r\n ) : (\r\n \r\n {notes\r\n ? notes.substring(0, 190) + (notes.length > 190 ? '...' : '')\r\n : 'No additional information yet'}\r\n \r\n \r\n {loadDate\r\n ? 'Created ' +\r\n moment(loadDate).format(localisation.locales.dateTimeFormat)\r\n : ''}\r\n \r\n \r\n\r\n \r\n \r\n {'Additional Information'} \r\n \r\n
\r\n \r\n {formattedNotes &&\r\n formattedNotes.map((val, index) => (\r\n
\r\n \r\n \r\n {'Ok'}\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nAdditionalInfoPreview.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n permissions: PropTypes.array.isRequired,\r\n className: PropTypes.string,\r\n localisation: PropTypes.shape({\r\n locales: PropTypes.shape({\r\n dateTimeFormat: PropTypes.string,\r\n }).isRequired,\r\n }),\r\n};\r\n\r\nexport default withStyles(styles)(AdditionalInfoPreview);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M8 1.03226C11.8265 1.03226 14.9677 4.13145 14.9677 8C14.9677 11.8481 11.8513 14.9677 8 14.9677C4.15342 14.9677 1.03226 11.8528 1.03226 8C1.03226 4.15474 4.14845 1.03226 8 1.03226ZM8 0C3.58203 0 0 3.58332 0 8C0 12.4193 3.58203 16 8 16C12.418 16 16 12.4193 16 8C16 3.58332 12.418 0 8 0ZM6.83871 11.0968H7.22581V7.22581H6.83871C6.62494 7.22581 6.45161 7.05248 6.45161 6.83871V6.58065C6.45161 6.36687 6.62494 6.19355 6.83871 6.19355H8.3871C8.60087 6.19355 8.77419 6.36687 8.77419 6.58065V11.0968H9.16129C9.37506 11.0968 9.54839 11.2701 9.54839 11.4839V11.7419C9.54839 11.9557 9.37506 12.129 9.16129 12.129H6.83871C6.62494 12.129 6.45161 11.9557 6.45161 11.7419V11.4839C6.45161 11.2701 6.62494 11.0968 6.83871 11.0968ZM8 3.35484C7.4299 3.35484 6.96774 3.817 6.96774 4.3871C6.96774 4.95719 7.4299 5.41935 8 5.41935C8.5701 5.41935 9.03226 4.95719 9.03226 4.3871C9.03226 3.817 8.5701 3.35484 8 3.35484Z\"\n});\n\nvar SvgInfoCircle = function SvgInfoCircle(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"currentColor\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgInfoCircle, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/info-circle.7621098e.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { InfoWidget } from '@ds/react-components';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport { Typography, Grid, Tooltip, withStyles } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport { numberToCurrency, isNullOrUndefined } from 'utils/misc';\r\nimport { ReactComponent as InfoCircle } from 'assets/icons/info-circle.svg';\r\n\r\nconst styles = (theme) => ({\r\n root: {\r\n '& h4': {\r\n fontWeight: 'bold',\r\n margin: '5px 0',\r\n },\r\n },\r\n error: {\r\n color: theme.palette.xpl.text.warning,\r\n fontWeight: 'normal',\r\n },\r\n smallText: {\r\n color: theme.palette.xpl.text.primary,\r\n },\r\n headings: {\r\n color: theme.palette.xpl.text.secondary,\r\n paddingBottom: '5px',\r\n },\r\n data: {\r\n fontWeight: 'normal',\r\n paddingBottom: '10px',\r\n },\r\n overdueInfoIconContainer: {\r\n marginLeft: '4px',\r\n },\r\n overdueInfoIcon: {\r\n width: '16px',\r\n height: '16px',\r\n verticalAlign: 'middle',\r\n color: theme.palette.xpl.secondary.default,\r\n '&:hover': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n tooltip: {\r\n backgroundColor: theme.palette.xpl.foreground,\r\n fontSize: '12px',\r\n borderRadius: '6px',\r\n borderWidth: '1px',\r\n borderStyle: 'solid',\r\n borderColor: theme.palette.xpl.stoke,\r\n color: theme.palette.common.black,\r\n boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.08)',\r\n padding: '11px 15px',\r\n },\r\n tooltipArrow: {\r\n color: theme.palette.common.white,\r\n '&::before': {\r\n border: `1px solid ${theme.palette.xpl.stoke}`,\r\n boxSizing: 'border-box',\r\n boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.08)',\r\n },\r\n },\r\n overdueBreakdownContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n height: '100%',\r\n fontSize: '12px',\r\n lineHeight: '20px',\r\n },\r\n overdueBreakdownItem: {\r\n display: 'flex',\r\n flex: '1 1 auto',\r\n justifyContent: 'space-between',\r\n },\r\n overdueBreakdownDivider: {\r\n borderTop: `1px solid ${theme.palette.xpl.stoke}`,\r\n margin: '6px 0 5px 0',\r\n width: '100%',\r\n },\r\n boldCurrency: {\r\n fontWeight: 'bold',\r\n marginLeft: '43px',\r\n },\r\n loader: {\r\n height: 150,\r\n width: '100%',\r\n },\r\n});\r\n\r\nconst PaymentSummaryPreview = (props) => {\r\n const { classes, customerDetails, localisation } = props;\r\n const {\r\n startDate,\r\n finishDate,\r\n numOfTerm,\r\n overdueAmount,\r\n membershipDue,\r\n catchUp,\r\n catchUpUntil,\r\n balanceToSettle,\r\n termType,\r\n defaultFeeDue,\r\n } = customerDetails;\r\n\r\n const { dateFormat } = localisation.locales;\r\n const startDateStr = startDate && moment(startDate).format(dateFormat);\r\n const finishDateStr = finishDate && moment(finishDate).format(dateFormat);\r\n\r\n const renderOverdueBreakDown = (\r\n overdueAmount,\r\n membershipDue,\r\n defaultFeeDue\r\n ) => {\r\n const dsFeeDue = overdueAmount - membershipDue - defaultFeeDue;\r\n return (\r\n \r\n
\r\n \r\n {'Payments'}\r\n \r\n \r\n {numberToCurrency(membershipDue, localisation)}\r\n \r\n
\r\n
\r\n \r\n {'Default Fee'}\r\n \r\n \r\n {numberToCurrency(defaultFeeDue, localisation)}\r\n \r\n
\r\n
\r\n \r\n {'Other fees'}\r\n \r\n \r\n {numberToCurrency(dsFeeDue, localisation)}\r\n \r\n
\r\n
\r\n
\r\n \r\n {'Total'}\r\n \r\n \r\n {numberToCurrency(overdueAmount, localisation)}\r\n \r\n
\r\n
\r\n \r\n \r\n Contract start date\r\n \r\n \r\n {startDateStr}\r\n \r\n \r\n \r\n \r\n {'Contract finish date'}\r\n \r\n \r\n {customerDetails.isActive ? 'Ongoing' : finishDateStr}\r\n \r\n \r\n \r\n Minimum term \r\n \r\n {numOfTerm} {localisation.prompts.termType[termType]}\r\n \r\n \r\n \r\n \r\n Balance to settle\r\n \r\n {`${numberToCurrency(\r\n balanceToSettle || 0,\r\n localisation\r\n )}`}\r\n \r\n {overdueAmount > 0 && (\r\n \r\n Overdue \r\n \r\n \r\n \r\n {`${numberToCurrency(overdueAmount || 0, localisation)}`}\r\n \r\n \r\n {!isNullOrUndefined(membershipDue) && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n {catchUp > 0 && (\r\n \r\n \r\n Catch up payment\r\n \r\n {`${numberToCurrency(\r\n catchUp || 0,\r\n localisation\r\n )}`}\r\n \r\n until{' '}\r\n {catchUpUntil\r\n ? `${moment(catchUpUntil).format(dateFormat)}`\r\n : 'fully paid'}\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nPaymentSummaryPreview.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(PaymentSummaryPreview);\r\n","import ContentLoader from 'react-content-loader';\r\nimport React from 'react';\r\n\r\nconst UpcomingPaymentsLoader = () => (\r\n \r\n \r\n {'Pay at Business'} \r\n \r\n )\r\n }\r\n isLoading={!payMethod}\r\n contentLoader={\r\n \r\n {`${pmtTeaser}`} \r\n {`${pmtDate}`}\r\n \r\n \r\n {`${pmtAmount}`} \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nUpcomingPaymentPreview.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n customerDetails: PropTypes.object,\r\n localisation: PropTypes.object,\r\n permissions: PropTypes.array.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(UpcomingPaymentPreview);\r\n","export const groupTransactionsByPaymentId = (transactions) => {\r\n let resultWithPayment = [];\r\n let resultWithoutPayment = [];\r\n //If the paymentId is null, the docket would not be a combined payment\r\n const transWithoutPayment = transactions.filter((x) => x.paymentId === null);\r\n resultWithoutPayment = transWithoutPayment.map((item) => {\r\n item.isCombinedPayment = false;\r\n return item;\r\n });\r\n\r\n //If the paymentId is not null, try to combine the payments\r\n const transWithPayment = transactions.filter((x) => x.paymentId !== null);\r\n\r\n const paymentIds = transWithPayment.reduce((group, trans) => {\r\n const { paymentId } = trans;\r\n group[paymentId] = group[paymentId] ?? [];\r\n group[paymentId].push(trans);\r\n return group;\r\n }, {});\r\n\r\n for (const key in paymentIds) {\r\n const transactionsByPaymentId = paymentIds[key];\r\n // If payment only has one docket, display as normal row\r\n if (transactionsByPaymentId.length === 1) {\r\n transactionsByPaymentId[0].isCombinedPayment = false;\r\n const item = { ...transactionsByPaymentId[0] };\r\n resultWithPayment = [...resultWithPayment, item];\r\n } else {\r\n // If payment has multi dockets, display as expandable row\r\n let totalAmount = 0;\r\n\r\n const childItems = transactionsByPaymentId.map((trans) => {\r\n let item = { ...trans };\r\n item.transDateStr = '';\r\n item.transTypeStr = '';\r\n item.paymentTypeStr = '';\r\n totalAmount = totalAmount + item.amount;\r\n return item;\r\n });\r\n\r\n const firstItem = transactionsByPaymentId[0];\r\n let parentItem = { ...firstItem };\r\n parentItem.transcodeStr = 'Combined Payment';\r\n parentItem.amount = totalAmount;\r\n parentItem.isCombinedPayment = true;\r\n parentItem.__childrens = childItems;\r\n resultWithPayment = [...resultWithPayment, parentItem];\r\n }\r\n }\r\n\r\n return [...resultWithoutPayment, ...resultWithPayment].sort(\r\n (a, b) => new Date(b.transDate) - new Date(a.transDate)\r\n );\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Typography } from '@material-ui/core';\r\nimport { numberToCurrency } from 'utils/misc';\r\nimport { Link } from 'react-router-dom';\r\nimport Table from 'components/ui/Table';\r\nimport { TextButton, InfoWidget } from '@ds/react-components';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport { groupTransactionsByPaymentId } from 'utils/transactions';\r\n\r\nconst styles = (theme) => ({\r\n root: {},\r\n tableHead: {\r\n '& tr th': {\r\n padding: '0px 15px 15px 15px',\r\n },\r\n },\r\n amountPos: {\r\n color: theme.palette.xpl.green[700],\r\n },\r\n amountNeg: {\r\n color: theme.palette.xpl.message.negative.default,\r\n },\r\n loader: {\r\n height: 150,\r\n width: '100%',\r\n },\r\n transDate: {\r\n color: theme.palette.xpl.text.primary,\r\n },\r\n});\r\n\r\nconst tableMetadata = [\r\n {\r\n id: 'transDate',\r\n renderingField: 'transDateStr',\r\n width: '10%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Date',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'paymentType',\r\n renderingField: 'paymentTypeStr',\r\n width: '20%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Payment method',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'transcode',\r\n renderingField: 'transcodeStr',\r\n width: '20%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Description',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'amount',\r\n renderingField: 'amountFld',\r\n width: '10%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Amount',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'errorCode',\r\n renderingField: 'errorCodeStr',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Details',\r\n alignment: 'left',\r\n },\r\n];\r\n\r\nconst TransactionsPreview = (props) => {\r\n const { classes, customerDetails, localisation } = props;\r\n const { adfitNo, transactions } = customerDetails;\r\n\r\n const trans = Array.isArray(transactions) ? transactions : [];\r\n const groupedTransactions = groupTransactionsByPaymentId(trans);\r\n const amountFld = (amount, classes, localisation) => (\r\n \r\n {amount < 0 ? '-' : '+'}\r\n {numberToCurrency(Math.abs(amount), localisation)}\r\n \r\n );\r\n\r\n const createRowItems = (transactions, classes, localisation) => {\r\n const { dateFormat } = localisation.locales;\r\n const overviewTableLength = 3;\r\n let result = transactions.map((item, index) => {\r\n // Date\r\n item.transDateStr = (\r\n \r\n {moment(item.transDate).format(dateFormat)}\r\n \r\n );\r\n\r\n // Payment method\r\n item.paymentTypeStr =\r\n localisation.prompts.paymentType[item.paymentType] || 'Other';\r\n\r\n // Description\r\n if (item.isCombinedPayment) {\r\n item.transcodeStr = 'Combined payment...';\r\n item.__childrens.forEach((childItem) => {\r\n childItem.transcodeStr =\r\n localisation.prompts.transactionCode[childItem.transcode];\r\n childItem.amountFld = amountFld(\r\n childItem.amount,\r\n classes,\r\n localisation\r\n );\r\n });\r\n } else {\r\n item.transcodeStr =\r\n localisation.prompts.transactionCode[item.transcode];\r\n }\r\n\r\n // Amount\r\n item.amountFld = amountFld(item.amount, classes, localisation);\r\n\r\n // Details\r\n item.errorCodeStr = localisation.prompts.transErrorCode[item.errorCode];\r\n if (item.retryCount > 0) {\r\n item.errorCodeStr = 'Payment Retry';\r\n }\r\n\r\n return item;\r\n });\r\n return result.slice(0, overviewTableLength);\r\n };\r\n\r\n const data = useMemo(\r\n () => createRowItems(groupedTransactions, classes, localisation),\r\n [classes, createRowItems, groupedTransactions, localisation, trans]\r\n );\r\n\r\n return (\r\n {' View All'} \r\n \r\n }\r\n isLoading={!adfitNo || transactions == null}\r\n classes={{ root: classes.root }}>\r\n \r\n \r\n \r\n {notes}\r\n \r\n \r\n \r\n \r\n by {callNote.fullName}\r\n \r\n \r\n \r\n );\r\n\r\n callNote.callHowFld = (\r\n \r\n \r\n {localisation.prompts.callHow[callNote.callHow]}\r\n \r\n \r\n );\r\n\r\n callNote.callWhenFld = (\r\n \r\n \r\n {moment(callNote.callWhen).format(dateFormat)}\r\n \r\n \r\n );\r\n\r\n return callNote;\r\n });\r\n};\r\n\r\nconst tableMetadata = [\r\n {\r\n id: 'callHow',\r\n renderingField: 'callHowFld',\r\n width: '15%',\r\n numeric: false,\r\n disablePadding: false,\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'notes',\r\n renderingField: 'notesFld',\r\n width: '60%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'callWhen',\r\n renderingField: 'callWhenFld',\r\n width: '25%',\r\n numeric: false,\r\n disablePadding: false,\r\n alignment: 'left',\r\n },\r\n];\r\n\r\nconst ActivitiesPreview = (props) => {\r\n const { classes, customerDetails, localisation } = props;\r\n const { adfitNo, callNotes } = customerDetails;\r\n const activities =\r\n callNotes && getCallNotesForDisplay(callNotes, localisation, classes);\r\n return (\r\n \r\n View All \r\n \r\n }\r\n isLoading={!adfitNo || callNotes == null}\r\n contentLoader={\r\n \r\n \r\n {'Guarantor name'} \r\n {name || '-'} \r\n \r\n \r\n {'Relationship'} \r\n {relation || '-'} \r\n \r\n \r\n {'Date of birth'} \r\n {formattedDateOfBirth || '-'} \r\n \r\n\r\n \r\n {'Contact'} \r\n {phHm && phWk ? (\r\n \r\n {phHm || phWk} \r\n {expandContact ? (\r\n \r\n ) : (\r\n {phHm || phWk || '-'} \r\n )}\r\n \r\n\r\n \r\n {phHm && (\r\n \r\n {'Home'} \r\n {phHm} \r\n \r\n )}\r\n {phWk && (\r\n \r\n {'Work'} \r\n {phWk} \r\n \r\n )}\r\n \r\n\r\n \r\n {'Address'} \r\n {address || '-'} \r\n \r\n \r\n {'Date signed'} \r\n {formattedDateSigned || '-'} \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nGuarantorDetails.propTypes = {\r\n localisation: PropTypes.object.isRequired,\r\n guarantorInfo: PropTypes.shape({\r\n name: PropTypes.string,\r\n address: PropTypes.string,\r\n dated: PropTypes.string,\r\n phHm: PropTypes.string,\r\n phWk: PropTypes.string,\r\n relation: PropTypes.string,\r\n dob: PropTypes.string,\r\n }),\r\n};\r\n\r\nGuarantorDetails.defaultProps = {\r\n guarantorInfo: null,\r\n};\r\n\r\nexport default GuarantorDetails;\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useParams } from 'react-router-dom';\r\nimport { Grid, withStyles } from '@material-ui/core';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport CustomerActions from './CustomerActions';\r\nimport PersonalInformationPreview from './PersonalInformationPreview';\r\nimport EmergencyContactPreview from './EmergencyContactPreview';\r\nimport AdditionalInfoPreview from './AdditionalInfoPreview';\r\nimport PaymentSummaryPreview from './PaymentSummaryPreview';\r\nimport UpcomingPaymentPreview from './UpcomingPaymentPreview';\r\nimport TransactionsPreview from './TransactionsPreview';\r\nimport ActivitiesPreview from './ActivitiesPreview';\r\nimport GuarantorDetails from './GuarantorDetails';\r\n\r\nconst styles = (theme) => ({\r\n root: {},\r\n actionButton: {\r\n marginRight: 10,\r\n },\r\n});\r\n\r\nconst CustomerDetails = (props) => {\r\n const {\r\n classes,\r\n customerDetails,\r\n localisation,\r\n permissions,\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n getActivePayMethod,\r\n getNextPaymentAmount,\r\n getAllTransactions,\r\n getCallNotes,\r\n getMembershipDue,\r\n guarantorDetails,\r\n getGuarantorDetailsByAdfitNo,\r\n getDefaultFeeDue,\r\n } = props;\r\n\r\n const { adfitNo } = useParams();\r\n\r\n useEffect(() => {\r\n (async () => {\r\n await Promise.all([\r\n getPersonalInfo(adfitNo),\r\n getBalanceToSettle(adfitNo),\r\n getActivePayMethod(adfitNo),\r\n getNextPaymentAmount(adfitNo),\r\n getAllTransactions(adfitNo),\r\n getMembershipDue(adfitNo),\r\n getCallNotes(adfitNo),\r\n getGuarantorDetailsByAdfitNo(adfitNo),\r\n getDefaultFeeDue(adfitNo),\r\n ]);\r\n })();\r\n }, [\r\n adfitNo,\r\n getAllTransactions,\r\n getNextPaymentAmount,\r\n getActivePayMethod,\r\n getBalanceToSettle,\r\n getPersonalInfo,\r\n getCallNotes,\r\n getMembershipDue,\r\n getGuarantorDetailsByAdfitNo,\r\n getDefaultFeeDue,\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 {guarantorDetails && guarantorDetails.name && (\r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nCustomerDetails.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n localisation: PropTypes.object,\r\n customerDetails: PropTypes.object,\r\n permissions: PropTypes.array.isRequired,\r\n getActivePayMethod: PropTypes.func.isRequired,\r\n getPersonalInfo: PropTypes.func.isRequired,\r\n getBalanceToSettle: PropTypes.func.isRequired,\r\n getNextPaymentAmount: PropTypes.func.isRequired,\r\n getAllTransactions: PropTypes.func.isRequired,\r\n getCallNotes: PropTypes.func.isRequired,\r\n getGuarantorDetailsByAdfitNo: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(CustomerDetails);\r\n","import { compose } from 'redux';\r\nimport withRouteParams from 'hoc/withRouteParams';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n getActivePayMethod,\r\n getCallNotes,\r\n getNextPaymentAmount,\r\n getAllTransactions,\r\n getMembershipDue,\r\n getDefaultFeeDue,\r\n} from 'ducks/customerDetails';\r\nimport { getGuarantorDetailsByAdfitNo } from 'ducks/guarantorDetails';\r\nimport { selectEntitiesByAdfitNo } from 'selectors/common';\r\nimport withScrollableTopTabs from 'hoc/withScrollableTopTabs';\r\nimport customerPageTopTabs from 'constants/customerPageTopTabs';\r\nimport CustomerDetails from './CustomerDetails';\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n customerDetails:\r\n state.customerDetails.adfitNo === ownProps.routeParams.adfitNo\r\n ? state.customerDetails\r\n : {},\r\n localisation: state.localisation,\r\n permissions: state.auth.permissions,\r\n guarantorDetails: selectEntitiesByAdfitNo(\r\n state.guarantorDetails,\r\n ownProps.routeParams.adfitNo\r\n ),\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n getActivePayMethod,\r\n getNextPaymentAmount,\r\n getAllTransactions,\r\n getCallNotes,\r\n getMembershipDue,\r\n getDefaultFeeDue,\r\n getGuarantorDetailsByAdfitNo,\r\n};\r\n\r\nexport default compose(\r\n withScrollableTopTabs(customerPageTopTabs, 0, ['adfitNo']),\r\n withRouteParams,\r\n connect(mapStateToProps, mapDispatchToProps)\r\n)(CustomerDetails);\r\n","import { createReducer, makeActionCreator } from 'utils/reduxCreators';\r\nimport {\r\n fetchAccountInfo,\r\n fetchAllTransactions,\r\n downloadTransactionsService,\r\n} from 'services/transactions';\r\nimport { updateAppLoading } from './meta';\r\n\r\nexport const RECEIVED_ALL_TRANSACTIONS =\r\n 'transactions/RECEIVED_ALL_TRANSACTIONS';\r\nexport const RECEIVED_ACCOUNT_INFOR = 'transactions/RECEIVED_ACCOUNT_INFOR';\r\nexport const DOWNLOADED_ALL_TRANSACTIONS =\r\n 'transactions/DOWNLOADED_ALL_TRANSACTIONS';\r\nexport const REST_TRANSACTION_PAGE = 'transactions/REST_TRANSACTION_PAGE';\r\n\r\nconst initialState = {\r\n accountInfor: {},\r\n transactions: {},\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [RECEIVED_ACCOUNT_INFOR]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n accountInfor: payload,\r\n };\r\n },\r\n [RECEIVED_ALL_TRANSACTIONS]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n transactions: payload,\r\n };\r\n },\r\n [DOWNLOADED_ALL_TRANSACTIONS]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n downloaded: payload,\r\n };\r\n },\r\n [REST_TRANSACTION_PAGE]: (state) => {\r\n return {\r\n ...state,\r\n transactions: {},\r\n accountInfor: {},\r\n };\r\n },\r\n});\r\n\r\nexport const getAccountInfo = (adfitNo) => async (dispatch) => {\r\n try {\r\n dispatch(updateAppLoading(true));\r\n const result = await fetchAccountInfo(adfitNo);\r\n dispatch({ type: RECEIVED_ACCOUNT_INFOR, payload: result });\r\n dispatch(updateAppLoading(false));\r\n } catch (err) {\r\n dispatch(updateAppLoading(false));\r\n throw err;\r\n }\r\n};\r\n\r\nexport const getAllTransactions = (adfitNo) => async (dispatch) => {\r\n try {\r\n dispatch(updateAppLoading(true));\r\n const result = await fetchAllTransactions(adfitNo);\r\n dispatch({ type: RECEIVED_ALL_TRANSACTIONS, payload: result });\r\n dispatch(updateAppLoading(false));\r\n } catch (err) {\r\n dispatch(updateAppLoading(false));\r\n throw err;\r\n }\r\n};\r\n\r\nexport const downloadTransactions = (adfitNo) => async (dispatch) => {\r\n try {\r\n dispatch(updateAppLoading(true));\r\n await downloadTransactionsService(adfitNo);\r\n dispatch({ type: DOWNLOADED_ALL_TRANSACTIONS, payload: {} });\r\n dispatch(updateAppLoading(false));\r\n } catch (err) {\r\n dispatch(updateAppLoading(false));\r\n throw err;\r\n }\r\n};\r\n\r\nexport const resetTransPage = makeActionCreator(REST_TRANSACTION_PAGE);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"title\", null, \"Shape\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"UID\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, React.createElement(\"g\", {\n id: \"Customers-Transactions3-1-(Filters-Tick1)\",\n transform: \"translate(-1233.000000, -331.000000)\",\n fill: \"currentColor\"\n}, React.createElement(\"g\", {\n id: \"Filters\",\n transform: \"translate(250.000000, 220.000000)\"\n}, React.createElement(\"g\", {\n id: \"btns\",\n transform: \"translate(969.000000, 98.000000)\"\n}, React.createElement(\"g\", {\n id: \"btn-filter\"\n}, React.createElement(\"g\", {\n id: \"filter\",\n transform: \"translate(14.000000, 13.000000)\"\n}, React.createElement(\"path\", {\n d: \"M12.6861865,0 L1.31405764,0 C0.148174826,0 -0.440071268,1.41451953 0.38598342,2.24057422 L4.81249904,6.66864844 L4.81249904,11.375 C4.81249904,11.7881094 5.00699514,12.1771289 5.33749904,12.46875 L7.08749904,13.7557109 C7.94262014,14.3533086 9.18749904,13.7977656 9.18749904,12.7057109 L9.18749904,6.66864844 L13.6142608,2.24057422 C14.4386475,1.4161875 13.8543936,0 12.6861865,0 Z M7.87499904,6.125 L7.87499904,12.6875 L6.12499904,11.375 L6.12499904,6.125 L1.31249904,1.3125 L12.687499,1.3125 L7.87499904,6.125 Z\",\n id: \"Shape\"\n})))))));\n\nvar SvgIcFilter = function SvgIcFilter(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: \"14px\",\n height: \"14px\",\n fill: \"currentColor\",\n stroke: \"currentColor\",\n viewBox: \"0 0 14 14\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? React.createElement(\"title\", null, title) : null, _ref3, _ref4);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcFilter, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-filter.b55d92f2.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport { DatePicker, TextButton, FilledButton } from '@ds/react-components';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { ReactComponent as FilterIcon } from 'assets/icons/ic-filter.svg';\r\n\r\nconst styles = (theme) => ({\r\n filterButton: {\r\n height: '42px',\r\n width: '98px',\r\n whiteSpace: 'nowrap',\r\n },\r\n filterIcon: {\r\n fontSize: '14px',\r\n marginRight: '8px',\r\n },\r\n clearButton: {\r\n height: '42px',\r\n width: '85px',\r\n color: theme.palette.xpl.text.primary,\r\n whiteSpace: 'nowrap',\r\n fontSize: '14px',\r\n fontWeight: '500',\r\n textDecoration: 'none',\r\n },\r\n datePicker: {\r\n width: '100%',\r\n },\r\n containerGrid: {\r\n padding: '20px 8px 8px 25px',\r\n flexGrow: 1,\r\n },\r\n buttonsGrid: {\r\n marginTop: '25px',\r\n [theme.breakpoints.down('md')]: {\r\n marginTop: '8px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n },\r\n});\r\n\r\nconst Filter = (props) => {\r\n const {\r\n classes,\r\n handleStartDateChange,\r\n startDate,\r\n startDateHelperText,\r\n handleEndDateChange,\r\n endDate,\r\n localisation,\r\n endDateHelperText,\r\n handleFilterClick,\r\n handleClearClick,\r\n } = props;\r\n\r\n const { dateFormat } = localisation.locales;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Clear\r\n \r\n \r\n <>\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(Filter);\r\n","const tableMetadata = [\r\n {\r\n id: 'transDate',\r\n renderingField: 'transDateStr',\r\n width: '10%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Date',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'paymentType',\r\n renderingField: 'paymentTypeStr',\r\n width: '20%',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Payment method',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'transcode',\r\n renderingField: 'transcodeStr',\r\n width: '20%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Description',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'amount',\r\n renderingField: 'amountFld',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: false,\r\n disablePadding: false,\r\n label: 'Amount',\r\n alignment: 'left',\r\n },\r\n {\r\n id: 'errorCode',\r\n renderingField: 'errorCodeStr',\r\n width: '10%',\r\n numeric: false,\r\n hideInMobile: true,\r\n disablePadding: false,\r\n label: 'Details',\r\n alignment: 'left',\r\n },\r\n];\r\n\r\nexport default tableMetadata;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { useRouteMatch, useParams } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider, Grid, Typography, withStyles } from '@material-ui/core';\r\nimport { OutlinedButton, Tag, BackgroundPaper } from '@ds/react-components';\r\nimport Table from 'components/ui/Table';\r\nimport { numberToCurrency } from 'utils/misc';\r\nimport { groupTransactionsByPaymentId } from 'utils/transactions';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport Filter from './Filter';\r\nimport tableMetadata from './tableMetaData';\r\n\r\nconst styles = (theme) => ({\r\n divider: {\r\n height: 1,\r\n color: theme.palette.common.black,\r\n },\r\n data: {\r\n height: 40,\r\n },\r\n dataLeft: {\r\n '& p': {\r\n color: theme.palette.common.black,\r\n fontSize: '20px',\r\n },\r\n },\r\n dataRight: {\r\n '& p': {\r\n textAlign: 'right',\r\n fontSize: '16px',\r\n color: theme.palette.common.black,\r\n paddingRight: '20px',\r\n },\r\n },\r\n head: {\r\n backgroundColor: theme.palette.common.white,\r\n padding: '20px 8px 8px 25px',\r\n borderRadius: theme.shape.borderRadius,\r\n },\r\n\r\n nameHead: {\r\n padding: '20px 0px 30px 0px',\r\n },\r\n amountPos: {\r\n color: theme.palette.common.success,\r\n },\r\n amountNeg: {\r\n color: theme.palette.common.error,\r\n },\r\n paymentType: {\r\n color: theme.palette.common.primary,\r\n },\r\n totalPaid: {\r\n fontWeight: theme.palette.common.boldFont,\r\n },\r\n});\r\n\r\nconst Transactions = (props) => {\r\n const {\r\n getAllTransactions,\r\n getAccountInfo,\r\n transactions,\r\n downloadTransactions,\r\n localisation,\r\n classes,\r\n resetTransPage,\r\n } = props;\r\n\r\n const [transactionsState, setTransactionState] = useState({\r\n currentPage: 0,\r\n startDate: null,\r\n endDate: null,\r\n transactions: {},\r\n adfitNo: '',\r\n getTrans: false,\r\n startDateHelperText: '',\r\n endDateHelperText: '',\r\n });\r\n\r\n const match = useRouteMatch();\r\n const params = useParams();\r\n\r\n useEffect(() => {\r\n let matchSplit = match.url.split('/');\r\n let tab = matchSplit.length === 4 ? matchSplit[3] : '';\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n tab: tab,\r\n adfitNo: params.adfitNo,\r\n }));\r\n getAccountInfo(params.adfitNo);\r\n getAllTransactions(params.adfitNo);\r\n }, [params.adfitNo, match.url, getAccountInfo, getAllTransactions]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n resetTransPage();\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const handlePageClick = (data) => {\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n currentPage: data.selected,\r\n }));\r\n };\r\n\r\n const checkValidTranDate = (\r\n momentFromDate,\r\n momentToDate,\r\n transactionDate\r\n ) => {\r\n const momentTransactionDate = moment(transactionDate);\r\n\r\n const isFromValid =\r\n momentFromDate && momentFromDate.isValid()\r\n ? momentTransactionDate.isSameOrAfter(momentFromDate, 'days')\r\n : true;\r\n\r\n const isToValid =\r\n momentToDate && momentToDate.isValid()\r\n ? momentTransactionDate.isSameOrBefore(momentToDate, 'days')\r\n : true;\r\n\r\n return isFromValid && isToValid;\r\n };\r\n\r\n const handleFilterClick = () => {\r\n let transData = transactions.transactions;\r\n let { accountInfor } = transactions;\r\n let filteredTrans = [];\r\n const { startDate, endDate } = transactionsState;\r\n\r\n if (!startDate && !endDate) {\r\n filteredTrans = transData;\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n transactions: {\r\n transactions: filteredTrans,\r\n accountInfor: accountInfor,\r\n },\r\n }));\r\n return;\r\n }\r\n\r\n transData.forEach((tran) => {\r\n let validTranDate = checkValidTranDate(\r\n startDate,\r\n endDate,\r\n tran.transDate\r\n );\r\n\r\n if (validTranDate) {\r\n filteredTrans.push(tran);\r\n\r\n return;\r\n }\r\n });\r\n\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n transactions: { transactions: filteredTrans, accountInfor: accountInfor },\r\n }));\r\n };\r\n\r\n const validateDate = (momentDate, dateFormat) => {\r\n if (!momentDate) return '';\r\n const formatText = (dateFormat || 'DD/MM/YYYY').toUpperCase();\r\n return !momentDate.isValid()\r\n ? `Please enter a valid date ('${formatText}')`\r\n : '';\r\n };\r\n\r\n const handleStartDateChange = (date) => {\r\n let helperText = validateDate(date, localisation.locales.datePickerFormat);\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n startDateHelperText: helperText,\r\n startDate: date,\r\n }));\r\n };\r\n\r\n const handleEndDateChange = (date) => {\r\n let helperText = validateDate(date, localisation.locales.datePickerFormat);\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n endDateHelperText: helperText,\r\n endDate: date,\r\n }));\r\n };\r\n\r\n const handleClearClick = () => {\r\n let transData = transactions.transactions;\r\n let { accountInfor } = transactions;\r\n setTransactionState((prevState) => ({\r\n ...prevState,\r\n startDate: null,\r\n endDate: null,\r\n transactions: { transactions: transData, accountInfor: accountInfor },\r\n }));\r\n };\r\n\r\n const handleOnClick = () => {\r\n downloadTransactions(transactionsState.adfitNo);\r\n };\r\n\r\n const amountFld = (amount, classes, localisation) => (\r\n \r\n {amount < 0 ? '-' : '+'}\r\n {numberToCurrency(Math.abs(amount), localisation)}\r\n \r\n );\r\n\r\n // eslint-disable-next-line no-prototype-builtins\r\n const transData = transactionsState.transactions.hasOwnProperty(\r\n 'transactions'\r\n )\r\n ? transactionsState.transactions\r\n : transactions;\r\n\r\n const { name } = Array.isArray(transData.accountInfor)\r\n ? transData.accountInfor[0]\r\n : {};\r\n const { adfitNo } = Array.isArray(transData.accountInfor)\r\n ? transData.accountInfor[0]\r\n : {};\r\n const { total } = Array.isArray(transData.accountInfor)\r\n ? transData.accountInfor[0]\r\n : {};\r\n\r\n const trans = Array.isArray(transData.transactions)\r\n ? transData.transactions\r\n : [];\r\n const groupedTransactions = groupTransactionsByPaymentId(trans);\r\n const createRowItems = (transactions, classes, localisation) => {\r\n const { dateFormat } = localisation.locales;\r\n let result = transactions.map((item, index) => {\r\n // Date\r\n item.transDateStr = (\r\n \r\n {moment(item.transDate).format(dateFormat)}\r\n \r\n );\r\n\r\n // Payment method\r\n item.paymentTypeStr = (\r\n \r\n {localisation.prompts.paymentType[item.paymentType] || 'Other'}\r\n \r\n );\r\n\r\n // Description\r\n if (item.isCombinedPayment) {\r\n item.transcodeStr = 'Combined payment';\r\n item.__childrens.forEach((childItem) => {\r\n childItem.transcodeStr =\r\n localisation.prompts.transactionCode[childItem.transcode];\r\n childItem.amountFld = amountFld(\r\n childItem.amount,\r\n classes,\r\n localisation\r\n );\r\n });\r\n } else {\r\n item.transcodeStr =\r\n localisation.prompts.transactionCode[item.transcode];\r\n }\r\n\r\n // Amount\r\n item.amountFld = amountFld(item.amount, classes, localisation);\r\n\r\n // Details\r\n item.errorCodeStr = localisation.prompts.transErrorCode[item.errorCode];\r\n if (item.retryCount > 0) {\r\n item.errorCodeStr = 'Payment Retry';\r\n }\r\n\r\n return item;\r\n });\r\n return result;\r\n };\r\n\r\n const data = useMemo(\r\n () => createRowItems(groupedTransactions, classes, localisation),\r\n [classes, createRowItems, groupedTransactions, localisation, trans]\r\n );\r\n\r\n const totalAmount =\r\n total == null ? parseFloat(0).toFixed(2) : parseFloat(total).toFixed(2);\r\n const displayName = adfitNo ? name + ', ' + adfitNo : '';\r\n return (\r\n \r\n \r\n \r\n {displayName} \r\n \r\n \r\n \r\n {'Download All'}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Transactions \r\n \r\n\r\n \r\n \r\n Total paid ${totalAmount} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {trans.length} Results Found\r\n \r\n }\r\n />\r\n \r\n );\r\n};\r\n\r\nTransactions.propTypes = {\r\n getAllTransactions: PropTypes.func.isRequired,\r\n getAccountInfo: PropTypes.func.isRequired,\r\n transactions: PropTypes.object,\r\n downloadTransactions: PropTypes.func.isRequired,\r\n localisation: PropTypes.object.isRequired,\r\n classes: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(Transactions);\r\n","import { connect } from 'react-redux';\r\nimport { compose } from 'redux';\r\nimport {\r\n getAccountInfo,\r\n getAllTransactions,\r\n downloadTransactions,\r\n resetTransPage,\r\n} from 'ducks/transactions';\r\nimport withScrollableTopTabs from 'hoc/withScrollableTopTabs';\r\nimport customerPageTopTabs from 'constants/customerPageTopTabs';\r\nimport Transactions from './Transactions';\r\n\r\nconst mapStateToProps = (state) => ({\r\n localisation: state.localisation,\r\n permissions: state.auth.permissions,\r\n transactions: state.transactions,\r\n token: state.auth.accessToken,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n getAccountInfo,\r\n getAllTransactions,\r\n downloadTransactions,\r\n resetTransPage,\r\n};\r\n\r\nexport default compose(\r\n withScrollableTopTabs(customerPageTopTabs, 2, ['adfitNo']),\r\n connect(mapStateToProps, mapDispatchToProps)\r\n)(Transactions);\r\n","import moment from 'moment';\r\n\r\nexport const suspensionDateStatus = {\r\n Future: 'Future',\r\n Ongoing: 'Ongoing',\r\n Expired: 'Expired',\r\n};\r\n\r\nexport const defaultStartDate = moment().add(1, 'days');\r\n\r\nexport const parameterDateFormat = 'YYYY-MM-DD';\r\n","import { getKyClient } from './client';\r\n\r\nexport const fetchSuspensionInfo = async (adfitNo, suspensionStartDate) => {\r\n const url = `v1.0/accounts/${adfitNo}/suspensions/Information?suspensionStartDate=${suspensionStartDate}`;\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\n\r\nexport const postSuspension = async (adfitNo, data) => {\r\n const url = `v1.0/accounts/${adfitNo}/suspensions`;\r\n const kyClient = await getKyClient();\r\n return kyClient\r\n .post(url, {\r\n json: data,\r\n })\r\n .json();\r\n};\r\n\r\nexport const fetchSuspension = async (adfitNo, scheduleSuspenseId) => {\r\n const url = `v1.0/accounts/${adfitNo}/suspensions/${scheduleSuspenseId}`;\r\n const kyClient = await getKyClient();\r\n return kyClient.get(url).json();\r\n};\r\n\r\nexport const putSuspension = async (adfitNo, scheduleSuspenseId, data) => {\r\n const url = `v1.0/accounts/${adfitNo}/suspensions/${scheduleSuspenseId}`;\r\n const kyClient = await getKyClient();\r\n return kyClient\r\n .put(url, {\r\n json: data,\r\n })\r\n .json();\r\n};\r\n","import { suspensionDateStatus } from 'constants/suspensionConstants';\r\nimport { createReducer, makeActionCreator } from 'utils/reduxCreators';\r\nimport { fetchSuspensionInfo, fetchSuspension } from 'services/suspensions';\r\nimport { updateAppLoading } from './meta';\r\n\r\nexport const RECEIVED_SUSPENSION_INFO = 'suspensions/RECEIVED_SUSPENSION_INFO';\r\nexport const RECEIVED_SUSPENSION = 'suspensions/RECEIVED_SUSPENSION';\r\nexport const UPDATE_SUSPENSION_RULE_LOADER =\r\n 'suspensions/UPDATE_SUSPENSION_RULE_LOADER';\r\n\r\nconst initialState = {\r\n suspensionInfo: {},\r\n currentSuspension: {},\r\n hasSuspensionRuleForAccount: false,\r\n canChargeForSuspension: false,\r\n suspensionRuleLoading: false,\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [RECEIVED_SUSPENSION_INFO]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n ...payload,\r\n };\r\n },\r\n [RECEIVED_SUSPENSION]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n currentSuspension: payload,\r\n };\r\n },\r\n [UPDATE_SUSPENSION_RULE_LOADER]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n suspensionRuleLoading: payload,\r\n };\r\n },\r\n});\r\n\r\nexport const getSuspensionInfo = (\r\n adfitNo,\r\n canSuspendIgnoreSuspensionRules,\r\n suspensionStartDate,\r\n isMandatedSuspension\r\n) => async (dispatch) => {\r\n dispatch(updateSuspensionRuleLoading(true));\r\n try {\r\n const suspensionInfo = await fetchSuspensionInfo(\r\n adfitNo,\r\n suspensionStartDate\r\n );\r\n dispatch(updateSuspensionRuleLoading(false));\r\n const {\r\n allowedSuspensionPeriod,\r\n remainingSuspensionPeriod,\r\n suspensionFee,\r\n } = suspensionInfo;\r\n\r\n const hasSuspensionRuleForAccount = !(\r\n allowedSuspensionPeriod === null &&\r\n remainingSuspensionPeriod === null &&\r\n suspensionFee === null\r\n );\r\n\r\n dispatch({\r\n type: RECEIVED_SUSPENSION_INFO,\r\n payload: {\r\n suspensionInfo,\r\n hasSuspensionRuleForAccount,\r\n //In the following three situations, users can disregard the suspension rule and charge for suspension.\r\n //1. The user has the \"CanSuspendIgnoreSuspensionRules\" permission.\r\n //2. The facility account of the suspended user does not have a suspension rule set.\r\n //3. The modified suspension is mandated.This situation only occurs on the editing page; suspensions added through SS NEW are always non-mandated.\r\n canChargeForSuspension:\r\n canSuspendIgnoreSuspensionRules ||\r\n !hasSuspensionRuleForAccount ||\r\n isMandatedSuspension,\r\n },\r\n });\r\n } catch (e) {\r\n dispatch(updateSuspensionRuleLoading(false));\r\n // Important to throw it back as it gets caught by the middleware.\r\n throw e;\r\n }\r\n};\r\n\r\nexport const getSuspension = (adfitNo, scheduleSuspenseId) => async (\r\n dispatch\r\n) => {\r\n dispatch(updateAppLoading(true));\r\n try {\r\n const suspension = await fetchSuspension(adfitNo, scheduleSuspenseId);\r\n dispatch(updateAppLoading(false));\r\n dispatch({\r\n type: RECEIVED_SUSPENSION,\r\n payload: {\r\n ...suspension,\r\n isFuture:\r\n suspension.suspensionDateStatus === suspensionDateStatus.Future,\r\n isOngoing:\r\n suspension.suspensionDateStatus === suspensionDateStatus.Ongoing,\r\n isExpired:\r\n suspension.suspensionDateStatus === suspensionDateStatus.Expired,\r\n },\r\n });\r\n return Promise.resolve(suspension);\r\n } catch (e) {\r\n dispatch(updateAppLoading(false));\r\n // Important to throw it back as it gets caught by the middleware.\r\n throw e;\r\n }\r\n};\r\n\r\nexport const updateSuspensionRuleLoading = makeActionCreator(\r\n UPDATE_SUSPENSION_RULE_LOADER\r\n);\r\n","import { parameterDateFormat } from 'constants/suspensionConstants';\r\n\r\nexport const SuspensionAlertMessageSessionStorageKey = 'SuspensionAlertMessage';\r\n\r\nexport const setSuspensionAlertMessage = (obj) => {\r\n sessionStorage.setItem(\r\n SuspensionAlertMessageSessionStorageKey,\r\n JSON.stringify(obj)\r\n );\r\n};\r\n\r\nexport const getSuspensionAlertMessage = () => {\r\n return JSON.parse(\r\n sessionStorage.getItem(SuspensionAlertMessageSessionStorageKey)\r\n );\r\n};\r\n\r\nexport const removeSuspensionAlertMessage = () => {\r\n sessionStorage.removeItem(SuspensionAlertMessageSessionStorageKey);\r\n};\r\n\r\nexport const setSuspensionWarningMessage = (title) => {\r\n setSuspensionAlertMessage({\r\n variant: 'warning',\r\n title:\r\n title ||\r\n 'The suspension does not exist or you do not have permission to access it.',\r\n });\r\n};\r\n\r\nexport const getSuspensionFormData = (formValues, defaultValues) => {\r\n const {\r\n suspensionFee,\r\n chargeForSuspension,\r\n suspensionPaymentFrequency,\r\n } = defaultValues;\r\n const formData = {\r\n suspensionStartDate:\r\n formValues.suspensionStartDate &&\r\n formValues.suspensionStartDate.format(parameterDateFormat),\r\n suspensionEndDate:\r\n formValues.suspensionEndDate &&\r\n formValues.suspensionEndDate.format(parameterDateFormat),\r\n chargeForSuspension:\r\n formValues.chargeForSuspension === undefined\r\n ? chargeForSuspension\r\n : formValues.chargeForSuspension,\r\n suspensionFee:\r\n formValues.suspensionFee === undefined\r\n ? suspensionFee\r\n : formValues.suspensionFee,\r\n suspensionPaymentFrequency:\r\n formValues.suspensionPaymentFrequency === undefined\r\n ? suspensionPaymentFrequency\r\n : formValues.suspensionPaymentFrequency,\r\n suspensionReason: formValues.suspensionReason,\r\n };\r\n return formData;\r\n};\r\n","import React from 'react';\r\nimport { withStyles } from '@material-ui/core';\r\n\r\nconst styles = (theme) => ({\r\n RowLeftText: {\r\n color: theme.palette.xpl.text.secondary,\r\n textAlign: 'left',\r\n display: 'inline-block',\r\n width: '200px',\r\n },\r\n RowRightText: {\r\n color: theme.palette.xpl.text.primary,\r\n textAlign: 'left',\r\n },\r\n TextRow: {\r\n padding: '4px 0',\r\n },\r\n});\r\nconst InfoWidgetTextRow = (props) => {\r\n const { classes, title, value } = props;\r\n return (\r\n \r\n {title} \r\n {value} \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(InfoWidgetTextRow);\r\n","import moment from 'moment';\r\nimport React from 'react';\r\nimport { numberToCurrency } from 'utils/misc';\r\nimport { roundToTwoDecimals } from 'utils/numbers';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport { InfoWidget } from '@ds/react-components';\r\nimport InfoWidgetTextRow from '../common/InfoWidgetTextRow';\r\n\r\nconst AccountDetails = (props) => {\r\n const { accountDetails, localisation } = props;\r\n const { dateFormat } = localisation.locales;\r\n const {\r\n balanceToSettle,\r\n startDate,\r\n finishDate,\r\n numOfTerm,\r\n termType,\r\n billNext,\r\n } = accountDetails;\r\n\r\n const loaderStyle = {\r\n height: '150',\r\n width: '100%',\r\n };\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionRulesNote);\r\n","import React from 'react';\r\nimport { numberToCurrency } from 'utils/misc';\r\nimport { roundToTwoDecimals } from 'utils/numbers';\r\nimport { InfoWidget } from '@ds/react-components';\r\nimport { List as ListLoader } from 'react-content-loader';\r\nimport InfoWidgetTextRow from '../common/InfoWidgetTextRow';\r\nimport SuspensionRulesNote from './SuspensionRulesNote';\r\n\r\nconst SuspensionRules = (props) => {\r\n const { suspensionInfo, localisation, suspensionRuleLoading } = props;\r\n\r\n const {\r\n allowedSuspensionPeriod,\r\n suspensionFee,\r\n nextAnniversaryStartDate,\r\n currentAnniversaryRemainingSuspension,\r\n } = suspensionInfo;\r\n\r\n const loaderStyle = {\r\n height: '130',\r\n width: '100%',\r\n };\r\n\r\n return (\r\n {\r\n setShowPleaseNote(false);\r\n }}\r\n role=\"banner\"\r\n variant=\"success\">\r\n Please Note \r\n \r\n
Suspension finish dates are inclusive.
\r\n
\r\n
This means:
\r\n
\r\n \r\n To suspend a client for one week from tomorrow, enter a start\r\n date of {moment().add(1, 'days').format(dateFormat)} and an end\r\n date of {moment().add(1, 'weeks').format(dateFormat)}.\r\n \r\n \r\n To suspend a client for one month from tomorrow, enter a start\r\n date of {moment().add(1, 'days').format(dateFormat)} and an end\r\n date of {moment().add(1, 'months').format(dateFormat)}.\r\n \r\n \r\n Suspensions not in line with payment schedule will result in\r\n pro-rata payments.\r\n \r\n \r\n
{\r\n setErrorMsg('');\r\n }}\r\n role=\"banner\"\r\n variant=\"error\">\r\n {typeof errorMsg === 'string' && errorMsg}\r\n {typeof errorMsg === 'object' ? (\r\n <>\r\n {' '}\r\n {message}
\r\n \r\n {errors &&\r\n errors.map((error, index) => (\r\n {`${error.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\nexport default withStyles(styles)(FormErrorAlert);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Typography, Grid, withStyles } from '@material-ui/core';\r\nimport { useParams, useHistory } from 'react-router-dom';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport { setSuspensionWarningMessage } from 'utils/suspensions';\r\nimport AccountDetails from './AccountDetailsPreview';\r\nimport SuspensionRules from './SuspensionRulesPreview';\r\nimport PleaseNote from './PleaseNotePreview';\r\nimport FormErrorAlert from './common/FormErrorAlert';\r\n\r\nconst styles = (theme) => ({\r\n item1: {\r\n [theme.breakpoints.up('lg')]: {\r\n order: 1,\r\n },\r\n order: 2,\r\n },\r\n item2: {\r\n [theme.breakpoints.up('lg')]: {\r\n order: 2,\r\n },\r\n order: 1,\r\n },\r\n nameHead: {\r\n padding: '15px 0px 33px 0px',\r\n fontSize: '32px',\r\n },\r\n});\r\n\r\nconst SuspensionLayout = (props) => {\r\n const [errorMsg, setErrorMsg] = useState('');\r\n const {\r\n title,\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n customerDetails,\r\n suspensionInfo,\r\n localisation,\r\n updateAppLoading,\r\n canChargeForSuspension,\r\n hasSuspensionRuleForAccount,\r\n suspensionRuleLoading,\r\n canSuspendIgnoreSuspensionRules,\r\n canManageSuspensions,\r\n classes,\r\n } = props;\r\n\r\n const { adfitNo } = useParams();\r\n const history = useHistory();\r\n\r\n useEffect(() => {\r\n (async () => {\r\n await Promise.all([\r\n getPersonalInfo(adfitNo),\r\n getBalanceToSettle(adfitNo),\r\n ]);\r\n })();\r\n }, [\r\n adfitNo,\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n canSuspendIgnoreSuspensionRules,\r\n ]);\r\n //if no permission, redirect user to payments page\r\n useEffect(() => {\r\n if (!canManageSuspensions && !canSuspendIgnoreSuspensionRules) {\r\n setSuspensionWarningMessage();\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n }\r\n }, [canManageSuspensions, canSuspendIgnoreSuspensionRules, adfitNo, history]);\r\n\r\n const accountDetails = {\r\n billNext: customerDetails.billNext,\r\n finishDate: customerDetails.finishDate,\r\n startDate: customerDetails.startDate,\r\n numOfTerm: customerDetails.numOfTerm,\r\n termType: customerDetails.termType,\r\n balanceToSettle: customerDetails.balanceToSettle,\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {React.cloneElement(props.children, {\r\n canSuspendIgnoreSuspensionRules,\r\n setErrorMsg,\r\n suspensionInfo,\r\n localisation,\r\n hasSuspensionRuleForAccount,\r\n updateAppLoading,\r\n canChargeForSuspension,\r\n accountDetails,\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {hasSuspensionRuleForAccount ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionLayout);\r\n","export default {\r\n Weekly: { label: 'Weekly', value: 'WK' },\r\n Fortnightly: { label: 'Fortnightly', value: 'FN' },\r\n FourWeekly: { label: 'Four-Weekly', value: 'FW' },\r\n Monthly: { label: 'Monthly', value: 'MN' },\r\n BiMonthly: { label: 'Bi-Monthly', value: 'BM' },\r\n Quarterly: { label: 'Quarterly', value: 'QT' },\r\n OneOff: { label: 'One-Off', value: 'OF' },\r\n};\r\n","import React from 'react';\r\n\r\nconst ChargeForSuspensionChx = (props) => {\r\n const { classes, register, disabled = false } = props;\r\n\r\n return (\r\n \r\n \r\n Charge for Suspension\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ChargeForSuspensionChx;\r\n","import React from 'react';\r\nimport { Dropdown } from '@ds/react-components';\r\nimport { Controller } from 'react-hook-form';\r\nimport frequencyTypes from 'constants/frequencyTypes';\r\n\r\nconst SuspensionPaymentFrequencyDdl = (props) => {\r\n const { classes, control, disabled = false } = props;\r\n const options = Object.values(frequencyTypes);\r\n\r\n return (\r\n \r\n {\r\n return (\r\n {\r\n onChange(e.value);\r\n }}\r\n value={options.filter((option) => option.value === value)}\r\n isSearchable={false}\r\n isDisabled={disabled}\r\n />\r\n );\r\n }}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default SuspensionPaymentFrequencyDdl;\r\n","import React from 'react';\r\nimport { Input as FormInput } from '@ds/react-components';\r\nimport classNames from 'classnames';\r\n\r\nconst SuspensionFeeTxt = (props) => {\r\n const { classes, register, errors, disabled = false } = props;\r\n const maxSuspensionFee = 999999.99;\r\n\r\n return (\r\n \r\n \r\n \r\n parseFloat(value) <= maxSuspensionFee ||\r\n `Suspension fee cannot exceed ${maxSuspensionFee}`,\r\n },\r\n })}\r\n type=\"number\"\r\n error={errors.suspensionFee && errors.suspensionFee.message}\r\n step=\".01\">\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SuspensionFeeTxt;\r\n","const styles = (theme) => ({\r\n Container: {\r\n padding: '0 0 8px 0',\r\n },\r\n FormItem: {\r\n width: '48%',\r\n padding: '0 0 16px 0',\r\n '& fieldset': {\r\n padding: '0px',\r\n margin: '0px',\r\n border: '0px',\r\n },\r\n },\r\n FormItemDisableBorder: {\r\n '& :hover': {\r\n borderColor: theme.palette.xpl.stoke,\r\n },\r\n },\r\n Checkbox: {\r\n accentColor: theme.palette.xpl.secondary.default,\r\n width: '16px',\r\n height: '16px',\r\n verticalAlign: 'middle',\r\n borderRadius: '4px',\r\n },\r\n Label: {\r\n fontWeight: '400',\r\n fontSize: '12px',\r\n padding: '0 0 0 9px',\r\n verticalAlign: 'middle',\r\n color: theme.palette.common.darkerText,\r\n },\r\n Select: {\r\n '& div[class$=\"control\"]': {\r\n height: '40px',\r\n },\r\n },\r\n});\r\n\r\nexport default styles;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { useWatch } from 'react-hook-form';\r\nimport frequencyTypes from 'constants/frequencyTypes';\r\nimport ChargeForSuspensionChx from './components/ChargeForSuspensionChx';\r\nimport SuspensionPaymentFrequencyDdl from './components/SuspensionPaymentFrequencyDdl';\r\nimport SuspensionFeeTxt from './components/SuspensionFeeTxt';\r\nimport styles from './components/styles';\r\n\r\nconst SuspensionChargeOption = (props) => {\r\n const {\r\n classes,\r\n register,\r\n control,\r\n setValue,\r\n canChargeForSuspension,\r\n currentSuspension,\r\n suspensionInfo,\r\n errors,\r\n } = props;\r\n const [\r\n disableSuspensionFeeAndFrequency,\r\n setDisableSuspensionFeeAndFrequency,\r\n ] = useState(true);\r\n const { isFuture } = currentSuspension;\r\n const enableCharegeForSuspension =\r\n (canChargeForSuspension || suspensionInfo.suspensionFee === null) &&\r\n isFuture;\r\n\r\n const watchChargeForSuspension = useWatch({\r\n control,\r\n name: 'chargeForSuspension',\r\n });\r\n\r\n useEffect(() => {\r\n //when change for suspension checkbox is disabled, the suspension fee and frequency are disabled as well.\r\n if (enableCharegeForSuspension) {\r\n if (!watchChargeForSuspension) {\r\n setValue('suspensionFee', 0);\r\n setValue('suspensionPaymentFrequency', frequencyTypes.OneOff.value);\r\n } else {\r\n const { suspensionFee, suspensionPaymentFrequency } = currentSuspension;\r\n setValue('suspensionFee', suspensionFee);\r\n setValue('suspensionPaymentFrequency', suspensionPaymentFrequency);\r\n }\r\n setDisableSuspensionFeeAndFrequency(!watchChargeForSuspension);\r\n }\r\n }, [\r\n watchChargeForSuspension,\r\n enableCharegeForSuspension,\r\n setValue,\r\n currentSuspension,\r\n ]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionChargeOption);\r\n","import React from 'react';\r\nimport { withStyles } from '@material-ui/core';\r\n\r\nconst styles = (theme) => ({\r\n Container: {\r\n paddingBottom: '30px',\r\n },\r\n Label: {\r\n color: theme.palette.common.darkerText,\r\n display: 'block',\r\n padding: '0px',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n marginBottom: '4px',\r\n },\r\n Textarea: {\r\n resize: 'none',\r\n width: '100%',\r\n height: '160px',\r\n borderRadius: '6px',\r\n padding: '12px',\r\n fontSize: '15px',\r\n borderColor: theme.palette.xpl.stoke,\r\n '&:focus': {\r\n outline: 'none',\r\n borderColor: theme.palette.xpl.secondary.default,\r\n },\r\n },\r\n});\r\nconst SuspensionReasonTextarea = (props) => {\r\n const { classes, register } = props;\r\n\r\n return (\r\n \r\n
\r\n Reason for Suspension\r\n \r\n
\r\n
\r\n
\r\n {clearDate && value ? (\r\n {\r\n e.stopPropagation();\r\n clearDate && clearDate();\r\n }}>\r\n setOpen(false)}\r\n onClick={(e) => {\r\n setOpen(!open);\r\n }}\r\n TextFieldComponent={TextFieldComponent}\r\n {...props}\r\n />\r\n );\r\n};\r\n\r\nexport default SuspensionDatePicker;\r\n","import React, { useState } from 'react';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { defaultStartDate } from 'constants/suspensionConstants';\r\nimport { Controller } from 'react-hook-form';\r\nimport SuspensionDatePicker from './SuspensionDatePicker';\r\n\r\nconst styles = (theme) => ({\r\n Container: {\r\n display: 'flex',\r\n width: '100%',\r\n justifyContent: 'space-between',\r\n padding: '0 0 24px 0',\r\n '& >div': {\r\n width: '48%',\r\n },\r\n '& input': {\r\n cursor: 'pointer',\r\n },\r\n '& .MuiFormControl-root': {\r\n width: '100%',\r\n },\r\n '& .MuiInputAdornment-root': {\r\n color: theme.palette.xpl.secondary.default,\r\n },\r\n //The size of ripple of clear button\r\n '& .MuiIconButton-root,.MuiTouchRipple-root,.MuiIconButton-root:hover': {\r\n height: '39px',\r\n width: '39px',\r\n },\r\n },\r\n Highlight: {\r\n '& .MuiInputBase-root': {\r\n borderColor: theme.palette.xpl.secondary.default,\r\n },\r\n },\r\n});\r\nconst SuspensionDateRangePicker = (props) => {\r\n const {\r\n classes,\r\n control,\r\n setValue,\r\n localisation,\r\n getValues,\r\n errors,\r\n disableStartDate,\r\n canChargeForSuspension,\r\n minEndDate,\r\n maxEndDate,\r\n handleSelectStartDate,\r\n allowedSuspensionPeriod,\r\n } = props;\r\n\r\n const dateDisplayFormat = localisation.locales.dateFormat;\r\n const [highlightEndDate, setHighlightEndDate] = useState(false);\r\n\r\n // This variable is used to control the end date.\r\n // The end date calendar will be restricted from displaying all dates when the following conditions are simultaneously met:\r\n // 1. User cannot charge against suspension rule.\r\n // 2. allowedSuspensionPeriod of the suspension rule is configured.\r\n const isEndDateCalendarRestricted =\r\n !canChargeForSuspension && allowedSuspensionPeriod !== null;\r\n\r\n return (\r\n \r\n
\r\n (\r\n {\r\n onChange(e);\r\n if (getValues('suspensionEndDate') !== null) {\r\n setValue('suspensionEndDate', null);\r\n setHighlightEndDate(true);\r\n }\r\n }}\r\n onAccept={handleSelectStartDate}\r\n format={dateDisplayFormat}\r\n label=\"Start Date\"\r\n minDate={defaultStartDate}\r\n /*Only in Edit page, the start date can be disabled when the existing start date is less than today*/\r\n disabled={disableStartDate}\r\n />\r\n )}\r\n />\r\n
\r\n
\r\n (\r\n {\r\n onChange(e);\r\n setHighlightEndDate(false);\r\n }}\r\n format={dateDisplayFormat}\r\n error={\r\n errors.suspensionEndDate && errors.suspensionEndDate.message\r\n }\r\n label=\"End Date\"\r\n clearDate={(e) => {\r\n setValue('suspensionEndDate', null);\r\n }}\r\n minDate={minEndDate}\r\n /*When maxDate is undefined, the datepicker will ignore this prop*/\r\n maxDate={isEndDateCalendarRestricted ? maxEndDate : undefined}\r\n />\r\n )}\r\n />\r\n
\r\n
\r\n Cancel\r\n \r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionFormCancelButton);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { FilledButton } from '@ds/react-components';\r\nimport { useParams, useHistory } from 'react-router-dom';\r\nimport { useForm, useWatch } from 'react-hook-form';\r\nimport { putSuspension as updateSuspension } from 'services/suspensions';\r\nimport {\r\n setSuspensionAlertMessage,\r\n getSuspensionFormData,\r\n} from 'utils/suspensions';\r\nimport * as moment from 'moment';\r\nimport SuspensionChargeOptionForEdit from '../common/SuspensionChargeOption/SuspensionChargeOptionForEdit';\r\nimport SuspensionReasonTextarea from '../common/SuspensionReasonTextarea';\r\nimport SuspensionDateRangePicker from '../common/SuspensionDateRangePicker';\r\nimport SuspensionFormCancelButton from '../common/SuspensionFormCancelButton';\r\n\r\nconst EditSuspensionForm = (props) => {\r\n const {\r\n setErrorMsg,\r\n updateAppLoading,\r\n suspensionInfo,\r\n localisation,\r\n currentSuspension,\r\n canChargeForSuspension,\r\n handleSelectStartDate,\r\n } = props;\r\n const [isSubmittingForm, setIsSubmittingForm] = useState(false);\r\n const { adfitNo, scheduleSuspenseId } = useParams();\r\n const history = useHistory();\r\n const { remainingSuspensionPeriod, allowedSuspensionPeriod } = suspensionInfo;\r\n const {\r\n handleSubmit,\r\n register,\r\n control,\r\n setValue,\r\n errors,\r\n getValues,\r\n reset,\r\n } = useForm();\r\n\r\n //set up form default values\r\n useEffect(() => {\r\n reset({\r\n ...currentSuspension,\r\n suspensionStartDate:\r\n currentSuspension.suspensionStartDate &&\r\n moment(currentSuspension.suspensionStartDate),\r\n suspensionEndDate:\r\n currentSuspension.suspensionEndDate &&\r\n moment(currentSuspension.suspensionEndDate),\r\n });\r\n }, [currentSuspension, reset]);\r\n\r\n const watchSuspensionStartDate = useWatch({\r\n control,\r\n name: 'suspensionStartDate',\r\n });\r\n\r\n //Submit the form\r\n const onSubmitHandler = (data) => {\r\n const formData = getSuspensionFormData(data, currentSuspension);\r\n setIsSubmittingForm(true);\r\n updateAppLoading(true);\r\n updateSuspension(adfitNo, scheduleSuspenseId, formData)\r\n .then((res) => {\r\n updateAppLoading(false);\r\n const suspensionAlertMessage = {\r\n variant: 'success',\r\n title: 'Suspension updated successfully.',\r\n response: res,\r\n };\r\n setSuspensionAlertMessage(suspensionAlertMessage);\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n })\r\n .catch((err) => {\r\n setIsSubmittingForm(false);\r\n updateAppLoading(false);\r\n const result = err.response.json();\r\n result\r\n .then((error) => {\r\n setErrorMsg(error);\r\n })\r\n .catch((error) => {\r\n setErrorMsg(error);\r\n });\r\n });\r\n };\r\n\r\n const editableSuspensionPeriod =\r\n (moment(currentSuspension.suspensionEndDate).diff(\r\n moment(currentSuspension.suspensionStartDate),\r\n 'days'\r\n ) || 0) + (remainingSuspensionPeriod > 0 ? remainingSuspensionPeriod : 0);\r\n const canSuspendDays =\r\n editableSuspensionPeriod > allowedSuspensionPeriod * 7\r\n ? allowedSuspensionPeriod * 7\r\n : editableSuspensionPeriod;\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default EditSuspensionForm;\r\n","import React from 'react';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { useWatch } from 'react-hook-form';\r\nimport ChargeForSuspensionChx from './components/ChargeForSuspensionChx';\r\nimport SuspensionPaymentFrequencyDdl from './components/SuspensionPaymentFrequencyDdl';\r\nimport SuspensionFeeTxt from './components/SuspensionFeeTxt';\r\nimport styles from './components/styles';\r\n\r\nconst SuspensionChargeOption = (props) => {\r\n const { classes, register, control, errors } = props;\r\n\r\n const watchChargeForSuspension = useWatch({\r\n control,\r\n name: 'chargeForSuspension',\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionChargeOption);\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { FilledButton } from '@ds/react-components';\r\nimport { useParams, useHistory } from 'react-router-dom';\r\nimport { useForm, useWatch } from 'react-hook-form';\r\nimport * as moment from 'moment';\r\nimport { postSuspension } from 'services/suspensions';\r\nimport { defaultStartDate } from 'constants/suspensionConstants';\r\nimport {\r\n setSuspensionAlertMessage,\r\n getSuspensionFormData,\r\n} from 'utils/suspensions';\r\nimport frequencyTypes from 'constants/frequencyTypes';\r\nimport SuspensionChargeOptionForAdd from '../common/SuspensionChargeOption/SuspensionChargeOptionForAdd';\r\nimport SuspensionReasonTextarea from '../common/SuspensionReasonTextarea';\r\nimport SuspensionDateRangePicker from '../common/SuspensionDateRangePicker';\r\nimport SuspensionFormCancelButton from '../common/SuspensionFormCancelButton';\r\n\r\nconst AddSuspensionForm = (props) => {\r\n const {\r\n canSuspendIgnoreSuspensionRules,\r\n suspensionInfo,\r\n localisation,\r\n hasSuspensionRuleForAccount,\r\n updateAppLoading,\r\n setErrorMsg,\r\n canChargeForSuspension,\r\n handleSelectStartDate,\r\n accountDetails,\r\n } = props;\r\n\r\n const [isSubmittingForm, setIsSubmittingForm] = useState(false);\r\n const { adfitNo } = useParams();\r\n const history = useHistory();\r\n const {\r\n remainingSuspensionPeriod,\r\n suspensionFee,\r\n allowedSuspensionPeriod,\r\n } = suspensionInfo;\r\n const {\r\n handleSubmit,\r\n register,\r\n control,\r\n setValue,\r\n errors,\r\n getValues,\r\n reset,\r\n } = useForm();\r\n const { startDate } = accountDetails;\r\n const accountNotStarted = startDate\r\n ? moment().isBefore(moment(startDate))\r\n : false;\r\n //set up form default values\r\n const formDefaultValues = useMemo(() => {\r\n const chargeForSuspensionDefault =\r\n hasSuspensionRuleForAccount && suspensionFee !== null;\r\n return canSuspendIgnoreSuspensionRules\r\n ? {\r\n suspensionStartDate: accountNotStarted\r\n ? moment(startDate)\r\n : defaultStartDate,\r\n suspensionEndDate: null,\r\n suspensionReason: null,\r\n chargeForSuspension: false,\r\n suspensionFee: 0,\r\n suspensionPaymentFrequency: frequencyTypes.OneOff.value,\r\n }\r\n : {\r\n suspensionStartDate: accountNotStarted\r\n ? moment(startDate)\r\n : defaultStartDate,\r\n suspensionEndDate: null,\r\n suspensionReason: null,\r\n chargeForSuspension: chargeForSuspensionDefault,\r\n suspensionFee: chargeForSuspensionDefault ? suspensionFee : 0,\r\n suspensionPaymentFrequency: chargeForSuspensionDefault\r\n ? frequencyTypes.Weekly.value\r\n : frequencyTypes.OneOff.value,\r\n };\r\n }, [\r\n accountNotStarted,\r\n hasSuspensionRuleForAccount,\r\n suspensionFee,\r\n canSuspendIgnoreSuspensionRules,\r\n startDate,\r\n ]);\r\n useEffect(() => {\r\n reset(formDefaultValues);\r\n }, [formDefaultValues, reset]);\r\n\r\n const watchSuspensionStartDate = useWatch({\r\n control,\r\n name: 'suspensionStartDate',\r\n });\r\n\r\n //Submit the form\r\n const onSubmitHandler = (data) => {\r\n const formData = getSuspensionFormData(data, formDefaultValues);\r\n\r\n setIsSubmittingForm(true);\r\n updateAppLoading(true);\r\n postSuspension(adfitNo, formData)\r\n .then((res) => {\r\n updateAppLoading(false);\r\n const suspensionAlertMessage = {\r\n variant: 'success',\r\n title: 'Suspension added successfully.',\r\n response: res,\r\n };\r\n setSuspensionAlertMessage(suspensionAlertMessage);\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n })\r\n .catch((err) => {\r\n setIsSubmittingForm(false);\r\n updateAppLoading(false);\r\n console.error(err);\r\n const result = err.response.json();\r\n result.then((errorObj) => {\r\n setErrorMsg(errorObj);\r\n });\r\n });\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default AddSuspensionForm;\r\n","import React from 'react';\r\nimport { compose } from 'redux';\r\nimport withRouteParams from 'hoc/withRouteParams';\r\nimport { connect } from 'react-redux';\r\nimport { useParams, Redirect } from 'react-router-dom';\r\nimport { getPersonalInfo, getBalanceToSettle } from 'ducks/customerDetails';\r\nimport { updateAppLoading } from 'ducks/meta';\r\nimport { getSuspensionInfo, getSuspension } from 'ducks/suspensions';\r\nimport withScrollableTopTabs from 'hoc/withScrollableTopTabs';\r\nimport customerPageTopTabs from 'constants/customerPageTopTabs';\r\nimport permissionTypes from 'constants/permissionTypes';\r\nimport { AddSuspensionPage, EditSuspensionPage } from './Suspension';\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const canSuspendIgnoreSuspensionRules = state.auth.permissions.includes(\r\n permissionTypes.canSuspendIgnoreSuspensionRules\r\n );\r\n const canManageSuspensions = state.auth.permissions.includes(\r\n permissionTypes.canManageSuspensions\r\n );\r\n return {\r\n customerDetails:\r\n state.customerDetails.adfitNo === ownProps.routeParams.adfitNo\r\n ? state.customerDetails\r\n : {},\r\n suspensionInfo: state.suspensions.suspensionInfo,\r\n hasSuspensionRuleForAccount: state.suspensions.hasSuspensionRuleForAccount,\r\n canChargeForSuspension: state.suspensions.canChargeForSuspension,\r\n suspensionRuleLoading: state.suspensions.suspensionRuleLoading,\r\n currentSuspension: state.suspensions.currentSuspension,\r\n localisation: state.localisation,\r\n canSuspendIgnoreSuspensionRules,\r\n canManageSuspensions,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n getPersonalInfo,\r\n getBalanceToSettle,\r\n getSuspensionInfo,\r\n getSuspension,\r\n updateAppLoading,\r\n};\r\n\r\nexport const AddSuspension = compose(\r\n withScrollableTopTabs(customerPageTopTabs, 1, ['adfitNo']),\r\n withRouteParams,\r\n connect(mapStateToProps, mapDispatchToProps)\r\n)(AddSuspensionPage);\r\n\r\nexport const EditSuspension = compose(\r\n withScrollableTopTabs(customerPageTopTabs, 1, ['adfitNo']),\r\n withRouteParams,\r\n connect(mapStateToProps, mapDispatchToProps)\r\n)(EditSuspensionPage);\r\n\r\nexport const RedirectToSuspensionsPage = () => {\r\n const { adfitNo } = useParams();\r\n return \r\n \r\n );\r\n};\r\n\r\nexport const EditSuspensionPage = (props) => {\r\n const {\r\n getSuspension,\r\n currentSuspension,\r\n getSuspensionInfo,\r\n canSuspendIgnoreSuspensionRules,\r\n hasSuspensionRuleForAccount,\r\n } = props;\r\n const { adfitNo, scheduleSuspenseId } = useParams();\r\n const history = useHistory();\r\n const { mandate } = currentSuspension;\r\n const handleSelectStartDate = useCallback(\r\n (startDate) =>\r\n getSuspensionInfo(\r\n adfitNo,\r\n canSuspendIgnoreSuspensionRules,\r\n startDate.format(parameterDateFormat),\r\n mandate\r\n ),\r\n [adfitNo, canSuspendIgnoreSuspensionRules, getSuspensionInfo, mandate]\r\n );\r\n\r\n useEffect(() => {\r\n getSuspension(adfitNo, scheduleSuspenseId)\r\n .then((res) => {\r\n if (res === '') {\r\n setSuspensionWarningMessage();\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n } else {\r\n //Today is greater than Suspension end date\r\n if (res.suspensionDateStatus === suspensionDateStatus.Expired) {\r\n setSuspensionWarningMessage('This suspension has expired.');\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n } else {\r\n //Load suspension rule\r\n handleSelectStartDate(moment(res.suspensionStartDate));\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.error(error);\r\n setSuspensionWarningMessage();\r\n history.push(`/Customers/${adfitNo}/Payments/Suspensions`);\r\n });\r\n }, [\r\n adfitNo,\r\n scheduleSuspenseId,\r\n getSuspension,\r\n history,\r\n handleSelectStartDate,\r\n mandate,\r\n ]);\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n","import { isNotEmptyArray } from 'utils/misc';\r\nimport { getKyClient } from './client';\r\n\r\nexport const fetchCancellationReasons = async (adfitNo) => {\r\n const url = `v1.0/accounts/${adfitNo}/customcancelreasons`;\r\n const kyClient = await getKyClient();\r\n const result = await kyClient.get(url).json();\r\n return isNotEmptyArray(result)\r\n ? result.map(({ reasonName }) => reasonName)\r\n : result;\r\n};\r\n","import { createReducer } from 'utils/reduxCreators';\r\nimport { fetchCancellationReasons } from 'services/cancellationReasons';\r\nimport { isNotEmptyArray } from 'utils/misc';\r\n\r\nexport const UPDATE_CANCELLATION_REASONS =\r\n 'cancellation/UPDATE_CANCELLATION_REASON';\r\nexport const UPDATE_CURRENT_ADFIT_NO = 'cancellation/UPDATE_CURRENT_USER';\r\n\r\nconst initialState = {\r\n entities: null,\r\n currentAccountAdfitNo: null,\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [UPDATE_CANCELLATION_REASONS]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n entities: payload,\r\n };\r\n },\r\n [UPDATE_CURRENT_ADFIT_NO]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n currentAccountAdfitNo: payload,\r\n };\r\n },\r\n});\r\n\r\nexport const forceGetCancelReasons = (adfitNo) => async (dispatch) => {\r\n const formatCancelReason = (reasons) => {\r\n if (!isNotEmptyArray(reasons)) return reasons;\r\n\r\n return reasons.map((reason) => ({\r\n label: reason,\r\n value: reason,\r\n }));\r\n };\r\n\r\n const result = await fetchCancellationReasons(adfitNo);\r\n\r\n dispatch({\r\n type: UPDATE_CANCELLATION_REASONS,\r\n payload: formatCancelReason(result),\r\n });\r\n dispatch({\r\n type: UPDATE_CURRENT_ADFIT_NO,\r\n payload: adfitNo,\r\n });\r\n};\r\n\r\nexport const checkAndGetCancellationReasons =\r\n (adfitNo) => async (dispatch, getState) => {\r\n const {\r\n cancellationReasons: { currentAccountAdfitNo },\r\n } = getState();\r\n if (currentAccountAdfitNo && currentAccountAdfitNo === adfitNo) {\r\n return;\r\n }\r\n return dispatch(forceGetCancelReasons(adfitNo));\r\n };\r\n","import ky from 'ky';\r\n\r\nexport const wait = (ms = 1000) => {\r\n return new Promise((resolve) => {\r\n setTimeout(resolve, ms);\r\n });\r\n};\r\n\r\n/*\r\n * taskFn: A async function that throws an error when a retry has to be made.\r\n * interval: The max wait time in milliseconds between each retry.\r\n * retries: The max retries that need to be made before failing. Must be greater than zero.\r\n */\r\nexport const poll = async (taskFn, interval = 5000, retries = 1) => {\r\n let retriesRemaining = retries;\r\n do {\r\n try {\r\n return await taskFn();\r\n } catch (err) {\r\n // If an http error like ( 200 or 500) we assume that the server is not available and break out.\r\n if (err instanceof ky.HTTPError) {\r\n throw new Error('Something went wrong');\r\n }\r\n retriesRemaining = retriesRemaining - 1;\r\n await wait(interval);\r\n }\r\n } while (retriesRemaining >= 0);\r\n //If all the retries failed throw an error.\r\n throw new Error('Max retries reached');\r\n};\r\n","//All the stuff related to accounts which specifically doesn't have it's own table in the db ( calculated on the fly) can be put here.\r\nimport { createReducer, makeActionCreator } from 'utils/reduxCreators';\r\nimport {\r\n fetchBalanceToSettle,\r\n fetchEstimatedFinalBillDate,\r\n fetchOutstandingDsFee,\r\n fetchBalanceToSettleWithoutCancelFee,\r\n} from 'services/accountDetails';\r\n\r\n// Outstanding DsFee is different from DsFeeDue. Outstanding considers any future payments in that pay cycle as well.\r\nexport const UPDATE_OUTSTANDING_DS_FEE = 'accountMeta/OUTSTANDING_DS_FEE';\r\nexport const UPDATE_ESTIMATED_FINAL_BILL_DATE =\r\n 'accountMeta/ESTIMATED_FINAL_BILL_DATE';\r\nexport const UPDATE_BALANCE_TO_SETTLE = 'accountMeta/BALANCE_TO_SETTLE';\r\nexport const UPDATE_BALANCE_TO_SETTLE_WITHOUT_CANCEL_FEE =\r\n 'accountMeta/BALANCE_TO_SETTLE_WITHOUT_CANCEL_Fee';\r\n\r\nconst initialState = {\r\n estimatedFinalBillDate: {\r\n entities: null,\r\n currentAccountAdfitNo: '',\r\n },\r\n outstandingDsFee: {\r\n entities: null,\r\n currentAccountAdfitNo: '',\r\n },\r\n balanceToSettle: {\r\n entities: null,\r\n currentAccountAdfitNo: '',\r\n },\r\n balanceToSettleWithoutCancelFee: {\r\n entities: null,\r\n currentAccountAdfitNo: '',\r\n },\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [UPDATE_ESTIMATED_FINAL_BILL_DATE]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n estimatedFinalBillDate: {\r\n entities: payload.finalDate,\r\n currentAccountAdfitNo: payload.adfitNo,\r\n },\r\n };\r\n },\r\n [UPDATE_OUTSTANDING_DS_FEE]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n outstandingDsFee: {\r\n entities: payload.fee,\r\n currentAccountAdfitNo: payload.adfitNo,\r\n },\r\n };\r\n },\r\n [UPDATE_BALANCE_TO_SETTLE]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n balanceToSettle: {\r\n entities: payload.balance,\r\n currentAccountAdfitNo: payload.adfitNo,\r\n },\r\n };\r\n },\r\n [UPDATE_BALANCE_TO_SETTLE_WITHOUT_CANCEL_FEE]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n balanceToSettleWithoutCancelFee: {\r\n entities: payload.balance,\r\n currentAccountAdfitNo: payload.adfitNo,\r\n },\r\n };\r\n },\r\n});\r\n\r\n// Final bill date actions.\r\n\r\nexport const updateFinalBillDate = makeActionCreator(\r\n UPDATE_ESTIMATED_FINAL_BILL_DATE\r\n);\r\n\r\nexport const getEstimatedFinalBillDate = (adfitNo) => async (dispatch) => {\r\n const finalBillDate = await fetchEstimatedFinalBillDate(adfitNo);\r\n dispatch(\r\n updateFinalBillDate({\r\n finalDate: finalBillDate,\r\n adfitNo,\r\n })\r\n );\r\n};\r\n\r\n// Outstanding DsFee Actions\r\n\r\nexport const updateOutstandingDsFee = makeActionCreator(\r\n UPDATE_OUTSTANDING_DS_FEE\r\n);\r\n\r\nexport const getOutstandingDsFee = (adfitNo) => async (dispatch) => {\r\n const { dsFeeDue } = await fetchOutstandingDsFee(adfitNo);\r\n dispatch(\r\n updateOutstandingDsFee({\r\n adfitNo,\r\n fee: dsFeeDue,\r\n })\r\n );\r\n};\r\n\r\n// Balance to settle\r\nexport const updateBalanceToSettle = makeActionCreator(\r\n UPDATE_BALANCE_TO_SETTLE\r\n);\r\n\r\nexport const getBalanceToSettle = (adfitNo) => async (dispatch) => {\r\n const result = await fetchBalanceToSettle(adfitNo);\r\n dispatch(\r\n updateBalanceToSettle({\r\n adfitNo,\r\n balance: result,\r\n })\r\n );\r\n};\r\n\r\n// Balance to settle without cancellation fee. Mainly used in cancellation.\r\n\r\nexport const updateBalanceToSettleWithOutCancelFee = makeActionCreator(\r\n UPDATE_BALANCE_TO_SETTLE_WITHOUT_CANCEL_FEE\r\n);\r\n\r\nexport const getBalanceToSettleWithoutCancelFee =\r\n (adfitNo) => async (dispatch) => {\r\n const result = await fetchBalanceToSettleWithoutCancelFee(adfitNo);\r\n dispatch(\r\n updateBalanceToSettleWithOutCancelFee({\r\n adfitNo,\r\n balance: result,\r\n })\r\n );\r\n };\r\n","import { getKyClient } from './client';\r\n\r\nexport const fetchFacilityById = async (facilityId) => {\r\n const url = `v1.0/facilities/${facilityId}`;\r\n const kyClient = await getKyClient();\r\n return await kyClient.get(url).json();\r\n};\r\n","import { normalize } from 'normalizr';\r\nimport { makeActionCreator } from 'utils/reduxCreators';\r\n\r\nexport const ADD_NORMALIZED_ENTITIES = 'normalizer/ADD_ENTITIES';\r\nexport const SET_NORMALIZED_ENTITIES = 'normalizer/SET_ENTITIES';\r\n\r\n// Use this when entities must be completely replaced.\r\nexport const setEntities = makeActionCreator(SET_NORMALIZED_ENTITIES);\r\n\r\n// Use this when entities must be deep merged instead of complete replacement.\r\nexport const setEntitiesWithNormalisation = (payload, schema) => {\r\n if (payload === null) throw new Error('Cannot normalise a null payload.');\r\n return setEntities(normalize(payload, schema));\r\n};\r\n\r\n// Use this when entities must be deep merged instead of complete replacement.\r\nexport const addEntities = makeActionCreator(ADD_NORMALIZED_ENTITIES);\r\n\r\n// Use this when entities must be deep merged instead of complete replacement.\r\nexport const addEntitiesWithNormalisation = (payload, schema) => {\r\n if (payload === null) throw new Error('Cannot normalise a null payload.');\r\n return addEntities(normalize(payload, schema));\r\n};\r\n","import { schema } from 'normalizr';\r\n\r\nexport const facilitySchema = new schema.Entity(\r\n 'facilities',\r\n {},\r\n {\r\n idAttribute: 'facilityId',\r\n }\r\n);\r\n","import { createReducer } from 'utils/reduxCreators';\r\nimport { fetchFacilityById } from 'services/facilities';\r\nimport {\r\n setEntitiesWithNormalisation,\r\n SET_NORMALIZED_ENTITIES,\r\n} from './normalizer';\r\nimport { facilitySchema } from './schemas';\r\n\r\nconst initialState = {\r\n entities: {},\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [SET_NORMALIZED_ENTITIES]: (state, { payload }) => {\r\n if (payload.entities.facilities) {\r\n return {\r\n ...state,\r\n entities: {\r\n ...payload.entities.facilities,\r\n },\r\n };\r\n }\r\n return state;\r\n },\r\n});\r\n\r\nexport const getFacilityById = (facilityId) => async (dispatch, getState) => {\r\n const facility = await fetchFacilityById(facilityId);\r\n dispatch(setEntitiesWithNormalisation(facility, facilitySchema));\r\n};\r\n\r\nexport const getFacilityByAdfitNo = (adfitNo) => async (dispatch, getState) => {\r\n const { customerDetails } = getState();\r\n //Ask for an api that can get the facility by the adfitNo directly.\r\n if (customerDetails.adfitNo !== adfitNo) {\r\n throw new Error('Different Account loaded');\r\n }\r\n const { facility: facilityId } = customerDetails;\r\n return dispatch(getFacilityById(facilityId));\r\n};\r\n","import { createSelector } from 'reselect';\r\n\r\nconst getCustomerDetails = (state, adfitNo) =>\r\n state.customerDetails &&\r\n (state.customerDetails.adfitNo === adfitNo ? state.customerDetails : null);\r\n\r\nconst getFacilities = (state) => state.facilities.entities;\r\n\r\nexport const makeSelectFacilityByAdfitNo = () => {\r\n return createSelector(\r\n [getCustomerDetails, getFacilities],\r\n (account, facilities) => {\r\n if (!account) return null;\r\n const { facility: facilityId } = account;\r\n return facilities[facilityId];\r\n }\r\n );\r\n};\r\n","export default {\r\n CANCEL_STRAIGHT_DOWN: 0,\r\n SET_TO_TERM: 1,\r\n COLLECT_OVERDUE: 2,\r\n COLLECT_DS_FEE: 3,\r\n COLLECT_CANCELLATION_FEE: 4,\r\n WITH_NOTICE_PERIOD: 5,\r\n CHARGE_BACK_DS_FEE: 6,\r\n};\r\n","import PropTypes from 'prop-types';\r\n\r\nconst commonPropTypes = {\r\n cancellationReasons: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n })\r\n ),\r\n localisation: PropTypes.object.isRequired,\r\n isUpdatingAccount: PropTypes.bool.isRequired,\r\n onFormSubmit: PropTypes.func.isRequired,\r\n adfitNo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n recentNotClearedPayment: PropTypes.bool.isRequired,\r\n estimatedFinalBillDate: PropTypes.string,\r\n account: PropTypes.shape({\r\n outsideTerm: PropTypes.bool.isRequired,\r\n cancelFee: PropTypes.number.isRequired,\r\n overdueAmount: PropTypes.number.isRequired,\r\n facility: PropTypes.string.isRequired,\r\n isTermIdentified: PropTypes.bool.isRequired,\r\n hasPy: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n balanceToSettleWithoutCancelFee: PropTypes.number,\r\n facility: PropTypes.shape({\r\n name: PropTypes.string,\r\n industryType: PropTypes.string.isRequired,\r\n }).isRequired,\r\n cancelDaysNotice: PropTypes.number.isRequired,\r\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n\r\nexport default commonPropTypes;\r\n","import { styled } from '@material-ui/core';\r\n\r\nexport const LabelContainer = styled('div')({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n verticalAlign: 'top',\r\n});\r\n\r\nexport const SubLabelContainer = styled('div')(({ theme }) => ({\r\n fontSize: '12px',\r\n color: theme.palette.common.lightText,\r\n}));\r\n\r\nexport const SubLabel = styled('p')({\r\n padding: 0,\r\n margin: 0,\r\n});\r\n\r\nexport const Label = styled('p')({\r\n fontSize: '14px',\r\n padding: 0,\r\n margin: 0,\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Controller } from 'react-hook-form';\r\nimport { isNotEmptyArray } from 'utils/misc';\r\nimport { RadioButton, RadioButtonGroup } from '@ds/react-components';\r\nimport * as Styled from './CancellationType.styled';\r\n\r\nconst CancellationType = (props) => {\r\n const { cancellationOptions, formControl } = props;\r\n\r\n return (\r\n (\r\n {\r\n onChange(parseInt(newValue));\r\n }}\r\n value={value}>\r\n \r\n {cancellationOptions.map(\r\n ({ label, subLabels, value: optionValue }) => (\r\n \r\n \r\n {label}\r\n \r\n \r\n {subLabels.map((val, index) => (\r\n {val} \r\n ))}\r\n \r\n \r\n )\r\n }\r\n />\r\n )\r\n )}\r\n \r\n \r\n )}\r\n />\r\n );\r\n};\r\n\r\nCancellationType.propTypes = {\r\n cancellationOptions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n subLabels: PropTypes.arrayOf[PropTypes.string],\r\n value: PropTypes.oneOfType[(PropTypes.string, PropTypes.number)],\r\n })\r\n ).isRequired,\r\n formControl: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default CancellationType;\r\n","import ContentLoader from 'react-content-loader';\r\nimport React from 'react';\r\nimport { BackgroundPaper } from '@ds/react-components';\r\nimport { styled, Typography } from '@material-ui/core';\r\n\r\nexport const AccountName = styled((props) => (\r\n \r\n \r\n \r\n \r\n \r\n {'Cancel Account'} \r\n \r\n \r\n \r\n \r\n {children}\r\n {isNotEmptyArray(cancellationReasons) && (\r\n \r\n (\r\n \r\n onChange(selectedObject ? selectedObject.value : null)\r\n }\r\n isSearchable={false}\r\n isDisabled={isSubmittingForm}\r\n isClearable={true}\r\n />\r\n )}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {isSubmittingForm ? (\r\n <>\r\n \r\n {'Confirm'}\r\n \r\n history.push(`/Customers/${adfitNo}/Overview`)}\r\n type={'none'}\r\n >\r\n {'Back'}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nFormLayout.InputWrapper = Styled.InputWrapper;\r\n\r\nFormLayout.propTypes = {\r\n onSubmit: PropTypes.func.isRequired,\r\n formControl: PropTypes.object.isRequired,\r\n cancellationReasons: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n })\r\n ),\r\n cancellationOptions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n subLabel: PropTypes.string,\r\n value: PropTypes.number,\r\n })\r\n ).isRequired,\r\n children: PropTypes.oneOfType([\r\n PropTypes.node,\r\n PropTypes.arrayOf(PropTypes.node),\r\n ]),\r\n isSubmittingForm: PropTypes.bool,\r\n adfitNo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n dataTestId: PropTypes.string,\r\n};\r\n\r\nFormLayout.defaultProps = {\r\n isSubmittingForm: false,\r\n cancellationReasons: [],\r\n dataTestId: 'form-layout',\r\n};\r\n\r\nexport default FormLayout;\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M0 23C0 10.3021 10.2983 0 23 0C35.7017 0 46 10.3021 46 23C46 35.7054 35.7017 46 23 46C10.2983 46 0 35.7054 0 23ZM43.0323 23.0001C43.0323 11.878 34.0012 2.96784 23 2.96784C11.9268 2.96784 2.96777 11.945 2.96777 23.0001C2.96777 34.077 11.9411 43.0324 23 43.0324C34.0725 43.0324 43.0323 34.0634 43.0323 23.0001ZM21.9342 11.1291H24.0654C24.6981 11.1291 25.2037 11.656 25.1773 12.2883L24.5281 27.869C24.5033 28.4651 24.0129 28.9355 23.4162 28.9355H22.5834C21.9868 28.9355 21.4963 28.465 21.4715 27.869L20.8223 12.2883C20.796 11.656 21.3015 11.1291 21.9342 11.1291ZM20.4033 33.3871C20.4033 31.9529 21.5659 30.7903 23.0001 30.7903C24.4343 30.7903 25.5969 31.9529 25.5969 33.3871C25.5969 34.8212 24.4343 35.9839 23.0001 35.9839C21.5659 35.9839 20.4033 34.8212 20.4033 33.3871Z\",\n fill: \"currentColor\"\n});\n\nvar SvgIcAlert = function SvgIcAlert(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 46 46\",\n fill: \"currentColor\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcAlert, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-alert.2971da09.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport { styled, Dialog, Typography, withStyles } from '@material-ui/core';\r\nimport { OutlinedButton } from '@ds/react-components';\r\nimport { ReactComponent as AlertIcon } from 'assets/icons/ic-alert.svg';\r\n\r\nexport const ConfirmDialog = withStyles({\r\n paperScrollPaper: {\r\n maxWidth: '300px',\r\n },\r\n root: {\r\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\r\n },\r\n})(Dialog);\r\n\r\nexport const DialogContentContainer = styled('div')({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n padding: '28px',\r\n});\r\n\r\nexport const DangerIcon = styled(AlertIcon)({\r\n width: '46px',\r\n height: '46px',\r\n color: '#CF3341',\r\n});\r\n\r\nexport const Title = styled((props) => (\r\n \r\n \r\n {'Confirmation'} \r\n \r\n {displayText.map((text) => (\r\n {text} \r\n ))}\r\n \r\n \r\n \r\n {'Confirm'}\r\n \r\n \r\n {'Cancel'}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nConfirmationModal.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n onCancelAccountClick: PropTypes.func.isRequired,\r\n onCloseClick: PropTypes.func.isRequired,\r\n displayText: PropTypes.arrayOf(PropTypes.string),\r\n};\r\n\r\nConfirmationModal.defaultProps = {\r\n displayText: [],\r\n};\r\n\r\nexport default ConfirmationModal;\r\n","export default {\r\n HEALTH: 'HE',\r\n FITNESS: 'FN',\r\n};\r\n","import { roundToTwoDecimals } from 'utils/numbers';\r\nimport { checkIfNzHealthAndFitness } from './cancellationUtils';\r\n\r\n// Cancellation Fee Validator\r\nexport const getCancellationFeeValidators = (\r\n getOtherFormValues,\r\n {\r\n cancelFee: cancelFeeLimit,\r\n balanceToSettleWithoutCancelFee,\r\n industryType,\r\n country,\r\n isBiPartite,\r\n }\r\n) => {\r\n const isNzHealthAndFitness = checkIfNzHealthAndFitness(industryType, country);\r\n\r\n // If the cancellation fee limit is zero or null then the maximum amount is 500.\r\n const cancelFeeCheckLimit = cancelFeeLimit || 500;\r\n\r\n return {\r\n //Cancellation fee minimum value has to $1 for it be processed.\r\n nonNzHealthAndFitness: (value) => {\r\n if (isNzHealthAndFitness) return true;\r\n //Skip other threshold when account is biPartite by assigning minComparisonAmount to balanceToSettleWithoutCancelFee\r\n const minComparisonAmount = isBiPartite\r\n ? balanceToSettleWithoutCancelFee\r\n : Math.min(cancelFeeCheckLimit, balanceToSettleWithoutCancelFee);\r\n\r\n switch (minComparisonAmount) {\r\n case cancelFeeCheckLimit:\r\n return (\r\n value <= cancelFeeCheckLimit ||\r\n `Cancellation fee must not exceed $${cancelFeeCheckLimit.toFixed(\r\n 2\r\n )}`\r\n );\r\n case balanceToSettleWithoutCancelFee:\r\n if (!balanceToSettleWithoutCancelFee) return true;\r\n return (\r\n value <= balanceToSettleWithoutCancelFee ||\r\n `Cancellation fee must not exceed the balance to settle amount of $${balanceToSettleWithoutCancelFee.toFixed(\r\n 2\r\n )}`\r\n );\r\n default:\r\n return true;\r\n }\r\n },\r\n // If NZ HnF industry then the cancellation fee has to be less than $150 and less than 25% of balance to settle.\r\n nzHealthAndFitness: (value) => {\r\n if (!isNzHealthAndFitness) return true;\r\n const nzHfLimit = 150;\r\n //Skip other threshold when account is biPartite by assigning minComparisonAmount to balanceToSettleWithoutCancelFee\r\n const minComparisonAmount = isBiPartite\r\n ? balanceToSettleWithoutCancelFee\r\n : Math.min(\r\n cancelFeeCheckLimit,\r\n 0.25 * balanceToSettleWithoutCancelFee,\r\n nzHfLimit\r\n );\r\n switch (minComparisonAmount) {\r\n case cancelFeeCheckLimit:\r\n return (\r\n value <= cancelFeeCheckLimit ||\r\n `Cancellation fee must not exceed $${cancelFeeCheckLimit.toFixed(\r\n 2\r\n )}`\r\n );\r\n case nzHfLimit:\r\n return (\r\n value <= nzHfLimit || `Cancellation fee must not exceed $150.00`\r\n );\r\n\r\n case 0.25 * balanceToSettleWithoutCancelFee:\r\n // If the balance to settle is $1, then it might contradict the minimum value being $1. This is expected behaviour.\r\n return (\r\n value <=\r\n roundToTwoDecimals(0.25 * balanceToSettleWithoutCancelFee) ||\r\n `Cancellation fee must not exceed $${roundToTwoDecimals(\r\n 0.25 * balanceToSettleWithoutCancelFee\r\n )} which is 25% of the balance to settle amount`\r\n );\r\n case balanceToSettleWithoutCancelFee:\r\n // If the balance to settle is $1, then it might contradict the minimum value being $1. This is expected behaviour.\r\n return (\r\n value <= roundToTwoDecimals(balanceToSettleWithoutCancelFee) ||\r\n `Cancellation fee must not exceed the balance to settle amount of $${roundToTwoDecimals(\r\n balanceToSettleWithoutCancelFee\r\n )}`\r\n );\r\n default:\r\n return true;\r\n }\r\n },\r\n };\r\n};\r\n","import { compareCaseIgnored } from 'utils/strings';\r\nimport industryTypes from 'constants/industryTypes';\r\nimport { isNullOrUndefined } from 'utils/misc';\r\n\r\n// Standard of 10 days for NZ account and 30 for rest of the world.\r\nexport const getCancelDaysNotice = (configuredDaysNotice, country) => {\r\n // Zero is a valid value.\r\n if (!isNullOrUndefined(configuredDaysNotice)) return configuredDaysNotice;\r\n if (compareCaseIgnored(country.trim(), 'NZ')) return 10;\r\n return 30;\r\n};\r\n\r\nexport const checkIfNzHealthAndFitness = (industryType, country) =>\r\n (compareCaseIgnored(industryType, industryTypes.HEALTH) ||\r\n compareCaseIgnored(industryType, industryTypes.FITNESS)) &&\r\n compareCaseIgnored(country.trim(), 'NZ');\r\n","import { styled } from '@material-ui/core';\r\nimport { Alert, Input, FormLabel } from '@ds/react-components';\r\n\r\nexport const FormContainer = styled('div')({});\r\n\r\nexport const InfoAlert = styled(Alert)({\r\n marginTop: '18px',\r\n maxWidth: '910px',\r\n});\r\n\r\nexport const FormInput = styled(Input)({\r\n maxWidth: '380px',\r\n});\r\n\r\nexport const LabelContainer = styled('div')({\r\n marginBottom: '8px',\r\n});\r\n\r\nexport const CancellationFeeLabel = styled(FormLabel)({\r\n marginBottom: 0,\r\n});\r\n\r\nexport const CancellationFeeSideText = styled('span')(({ theme }) => ({\r\n fontSize: '12px',\r\n color: theme.palette.common.lightText,\r\n fontStyle: 'italic',\r\n lineHeight: '17px',\r\n fontWeight: '400',\r\n textShadow: 0,\r\n}));\r\n\r\nexport const CancellationFeeSubLabel = styled('p')(({ theme }) => ({\r\n fontSize: '12px',\r\n color: theme.palette.common.lightText,\r\n padding: '0',\r\n margin: 0,\r\n lineHeight: '14px',\r\n}));\r\n","import { styled } from '@material-ui/core';\r\nimport { DatePicker } from '@ds/react-components';\r\n\r\nexport const NoticePeriodWrapper = styled('div')({});\r\n\r\nexport const NoticePeriodStartDatePicker = styled(DatePicker)({\r\n width: '166px',\r\n});\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Controller } from 'react-hook-form';\r\nimport { FormError } from '@ds/react-components';\r\nimport moment from 'moment';\r\n\r\nimport * as Styled from './NoticePeriod.styled';\r\n\r\nconst NoticePeriod = (props) => {\r\n const {\r\n cancelDaysNotice,\r\n formControl,\r\n isSubmittingForm,\r\n dateDisplayFormat,\r\n noticeErrors,\r\n } = props;\r\n\r\n // If the cancel days is zero this option is still shown.\r\n const maxPastDate = useMemo(\r\n () =>\r\n cancelDaysNotice === 0\r\n ? moment()\r\n : moment().subtract(cancelDaysNotice, 'days').add(1, 'days'), //Includes the start date as a notice day as well.\r\n [cancelDaysNotice]\r\n );\r\n\r\n const getInvalidDateMessage = () =>\r\n `Please select a date from ${maxPastDate.format(\r\n dateDisplayFormat\r\n )} to ${moment().format(dateDisplayFormat)}`;\r\n\r\n return (\r\n \r\n value.isValid() || getInvalidDateMessage(),\r\n notInFuture: (value) =>\r\n value.isSameOrBefore(moment(), 'days') || getInvalidDateMessage(),\r\n greaterThanMaxPastDate: (value) =>\r\n value.isSameOrAfter(maxPastDate, 'days') ||\r\n getInvalidDateMessage(),\r\n },\r\n }}\r\n render={({ onChange, value, onBlur }) => (\r\n {noticeErrors.message} \r\n )}\r\n \r\n );\r\n};\r\n\r\nNoticePeriod.propTypes = {\r\n cancelDaysNotice: PropTypes.number.isRequired,\r\n formControl: PropTypes.object.isRequired,\r\n isSubmittingForm: PropTypes.bool.isRequired,\r\n dateDisplayFormat: PropTypes.string.isRequired,\r\n noticeErrors: PropTypes.object,\r\n dataTestId: PropTypes.string,\r\n};\r\n\r\nNoticePeriod.defaultProps = {\r\n dataTestId: 'cancel-form-notice-period',\r\n};\r\n\r\nexport default NoticePeriod;\r\n","import { styled, withStyles } from '@material-ui/core';\r\nimport { Checkbox } from '@ds/react-components';\r\n\r\nexport const DeclarationContainer = styled('div')({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-start',\r\n margin: '12px 0 0 0',\r\n});\r\n\r\nexport const DeclarationText = styled('p')(({ theme }) => ({\r\n fontSize: '14px',\r\n textAlign: 'left',\r\n maxWidth: '600px',\r\n wordBreak: 'break-word',\r\n margin: 0,\r\n}));\r\n\r\nexport const DeclareCheckbox = withStyles((theme) => ({\r\n label: {\r\n color: theme.palette.common.black,\r\n fontWeight: 'bold',\r\n },\r\n root: {\r\n marginTop: '10px',\r\n },\r\n}))(Checkbox);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Controller } from 'react-hook-form';\r\nimport { FormError } from '@ds/react-components';\r\n\r\nimport * as Styled from './CancelFeeDeclaration.styled';\r\n\r\nconst CancelFeeDeclaration = (props) => {\r\n const {\r\n formControl,\r\n cancelFeeLimit,\r\n cancellationFeeValue,\r\n cancellationFeeError,\r\n declarationError,\r\n } = props;\r\n\r\n return !cancelFeeLimit ? (\r\n (\r\n \r\n \r\n {'The Facility agrees that in the event of a dispute arising that is directly or indirectly related ' +\r\n 'to the imposition of this fee, it will, within 48 hours of a request by Debitsuccess, provide Debitsuccess with the evidence required to substantiate the customer’s acceptance of this fee. In addition, the Facility agrees that it will be solely responsible to the customer for any ' +\r\n 'and all losses, costs, actions, demands, expenses or other liabilities arising, as a result of the imposition of this fee.'}\r\n \r\n onChange(event.target.checked)}\r\n disabled={!cancellationFeeValue || !!cancellationFeeError}\r\n onBlur={onBlur}\r\n />\r\n {declarationError && declarationError.message && (\r\n {declarationError.message} \r\n )}\r\n \r\n )}\r\n />\r\n ) : (\r\n \r\n \r\n {'We are sorry, but you do not have permission to cancel this account.'}\r\n \r\n \r\n );\r\n};\r\n\r\nNoPermissionError.propTypes = {};\r\n\r\nexport default NoPermissionError;\r\n","import React, { useMemo, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Controller, useForm } from 'react-hook-form';\r\nimport moment from 'moment';\r\nimport {\r\n numberToCurrency,\r\n isNullOrUndefined,\r\n isNotEmptyArray,\r\n} from 'utils/misc';\r\nimport { convertToFloat } from 'utils/numbers';\r\nimport cancellationTypes from 'constants/cancellationTypes';\r\nimport permissionTypes from 'constants/permissionTypes';\r\n\r\nimport commonPropTypes from '../common/commonPropTypes';\r\nimport FormLayout from '../common/FormLayout';\r\nimport ConfirmationModal from '../common/ConfirmationModal';\r\nimport { getCancellationFeeValidators } from '../common/validators';\r\n\r\nimport * as Styled from '../CancellationForm.styled';\r\nimport NoticePeriod from '../common/NoticePeriod';\r\nimport CancelFeeDeclaration from '../common/CancelFeeDeclaration';\r\nimport NoPermissionError from '../common/NoPermissionError';\r\n\r\nconst OverdueForm = (props) => {\r\n const {\r\n cancellationReasons,\r\n onFormSubmit,\r\n isUpdatingAccount,\r\n adfitNo,\r\n estimatedFinalBillDate,\r\n localisation,\r\n outstandingDsFee,\r\n account,\r\n facility,\r\n balanceToSettleWithoutCancelFee,\r\n cancelDaysNotice,\r\n permissions,\r\n } = props;\r\n\r\n const {\r\n outsideTerm,\r\n cancelFee,\r\n country,\r\n overdueAmount,\r\n isFixedTerm,\r\n isTermIdentified,\r\n hasPy,\r\n isBiPartite,\r\n } = account;\r\n\r\n const { industryType } = facility;\r\n\r\n const { dateFormat } = localisation.locales;\r\n\r\n const cancellationOptions = useMemo(() => {\r\n const endOfTermOption =\r\n // should be inside term and term should be identified\r\n // and only if has no PY and is outside term and TermType is Payment i.e. term not identified\r\n !outsideTerm || (!hasPy && outsideTerm && !isTermIdentified)\r\n ? [\r\n {\r\n label: 'Cancel at the end of the term',\r\n subLabels: [\r\n ...(estimatedFinalBillDate && hasPy\r\n ? [\r\n `Estimated date of final payment is ${moment(\r\n estimatedFinalBillDate\r\n ).format(dateFormat)}`,\r\n ]\r\n : []),\r\n 'Any overdues might defer the cancellation',\r\n ],\r\n value: cancellationTypes.SET_TO_TERM,\r\n },\r\n ]\r\n : [];\r\n\r\n const noticerPeriodOption =\r\n outsideTerm && !isFixedTerm && isTermIdentified\r\n ? [\r\n {\r\n label: `Cancel after ${cancelDaysNotice} days notice`,\r\n subLabels: [\r\n ...(estimatedFinalBillDate && hasPy\r\n ? [\r\n `Estimated date of final payment is ${moment(\r\n estimatedFinalBillDate\r\n ).format(dateFormat)}`,\r\n ]\r\n : []),\r\n 'Any overdues might defer the cancellation',\r\n ],\r\n value: cancellationTypes.WITH_NOTICE_PERIOD,\r\n },\r\n ]\r\n : [];\r\n\r\n //If the user has only one permission then show these options.\r\n if (\r\n permissions.includes(permissionTypes.canSetToTerm) &&\r\n !permissions.includes(permissionTypes.canCancelAllAccounts)\r\n ) {\r\n return [...endOfTermOption, ...noticerPeriodOption];\r\n }\r\n return [\r\n {\r\n label: 'Waive overdue amount and cancel',\r\n subLabels: [\r\n `Debitsuccess fee of ${numberToCurrency(\r\n isNullOrUndefined(outstandingDsFee) ? 0 : outstandingDsFee,\r\n localisation\r\n )} will be charged to the business`,\r\n ],\r\n value: cancellationTypes.CHARGE_BACK_DS_FEE,\r\n },\r\n //Do not delete this commented code. This is tested code but this option must be hidden temporarily(courtesy of genius product planning).\r\n // ...(outstandingDsFee\r\n // ? [\r\n // {\r\n // label: 'Collect Debitsuccess fee and cancel',\r\n // subLabels: [\r\n // `Debitsuccess fee of ${numberToCurrency(\r\n // outstandingDsFee,\r\n // localisation\r\n // )} will be charged to the customer`,\r\n // ],\r\n // value: cancellationTypes.COLLECT_DS_FEE,\r\n // },\r\n // ]\r\n // : []),\r\n {\r\n label: 'Collect overdue amount and cancel',\r\n subLabels: [\r\n `Overdue amount of ${numberToCurrency(\r\n overdueAmount,\r\n localisation\r\n )} will be charged to the customer`,\r\n ],\r\n value: cancellationTypes.COLLECT_OVERDUE,\r\n },\r\n ...endOfTermOption,\r\n ...noticerPeriodOption,\r\n ];\r\n }, [\r\n localisation,\r\n estimatedFinalBillDate,\r\n outsideTerm,\r\n outstandingDsFee,\r\n overdueAmount,\r\n dateFormat,\r\n cancelDaysNotice,\r\n isFixedTerm,\r\n permissions,\r\n ]);\r\n\r\n //State for the confirmation Modal.\r\n const [confirmationModalState, setConfirmationModalState] = useState({\r\n isOpen: false,\r\n displayText: [],\r\n });\r\n\r\n const { handleSubmit, control, watch, errors, getValues, setValue } = useForm(\r\n {\r\n defaultValues: {\r\n cancellationOption: isNotEmptyArray(cancellationOptions)\r\n ? cancellationOptions[0].value\r\n : undefined,\r\n cancelReason: null,\r\n cancellationFee: null,\r\n noticeStartDate: moment(),\r\n cancellationFeeDeclaration: false,\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n }\r\n );\r\n\r\n const watchCancellationOption = watch('cancellationOption');\r\n\r\n const watchCancellationFee = watch('cancellationFee');\r\n\r\n const onValidSubmit = useCallback(\r\n (data) => {\r\n // Open the confirmation modal if required.\r\n if (\r\n data.cancellationOption === cancellationTypes.COLLECT_DS_FEE ||\r\n data.cancellationOption === cancellationTypes.CHARGE_BACK_DS_FEE\r\n ) {\r\n setConfirmationModalState({\r\n isOpen: true,\r\n displayText: [\r\n 'By selecting this option you agree to waive fees owed to your business.',\r\n ],\r\n });\r\n return;\r\n }\r\n onFormSubmit(cancellationOptions, data);\r\n },\r\n [cancellationOptions, onFormSubmit]\r\n );\r\n\r\n const onConfirmModal = useCallback(() => {\r\n const data = getValues();\r\n setConfirmationModalState({\r\n displayText: [],\r\n isOpen: false,\r\n });\r\n onFormSubmit(cancellationOptions, data);\r\n }, [getValues, cancellationOptions, onFormSubmit]);\r\n\r\n const onCancelConfirmModal = useCallback(() => {\r\n setConfirmationModalState({\r\n isOpen: false,\r\n displayText: [],\r\n });\r\n }, [setConfirmationModalState]);\r\n\r\n const isEstimatedFinalBillDateToday = useMemo(\r\n () => moment(estimatedFinalBillDate).isSame(moment(), 'days'),\r\n [estimatedFinalBillDate]\r\n );\r\n\r\n if (!isNotEmptyArray(cancellationOptions)) {\r\n return \r\n
\r\n {!outsideTerm &&\r\n hasPy &&\r\n !isEstimatedFinalBillDateToday &&\r\n watchCancellationOption === cancellationTypes.COLLECT_OVERDUE && (\r\n \r\n (\r\n <>\r\n \r\n \r\n {'Cancellation fee '}\r\n \r\n {'(Optional)'}\r\n \r\n \r\n \r\n {\r\n 'Cancellation fee is in addition to the overdue amount'\r\n }\r\n \r\n \r\n\r\n {\r\n onBlur(event);\r\n //Reset the declaration checkbox if on blur no cancellation fee is entered.\r\n // Done because the field is optional.\r\n if (!value)\r\n setValue('cancellationFeeDeclaration', false);\r\n }}\r\n disabled={isUpdatingAccount}\r\n value={isNullOrUndefined(value) ? '' : value}\r\n onChange={(event) => {\r\n if (event.target.validity.valid) {\r\n onChange(convertToFloat(event.target.value));\r\n }\r\n }}\r\n startAdornment={'$'}\r\n showStartAdornmentDivider={true}\r\n showInlineIcons={false}\r\n error={\r\n errors.cancellationFee && errors.cancellationFee.message\r\n }\r\n />\r\n \r\n )}\r\n />\r\n \r\n )}\r\n\r\n {watchCancellationOption === cancellationTypes.WITH_NOTICE_PERIOD && (\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nOverdueForm.propTypes = {\r\n ...commonPropTypes,\r\n outstandingDsFee: PropTypes.number,\r\n};\r\n\r\nOverdueForm.defaultProps = {\r\n estimatedFinalBillDate: null,\r\n outstandingDsFee: null,\r\n};\r\n\r\nexport default OverdueForm;\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport { Controller, useForm } from 'react-hook-form';\r\nimport moment from 'moment';\r\nimport { convertToFloat } from 'utils/numbers';\r\nimport { isNotEmptyArray, isNullOrUndefined } from 'utils/misc';\r\nimport cancellationTypes from 'constants/cancellationTypes';\r\nimport permissionTypes from 'constants/permissionTypes';\r\nimport FormLayout from '../common/FormLayout';\r\nimport commonPropTypes from '../common/commonPropTypes';\r\nimport { getCancellationFeeValidators } from '../common/validators';\r\nimport NoticePeriod from '../common/NoticePeriod';\r\nimport CancelFeeDeclaration from '../common/CancelFeeDeclaration';\r\nimport NoPermissionError from '../common/NoPermissionError';\r\n\r\nimport * as Styled from '../CancellationForm.styled';\r\n\r\nconst NoOverdueForm = (props) => {\r\n const {\r\n cancellationReasons,\r\n onFormSubmit,\r\n isUpdatingAccount,\r\n adfitNo,\r\n estimatedFinalBillDate,\r\n localisation,\r\n recentNotClearedPayment,\r\n account,\r\n balanceToSettleWithoutCancelFee,\r\n facility,\r\n cancelDaysNotice,\r\n permissions,\r\n } = props;\r\n\r\n const {\r\n outsideTerm,\r\n cancelFee,\r\n country,\r\n isFixedTerm,\r\n isTermIdentified,\r\n hasPy,\r\n isBiPartite,\r\n } = account;\r\n\r\n const { industryType } = facility;\r\n\r\n const { dateFormat } = localisation.locales;\r\n\r\n const cancellationOptions = useMemo(() => {\r\n const endOfTermOption =\r\n !outsideTerm && isTermIdentified\r\n ? [\r\n {\r\n label: 'Cancel at the end of the term',\r\n subLabels: [\r\n ...(estimatedFinalBillDate && hasPy\r\n ? [\r\n `Estimated final payment date ${moment(\r\n estimatedFinalBillDate\r\n ).format(dateFormat)}`,\r\n ]\r\n : []),\r\n ],\r\n value: cancellationTypes.SET_TO_TERM,\r\n },\r\n ]\r\n : [];\r\n\r\n const noticerPeriodOption =\r\n //An account can be set to term and can still be active outside term when there are suspensions in between or an overdue amount is pending to be collected.\r\n // In that case notice period doesn't apply.\r\n outsideTerm && !isFixedTerm && isTermIdentified\r\n ? [\r\n {\r\n label: `Cancel after ${cancelDaysNotice} days notice period`,\r\n value: cancellationTypes.WITH_NOTICE_PERIOD,\r\n subLabels: [],\r\n },\r\n ]\r\n : [];\r\n\r\n //If only has CanSetToTerm permission then display below options.\r\n if (\r\n permissions.includes(permissionTypes.canSetToTerm) &&\r\n !permissions.includes(permissionTypes.canCancelAllAccounts)\r\n ) {\r\n return [...endOfTermOption, ...noticerPeriodOption];\r\n }\r\n\r\n //Display all the options.\r\n return [\r\n {\r\n label: 'Cancel immediately',\r\n subLabels: [\r\n ...(recentNotClearedPayment\r\n ? ['Payment will not be re-attempted upon reversal']\r\n : []),\r\n ],\r\n value: cancellationTypes.CANCEL_STRAIGHT_DOWN,\r\n },\r\n // Estimated final bill date is today then this option should be hidden.\r\n ...(!outsideTerm &&\r\n hasPy &&\r\n balanceToSettleWithoutCancelFee > 0 &&\r\n !moment(estimatedFinalBillDate).isSame(moment(), 'days')\r\n ? [\r\n {\r\n label: 'Collect cancellation fee and cancel',\r\n subLabels: [],\r\n value: cancellationTypes.COLLECT_CANCELLATION_FEE,\r\n },\r\n ]\r\n : []),\r\n ...endOfTermOption,\r\n ...noticerPeriodOption,\r\n ];\r\n }, [\r\n dateFormat,\r\n estimatedFinalBillDate,\r\n recentNotClearedPayment,\r\n outsideTerm,\r\n cancelDaysNotice,\r\n balanceToSettleWithoutCancelFee,\r\n isFixedTerm,\r\n permissions,\r\n ]);\r\n\r\n const { handleSubmit, control, watch, errors, getValues } = useForm({\r\n defaultValues: {\r\n cancellationOption: isNotEmptyArray(cancellationOptions)\r\n ? cancellationOptions[0].value\r\n : undefined,\r\n cancelReason: null,\r\n cancellationFee: null,\r\n noticeStartDate: moment(),\r\n cancellationFeeDeclaration: false,\r\n },\r\n mode: 'onBlur',\r\n reValidateMode: 'onBlur',\r\n });\r\n\r\n const watchCancellationOption = watch('cancellationOption');\r\n //Won't rerender unless watched.\r\n const watchCancellationFee = watch('cancellationFee');\r\n\r\n const onValidSubmit = useCallback(\r\n (data) => {\r\n onFormSubmit(cancellationOptions, data);\r\n },\r\n [cancellationOptions, onFormSubmit]\r\n );\r\n\r\n if (!isNotEmptyArray(cancellationOptions)) {\r\n return \r\n
\r\n {isTermIdentified &&\r\n watchCancellationOption ===\r\n cancellationTypes.COLLECT_CANCELLATION_FEE && (\r\n \r\n (\r\n {\r\n if (event.target.validity.valid) {\r\n onChange(convertToFloat(event.target.value));\r\n }\r\n }}\r\n startAdornment={'$'}\r\n showStartAdornmentDivider={true}\r\n showInlineIcons={false}\r\n labelId={'cancellationFeeId'}\r\n label={'Cancellation fee'}\r\n onBlur={onBlur}\r\n error={\r\n errors.cancellationFee && errors.cancellationFee.message\r\n }\r\n />\r\n )}\r\n />\r\n \r\n )}\r\n {watchCancellationOption === cancellationTypes.WITH_NOTICE_PERIOD && (\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nNoOverdueForm.propTypes = {\r\n ...commonPropTypes,\r\n};\r\n\r\nNoOverdueForm.defaultProps = {\r\n estimatedFinalBillDate: null,\r\n balanceToSettleWithoutCancelFee: null,\r\n};\r\n\r\nexport default NoOverdueForm;\r\n","import { styled } from '@material-ui/core';\r\nimport { Alert, OutlinedButton, FormLabel } from '@ds/react-components';\r\n\r\nimport {\r\n Paper,\r\n PaperBody,\r\n PaperHeader,\r\n PaperHeaderText,\r\n} from '../../Cancellation.styled';\r\n\r\nexport const InfoAlert = styled(Alert)({\r\n marginTop: '18px',\r\n maxWidth: '910px',\r\n});\r\n\r\nexport const InfoAlertMessage = styled(Alert.AlertMessage)({\r\n fontWeight: 'bold',\r\n});\r\n\r\nexport { Paper, PaperHeader, PaperHeaderText };\r\n\r\nexport const PaperBodyOverload = styled(PaperBody)({\r\n padding: '2px 32px 16px 32px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n});\r\n\r\nexport const BodySectionWrapper = styled('div')({\r\n margin: '16px 0px',\r\n});\r\n\r\nexport const InfoLabel = styled(FormLabel)(({ theme }) => ({\r\n color: theme.palette.common.lightText,\r\n}));\r\n\r\nexport const InfoText = styled('div')(({ theme }) => ({\r\n fontSize: '14px',\r\n color: theme.palette.common.black,\r\n}));\r\n\r\nexport const InfoSubTextContainer = styled('div')(({ theme }) => ({\r\n fontSize: '12px',\r\n marginTop: '4px',\r\n color: '#BEBEBE',\r\n}));\r\n\r\nexport const InfoSubText = styled('p')({\r\n padding: 0,\r\n margin: 0,\r\n});\r\n\r\nexport const BackButton = styled(OutlinedButton)({\r\n marginTop: '18px',\r\n});\r\n","import React, { useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport useToggle from 'hooks/useToggle';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport { numberToCurrency } from 'utils/misc';\r\nimport { roundToTwoDecimals } from 'utils/numbers';\r\nimport cancellationTypes from 'constants/cancellationTypes';\r\n\r\nimport * as Styled from './CancellationInfo.styled';\r\n\r\nconst CancellationInfo = (props) => {\r\n const {\r\n account,\r\n adfitNo,\r\n cancellationOption,\r\n cancellationFee,\r\n localisation,\r\n noticeStartDate,\r\n } = props;\r\n\r\n const { cancelReason, customCancelReason } = account;\r\n\r\n const { dateFormat } = localisation.locales;\r\n\r\n const [isSuccessAlertOpen, toggleSuccessAlert] = useToggle(true);\r\n\r\n const formattedNoticeStartDate = useMemo(() => {\r\n if (!noticeStartDate) return '-';\r\n return moment(noticeStartDate).format(dateFormat);\r\n }, [dateFormat, noticeStartDate]);\r\n\r\n const alertMessages = useMemo(() => {\r\n if (!cancellationOption) return [];\r\n\r\n const { value } = cancellationOption;\r\n\r\n switch (value) {\r\n case cancellationTypes.COLLECT_DS_FEE:\r\n return [\r\n 'Cancellation set up complete!',\r\n 'Account will be cancelled after the Debitsuccess fee is collected.',\r\n ];\r\n case cancellationTypes.COLLECT_OVERDUE:\r\n return [\r\n 'Cancellation was set up successfully.',\r\n `Account will be cancelled after the overdue amount ${\r\n cancellationFee ? 'and the cancellation fee' : ''\r\n } is collected.`,\r\n ];\r\n case cancellationTypes.COLLECT_CANCELLATION_FEE:\r\n return [\r\n 'Cancellation set up complete!',\r\n 'Account will be cancelled after the cancellation fee is collected.',\r\n ];\r\n case cancellationTypes.WITH_NOTICE_PERIOD ||\r\n cancellationTypes.SET_TO_TERM:\r\n return [\r\n 'Cancellation set up complete!',\r\n 'Reversals, overdues, suspensions or catch ups may delay the final payment date.',\r\n ];\r\n default:\r\n return ['Account was cancelled successfully.'];\r\n }\r\n }, [cancellationOption, cancellationFee]);\r\n\r\n return (\r\n \r\n {isSuccessAlertOpen && (\r\n \r\n {alertMessages.map((val, index) => (\r\n {val} \r\n ))}\r\n \r\n )}\r\n \r\n \r\n {'Cancel Account'} \r\n \r\n \r\n {cancellationOption && (\r\n \r\n {'Cancellation type'} \r\n {cancellationOption.label} \r\n \r\n {cancellationOption.subLabels &&\r\n cancellationOption.subLabels.map((val, index) => (\r\n {val} \r\n ))}\r\n \r\n \r\n )}\r\n {cancellationOption &&\r\n (cancellationOption.value === cancellationTypes.COLLECT_OVERDUE ||\r\n cancellationOption.value ===\r\n cancellationTypes.COLLECT_CANCELLATION_FEE) && (\r\n \r\n {'Cancellation fee'} \r\n \r\n {!cancellationFee\r\n ? '-'\r\n : `${numberToCurrency(\r\n roundToTwoDecimals(cancellationFee),\r\n localisation\r\n )}`}\r\n \r\n \r\n )}\r\n {cancellationOption &&\r\n cancellationOption.value ===\r\n cancellationTypes.WITH_NOTICE_PERIOD && (\r\n \r\n {'Start notice period on'} \r\n {formattedNoticeStartDate} \r\n \r\n )}\r\n\r\n \r\n {'Cancellation reason'} \r\n \r\n {customCancelReason\r\n ? customCancelReason\r\n : !cancelReason || cancelReason === 'Facility Request'\r\n ? 'Business request'\r\n : cancelReason}\r\n \r\n \r\n \r\n \r\n {'Back'} \r\n \r\n
\r\n );\r\n};\r\n\r\nCancellationInfo.propTypes = {\r\n account: PropTypes.object.isRequired,\r\n adfitNo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n cancellationOption: PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n subLabels: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n value: PropTypes.number.isRequired,\r\n }),\r\n cancellationFee: PropTypes.number,\r\n localisation: PropTypes.object,\r\n noticeStartDate: PropTypes.string,\r\n cancelDaysNotice: PropTypes.number,\r\n};\r\n\r\nCancellationInfo.defaultProps = {\r\n cancellationFee: null,\r\n noticeStartDate: null,\r\n cancelDaysNotice: null,\r\n};\r\n\r\nexport default CancellationInfo;\r\n","import React, { useMemo, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Alert } from '@ds/react-components';\r\nimport { numberToCurrency, isNotEmptyArray } from 'utils/misc';\r\nimport cancellationTypes from 'constants/cancellationTypes';\r\nimport OverdueForm from './OverdueForm';\r\nimport NoOverdueForm from './NoOverdueForm';\r\nimport CancellationInfo from './CancellationInfo';\r\nimport { getCancelDaysNotice } from './common/cancellationUtils';\r\n\r\nimport * as Styled from './CancellationForm.styled';\r\n\r\nconst CancellationForm = (props) => {\r\n const {\r\n cancellationReasons,\r\n account,\r\n localisation,\r\n adfitNo,\r\n cancelAccount,\r\n pendingPaymentAmount,\r\n estimatedFinalBillDate,\r\n outstandingDsFee,\r\n balanceToSettleWithoutCancelFee,\r\n facility,\r\n permissions,\r\n } = props;\r\n const { overdueAmount, country, daysNotice } = account;\r\n\r\n const [isUpdatingAccount, setIsUpdatingAccount] = useState(false);\r\n\r\n const [submissionError, setSubmissionError] = useState('');\r\n\r\n // The data is used to show the summary of the cancellation once the form is submitted.\r\n const [submittedInfo, setSubmittedInfo] = useState(null);\r\n\r\n const cancelDaysNotice = getCancelDaysNotice(daysNotice, country);\r\n\r\n const onFormSubmit = useCallback(\r\n async (cancellationOptions, data) => {\r\n setIsUpdatingAccount(true);\r\n setSubmissionError('');\r\n\r\n //Add any missing values.\r\n const formattedData = {\r\n ...data,\r\n cancelReason: !data.cancelReason\r\n ? 'Facility Request'\r\n : data.cancelReason,\r\n //server does not accept a zero value cancellation fee.\r\n cancellationFee:\r\n data.cancellationOption === cancellationTypes.COLLECT_OVERDUE &&\r\n !data.cancellationFee\r\n ? undefined\r\n : data.cancellationFee,\r\n //passing true to toIsoString method makes sure that the date is not converted to utc format.\r\n noticeStartDate:\r\n data.noticeStartDate && data.noticeStartDate.toISOString(true),\r\n cancelDaysNotice,\r\n };\r\n\r\n try {\r\n await cancelAccount(adfitNo, formattedData);\r\n setSubmittedInfo({\r\n ...formattedData,\r\n cancellationOption: cancellationOptions.find(\r\n (option) => option.value === data.cancellationOption\r\n ),\r\n });\r\n } catch (err) {\r\n setSubmissionError(\r\n err.message || 'Something went wrong. Please try again.'\r\n );\r\n setIsUpdatingAccount(false);\r\n window.scroll(0, 0);\r\n }\r\n },\r\n [\r\n cancelAccount,\r\n adfitNo,\r\n setSubmissionError,\r\n setIsUpdatingAccount,\r\n cancelDaysNotice,\r\n ]\r\n );\r\n\r\n const hasPendingPaymentAmount = useMemo(() => {\r\n return pendingPaymentAmount !== 0;\r\n }, [pendingPaymentAmount]);\r\n\r\n const noteAlerts = useMemo(() => {\r\n const getOverdueAlert = () =>\r\n overdueAmount > 0\r\n ? [\r\n `This account has an overdue amount of ${numberToCurrency(\r\n overdueAmount,\r\n localisation\r\n )}.`,\r\n ]\r\n : [];\r\n\r\n const getRecentPayAlert = () => {\r\n return hasPendingPaymentAmount\r\n ? [\r\n `Total payment of ${numberToCurrency(\r\n Math.abs(pendingPaymentAmount),\r\n localisation\r\n )} was attempted for this customer and is pending.`,\r\n ]\r\n : [];\r\n };\r\n\r\n const noteAlerts = [...getOverdueAlert(), ...getRecentPayAlert()];\r\n return isNotEmptyArray(noteAlerts) ? noteAlerts : null;\r\n }, [overdueAmount, localisation, hasPendingPaymentAmount]);\r\n\r\n if (submittedInfo) {\r\n return (\r\n \r\n {!!submissionError && (\r\n \r\n \r\n {submissionError}\r\n \r\n \r\n )}\r\n {!!noteAlerts && (\r\n \r\n {noteAlerts.map((alertMessage, index) => (\r\n {`${\r\n noteAlerts.length > 1 ? '• ' : ''\r\n } ${alertMessage}`}\r\n ))}\r\n \r\n )}\r\n {/*Though the below two forms might seem very similar in look and feel, there are too many implementation differences hence treating them as separate forms*/}\r\n {overdueAmount <= 0 ? (\r\n \r\n );\r\n};\r\n\r\nCancellationForm.propTypes = {\r\n cancellationReasons: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n })\r\n ).isRequired,\r\n account: PropTypes.object.isRequired,\r\n transactions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n amount: PropTypes.number.isRequired,\r\n cleared: PropTypes.bool,\r\n })\r\n ).isRequired,\r\n facility: PropTypes.shape({\r\n name: PropTypes.string,\r\n industryType: PropTypes.string.isRequired,\r\n }).isRequired,\r\n localisation: PropTypes.object.isRequired,\r\n adfitNo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n estimatedFinalBillDate: PropTypes.string,\r\n outstandingDsFee: PropTypes.number,\r\n cancelAccount: PropTypes.func.isRequired,\r\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n balanceToSettleWithoutCancelFee: PropTypes.number,\r\n};\r\n\r\nCancellationForm.defaultProps = {\r\n outstandingDsFee: null,\r\n balanceToSettleWithoutCancelFee: null,\r\n};\r\n\r\nexport default CancellationForm;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useParams, Redirect } from 'react-router-dom';\r\nimport permissionTypes from 'constants/permissionTypes';\r\nimport PageWrapper from 'components/ui/PageWrapper';\r\nimport CancellationForm from './CancellationForm';\r\n\r\nimport * as Styled from './Cancellation.styled';\r\n\r\nconst Cancellation = (props) => {\r\n const {\r\n getCancellationReasons,\r\n getAccountInfo,\r\n getTransactions,\r\n getPendingPaymentAmount,\r\n getEstimatedFinalBillDate,\r\n getOutstandingDsFee,\r\n getBalanceToSettleWithoutCancelFee,\r\n cancellationReasons,\r\n getFacilityByAdfitNo,\r\n account,\r\n transactions,\r\n pendingPaymentAmount,\r\n localisation,\r\n cancelAccount,\r\n estimatedFinalBillDate,\r\n outstandingDsFee,\r\n balanceToSettleWithoutCancelFee,\r\n facility,\r\n permissions,\r\n } = props;\r\n\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n\r\n const [wasAccountActiveAtStart, setAccountActiveAtStart] = useState(true);\r\n\r\n const { adfitNo } = useParams();\r\n\r\n const { isActive, name, firstName } = account;\r\n\r\n useEffect(() => {\r\n (async () => {\r\n try {\r\n setIsLoaded(false);\r\n\r\n const restOfPromises = [\r\n getCancellationReasons(adfitNo),\r\n getTransactions(adfitNo),\r\n getPendingPaymentAmount(adfitNo),\r\n getEstimatedFinalBillDate(adfitNo),\r\n getOutstandingDsFee(adfitNo),\r\n getBalanceToSettleWithoutCancelFee(adfitNo),\r\n ];\r\n\r\n await getAccountInfo(adfitNo);\r\n const accountDependentPromises = [getFacilityByAdfitNo(adfitNo)];\r\n await Promise.all([...restOfPromises, ...accountDependentPromises]);\r\n setIsLoaded(true);\r\n } catch (e) {\r\n console.warn(e);\r\n }\r\n })();\r\n }, [\r\n setIsLoaded,\r\n adfitNo,\r\n getCancellationReasons,\r\n getAccountInfo,\r\n getTransactions,\r\n getEstimatedFinalBillDate,\r\n getOutstandingDsFee,\r\n getFacilityByAdfitNo,\r\n getBalanceToSettleWithoutCancelFee,\r\n ]);\r\n\r\n // Useful to redirect the account if it was not active to begin with.\r\n useEffect(() => {\r\n if (!account) return;\r\n setAccountActiveAtStart(isActive);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isLoaded]);\r\n\r\n if (!isLoaded) {\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 //if the account is already cancelled do not show the form.\r\n if (!isActive && !wasAccountActiveAtStart) {\r\n return \r\n {`${\r\n name || firstName\r\n }, ${adfitNo}`} \r\n\r\n \r\n );\r\n};\r\n\r\nCancellation.propTypes = {\r\n cancellationReasons: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n })\r\n ),\r\n localisation: PropTypes.object.isRequired,\r\n account: PropTypes.object,\r\n estimatedFinalBillDate: PropTypes.string,\r\n outstandingDsFee: PropTypes.number,\r\n balanceToSettleWithoutCancelFee: PropTypes.number,\r\n transactions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n amount: PropTypes.number.isRequired,\r\n cleared: PropTypes.bool,\r\n })\r\n ),\r\n facility: PropTypes.shape({\r\n name: PropTypes.string,\r\n industryType: PropTypes.string.isRequired,\r\n }),\r\n getCancellationReasons: PropTypes.func.isRequired,\r\n getAccountInfo: PropTypes.func.isRequired,\r\n cancelAccount: PropTypes.func.isRequired,\r\n getTransactions: PropTypes.func.isRequired,\r\n getEstimatedFinalBillDate: PropTypes.func.isRequired,\r\n getOutstandingDsFee: PropTypes.func.isRequired,\r\n getBalanceToSettleWithoutCancelFee: PropTypes.func.isRequired,\r\n getFacilityByAdfitNo: PropTypes.func.isRequired,\r\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n\r\nCancellation.defaultProps = {\r\n cancellationReasons: [],\r\n account: null,\r\n transactions: [],\r\n finalPaymentDate: null,\r\n outstandingDsFee: null,\r\n balanceToSettle: null,\r\n balanceToSettleWithoutCancelFee: null,\r\n estimatedFinalBillDate: '',\r\n};\r\n\r\nCancellation.displayName = 'Cancellation';\r\n\r\nexport default Cancellation;\r\n","import withRouteParams from 'hoc/withRouteParams';\r\nimport { connect } from 'react-redux';\r\nimport { compose } from 'redux';\r\nimport { checkAndGetCancellationReasons } from 'ducks/cancellationReasons';\r\nimport {\r\n getPersonalInfo,\r\n getTransactions,\r\n getPendingPaymentAmount,\r\n} from 'ducks/customerDetails';\r\nimport { cancelAccount } from 'ducks/accounts';\r\nimport {\r\n getEstimatedFinalBillDate,\r\n getOutstandingDsFee,\r\n getBalanceToSettleWithoutCancelFee,\r\n} from 'ducks/accountMeta';\r\nimport { getFacilityByAdfitNo } from 'ducks/facilities';\r\nimport { selectEntitiesByAdfitNo } from 'selectors/common';\r\nimport { makeSelectFacilityByAdfitNo } from 'selectors/facilities';\r\nimport withScrollableTopTabs from 'hoc/withScrollableTopTabs';\r\nimport customerPageTopTabs from 'constants/customerPageTopTabs';\r\nimport Cancellation from './Cancellation';\r\n\r\nconst makeMapStateToProps = () => {\r\n const selectFacilityByAdfitNo = makeSelectFacilityByAdfitNo();\r\n\r\n return (state, ownProps) => {\r\n const { adfitNo } = ownProps.routeParams;\r\n return {\r\n cancellationReasons: selectEntitiesByAdfitNo(\r\n state.cancellationReasons,\r\n adfitNo\r\n ),\r\n account: state.customerDetails,\r\n localisation: state.localisation,\r\n transactions: state.customerDetails.lastest3Transactions,\r\n pendingPaymentAmount: state.customerDetails.pendingPaymentAmount,\r\n estimatedFinalBillDate: selectEntitiesByAdfitNo(\r\n state.accountMeta.estimatedFinalBillDate,\r\n adfitNo\r\n ),\r\n outstandingDsFee: selectEntitiesByAdfitNo(\r\n state.accountMeta.outstandingDsFee,\r\n adfitNo\r\n ),\r\n balanceToSettleWithoutCancelFee: selectEntitiesByAdfitNo(\r\n state.accountMeta.balanceToSettleWithoutCancelFee,\r\n adfitNo\r\n ),\r\n facility: selectFacilityByAdfitNo(state, adfitNo),\r\n permissions: state.auth.permissions,\r\n };\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n getCancellationReasons: checkAndGetCancellationReasons,\r\n getAccountInfo: getPersonalInfo,\r\n getTransactions,\r\n getPendingPaymentAmount,\r\n cancelAccount,\r\n getEstimatedFinalBillDate,\r\n getOutstandingDsFee,\r\n getBalanceToSettleWithoutCancelFee,\r\n getFacilityByAdfitNo,\r\n};\r\n\r\nexport default compose(\r\n withScrollableTopTabs(customerPageTopTabs, 0, ['adfitNo']),\r\n withRouteParams,\r\n connect(makeMapStateToProps, mapDispatchToProps)\r\n)(Cancellation);\r\n","// This file has some of the actions for customer details.\r\n//TODO The customer details file needs to be broken down in to multiple ducks file based on the backend resource and this is part of the migration. Like accounts, transactions etc.\r\nimport {\r\n postCancelAccount,\r\n checkAccountCancelStatus,\r\n} from 'services/accountDetails';\r\nimport { getPersonalInfo } from 'ducks/customerDetails';\r\nimport { poll } from 'utils/poll';\r\n\r\nexport const cancelAccount = (adfitNo, data) => async (dispatch, getState) => {\r\n const { accessToken } = getState().auth;\r\n\r\n const response = await postCancelAccount(adfitNo, data);\r\n\r\n if (!response.headers.has('location')) {\r\n throw new Error('');\r\n }\r\n\r\n const location = response.headers.get('location');\r\n\r\n const { errorMessage } = await poll(\r\n async () => {\r\n const statusResult = await checkAccountCancelStatus(\r\n location,\r\n accessToken\r\n );\r\n\r\n //Keep polling if the result is submitted by throwing error.\r\n if (\r\n !statusResult ||\r\n statusResult.currentState.toLowerCase() === 'submitted'\r\n ) {\r\n throw new Error('');\r\n }\r\n return statusResult;\r\n },\r\n 5000,\r\n 10\r\n );\r\n\r\n if (errorMessage) {\r\n throw new Error(errorMessage);\r\n }\r\n\r\n //check if we are still in the same page.\r\n const currentAdfitNo = getState().customerDetails.adfitNo;\r\n if (currentAdfitNo === adfitNo) {\r\n await dispatch(getPersonalInfo(adfitNo));\r\n }\r\n};\r\n","import React from 'react';\r\nimport { useParams, useRouteMatch } from 'react-router-dom';\r\nimport IFramePage from 'components/core/IFramePage';\r\nimport { oldSelfServiceLink } from 'config';\r\n\r\nconst subTab = {\r\n Payments: 'Scheduledx20Payments',\r\n Transactions: 'Transactions',\r\n Variations: 'Variations',\r\n Contract: 'Contract',\r\n PaymentMethod: 'Variations',\r\n Activities: 'Callx20History',\r\n};\r\n\r\nconst CustomerEmbedFrame = (props) => {\r\n const params = useParams();\r\n const { url } = useRouteMatch();\r\n const matchSplit = url.split('/');\r\n const tab = matchSplit.length === 4 ? matchSplit[3] : '';\r\n\r\n return (\r\n \r\n setShowAlert(false)}>\r\n {message?.title} \r\n {warnings.length > 0 ? (\r\n <>\r\n warning
\r\n \r\n {warnings.map((warning, index) => (\r\n {warning} \r\n ))}\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withStyles(styles)(SuspensionAlertMessage);\r\n","import React from 'react';\r\nimport { useParams } from 'react-router-dom';\r\nimport IFramePage from 'components/core/IFramePage';\r\nimport { oldSelfServiceLink } from 'config';\r\nimport SuspensionAlertMessage from './SuspensionAlertMessage';\r\n\r\nconst CustomerEmbedFrame = (props) => {\r\n const { adfitNo, subTab = '' } = useParams();\r\n let appendedQuery;\r\n switch (subTab.toLowerCase()) {\r\n case 'suspensions':\r\n appendedQuery = '&subTab=Suspensions';\r\n break;\r\n case 'oneoffpayments':\r\n appendedQuery = '&subTab=Onex2doffx20Payments';\r\n break;\r\n case 'regularpayments':\r\n appendedQuery = '&subTab=Regularx20Payments';\r\n break;\r\n default:\r\n appendedQuery = '';\r\n }\r\n\r\n const frameLink = `${oldSelfServiceLink}/Customer/Detail?debitsuccessId=${adfitNo}&activeTab=Scheduledx20Payments${appendedQuery}&HideMenu=true`;\r\n return (\r\n <>\r\n \r\n {renderNestedLayoutRoutes(RouteComponent)} \r\n \r\n );\r\n }\r\n return (\r\n \r\n \r\n {frameSrc ? (\r\n \r\n \r\n );\r\n });\r\n};\r\n\r\n// Replace the path like /Customers/:adfitNo with param { adfitNo: '1234' }\r\nexport const replacePathParams = (path, params) => {\r\n if (!params || !path) return path;\r\n return Object.keys(params).reduce(\r\n (accumulator, currentValue) =>\r\n accumulator.replace(`:${currentValue}`, params[currentValue]),\r\n path\r\n );\r\n};\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 8L4.43886 4.49618L1 1\",\n stroke: \"currentColor\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgIcArrowRight = function SvgIcArrowRight(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return React.createElement(\"svg\", _extends({\n width: 6,\n height: 9,\n viewBox: \"0 0 6 9\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return React.createElement(SvgIcArrowRight, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ic-arrow-right.af64a385.svg\";\nexport { ForwardRef as ReactComponent };","import { styled } from '@material-ui/core';\r\nimport { Link } from 'react-router-dom';\r\nimport { ReactComponent as ArrowRight } from 'assets/icons/ic-arrow-right.svg';\r\n\r\nexport const Container = styled('div')(({ theme }) => ({\r\n display: 'none',\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'flex',\r\n },\r\n '& a:last-child': {\r\n color: theme.palette.xpl.text.primary,\r\n },\r\n '& svg': {\r\n color: theme.palette.xpl.dm.text.secondary,\r\n },\r\n}));\r\n\r\nexport const LinkContainer = styled(Link)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: theme.palette.xpl.text.secondary,\r\n}));\r\n\r\nexport const ArrowRightIcon = styled(ArrowRight)(({ theme }) => ({\r\n margin: '0 20px',\r\n color: theme.palette.xpl.text.secondary,\r\n}));\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport PropTypes from 'prop-types';\r\nimport { useRouteMatch, useParams } from 'react-router-dom';\r\nimport { replacePathParams } from 'utils/routes';\r\n\r\nimport * as Styled from './BreadCrumbs.styled';\r\n\r\nconst BreadCrumbs = React.memo((props) => {\r\n const { routesList } = props;\r\n\r\n const { path } = useRouteMatch();\r\n\r\n const params = useParams();\r\n\r\n //If the breadcrumb name is not present then get it from the path.\r\n const getBreadCrumbNameFromPath = useCallback((givenPath, params) => {\r\n const splitPaths = replacePathParams(givenPath, params)\r\n .split('/')\r\n .filter((i) => i !== '');\r\n return splitPaths[splitPaths.length - 1];\r\n }, []);\r\n\r\n //Generate bread crumbs recursively based on the routes array.\r\n const breadCrumbEntries = useMemo(() => {\r\n const getBreadCrumbEntries = (routeEntries, currentPath) =>\r\n routeEntries\r\n .filter((entry) => new RegExp(entry.path, 'i').test(currentPath))\r\n .map((entry) => {\r\n if (entry.ignoreForBreadCrumb) {\r\n return null;\r\n }\r\n if (Array.isArray(entry.component)) {\r\n return getBreadCrumbEntries(entry.component, currentPath);\r\n }\r\n //Replace any params.\r\n const { breadCrumbName, path: routePath } = entry;\r\n return {\r\n name:\r\n breadCrumbName || getBreadCrumbNameFromPath(routePath, params),\r\n url: replacePathParams(routePath, params),\r\n };\r\n })\r\n .filter((val) => !!val);\r\n\r\n return flattenDeep(getBreadCrumbEntries(routesList, path)).reverse();\r\n }, [path, params, routesList, getBreadCrumbNameFromPath]);\r\n\r\n return (\r\n \r\n {breadCrumbEntries &&\r\n breadCrumbEntries.map(({ name, url }, index) => (\r\n \r\n {name}\r\n {index < breadCrumbEntries.length - 1 && \r\n ))}\r\n \r\n );\r\n});\r\n\r\nBreadCrumbs.displayName = 'BreadCrumbs';\r\n\r\nBreadCrumbs.propTypes = {\r\n routesList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n breadCrumbName: PropTypes.string,\r\n path: PropTypes.string.isRequired,\r\n component: PropTypes.oneOfType([\r\n PropTypes.object,\r\n PropTypes.array,\r\n PropTypes.func,\r\n ]),\r\n ignoreForBreadCrumb: PropTypes.bool,\r\n })\r\n ).isRequired,\r\n};\r\n\r\nexport default BreadCrumbs;\r\n","import { styled, Menu, MenuItem } from '@material-ui/core';\r\nimport { IconButton } from '@ds/react-components';\r\n\r\n//This acts as a placeholder for other elements to be placed below this.\r\nexport const TopBarStaticContainer = styled('div')({\r\n width: '100%',\r\n height: '64px',\r\n});\r\n\r\n//The height of the fixed container and the height of the static container must be same.\r\nexport const TopBarFixedContainer = styled('div')(({ theme, sidebar }) => ({\r\n width: sidebar ? `calc(100% - ${theme.dimension.sideBarWidth}px)` : '100%',\r\n padding: '12px 40px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n backgroundColor: theme.palette.common.white,\r\n transition: theme.transitions.create(['width', 'margin'], {\r\n easing: theme.transitions.easing.sharp,\r\n duration: sidebar\r\n ? theme.transitions.duration.enteringScreen\r\n : theme.transitions.duration.leavingScreen,\r\n }),\r\n boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.05)',\r\n position: 'fixed',\r\n top: 0,\r\n left: sidebar ? theme.dimension.sideBarWidth : 0,\r\n justifyContent: 'space-between',\r\n height: '64px',\r\n zIndex: theme.zIndex.drawer + 1,\r\n}));\r\n\r\nexport const FlexGrower = styled('div')({\r\n flexGrow: 1,\r\n});\r\n\r\nexport const DrawerMenuOpenButton = styled(IconButton)(({ sidebar }) => ({\r\n display: sidebar ? 'none' : 'block',\r\n marginLeft: '12px',\r\n marginRight: '36px',\r\n}));\r\n\r\nexport const ProfileMenuContainer = styled('div')(({ menuopen }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n cursor: 'pointer',\r\n paddingRight: menuopen ? '17px' : '0px', //Fix for disappearing scroll bar\r\n}));\r\n\r\nexport const ProfileName = styled('p')({\r\n fontSize: '14px',\r\n margin: '0 0 0 10px',\r\n});\r\n\r\nexport const ProfileMenu = styled(Menu)(({ theme }) => ({\r\n color: theme.palette.common.black,\r\n}));\r\n\r\nexport const ProfileMenuItem = styled(MenuItem)(({ theme, line }) => ({\r\n color: theme.palette.common.black,\r\n borderBottom: line ? `1px solid ${theme.palette.common.athensGray} ` : 'none',\r\n}));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport HamBurgerMenuIcon from '@material-ui/icons/Menu';\r\nimport layoutRoutes from 'components/core/AppRoutes/layoutRoutes';\r\nimport BreadCrumbs from './BreadCrumbs';\r\n\r\nimport * as Styled from './TopBar.styled';\r\n\r\nconst TopBar = (props) => {\r\n const { isSideBarOpen, handleSideBarOpen } = props;\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\nTopBar.propTypes = {\r\n isSideBarOpen: PropTypes.bool.isRequired,\r\n handleSideBarOpen: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TopBar;\r\n","import { styled } from '@material-ui/core/styles';\r\n\r\nexport const AppContainer = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n width: '100%',\r\n}));\r\n\r\nexport const VerticalContentContainer = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n}));\r\n\r\n// Not using 'main' tag here as it is not supported by IE11.\r\nexport const PageContainer = styled('div')({});\r\n","import React, { useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { setSideBarOpenPreference } from 'utils/userPreferences';\r\nimport profileMenuEntries from 'constants/profileMenuEntries';\r\nimport sideMenuEntries from 'constants/sideMenuEntries';\r\nimport SideMenu from './SideMenu';\r\nimport TopBar from './TopBar';\r\n\r\nimport * as Styled from './AppLayout.styled';\r\n\r\nconst AppLayout = (props) => {\r\n const {\r\n children,\r\n permissions,\r\n profileName,\r\n isSideBarOpen,\r\n featureFlags,\r\n updateIsSideBarOpen,\r\n } = props;\r\n\r\n const handleSideBarClose = useCallback(() => {\r\n setSideBarOpenPreference(false);\r\n updateIsSideBarOpen(false);\r\n }, [updateIsSideBarOpen]);\r\n\r\n const handleSideBarOpen = useCallback(() => {\r\n setSideBarOpenPreference(true);\r\n updateIsSideBarOpen(true);\r\n }, [updateIsSideBarOpen]);\r\n\r\n useEffect(() => {\r\n window.scroll(0, 0);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {children} \r\n \r\n \r\n );\r\n};\r\n\r\nAppLayout.propTypes = {\r\n permissions: PropTypes.arrayOf(PropTypes.string),\r\n profileName: PropTypes.string,\r\n children: PropTypes.oneOfType([\r\n PropTypes.node,\r\n PropTypes.arrayOf(PropTypes.node),\r\n ]),\r\n isSideBarOpen: PropTypes.bool.isRequired,\r\n updateIsSideBarOpen: PropTypes.func.isRequired,\r\n};\r\n\r\nAppLayout.defaultProps = {};\r\n\r\nexport default AppLayout;\r\n","import { connect } from 'react-redux';\r\nimport { updateIsSideBarOpen } from 'ducks/meta';\r\nimport AppLayout from './AppLayout';\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n permissions: state.auth.permissions,\r\n userId: state.auth.userId,\r\n profileName: state.auth.fullName,\r\n localisation: state.localisation,\r\n isSideBarOpen: state.meta.isSideBarOpen,\r\n featureFlags: state.featureFlags,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateIsSideBarOpen,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AppLayout);\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Redirect, Switch, useLocation } from 'react-router-dom';\r\nimport { getUserTcPreference, setRequestedPath } from 'utils/userPreferences';\r\nimport AppLayout from 'components/core/AppLayout';\r\nimport TermsAndConditions from 'components/pages/TermsAndConditions';\r\n\r\nconst PrivateRoutesWrapper = (props) => {\r\n const { isAuthenticated, hasAcceptedTC, userId, checkLogin, children } =\r\n props;\r\n const { pathname, search = '' } = useLocation();\r\n const [hasCheckedLogin, setHasCheckedLogin] = useState(false);\r\n\r\n useEffect(() => {\r\n (async function () {\r\n setRequestedPath(pathname, search);\r\n // Wait till the action is completed. Helps prevent calling login function in each reload.\r\n await checkLogin();\r\n setHasCheckedLogin(true);\r\n })();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [pathname]);\r\n\r\n if (!hasCheckedLogin) {\r\n return null;\r\n }\r\n\r\n if (!isAuthenticated) {\r\n return \r\n \r\n );\r\n return {children} ;\r\n};\r\n\r\nPrivateRoutesWrapper.propTypes = {\r\n isAuthenticated: PropTypes.bool,\r\n hasAcceptedTC: PropTypes.bool,\r\n userId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n checkLogin: PropTypes.func.isRequired,\r\n children: PropTypes.oneOfType([\r\n PropTypes.node,\r\n PropTypes.arrayOf(PropTypes.node),\r\n ]),\r\n};\r\n\r\nexport default PrivateRoutesWrapper;\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Switch, Route } from 'react-router-dom';\r\nimport Login from 'components/pages/Login';\r\nimport LoginCallback from 'components/pages/LoginCallback';\r\nimport Error from 'components/pages/Error';\r\nimport Logout from 'components/pages/Logout';\r\nimport PrivateRoutesWrapper from 'components/core/PrivateRoutesWrapper';\r\nimport { renderNestedLayoutRoutes } from 'utils/routes';\r\nimport layoutRoutes from './layoutRoutes';\r\n\r\nconst AppRoutes = (props) => {\r\n const {\r\n isAuthenticated,\r\n hasAcceptedTC,\r\n userId,\r\n checkLogin,\r\n getFeatureFlags,\r\n } = props;\r\n\r\n useEffect(() => {\r\n (async () => {\r\n try {\r\n await Promise.all([getFeatureFlags()]);\r\n } catch (e) {\r\n console.warn(e);\r\n }\r\n })();\r\n }, [getFeatureFlags]);\r\n\r\n return (\r\n \r\n {/*Public routes*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Private routes with layout*/}\r\n \r\n \r\n {renderNestedLayoutRoutes(layoutRoutes)}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nAppRoutes.propTypes = {\r\n isAuthenticated: PropTypes.bool,\r\n hasAcceptedTC: PropTypes.bool,\r\n userId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n checkLogin: PropTypes.func.isRequired,\r\n};\r\n\r\nAppRoutes.defaultProps = {\r\n isAuthenticated: false,\r\n hasAcceptedTC: true,\r\n userId: null,\r\n};\r\n\r\nexport default AppRoutes;\r\n","import { connect } from 'react-redux';\r\nimport { checkLogin } from 'ducks/auth';\r\nimport { getFeatureFlags } from 'ducks/featureFlags';\r\nimport AppRoutes from './AppRoutes';\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n userId: state.auth.userId,\r\n isAuthenticated: state.auth.isAuthenticated,\r\n hasAcceptedTC: state.auth.hasAcceptedTC,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n checkLogin: checkLogin,\r\n getFeatureFlags,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AppRoutes);\r\n","import { styled } from '@material-ui/core';\r\n\r\nexport const AlertContainer = styled('div')({\r\n padding: '16px 24px',\r\n});\r\n\r\nexport const AlertTitle = styled('div')(({ theme }) => ({\r\n color: theme.palette.common.black,\r\n fontSize: '16px',\r\n fontWeight: 'bold',\r\n marginBottom: '16px',\r\n}));\r\n\r\nexport const AlertContent = styled('div')(({ theme }) => ({\r\n color: theme.palette.common.lightText,\r\n marginBottom: '16px',\r\n}));\r\n\r\nexport const AlertFooter = styled('div')({\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport { Link } from 'react-router-dom';\r\nimport { TextButton } from '@ds/react-components';\r\n\r\nimport * as Styled from './HttpAlertDialog.styled';\r\n\r\nconst HttpAlertDialog = (props) => {\r\n const { httpError, localisation, resetHttpError } = props;\r\n\r\n const getAjaxErrorMessage = () => {\r\n const prompt = localisation.prompts;\r\n if (!httpError) return prompt.ajaxError_Generic;\r\n const { status } = httpError;\r\n return prompt['ajaxError_' + status] || prompt.ajaxError_Generic;\r\n };\r\n\r\n const alert = {\r\n showAlert: httpError != null,\r\n title: localisation.prompts.ajaxErrorTitle,\r\n text: getAjaxErrorMessage(),\r\n redirectUrl: '/LogOut',\r\n buttonText: 'Sign Out',\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {alert.title}\r\n \r\n \r\n {alert.text}\r\n \r\n \r\n \r\n {alert.buttonText}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nHttpAlertDialog.propTypes = {\r\n httpError: PropTypes.shape({\r\n status: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\r\n .isRequired,\r\n }),\r\n resetHttpError: PropTypes.func.isRequired,\r\n localisation: PropTypes.shape({\r\n prompts: PropTypes.object.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nHttpAlertDialog.defaultProps = {\r\n httpError: null,\r\n};\r\n\r\nexport default HttpAlertDialog;\r\n","import { connect } from 'react-redux';\r\nimport { resetHttpError } from 'ducks/meta';\r\nimport HttpAlertDialog from './HttpAlertDialog';\r\n\r\nconst mapStateToProps = (state) => ({\r\n httpError: state.meta.httpError,\r\n localisation: state.localisation,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n resetHttpError,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(HttpAlertDialog);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport BounceLoader from 'react-spinners/BounceLoader';\r\n\r\nconst styles = (theme) => ({\r\n spinner: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'fixed',\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n lef: 0,\r\n zIndex: 2500,\r\n cursor: 'pointer',\r\n backgroundColor: 'rgba(0,0,0,0.5)',\r\n },\r\n});\r\n\r\nconst AppLoading = (props) => {\r\n const { classes, appLoading } = props;\r\n return appLoading ? (\r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nAppLoading.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n show: PropTypes.bool,\r\n};\r\n\r\nexport default withStyles(styles, { withTheme: true })(AppLoading);\r\n","import { connect } from 'react-redux';\r\nimport AppLoading from './AppLoading';\r\n\r\nconst mapStateToProps = (state) => ({\r\n appLoading: state.meta.appLoading,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(AppLoading);\r\n","import { createReducer } from 'utils/reduxCreators';\r\nimport * as config from 'config';\r\nimport { prompts, locales } from 'localisation/root';\r\n\r\nexport const LOCALISATIONS_LOADED = 'localisation/LOCALISATIONS_LOADED';\r\n\r\nconst initialState = {\r\n prompts: prompts,\r\n locales: locales,\r\n};\r\n\r\nexport default createReducer(initialState, {\r\n [LOCALISATIONS_LOADED]: (state, { payload }) => {\r\n return {\r\n ...state,\r\n prompts: { ...prompts, ...payload.prompts },\r\n locales: { ...locales, ...payload.locales },\r\n };\r\n },\r\n});\r\n\r\nexport const loadLocalisationConfigs = () => async (dispatch, getState) => {\r\n const conf = config;\r\n //load region specific localisation config based on locale, overriding root localisation\r\n const localisationsFile = await import(\r\n `../localisation/${conf.locale}/index.js`\r\n );\r\n dispatch({ type: LOCALISATIONS_LOADED, payload: localisationsFile });\r\n};\r\n","import React, { useEffect } from 'react';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport AppRoutes from 'components/core/AppRoutes';\r\nimport { basePath } from 'config';\r\nimport HttpAlertDialog from 'components/core/HttpAlertDialog';\r\nimport AppLoading from 'components/core/AppLoading';\r\nimport { loadLocalisationConfigs } from 'ducks/localisation';\r\nimport { MuiPickersUtilsProvider } from '@ds/react-components';\r\nimport moment from 'moment';\r\nimport MomentUtils from '@date-io/moment';\r\n\r\nmoment.locale('en');\r\n\r\nconst App = (props) => {\r\n const { loadLocalisationConfigs } = props;\r\n useEffect(() => {\r\n loadLocalisationConfigs();\r\n }, [loadLocalisationConfigs]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default connect(null, {\r\n loadLocalisationConfigs,\r\n})(App);\r\n","import thunk from 'redux-thunk';\r\nimport apiFailureMiddleware from './apiFailure';\r\n\r\n// apiFailureMiddleware must come before the thunk.\r\n\r\nconst middlewares = [apiFailureMiddleware, thunk];\r\n\r\nexport default middlewares;\r\n","import ky from 'ky';\r\nimport { updateHttpError } from 'ducks/meta';\r\n\r\nconst apiFailureMiddleware = (store) => (next) => (action) => {\r\n // If not an async action then no need to check for api errors.\r\n if (typeof action !== 'function') {\r\n return next(action);\r\n }\r\n const result = next(action);\r\n // Async function returning promise will throw the error.\r\n if (result instanceof Promise) {\r\n return result.catch((err) => {\r\n if (err instanceof ky.HTTPError) {\r\n const { response } = err;\r\n store.dispatch(updateHttpError(response.clone()));\r\n }\r\n throw err;\r\n });\r\n }\r\n return result;\r\n};\r\n\r\nexport default apiFailureMiddleware;\r\n","import { combineReducers } from 'redux';\r\nimport metaReducer from './meta';\r\nimport authReducer from './auth';\r\nimport localisationReducer from './localisation';\r\nimport customerDetailsReducer from './customerDetails';\r\nimport transactionsReducer from './transactions';\r\nimport accountSearchReducer from './accountSearchResult';\r\nimport cancellationReasonReducers from './cancellationReasons';\r\nimport accountMetaReducer from './accountMeta';\r\nimport facilitiesReducer from './facilities';\r\nimport guarantorReducer from './guarantorDetails';\r\nimport featureFlagsReducer from './featureFlags';\r\nimport suspensionRulesReducer from './suspensionRules';\r\nimport suspensionReducer from './suspensions';\r\nimport ssoGroupsReducer from './ssoGroupManagement';\r\n\r\n// Follows the pattern mentioned here - https://github.com/erikras/ducks-modular-redux\r\n\r\nconst getRootReducer = () =>\r\n combineReducers({\r\n meta: metaReducer,\r\n auth: authReducer,\r\n localisation: localisationReducer,\r\n customerDetails: customerDetailsReducer,\r\n transactions: transactionsReducer,\r\n accountSearchResult: accountSearchReducer,\r\n cancellationReasons: cancellationReasonReducers,\r\n accountMeta: accountMetaReducer,\r\n facilities: facilitiesReducer,\r\n guarantorDetails: guarantorReducer,\r\n featureFlags: featureFlagsReducer,\r\n suspensions: suspensionReducer,\r\n suspensionRules: suspensionRulesReducer,\r\n ssoGroups: ssoGroupsReducer,\r\n });\r\n\r\nexport default getRootReducer;\r\n","import { applyMiddleware, compose, createStore } from 'redux';\r\nimport middlewares from 'middlewares';\r\nimport getRootReducer from 'ducks';\r\nimport { initialState as metaInitialState } from 'ducks/meta';\r\nimport { getSideBarOpenPreference } from './utils/userPreferences';\r\n\r\nconst getSideBarInitialState = () => {\r\n try {\r\n const closeSideBarAtWidth = 600; //sm\r\n const isNotMobile =\r\n window.innerWidth > closeSideBarAtWidth &&\r\n window.outerWidth > closeSideBarAtWidth;\r\n return !!(isNotMobile || getSideBarOpenPreference());\r\n } catch (e) {\r\n return false;\r\n }\r\n};\r\n\r\nconst getInitialState = () => {\r\n return {\r\n meta: {\r\n ...metaInitialState,\r\n isSideBarOpen: getSideBarInitialState(),\r\n },\r\n };\r\n};\r\n\r\nexport default function configureStore() {\r\n // In development, use the browser's Redux dev tools extension if installed\r\n const enhancers = [];\r\n const isDevelopment = process.env.NODE_ENV === 'development';\r\n if (\r\n isDevelopment &&\r\n typeof window !== 'undefined' &&\r\n window.__REDUX_DEVTOOLS_EXTENSION__\r\n ) {\r\n enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());\r\n }\r\n return createStore(\r\n getRootReducer(),\r\n getInitialState(),\r\n compose(applyMiddleware(...middlewares), ...enhancers)\r\n );\r\n}\r\n","import 'react-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Provider } from 'react-redux';\r\nimport { MuiThemeProvider } from '@material-ui/core/styles';\r\nimport { defaultTheme } from '@ds/react-components';\r\nimport GlobalStyles from 'styles/GlobalStyles';\r\nimport App from './App.js';\r\nimport configureStore from './configureStore';\r\n\r\nconst store = configureStore();\r\n\r\nReactDOM.render(\r\n \r\n \r\n \r\n ,\r\n document.getElementById('root')\r\n);\r\n"],"sourceRoot":""}