*/}\r\n \r\n \r\n 
\r\n \r\n {isArrowIconClicked && (\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(AccordianItemwithImageIcon);\r\n","import React from 'react';\r\n\r\nimport './accordianSection.scss';\r\nimport { Text, Placeholder, Image, Link } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nconst AccordianSection = (props) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {props.fields.ShowViewAllLink.value && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(AccordianSection);\r\n","import React, { useRef, useEffect, useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport './googleWallet.scss';\r\nimport './accordion.scss';\r\n\r\nconst Accordion = ({ fields, t }) => {\r\n const cardDropdownRef = useRef(null);\r\n const [isArrowIconClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, false);\r\n const onClickSelect = () => openDropdown(!isArrowIconClicked);\r\n const iconText = isArrowIconClicked ? t('expandA11y') : t('collapseA11y');\r\n const [showAccordianWrapper, setshowAccordianWrapper] = useState(false);\r\n\r\n useEffect(() => {\r\n if (fields?.IsAccordianWrapper.value) {\r\n setshowAccordianWrapper(true);\r\n }\r\n }, [fields]);\r\n\r\n useEffect(() => {\r\n if (fields?.accordionOpenState.value) {\r\n openDropdown(true);\r\n }\r\n if (window.location.hash === `#${fields?.ID?.value}`) {\r\n openDropdown(true);\r\n }\r\n }, []);\r\n let sectionWrapperClass = showAccordianWrapper ? 'accordion-staticpage-section-wrapper' : '';\r\n let sectionClass = fields?.CssClass?.value ? fields?.CssClass?.value : 'accordion-section';\r\n let sectionId = fields?.ID && fields?.ID?.value ? fields?.ID?.value : '';\r\n return (\r\n \r\n
\r\n \r\n {props.fields.Backtopagelink.value.href && (\r\n \r\n )}\r\n {props.fields.Title.value && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {props.fields.SubTitle.value && (\r\n \r\n \r\n
\r\n )}\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(Accordion);\r\n","import React from 'react';\r\nimport './autoloadGridItem.scss';\r\n\r\nconst AutoloadGridItem = ({ leftLabel, leftAmount, rightLabel, rightAmount }) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {isArrowIconClicked && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default AutoloadGridItem;\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, \"Icon/ExternalLink\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n stroke: \"none\",\n strokeWidth: 1\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(-647.000000, -70.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(645.000000, 68.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.0042826,13.0012043 C12.0042826,13.2766816 11.7809642,13.5 11.505487,13.5 L2.99879567,13.5 C2.72331843,13.5 2.5,13.2766816 2.5,13.0012043 L2.5,4.52310772 C2.5,4.43101877 2.52488428,4.34474185 2.56829543,4.27063439 C2.65467438,4.12213496 2.81514417,4.02288232 2.99879567,4.02288232 L6.00300755,4.02288232 C6.27848479,4.02288232 6.50180322,4.24620075 6.50180322,4.52167799 C6.50180322,4.79715523 6.27848479,5.02047366 6.00300755,5.02047366 L3.5,5.02 L3.5,12.502 L11.003,12.502 L11.0038318,10.0098601 C11.0038318,9.7335932 11.2277904,9.50963466 11.5040572,9.50963466 C11.7803241,9.50963466 12.0042826,9.7335932 12.0042826,10.0098601 L12.0042826,13.0012043 L12.0042826,13.0012043 Z M12.900295,2.5 C13.0506704,2.51616208 13.2009332,2.56565785 13.3175424,2.68193254 C13.4341504,2.79820848 13.5005589,2.9313189 13.4999965,3.09798735 L13.4999965,3.09798735 L13.4849225,7.56470179 C13.4843601,7.73137024 13.4170516,7.86492934 13.2996562,7.98199049 C13.1822595,8.09905036 13.0483176,8.16616643 12.8811714,8.16672728 C12.5635374,8.18445974 12.2970035,7.91868758 12.2981284,7.58535069 L12.2981284,7.58535069 L12.3084776,4.51865122 L8.49386833,8.32235769 C8.25907623,8.55647871 7.89135463,8.55771258 7.65813696,8.3251624 C7.4249202,8.09261131 7.42615761,7.72594072 7.66094971,7.4918197 L7.66094971,7.4918197 L11.4923299,3.6713903 L8.41684011,3.68170997 C8.09920612,3.69944244 7.83267216,3.43367028 7.83379708,3.10033338 C7.81815113,2.78371941 8.08648496,2.51615253 8.42077733,2.51503083 L8.42077733,2.51503083 Z\"\n}))));\n\nvar SvgExternalLink = function SvgExternalLink(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 12 12\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgExternalLink, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ExternalLink.05ecb68d.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(\"title\", null, \"Icon/Arrow/Left\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Icon/Arrow/Left\",\n stroke: \"none\",\n strokeWidth: 1\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.33189655,17.3594976 C5.09482759,17.1240188 5,16.8414443 5,16.5117739 C5,16.1821036 5.14224138,15.899529 5.33189655,15.6640502 L11.6853448,9.35321821 C12.1594828,8.8822606 12.9181034,8.8822606 13.3448276,9.35321821 C13.8189655,9.82417582 13.8189655,10.577708 13.3448276,11.0015699 L8.98275862,15.3343799 L25.8146552,15.3343799 C26.4784483,15.3343799 27,15.8524333 27,16.5117739 C27,17.1711146 26.4784483,17.689168 25.8146552,17.689168 L9.03017241,17.689168 L13.3922414,22.021978 C13.8663793,22.4929356 13.8663793,23.2464678 13.3922414,23.6703297 C13.1551724,23.9058085 12.8706897,24 12.5387931,24 C12.2068966,24 11.9224138,23.9058085 11.6853448,23.6703297 L5.33189655,17.3594976 Z\"\n}));\n\nvar SvgLeftArrow = function SvgLeftArrow(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 32 32\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgLeftArrow, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/LeftArrow.646ff744.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(\"title\", null, \"Icon/Arrow/Right\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Icon/Arrow/Right\",\n stroke: \"none\",\n strokeWidth: 1\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.33189655,17.3594976 C5.09482759,17.1240188 5,16.8414443 5,16.5117739 C5,16.1821036 5.14224138,15.899529 5.33189655,15.6640502 L11.6853448,9.35321821 C12.1594828,8.8822606 12.9181034,8.8822606 13.3448276,9.35321821 C13.8189655,9.82417582 13.8189655,10.577708 13.3448276,11.0015699 L8.98275862,15.3343799 L25.8146552,15.3343799 C26.4784483,15.3343799 27,15.8524333 27,16.5117739 C27,17.1711146 26.4784483,17.689168 25.8146552,17.689168 L9.03017241,17.689168 L13.3922414,22.021978 C13.8663793,22.4929356 13.8663793,23.2464678 13.3922414,23.6703297 C13.1551724,23.9058085 12.8706897,24 12.5387931,24 C12.2068966,24 11.9224138,23.9058085 11.6853448,23.6703297 L5.33189655,17.3594976 Z\",\n transform: \"translate(16.000000, 16.500000) scale(-1, 1) translate(-16.000000, -16.500000) \"\n}));\n\nvar SvgRight = function SvgRight(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 32 32\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRight, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/Right.218b379f.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(\"title\", null, \"Icon/Chevron/Right End\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Icon/Chevron/Right-End\",\n stroke: \"none\",\n strokeWidth: 1\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.7125882,16.6930554 L10.6778808,22.7128971 C10.2931768,23.095701 9.67064707,23.095701 9.28711802,22.7128971 C8.90429399,22.3300933 8.90429399,21.7091214 9.28711802,21.326552 L14.626914,15.9998828 L9.28805805,10.6741513 C8.90429399,10.2913475 8.90429399,9.6706099 9.28805805,9.2878061 C9.6715871,8.90406463 10.2941168,8.90406463 10.6778808,9.2878061 L16.7125882,15.3076479 C16.9045877,15.4989326 17,15.7490561 17,15.9998828 C17,16.2507095 16.9045877,16.5027084 16.7125882,16.6930554 Z\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n x: 21,\n y: 8,\n width: 2,\n height: 16,\n rx: 1\n}));\n\nvar SvgRightEnd = function SvgRightEnd(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 32 32\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRightEnd, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/RightEnd.14c03a71.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(\"title\", null, \"Icon/Chevron/Left End\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Icon/Chevron/Left-End\",\n stroke: \"none\",\n strokeWidth: 1\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M22.7125882,16.6930554 L16.6778808,22.7128971 C16.2931768,23.095701 15.6706471,23.095701 15.287118,22.7128971 C14.904294,22.3300933 14.904294,21.7091214 15.287118,21.326552 L20.626914,15.9998828 L15.288058,10.6741513 C14.904294,10.2913475 14.904294,9.6706099 15.288058,9.2878061 C15.6715871,8.90406463 16.2941168,8.90406463 16.6778808,9.2878061 L22.7125882,15.3076479 C22.9045877,15.4989326 23,15.7490561 23,15.9998828 C23,16.2507095 22.9045877,16.5027084 22.7125882,16.6930554 Z\",\n transform: \"translate(19.000000, 16.000000) scale(-1, 1) translate(-19.000000, -16.000000) \"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n x: 9,\n y: 8,\n width: 2,\n height: 16,\n rx: 1\n}));\n\nvar SvgLeftEnd = function SvgLeftEnd(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 32 32\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgLeftEnd, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/LeftEnd.3a28b848.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\n\r\nimport { ReactComponent as ExternalLinkIcon } from '../../assets/images/ExternalLink.svg';\r\nimport { ReactComponent as IconLeft } from '../../assets/images/LeftArrow.svg';\r\nimport { ReactComponent as IconRight } from '../../assets/images/Right.svg';\r\nimport { ReactComponent as IconRightEnd } from '../../assets/images/RightEnd.svg';\r\nimport { ReactComponent as IconLeftEnd } from '../../assets/images/LeftEnd.svg';\r\n\r\nconst icons = {\r\n externalLinkIcon: ExternalLinkIcon,\r\n iconLeft: IconLeft,\r\n iconRight: IconRight,\r\n iconRightEnd: IconRightEnd,\r\n iconLeftEnd: IconLeftEnd,\r\n};\r\n\r\nconst iconSizes = {\r\n xs: '12px',\r\n sm: '16px',\r\n md: '24px',\r\n lg: '32px',\r\n};\r\n\r\nconst iconColors = {\r\n white: '#ffffff',\r\n black: '#191919',\r\n disabled: '#6e6e6e',\r\n};\r\n\r\nconst Icon = ({ iconName = '', size = 'sm', color = 'black', ariaLabel = '' }) => {\r\n const Component = icons[iconName];\r\n const iconSize = iconSizes[size];\r\n const iconColor = iconColors[color];\r\n\r\n return (\r\n !!Component && (\r\n \r\n
\r\n {leftLabel}
\r\n {leftAmount}
\r\n \r\n
\r\n {rightLabel}
\r\n {rightAmount}
\r\n \r\n {children}\r\n
\r\n);\r\n\r\nexport default ButtonBlock;\r\n","import React from 'react';\r\n\r\nimport './checkboxComponent.scss';\r\nimport { Field } from 'formik';\r\n\r\nexport default function Checkbox({\r\n children,\r\n onChange,\r\n name,\r\n checkboxA11y,\r\n value,\r\n checked,\r\n regularFont,\r\n className='',\r\n}) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n","export const E_PURSE_PRD_FAMILY = 'Epurse';\r\nexport const CAPP_PRD_FAMILY = 'CAPP';\r\nexport const MDP_PRD_FAMILY = 'MDP';\r\nexport const SINGLE_FARE_CRD_CART_ITEM_NAME = 'SINGLE FARECARD';\r\nexport const NEWMEDIA_VISIBLE_ID = 'NEWMEDIA';\r\nexport const PRICE_BUTTONS = ['10.00', '25.00', '50.00'];\r\nexport const MAX_NO_OF_TRANSIT_PASSES = 6;\r\nexport const SINGLE_FARE_CRD_CART_FAMILY_NAME = 'Fare Media';\r\nexport const NO_OF_BASIC_PERIOD = 12;\r\n","import { SitecoreContextFactory } from '@sitecore-jss/sitecore-jss-react';\r\n\r\n/*\r\n The SitecoreContextFactory stores the current Sitecore context for the app.\r\n For example, whether the page is currently being edited, or the current language.\r\n Note that the export makes this essentially a singleton, so we can store state in it.\r\n\r\n The Sitecore context is generally updated on route change (/src/index.js).\r\n The `withSitecoreContext()` higher order component from `sitecore-jss-react`\r\n can be used to access the context from within a component.\r\n*/\r\nexport default new SitecoreContextFactory();\r\n","export default {\r\n en: 'en',\r\n shortFr: 'fr',\r\n longFr: 'fr-CA',\r\n lcidEn: 1033,\r\n lcidFr: 1036,\r\n atsEn: 'EN_CA',\r\n atsFr: 'FR_CA',\r\n};\r\n","export default {\r\n accessToken: 'cws_access_token',\r\n accessTokenValidity: 'cws_access_token_validity',\r\n accessTokenLifetime: 'cws_access_token_lifetime',\r\n dismissedWelcomePopup: 'cws_dismissed_welcome_popup',\r\n guestToken: 'cws_guest_token',\r\n reCaptchaKey: 'cws_recaptcha_key',\r\n refreshToken: 'cws_refresh_token',\r\n rememberedUsername: 'cws_remembered_username',\r\n gtmContainerId: 'cws_gtm_container_id',\r\n uniqueSessionId: 'unique_session_id',\r\n stsAccessToken: 'sts_access_token',\r\n redux: 'redux',\r\n unpaidFaresData: 'unpaidFaresData',\r\n unpaidFaresReposneData: 'unpaidFaresReposneData',\r\n unpaidFaresIndex: 'unpaidFaresIndex',\r\n paymentsToVerifyData: 'paymentsToVerifyData',\r\n isRiskyUser: 'isRiskyUser',\r\n isRiskyUserDismissed: 'isRiskyUserDismissed',\r\n};\r\n","export default {\r\n GO_TRANSIT: 'GOT',\r\n TTC: 'TTC',\r\n UP_EXPRESS: 'UPE',\r\n};\r\n","import moment from 'moment';\r\n\r\nimport 'moment-timezone';\r\nimport 'moment/locale/fr-ca';\r\nimport SitecoreContextFactory from '../lib/SitecoreContextFactory';\r\nimport langConstants from '../constants/lang';\r\nimport localStorageKeys from '../constants/localStorageKeys';\r\nimport apiconfig from '../temp/config';\r\nimport TA from '../constants/transitAgency.constants';\r\nimport TA_TYPES from '../constants/transactionType.constants';\r\nimport api from './api';\r\n\r\nexport const toggleClass = (value, cssClass) => (value ? cssClass : '');\r\nexport const localstorageService = () =>\r\n typeof localStorage !== 'undefined'\r\n ? localStorage\r\n : {\r\n clear: () => undefined,\r\n getItem: () => undefined,\r\n key: () => null,\r\n removeItem: () => undefined,\r\n setItem: () => undefined,\r\n };\r\nexport const sessionstorageService = () =>\r\n typeof sessionStorage !== 'undefined'\r\n ? sessionStorage\r\n : {\r\n clear: () => undefined,\r\n getItem: () => undefined,\r\n key: () => undefined,\r\n removeItem: () => undefined,\r\n setItem: () => undefined,\r\n };\r\nexport const windowService = () => (typeof window !== 'undefined' ? window : {});\r\nexport const documentService = () => (typeof document !== 'undefined' ? document : {});\r\n\r\nexport const getCookie = (name) => {\r\n let cookie = documentService && documentService().cookie;\r\n if (cookie === undefined) return undefined;\r\n\r\n /* eslint no-useless-escape: \"off\" */\r\n let matches = documentService().cookie.match(\r\n new RegExp(`(?:^|; )${name.replace(/([\\.$?*|{}\\(\\)\\[\\]\\\\\\/\\+^])/g, '\\\\$1')}=([^;]*)`)\r\n );\r\n return matches ? decodeURIComponent(matches[1]) : undefined;\r\n};\r\n\r\nexport const isFrench = () => {\r\n const location = windowService().location;\r\n const langCookie = getCookie('presto-ui#lang');\r\n return langCookie\r\n ? langCookie === langConstants.longFr\r\n : location &&\r\n location.pathname &&\r\n location.pathname.indexOf(`/${langConstants.longFr}/`) !== -1;\r\n};\r\n\r\nexport const getErrorTranslation = (errorCode, callback = null) => {\r\n let language = 'en';\r\n if (isFrench()) {\r\n language = 'fr-CA';\r\n }\r\n let data = {\r\n errorcode: errorCode,\r\n language,\r\n };\r\n api\r\n .getErrorTranslation(data)\r\n .then((response) => {\r\n if (callback) callback(response);\r\n return response;\r\n })\r\n .catch(() => {\r\n // console.log('error');\r\n });\r\n};\r\n\r\nexport const getShortLanguageCode = () => (isFrench() ? langConstants.shortFr : langConstants.en);\r\n\r\nexport const getLongLanguageCode = () => (isFrench() ? langConstants.longFr : langConstants.en);\r\n\r\nexport const getLanguageLcid = () => (isFrench() ? langConstants.lcidFr : langConstants.lcidEn);\r\n\r\nexport const getLanguageAtsId = () => (isFrench() ? langConstants.atsFr : langConstants.atsEn);\r\n\r\nexport const redirectToUrl = (url, includeLanguage = true, isInternalLink = true) => {\r\n setTimeout(() => {\r\n if (isInternalLink) {\r\n window.location.assign(includeLanguage ? `/${getLongLanguageCode()}${url}` : url);\r\n } else {\r\n window.location.href = url;\r\n }\r\n }, 1000);\r\n};\r\n\r\nexport const redirectToUrlinCaseofFailure = (\r\n url,\r\n includeLanguage = true,\r\n isInternalLink = true\r\n) => {\r\n localstorageService().removeItem('redux');\r\n localstorageService().removeItem(localStorageKeys.isRiskyUser);\r\n localstorageService().removeItem(localStorageKeys.isRiskyUserDismissed);\r\n if (isInternalLink) {\r\n window.location.assign(includeLanguage ? `/${getLongLanguageCode()}${url}` : url);\r\n } else {\r\n window.location.href = url;\r\n }\r\n};\r\n\r\nexport const redirectToUrlInNewWindow = (url) => window.open(url);\r\n\r\nexport const getParentUrl = (url) => {\r\n let urlSlashIndex = url.lastIndexOf('/');\r\n let urlParentLink = url.substring(0, urlSlashIndex + 1);\r\n return urlParentLink;\r\n};\r\n\r\nexport const setLanguage = ({ sitecoreRoute }) => {\r\n let langCode = isFrench() ? langConstants.en : langConstants.longFr;\r\n if (sitecoreRoute === undefined) sitecoreRoute = '';\r\n const url = `/${langCode}/${sitecoreRoute}`;\r\n window.location.href = url;\r\n\r\n let context = SitecoreContextFactory.getSitecoreContext();\r\n SitecoreContextFactory.setSitecoreContext({\r\n ...context,\r\n language: langCode,\r\n refresh: true,\r\n });\r\n};\r\n\r\nexport const isJsonString = (str) => {\r\n try {\r\n JSON.parse(str);\r\n } catch (e) {\r\n return false;\r\n }\r\n return true;\r\n};\r\nexport const formatDateWithComma = (date) =>\r\n date && moment(date).locale(getLongLanguageCode()).utcOffset(0).format('MMMM D, YYYY');\r\n\r\nexport const formatDateWithoutUTC = (date) =>\r\n date && moment(date).locale(getLongLanguageCode()).format('MMMM D, YYYY');\r\n\r\nexport const formatDate = (date, format = 'D MMM YYYY') =>\r\n date && moment(date).locale(getLongLanguageCode()).utcOffset(0).format(format);\r\n\r\nexport const formattoLocalDate = (date, format = 'D MMM YYYY') => {\r\n let diff = new Date().getTimezoneOffset();\r\n let offset = diff / -60;\r\n return date && moment(date).locale(getLongLanguageCode()).utc(offset).format(format);\r\n};\r\n\r\nexport const checkTokenExpiry = (loggedInTime, loggedOutTime) => {\r\n let diffBwNowAndLogin = moment.utc().diff(loggedInTime, 'minutes');\r\n let diffBwNowAndLogout = moment.utc().diff(loggedOutTime, 'minutes');\r\n let isAfter1Hr = diffBwNowAndLogin >= 60 && diffBwNowAndLogout >= 0;\r\n\r\n return { isAfter1Hr };\r\n};\r\n\r\n{\r\n /*export const check1hrTillLogin = (loggedInTime) => {\r\n //let diffbwlogoutandlogin = moment(logOutTime).utc().diff(moment(loggedInTime), 'minutes');\r\n let diffBwNowAndLogin = moment.utc().diff(loggedInTime, 'minutes');\r\n //console.log(\"diffbwlogoutandlogin: \" + diffbwlogoutandlogin + \" minutes\");\r\n\r\n // isAfter1Hr2 becomes true if the diff b/w login time and current time is more than 60 minutes.\r\n //let isAfter1Hr = diffBwNowAndLogin > 1 ? true : false;\r\n //console.log(\"isAfter1Hr2: \" + isAfter1Hr2 + \" \" + diffBwNowAndLogin);\r\n\r\n // isAfter1Hr becomes true if the diff b/w login and logout time is more than 60 minutes.\r\n //let isAfter1Hr = diffbwlogoutandlogin > 60 ? true : false;\r\n //let diffBwNowAndLogout = moment.utc().diff(logOutTime, 'seconds');\r\n let isAfter1Hr = diffBwNowAndLogin > 60 ? true : false;\r\n //console.log(\"timeFromLogout: \" + timeFromLogout + ' seconds');\r\n\r\n // isBetween1minBeforeLogout becomes true if the current time is less than 1 minute from logout time.\r\n //let isBetween1minBeforeLogout = (timeFromLogout > -60 && timeFromLogout < 0) ? true : false;\r\n\r\n return { isAfter1Hr };\r\n};*/\r\n}\r\n\r\nexport const check15MinTillLogin = (contactlessLoginTime, contactlessLogoutTime) => {\r\n let diffbwlogoutandlogin = moment.utc().diff(moment(contactlessLoginTime), 'minutes');\r\n // isAfter15Min becomes true if the diff b/w login and current time is more than 15 minutes.\r\n let isAfter15Min = diffbwlogoutandlogin > 15 ? true : false;\r\n return { isAfter15Min, contactlessLoginTime, contactlessLogoutTime };\r\n};\r\nexport const formatDateTx = (date) =>\r\n date && moment(date).locale(getLongLanguageCode()).utcOffset(0).format('MM/DD/YYYY');\r\n\r\nexport const formatMonthYear = (date) =>\r\n moment(date).locale(getLongLanguageCode()).utcOffset(0).format('MMM YYYY');\r\n\r\nexport const formatUtcDate = (date, utcOffset = 0) =>\r\n moment\r\n .utc(date, 'YYYY-MM-DDTHH:mm:ss')\r\n .utcOffset(utcOffset)\r\n .locale(getLongLanguageCode())\r\n .format('D MMM YYYY');\r\n\r\nexport const formatUtcTimeFromDate = (date, utcOffset = 0) =>\r\n moment.utc(date, 'YYYY-MM-DDTHH:mm:ss').utcOffset(utcOffset).format('h:mm A');\r\n\r\nexport const formatUtcTimeFromDate2 = (date, utcOffset = 0) =>\r\n moment.utc(date, 'YYYY-MM-DD HH:mm:ss').utcOffset(utcOffset).format('D MMM YYYY h:mm A');\r\n\r\nexport const formatDateTime = (date) => moment(date).format('D MMM YYYY h:mm A');\r\n\r\nexport const formatUtcDateToEasternTime = (date) =>\r\n moment\r\n .utc(date, 'YYYY-MM-DDTHH:mm:ss')\r\n .locale(getLongLanguageCode())\r\n .tz('America/Toronto')\r\n .format('D MMM YYYY');\r\nexport const getdateTimefromESTdate = (date, isTime, utcOffset = 0) => {\r\n if (isTime) {\r\n return moment(date, 'h:mm A D MMM YYYY').locale(getLongLanguageCode()).format('h:mm A');\r\n } else {\r\n return moment(date, 'h:mm A D MMM YYYY').locale(getLongLanguageCode()).format('D MMM YYYY');\r\n }\r\n};\r\nexport const formatUtcTimeFromDateToEasternTime = (date) =>\r\n moment.utc(date, 'YYYY-MM-DDTHH:mm:ss').tz('America/Toronto').format('h:mm A');\r\n\r\nexport const getServerUrl = () => {\r\n const location = windowService().location;\r\n return location && location.protocol && location.hostname\r\n ? `${location.protocol}//${location.hostname}`\r\n : `${apiconfig.sitecoreApiHost}`;\r\n};\r\n\r\nexport const formatDecimal = (value) => {\r\n if (value) {\r\n return isFrench()\r\n ? Number.parseFloat(value).toFixed(2).replace('.', ',')\r\n : Number.parseFloat(value).toFixed(2);\r\n }\r\n return isFrench() ? '0,00' : '0.00';\r\n};\r\n\r\nexport const formatDecimalWithCurrency = (value) => {\r\n if (isFrench()) {\r\n return `${value < 0 ? '-' : ''}${formatDecimal(Math.abs(value))}$`;\r\n }\r\n return `${value < 0 ? '-' : ''}$${formatDecimal(Math.abs(value))}`;\r\n};\r\n\r\nexport const formatPrestoCardNumber = (cardNumber) => {\r\n return cardNumber?.replace(/(\\d{6})(\\d{4})(\\d{4})(\\d{3})/, '$1-$2-$3-$4');\r\n};\r\n\r\nexport const formatPrestoCardNumberA11y = (cardNumber) =>\r\n cardNumber && cardNumber.split('').join(' ');\r\n\r\nexport const getQueryParam = (receivedData) =>\r\n receivedData.split('&').map((results) => results.split('=').splice(1, 1));\r\n\r\n// url can be in any form (e.g. 'http://example.com/?a=A&b=B#xyz' or '?a=A&b=B' or 'a=A&b=B')\r\n// it returns query parameters as object (e.g. { a: A, b: B })\r\nexport const getQueryParams = (url) => {\r\n if (!url) {\r\n return {};\r\n }\r\n\r\n const urlParts = url.split('#')[0].split('?');\r\n const queryString = urlParts.length >= 2 ? urlParts[1] : urlParts[0];\r\n const params = queryString.split('&');\r\n\r\n let result = {};\r\n params.forEach((param) => {\r\n const keyValuePair = param.split('=');\r\n result[keyValuePair[0]] = (keyValuePair[1] && decodeURIComponent(keyValuePair[1])) || '';\r\n });\r\n return result;\r\n};\r\n\r\nexport const getStationNameFromParam = (station) => {\r\n if (station === undefined) return '';\r\n return station.replace(/^\\d+\\s?:\\s?/, '');\r\n};\r\n\r\nexport const getDateFromParam = (dateFromParam) =>\r\n dateFromParam && dateFromParam[0] && dateFromParam[0].replace(/%20/g, ' ');\r\n\r\nexport const shallowObjEqual = (obj1, obj2) => {\r\n const keys1 = Object.keys(obj1);\r\n const keys2 = Object.keys(obj2);\r\n\r\n if (keys1.length !== keys2.length) {\r\n return false;\r\n }\r\n\r\n return keys1.every((key) => obj1[key] === obj2[key]);\r\n};\r\n\r\nexport const sortItems = (fieldName, ignoreCase = false) => (a, b) => {\r\n let field1 = ignoreCase ? a[fieldName].toUpperCase() : a[fieldName];\r\n let field2 = ignoreCase ? b[fieldName].toUpperCase() : b[fieldName];\r\n const notEqual = field1 < field2 ? -1 : 1;\r\n return field1 === field2 ? 0 : notEqual;\r\n};\r\n\r\nexport const hideString = (value) => value.replace(/[a-zA-Z0-9 ]/g, '•');\r\n\r\nexport const isOneOf = (items, value) => items.indexOf(value) !== -1;\r\n\r\nexport const convertToDollars = (value) => value / 100;\r\n\r\nexport const getRefreshToken = () => {\r\n return localstorageService().getItem(localStorageKeys.refreshToken);\r\n};\r\nexport const getLocalStorageItem = (key) => {\r\n return localstorageService().getItem(key);\r\n};\r\nexport const setLocalStorageItem = (key, value) => {\r\n localstorageService().setItem(key, value);\r\n};\r\nexport const replaceDate = (message, date) => message.replace('{date}', formatDate(date));\r\nexport const replaceDatewithOutFormate = (message, date) => message.replace('{date}', date);\r\nexport const updateRecaptchaToken = (values, configKeys, callBack) => {\r\n const GoogleRecaptchaV3SiteKey =\r\n configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'GoogleRecaptchaV3.SiteKey')\r\n .map((config) => config.setting);\r\n // console.log(GoogleRecaptchaV3SiteKey[0]);\r\n\r\n let valuesToUpdate = values;\r\n window.grecaptcha.ready(() => {\r\n window.grecaptcha\r\n .execute(GoogleRecaptchaV3SiteKey[0], { action: 'contactus' })\r\n .then((token) => {\r\n // console.log(\"token from util method: \" + token);\r\n valuesToUpdate.googleToken = token;\r\n // console.log(valuesToUpdate);\r\n callBack(valuesToUpdate);\r\n });\r\n });\r\n};\r\n\r\nexport const indexOfSelectedCard = (faremedias, visibleId) => {\r\n let i = 0;\r\n for (i; i < faremedias.length; i += 1) if (faremedias[i].visibleId === visibleId) break;\r\n return i;\r\n};\r\n\r\nexport const getAllMediasFromUserState = (userState) => {\r\n return userState.fareMedias.concat(userState.contactlessMedias);\r\n};\r\n\r\nexport const hasAnyCard = (userState) => {\r\n let allMedias = getAllMediasFromUserState(userState);\r\n return allMedias.length > 0 && allMedias[0].mediaId !== '';\r\n};\r\n\r\nexport const togglePageScroll = (disableScroll) => {\r\n const document = documentService();\r\n const isAndroid = /Android/i.test(navigator.userAgent);\r\n if (document.body) {\r\n if (disableScroll) {\r\n document.body.classList.add('disable-scroll');\r\n if (isAndroid) {\r\n document.body.style.overflow = 'auto !important';\r\n document.documentElement.style.overflow = 'auto !important';\r\n }\r\n } else {\r\n document.body.classList.remove('disable-scroll');\r\n if (isAndroid) {\r\n document.body.style.overflow = 'visible';\r\n document.documentElement.style.overflow = 'visible';\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport const hasLongInputLabel = (field1, field2) => {\r\n return field1?.value.length > 25 || field2?.value.length > 25;\r\n};\r\n\r\nexport const resetAccessTokenValidity = () => {\r\n const lifetime =\r\n (localstorageService().getItem(localStorageKeys.accessTokenLifetime) - 5 * 60) * 1000;\r\n localstorageService().setItem(localStorageKeys.accessTokenValidity, Date.now() + lifetime);\r\n};\r\n\r\nexport const getArrayBetweenDates = (startDate, endDate, step = 'months', returnFormat = 'M') => {\r\n let now = startDate.clone();\r\n let dates = [];\r\n while (now.isSameOrBefore(endDate)) {\r\n dates.push(now.format(returnFormat));\r\n now.add(1, step);\r\n }\r\n return dates;\r\n};\r\n\r\nexport const subtractDays = (days) => {\r\n let date = new Date();\r\n date.setDate(date.getDate() - days);\r\n return date;\r\n};\r\n\r\nexport const getTimePeriod = (startDate, endDate) => {\r\n return `${formatDate(startDate)} - ${formatDate(endDate)}`;\r\n};\r\n\r\nexport const getTimePeriodTx = (startDate, endDate) => {\r\n return `${formatDateTx(startDate)} - ${formatDateTx(endDate)}`;\r\n};\r\n\r\nexport const getParameterCaseInsensitive = (object, key, defaultValue = '') => {\r\n const asLowercase = key.toLowerCase();\r\n let value = object[Object.keys(object).find((k) => k.toLowerCase() === asLowercase)];\r\n return value ? value : defaultValue;\r\n};\r\n\r\nexport const checkUPorGO = (ServiceProviderID) =>\r\n [TA.GO_TRANSIT, TA.UP_EXPRESS].includes(ServiceProviderID);\r\n\r\nexport const getCardTransactionTypes = (transData, fields) => {\r\n const loadTypes = {\r\n 1: '1',\r\n 2: '2',\r\n 3: '3',\r\n 4: '4',\r\n 5: '5',\r\n 6: '6',\r\n 7: '7',\r\n 8: '8',\r\n };\r\n const locationTypes = {\r\n MOBILE_APP: 'Mobile App',\r\n };\r\n const { TrxTypeId, LoadType, TapType, Amount, ServiceProviderID, Type, Location } = transData;\r\n let finalObj = {};\r\n let nullType;\r\n let tapOn;\r\n let tapOff;\r\n let defaultTrip;\r\n let farePayment;\r\n let fareAdjTapOffNotDetected;\r\n let tapOffNotDetected;\r\n let loadAmount;\r\n let autoLoadAmount;\r\n let transitPassTap;\r\n let freeTransfer;\r\n let inPerson;\r\n let webOrAppLoad;\r\n let transitPassAutoRenew;\r\n let defaultType;\r\n let cardSettingChange;\r\n let cardActivation;\r\n let paymentByCredit;\r\n let paymentbyCardBalance;\r\n let paymentbyCash;\r\n if (\r\n TapType != null &&\r\n (ServiceProviderID === TA.GO_TRANSIT || ServiceProviderID === TA.UP_EXPRESS)\r\n ) {\r\n switch (TapType) {\r\n case 0:\r\n nullType = true;\r\n break;\r\n case 1:\r\n // BUG - 23831\r\n if (checkUPorGO(ServiceProviderID)) {\r\n tapOn = true;\r\n } else {\r\n farePayment = true;\r\n }\r\n break;\r\n case 2:\r\n // BUG - 23831\r\n if (checkUPorGO(ServiceProviderID)) {\r\n tapOff = true;\r\n }\r\n break;\r\n case 3:\r\n if (ServiceProviderID === TA.GO_TRANSIT) {\r\n defaultTrip = true;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n } else if (TrxTypeId === 15 || Type === fields?.transactionTypeTransitPassPayment?.value) {\r\n transitPassTap = true;\r\n } else if (TrxTypeId === 16 && Amount === 0) {\r\n freeTransfer = true;\r\n } else if (TrxTypeId === 2 && (LoadType === loadTypes[1] || LoadType === loadTypes[2])) {\r\n inPerson = true;\r\n } else if (TrxTypeId === 2 && (LoadType === loadTypes[4] || LoadType === loadTypes[6])) {\r\n webOrAppLoad = true;\r\n } else if (TrxTypeId === 2 && (LoadType === loadTypes[5] || LoadType === loadTypes[7])) {\r\n transitPassAutoRenew = true;\r\n } else if (TrxTypeId === 1 && LoadType === loadTypes[3]) {\r\n autoLoadAmount = true;\r\n } else if (TrxTypeId === 1 && (LoadType === loadTypes[5] || LoadType === loadTypes[6])) {\r\n if (ServiceProviderID && ServiceProviderID === TA.GO_TRANSIT) {\r\n fareAdjTapOffNotDetected = true;\r\n } else if (ServiceProviderID && ServiceProviderID === TA.UP_EXPRESS) {\r\n tapOffNotDetected = true;\r\n }\r\n } else if (\r\n TrxTypeId === 1 &&\r\n (LoadType === loadTypes[2] ||\r\n LoadType === loadTypes[4] ||\r\n (Location === locationTypes.MOBILE_APP && LoadType === loadTypes[8]))\r\n ) {\r\n loadAmount = true;\r\n } else if (TrxTypeId === 11) {\r\n cardSettingChange = true;\r\n } else if (TrxTypeId === 12) {\r\n cardActivation = true;\r\n } else if (TrxTypeId === 23) {\r\n paymentByCredit = true;\r\n } else if (TrxTypeId === 22) {\r\n paymentbyCardBalance = true;\r\n } else if (TrxTypeId === 4) {\r\n paymentbyCash = true;\r\n } else if (Type !== null) {\r\n defaultType = true;\r\n }\r\n finalObj = {\r\n nullType,\r\n tapOn,\r\n tapOff,\r\n defaultTrip,\r\n farePayment,\r\n fareAdjTapOffNotDetected,\r\n tapOffNotDetected,\r\n loadAmount,\r\n autoLoadAmount,\r\n transitPassTap,\r\n freeTransfer,\r\n inPerson,\r\n webOrAppLoad,\r\n transitPassAutoRenew,\r\n defaultType,\r\n cardSettingChange,\r\n cardActivation,\r\n paymentByCredit,\r\n paymentbyCardBalance,\r\n paymentbyCash,\r\n };\r\n return finalObj;\r\n};\r\n\r\nexport const blockTransactionHistoryEntry = (transData) => {\r\n const { ServiceProviderID } = transData;\r\n const { paymentByCredit, tapOff, paymentbyCardBalance, paymentbyCash } = getCardTransactionTypes(\r\n transData\r\n );\r\n if (paymentByCredit) {\r\n return true;\r\n }\r\n if (paymentbyCardBalance) {\r\n return true;\r\n }\r\n if (paymentbyCash) {\r\n return true;\r\n }\r\n if (tapOff && !checkUPorGO(ServiceProviderID)) {\r\n return true;\r\n }\r\n return false;\r\n};\r\nexport const scrollToView = () => {\r\n let currentLocation = window.location.href;\r\n const hasAnchor = currentLocation.includes('#');\r\n if (hasAnchor) {\r\n const anchorId = `${currentLocation.substring(currentLocation.indexOf('#') + 1)}`;\r\n const anchorEl = document.getElementById(anchorId);\r\n if (anchorEl) {\r\n anchorEl.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }\r\n};\r\n\r\nexport const TransactionCodeValue = (transactionCode) => {\r\n let transactionType;\r\n switch (transactionCode) {\r\n case '0':\r\n case '00':\r\n case 0:\r\n transactionType = 'Purchase';\r\n break;\r\n case '1':\r\n case '01':\r\n case 1:\r\n transactionType = 'Pre-Authorization';\r\n break;\r\n case '6':\r\n case '06':\r\n case 6:\r\n transactionType = 'Card Verification';\r\n break;\r\n default:\r\n transactionType = transactionCode;\r\n }\r\n return transactionType;\r\n};\r\n\r\nexport const downloadCsvFile = (\r\n csvHeader,\r\n customerData,\r\n fileName = 'TX history.csv',\r\n id = 'csv_download_link'\r\n) => {\r\n let csvContent = 'data:text/csv;charset=utf-8,';\r\n let headers = csvHeader.toString();\r\n csvContent += `${headers}\\r\\n`;\r\n let rowData = customerData.reduce((previous, next) => {\r\n let options = [];\r\n options.push(\r\n ...[\r\n next.TransactionDateTime,\r\n next.TransitAgency,\r\n next.Location,\r\n next.TapType,\r\n next.Amount,\r\n next.ConfirmationID,\r\n formatDate(next.ChargedDate),\r\n next.ChargeStatus,\r\n next.LoyaltyDiscount,\r\n next.TransferDiscount,\r\n next.DailyCAPDiscount,\r\n ]\r\n );\r\n previous.push(options);\r\n\r\n return previous;\r\n }, []);\r\n csvContent += rowData.map((e) => e.join(',')).join('\\n');\r\n\r\n let encodedUri = encodeURI(csvContent);\r\n let link = document.createElement('a');\r\n link.setAttribute('href', encodedUri);\r\n link.setAttribute('id', id);\r\n link.setAttribute('download', fileName);\r\n document.body.appendChild(link);\r\n link.click();\r\n\r\n let elem = document.getElementById(id);\r\n elem.parentNode.removeChild(elem);\r\n};\r\n\r\nexport const downloadContactlessCsvFile = (\r\n csvHeader,\r\n customerData,\r\n fileName = 'TX history.csv',\r\n id = 'csv_download_link'\r\n) => {\r\n let csvContent = 'data:text/csv;charset=utf-8,';\r\n let headers = csvHeader.toString();\r\n csvContent += `${headers}\\r\\n`;\r\n let rowData = customerData.reduce((previous, next) => {\r\n let options = [];\r\n options.push(\r\n ...[\r\n next.TransactionDateTime,\r\n next.TransitAgency,\r\n next.TapType,\r\n next.Amount,\r\n next.ConfirmationID,\r\n next.ChargedDate,\r\n next.ChargeStatus,\r\n next.LoyaltyDiscount,\r\n next.TransferDiscount,\r\n next.DailyCAPDiscount,\r\n ]\r\n );\r\n previous.push(options);\r\n\r\n return previous;\r\n }, []);\r\n csvContent += rowData.map((e) => e.join(',')).join('\\n');\r\n\r\n let encodedUri = encodeURI(csvContent);\r\n let link = document.createElement('a');\r\n link.setAttribute('href', encodedUri);\r\n link.setAttribute('id', id);\r\n link.setAttribute('download', fileName);\r\n document.body.appendChild(link);\r\n link.click();\r\n\r\n let elem = document.getElementById(id);\r\n elem.parentNode.removeChild(elem);\r\n};\r\nexport function is(valueToCheck) {\r\n let isArr = Array.isArray(valueToCheck);\r\n function check(val) {\r\n if (val && val.trim() !== '') {\r\n return true;\r\n }\r\n return false;\r\n }\r\n if (isArr) {\r\n return valueToCheck.some((val) => check(val));\r\n }\r\n return check(valueToCheck);\r\n}\r\nexport function sortNotifications(notifications) {\r\n const notificationTypes = {\r\n noEmailVerificationNotification: 'noEmailVerificationNotification',\r\n unverifiedEmailVerificationNotification: 'unverifiedEmailVerificationNotification',\r\n mfaLoginNotification: 'mfaLoginNotification',\r\n passwordExpiryNotification: 'passwordExpiryNotification',\r\n verificationSuccessNotification: 'verificationSuccessNotification',\r\n };\r\n let filterNotifications = [...notifications];\r\n let updatedNotifications = [];\r\n if (filterNotifications?.length) {\r\n const index = filterNotifications.findIndex(\r\n (obj) => obj.type === notificationTypes.verificationSuccessNotification\r\n );\r\n if (index !== -1 && index !== 0) {\r\n const notification = filterNotifications.splice(index, 1)[0];\r\n filterNotifications.unshift(notification);\r\n }\r\n\r\n // Order of notifications\r\n const notificationOrder = [\r\n 'verificationSuccessNotification',\r\n 'presto',\r\n 'passwordExpiryNotification',\r\n 'mfaLoginNotification',\r\n ];\r\n\r\n // Sorting the array of notifications\r\n updatedNotifications = filterNotifications.sort((a, b) => {\r\n const typeA = notificationOrder.indexOf(a.type || 'presto');\r\n const typeB = notificationOrder.indexOf(b.type || 'presto');\r\n return typeA - typeB;\r\n });\r\n }\r\n let notificationsWithOrder = updatedNotifications.map((el, index) => ({\r\n ...el,\r\n orderIndex: index + 1,\r\n }));\r\n return notificationsWithOrder;\r\n}\r\n","export default {\r\n dashboard: '/account-dashboard',\r\n checkout: '/my-products/checkout',\r\n loadMyCard: '/my-products/load-my-card',\r\n transitPasses: '/my-products/transit-passes',\r\n transactionHistory: '/my-products/transaction-history',\r\n unpaidFares: '/my-products/unpaid-fares',\r\n contactlessUnpaidFares: '/contactless-dashboard/ContactlessUnpaidFare',\r\n contactlessTransactionHistory: '/Contactless-dashboard',\r\n addCard: '/account/add-card',\r\n searchResults: '/search-results?keywords=',\r\n manageMyCards: '/account/manage-my-cards',\r\n workInProgress: '/support/modernizing-presto/work-in-progress',\r\n tooManyRequests: '/too-many-requests',\r\n technicalDifficulties: '/technical-difficulties',\r\n contactlessHomePage: '/Contactless-Home-page',\r\n orderNewCard: '/order-a-new-card',\r\n createAccount: '/create-an-account',\r\n signIn: '/B2CRedirect/B2CRegisteredSignIn',\r\n loginAndSecurityRefresh: '/B2CRedirect/B2CRegisteredSignIn?isLoginAndSecurity=true',\r\n accountExistPassword: '/B2CAccountCreation/AccountExistPassword',\r\n accountVerification: '/B2CAccountCreation/AccountVerification',\r\n b2cAccountCreation: '/B2CAccountCreation/personal-information',\r\n b2cRegisteredSignIn: '/B2CRedirect/B2CRegisteredSignIn',\r\n b2cRegisterAccount: '/B2CRedirect/B2CRegisterAccount',\r\n b2cAccountExists: '/B2CRedirect/B2CAccountExists',\r\n b2cChangeEmail: '/B2CRedirect/B2CChangeEmail',\r\n b2cChangePassword: '/B2CRedirect/B2CChangePassword',\r\n b2cPrestoCardSignIn: '/B2CRedirect/B2CPrestoCardSignIn',\r\n b2cSignOut: '/B2CRedirect/B2CSignOut',\r\n b2cGuestSignIn: '/B2CRedirect/B2CGuestSignIn',\r\n reportLostCard: '/my-products/report-lost-card',\r\n goDefaultTrip: '/go-default-trip',\r\n walletCardDetails: '/my-products/card-details',\r\n b2cEnrollMFA: '/B2CRedirect/MFA/B2CMFAEnroll',\r\n b2cUpdateMFA: '/B2CRedirect/MFA/B2CMFAUpdate',\r\n b2cDisableMFA: '/B2CRedirect/MFA/B2CMFADisable',\r\n b2cUpdateMFANotification: '/B2CRedirect/MFA/B2CMFANotification',\r\n b2cPasswordMFANotification: '/B2CRedirect/MFA/B2CPasswordNotification',\r\n b2cMfaMaxRetryExceeds: '/B2CRedirect/B2CRegisteredSignIn?IsMaxTryExceeds=true',\r\n loginAndSecurity: '/account/Login-and-Security',\r\n deleteAccount: '/account/delete-account',\r\n};\r\n","import axios from 'axios';\r\n\r\nimport apiconfig from '../temp/config';\r\nimport {\r\n getCookie,\r\n getRefreshToken,\r\n redirectToUrl,\r\n isJsonString,\r\n localstorageService,\r\n resetAccessTokenValidity,\r\n getLocalStorageItem,\r\n} from './utils';\r\nimport routes from '../constants/routes';\r\nimport localStorageKeys from '../constants/localStorageKeys';\r\n\r\naxios.defaults.withCredentials = true;\r\n\r\nclass API {\r\n constructor() {\r\n this.config = {\r\n baseURL: `${apiconfig.sitecoreApiHost}/apidata`,\r\n headers: {\r\n 'content-type': `application/json`,\r\n 'unique-session-id': getLocalStorageItem(localStorageKeys.uniqueSessionId),\r\n },\r\n };\r\n\r\n this.stalledCalls = [];\r\n this.isRefreshingToken = false;\r\n\r\n // eslint-disable-next-line new-cap\r\n this.provider = new axios.create(this.config);\r\n\r\n // eslint-disable-next-line func-names\r\n this.provider.interceptors.request.use((config) => {\r\n return this.getConfiguration(config).then((updatedConfig) => {\r\n return updatedConfig;\r\n });\r\n });\r\n\r\n this.provider.interceptors.response.use(\r\n function (response) {\r\n const error = response.data?.Error;\r\n const errorCodesForRedirect = ['400', '401', '403', '500'];\r\n const statusCodeForTooManyRequests = '429';\r\n const parsedMessageObject = error && isJsonString(error) && JSON.parse(error);\r\n\r\n if (parsedMessageObject?.Code === statusCodeForTooManyRequests) {\r\n redirectToUrl(routes.tooManyRequests);\r\n }\r\n\r\n if (\r\n parsedMessageObject?.Code &&\r\n errorCodesForRedirect.indexOf(parsedMessageObject.Code) > -1\r\n ) {\r\n // redirectToUrl(routes.technicalDifficulties);\r\n }\r\n\r\n return response;\r\n },\r\n function (error) {\r\n const statusCodeForTooManyRequests = 429;\r\n console.error(error);\r\n\r\n if (error.response && error.response.status === statusCodeForTooManyRequests) {\r\n redirectToUrl(routes.tooManyRequests);\r\n }\r\n\r\n return Promise.reject(error);\r\n }\r\n );\r\n }\r\n\r\n getAccessToken = () => {\r\n const getAccessTokenPromise = new Promise((resolve, reject) => {\r\n const accessToken = localstorageService().getItem(localStorageKeys.accessToken);\r\n const tokenTimestamp = localstorageService().getItem(localStorageKeys.accessTokenValidity);\r\n const refreshToken = localstorageService().getItem(localStorageKeys.refreshToken);\r\n\r\n if (!accessToken || !refreshToken) {\r\n resolve('');\r\n return;\r\n }\r\n let reduxData = localstorageService().getItem('redux');\r\n reduxData = JSON.parse(reduxData);\r\n if (reduxData?.contactless?.isContactlessUserSignedIn) {\r\n resolve(localstorageService().getItem(localStorageKeys.accessToken));\r\n } else {\r\n if (tokenTimestamp && tokenTimestamp > Date.now()) {\r\n resolve(localstorageService().getItem(localStorageKeys.accessToken));\r\n } else {\r\n this.stalledCalls.push({ resolve, reject });\r\n if (!this.isRefreshingToken) {\r\n this.refreshToken()\r\n .then(() => {\r\n this.stalledCalls.forEach((call) =>\r\n call.resolve(localstorageService().getItem(localStorageKeys.accessToken))\r\n );\r\n })\r\n .catch(() => {\r\n this.stalledCalls.forEach((call) => call.reject());\r\n })\r\n .then(() => {\r\n this.stalledCalls = [];\r\n this.isRefreshingToken = false;\r\n });\r\n this.isRefreshingToken = true;\r\n }\r\n }\r\n }\r\n });\r\n\r\n return getAccessTokenPromise;\r\n };\r\n\r\n getConfiguration = (config) => {\r\n let reduxData = localstorageService().getItem('redux');\r\n reduxData = JSON.parse(reduxData);\r\n return new Promise((resolve) => {\r\n if (config.url === '/SignIn/GuestLogin') {\r\n resolve(config);\r\n } else if (\r\n reduxData?.user?.anonymous &&\r\n (config.url === '/Customer/CustomerRequest' ||\r\n config.url === 'Customer/UpdateFareCardProfileAnonymous')\r\n ) {\r\n config.headers.token = reduxData?.user?.anonymousAccessToken;\r\n resolve(config);\r\n } else if (\r\n config.url === '/Security/GetSecurityQuestions' ||\r\n config.url === '/Security/GetSecurityQuestionsForExistingUser' ||\r\n config.url === '/Security/ValidateSecurityQA' ||\r\n config.url === '/Security/ValidateSecurityQAForgotPassword' ||\r\n config.url === '/Security/ResetPassword' ||\r\n // config.url === '/Product/GetCountryAreas' ||\r\n // config.url === '/SitecoreItems/GetAllSecurityQuestions' ||\r\n // config.url === '/Customer/CustomerRequest' ||\r\n config.url === '/Customer/GetIsUserNameEmailExists' ||\r\n config.url === '/Security/VerifyEmail'\r\n ) {\r\n // eslint-disable-next-line no-param-reassign\r\n config.headers.token = localstorageService().getItem(localStorageKeys.guestToken);\r\n resolve(config);\r\n } else if (config.url === '/SignIn/RefreshToken') {\r\n // eslint-disable-next-line no-param-reassign\r\n config.headers.token = localstorageService().getItem(localStorageKeys.accessToken);\r\n resolve(config);\r\n } else {\r\n this.getAccessToken().then((accessToken) => {\r\n // eslint-disable-next-line no-param-reassign\r\n config.headers.token = accessToken;\r\n resolve(config);\r\n });\r\n }\r\n });\r\n };\r\n\r\n // SignIn\r\n getUserInfo() {\r\n return this.provider.post('/SignIn/UserInfo');\r\n }\r\n getUserinfoContactless() {\r\n return this.provider.post('/SignIn/UserinfoContactless');\r\n }\r\n\r\n UpdateFareMediaSession(data) {\r\n return this.provider.post('/UserInfo/UpdateFareMediaSession', data);\r\n }\r\n\r\n login(data) {\r\n const deviceIdCookie = getCookie('SC_ANALYTICS_GLOBAL_COOKIE');\r\n return this.provider.post(`/SignIn/Login`, data, {\r\n headers: {\r\n 'content-type': `application/json`,\r\n deviceId: deviceIdCookie && deviceIdCookie.split('|')[0],\r\n },\r\n });\r\n }\r\n\r\n guestLogin() {\r\n const deviceIdCookie = getCookie('SC_ANALYTICS_GLOBAL_COOKIE');\r\n\r\n return this.provider\r\n .post(`/SignIn/GuestLogin`, null, {\r\n headers: {\r\n 'content-type': `application/json`,\r\n deviceId: deviceIdCookie && deviceIdCookie.split('|')[0],\r\n },\r\n })\r\n .then(({ data: { Data, Success } }) => {\r\n if (Success) {\r\n localstorageService().setItem(localStorageKeys.guestToken, Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.accessToken, Data.Access_token);\r\n }\r\n });\r\n }\r\n\r\n async getTransitAgencyLogosforGuestFlow() {\r\n await this.newguestLogin();\r\n return this.provider.get(`/SitecoreItems/GetTransitAgencyLogos`);\r\n }\r\n\r\n async getTransitAgencyServiceProvidersforGuestFlow(data) {\r\n await this.newguestLogin();\r\n return this.provider.post('/Product/GetServiceProviders', data);\r\n }\r\n\r\n newguestLogin() {\r\n const deviceIdCookie = getCookie('SC_ANALYTICS_GLOBAL_COOKIE');\r\n\r\n return this.provider\r\n .post(`/SignIn/GuestLogin`, null, {\r\n headers: {\r\n 'content-type': `application/json`,\r\n deviceId: deviceIdCookie && deviceIdCookie.split('|')[0],\r\n },\r\n })\r\n .then(({ data: { Data, Success } }) => {\r\n if (Success) {\r\n localstorageService().setItem(localStorageKeys.guestToken, Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.accessToken, Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, Data.Refresh_token);\r\n localstorageService().setItem(localStorageKeys.accessTokenLifetime, Data.Expires_in);\r\n resetAccessTokenValidity();\r\n }\r\n });\r\n }\r\n\r\n guestLoginforCreateAccount() {\r\n const deviceIdCookie = getCookie('SC_ANALYTICS_GLOBAL_COOKIE');\r\n\r\n return this.provider.post(`/SignIn/GuestLogin`, null, {\r\n headers: {\r\n 'content-type': `application/json`,\r\n deviceId: deviceIdCookie && deviceIdCookie.split('|')[0],\r\n },\r\n });\r\n }\r\n\r\n refreshToken() {\r\n const refreshToken = getRefreshToken();\r\n const data = { Token: refreshToken };\r\n return this.provider.post('/SignIn/RefreshToken', data).then(({ data: { Data, Success } }) => {\r\n if (Success) {\r\n localstorageService().setItem(localStorageKeys.accessToken, Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, Data.Access_token);\r\n resetAccessTokenValidity();\r\n }\r\n });\r\n }\r\n\r\n logOut(data) {\r\n return this.provider.post('/SignIn/LogOut', data);\r\n }\r\n\r\n anonymousPrestoLogin(data) {\r\n return this.provider.post('/SignIn/AnonymousPrestoLogin', data);\r\n }\r\n\r\n updateConsentInput(data) {\r\n return this.provider.post('/UserInfo/ConfirmDismissCasl', data);\r\n }\r\n\r\n // B2c\r\n b2cRegisteredSignIn() {\r\n redirectToUrl(routes.b2cRegisteredSignIn);\r\n }\r\n\r\n b2cMfaMaxRetryExceeds() {\r\n redirectToUrl(routes.b2cMfaMaxRetryExceeds);\r\n }\r\n\r\n b2cRegisteredSignInRedirect(cwsRedirectUrl = '', cwsRedirectUrlHash = '') {\r\n if (cwsRedirectUrl != '' && cwsRedirectUrl != null && cwsRedirectUrl != undefined) {\r\n if (\r\n cwsRedirectUrlHash != null &&\r\n cwsRedirectUrlHash != '' &&\r\n cwsRedirectUrlHash != undefined\r\n ) {\r\n redirectToUrl(\r\n routes.b2cRegisteredSignIn +\r\n '?redirectUrl=' +\r\n cwsRedirectUrl +\r\n '&hash=' +\r\n cwsRedirectUrlHash\r\n );\r\n } else {\r\n redirectToUrl(routes.b2cRegisteredSignIn + '?redirectUrl=' + cwsRedirectUrl);\r\n }\r\n } else {\r\n redirectToUrl(routes.b2cRegisteredSignIn);\r\n }\r\n }\r\n\r\n b2cGuestSignIn() {\r\n redirectToUrl(routes.b2cGuestSignIn);\r\n }\r\n\r\n b2cRegisterAccount() {\r\n redirectToUrl(routes.b2cRegisterAccount);\r\n }\r\n\r\n b2cAccountExists() {\r\n redirectToUrl(routes.b2cAccountExists);\r\n }\r\n\r\n b2cChangeEmail() {\r\n redirectToUrl(routes.b2cChangeEmail);\r\n }\r\n\r\n b2cChangePassword() {\r\n redirectToUrl(routes.b2cChangePassword);\r\n }\r\n\r\n b2cPrestoCardSignIn() {\r\n redirectToUrl(routes.b2cPrestoCardSignIn);\r\n }\r\n\r\n b2cPrestoCardSignInRedirect(cwsRedirectUrl = '', cwsRedirectUrlHash = '') {\r\n if (cwsRedirectUrl != '' && cwsRedirectUrl != null && cwsRedirectUrl != undefined) {\r\n if (\r\n cwsRedirectUrlHash != null &&\r\n cwsRedirectUrlHash != '' &&\r\n cwsRedirectUrlHash != undefined\r\n ) {\r\n redirectToUrl(\r\n routes.b2cPrestoCardSignIn +\r\n '?redirectUrl=' +\r\n cwsRedirectUrl +\r\n '&hash=' +\r\n cwsRedirectUrlHash\r\n );\r\n } else {\r\n redirectToUrl(routes.b2cPrestoCardSignIn + '?redirectUrl=' + cwsRedirectUrl);\r\n }\r\n } else {\r\n redirectToUrl(routes.b2cPrestoCardSignIn);\r\n }\r\n }\r\n\r\n b2cSignOut() {\r\n if (window.CVVA !== undefined && window.CVVA !== null) {\r\n window.CVVA.flushVaSession();\r\n }\r\n redirectToUrl(routes.b2cSignOut);\r\n }\r\n\r\n deleteaccountSignOut(cwsRedirectUrl = '') {\r\n if (cwsRedirectUrl != '' && cwsRedirectUrl != null && cwsRedirectUrl != undefined) {\r\n if (window.CVVA !== undefined && window.CVVA !== null) {\r\n window.CVVA.flushVaSession();\r\n }\r\n\r\n redirectToUrl(routes.b2cSignOut + '?returnUrl=' + cwsRedirectUrl + '&deleteState=true');\r\n }\r\n }\r\n\r\n b2cEnrollMFA() {\r\n redirectToUrl(routes.b2cEnrollMFA);\r\n }\r\n\r\n b2cUpdateMFA() {\r\n redirectToUrl(routes.b2cUpdateMFA);\r\n }\r\n\r\n b2cDisableMFA() {\r\n redirectToUrl(routes.b2cDisableMFA);\r\n }\r\n\r\n b2cUpdateMFANotification() {\r\n redirectToUrl(routes.b2cUpdateMFANotification);\r\n }\r\n\r\n b2cPasswordMFANotification() {\r\n redirectToUrl(routes.b2cPasswordMFANotification);\r\n }\r\n\r\n dashboard(options = { queryParams: '' }) {\r\n let hasQueryParams = options?.queryParams && options.queryParams.length > 0;\r\n let URL = routes.dashboard;\r\n if (hasQueryParams) {\r\n URL += options.queryParams;\r\n }\r\n redirectToUrl(URL);\r\n }\r\n\r\n checkout() {\r\n redirectToUrl(routes.checkout);\r\n }\r\n\r\n getClaims() {\r\n return this.provider.post('/SignIn/B2CClaims');\r\n }\r\n\r\n getSTSCloudClaims() {\r\n return this.provider.post('/SignIn/STSCloudB2CClaims');\r\n }\r\n // Security\r\n\r\n async getSecurityQuestions(data) {\r\n const deviceIdCookie = getCookie('SC_ANALYTICS_GLOBAL_COOKIE');\r\n await this.guestLogin();\r\n return this.provider.post(`/Security/GetSecurityQuestions`, data, {\r\n headers: {\r\n 'content-type': `application/json`,\r\n deviceId: deviceIdCookie && deviceIdCookie.split('|')[0],\r\n },\r\n });\r\n }\r\n\r\n async getSecurityQuestionsForExistingUser(data) {\r\n await this.guestLogin();\r\n return this.provider.post(`/Security/GetSecurityQuestionsForExistingUser`, data);\r\n }\r\n\r\n validateSecurityQA(data) {\r\n return this.provider.post(`/Security/ValidateSecurityQA`, data);\r\n }\r\n\r\n validateSecurityQAForgotPassword(data) {\r\n return this.provider.post(`/Security/ValidateSecurityQAForgotPassword`, data);\r\n }\r\n\r\n resetPassword(data) {\r\n return this.provider.post(`/Security/ResetPassword`, data);\r\n }\r\n\r\n resendVerificationEmail(data) {\r\n return this.provider.post(`/Security/ResendVerificationEmail`, data);\r\n }\r\n\r\n async verifyEmail(data) {\r\n await this.guestLogin();\r\n return this.provider.post(`/Security/VerifyEmail`, data);\r\n }\r\n\r\n setWebChatCookie(data) {\r\n return this.provider.post(`/Security/SetWebChatCookie`, data);\r\n }\r\n\r\n // Error message\r\n\r\n getErrorTranslation(data) {\r\n return this.provider.post('/SitecoreItems/GetErrorTranslation', data);\r\n }\r\n\r\n // User Info\r\n checkUserNameAlreadyExists(data) {\r\n return this.provider.post(`/Customer/GetIsUserNameEmailExists`, data);\r\n }\r\n\r\n getPersonalData() {\r\n return this.provider.post(`/UserInfo/GetPersonalData`);\r\n }\r\n\r\n updatePersonalData(data) {\r\n return this.provider.post(`/UserInfo/UpdatepersonalInformation`, data);\r\n }\r\n\r\n getSitecoreSessionId() {\r\n return this.provider.post(`/UserInfo/GetSitecoreSessionId`);\r\n }\r\n\r\n getSecurityQuestionsWithAnswers(data) {\r\n return this.provider.post('/UserInfo/GetSecurityQuestionsWithAnswers', data);\r\n }\r\n\r\n updatePassword(data) {\r\n return this.provider.post('/UserInfo/UpdatePassword', data);\r\n }\r\n\r\n updateLoginEmail(data) {\r\n return this.provider.post('/UserInfo/UpdateLoginEmail', data);\r\n }\r\n\r\n updateSecurityQuestions(data) {\r\n return this.provider.post('/UserInfo/UpdateSecurityQuestions', data);\r\n }\r\n\r\n setSecurityQuestionsWithAnswers(data) {\r\n return this.provider.post('/UserInfo/SetSecurityQuestionsWithAnswers', data);\r\n }\r\n\r\n // Sales\r\n createCachedOrderForReplacement(data) {\r\n return this.provider.post('/Sales/CreateCachedOrderForReplacement', data);\r\n }\r\n\r\n createHotlistMediaForReplaceCard(data) {\r\n return this.provider.post('/Sales/CreateHotlistMediaForReplaceCard', data);\r\n }\r\n\r\n createHotlistAndTransferCard(data) {\r\n return this.provider.post('/Sales/CreateHotListAndTransferCard', data);\r\n }\r\n\r\n getShoppingCart(data) {\r\n return this.provider.post('/Sales/GetShoppingCart', data);\r\n }\r\n\r\n getShoppingCartWithLineItemValidation(data) {\r\n return this.provider.post('/Sales/GetShoppingCartWithLineItemValidation', data);\r\n }\r\n\r\n UpdateMediaConfigurationDetails(data) {\r\n return this.provider.post('/Sales/UpdateMediaConfigurationDetails', data);\r\n }\r\n\r\n SetOrderDelivery(data) {\r\n return this.provider.post('/Sales/SetOrderDelivery', data);\r\n }\r\n\r\n addFundToCart(data) {\r\n return this.provider.post('/Sales/AddFundToCart', data);\r\n }\r\n\r\n redeemVoucher(data) {\r\n return this.provider.post('/Sales/RedeemVoucher', data);\r\n }\r\n\r\n addProductToCart(data) {\r\n return this.provider.post('/Sales/AddProductToCart', data);\r\n }\r\n\r\n removeProductFromCart(data) {\r\n return this.provider.post('/Sales/RemoveProductFromCart', data);\r\n }\r\n\r\n validateVoucher(data) {\r\n return this.provider.post('/Sales/ValidateVoucher', data);\r\n }\r\n\r\n buyAprestoCardCommenceCheckOut(data) {\r\n return this.provider.post('/Sales/BuyAPrestoCardCommenceCheckout', data);\r\n }\r\n\r\n transferMediaAllowedToNewCard(data) {\r\n return this.provider.post('/Sales/TransferMediaAllowedToNewCard', data);\r\n }\r\n\r\n getAllRegisteredCardsEligibleForTransfer(data) {\r\n return this.provider.post('/Sales/GetAllRegisteredCardsEligibleForTransfer', data);\r\n }\r\n\r\n // Product\r\n\r\n getServiceProviders(data) {\r\n return this.provider.post('/Product/GetServiceProviders', data);\r\n }\r\n\r\n async getCountryAreas() {\r\n // await this.guestLogin();\r\n return this.provider.get('/Product/GetCountryAreas');\r\n }\r\n\r\n getEligibleFunds(data) {\r\n return this.provider.post('/Product/GetEligibleFunds', data);\r\n }\r\n\r\n //CreateAccount\r\n\r\n async getCountryAreasforCreateAccount() {\r\n return this.provider.get('/Product/GetCountryAreas');\r\n }\r\n\r\n async saveCreateAccountData(data) {\r\n return this.provider.post('/Customer/CustomerRequest', data);\r\n }\r\n\r\n async saveCreateAccountDataForAnonymous(data) {\r\n return this.provider.post('/Customer/CustomerRequest', data);\r\n }\r\n\r\n async associateCustomerAddCard(data) {\r\n return this.provider.post('/Customer/AssociateCustomerAddCard', data);\r\n }\r\n\r\n // SitecoreItems\r\n async getAllBusinessRules() {\r\n return this.provider.get(`/SitecoreItems/GetAllBusinessRules`);\r\n }\r\n\r\n async getAllSecurityQuestions() {\r\n // await this.guestLogin();\r\n return this.provider.get(`/SitecoreItems/GetAllSecurityQuestions`);\r\n }\r\n\r\n async getTransitAgencyLogos() {\r\n return this.provider.get(`/SitecoreItems/GetTransitAgencyLogos`);\r\n }\r\n\r\n async getFareCardStatusMessage(data) {\r\n return this.provider.post(`/SitecoreItems/GetFareCardStatusMessage`, data);\r\n }\r\n\r\n async getDiscountTypes() {\r\n return this.provider.get(`/SitecoreItems/GetDiscountTypes`);\r\n }\r\n\r\n async getTicket(data) {\r\n return this.provider.post(`/Sales/GetTicket`, data);\r\n }\r\n\r\n async getCSOLocatorLookUpData() {\r\n return this.provider.get(`/SitecoreItems/GetCSOLocatorLookUpData`);\r\n }\r\n\r\n // Settings\r\n getSetting(data) {\r\n return this.provider.post(`/Settings/GetSetting`, data);\r\n }\r\n\r\n getAvailableSettings() {\r\n return this.provider.get(`/Settings/GetAvailableSettings`);\r\n }\r\n\r\n async getAutorenewCalendar() {\r\n return this.provider.get(`/SitecoreItems/GetAutorenewCalendar`);\r\n }\r\n\r\n // PrestoFareMedia\r\n\r\n verifyCard(data) {\r\n return this.provider.post(`/PrestoFareMedia/VerifyCard`, data);\r\n }\r\n\r\n validatePin(data) {\r\n return this.provider.post('/PrestoFareMedia/ValidatePin', data);\r\n }\r\n\r\n addPrestoCard(data) {\r\n return this.provider.post('/PrestoFareMedia/AddAnonymousCard', data);\r\n }\r\n\r\n addPaperFormPrestoCard(data) {\r\n return this.provider.post('/PrestoFareMedia/AddPaperFormRegisteredCard', data);\r\n }\r\n\r\n getCurrentBalance(data) {\r\n return this.provider.post('/PrestoFareMedia/GetEpurseBalance', data);\r\n }\r\n\r\n prestoCardUpdateNickname(data) {\r\n return this.provider.post('/PrestoFareMedia/UpdateNickname', data);\r\n }\r\n\r\n prestoCardActivate(data) {\r\n return this.provider.post('/PrestoFareMedia/ActivatePrestoCard', data);\r\n }\r\n\r\n // ContactlessFareMedia\r\n\r\n contactlessCreateAccount(data) {\r\n return this.provider.post('/ContactlessFareMedia/CreateAccount', data);\r\n }\r\n\r\n contactlessUpdateNickname(data) {\r\n return this.provider.post('/ContactlessFareMedia/UpdateNickname', data);\r\n }\r\n\r\n contactlessRemoveCard(data) {\r\n return this.provider.post('/ContactlessFareMedia/UnlinkCard', data);\r\n }\r\n\r\n getDefaultTrip(data) {\r\n return this.provider.post('/ContactlessFareMedia/GetDefaultTrip', data);\r\n }\r\n\r\n setOrUpdateDefaultTrip(data) {\r\n return this.provider.post('/ContactlessFareMedia/SetOrUpdateDefaultTrip', data);\r\n }\r\n\r\n getStationList(data) {\r\n return this.provider.post('/Stationlist/getstationlist', data);\r\n }\r\n\r\n // ContactlessFareMediaHistory\r\n\r\n getContactlessTransactionHistory(data) {\r\n return this.provider.post('/ContactlessFareMediaHistory/GetTransactionHistory', data);\r\n }\r\n\r\n getExportContactlessTransactionHistory(data) {\r\n return this.provider.post('/ContactlessFareMediaHistory/GetExport', data);\r\n }\r\n\r\n getExportPrestoTransactionHistory(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/ExportTransactionHistoryCsv', data);\r\n }\r\n\r\n getContactlessUnpaidFares(data) {\r\n return this.provider.post('/ContactlessFareMediaHistory/GetUnpaidFares', data);\r\n }\r\n\r\n getPaymentsToVerify(data) {\r\n return this.provider.post('/ContactlessFareMediaHistory/GetPaymentsToVerify', data);\r\n }\r\n\r\n contactlessRecoveryDept(data) {\r\n return this.provider.post('/ContactlessFareMedia/RecoverDebt', data);\r\n }\r\n\r\n verifyContactlessCard(data) {\r\n return this.provider.post('/ContactlessFareMedia/VerifyCard', data);\r\n }\r\n\r\n processContactlessUnpaidFare(data) {\r\n return this.provider.post('ContactlessFareMedia/ProcessContactlessUnpaidFare', data);\r\n }\r\n\r\n processContactlessVerifyCard(data) {\r\n return this.provider.post('ContactlessFareMedia/ProcessContactlessVerifyCard', data);\r\n }\r\n\r\n // PrestoFareMediaHistory\r\n\r\n getTransactionHistory(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/GetTravel', data);\r\n }\r\n\r\n getProductsLoadedInMedia(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/GetProductsLoadedInMedia', data);\r\n }\r\n\r\n getPendingProductsLoadedInMedia(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/GetPendingProductsLoadedInMedia', data);\r\n }\r\n\r\n getAllProductsLoadedInMedia(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/GetAllProductsLoadedInMedia', data);\r\n }\r\n\r\n getAllWalletCardDetails(data) {\r\n return this.provider.post('/WalletCardMedia/GetAllWalletCardDetails', data);\r\n }\r\n getStoredMediaTypeInSession(data) {\r\n return this.provider.post('/WalletCardMedia/StoreMediaTypeInSession', data);\r\n }\r\n getLoyaltySummary(data) {\r\n return this.provider.post('/PrestoFareMediaHistory/GetLoyaltySummary', data);\r\n }\r\n\r\n // Autoload\r\n\r\n isAutoloadAllowedWithBalance(data) {\r\n return this.provider.post('/Autoload/IsAutoloadAllowedWithBalance', data);\r\n }\r\n\r\n isAutoloadAllowed(data) {\r\n return this.provider.post('/Autoload/IsAutoloadAllowed', data);\r\n }\r\n\r\n getAutoloadSubscriptionForMedia(data) {\r\n return this.provider.post('/Autoload/GetAutoloadSubscriptionForMedia', data);\r\n }\r\n\r\n setupAutoloadDetails(data) {\r\n return this.provider.post('/Autoload/SetupAutoloadDetails', data);\r\n }\r\n\r\n cancelAutoloadSubscription(data) {\r\n return this.provider.post('/Autoload/CancelAutoloadSubscription', data);\r\n }\r\n\r\n createAutoloadSubscriptionWithSavedPaymentMethod(data) {\r\n return this.provider.post('/Autoload/CreateAutoloadSubscriptionWithSavedPaymentMethod', data);\r\n }\r\n\r\n modifyAutoloadSubscriptionWithSavedPaymentMethod(data) {\r\n return this.provider.post('/Autoload/ModifyAutoloadSubscriptionWithSavedPaymentMethod', data);\r\n }\r\n\r\n createAutoloadSubscription(data) {\r\n return this.provider.post('/Autoload/CreateAutoloadSubscription', data);\r\n }\r\n\r\n modifyAutoloadSubscription(data) {\r\n return this.provider.post('Autoload/ModifyAutoloadSubscription', data);\r\n }\r\n\r\n // Transit passes and autorenew\r\n getAutorenewPassDiscounts(data) {\r\n return this.provider.post('/Autorenew/GetMDPTTCPassDiscounts', data);\r\n }\r\n\r\n getAutorenewSubscriptionsForMedia(data) {\r\n return this.provider.post('/Autorenew/GetAutorenewSubscriptionsForMedia', data);\r\n }\r\n\r\n cancelAutorenewSubscription(data) {\r\n return this.provider.post('/Autorenew/CancelAutorenewSubscription', data);\r\n }\r\n\r\n createSavedPaymentAutorenewSubscription(data) {\r\n return this.provider.post('/Autorenew/CreateSavedPaymentAutorenewSubscription', data);\r\n }\r\n\r\n createAutorenewSubscription(data) {\r\n return this.provider.post('/Autorenew/CreateAutorenewSubscription', data);\r\n }\r\n\r\n manageAutorenewSubscription(data) {\r\n return this.provider.post('/Autorenew/UpdateSavedPaymentAutorenewSubscription', data);\r\n }\r\n\r\n updateAutorenewSubscriptionByMoneris(data) {\r\n return this.provider.post('/Autorenew/UpdateAutorenewSubscriptionByMoneris', data);\r\n }\r\n\r\n // Order\r\n\r\n createCachedOrder(data) {\r\n return this.provider.post('/Sales/CreateCachedOrder', data);\r\n }\r\n\r\n createOrder(data) {\r\n return this.provider.post('/Sales/CreateOrder', data);\r\n }\r\n\r\n CompleteOrderWithTicket(data) {\r\n return this.provider.post('Sales/CompleteOrderWithTicket', data);\r\n }\r\n\r\n Cancelcachedorderfrompaymentfailure(data) {\r\n return this.provider.post('Sales/Cancelcachedorderfrompaymentfailure', data);\r\n }\r\n\r\n createHotListMedia(data) {\r\n return this.provider.post('/Sales/CreateHotListMedia', data);\r\n }\r\n\r\n CompleteReplacementOrderwithTicket(data) {\r\n return this.provider.post('Sales/CompleteReplacementOrderwithTicket', data);\r\n }\r\n\r\n // Customer\r\n\r\n getRegisterPaymentMeansForCustomer(data) {\r\n return this.provider.post('/Customer/GetRegisterPaymentMeansForCustomer', data);\r\n }\r\n\r\n createTermsAndConditionsNotification(data) {\r\n return this.provider.post('/Customer/CreateTermsAndConditionsNotification', data);\r\n }\r\n\r\n getTerminatePaymentMeansForCustomer(data) {\r\n return this.provider.post('/Customer/TerminatePaymentMeansForCustomer', data);\r\n }\r\n\r\n getSubscriptionsCount(data) {\r\n return this.provider.post('/Customer/GetSubscriptionsCount', data);\r\n }\r\n\r\n createRegisteredPaymentMean(data) {\r\n return this.provider.post('/customer/CreateRegisteredPaymentMean', data);\r\n }\r\n\r\n terminateRegisterPaymentMean(data) {\r\n return this.provider.post('/customer/TerminateRegisterPaymentMean', data);\r\n }\r\n\r\n getTransitUsageReportView(data) {\r\n return this.provider.post('/Customer/GetTransitUsageReportList', data);\r\n }\r\n\r\n GetTransitUsageReportPdf(data) {\r\n return this.provider.post('/Customer/GetTransitUsageReportPdf', data, { responseType: 'blob' });\r\n }\r\n\r\n async getContactUsFormFeedback(data) {\r\n let reduxData = localstorageService().getItem('redux');\r\n reduxData = JSON.parse(reduxData);\r\n if (!reduxData?.user?.authenticated) {\r\n await this.newguestLogin();\r\n }\r\n return this.provider.post('/Customer/CustomerFeedBack', data);\r\n }\r\n\r\n customerAccountDeletion(data) {\r\n return this.provider.post('/Customer/CustomerAccountDeletion', data);\r\n }\r\n\r\n // Search\r\n\r\n getSearchResults(data) {\r\n return this.provider.post('/Search/Search', data);\r\n }\r\n\r\n //change PIN\r\n saveChangePinDetails(data) {\r\n return this.provider.post('/PrestoFareMedia/ChangePin', data);\r\n }\r\n\r\n //B2CAccountCreationController\r\n\r\n B2CAccountCreation(data) {\r\n return this.provider.post('/Customer/B2CAccountCreationAuthentication', data);\r\n }\r\n\r\n getAzureData(url) {\r\n return this.provider.get(url);\r\n }\r\n}\r\n\r\nconst api = new API();\r\n\r\nexport default api;\r\n","export default {\r\n FETCH_ALL_DATA: 'user/FETCH_ALL_DATA',\r\n CHANGE_STATUS: 'user/CHANGE_STATUS',\r\n SET_CASL_POPUP_STATUS: 'user/SET_CASL_POPUP_STATUS',\r\n SET_IS_POPUP_OPENED: 'user/SET_IS_POPUP_OPENED',\r\n SET_USER_INFO: 'user/SET_USER_INFO',\r\n SET_SESSION_INSTANCEID: 'user/SET_SESSION_INSTANCEID',\r\n SET_SHOPPING_CART: 'user/SET_SHOPPING_CART',\r\n ADD_SHOPPING_CART_MESSAGE: 'user/ADD_SHOPPING_CARD_MESSAGE',\r\n REMOVE_NEW_ITEM_FLAG: 'user/REMOVE_NEW_ITEM_FLAG',\r\n ITEMS_ARE_LOADING: 'user/ITEMS_ARE_LOADING',\r\n SHOW_SCREEN_HEADER: 'user/SHOW_SCREEN_HEADER',\r\n WEAK_PASSWORD_AND_QAA: 'user/WEAK_PASSWORD',\r\n WEAK_PASSWORD: 'user/WEAK_PASSWORD',\r\n WEAK_QAA: 'user/WEAK_QAA',\r\n SELECT_CARD: 'user/SELECT_CARD',\r\n SET_MEDIA_CURRENT_BALANCE: 'user/SET_MEDIA_CURRENT_BALANCE',\r\n REMOVE_ALL_FROM_SHOPPING_CART: 'user/REMOVE_ALL_FROM_SHOPPING_CART',\r\n SET_NOTIFICATION: 'user/SET_NOTIFICATION',\r\n UPDATE_NOTIFICATION: 'user/UPDATE_NOTIFICATION',\r\n DISMISS_NOTIFICATION: 'user/DISMISS_NOTIFICATION',\r\n SET_PENDING_PRODUCTS: 'user/SET_PENDING_PRODUCTS',\r\n SET_EMAIL_ERROR: 'user/SET_EMAIL_ERROR',\r\n SET_WEAK_ACCOUNT: 'user/SET_WEAK_ACCOUNT',\r\n SET_NEW_SHIPPING_DETAILS: 'user/SET_NEW_SHIPPING_DETAILS',\r\n SET_CURRENT_SHIPPING_DETAILS: 'user/SET_CURRENT_SHIPPING_DETAILS',\r\n SET_ADDRESS_TYPE: 'user/SET_ADDRESS_TYPE',\r\n SET_SHOPPING_CART_ID: 'user/SET_SHOPPING_CART_ID',\r\n SET_DEACTIVATE_CARD_TYPE: 'user/SET_DEACTIVATE_CARD_TYPE',\r\n SET_HOTLIST_API_SUCCESS: 'user/SET_HOTLIST_API_SUCCESS',\r\n SET_PAYMENT_API_SUCCESS: 'user/SET_PAYMENT_API_SUCCESS',\r\n SET_ORDER_CARD_RESPONSE: 'user/SET_ORDER_CARD_RESPONSE',\r\n SET_NEW_CARD_DETAILS: 'user/SET_NEW_CARD_DETAILS',\r\n SET_SHOPPING_SHIPPING_DETAILS: 'user/SET_SHOPPING_SHIPPING_DETAILS',\r\n SET_BALANCE_AUTOLOAD_DATA: 'user/SET_BALANCE_AUTOLOAD_DATA',\r\n SET_SELECTED_CARD_DATA: 'user/SET_SELECTED_CARD_DATA',\r\n SET_USER_PERSONAL_INFO: 'user/SET_USER_PERSONAL_INFO',\r\n SET_TRANSIT_CHECKOUT_PAGE: 'user/SET_TRANSIT_CHECKOUT_PAGE',\r\n EMPTY_SHOPPING_CART_MESSAGE: 'user/EMPTY_SHOPPING_CART_MESSAGE',\r\n SET_GUEST_USER_ENABLED: 'user/SET_GUEST_USER_ENABLED',\r\n SET_GUEST_SIGN_POPUP_ENABLED: 'SET_GUEST_SIGN_POPUP_ENABLED',\r\n SET_GUEST_USER_CHECKOUT: 'SET_GUEST_USER_CHECKOUT',\r\n SET_USER_SIGNED_FROM_GUEST_FLOW: 'SET_USER_SIGNED_FROM_GUEST_FLOW',\r\n SET_GUEST_SHOPPING_CART_TOKEN: 'SET_GUEST_SHOPPING_CART_TOKEN',\r\n SET_GUEST_SHOPPING_CART_PAYLOAD: 'SET_GUEST_SHOPPING_CART_PAYLOAD',\r\n SET_USER_SIGNED_FROM_CREATE_ACCOUNT: 'SET_USER_SIGNED_FROM_CREATE_ACCOUNT',\r\n ANONYMOUS_ACCESS_TOKEN: 'user/ANONYMOUS_ACCESS_TOKEN',\r\n SET_GUEST_SIGN_POPUP_ENABLED_FROM_ORDERCARD: 'SET_GUEST_SIGN_POPUP_ENABLED_FROM_ORDERCARD',\r\n CARD_REMOVED: 'CARD_REMOVED',\r\n GO_BACK_URL: 'GO_BACK_URL',\r\n SET_MEDIA_NICK_NAME: 'SET_MEDIA_NICK_NAME',\r\n SET_CONTACTLESS_MEDIA_NICK_NAME: 'SET_CONTACTLESS_MEDIA_NICK_NAME',\r\n SET_INITIAL_CARD: 'SET_INITIAL_CARD',\r\n SET_MEDIA_CURRENT_PASSES: 'SET_MEDIA_CURRENT_PASSES',\r\n TTC_CHECKOUT_VALUES: 'TTC_CHECKOUT_VALUES',\r\n SELECT_CARD_REDIRECT: 'user/SELECT_CARD_REDIRECT',\r\n LOGGED_IN_TIME: 'user/LOGGED_IN_TIME',\r\n LOGGED_OUT_TIME: 'user/LOGGED_OUT_TIME',\r\n LAST_VISITED_SECURED_ROUTE: 'user/LAST_VISITED_SECURED_ROUTE',\r\n FIRST_NAME_PERSONAL_INFO: 'user/FIRST_NAME_PERSONAL_INFO',\r\n UPDATED_PERSONAL_INFO: 'user/Updated_PERSONAL_INFO',\r\n SET_GOOGLE_WALLET_DATA: 'user/SET_GOOGLE_WALLET_DATA',\r\n SET_IS_CARD_CLICKED: 'user/SET_IS_CARD_CLICKED',\r\n SET_IS_MOBILE: 'user/SET_IS_MOBILE',\r\n DELETE_ACCOUNT: 'user/DELETE_ACCOUNT',\r\n UPDATE_LOGIN_AND_SECURITY_FIELDS: 'user/UPDATE_LOGIN_AND_SECURITY_FIELDS',\r\n SET_B2C_CLAIMS_RESPONSE: 'user/SET_B2C_CLAIMS_RESPONSE',\r\n SET_MDP_PAUSED_PASS: 'user/SET_MDP_PAUSED_PASS',\r\n};\r\n","export default {\r\n SET_TRANSIT_PASSES: 'products/SET_TRANSIT_PASSES',\r\n SET_TRANSIT_AGENCY_LOGOS: 'products/SET_TRANSIT_AGENCY_LOGOS',\r\n SET_DISCOUNT_TYPES: 'products/SET_DISCOUNT_TYPES',\r\n SET_EDIT_CARD_MODE: 'products/SET_EDIT_CARD_MODE',\r\n SET_ACTIVATE_CARD_MODE: 'products/SET_ACTIVATE_CARD_MODE',\r\n SET_MANAGE_AUTO_RENEW_MODE: 'products/SET_MANAGE_AUTO_RENEW_MODE',\r\n SET_REDEEMVOUCHER_STEPPER_BLOCK: 'products/SET_REDEEMVOUCHER_STEPPER_BLOCK',\r\n SET_CHANGE_PIN: 'products/SET_CHANGE_PIN',\r\n SET_ACTIVATE_CARD_MYPRODUCTS: 'products/SET_ACTIVATE_CARD_MYPRODUCTS',\r\n SET_REMOVE_CARD: 'products/SET_REMOVE_CARD'\r\n};\r\n","import types from './types';\r\n\r\nexport function setTransitPasses(data) {\r\n return {\r\n type: types.SET_TRANSIT_PASSES,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n\r\nexport function setTransitAgencyLogos(data) {\r\n return {\r\n type: types.SET_TRANSIT_AGENCY_LOGOS,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n\r\nexport function setDiscountTypes(data) {\r\n return {\r\n type: types.SET_DISCOUNT_TYPES,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n\r\nexport function setEditCardMode(data) {\r\n return {\r\n type: types.SET_EDIT_CARD_MODE,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setChangeCardPinMode(data) {\r\n return {\r\n type: types.SET_CHANGE_PIN,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setRemoveCardMode(data) {\r\n return {\r\n type: types.SET_REMOVE_CARD,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setActivateCardMode(data) {\r\n return {\r\n type: types.SET_ACTIVATE_CARD_MODE,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setManageAutoRenewMode(data) {\r\n return {\r\n type: types.SET_MANAGE_AUTO_RENEW_MODE,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setRedeemVoucherStepperBlock(data) {\r\n return {\r\n type: types.SET_REDEEMVOUCHER_STEPPER_BLOCK,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setActivateCardMyProducts(payload) {\r\n return {\r\n type: types.SET_ACTIVATE_CARD_MYPRODUCTS,\r\n payload,\r\n };\r\n}\r\n","export default {\r\n SET_SETTINGS: 'settings/SET_SETTINGS',\r\n};\r\n","export default {\r\n invalidCredentials: 'AFMS-DAX-FE-0005',\r\n accountLocked: 'AFMS-DAX-FE-0008',\r\n pendingTermination: 'AFMS-CRT-FE-0029',\r\n pendingLoad: 'AFMS-CRT-FE-0054',\r\n pfmTechnicalException1: 'AFMS-CRT-TE-0001',\r\n pfmTechnicalException2: 'AFMS-CRT-TE-0002',\r\n pfmTechnicalException3: 'AFMS-CRT-TE-0003',\r\n invalidItemsInShoppingCart: 'AFMS-CRT-FE-0014',\r\n shoppingCartNotExists: 'AFMS-CRT-FE-0015',\r\n unverifiedEmail: 'AFMS-CRT-FE-0032',\r\n\r\n weakPassword: 'AFMS-CRT-FE-0051',\r\n weakQaA: 'AFMS-CRT-FE-0052',\r\n weakPasswordAndQaA: 'AFMS-CRT-FE-0053',\r\n\r\n securityWrongPassword: 'SetSecurityQuestionsWithAnswers_WrongPassword',\r\n securityUsernameAlreadyExists: 'SetSecurityQuestionsWithAnswers_UserNameAlreadyExist',\r\n securityEmailAlreadyExists: 'AFMS-CRT-FE-0035',\r\n redeemVoucherDOBError: 'AFMS-PV-API-0083',\r\n};\r\n","export default {\r\n SET_BUSINESS_RULES: 'businessRules/SET_BUSINESS_RULES',\r\n};\r\n","export default {\r\n CRDNC: 'CRDNC',\r\n};\r\n","import api from '../../services/api';\r\nimport types from './types';\r\nimport { setTransitPasses, setTransitAgencyLogos, setDiscountTypes } from '../products/actions';\r\nimport { setSettings } from '../settings/actions';\r\nimport apiResponses from '../../constants/apiResponses';\r\nimport { setBusinessRules } from '../businessRules/actions';\r\nimport { redirectToUrlinCaseofFailure } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\n\r\nexport function setCheckoutTransitPage(payload) {\r\n return {\r\n type: types.SET_TRANSIT_CHECKOUT_PAGE,\r\n payload,\r\n };\r\n}\r\n\r\nexport function updateLoginAndSecurityFields(payload) {\r\n return {\r\n type: types.UPDATE_LOGIN_AND_SECURITY_FIELDS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setB2cClaimsResponse(payload) {\r\n return {\r\n type: types.SET_B2C_CLAIMS_RESPONSE,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setSelectedCardData(payload) {\r\n return {\r\n type: types.SET_SELECTED_CARD_DATA,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setBalanceAutoLoadData(payload) {\r\n return {\r\n type: types.SET_BALANCE_AUTOLOAD_DATA,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setShoppingCartShippingDetails(payload) {\r\n return {\r\n type: types.SET_SHOPPING_SHIPPING_DETAILS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setNewCardDetails(payload) {\r\n return {\r\n type: types.SET_NEW_CARD_DETAILS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setOrderCardResponse(payload) {\r\n return {\r\n type: types.SET_ORDER_CARD_RESPONSE,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setHotlistApiSuccess(payload) {\r\n return {\r\n type: types.SET_HOTLIST_API_SUCCESS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setPaymentResponse(payload) {\r\n return {\r\n type: types.SET_PAYMENT_API_SUCCESS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setDeactivateCardType(payload) {\r\n return {\r\n type: types.SET_DEACTIVATE_CARD_TYPE,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setShoppingCartId(payload) {\r\n return {\r\n type: types.SET_SHOPPING_CART_ID,\r\n payload,\r\n };\r\n}\r\nexport function setUserSignedfromGuestFlow(payload) {\r\n return {\r\n type: types.SET_USER_SIGNED_FROM_GUEST_FLOW,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setUserSignedfromCreateAccount(payload) {\r\n return {\r\n type: types.SET_USER_SIGNED_FROM_CREATE_ACCOUNT,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setAddressType(payload) {\r\n return {\r\n type: types.SET_ADDRESS_TYPE,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setCurrentShippingDetails(payload) {\r\n return {\r\n type: types.SET_CURRENT_SHIPPING_DETAILS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setNewShippingDetails(payload) {\r\n return {\r\n type: types.SET_NEW_SHIPPING_DETAILS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function fetchAllDataSuccessfullyLoaded(success) {\r\n return {\r\n type: types.FETCH_ALL_DATA,\r\n success,\r\n };\r\n}\r\n\r\nexport function itemsHaveError(bool) {\r\n return {\r\n type: 'ITEMS_HAVE_ERROR',\r\n hasError: bool,\r\n };\r\n}\r\n\r\nexport function changeUserStatus(authenticated, anonymous = false) {\r\n return {\r\n type: types.CHANGE_STATUS,\r\n payload: {\r\n authenticated,\r\n anonymous,\r\n },\r\n };\r\n}\r\nexport function anonymousSaveAccessToken(payload) {\r\n return {\r\n type: types.ANONYMOUS_ACCESS_TOKEN,\r\n payload,\r\n };\r\n}\r\n\r\nexport function updateCaslPopupStatus() {\r\n return {\r\n type: types.SET_CASL_POPUP_STATUS,\r\n };\r\n}\r\n\r\nexport function updateCaslPopupOpenedStatus() {\r\n return {\r\n type: types.SET_IS_POPUP_OPENED,\r\n };\r\n}\r\n\r\nexport function updateIsCardClickedStatus(payload) {\r\n return {\r\n type: types.SET_IS_CARD_CLICKED,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setUserInfo(userInfo) {\r\n return {\r\n type: types.SET_USER_INFO,\r\n payload: {\r\n ...userInfo,\r\n },\r\n };\r\n}\r\n\r\nexport function setIsMobile(isMobile) {\r\n return {\r\n type: types.SET_IS_MOBILE,\r\n payload: isMobile,\r\n };\r\n}\r\n\r\nexport function setUserPersonalInfo(data) {\r\n return {\r\n type: types.SET_USER_PERSONAL_INFO,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setSessionInstanceId(sessionInstanceId) {\r\n return {\r\n type: types.SET_SESSION_INSTANCEID,\r\n payload: {\r\n sessionInstanceId,\r\n },\r\n };\r\n}\r\n\r\nexport function addShoppingCartMessage(message) {\r\n return {\r\n type: types.ADD_SHOPPING_CART_MESSAGE,\r\n payload: {\r\n message,\r\n },\r\n };\r\n}\r\n\r\nexport function setShoppingCart(data, isNewItem) {\r\n return {\r\n type: types.SET_SHOPPING_CART,\r\n payload: {\r\n ...data,\r\n isNewItem,\r\n },\r\n };\r\n}\r\n\r\nexport function cardRemoved(isCardRemoved) {\r\n return {\r\n type: types.CARD_REMOVED,\r\n payload: {\r\n isCardRemoved,\r\n },\r\n };\r\n}\r\n\r\nexport function deleteAccount(isAccountDeleted) {\r\n return {\r\n type: types.DELETE_ACCOUNT,\r\n payload: {\r\n isAccountDeleted,\r\n },\r\n };\r\n}\r\n\r\nexport function removeNewItemFlag() {\r\n return {\r\n type: types.REMOVE_NEW_ITEM_FLAG,\r\n payload: {},\r\n };\r\n}\r\n\r\nexport function itemsAreLoading(bool) {\r\n return {\r\n type: types.ITEMS_ARE_LOADING,\r\n payload: {\r\n isLoading: bool,\r\n },\r\n };\r\n}\r\n\r\nexport function showScreenHeader(bool) {\r\n return {\r\n type: types.SHOW_SCREEN_HEADER,\r\n payload: {\r\n isScreenHeaderVisible: bool,\r\n },\r\n };\r\n}\r\n\r\nexport function itemsFetchDataSuccess(items) {\r\n return {\r\n type: 'ITEMS_FETCH_DATA_SUCCESS',\r\n items,\r\n };\r\n}\r\n\r\nexport function selectCard(\r\n card,\r\n config = { url: '', includeLanguage: true, isInternalLink: true, redirected: false }\r\n) {\r\n return Promise.resolve({\r\n type: types.SELECT_CARD,\r\n payload: {\r\n selectedCard: card,\r\n redirectAfterCardSelected: config,\r\n },\r\n });\r\n}\r\n\r\nexport function setSelectCardRedirect(\r\n redirectObj = { url: '', includeLanguage: true, isInternalLink: true, redirected: false }\r\n) {\r\n return Promise.resolve({\r\n type: types.SELECT_CARD_REDIRECT,\r\n payload: {\r\n redirectAfterCardSelected: redirectObj,\r\n },\r\n });\r\n}\r\nexport function setInitialCard(userinfo) {\r\n return {\r\n type: types.SET_INITIAL_CARD,\r\n payload: {\r\n ...userinfo,\r\n },\r\n };\r\n}\r\n\r\nexport function weakPasswordAndQaA(bool) {\r\n return {\r\n type: types.WEAK_PASSWORD_AND_QAA,\r\n payload: {\r\n isWeakPasswordAndQaAVisible: bool,\r\n },\r\n };\r\n}\r\n\r\nexport function weakPassword(bool) {\r\n return {\r\n type: types.WEAK_PASSWORD,\r\n payload: {\r\n isWeakPasswordVisible: bool,\r\n },\r\n };\r\n}\r\n\r\nexport function weakQaA(bool) {\r\n return {\r\n type: types.WEAK_QAA,\r\n payload: {\r\n isWeakQaAVisible: bool,\r\n },\r\n };\r\n}\r\nexport function setEmailError(emailError) {\r\n return {\r\n type: types.SET_EMAIL_ERROR,\r\n payload: {\r\n emailError,\r\n },\r\n };\r\n}\r\n\r\nexport function setWeakAccount(isWeakAccount) {\r\n return {\r\n type: types.SET_WEAK_ACCOUNT,\r\n payload: {\r\n isWeakAccount,\r\n },\r\n };\r\n}\r\n\r\nexport function setLoggedInTime(loggedInTime) {\r\n return {\r\n type: types.LOGGED_IN_TIME,\r\n payload: {\r\n loggedInTime,\r\n },\r\n };\r\n}\r\n\r\nexport function setLastVisitedSecuredRoute(lastVisitedSecuredRoute) {\r\n return {\r\n type: types.LAST_VISITED_SECURED_ROUTE,\r\n payload: {\r\n lastVisitedSecuredRoute,\r\n },\r\n };\r\n}\r\nexport function setFirstNamePersonalInfo(firstNameUpdatePersonalInfo) {\r\n return {\r\n type: types.FIRST_NAME_PERSONAL_INFO,\r\n payload: {\r\n firstNameUpdatePersonalInfo,\r\n },\r\n };\r\n}\r\nexport function updatePersonalInfo(fields) {\r\n return {\r\n type: types.UPDATED_PERSONAL_INFO,\r\n payload:fields,\r\n };\r\n}\r\n\r\nexport function setLogOutTime(logOutTime) {\r\n return {\r\n type: types.LOGGED_OUT_TIME,\r\n payload: {\r\n logOutTime,\r\n },\r\n };\r\n}\r\n\r\nexport function fetchUserInfo(dispatch, setResponseData, setCard = false) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getUserInfo()\r\n .then((response) => {\r\n if (setResponseData) {\r\n setResponseData(response.data.Data);\r\n }\r\n if (response.data.Error) {\r\n const error = JSON.parse(response.data.Error);\r\n if (error.Code === apiResponses.unverifiedEmail) {\r\n dispatch(setEmailError(response.data.Error));\r\n // console.log('error1', response.data.Error);\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n resolve();\r\n } else {\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n redirectToUrlinCaseofFailure(routes.technicalDifficulties);\r\n reject();\r\n }\r\n } else if (response.status !== 200) {\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n redirectToUrlinCaseofFailure(routes.technicalDifficulties);\r\n reject();\r\n } else if (response.data.Data.ReturnCode === apiResponses.weakPasswordAndQaA) {\r\n dispatch(setUserInfo(response.data.Data));\r\n if (setCard) {\r\n dispatch(setInitialCard(response.data.Data));\r\n }\r\n dispatch(weakPasswordAndQaA(true));\r\n dispatch(weakPassword(false));\r\n dispatch(weakQaA(false));\r\n resolve();\r\n } else if (response.data.Data.ReturnCode === apiResponses.weakPassword) {\r\n dispatch(setUserInfo(response.data.Data));\r\n if (setCard) {\r\n dispatch(setInitialCard(response.data.Data));\r\n }\r\n dispatch(weakPasswordAndQaA(false));\r\n dispatch(weakPassword(true));\r\n dispatch(weakQaA(false));\r\n resolve();\r\n } else if (response.data.Data.ReturnCode === apiResponses.weakQaA) {\r\n dispatch(setUserInfo(response.data.Data));\r\n if (setCard) {\r\n dispatch(setInitialCard(response.data.Data));\r\n }\r\n dispatch(weakPasswordAndQaA(false));\r\n dispatch(weakPassword(false));\r\n dispatch(weakQaA(true));\r\n resolve();\r\n } else {\r\n dispatch(setUserInfo(response.data.Data));\r\n if (setCard) {\r\n dispatch(setInitialCard(response.data.Data));\r\n }\r\n dispatch(weakPasswordAndQaA(false));\r\n dispatch(weakPassword(false));\r\n dispatch(weakQaA(false));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n redirectToUrlinCaseofFailure(routes.technicalDifficulties);\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchAllCardsBalance(dispatch, getState) {\r\n const { user } = getState();\r\n let allcards = user.fareMedias.concat(user.contactlessMedias);\r\n allcards.forEach((card) => {\r\n if (card.currentBalance === null) {\r\n dispatch(getCurrentBalance(card.visibleId));\r\n }\r\n });\r\n}\r\n\r\nexport function fetchServiceProviders(dispatch, getState) {\r\n const { user } = getState();\r\n\r\n return new Promise((resolve, reject) => {\r\n const { selectedCard } = user;\r\n\r\n const cardType = selectedCard?.type;\r\n if (cardType !== 'presto') {\r\n resolve();\r\n return;\r\n }\r\n\r\n const visibleId = selectedCard?.visibleId;\r\n if (!visibleId) {\r\n resolve();\r\n return;\r\n }\r\n\r\n api\r\n .getServiceProviders({\r\n visibleId,\r\n })\r\n .then(({ data }) => {\r\n if (!data.Success) {\r\n reject();\r\n } else {\r\n dispatch(setTransitPasses(data));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchTransitAgencyLogos(dispatch) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getTransitAgencyLogos()\r\n .then(({ data }) => {\r\n dispatch(setTransitAgencyLogos(data));\r\n resolve();\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchDiscountTypes(dispatch) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getDiscountTypes()\r\n .then(({ data }) => {\r\n dispatch(setDiscountTypes(data));\r\n resolve();\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\nexport function fetchWalletCardDetails(dispatch, getState) {\r\n const { user } = getState();\r\n let allGWCards = [];\r\n const googleWallets = user?.contactlessMedias?.filter(\r\n (card) => card.mediaType === mediaTypes.CRDNC\r\n );\r\n googleWallets.forEach((card, index) => {\r\n allGWCards.push({ DPanId: card.dpan });\r\n if (index === googleWallets.length - 1) {\r\n api.getAllWalletCardDetails([allGWCards[0]]).then((res) => {\r\n if (res?.data?.status === 'ACCEPTED') {\r\n res.data.mediaList.map((card) => {\r\n const data = {\r\n mediaList: [card],\r\n displayText: res?.data?.displayText,\r\n };\r\n dispatch(setGoogleWalletData(data));\r\n const latestVersion = Math.max(\r\n ...Object.values(data.mediaList[0].mediaInfo.provisionedMedias)?.map((media) =>\r\n parseInt(media.versionNbr)\r\n )\r\n );\r\n\r\n const latestItem = Object.values(data.mediaList[0].mediaInfo.provisionedMedias)?.find(\r\n (media) => media.versionNbr === latestVersion.toString()\r\n );\r\n let mediaSubType = null;\r\n if (latestItem && Object.keys(latestItem).length > 0) {\r\n mediaSubType = latestItem.mediaSubType;\r\n } else {\r\n const inactiveMedia = Object.values(\r\n data.mediaList[0].mediaInfo.provisionedMedias\r\n ).filter((media) => media.status !== 'ACTIVE' && media.status !== 'HOTLISTED');\r\n const filteredMedia = inactiveMedia.filter(\r\n (media) =>\r\n media.mediaSubType === 'CRDNC_GOOG' || media.mediaSubType === 'CRDNC_AAPL'\r\n );\r\n filteredMedia.sort((a, b) => b.versionNbr - a.versionNbr);\r\n\r\n if (filteredMedia.length > 0) {\r\n mediaSubType = filteredMedia[0].mediaSubType;\r\n }\r\n }\r\n api\r\n .getStoredMediaTypeInSession({\r\n MediaType: mediaSubType,\r\n })\r\n .then((res) => {\r\n console.log('response', res);\r\n });\r\n });\r\n }\r\n });\r\n }\r\n });\r\n}\r\nexport function fetchWalletCardDetailsSigninSuccess(dispatch, getState) {\r\n return new Promise((resolve, reject) => {\r\n const { user } = getState();\r\n let allGWCards = [];\r\n let mediaSubType = null;\r\n const googleWallets = user?.contactlessMedias?.filter(\r\n (card) => card.mediaType === mediaTypes.CRDNC\r\n );\r\n if (googleWallets?.length) {\r\n googleWallets.forEach((card, index) => {\r\n allGWCards.push({ DPanId: card.dpan });\r\n if (index === googleWallets.length - 1) {\r\n api\r\n .getAllWalletCardDetails([allGWCards[0]])\r\n .then((res) => {\r\n if (res?.data?.status === 'ACCEPTED') {\r\n res.data.mediaList.map((card) => {\r\n const data = {\r\n mediaList: [card],\r\n displayText: res?.data?.displayText,\r\n };\r\n dispatch(setGoogleWalletData(data));\r\n const latestVersion = Math.max(\r\n ...Object.values(data.mediaList[0].mediaInfo.provisionedMedias)?.map((media) =>\r\n parseInt(media.versionNbr)\r\n )\r\n );\r\n\r\n const latestItem = Object.values(\r\n data.mediaList[0].mediaInfo.provisionedMedias\r\n )?.find((media) => media.versionNbr === latestVersion.toString());\r\n\r\n if (latestItem && Object.keys(latestItem).length > 0) {\r\n mediaSubType = latestItem.mediaSubType;\r\n } else {\r\n const inactiveMedia = Object.values(\r\n data.mediaList[0].mediaInfo.provisionedMedias\r\n ).filter((media) => media.status !== 'ACTIVE' && media.status !== 'HOTLISTED');\r\n const filteredMedia = inactiveMedia.filter(\r\n (media) =>\r\n media.mediaSubType === 'CRDNC_GOOG' || media.mediaSubType === 'CRDNC_AAPL'\r\n );\r\n filteredMedia.sort((a, b) => b.versionNbr - a.versionNbr);\r\n\r\n if (filteredMedia.length > 0) {\r\n mediaSubType = filteredMedia[0].mediaSubType;\r\n }\r\n }\r\n\r\n\r\n });\r\n resolve(mediaSubType);\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n }\r\n });\r\n }\r\n });\r\n}\r\n\r\nexport function fetchWalletDetails(dispatch, getState) {\r\n return new Promise((resolve, reject) => {\r\n const { user } = getState();\r\n let allGWCards = [];\r\n const googleWallets = user?.contactlessMedias?.filter(\r\n (card) => card.mediaType === mediaTypes.CRDNC\r\n );\r\n googleWallets.forEach((card, index) => {\r\n allGWCards.push({ DPanId: card.dpan });\r\n if (index === googleWallets.length - 1) {\r\n api\r\n .getAllWalletCardDetails(allGWCards)\r\n .then((res) => {\r\n if (res?.data?.status === 'ACCEPTED') {\r\n res.data.mediaList.map((card) => {\r\n const data = {\r\n mediaList: [card],\r\n displayText: res?.data?.displayText,\r\n };\r\n dispatch(setGoogleWalletData(data));\r\n resolve();\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n }\r\n });\r\n });\r\n}\r\n\r\nexport function fetchAvailableSettings(dispatch) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getAvailableSettings()\r\n .then(({ data }) => {\r\n if (!data.Success) {\r\n reject();\r\n } else {\r\n dispatch(setSettings(data));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchStoreMediaSession(mediaSubType) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getStoredMediaTypeInSession({\r\n MediaType: mediaSubType,\r\n })\r\n .then((res) => {\r\n resolve();\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchAvailableBusinessRules(dispatch) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getAllBusinessRules()\r\n .then(({ data }) => {\r\n dispatch(setBusinessRules(data));\r\n resolve();\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchSitecoreSessionId(dispatch) {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getSitecoreSessionId()\r\n .then(({ data }) => {\r\n if (!data.Success) {\r\n reject();\r\n } else {\r\n dispatch(setSessionInstanceId(data.Data));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchWebChatCookie(getState) {\r\n const { user } = getState();\r\n return new Promise((resolve, reject) => {\r\n api\r\n .setWebChatCookie({ customerId: user.customerId })\r\n .then((response) => {\r\n if (response.status === 200) {\r\n resolve();\r\n } else {\r\n reject();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nfunction resetShoppingCart(dispatch) {\r\n dispatch(setShoppingCart({ OrderLines: [], TotalAmount: 0 }, false));\r\n}\r\n\r\nexport function fetchShoppingCart(dispatch, getState) {\r\n resetShoppingCart(dispatch);\r\n const { user } = getState();\r\n\r\n return new Promise((resolve, reject) => {\r\n const { customerId, selectedCard } = user;\r\n if (!customerId || !selectedCard) {\r\n reject();\r\n return;\r\n }\r\n\r\n const cardType = selectedCard?.type;\r\n if (cardType !== 'presto') {\r\n resolve();\r\n return;\r\n }\r\n\r\n if (!selectedCard.visibleId) {\r\n resolve();\r\n return;\r\n }\r\n\r\n api\r\n .getShoppingCart({\r\n customerId,\r\n visibleId: selectedCard.visibleId,\r\n mediaId: selectedCard.mediaId,\r\n })\r\n .then((response) => {\r\n if (response.status !== 200) {\r\n reject();\r\n } else if (response.data.Error) {\r\n const error = JSON.parse(response.data.Error);\r\n if (error.Code === apiResponses.shoppingCartNotExists) {\r\n resolve();\r\n } else {\r\n reject();\r\n }\r\n } else if (!response.data.ShoppingCart) {\r\n reject();\r\n } else {\r\n const order = response.data.ShoppingCart.Order;\r\n const isNewItem = false;\r\n dispatch(setShoppingCart(order, isNewItem));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n}\r\n\r\nexport function fetchUserInfoData() {\r\n return (dispatch, getState) => {\r\n fetchUserInfo(dispatch)\r\n .then(() => {\r\n const { user } = getState();\r\n let allcards = user.fareMedias.concat(user.contactlessMedias);\r\n allcards.forEach((card) => {\r\n if (card.currentBalance === null) {\r\n dispatch(getCurrentBalance(card.visibleId));\r\n }\r\n });\r\n })\r\n .catch((error) => { });\r\n };\r\n}\r\n\r\nfunction hasCRDNC(mediaInstances) {\r\n return mediaInstances?.some((media) => media.mediaType === mediaTypes.CRDNC);\r\n}\r\n\r\nexport function fetchAllData(setInitialCard = true) {\r\n return (dispatch, getState) => {\r\n let mediaSubType = null;\r\n let userResponse = null;\r\n\r\n fetchUserInfo(\r\n dispatch,\r\n (res) => {\r\n userResponse = res;\r\n },\r\n setInitialCard\r\n )\r\n .then(() => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n return fetchWalletCardDetailsSigninSuccess(dispatch, getState);\r\n }\r\n })\r\n .then((mediaType) => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n mediaSubType = mediaType;\r\n return fetchStoreMediaSession(mediaSubType);\r\n }\r\n })\r\n .then(() => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n return fetchWalletDetails(dispatch, getState);\r\n }\r\n })\r\n .then(() => {\r\n Promise.all([\r\n fetchWebChatCookie(getState),\r\n fetchAllCardsBalance(dispatch, getState),\r\n fetchServiceProviders(dispatch, getState),\r\n fetchTransitAgencyLogos(dispatch),\r\n fetchAvailableBusinessRules(dispatch),\r\n fetchSitecoreSessionId(dispatch),\r\n fetchShoppingCart(dispatch, getState),\r\n fetchDiscountTypes(dispatch),\r\n ])\r\n .then(() => {\r\n dispatch(fetchAllDataSuccessfullyLoaded(true));\r\n })\r\n .catch((error) => {\r\n dispatch(itemsHaveError(true));\r\n // console.log('error2', error);\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n });\r\n })\r\n .catch((error) => {\r\n dispatch(itemsHaveError(true));\r\n // console.log('error3', error);\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n });\r\n };\r\n}\r\n\r\nexport function updateUserInfo(dispatch, setCard = false) {\r\n return (dispatch, getState) => {\r\n let userResponse = null;\r\n fetchUserInfo(\r\n dispatch,\r\n (res) => {\r\n userResponse = res;\r\n },\r\n setCard\r\n ).then(() => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n return fetchWalletDetails(dispatch, getState);\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport function refreshUserDataAfterPrestoCardAdded(setCard = false) {\r\n return (dispatch, getState) => {\r\n let mediaSubType = null;\r\n let userResponse = null;\r\n\r\n fetchUserInfo(\r\n dispatch,\r\n (res) => {\r\n userResponse = res;\r\n },\r\n setCard\r\n )\r\n .then(() => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n return fetchWalletCardDetailsSigninSuccess(dispatch, getState);\r\n }\r\n })\r\n .then((mediaType) => {\r\n if (\r\n userResponse?.Account?.mediaInstances?.length > 0 &&\r\n hasCRDNC(userResponse?.Account?.mediaInstances) &&\r\n userResponse?.Role === 'Registered'\r\n ) {\r\n mediaSubType = mediaType;\r\n return fetchStoreMediaSession(mediaSubType);\r\n }\r\n })\r\n .then(() => {\r\n Promise.all([\r\n fetchServiceProviders(dispatch, getState),\r\n fetchTransitAgencyLogos(dispatch),\r\n fetchShoppingCart(dispatch, getState),\r\n ])\r\n .then(() => {\r\n dispatch(fetchAllDataSuccessfullyLoaded(true));\r\n })\r\n .catch((error) => {\r\n dispatch(itemsHaveError(true));\r\n // console.log('error5', error);\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n });\r\n })\r\n .catch((error) => {\r\n dispatch(itemsHaveError(true));\r\n // console.log('error4', error);\r\n dispatch(fetchAllDataSuccessfullyLoaded(false));\r\n });\r\n };\r\n}\r\n\r\nexport function removeAllFromShoppingCart() {\r\n return {\r\n type: types.REMOVE_ALL_FROM_SHOPPING_CART,\r\n payload: {\r\n shoppingCartQuantity: 0,\r\n shoppingCart: {\r\n addMessage: [],\r\n isNewItem: false,\r\n items: [],\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport function emptyShoppingCartMessage() {\r\n return {\r\n type: types.EMPTY_SHOPPING_CART_MESSAGE,\r\n };\r\n}\r\n\r\nexport function removeFromShoppingCart(data, callback = null) {\r\n return (dispatch) => {\r\n api.removeProductFromCart(data).then((response) => {\r\n if (callback) {\r\n callback();\r\n }\r\n if (response.status !== 200) {\r\n throw Error(response.statusText);\r\n }\r\n if (response.data.Success) {\r\n dispatch(setShoppingCart(response?.data?.ShoppingCart.Order, false));\r\n // dispatch(cardRemoved(true));\r\n } else {\r\n let errorObj = JSON.parse(response.data.Error);\r\n if (errorObj.Code) {\r\n throw Error(errorObj.Description);\r\n }\r\n throw Error('Error');\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport function itemsFetchData(reqMethod, successAction) {\r\n return (dispatch) => {\r\n dispatch(itemsAreLoading(true));\r\n\r\n api[reqMethod]\r\n .then((response) => {\r\n if (response.status !== 200) {\r\n throw Error(response.statusText);\r\n }\r\n\r\n dispatch(itemsAreLoading(false));\r\n\r\n return response;\r\n })\r\n .then((response) => dispatch(successAction(response.data)))\r\n .catch(() => dispatch(itemsHaveError(true)));\r\n };\r\n}\r\n\r\nexport function setMediaCurrentBalance(data) {\r\n return {\r\n type: types.SET_MEDIA_CURRENT_BALANCE,\r\n payload: {\r\n visibleId: data.visibleId,\r\n currentBalance: data.currentBalance,\r\n },\r\n };\r\n}\r\n\r\nexport function setMediaCurrentPasses(data) {\r\n return {\r\n type: types.SET_MEDIA_CURRENT_PASSES,\r\n payload: {\r\n visibleId: data.visibleId,\r\n passes: data.passes,\r\n },\r\n };\r\n}\r\nexport function getUpdatedGoogleWalletData(data) {\r\n const getFareTypeData = () => {\r\n const concessionArray = Object.keys(data.mediaList[0].mediaProfile.concessions);\r\n const isOtherServiceProviderIdExists = concessionArray?.some((id) => id != 0);\r\n const fareTypeId = data.mediaList[0].mediaProfile.concessions[0].id;\r\n const isAdultSeniorFaretype = fareTypeId === 0 || fareTypeId === 2;\r\n const expiryDate = !isAdultSeniorFaretype\r\n ? data.mediaList[0].mediaProfile.concessions[0].expirationDate\r\n : 'N/A';\r\n const type = `CONCESSION0_${fareTypeId}`;\r\n const fareType = data.displayText[type];\r\n return {\r\n expiryDate,\r\n fareType,\r\n isOtherServiceProviderIdExists,\r\n };\r\n };\r\n const { expiryDate, fareType, isOtherServiceProviderIdExists } = getFareTypeData();\r\n const autoload = data.mediaList[0].products.subscriptions?.some(\r\n (sub) => sub.subscriptionType === 'FUNDS' && sub.fundSubscription.status === 'ACTIVE'\r\n );\r\n const latestVersion = Math.max(\r\n ...Object.values(data.mediaList[0].mediaInfo.provisionedMedias)?.map((media) =>\r\n parseInt(media.versionNbr)\r\n )\r\n );\r\n\r\n const latestItem = Object.values(data.mediaList[0].mediaInfo.provisionedMedias)?.find(\r\n (media) => media.versionNbr === latestVersion.toString()\r\n );\r\n\r\n const hasActiveImageGoog =\r\n latestItem &&\r\n (latestItem.status === 'HOTLISTED' || latestItem.status === 'ACTIVE') &&\r\n latestItem.mediaSubType === 'CRDNC_GOOG';\r\n\r\n const hasActiveImageAppl =\r\n latestItem &&\r\n (latestItem.status === 'HOTLISTED' || latestItem.status === 'ACTIVE') &&\r\n latestItem.mediaSubType === 'CRDNC_AAPL';\r\n\r\n let mediaSubTypeWallet = null;\r\n if (latestItem && Object.keys(latestItem).length > 0) {\r\n mediaSubTypeWallet = latestItem.mediaSubType;\r\n } else {\r\n const inactiveMedia = Object.values(data.mediaList[0].mediaInfo.provisionedMedias).filter(\r\n (media) => media.status !== 'ACTIVE' && media.status !== 'HOTLISTED'\r\n );\r\n const filteredMedia = inactiveMedia.filter(\r\n (media) => media.mediaSubType === 'CRDNC_GOOG' || media.mediaSubType === 'CRDNC_AAPL'\r\n );\r\n\r\n filteredMedia.sort((a, b) => b.versionNbr - a.versionNbr);\r\n if (filteredMedia.length > 0) {\r\n mediaSubTypeWallet = filteredMedia[0].mediaSubType;\r\n }\r\n }\r\n const allActivePasses = Object.keys(data.mediaList[0].products.commutePlans);\r\n const activePasses = allActivePasses.filter(\r\n (id) => data.mediaList[0].products?.commutePlans[id]?.length > 0\r\n );\r\n const extractDefaultTrips = () => {\r\n const defaultTrips = data.mediaList[0].mediaProfile.defaultTrips;\r\n const displayText = data.displayText;\r\n if (Object.keys(defaultTrips).length === 0) {\r\n return { showDefaultTrips: false };\r\n }\r\n const fromStopKey = `STOPS1_${defaultTrips['1'].fromLocationId}`;\r\n const toStopKey = `STOPS1_${defaultTrips['1'].toLocationId}`;\r\n const fromLocationId = displayText[fromStopKey];\r\n const toLocationId = displayText[toStopKey];\r\n\r\n return { showDefaultTrips: true, fromLocationId, toLocationId };\r\n };\r\n return {\r\n dpan: data.mediaList[0].mediaInfo.dpan,\r\n cardNumber: data.mediaList[0].mediaInfo.fpan,\r\n currentBalance: data.mediaList[0].products.funds,\r\n status: data.mediaList[0].mediaInfo.provisionedMedias.status,\r\n passes: data.mediaList[0].products.commutePlans,\r\n subscriptions: data.mediaList[0].products.subscription,\r\n defaultTrips: data.mediaList[0].mediaProfile.defaultTrips,\r\n concession: data.mediaList[0].mediaProfile.concessions,\r\n displayText: data.displayText,\r\n expiryDate,\r\n fareType,\r\n isOtherServiceProviderIdExists,\r\n autoload,\r\n hasActiveImageGoog,\r\n hasActiveImageAppl,\r\n mediaSubTypeWallet,\r\n activePasses,\r\n defaultTripsData: extractDefaultTrips(),\r\n };\r\n}\r\nexport function setGoogleWalletData(data) {\r\n const updatedGWData = getUpdatedGoogleWalletData(data);\r\n return {\r\n type: types.SET_GOOGLE_WALLET_DATA,\r\n payload: updatedGWData,\r\n };\r\n}\r\nexport function setMediaNickName(data) {\r\n return {\r\n type: types.SET_MEDIA_NICK_NAME,\r\n payload: {\r\n NickName: data.NickName,\r\n IsPrimary: data.IsPrimary,\r\n visibleId: data.visibleId,\r\n },\r\n };\r\n}\r\n\r\nexport function setContactlessMediaNickName(data) {\r\n return {\r\n type: types.SET_CONTACTLESS_MEDIA_NICK_NAME,\r\n payload: {\r\n NickName: data.NickName,\r\n visibleId: data.visibleId,\r\n },\r\n };\r\n}\r\n\r\nexport function getCurrentBalance(visibleId) {\r\n return (dispatch, getState) => {\r\n const { user } = getState();\r\n let allcards = user?.fareMedias?.concat(user.contactlessMedias);\r\n let thisCard = allcards?.find((card) => card.visibleId === visibleId);\r\n let cardDetails = thisCard?.products?.find((el) => el.ProductId === null);\r\n dispatch(setMediaCurrentBalance({ visibleId, currentBalance: cardDetails?.Balance }));\r\n };\r\n}\r\n\r\nexport function getCurrentPasses(visibleId) {\r\n return (dispatch) => {\r\n api\r\n .getAllProductsLoadedInMedia({ visibleId })\r\n .then((response) => {\r\n if (response.data.Success && response.data.productInstances) {\r\n dispatch(setMediaCurrentPasses({ visibleId, passes: response.data.productInstances }));\r\n }\r\n })\r\n .catch(() => { });\r\n };\r\n}\r\n\r\nexport function setNotification(notification) {\r\n return {\r\n type: types.SET_NOTIFICATION,\r\n payload: {\r\n notification,\r\n },\r\n };\r\n}\r\nexport function updateNotification(key, value, updatedNotificationObj) {\r\n return {\r\n type: types.UPDATE_NOTIFICATION,\r\n payload: {\r\n key,\r\n value,\r\n updatedNotificationObj,\r\n },\r\n };\r\n}\r\n\r\nexport function dismissNotification(index) {\r\n return {\r\n type: types.DISMISS_NOTIFICATION,\r\n payload: {\r\n index,\r\n },\r\n };\r\n}\r\n\r\nexport function setPendingProducts({ list, orders }) {\r\n return {\r\n type: types.SET_PENDING_PRODUCTS,\r\n payload: {\r\n pendingProducts: {\r\n list,\r\n orders,\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport function fetchPendingProducts(visibleId) {\r\n return (dispatch) => {\r\n api\r\n .getPendingProductsLoadedInMedia({ VisibleId: visibleId })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n dispatch(\r\n setPendingProducts({\r\n list: res.data?.ProductInstances || [],\r\n orders: res.data?.OrderLines || [],\r\n })\r\n );\r\n } else {\r\n dispatch(setPendingProducts([]));\r\n }\r\n })\r\n .catch(() => {\r\n dispatch(setPendingProducts([]));\r\n });\r\n };\r\n}\r\n\r\nexport function setGuestUserEnabled(data) {\r\n return {\r\n type: types.SET_GUEST_USER_ENABLED,\r\n payload: { ...data },\r\n };\r\n}\r\nexport function setGuestSignPopupEnabled(data) {\r\n return {\r\n type: types.SET_GUEST_SIGN_POPUP_ENABLED,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setGuestSignPopupEnabledfromOrdercard(payload) {\r\n return {\r\n type: types.SET_GUEST_SIGN_POPUP_ENABLED_FROM_ORDERCARD,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setGuestUserCartCheckout(data) {\r\n return {\r\n type: types.SET_GUEST_USER_CHECKOUT,\r\n payload: { ...data },\r\n };\r\n}\r\n\r\nexport function setGuestShoppingCartToken(payload) {\r\n return {\r\n type: types.SET_GUEST_SHOPPING_CART_TOKEN,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setGuestShoppingCartPayload(payload) {\r\n return {\r\n type: types.SET_GUEST_SHOPPING_CART_PAYLOAD,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setGoBackURL(payload) {\r\n return {\r\n type: types.GO_BACK_URL,\r\n payload,\r\n };\r\n}\r\nexport function setTtcCheckoutValues(payload) {\r\n return {\r\n type: types.TTC_CHECKOUT_VALUES,\r\n payload,\r\n };\r\n}\r\nexport function setMDPPausedPass(payload) {\r\n const filterdata = payload.find(\r\n (el) => el.Product.ProductFamily === 'MDP' && el.ContractState === 1\r\n );\r\n const mdpPausedProductId = filterdata ? filterdata.Product.ProductId : null;\r\n return {\r\n type: types.SET_MDP_PAUSED_PASS,\r\n payload: mdpPausedProductId,\r\n };\r\n}\r\n\r\n","import types from './types';\r\n\r\nexport function setSettings(data) {\r\n return {\r\n type: types.SET_SETTINGS,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n","import types from './types';\r\n\r\nexport function setBusinessRules(data) {\r\n return {\r\n type: types.SET_BUSINESS_RULES,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n","export default {\r\n funds: 'Funds',\r\n addMoney: 'Add Money',\r\n};\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport visaCardImage from '../../assets/images/card_visa.svg';\r\nimport masterCardImage from '../../assets/images/card_masterCard.svg';\r\nimport interacCardImage from '../../assets/images/card_interac.svg';\r\nimport amexCardImage from '../../assets/images/card_amex.svg';\r\nimport prestoCardImage from '../../assets/images/card_presto.svg';\r\nimport './mediaImage.scss';\r\n\r\nconst MediaImage = (props) => {\r\n const { big, small, medium, sm, t, cardImgSrc = '', cardImgAlt = '', cardAltText = '' } = props;\r\n const cards = {\r\n visaCard: {\r\n src: visaCardImage,\r\n alt: t('visaCardLogo'),\r\n },\r\n masterCard: {\r\n src: masterCardImage,\r\n alt: t('masterCardLogo'),\r\n },\r\n interacCard: {\r\n src: interacCardImage,\r\n alt: t('interacCardLogo'),\r\n },\r\n amexCard: {\r\n src: amexCardImage,\r\n alt: t('amexCardLogo'),\r\n },\r\n prestoCard: {\r\n src: prestoCardImage,\r\n alt: t('prestoCardLogo'),\r\n },\r\n activeGWalletCard: {\r\n src: '',\r\n alt: '',\r\n },\r\n inActiveGWalletCard: {\r\n src: '',\r\n alt: '',\r\n },\r\n };\r\n const smallOrFallbackCssClass = small ? '-small' : '';\r\n // eslint-disable-next-line no-nested-ternary\r\n const cssClass = big ? '-big' : medium ? '-medium' : sm ? '-sm' : smallOrFallbackCssClass;\r\n let mediaImageElm = null;\r\n\r\n if (\r\n cardImgSrc !== '' &&\r\n (props.cardAltText == 'visaCard' ||\r\n props.cardAltText == 'masterCard' ||\r\n props.cardAltText == 'mastercard' ||\r\n props.cardAltText == 'amexCard' ||\r\n props.cardAltText == 'interacCard' ||\r\n props.cardImgAlt.length > 0)\r\n ) {\r\n return (\r\n \r\n {children}\r\n
\r\n \r\n
\r\n);\r\n\r\nexport default withTranslation()(Loader);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { NEWMEDIA_VISIBLE_ID } from '../../constants/product.constants';\r\nimport { removeFromShoppingCart, addShoppingCartMessage } from '../../redux/user/actions';\r\nimport { formatDecimalWithCurrency, formatDate } from '../../services/utils';\r\nimport names from '../../constants/shoppingCart';\r\nimport MediaImage from '../MediaImage';\r\nimport './checkoutGridItem.scss';\r\nimport Loader from '../Loader';\r\n\r\nconst CheckoutGridItem = ({\r\n fields,\r\n item,\r\n deactivateFlow,\r\n orderCardResponse,\r\n paymentApiResponse,\r\n hideRemove = false,\r\n lastStep,\r\n filterItemLength,\r\n index,\r\n step,\r\n disableBorderBottom = false,\r\n currentBalance,\r\n}) => {\r\n const customerId = useSelector((state) => state.user.customerId);\r\n const visibleId = useSelector((state) => state.user.selectedCard.visibleId);\r\n const logo = useSelector((state) => state.products.logos[item.serviceProvider]?.Logo);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const guestSCT = useSelector((reduxState) => reduxState.user.guestShoppingCartToken);\r\n const anonymous = useSelector((state) => state.user && state.user.anonymous);\r\n const selectedCard = useSelector((state) => state.user.selectedCard);\r\n let customerData = orderCardResponse?.data?.Order?.Customer?.FareMedias\r\n ? orderCardResponse.data.Order.Customer.FareMedias\r\n : paymentApiResponse?.data?.Order?.Customer?.FareMedias;\r\n customerData = customerData && customerData.length > 0 && customerData[0];\r\n let currentfareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n currentfareMedias = currentfareMedias.find((data) => data.visibleId === visibleId);\r\n const transitPasses =\r\n currentfareMedias &&\r\n currentfareMedias?.products &&\r\n currentfareMedias?.products.length > 0 &&\r\n currentfareMedias?.products;\r\n const dispatch = useDispatch();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n /*\r\n const removeItem = (orderLineId) => {\r\n const data = {\r\n customerId,\r\n mediaId: visibleId,\r\n orderLineId,\r\n Sct: guestUserInfo?.isGuestLogin ? guestSCT.sct : '',\r\n Cct: guestUserInfo?.isGuestLogin ? guestSCT.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n dispatch(removeFromShoppingCart(data));\r\n dispatch(addShoppingCartMessage(''));\r\n };\r\n\r\n */\r\n\r\n\r\n const removeItem = (orderLineId) => {\r\n // console.log(\"3: inside removeItem \" + isLoading);\r\n return new Promise((resolve, reject) => {\r\n try {\r\n const data = {\r\n customerId,\r\n mediaId: visibleId,\r\n orderLineId,\r\n Sct: guestUserInfo?.isGuestLogin ? guestSCT?.sct : guestSCT?.sisct,\r\n Cct: guestUserInfo?.isGuestLogin ? guestSCT?.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n\r\n dispatch(removeFromShoppingCart(data));\r\n dispatch(addShoppingCartMessage(''));\r\n resolve(); // Resolve the promise on successful completion\r\n //console.log(\"4: Inside remove item before setIsLoading as false\");\r\n //setIsLoading(false);\r\n //console.log(\"5: Inside remove item after setIsLoading as false\");\r\n // console.log(\"4: complete removeItem \" + isLoading);\r\n } catch (error) {\r\n reject(error); // Reject the promise if there's an error\r\n }\r\n });\r\n };\r\n\r\n /*\r\n\r\n const handleRemoveClick = async (orderLineId) => {\r\n console.log(\"1: setIsLoading as true\", isLoading);\r\n setIsLoading(true);\r\n setTimeout(() => {\r\n console.log(\"Checking isLoading after timeout:\", isLoading);\r\n }, 4000);\r\n try {\r\n console.log(\"2: before call removeItem\", isLoading);\r\n await removeItem(orderLineId);\r\n } catch (error) {\r\n console.error(\"Error removing item:\", error);\r\n } finally {\r\n console.log(\"5: before setIsLoading as false\", isLoading);\r\n setIsLoading(false);\r\n console.log(\"6: After setIsLoading as false\", isLoading);\r\n }\r\n };\r\n\r\n */\r\n\r\n\r\n const handleRemoveClick = async (orderLineId) => {\r\n // Set loading to true\r\n //console.log(\"1: setIsLoading as true \" + isLoading);\r\n setIsLoading(true);\r\n try {\r\n //console.log(\"2: before call removeItem \" + isLoading);\r\n await removeItem(orderLineId); // Directly call removeItem\r\n } catch (error) {\r\n //console.error(\"Error removing item:\", error);\r\n } finally {\r\n //console.log(\"5: before setIsLoading as false \" + isLoading);\r\n //setIsLoading(false);\r\n if (isLoading) {\r\n setTimeout(() => {\r\n setIsLoading(false);\r\n }, 4000);\r\n //console.log(\"6: After setIsLoading as false \" + isLoading);\r\n }\r\n else {\r\n //console.log(\"7: Inside else before setIsLoading as false \" + isLoading);\r\n setTimeout(() => {\r\n setIsLoading(false);\r\n }, 4000);\r\n //console.log(\"8: Inside else after setIsLoading as false \" + isLoading);\r\n }\r\n }\r\n };\r\n\r\n\r\n /*\r\n const handleRemoveClick = (orderLineId) => {\r\n // Set loading to true\r\n setIsLoading(true);\r\n \r\n try {\r\n removeItem(orderLineId); // Directly call removeItem\r\n } catch (error) {\r\n console.error(\"Error removing item:\", error);\r\n } finally {\r\n setTimeout(() => {\r\n setIsLoading(false);\r\n }, 4000);\r\n }\r\n };\r\n \r\n */\r\n\r\n\r\n return (\r\n <>\r\n {isLoading ? (\r\n (() => {\r\n //console.log(\"Rendering \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {message ? message : (t('loadingText'))}
\r\n \r\n
\r\n );\r\n })()\r\n ) : (\r\n Loading...
\r\n \r\n
\r\n\r\n {filterItemLength - 1 == index && (item?.nickNameValue || item?.cardLanguage) && (\r\n \r\n {item?.serviceProvider !== 'Presto' ? (\r\n 
\r\n ) : (\r\n
\r\n \r\n \r\n removeItem(item?.orderLineId)}\r\n onClick={() => handleRemoveClick(item?.orderLineId)}\r\n onKeyPress={() => null}\r\n >\r\n
\r\n )}\r\n {item?.name}
\r\n \r\n {item?.name === !names.funds || item.isManageAutoRenew || item?.autorenew\r\n ? `${formatDate(item?.validityStartDate)} - ${formatDate(item?.validityEndDate)}`\r\n : null}\r\n
\r\n {!hideRemove && (\r\n \r\n {item?.nickNameValue && (\r\n
\r\n )}\r\n \r\n {item?.isManageAutoRenew ? null : (\r\n \r\n \r\n
\r\n )}\r\n {item?.cardLanguage && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {item?.isManageAutoRenew ? null : (\r\n {item?.quantity}
\r\n \r\n
\r\n )}\r\n \r\n {deactivateFlow && (\r\n {formatDecimalWithCurrency(item?.subTotal)}
\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default CheckoutGridItem;\r\n","import React from 'react';\r\nimport './inlineError.scss';\r\n\r\nconst InlineError = ({ children, cssClass }) => {\r\n return (\r\n \r\n {fields?.NickNameLabel.value}: {selectedCard?.nickName}\r\n
\r\n\r\n {fields?.BalanceLabel.value}: {formatDecimalWithCurrency(currentBalance)}\r\n
\r\n\r\n {fields?.TransitPassLabel.value}: {' '}\r\n
\r\n {transitPasses &&\r\n transitPasses.length > 0 &&\r\n transitPasses.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n \r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n {children}\r\n
\r\n );\r\n};\r\n\r\nexport default InlineError;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useFormikContext, useField } from 'formik';\r\nimport DatePicker from 'react-datepicker';\r\nimport useMedia from 'use-media';\r\n\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport './datePickerInput.scss';\r\nimport InlineError from '../InlineError';\r\nimport { isFrench } from '../../services/utils';\r\n\r\nexport default function DatePickerInput({ ...props }) {\r\n const { setFieldValue } = useFormikContext();\r\n const [field] = useField(props.name);\r\n const error = props.touched\r\n ? props.touched[props.name] && props.errors[props.name]\r\n : props.errors[props.name];\r\n const isMobile = useMedia({ maxWidth: '920px' });\r\n const [isCalendarOpen, setIsCalendarOpen] = useState(false);\r\n\r\n const days = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];\r\n const months = [\r\n 'Janvier',\r\n 'Février',\r\n 'Mars',\r\n 'Avril',\r\n 'Mai',\r\n 'Juin',\r\n 'Juillet',\r\n 'Août',\r\n 'Septembre',\r\n 'Octobre',\r\n 'Novembre',\r\n 'Décembre',\r\n ];\r\n\r\n const customFrLocale = {\r\n localize: {\r\n month: (n) => months[n],\r\n day: (n) => days[n],\r\n },\r\n formatLong: {},\r\n };\r\n useEffect(() => {\r\n document.querySelectorAll('.datePickerInput input').forEach((inputElement) => {\r\n inputElement.setAttribute('aria-expanded', 'false');\r\n inputElement.setAttribute('role', 'button');\r\n if (inputElement === document.activeElement && isCalendarOpen) {\r\n inputElement.setAttribute('aria-expanded', 'true');\r\n }\r\n });\r\n });\r\n return (\r\n \r\n {props.label ? (\r\n \r\n ) : null}\r\n {\r\n if (props.onChange) {\r\n props.onChange(val);\r\n }\r\n setFieldValue(field.name, val);\r\n }}\r\n className={isCalendarOpen && 'calendar-is-open'}\r\n onCalendarOpen={() => setIsCalendarOpen(true)}\r\n onCalendarClose={() => setIsCalendarOpen(false)}\r\n />\r\n\r\n {error ? (\r\n {error} \r\n ) : props.belowText ? (\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport './exportButton.scss';\r\n\r\nconst ExportButton = ({ t, onClick }) => (\r\n \r\n);\r\n\r\nexport default withTranslation()(ExportButton);\r\n","import React from 'react';\r\nimport './iconButton.scss';\r\n\r\nconst IconButton = ({\r\n className,\r\n ariaLabel,\r\n ariaExpanded,\r\n onClick,\r\n icon,\r\n children,\r\n iconAlt = '',\r\n tabIndex = '',\r\n}) => (\r\n {props.belowText}
\r\n ) : null}\r\n \r\n 
\r\n {text}\r\n
\r\n);\r\n\r\nexport default IconWithText;\r\n","import React from 'react';\r\nimport './mediaImageWrapper.scss';\r\n\r\nconst MediaImageWrapper = ({ children, small }) => {\r\n const smallCssClass = small ? 'mediaImageList-isSmall' : '';\r\n return {children}
;\r\n};\r\n\r\nexport default MediaImageWrapper;\r\n","import React, { useCallback } from 'react';\r\n\r\nconst NavLink = ({ title, isActive, isDropdown, onClick }) => (\r\n \r\n
\r\n);\r\n\r\nexport default Notification;\r\n","import React from 'react';\r\n\r\nimport { Image, Link } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\n\r\nimport Icon from '../Icon';\r\nimport './prestoLink.scss';\r\n\r\nconst PrestoLink = ({\r\n field = '',\r\n className = '',\r\n image,\r\n imageClassName = '',\r\n children,\r\n onClickCustom,\r\n iconColor = '',\r\n siteName = '',\r\n}) => {\r\n const isExternal = !field.value?.href.startsWith('/');\r\n const isContactless = siteName === 'contactless';\r\n return (\r\n <>\r\n {isExternal ? (\r\n \r\n {title ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n {onChange !== '' ? (\r\n
\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(\"title\", null, \"Icon/Tick\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Icon/Tick\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Shape\",\n stroke: \"#ffffff\",\n strokeWidth: 0.569999993,\n fill: \"#ffffff\",\n points: \"12.9777778 19.7846154 9.24444444 15.9076923 8 17.2 12.9777778 22.3692308 23.6444444 11.2923077 22.4 10\"\n}));\n\nvar SvgTick = function SvgTick(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"32px\",\n height: \"32px\",\n viewBox: \"0 0 32 32\",\n ref: svgRef\n }, props), title === undefined ? _ref2 : title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgTick, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/Tick.18dc5cf9.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\n\r\nimport { ReactComponent as Tick } from '../../assets/images/Tick.svg';\r\n\r\nconst DONE = 'done';\r\nconst ACTIVE = 'active';\r\n\r\nexport default function Step({\r\n index,\r\n text,\r\n activeIndex,\r\n last,\r\n total,\r\n textA11y,\r\n labelA11y,\r\n StepA11y,\r\n OfA11y,\r\n CompleteA11y,\r\n NotCompleteA11y,\r\n CurrentStepA11y,\r\n textNotCompletedA11y,\r\n textInProgressA11y,\r\n textCompletedA11y,\r\n hasError = false,\r\n inProgress = false,\r\n}) {\r\n let cssClass = index < activeIndex ? DONE : '';\r\n\r\n let a11yLabel = textA11y;\r\n let currentStep = index + 1;\r\n let cuurentStepText = currentStep + ' ' + OfA11y + ' ';\r\n\r\n if (!cssClass) {\r\n cssClass = index === activeIndex ? ACTIVE : '';\r\n }\r\n\r\n if (!hasError && last && index === activeIndex) {\r\n cssClass = DONE;\r\n }\r\n if (inProgress && last && index === activeIndex) {\r\n cssClass = ACTIVE;\r\n }\r\n\r\n if (labelA11y) {\r\n if (index < activeIndex) {\r\n a11yLabel = StepA11y + ' ' + cuurentStepText + total + ' ' + labelA11y + ' ' + CompleteA11y;\r\n }\r\n\r\n if (index === activeIndex) {\r\n if (last && !hasError) {\r\n a11yLabel = StepA11y + ' ' + cuurentStepText + total + ' ' + labelA11y + ' ' + CompleteA11y;\r\n } else if (last && hasError) {\r\n a11yLabel =\r\n StepA11y + ' ' + cuurentStepText + total + ' ' + labelA11y + ' ' + NotCompleteA11y;\r\n } else {\r\n a11yLabel =\r\n StepA11y + ' ' + cuurentStepText + total + ' ' + labelA11y + ' ' + CurrentStepA11y;\r\n }\r\n }\r\n\r\n if (index > activeIndex) {\r\n a11yLabel =\r\n StepA11y + ' ' + cuurentStepText + total + ' ' + labelA11y + ' ' + NotCompleteA11y;\r\n }\r\n } else if (!a11yLabel) {\r\n if (index < activeIndex) {\r\n a11yLabel = textCompletedA11y;\r\n }\r\n\r\n if (index === activeIndex) {\r\n if (last && !hasError) {\r\n a11yLabel = textCompletedA11y;\r\n } else if (last && hasError) {\r\n a11yLabel = textNotCompletedA11y;\r\n } else {\r\n a11yLabel = textInProgressA11y;\r\n }\r\n }\r\n\r\n if (index > activeIndex) {\r\n a11yLabel = textNotCompletedA11y;\r\n }\r\n }\r\n\r\n return (\r\n \r\n {cardImgSrc ? (\r\n
\r\n ) : null}\r\n {cssClass === DONE ?
\r\n \r\n {text}\r\n \r\n {children}
;\r\n}\r\n","import React from 'react';\r\n\r\nimport { Link, Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './socialLink.scss';\r\n\r\nconst SocialLink = ({ field = '', image }) => (\r\n \r\n {image && \r\n
\r\n ) : null}\r\n \r\n {header}\r\n
\r\n\r\n {subHeader}\r\n
\r\n {children}
\r\n \r\n \r\n {checkBoxText ? (\r\n {\r\n localstorageService().setItem(localStorageKeys.dismissedWelcomePopup, value);\r\n }}\r\n >\r\n {checkBoxText}\r\n \r\n ) : null}\r\n {buttonText ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport './cardBlock.scss';\r\n\r\nexport default function CardBlock({\r\n children,\r\n title,\r\n cssClass = '',\r\n successIcon = false,\r\n errorIcon = false,\r\n icon,\r\n titleSectionRight,\r\n redeemVoucherTitle = false,\r\n subTitle = null,\r\n tabIndex,\r\n}) {\r\n return (\r\n {redeemVoucherTitle}
}\r\n {titleSectionRight}
\r\n {children}
\r\n \r\n );\r\n}\r\n","export default {\r\n OPENP_VISA: 'visa',\r\n OPENP_AMEX: 'amex',\r\n OPENP_MAST: 'master',\r\n OPENP_INTR: 'interac',\r\n presto: 'presto',\r\n anonymous: 'anonymous',\r\n};\r\n","export default {\r\n APPLE: 'CRDNC_AAPL',\r\n GOOGLE: 'CRDNC_GOOG',\r\n};\r\n","import useMedia from 'use-media';\r\n\r\nconst useMediaWidth = () => useMedia({ maxWidth: '920px' });\r\n\r\nexport default useMediaWidth;\r\n","import React, { useRef, useState, useEffect } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport {\r\n selectCard,\r\n getCurrentBalance,\r\n setGoogleWalletData,\r\n updateIsCardClickedStatus,\r\n fetchWalletCardDetails,\r\n} from '../../redux/user/actions';\r\nimport {\r\n formatDecimalWithCurrency,\r\n formatPrestoCardNumber,\r\n formatPrestoCardNumberA11y,\r\n redirectToUrl,\r\n hasAnyCard,\r\n convertToDollars,\r\n isFrench,\r\n} from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport langConstants from '../../constants/lang';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport { MediaImage } from '../../atoms';\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport whiteLogo from '../../assets/images/PRESTO_White_logo.svg';\r\nimport noCard from '../../assets/images/switch-nocard.svg';\r\nimport './cardSwitcher.scss';\r\nimport api from '../../services/api';\r\nimport mediaSubType from '../../constants/mediaSubType';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\n\r\nconst CardSwitcher = ({ t, props = {}, setLoading }) => {\r\n const location = useLocation();\r\n const userState = useSelector((state) => state.user);\r\n const isMobile = useSelector((state) => state.user.isMobile);\r\n const { fareMedias, contactlessMedias, selectedCard, isCardClicked } = userState;\r\n const [currentBalanceRequested, setCurrentBalanceRequested] = useState(false);\r\n const allCards = fareMedias.concat(contactlessMedias);\r\n const cardDropdownRef = useRef(null);\r\n const [isSelectClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, false, true);\r\n const dispatch = useDispatch();\r\n const onClickSelect = () => {\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: true }));\r\n openDropdown(!isSelectClicked);\r\n };\r\n const isMobileWallet = selectedCard.mediaType === mediaTypes.CRDNC;\r\n const isAWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.APPLE;\r\n const isGWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.GOOGLE;\r\n const checkMediaType = (array) => {\r\n if (array.length !== 0) {\r\n for (let i = 0; i < array.length; i++) {\r\n if (!array[i].hasOwnProperty('mediaType') || array[i].mediaType !== mediaTypes.CRDNC) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n };\r\n const onlyGWCards = checkMediaType(allCards);\r\n useEffect(() => {\r\n let allGWCards = [];\r\n const googleWallets = contactlessMedias?.filter((card) => card.mediaType === mediaTypes.CRDNC);\r\n googleWallets.forEach((card, index) => {\r\n allGWCards.push({ DPanId: card.dpan });\r\n if (index === googleWallets.length - 1) {\r\n api.getAllWalletCardDetails(allGWCards).then((res) => {\r\n if (res.data.status === 'ACCEPTED') {\r\n res.data.mediaList.map((card) => {\r\n const data = {\r\n mediaList: [card],\r\n displayText: res.data.displayText,\r\n };\r\n dispatch(setGoogleWalletData(data));\r\n });\r\n }\r\n });\r\n }\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!isMobile) {\r\n if (\r\n props?.fields?.data?.datasource?.CardDetailsLocationPath?.jss?.value &&\r\n location.pathname.includes(\r\n props?.fields?.data?.datasource?.CardDetailsLocationPath?.jss?.value\r\n ) &&\r\n !isCardClicked\r\n ) {\r\n const gWCards = contactlessMedias.filter((card) => card.mediaType === mediaTypes.CRDNC);\r\n if (isMobileWallet) {\r\n api\r\n .getStoredMediaTypeInSession({\r\n MediaType: selectedCard.mediaSubTypeWallet,\r\n })\r\n .then(({ res }) => {\r\n if (gWCards[0].dpan === selectedCard.dpan) {\r\n dispatch(fetchWalletCardDetails);\r\n } else {\r\n api.getAllWalletCardDetails([{ DPanId: selectedCard.dpan }]).then((res) => {\r\n if (res.data.status === 'ACCEPTED') {\r\n res.data.mediaList.map((card) => {\r\n const data = {\r\n mediaList: [card],\r\n displayText: res.data.displayText,\r\n };\r\n dispatch(setGoogleWalletData(data));\r\n });\r\n }\r\n });\r\n }\r\n });\r\n } else {\r\n if (gWCards.length > 0) {\r\n dispatch(\r\n selectCard(\r\n { ...gWCards[0] },\r\n {\r\n url: routes.walletCardDetails,\r\n redirected: true,\r\n }\r\n )\r\n );\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n } else {\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n setLoading(true);\r\n redirectToUrl(routes.dashboard);\r\n }\r\n }\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n } else if (\r\n props?.fields?.data?.datasource?.TransactionHistoryLocationPath?.jss?.value &&\r\n location.pathname.includes(\r\n props?.fields?.data?.datasource?.TransactionHistoryLocationPath?.jss?.value\r\n ) &&\r\n !isCardClicked &&\r\n !selectedCard.type\r\n ) {\r\n const nonGWCard = allCards?.find((card) => card.mediaType !== mediaTypes.CRDNC);\r\n const googleWallets = contactlessMedias?.filter(\r\n (card) => card.mediaType === mediaTypes.CRDNC\r\n );\r\n if (googleWallets.length > 0) {\r\n api\r\n .getStoredMediaTypeInSession({\r\n MediaType: googleWallets[0].mediaSubTypeWallet,\r\n })\r\n .then((res) => console.log('response'));\r\n }\r\n if (!!nonGWCard && Object.keys(nonGWCard).length !== 0) {\r\n dispatch(\r\n selectCard(nonGWCard, {\r\n url: routes.transactionHistory,\r\n redirected: true,\r\n })\r\n );\r\n } else if (onlyGWCards) {\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n setLoading(true);\r\n redirectToUrl(routes.dashboard);\r\n } else {\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n }\r\n }\r\n dispatch(updateIsCardClickedStatus({ isCardClicked: false }));\r\n }\r\n }, []);\r\n const activeImageProps = {\r\n big: true,\r\n activeGWalletCard: true,\r\n cardImgSrc:\r\n props && isAWalletCard\r\n ? props?.fields?.data?.datasource?.AppleWalletCardActiveImage?.jss?.value?.src // apple wallet props\r\n : props?.fields?.data?.datasource?.GoogleWalletCardActiveImage?.jss?.value?.src,\r\n cardImgAlt:\r\n props && isAWalletCard\r\n ? props?.fields?.data?.datasource?.AppleWalletCardActiveImage?.jss?.value?.alt //apple wallet props\r\n : props?.fields?.data?.datasource?.GoogleWalletCardActiveImage?.jss?.value?.alt,\r\n };\r\n const inActiveImageProps = {\r\n big: true,\r\n inActiveGWalletCard: true,\r\n cardImgSrc:\r\n props && props?.fields?.data?.datasource?.GoogleWalletCardInactiveImage?.jss?.value?.src,\r\n cardImgAlt:\r\n props && isAWalletCard\r\n ? t('InactiveAppleWalletCard')\r\n : isGWalletCard\r\n ? t('InactiveGoogleWalletCard')\r\n : props?.fields?.data?.datasource?.GoogleWalletCardInactiveImage?.jss?.value?.alt,\r\n };\r\n const cardsA11y = {\r\n presto: t('prestoCard'),\r\n amex: t('amexCard'),\r\n interac: t('interacCard'),\r\n master: t('masterCard'),\r\n visa: t('visaCard'),\r\n CRDNC: t('mobileWalletCard'),\r\n };\r\n\r\n if (!hasAnyCard(userState)) {\r\n return {selectedCard.nickName}
;\r\n if (selectedCard.nickName?.length <= 13) {\r\n renderNickName = {selectedCard.nickName}
;\r\n }\r\n if (selectedCard.nickName?.length > 20) {\r\n renderNickName = (\r\n {`${selectedCard.nickName.substring(0, 19)}...`}
\r\n );\r\n }\r\n }\r\n const onCardSwitch = async (card) => {\r\n const pathlang =\r\n card.type === mediaSubTypes.presto\r\n ? isFrench()\r\n ? '/fr-CA' + routes.transactionHistory\r\n : '/en' + routes.transactionHistory\r\n : routes.transactionHistory;\r\n const googleWallets = contactlessMedias?.filter((card) => card.mediaType === mediaTypes.CRDNC);\r\n if (card.mediaId === selectedCard.mediaId) {\r\n dispatch(\r\n selectCard(\r\n { ...card },\r\n {\r\n url:\r\n card.mediaType === mediaTypes.CRDNC\r\n ? routes.walletCardDetails\r\n : routes.transactionHistory,\r\n redirected: false,\r\n }\r\n )\r\n );\r\n setLoading(true);\r\n } else if (card.mediaType === mediaTypes.CRDNC) {\r\n try {\r\n await api.getStoredMediaTypeInSession({\r\n MediaType: card.mediaSubTypeWallet,\r\n });\r\n } catch (error) {\r\n console.error('Error fetching data:', error);\r\n }\r\n dispatch(\r\n selectCard(\r\n { ...card },\r\n {\r\n url: routes.walletCardDetails,\r\n redirected: false,\r\n }\r\n )\r\n );\r\n setLoading(true);\r\n onClickSelect();\r\n } else {\r\n if (googleWallets.length > 0) {\r\n try {\r\n await api.getStoredMediaTypeInSession({\r\n MediaType: googleWallets[0].mediaSubTypeWallet,\r\n });\r\n } catch (error) {\r\n console.error('Error fetching data:', error);\r\n }\r\n }\r\n dispatch(\r\n selectCard(\r\n { ...card },\r\n {\r\n url: pathlang,\r\n redirected: false,\r\n }\r\n )\r\n );\r\n setLoading(true);\r\n onClickSelect();\r\n }\r\n };\r\n const cardSelectionHandler = (e, card) => {\r\n if (e.keyCode == 13) {\r\n onCardSwitch(card);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {allCards.length > 1 && (\r\n \r\n {t('cardSwitcherSwitchCard')}\r\n \r\n \r\n )}\r\n\r\n
\r\n \r\n {(selectedCard.type !== '' || isMobileWallet) && (\r\n <>\r\n {selectedCard.type === mediaSubTypes.presto ||\r\n selectedCard.type === mediaSubTypes.anonymous ||\r\n isMobileWallet ? (\r\n \r\n {allCards.map((card) => {\r\n const isGWallet = card.mediaType === mediaTypes.CRDNC;\r\n const cardType = `${card.type}Card`;\r\n const mediaImageProps = {\r\n medium: true,\r\n [cardType]: true,\r\n };\r\n const activeImageListingProps = {\r\n small: true,\r\n activeGWalletCard: true,\r\n cardImgSrc:\r\n props && card.mediaSubTypeWallet === mediaSubType.APPLE\r\n ? props?.fields?.data?.datasource?.AppleWalletCardListingActiveImage?.jss?.value\r\n ?.src //apple wallet props\r\n : props?.fields?.data?.datasource?.GoogleWalletCardListingActiveImage?.jss?.value\r\n ?.src,\r\n cardImgAlt:\r\n props && card.mediaSubTypeWallet === mediaSubType.APPLE\r\n ? props?.fields?.data?.datasource?.AppleWalletCardListingActiveImage?.jss?.value\r\n ?.alt //apple wallet props\r\n : props?.fields?.data?.datasource?.GoogleWalletCardListingActiveImage?.jss?.value\r\n ?.alt,\r\n };\r\n const inActiveImageListingProps = {\r\n small: true,\r\n inActiveGWalletCard: true,\r\n cardImgSrc:\r\n props &&\r\n props?.fields?.data?.datasource?.GoogleWalletCardListingInactiveImage?.jss?.value\r\n ?.src,\r\n cardImgAlt:\r\n props &&\r\n props?.fields?.data?.datasource?.GoogleWalletCardListingInactiveImage?.jss?.value\r\n ?.alt,\r\n };\r\n const imageProps =\r\n card.hasActiveImageGoog || card.hasActiveImageAppl\r\n ? activeImageListingProps\r\n : inActiveImageListingProps;\r\n\r\n if (\r\n card.type === mediaSubTypes.presto &&\r\n card.currentBalance === null &&\r\n !currentBalanceRequested\r\n ) {\r\n dispatch(getCurrentBalance(card.visibleId));\r\n setCurrentBalanceRequested(true);\r\n }\r\n\r\n return (\r\n {\r\n onCardSwitch(card);\r\n }}\r\n onKeyDown={(e) => cardSelectionHandler(e, card)}\r\n onKeyPress={() => null}\r\n >\r\n {/*
\r\n );\r\n })}\r\n \r\n
\r\n \r\n {card.nickName && card.nickName.length > 20\r\n ? `${card.nickName.substring(0, 19)}...`\r\n : card.nickName}\r\n
\r\n \r\n {card.type === mediaSubTypes.presto\r\n ? formatDecimalWithCurrency(card.currentBalance)\r\n : isGWallet\r\n ? formatDecimalWithCurrency(convertToDollars(card.currentBalance))\r\n : card.mediaId}\r\n
\r\n \r\n \r\n
\r\n \r\n {isMobileWallet ? (\r\n \r\n \r\n {isMobileWallet\r\n ? selectedCard.cardNumber\r\n : formatPrestoCardNumber(selectedCard.visibleId)}\r\n \r\n
\r\n \r\n {renderNickName}\r\n\r\n \r\n {selectedCard.hasActiveImageGoog || selectedCard.hasActiveImageAppl ? (\r\n
\r\n ) : (\r\n <>{renderNickName}\r\n )}\r\n\r\n \r\n 
\r\n
\r\n \r\n \r\n ) : (\r\n \r\n {renderNickName}\r\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 withTranslation()(CardSwitcher);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Field } from 'formik';\r\n\r\nimport viewIcon from '../../assets/images/View.svg';\r\nimport hideIcon from '../../assets/images/Hide.svg';\r\nimport { IconButton, InlineError } from '../../atoms';\r\nimport './textInput.scss';\r\n\r\nexport default function TextInput({\r\n errors,\r\n touched,\r\n label,\r\n hasLongLabel,\r\n name,\r\n type,\r\n bellowText,\r\n placeholder,\r\n validateField,\r\n value,\r\n withMoneyIcon,\r\n whiteBg,\r\n onChange,\r\n onFocus,\r\n length,\r\n disabled,\r\n serverError,\r\n marginTopSpacing1,\r\n marginTopSpacing2,\r\n noMarginTop,\r\n noMarginTopDesktopOnly,\r\n withViewIcon,\r\n inputA11y,\r\n showIconA11y,\r\n hideIconA11y,\r\n innerRef,\r\n disabledAutocomplete,\r\n className,\r\n required = false,\r\n isError,\r\n topPlacementofError = false,\r\n customerTypeErrorforAccountCreation,\r\n // errorsForB2C,\r\n // touchedForB2C,\r\n // nameForB2C,\r\n}) {\r\n const onChangeObject = onChange ? { onChange } : {};\r\n const valueObject = value ? { value } : {};\r\n const error = (touched[name] && errors[name]) || serverError;\r\n // const errorForB2CScreens = (touchedForB2C[nameForB2C] && errorsForB2C[nameForB2C]) || serverError;\r\n const [valueShown, setValueShown] = useState(false);\r\n const toggleValueVisiblity = () => {\r\n setValueShown(valueShown ? false : true);\r\n };\r\n\r\n const defaultType = type || 'text';\r\n const toggleVisibilityType = valueShown ? 'text' : 'password';\r\n\r\n return (\r\n {t('cardSwitcherContactlessCardId')}:
\r\n {selectedCard.mediaId}
\r\n \r\n
\r\n {/* eslint-disable-next-line no-nested-ternary */}\r\n {error && !topPlacementofError ? (\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { CheckoutGridItem, RadioInput } from '../../atoms';\r\nimport './checkoutGrid.scss';\r\nimport { formatDecimalWithCurrency } from '../../services/utils';\r\nimport { Note } from '../../molecules';\r\nimport { Formik, useFormikContext } from 'formik';\r\nimport TextInput from '../TextInput';\r\nimport { useSelector } from 'react-redux';\r\n\r\nconst CARD_NICKNAME_REGEX = /^[a-zA-Z0-9àâäèéêëîïôœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ ]{1,25}$/;\r\nconst PIN_REGEX = /^[0-9]*$/;\r\n\r\nconst AutoSubmitToken = () => {\r\n const { values, submitForm } = useFormikContext();\r\n useEffect(() => {\r\n if (values.userName && values.pinNumber && values.confirmPinNumber && values.cardLanguage) {\r\n submitForm();\r\n }\r\n }, [values]);\r\n return null;\r\n};\r\n\r\nconst CheckoutGrid = ({\r\n fields,\r\n items,\r\n fareMedia,\r\n success,\r\n totalAmount,\r\n handleCheckoutData,\r\n isOrderCard,\r\n deactivate,\r\n deactivateFlow,\r\n hideRemove,\r\n orderCardResponse,\r\n paymentApiResponse,\r\n t,\r\n lastStep,\r\n state,\r\n step,\r\n fundsSelected,\r\n additionalpadding,\r\n currentBalance,\r\n}) => {\r\n const [isError, setIsError] = useState(false);\r\n //console.log('fields', fields);\r\n let filterItem =\r\n !isOrderCard &&\r\n items &&\r\n items.length > 0 &&\r\n items.filter((i) => i.visibleId === fareMedia.visibleId);\r\n if (items && items.length > 0 && items[0].visibleId === 'NEWMEDIA') {\r\n filterItem = items;\r\n }\r\n const fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n\r\n let enableReportLostCard = deactivate;\r\n if (fundsSelected) {\r\n enableReportLostCard = true;\r\n }\r\n\r\n return filterItem?.length || (items.length && (step == 0 || step == 3)) ? (\r\n \r\n {!deactivate && !fareMedia?.autoRenew && fareMedia?.autoRenew !== 'true' && (\r\n {\r\n const errors = {};\r\n if (!values.userName) {\r\n errors.userName = fields.MissingNickNameError.value;\r\n } else if (\r\n !CARD_NICKNAME_REGEX.test(values.userName) ||\r\n values.userName.length > 25\r\n ) {\r\n errors.userName = fields.InvalidNickName.value;\r\n } else if (\r\n fareMedias.find((el) => {\r\n if (el.nickName === values.userName) {\r\n return true;\r\n }\r\n })\r\n ) {\r\n errors.userName = fields.NickNameAlreadyExist.value;\r\n }\r\n if (!values.pinNumber) {\r\n errors.pinNumber = fields.MissingNewPinError.value;\r\n } else if (\r\n !PIN_REGEX.test(values.pinNumber) ||\r\n values.pinNumber.length > 4 ||\r\n values.pinNumber.length < 4\r\n ) {\r\n errors.pinNumber = fields.InvalidNewPinError.value;\r\n }\r\n if (!values.confirmPinNumber) {\r\n errors.confirmPinNumber = fields.MissingConfirmPinError.value;\r\n } else if (values.pinNumber !== values.confirmPinNumber) {\r\n errors.confirmPinNumber = fields.InvalidConfirmPinError.value;\r\n }\r\n if (Object.keys(errors).length === 0) {\r\n setIsError(false);\r\n } else {\r\n setIsError(true);\r\n }\r\n handleCheckoutData({ values, isError });\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n //handleCheckoutData({ values, isError });\r\n }}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n {\r\n const errors = {};\r\n if (Object.keys(errors).length === 0) {\r\n setIsError(false);\r\n } else {\r\n setIsError(true);\r\n }\r\n handleCheckoutData({ values, isError });\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n // handleCheckoutData({ values, isError });\r\n }}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n \r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n ) : null;\r\n};\r\n\r\nexport default CheckoutGrid;\r\n","import React from 'react';\r\n\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport './connectionError.scss';\r\n\r\nexport default function ConnectionError({\r\n title,\r\n titleA11y,\r\n message,\r\n messageA11y,\r\n buttonText,\r\n buttonA11y,\r\n buttonOnClick,\r\n}) {\r\n return (\r\n \r\n {isOrderCard || fundsSelected\r\n ? 'New Card'\r\n : deactivateFlow\r\n ? filterItem[0]?.nickName\r\n : fareMedia?.nickName}\r\n {success && !isOrderCard && !fundsSelected && (\r\n <>\r\n {deactivateFlow ? t('FareMediaNoNickname') : ' - ' + fareMedia?.visibleId}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n {!deactivateFlow && fields.NewCardTitle ? (\r\n \r\n
\r\n {/* {step == 0 || step == 3\r\n ? items &&\r\n items.length > 0 &&\r\n items.map((item, index) => (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {step == 0 || step == 3\r\n ? items &&\r\n items.length > 0 &&\r\n items.map((item, index) => (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/*!isError && \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/*!isError && \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { useField, Field } from 'formik';\r\nimport Autocomplete from '@material-ui/lab/Autocomplete';\r\nimport { TextField, Icon } from '@material-ui/core';\r\nimport useMedia from 'use-media';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { InlineError } from '../../atoms';\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport downgreyIcon from '../../assets/images/down_grey.svg';\r\nimport './select.scss';\r\n\r\nlet isMobileSelectOpen = false;\r\n\r\nconst Select = ({\r\n errors,\r\n isDisabled,\r\n isLoading,\r\n options,\r\n name,\r\n label,\r\n placeholder,\r\n labelA11y,\r\n selectA11y,\r\n selectablePlaceholder,\r\n fullWidth,\r\n t,\r\n onChange,\r\n onClose,\r\n touched,\r\n defaultValue,\r\n defaultLabel,\r\n showPlaceholder,\r\n showMatAutoComplete = false,\r\n showOption0 = false,\r\n showFormikSelect = false,\r\n}) => {\r\n const [field, , helpers] = useField(name);\r\n const isWide = useMedia({ maxWidth: '920px' });\r\n const showWide = showFormikSelect ? true : isWide;\r\n\r\n const error = touched && touched[name] && errors && errors[name];\r\n const placeholderToArray = [{ label: placeholder, value: null }];\r\n\r\n const defaultOption = defaultValue ? defaultValue : '';\r\n const defaultOptionLabel = defaultLabel ? defaultLabel : '';\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 {title}\r\n
\r\n\r\n {message}\r\n
\r\n {buttonText && (\r\n\r\n {label ? (\r\n {\r\n if (isMobileSelectOpen) {\r\n isMobileSelectOpen = false;\r\n if (onClose) onClose();\r\n } else {\r\n isMobileSelectOpen = true;\r\n }\r\n }}\r\n >\r\n {showPlaceholder ? (\r\n \r\n ) : null}\r\n {options.map((option) => (\r\n \r\n {option.label}\r\n \r\n ))}\r\n \r\n ) : (\r\n i.value === field.value) || {\r\n value: defaultOption,\r\n label: defaultOptionLabel,\r\n }\r\n }\r\n getOptionLabel={(option) => option.label.toString()}\r\n getOptionDisabled={(option) => !showOption0 && option.value === '0'}\r\n closeIcon={null}\r\n popupIcon={\r\n \r\n 
\r\n \r\n }\r\n onClose={onClose}\r\n onChange={(_, value) => {\r\n helpers.setValue(value?.value || '');\r\n if (onChange) {\r\n onChange(value);\r\n }\r\n }}\r\n onBlur={() => helpers.setTouched(true)}\r\n id={name}\r\n renderInput={(params) => (\r\n {error} : null}\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(Select);\r\n","import { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect, useRef } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport FocusTrap from 'focus-trap-react';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { cardRemoved } from '../../redux/user/actions';\r\n\r\nimport './modal.scss';\r\n\r\nconst Modal = ({\r\n title,\r\n text,\r\n paragraph,\r\n textSubmit,\r\n textCancel,\r\n onSubmit,\r\n isModalOpen,\r\n setIsModalOpen,\r\n useRevert,\r\n hideButtons = false,\r\n hideTitle,\r\n textClassName,\r\n disableBackdropClick,\r\n disableEscapeKeyDown,\r\n buttonTextA11y,\r\n alert,\r\n withoutFocusTrap,\r\n customCss,\r\n richtext,\r\n customClass,\r\n onClose,\r\n isCustomClose = false,\r\n buttonTextCloseA11y,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const focusDiv = useRef();\r\n const closeModal = () => {\r\n setIsModalOpen(false);\r\n //dispatch(cardRemoved(false));\r\n };\r\n\r\n useEffect(() => {\r\n if (isModalOpen) {\r\n focusDiv.current.focus();\r\n }\r\n }, [isModalOpen]);\r\n\r\n const textOnlyClass = hideTitle && hideButtons ? 'modal-text-only' : '';\r\n\r\n return (\r\n isModalOpen && (\r\n <>\r\n \r\n {label}\r\n
\r\n ) : null}\r\n {showWide && !showMatAutoComplete ? (\r\n \r\n {title}\r\n
\r\n )}\r\n {richtext ? (\r\n \r\n
\r\n ) : (\r\n \r\n {text}\r\n
\r\n )}\r\n {/* {!paragraph ? (\r\n \r\n {text}\r\n
\r\n ) : (\r\n \r\n {paragraph}\r\n
\r\n )} */}\r\n {paragraph && (\r\n \r\n {paragraph}\r\n
\r\n )}\r\n {!hideButtons && (\r\n {title}
}\r\n {richtext ? (\r\n \r\n
\r\n ) : (\r\n \r\n {text}\r\n
\r\n )}\r\n {/* {!paragraph ? (\r\n \r\n {text}\r\n
\r\n ) : (\r\n \r\n {paragraph}\r\n
\r\n )} */}\r\n\r\n {paragraph && (\r\n \r\n {paragraph}\r\n
\r\n )}\r\n {!hideButtons && (\r\n \r\n \r\n \r\n {\r\n setStartDate(date);\r\n }}\r\n selectsStart\r\n minDate={MIN_DATE}\r\n maxDate={MAX_DATE}\r\n startDate={startDate}\r\n endDate={endDate}\r\n errors={errors}\r\n />\r\n setEndDate(date)}\r\n selectsEnd\r\n startDate={startDate}\r\n endDate={endDate}\r\n minDate={values[fromName] || MIN_DATE}\r\n maxDate={MAX_DATE}\r\n errors={errors}\r\n />\r\n \r\n {t('clearDatesButtonText')}\r\n \r\n \r\n }\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(DateRange);\r\n","import React, { useMemo, useState, useEffect } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport moment from 'moment';\r\nimport 'moment/locale/fr-ca';\r\nimport { useField } from 'formik';\r\nimport { getTimePeriodTx } from '../../services/utils';\r\n// import Select from '../Select';\r\nimport './prestoDateRange.scss';\r\nimport Modal from '../Modal';\r\nimport { DatePickerInput } from '../../atoms';\r\nimport { getLongLanguageCode, isFrench } from '../../services/utils';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Select from '@material-ui/core/Select';\r\n\r\nconst MIN_DATE = moment().subtract(2, 'year').toDate();\r\nconst MAX_DATE = new Date();\r\nlet dateRange = '';\r\nconst PrestoDateRange = ({\r\n name,\r\n fromName,\r\n toName,\r\n setFieldValue,\r\n errors,\r\n values,\r\n setFieldError,\r\n datepickerValue,\r\n setDatepickerValue,\r\n t,\r\n dateFormat = 'MM/DD/YYYY',\r\n showSelectedDateRange = false,\r\n}) => {\r\n const [field, , helpers] = useField(name);\r\n const [isPopupOpen, setIsPopupOpen] = useState(false);\r\n const [startDate, setStartDate] = useState(values.FromDate);\r\n const [endDate, setEndDate] = useState(values.ToDate);\r\n const langCode = getLongLanguageCode();\r\n const [dateoptions, setDateOptions] = useState([]);\r\n\r\n const updatePopupVisibility = () => {\r\n if (field.value === '5' && !isPopupOpen) {\r\n setIsPopupOpen(true);\r\n }\r\n };\r\n\r\n const onSelectClose = updatePopupVisibility;\r\n useDidMountEffect(() => updatePopupVisibility(), [field.value]);\r\n useEffect(() => {\r\n const today = moment().locale(langCode);\r\n const optionsDateFormat = 'MMMM YYYY';\r\n let optionsTemp = [\r\n {\r\n label: today.clone().format(optionsDateFormat),\r\n value: '2',\r\n },\r\n {\r\n label: today.clone().subtract(1, 'month').format(optionsDateFormat),\r\n value: '3',\r\n },\r\n {\r\n label: today.clone().subtract(2, 'month').format(optionsDateFormat),\r\n value: '4',\r\n },\r\n {\r\n label: t('datepickerDefault'),\r\n value: '5',\r\n },\r\n ];\r\n if (datepickerValue.toString() === '6') {\r\n optionsTemp = [\r\n ...optionsTemp,\r\n {\r\n label: getTimePeriodTx(startDate, endDate),\r\n value: '6',\r\n },\r\n ];\r\n }\r\n\r\n setDateOptions(optionsTemp);\r\n }, []);\r\n\r\n const options = useMemo(() => {\r\n const today = moment().locale(langCode);\r\n const optionsDateFormat = 'MMMM YYYY';\r\n let optionsTemp = [\r\n {\r\n label: today.clone().format(optionsDateFormat),\r\n value: '2',\r\n },\r\n {\r\n label: today.clone().subtract(1, 'month').format(optionsDateFormat),\r\n value: '3',\r\n },\r\n {\r\n label: today.clone().subtract(2, 'month').format(optionsDateFormat),\r\n value: '4',\r\n },\r\n {\r\n label: t('datepickerDefault'),\r\n value: '5',\r\n },\r\n ];\r\n if (showSelectedDateRange && field.value == 5) {\r\n optionsTemp = [\r\n ...optionsTemp,\r\n {\r\n label: getTimePeriodTx(startDate, endDate),\r\n value: '6',\r\n },\r\n ];\r\n }\r\n return optionsTemp;\r\n }, [langCode, startDate, endDate]);\r\n\r\n const clearFormikRangeFields = () => {\r\n setFieldValue(fromName, undefined);\r\n setFieldValue(toName, undefined);\r\n setStartDate(new Date());\r\n setEndDate(moment().subtract(2, 'year').toDate());\r\n };\r\n\r\n const closePopup = () => {\r\n setIsPopupOpen(false);\r\n clearFormikRangeFields();\r\n helpers.setValue('2');\r\n setDatepickerValue(2);\r\n };\r\n\r\n const popupOnSubmit = () => {\r\n if (!moment.isDate(values[fromName]) && !moment.isDate(values[toName])) {\r\n setFieldError(fromName, t('transactionHistoryFromDateRequired'));\r\n setFieldError(toName, t('transactionHistoryToDateRequired'));\r\n return;\r\n }\r\n\r\n if (!moment.isDate(values[fromName])) {\r\n setFieldError(fromName, t('transactionHistoryFromDateRequired'));\r\n return;\r\n }\r\n if (!moment.isDate(values[toName])) {\r\n setFieldError(toName, t('transactionHistoryToDateRequired'));\r\n return;\r\n }\r\n\r\n // if (moment(values[toName]).isBefore(values[fromName])) {\r\n // setFieldError(toName, t('transactionHistoryToDateInvalid'));\r\n // return;\r\n // }\r\n\r\n let filteredOptions = dateoptions.filter((x) => x.value !== '6');\r\n let optionsTemp = [\r\n ...filteredOptions,\r\n {\r\n label: getTimePeriodTx(startDate, endDate),\r\n value: '6',\r\n },\r\n ];\r\n\r\n setDateOptions(optionsTemp);\r\n setDatepickerValue(6);\r\n setIsPopupOpen(false);\r\n };\r\n\r\n const optionChangeHandler = (event) => {\r\n setDatepickerValue(event.target.value);\r\n // values[PeriodId] = event.target.value;\r\n if (event.target.value === '5') {\r\n setIsPopupOpen(true);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {/* */}\r\n \r\n \r\n \r\n {t('clearDatesButtonText')}\r\n \r\n \r\n }\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(PrestoDateRange);\r\n","import { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport React from 'react';\r\nimport './error.scss';\r\n\r\nexport default function Error({\r\n title,\r\n text,\r\n textA11y,\r\n small,\r\n titleA11y,\r\n children,\r\n noMargin,\r\n noBg,\r\n custom = false,\r\n showfailedIcon = false,\r\n gwError = false,\r\n}) {\r\n //console.log('text', text);\r\n return (\r\n \r\n
\r\n \r\n {\r\n setStartDate(date);\r\n }}\r\n selectsStart\r\n showMonthDropdown\r\n showYearDropdown\r\n dropdownMode=\"select\"\r\n useShortMonthInDropdown\r\n maxDate={MAX_DATE}\r\n minDate={MIN_DATE}\r\n startDate={startDate}\r\n endDate={endDate}\r\n errors={errors}\r\n belowText={isFrench() ? 'MM/JJ/AAAA' : dateFormat}\r\n popperModifiers={{\r\n flip: {\r\n behavior: ['bottom'],\r\n },\r\n preventOverflow: {\r\n enabled: false,\r\n },\r\n hide: {\r\n enabled: false,\r\n },\r\n }}\r\n />\r\n
\r\n\r\n \r\n setEndDate(date)}\r\n selectsEnd\r\n showMonthDropdown\r\n showYearDropdown\r\n dropdownMode=\"select\"\r\n useShortMonthInDropdown\r\n startDate={startDate}\r\n endDate={endDate}\r\n maxDate={MAX_DATE}\r\n minDate={values[fromName] || MIN_DATE}\r\n errors={errors}\r\n belowText={isFrench() ? 'MM/JJ/AAAA' : dateFormat}\r\n popperModifiers={{\r\n flip: {\r\n behavior: ['bottom'],\r\n },\r\n preventOverflow: {\r\n enabled: false,\r\n },\r\n hide: {\r\n enabled: false,\r\n },\r\n }}\r\n />\r\n
\r\n \r\n {title}\r\n
\r\n {text}
: \r\n {/* TODO Can we refactor above using ButtonBlock atom? */}\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n {/* TODO Can we refactor this as using Button atom? */}\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n//import './imageWithContent.scss';\r\nimport './imageWithContent.scss';\r\n\r\nconst ImageWithContent = (props) => {\r\n const [toggle, setToggle] = useState(true);\r\n const focusDiv = useRef();\r\n //console.log(props, \"ImageContent\");\r\n //console.log(props.imagecontent.Id, \"Id\");\r\n\r\n const prestoPerkLinkHandler = (Id) => {\r\n setToggle(!toggle);\r\n const element = document.getElementById(Id);\r\n if (element !== null) {\r\n const links = element.querySelectorAll('.attractions-link');\r\n for (let i = 0; i < links.length; i++) {\r\n if (!toggle) {\r\n links[i].setAttribute('tabindex', '-1');\r\n } else {\r\n links[i].setAttribute('tabindex', '0');\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const element = document.getElementById(props.imagecontent.Id.value);\r\n if (element !== null) {\r\n const links = element.querySelectorAll('.attractions-link');\r\n for (let i = 0; i < links.length; i++) {\r\n links[i].setAttribute('tabindex', '-1');\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!toggle) {\r\n focusDiv.current.focus();\r\n }\r\n }, [toggle]);\r\n\r\n \r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ImageWithContent;\r\n","import React, { useRef, useEffect } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport { IconButton } from '../../atoms';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport CloseSearchImage from '../../assets/images/search_close.svg';\r\nimport searchIcon from '../../assets/images/SearchIcon.svg';\r\nimport './headerSearch.scss';\r\n\r\nconst HeaderSearch = ({ t }) => {\r\n const ref = useRef(null);\r\n const searchInputRef = useRef(null);\r\n const [isSearchClicked, showSearch] = useDetectOutsideClick(ref, false, true);\r\n\r\n useEffect(() => {\r\n if (isSearchClicked) {\r\n searchInputRef.current.focus();\r\n searchInputRef.current.placeholder = t('topNavigationSearchPlaceholder');\r\n } else {\r\n searchInputRef.current.value = '';\r\n searchInputRef.current.placeholder = '';\r\n }\r\n }, [isSearchClicked]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {toggle ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n {children}
;\r\n}\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { Icon } from '../../atoms';\r\n\r\nimport './pagination.scss';\r\n\r\nconst Pagination = ({ pageNumber, total, setPageNumber, t }) => {\r\n const isFirstPage = pageNumber === 1;\r\n const isLastPage = pageNumber === total;\r\n\r\n return (\r\n\r\n (isFirstPage ? null : setPageNumber(1))}\r\n aria-disabled={isFirstPage}\r\n className={`pagination-button ${isFirstPage ? 'disabled' : ''}`}\r\n aria-label={t('paginationFirstPageButtonA11y')}\r\n >\r\n (isFirstPage ? null : setPageNumber(pageNumber - 1))}\r\n aria-disabled={isFirstPage}\r\n className={`pagination-button second ${isFirstPage ? 'disabled' : ''}`}\r\n aria-label={t('paginationPreviousPageButtonA11y')}\r\n >\r\n (isLastPage ? null : setPageNumber(pageNumber + 1))}\r\n aria-disabled={isLastPage}\r\n className={`pagination-button ${isLastPage ? 'disabled' : ''}`}\r\n aria-label={t('paginationNextPageButtonA11y')}\r\n >\r\n (isLastPage ? null : setPageNumber(total))}\r\n aria-disabled={isLastPage}\r\n className={`pagination-button second ${isLastPage ? 'disabled' : ''}`}\r\n aria-label={t('paginationLastPageButtonA11y')}\r\n >\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(Pagination);\r\n","export default {\r\n NEWMEDIA: 'NEWMEDIA',\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport './success.scss';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst SuccessBlock = ({ title, titleA11y, Content, contextText, richText }) => {\r\n return (\r\n \r\n {pageNumber}/{total}\r\n
\r\n\r\n \r\n \r\n
\r\n {contextText && (\r\n \r\n
\r\n {richText ?
\r\n )}\r\n {Content ?
\r\n \r\n );\r\n};\r\n\r\nexport default function Success({ title, titleA11y, Content, contextText, richText }) {\r\n const [successContent, setSuccessContent] = useState(null);\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setSuccessContent(\r\n \r\n {successContent}\r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { formatDecimalWithCurrency, redirectToUrl, sortItems } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport cardInfo from '../../constants/cardInfo';\r\nimport {\r\n removeFromShoppingCart,\r\n addShoppingCartMessage,\r\n setGuestShoppingCartToken,\r\n setGoBackURL,\r\n} from '../../redux/user/actions';\r\nimport Success from '../Success';\r\nimport { Button, Loader } from '../../atoms';\r\nimport './shoppingcart.scss';\r\nimport api from '../../services/api';\r\n\r\nconst ShoppingCart = ({ forwardRef, isOpenShoppingCart, closeShoppingCart, t }) => {\r\n const visibleId = useSelector((state) => state.user.selectedCard.visibleId);\r\n\r\n const fareMedias = useSelector((state) => state.user.fareMedias);\r\n const fareMediaVibleIdList = fareMedias.map((fareMedia) => fareMedia.visibleId);\r\n const cartItems = useSelector((state) => state.user.shoppingCart.items);\r\n const cartItemsWithoutMedia = cartItems.filter(\r\n (item) => !fareMediaVibleIdList.includes(item.visibleId)\r\n );\r\n const messages = useSelector((state) => state.user.shoppingCart.addMessage);\r\n const subTotal = cartItems ? cartItems.reduce((acc, val) => acc + val.subTotal, 0) : 0;\r\n const customerId = useSelector((state) => state.user.customerId);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const guestSCT = useSelector((reduxState) => reduxState.user.guestShoppingCartToken);\r\n const anonymous = useSelector((state) => state.user && state.user.anonymous);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dispatch = useDispatch();\r\n const { pathname } = useLocation();\r\n\r\n /*\r\n const removeItem = (orderLineId) => {\r\n const data = {\r\n customerId,\r\n mediaId: visibleId,\r\n orderLineId,\r\n Sct: guestUserInfo?.isGuestLogin ? guestSCT?.sct : guestSCT?.sisct,\r\n Cct: guestUserInfo?.isGuestLogin ? guestSCT?.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n dispatch(removeFromShoppingCart(data));\r\n dispatch(addShoppingCartMessage(''));\r\n };\r\n */\r\n\r\n const removeItem = (orderLineId) => {\r\n //console.log(\"3: inside removeItem \" + isLoading);\r\n return new Promise((resolve, reject) => {\r\n try {\r\n const data = {\r\n customerId,\r\n mediaId: visibleId,\r\n orderLineId,\r\n Sct: guestUserInfo?.isGuestLogin ? guestSCT?.sct : guestSCT?.sisct,\r\n Cct: guestUserInfo?.isGuestLogin ? guestSCT?.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n\r\n dispatch(removeFromShoppingCart(data));\r\n dispatch(addShoppingCartMessage(''));\r\n resolve(); // Resolve the promise on successful completion\r\n //console.log(\"4: Inside remove item before setIsLoading as false\");\r\n //setIsLoading(false);\r\n //console.log(\"5: Inside remove item after setIsLoading as false\");\r\n //console.log(\"4: complete removeItem \" + isLoading);\r\n } catch (error) {\r\n reject(error); // Reject the promise if there's an error\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleRemoveClick = async (orderLineId) => {\r\n // Set loading to true\r\n // console.log(\"1: setIsLoading as true \" + isLoading);\r\n setIsLoading(true);\r\n try {\r\n // console.log(\"2: before call removeItem \" + isLoading);\r\n await removeItem(orderLineId); // Directly call removeItem\r\n } catch (error) {\r\n console.error(\"Error removing item:\", error);\r\n } finally {\r\n //console.log(\"5: before setIsLoading as false \" + isLoading);\r\n //setIsLoading(false);\r\n if (isLoading) {\r\n setTimeout(() => {\r\n setIsLoading(false);\r\n }, 4000);\r\n //console.log(\"6: After setIsLoading as false \" + isLoading);\r\n }\r\n else {\r\n //console.log(\"7: Inside else before setIsLoading as false \" + isLoading);\r\n setTimeout(() => {\r\n setIsLoading(false);\r\n }, 4000);\r\n //console.log(\"8: Inside else after setIsLoading as false \" + isLoading);\r\n }\r\n }\r\n };\r\n\r\n\r\n useEffect(() => {\r\n let arr = pathname.split('/');\r\n let firstel = arr.shift();\r\n let secondel = arr.shift();\r\n let actualpath = '/' + arr.join('/');\r\n\r\n if (actualpath !== routes.checkout) {\r\n dispatch(setGoBackURL(actualpath));\r\n }\r\n }, []);\r\n\r\n const checkoutItemsHandler = () => {\r\n let payload = {\r\n customerId,\r\n VisibleId: 'NEWMEDIA',\r\n mediaId: visibleId,\r\n SctToken: guestSCT?.sct,\r\n SisctToken: guestSCT?.sisct,\r\n CctToken: '',\r\n IsGuestFlow: guestUserInfo?.isGuestLogin ? true : false,\r\n };\r\n\r\n // api\r\n // .buyAprestoCardCommenceCheckOut(payload)\r\n // .then((res) => {\r\n // dispatch(setGuestShoppingCartToken(res.data.Cookies));\r\n // redirectToUrl(routes.checkout);\r\n // })\r\n // .catch(() => {});\r\n redirectToUrl(routes.checkout);\r\n };\r\n const CartItem = ({ item, isEmpty }) => (\r\n \r\n
\r\n )}\r\n \r\n );\r\n\r\n const CartHeader = ({ nickName, isEmpty }) => (\r\n <>\r\n {!isEmpty && \r\n
\r\n {!isEmpty && (\r\n \r\n {isEmpty ? t('shoppingCartCartEmpty') : item.name}\r\n
\r\n {isEmpty ? '-' : item.quantity}
\r\n \r\n {isEmpty ? '-' : `${formatDecimalWithCurrency(item.subTotal)}`}\r\n
\r\n \r\n removeItem(item.orderLineId)}\r\n onClick={() => handleRemoveClick(item?.orderLineId)}\r\n onKeyPress={() => null}\r\n >\r\n {t('shoppingCartRemove')}\r\n
\r\n {nickName}
}\r\n \r\n
\r\n \r\n );\r\n let isAllSameGroup = cartItemsWithoutMedia.every((item) => item.visibleId === cardInfo.NEWMEDIA);\r\n cartItems.sort(sortItems('name'));\r\n return (\r\n <>\r\n {isLoading ? (\r\n (() => {\r\n //console.log(\"Rendering {t('shoppingCartItem')}
\r\n {t('shoppingCartQuantity')}
\r\n {t('shoppingCartPrice')}
\r\n \r\n
\r\n );\r\n })()\r\n ) : (\r\n (() => {\r\n //console.log(\"Hide Loading...
\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 ShoppingCart;\r\n","import React from 'react';\r\n\r\nimport { Step } from '../../atoms';\r\nimport './stepTracker.scss';\r\n\r\nexport default function StepTracker({ activeIndex, items, isUnlinkCard }) {\r\n return (\r\n \r\n {messages && messages.map((msg) => (msg ?
\r\n \r\n {!cartItems.length ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n {cartItemsWithoutMedia &&\r\n cartItemsWithoutMedia.length > 0 &&\r\n cartItemsWithoutMedia.sort(sortItems('nickName')).map((item, index) => {\r\n return (\r\n <>\r\n {isAllSameGroup && index === 0 ? (\r\n \r\n
\r\n \r\n );\r\n })}\r\n {fareMedias &&\r\n fareMedias.sort(sortItems('nickName', true)).map((fareMedia) => (\r\n <>\r\n {cartItems.filter((i) => i.visibleId === fareMedia.visibleId).length ? (\r\n <>\r\n \r\n {cartItems\r\n .filter((items) => items.visibleId === fareMedia.visibleId)\r\n .sort(sortItems('name'))\r\n .map((item) => (\r\n
\r\n \r\n ) : null}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n {t('shoppingCartSubtotal')} {formatDecimalWithCurrency(subTotal)}\r\n
\r\n \r\n checkoutItemsHandler()}\r\n onKeyPress={() => null}\r\n >\r\n {t('shoppingCartCheckout')}\r\n \r\n
\r\n \r\n \r\n
\r\n - \r\n {items.map(\r\n (\r\n {\r\n text,\r\n textA11y,\r\n labelA11y,\r\n textNotCompletedA11y,\r\n textInProgressA11y,\r\n textCompletedA11y,\r\n hasError = false,\r\n inProgress = false,\r\n StepA11y,\r\n OfA11y,\r\n CompleteA11y,\r\n NotCompleteA11y,\r\n CurrentStepA11y,\r\n },\r\n index\r\n ) => (\r\n
\r\n
\r\n);\r\n\r\nexport default Warning;\r\n","export const monerisErrorCodes = ['TPSM-AL-01', 'TPSM-AR-01', 'TPSM-SPM-01', 'TPSM-CO-01'];\r\nexport const daxErrorCodes = ['AFMS-CRT-TE-0001', 'AFMS-CRT-TE-0002', 'AFMS-CRT-TE-0003'];\r\n\r\nexport default function handleThirdPartyError(error, callback) {\r\n if (!error) {\r\n return;\r\n }\r\n\r\n const hasMonerisError = monerisErrorCodes.indexOf(error) > -1;\r\n const hasDaxError = daxErrorCodes.indexOf(error) > -1;\r\n\r\n if (hasDaxError || hasMonerisError) {\r\n callback(error);\r\n }\r\n}\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport Warning from '../Warning';\r\nimport { ButtonBlock, Button, PrintButton } from '../../atoms';\r\nimport { monerisErrorCodes, daxErrorCodes } from '../../services/handleThirdPartyError';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\n\r\nimport './thirdPartySystemErrorWarning.scss';\r\n\r\nconst ThirdPartySystemErrorWarning = ({ errorCode, fields, referenceNumber = '' }) => {\r\n let title = null;\r\n let description = null;\r\n\r\n if (!errorCode) {\r\n return null;\r\n }\r\n\r\n if (monerisErrorCodes.indexOf(errorCode) > -1) {\r\n title = fields.thirdPartyMonerisErrorTitle;\r\n description = fields.thirdPartyMonerisErrorDescription;\r\n }\r\n\r\n if (daxErrorCodes.indexOf(errorCode) > -1) {\r\n title = fields.thirdPartyDaxErrorTitle;\r\n description = fields.thirdPartyDaxErrorDescription;\r\n }\r\n\r\n return (\r\n <>\r\n {referenceNumber !== '' ? (\r\n \r\n 
\r\n \r\n
\r\n \r\n {custom ?
\r\n {description}
: \r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport styles from './valueRow.module.scss';\r\n\r\nexport default function ValueRow({ left, right, noBorder = false, noPaddingBottom = false }) {\r\n return (\r\n {title}
\r\n {left}
\r\n {right}
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport './valueRowSecond.scss';\r\n\r\nexport default function ValueRowSecond({\r\n left,\r\n right,\r\n rightBold = false,\r\n leftBold = false,\r\n disableTopPadding = false,\r\n addBottomBorder = false,\r\n}) {\r\n let cssClasses = 'value-row';\r\n cssClasses += addBottomBorder ? ' addBottomBorder' : '';\r\n cssClasses += disableTopPadding ? ' disableTopPadding' : '';\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","export default {\r\n Invalid: 0,\r\n RegisteredNotActive: 1,\r\n RegisteredActivationPending: 2,\r\n RegisteredActivationExpired: 3,\r\n // ActiveUnregistered: 4, //For future release\r\n ActiveRegistrationPending: 5,\r\n ActiveRegistrationExpired: 6,\r\n ActiveRegistered: 7,\r\n BlockedRegistered: 8,\r\n BlockedReplacementPending: 9,\r\n BlockedUnregistered: 10,\r\n BlockedForReplacement: 11,\r\n BlockedForPendingTransfer: 12,\r\n BlockedForTransfer: 13,\r\n Error: 14,\r\n Expired: 15,\r\n};\r\n","import React from 'react';\r\n\r\nimport { PrestoLink } from '../../atoms';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport cardStatuses from '../../constants/cardStatuses';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\nimport mediaSubType from '../../constants/mediaSubType';\r\n\r\nconst getKeyByValue = (object, value) => {\r\n return Object.keys(object).find((key) => object[key] === value);\r\n};\r\nconst isHiddenByFieldValue = (item, status) => {\r\n const statusName = getKeyByValue(cardStatuses, status);\r\n\r\n if (statusName && item.fields) {\r\n const fieldName = `HideFor${statusName}Card`;\r\n const statusField = item.fields.find((field) => {\r\n return field.name.replace(/\\s/g, '') === fieldName;\r\n });\r\n\r\n return statusField?.jss.value === true;\r\n }\r\n\r\n return false;\r\n};\r\nconst CardControlledMenuItem = ({ item, selectedCard, wrapperClassName = '', onClickCustom }) => {\r\n const isPrestoCard = selectedCard?.type === mediaSubTypes.presto;\r\n const isWalletCard = selectedCard?.mediaType === mediaTypes.CRDNC;\r\n const isAppleWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.APPLE;\r\n const isGoogleWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.GOOGLE;\r\n const isMobileWalletCard = selectedCard.mediaSubTypeWallet === null || '';\r\n const cardStatusCode = selectedCard?.cardStateCode;\r\n const isVisible =\r\n (isPrestoCard &&\r\n item.ShowForPrestoCard?.jss.value &&\r\n !isHiddenByFieldValue(item, cardStatusCode)) ||\r\n (isWalletCard &&\r\n ((isGoogleWalletCard && item.ShowForGoogleWalletCard?.jss.value) ||\r\n (isAppleWalletCard && item.ShowForAppleWalletCard?.jss.value) ||\r\n (isMobileWalletCard &&\r\n !item.ShowForAppleWalletCard?.jss.value &&\r\n !item.ShowForGoogleWalletCard?.jss.value))) ||\r\n (!isPrestoCard && item.ShowForContactlessCard?.jss.value);\r\n return (\r\n <>\r\n {isVisible && (\r\n {left}
\r\n {right}
\r\n \r\n null : closeModal}\r\n onKeyDown={disableEscapeKeyDown ? () => null : closeModal}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n )\r\n );\r\n};\r\n \r\nexport default PaymentModal;","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Field } from 'formik';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { InlineError } from '../../atoms';\r\nimport './textArea.scss';\r\n\r\nexport default function TextArea({\r\n errors,\r\n touched,\r\n label,\r\n name,\r\n value,\r\n length,\r\n inputA11y,\r\n isDisabled = false,\r\n required = false,\r\n}) {\r\n const error = touched && touched[name] && errors && errors[name];\r\n const valueObject = value ? { value } : {};\r\n\r\n return (\r\n \r\n
\r\n {isGetTicketFetching && \r\n \r\n {cautionMessage}\r\n
\r\n \r\n {title}\r\n
\r\n \r\n \r\n
\r\n \r\n {label ? (\r\n \r\n ) : null}\r\n\r\n \r\n\r\n {error ? {error} : null}\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { CardBlock } from '../../molecules';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport './accountDeletion.scss';\r\n\r\nconst AccountDeletion = ({ fields }) => {\r\n const deleteAccountUrl = () => {\r\n redirectToUrl(fields.RedirectUrl?.value?.href, false);\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n deleteAccountUrl()} >\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(AccountDeletion);\r\n","import { isJsonString } from './utils';\r\nimport apiResponses from '../constants/apiResponses';\r\n\r\nexport default function handleServerSuccessError(\r\n error,\r\n setIsError = () => {},\r\n setIsServerError,\r\n setInlineError\r\n) {\r\n const parsedMessageObject = error && isJsonString(error) && JSON.parse(error);\r\n setIsError('');\r\n if (!parsedMessageObject || !parsedMessageObject.Description) {\r\n return;\r\n }\r\n\r\n if (setIsServerError && parsedMessageObject.Code === 'ValidateSecurityQA_FailedAccountLocked') {\r\n setIsServerError({ code: parsedMessageObject.Code, text: parsedMessageObject.Description });\r\n return;\r\n }\r\n if (setInlineError) {\r\n setInlineError('');\r\n if (\r\n parsedMessageObject.Code === 'Faremedia_Deactivated' ||\r\n parsedMessageObject.Code === 'Faremedia_Anonymous' ||\r\n parsedMessageObject.Code === 'AFMS-DAX-FE-0001' ||\r\n parsedMessageObject.Code === 'AFMS-DAX-FE-0006' ||\r\n parsedMessageObject.Code === apiResponses.securityWrongPassword ||\r\n parsedMessageObject.Code === apiResponses.securityUsernameAlreadyExists\r\n ) {\r\n setInlineError(parsedMessageObject.Description);\r\n } else {\r\n setIsError(parsedMessageObject.Description);\r\n }\r\n } else {\r\n setIsError(parsedMessageObject.Description);\r\n }\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport { isFrench } from '../../services/utils';\r\nimport AccountSecurity0 from './AccountSecurity0';\r\nimport AccountSecurity1 from './AccountSecurity1';\r\n\r\nimport './accountSecurity.scss';\r\n\r\nconst stepsAccountSecurityMap = [AccountSecurity0, AccountSecurity1];\r\n\r\nconst AccountSecurity = ({ t, fields }) => {\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const [questions, setQuestions] = useState([]);\r\n const [answers, setAnswers] = useState([]);\r\n const [step, setStep] = useState(0);\r\n const [state, setState] = useState({});\r\n const toNextStep = () => setStep(step + 1);\r\n const toPreviousStep = () => setStep(step - 1);\r\n const Stepper = stepsAccountSecurityMap[step];\r\n const [error, setIsError] = useState('');\r\n const language = isFrench();\r\n useEffect(() => {\r\n api.getSecurityQuestionsWithAnswers().then((response) => {\r\n if (response.data.Success) {\r\n setQuestions(\r\n response.data.Data.map((i) => ({\r\n label: i.Item1.Text,\r\n value: i.Item1.Id,\r\n }))\r\n );\r\n setAnswers(\r\n response.data.Data.map((i) => ({\r\n answer: i.Item2,\r\n }))\r\n );\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n }, [userInfo.userName, language]);\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 if (error) {\r\n content = \r\n \r\n {\r\n api\r\n .setSecurityQuestionsWithAnswers({\r\n CustomerId: userInfo.customerId,\r\n UserName: values.UserName,\r\n Question1Id: values.Question1Id,\r\n Question2Id: values.Question2Id,\r\n Question3Id: values.Question3Id,\r\n Answer1: values.Answer1.trim(),\r\n Answer2: values.Answer2.trim(),\r\n Answer3: values.Answer3.trim(),\r\n Password: values.Password,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n dispatch(updateUserInfo(dispatch));\r\n api.getSecurityQuestionsWithAnswers().then((response) => {\r\n if (response.data.Success) {\r\n setQuestions(\r\n response.data.Data.map((i) => ({\r\n label: i.Item1.Text,\r\n value: i.Item1.Id,\r\n }))\r\n );\r\n setAnswers(\r\n response.data.Data.map((i) => ({\r\n answer: i.Item2,\r\n }))\r\n );\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n\r\n setState({\r\n ...state,\r\n securityQuestionsResult: 'updated',\r\n });\r\n toPreviousStep();\r\n // setQuestions(null);\r\n // setAnswers(null);\r\n } else if (\r\n (!response.data.Success &&\r\n JSON.parse(response.data.Error).Code ===\r\n apiResponses.securityWrongPassword) ||\r\n JSON.parse(response.data.Error).Code ===\r\n apiResponses.securityUsernameAlreadyExists\r\n ) {\r\n setState({\r\n errorField: JSON.parse(response.data.Error),\r\n });\r\n handleServerSuccessError(response.data.Error, () => {}, null, setInlineError);\r\n } else {\r\n setState({\r\n ...state,\r\n securityQuestionsResult: 'notUpdated',\r\n });\r\n toPreviousStep();\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values }) => (\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState, useRef, useEffect } from 'react';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { StepTracker, TextInput, CardBlock, Success, Title, Error } from '../../molecules';\r\nimport { Formik } from 'formik';\r\nimport { Button, IconButton } from '../../atoms';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport failIcon from '../../assets/images/Failed.svg';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport api from '../../services/api';\r\nimport { setActivateCardMode, setActivateCardMyProducts } from '../../redux/products/actions';\r\nimport { fetchAllData } from '../../redux/user/actions';\r\nimport { withTranslation } from 'react-i18next';\r\nimport './activateCard.scss';\r\n\r\nconst ActivateCard = ({ fields, t }) => {\r\n const [cardNumber, activateCardNumber] = useState('');\r\n const focusDiv = useRef();\r\n const [pin, activatePin] = useState('');\r\n const [step, setStep] = useState(0);\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n };\r\n const [apiStatus, setApiStatus] = useState({ submit: false, state: 'INITIAL' });\r\n const manageMyProduct = useSelector((reduxState) => reduxState.products.manageMyProduct);\r\n const user = useSelector((reduxState) => reduxState.user);\r\n const fareMedia = useSelector((reduxState) =>\r\n reduxState.user.fareMedias.find((el) => el.mediaId === reduxState.user.selectedCard.mediaId)\r\n );\r\n const dispatch = useDispatch();\r\n const cardNumberAndPin_REGEX = /^[0-9]+$/;\r\n const [checkErrorCard, setCheckErrorCard] = useState(false);\r\n const [checkErrorPin, setCheckErrorPin] = useState(false);\r\n\r\n const [errorMsg, setErrorMsg] = useState({\r\n eM1: false,\r\n eM9: false,\r\n eM8: false,\r\n eM6: false,\r\n eM37: false,\r\n });\r\n const handleActivateCard = () => {\r\n const payload = {\r\n CustomerId: user?.customerId,\r\n CardNumber: cardNumber,\r\n Pin: pin,\r\n VisibleId: fareMedia?.visibleId,\r\n MediaId: fareMedia?.mediaId,\r\n };\r\n setApiStatus({ submit: true, state: 'LOADING' });\r\n api\r\n .prestoCardActivate(payload)\r\n .then((response) => {\r\n if (response?.data?.Success) {\r\n setApiStatus({ submit: true, state: 'SUCCESS' });\r\n dispatch(fetchAllData(false));\r\n toNextStep();\r\n } else if (response?.data?.errorMessage === 'AFMS-CRT-MA-0001') {\r\n setErrorMsg({ eM1: true, eM9: false, eM8: false, eM6: false, eM37: false });\r\n setApiStatus({ submit: true });\r\n setStep(0);\r\n } else if (response?.data?.errorMessage === 'AFMS-CRT-FE-0009') {\r\n setErrorMsg({ eM1: false, eM9: true, eM8: false, eM6: false, eM37: false });\r\n setStep(0);\r\n } else if (response?.data?.errorMessage === 'AFMS-CRT-FE-0008') {\r\n setErrorMsg({ eM1: false, eM9: false, eM8: true, eM6: false, eM37: false });\r\n setStep(0);\r\n } else if (response?.data?.errorMessage === 'AFMS-DAX-FE-0006') {\r\n setErrorMsg({ eM1: false, eM9: false, eM8: false, eM6: true, eM37: false });\r\n setStep(0);\r\n } else if (response?.data?.errorMessage === 'AFMS-CRT-FE-0037') {\r\n setErrorMsg({ eM1: false, eM9: false, eM8: false, eM6: false, eM37: true });\r\n setStep(0);\r\n } else {\r\n setApiStatus({ submit: true, state: 'ERROR' });\r\n toNextStep();\r\n }\r\n })\r\n .catch((err) => {\r\n setApiStatus({ submit: true, state: 'ERROR' });\r\n });\r\n };\r\n const putCardNumber = (e) => {\r\n activateCardNumber(e.target.value);\r\n };\r\n const putPinNumber = (e) => {\r\n activatePin(e.target.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (manageMyProduct?.activateCardDetailsEnabled) {\r\n dispatch(setActivateCardMyProducts(false));\r\n document.body.scrollTop = 0;\r\n }\r\n }, [manageMyProduct]);\r\n\r\n const postApi = () => {\r\n if (apiStatus.state === 'SUCCESS') {\r\n return (\r\n \r\n (\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n )}\r\n />\r\n \r\n window.print()}\r\n icon={printIcon}\r\n tabIndex=\"0\"\r\n >\r\n {fields.PrintLabel.value}\r\n \r\n
\r\n \r\n {\r\n setStep(0);\r\n activateCardNumber('');\r\n activatePin('');\r\n dispatch(\r\n setActivateCardMode({\r\n activateCardDetailsEnabled: false,\r\n selectedCard: {},\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 manageMyProduct?.activateCardDetailsEnabled ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n window.print()}\r\n icon={printIcon}\r\n tabIndex=\"0\"\r\n >\r\n {fields.PrintLabel.value}\r\n \r\n
\r\n \r\n {\r\n setStep(0);\r\n activateCardNumber('');\r\n activatePin('');\r\n dispatch(\r\n setActivateCardMode({\r\n activateCardDetailsEnabled: false,\r\n selectedCard: {},\r\n })\r\n );\r\n }}\r\n >\r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n \r\n <div className=\"activatecard-title\">\r\n <Text field={fields.Title} />\r\n </div>\r\n \r\n {step === 0 ? (\r\n
\r\n ) : null;\r\n};\r\n\r\nexport default withTranslation()(ActivateCard);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Text, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Header } from '../../molecules';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport '../../assets/scss/app.scss';\r\nimport './addCard.scss';\r\nimport { getQueryParams } from '../../services/utils';\r\n\r\nconst AddCard = (props) => {\r\n const [isPrestoTabClicked, showPrestoTab] = useState(true);\r\n const [isContactlessTabClicked, showContactlessTab] = useState(false);\r\n const [isInteracTabClicked, showInteracTab] = useState(false);\r\n const { fields } = props;\r\n const queryParams = getQueryParams(useLocation().search);\r\n\r\n function showTab(presto, contactless, interac) {\r\n showPrestoTab(presto);\r\n showContactlessTab(contactless);\r\n showInteracTab(interac);\r\n }\r\n\r\n useEffect(() => {\r\n if (queryParams.addCardtype !== undefined && queryParams.addCardtype === 'credit') {\r\n showTab(false, true, false);\r\n }\r\n if (queryParams.contactLessCardDebit !== undefined && queryParams.contactLessCardDebit === 'false') {\r\n showTab(false, true, false);\r\n }\r\n if (queryParams.addCardtype !== undefined && queryParams.addCardtype === 'debit') {\r\n showTab(false, false, true);\r\n }\r\n if (queryParams.contactLessCardDebit !== undefined && queryParams.contactLessCardDebit === 'true') {\r\n showTab(false, false, true);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n ) : (\r\n postApi()\r\n )}\r\n \r\n
\r\n {errorMsg.eM1 ? \r\n
\r\n ) : null}\r\n {errorMsg.eM6 ? \r\n
\r\n \r\n
\r\n \r\n {\r\n const errors = {};\r\n if (!values.CardNumber) {\r\n errors.CardNumber = fields.CardNumberErrorMessage.value;\r\n } else if (\r\n !cardNumberAndPin_REGEX.test(values.CardNumber) ||\r\n values.CardNumber.length !== 17\r\n ) {\r\n errors.CardNumber = fields.InvalidCardNumberError.value;\r\n }\r\n if (!values.Pin) {\r\n errors.Pin = fields.PinNumberErrorMessage.value;\r\n } else if (!cardNumberAndPin_REGEX.test(values.Pin) || values.Pin.length !== 4) {\r\n errors.Pin = fields.PINInvalidFormatError.value;\r\n }\r\n if (errors.hasOwnProperty('CardNumber')) {\r\n setCheckErrorCard(true);\r\n } else {\r\n setCheckErrorCard(false);\r\n }\r\n if (errors.hasOwnProperty('Pin')) {\r\n setCheckErrorPin(true);\r\n } else {\r\n setCheckErrorPin(false);\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n //console.log(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleSubmit, handleChange }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n \r\n
\r\n \r\n {useSelector((state) => state.user.isScreenHeaderVisible) ? (\r\n <>\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddCard;\r\n","export default {\r\n newPending: 0,\r\n pending: 1,\r\n isNull: 2,\r\n verified: 3,\r\n verifyBypass: 4,\r\n};\r\n","import React from 'react';\r\n\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport { CardBlock, InlineButtonBlock } from '../../molecules';\r\n\r\nconst AddContactlessCard0 = (props) => {\r\n const { fields } = props;\r\n\r\n return (\r\n \r\n {\r\n showTab(true, false, false);\r\n }}\r\n onKeyPress={() => {\r\n showTab(true, false, false);\r\n }}\r\n >\r\n {\r\n showTab(false, true, false);\r\n }}\r\n onKeyPress={() => {\r\n showTab(false, true, false);\r\n }}\r\n >\r\n {\r\n showTab(false, false, true);\r\n }}\r\n onKeyPress={() => {\r\n showTab(false, false, true);\r\n }}\r\n >\r\n
\r\n {\r\n isContactlessTabClicked &&\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {props.fields.showAddInteracCardTab.value ? (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n
\r\n }\r\n {\r\n isInteracTabClicked &&\r\n \r\n
\r\n }\r\n \r\n ) : null}\r\n {\r\n // eslint-disable-next-line no-nested-ternary\r\n isPrestoTabClicked ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {isInterac ? (\r\n \r\n
\r\n\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {step > 3 ? (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(AddContactlessCard);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport Iframe from 'react-iframe';\r\n\r\nimport {\r\n getShortLanguageCode,\r\n isJsonString,\r\n redirectToUrl,\r\n localstorageService,\r\n} from '../../services/utils';\r\nimport monerisConstants from '../../constants/moneris';\r\nimport { ButtonBlock, Button, MediaImage, MediaImageWrapper } from '../../atoms';\r\nimport { CardBlock, Error, ConnectionError, Note } from '../../molecules';\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport api from '../../services/api';\r\nimport routes from '../../constants/routes';\r\n\r\nconst AddContactlessCard3 = (props) => {\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const { fields, isInterac, state, setState, toNextStep, toPreviousStep, t } = props;\r\n const dispatch = useDispatch();\r\n const customerId = userInfo.customerId;\r\n const sessionInstanceId = userInfo.sessionInstanceId;\r\n const accountId = state.AccountId;\r\n const nicknameOrFirstName = ' ';\r\n const [token, setToken] = useState('');\r\n const [error, setIsError] = useState('');\r\n const [iframeExpired, setIframeExpired] = useState(false);\r\n const [hideIframe, setHideIframe] = useState(false);\r\n const iframeHeight = isInterac ? '350px' : '700px';\r\n //const returnpath = `${routes.addCard}?creditCard=true&nextstep=4`\r\n const loginEmail = useSelector((state) => state.user.loginEmail);\r\n\r\n function refreshIframe() {\r\n document.getElementById('iframe').src += '';\r\n setIframeExpired(false);\r\n setHideIframe(false);\r\n }\r\n function setErrorAndRefreshIframe(errorText) {\r\n setIsError(errorText);\r\n refreshIframe();\r\n }\r\n\r\n const handleIframeTask = (e) => {\r\n if (!isJsonString(e.data)) {\r\n return;\r\n }\r\n\r\n const iframeResponse = JSON.parse(e.data);\r\n\r\n if (iframeResponse.StatusCode === monerisConstants.responses.success) {\r\n const mediaInstanceId = iframeResponse?.AssociatedMedia?.MediaIdentifiers[0].mediaInstanceId;\r\n if (mediaInstanceId === null) {\r\n setErrorAndRefreshIframe(t('monerisErrorTechnicalError'));\r\n } else {\r\n const maskedPan = iframeResponse.Media?.MaskedPan;\r\n const cardType = iframeResponse.Media?.CardType;\r\n setState({\r\n ...state,\r\n MediaId: mediaInstanceId,\r\n CardProvider: cardType,\r\n MaskedPan: maskedPan,\r\n AccountId: state.AccountId,\r\n });\r\n dispatch(showScreenHeader(false));\r\n //toNextStep();\r\n var crediordebit = isInterac ? 'debit' : 'credit';\r\n var returnpath = `${routes.addCard}?addCardtype=${crediordebit}¶m1= ${cardType}¶m2=${maskedPan}¶m3=${mediaInstanceId}¶m4=${state.AccountId}`;\r\n redirectToUrl(`${routes.b2cRegisteredSignIn}?email=${loginEmail}&returnUrl=${returnpath}`);\r\n }\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.connectionErrorI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.unauthorized ||\r\n iframeResponse.StatusCode === monerisConstants.responses.connectionErrorE\r\n ) {\r\n setIsError('');\r\n setIframeExpired(true);\r\n setHideIframe(true);\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.retryAttemptsExceededI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.retryAttemptsExceededE\r\n ) {\r\n setIsError(t('monerisErrorTooManyAttempts'));\r\n setIframeExpired(false);\r\n setHideIframe(true);\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.authenticationErrorI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.authenticationErrorE\r\n ) {\r\n setErrorAndRefreshIframe(t('monerisErrorAuthenticationError'));\r\n } else if (iframeResponse.StatusCode === monerisConstants.responses.expiredCard) {\r\n setErrorAndRefreshIframe(t('monerisErrorExpiredCard'));\r\n } else if (iframeResponse.StatusCode === monerisConstants.responses.confirmationIdError) {\r\n setErrorAndRefreshIframe(t('monerisErrorconfirmationId'));\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.generalError &&\r\n iframeResponse.Message !== null\r\n ) {\r\n if (iframeResponse.Message === monerisConstants.messages.mediaNotFound) {\r\n setErrorAndRefreshIframe(t('monerisErrorMediaNotFound'));\r\n } else if (iframeResponse.Message === monerisConstants.messages.mediaNotRegistered) {\r\n setErrorAndRefreshIframe(t('monerisErrorUnsuccessfulAdd'));\r\n } else if (iframeResponse.Message === monerisConstants.messages.mediaRegisteredToAccount) {\r\n setErrorAndRefreshIframe(t('monerisErrorRegisteredCardSameAccount'));\r\n } else if (\r\n iframeResponse.Message === monerisConstants.messages.mediaRegisteredToAnotherAccount\r\n ) {\r\n setErrorAndRefreshIframe(t('monerisErrorRegisteredCardAnotherAccount'));\r\n } else {\r\n setErrorAndRefreshIframe(t('monerisErrorTechnicalError'));\r\n }\r\n } else {\r\n setErrorAndRefreshIframe(t('monerisErrorTechnicalError'));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('message', handleIframeTask);\r\n let stsAccessToken = localstorageService().getItem(localStorageKeys.stsAccessToken);\r\n setToken(stsAccessToken);\r\n // api\r\n // .getAccessToken()\r\n // .then((accessToken) => setToken(accessToken))\r\n // .catch(() => {\r\n // setToken('');\r\n // });\r\n return () => window.removeEventListener('message', handleIframeTask);\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n \r\n {isInterac ? (\r\n \r\n
\r\n \r\n {configKeys &&\r\n token &&\r\n configKeys\r\n .filter((item) => item.key === 'Ats.GatewayUrl')\r\n .map((configKey) => (\r\n {\r\n refreshIframe();\r\n }}\r\n />\r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n\r\n handleUpdateNickName(values)}\r\n >\r\n {({ errors, touched, handleSubmit, validateForm }) => {\r\n runValidation = validateForm;\r\n\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddContactlessCard4;\r\n","import React from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Button, ButtonBlock, PrintButton } from '../../atoms';\r\nimport { Header, Success, ValueRow } from '../../molecules';\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport cardTypes from '../../constants/monerisCardTypes';\r\n\r\nconst AddContactlessCard5 = (props) => {\r\n const { fields, state, toFirstStep } = props;\r\n const dispatch = useDispatch();\r\n const cardType = cardTypes.filter((i) => i.key === state.CardProvider).map((i) => i.value);\r\n const shortenPan = state.MaskedPan?.slice(state.MaskedPan.length - 4);\r\n return (\r\n \r\n \r\n \r\n (\r\n \r\n \r\n redirectToUrl(routes.manageMyCards)}\r\n buttonTextA11y={fields.cardAddedBackButtonTextA11y.value}\r\n >\r\n {\r\n dispatch(showScreenHeader(true));\r\n toFirstStep();\r\n }}\r\n white\r\n firstOrder\r\n buttonTextA11y={fields.cardAddedAddCardButtonTextA11y.value}\r\n >\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddContactlessCard5;\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text, Placeholder, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { indexOfSelectedCard, redirectToUrl, isFrench } from '../../services/utils';\r\nimport { Button, ButtonBlock, Loader } from '../../atoms';\r\nimport { Error, TextInput, Note } from '../../molecules';\r\nimport api from '../../services/api';\r\nimport {\r\n setShoppingCart,\r\n addShoppingCartMessage,\r\n setGuestShoppingCartToken,\r\n setGuestShoppingCartPayload,\r\n} from '../../redux/user/actions';\r\nimport upIcon from '../../assets/images/up.svg';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport {\r\n E_PURSE_PRD_FAMILY,\r\n SINGLE_FARE_CRD_CART_ITEM_NAME,\r\n NEWMEDIA_VISIBLE_ID,\r\n PRICE_BUTTONS,\r\n SINGLE_FARE_CRD_CART_FAMILY_NAME,\r\n} from '../../constants/product.constants';\r\nimport './addfunds.scss';\r\nimport routes from '../../constants/routes';\r\n\r\nfunction AddFunds({ rendering, t }) {\r\n const businessRules = useSelector((state) => state.businessRules?.rules) || [];\r\n const [orderToBeAddedToCart, setOrderToBeAddedToCart] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [totalProducts, setTotalProducts] = useState(null);\r\n const userInfo = useSelector((state) => state.user);\r\n const visibleId = useSelector((state) => state.user.selectedCard.visibleId);\r\n const customerId = useSelector((state) => state.user.customerId);\r\n const shoppingCart = useSelector((state) => state.user.shoppingCart);\r\n const guestSCT = useSelector((reduxState) => reduxState.user.guestShoppingCartToken);\r\n const anonymous = useSelector((state) => state.user && state.user.anonymous);\r\n const pendingProducts = useSelector((state) => state.user.pendingProducts) || {\r\n list: [],\r\n orders: [],\r\n };\r\n const [isAccordionClicked, setIsAccordionClicked] = useState(false);\r\n const focusDiv = useRef();\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const dispatch = useDispatch();\r\n const cardDropdownRef = useRef(null);\r\n const [isArrowIconClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, true);\r\n const onClickSelect = () => {\r\n openDropdown(!isArrowIconClicked);\r\n setIsAccordionClicked(true);\r\n };\r\n const iconText = isArrowIconClicked ? t('expandA11y') : t('collapseA11y');\r\n // const iconText = isArrowIconClicked ? t('collapseA11y') : t('expandA11y');\r\n const currentBalance =\r\n userInfo.fareMedias[indexOfSelectedCard(userInfo.fareMedias, userInfo.selectedCard.visibleId)]\r\n ?.currentBalance;\r\n const AddFundsMax = businessRules?.AddFundsMax ? businessRules?.AddFundsMax : 1000;\r\n const AddFundsMin = businessRules?.AddFundsMin ? businessRules?.AddFundsMin : 0.05;\r\n const checkIsNewCardExist = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter(\r\n (el) =>\r\n el.productFamily === SINGLE_FARE_CRD_CART_FAMILY_NAME ||\r\n el.visibleId === NEWMEDIA_VISIBLE_ID\r\n );\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n useEffect(() => {\r\n if (orderToBeAddedToCart[0]?.OrderLines?.length > 0) {\r\n setLoading(false);\r\n orderToBeAddedToCart.forEach((el) => {\r\n dispatch(setShoppingCart(el, true));\r\n });\r\n let hasNewCard = orderToBeAddedToCart[0]?.OrderLines.find(\r\n (el) =>\r\n el?.Product?.ProductFamily === SINGLE_FARE_CRD_CART_FAMILY_NAME &&\r\n el?.Product?.ProductName.toUpperCase() === SINGLE_FARE_CRD_CART_ITEM_NAME\r\n );\r\n if (hasNewCard) {\r\n dispatch(addShoppingCartMessage(t('orderACardCheckoutNotification')));\r\n }\r\n dispatch(addShoppingCartMessage(t('shoppingCartNotificationsAddFunds')));\r\n }\r\n }, [orderToBeAddedToCart]);\r\n\r\n useEffect(() => {\r\n if (isAccordionClicked) {\r\n if (focusDiv.current) {\r\n focusDiv.current.focus();\r\n }\r\n }\r\n }, [isArrowIconClicked]);\r\n\r\n const isFundsAlreadyInCartForSelectedCard = useSelector(\r\n (state) =>\r\n state.user.shoppingCart.items.filter(\r\n (item) =>\r\n item.productFamily === E_PURSE_PRD_FAMILY &&\r\n item.visibleId === state.user.selectedCard.visibleId\r\n ).length\r\n );\r\n const checkAnyNonNewmediaItemInCart = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter((el) => el.visibleId !== NEWMEDIA_VISIBLE_ID);\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n const showErrorMessage = () => (\r\n \r\n
\r\n )}\r\n />\r\n \r\n
\r\n \r\n
\r\n );\r\n\r\n const validate = (values) => {\r\n const { amount = '', customAmount = '' } = values;\r\n const totalAmount = customAmount\r\n ? parseFloat(customAmount) + parseFloat(currentBalance)\r\n : parseFloat(amount) + parseFloat(currentBalance);\r\n\r\n if (!amount && !customAmount) return { amount: t('addFundsAmountValue') };\r\n if (customAmount && (!/^\\d+(\\.\\d{0,2})?$/i.test(customAmount))) {\r\n return { customAmount: t('autoloadInvalidDollarValue') };\r\n }\r\n if (\r\n customAmount &&\r\n (totalAmount > parseFloat(AddFundsMax) ||\r\n customAmount < parseFloat(AddFundsMin) ||\r\n customAmount > parseFloat(AddFundsMax) ||\r\n !/^\\d{0,4}(\\.\\d{0,1}\\d{0,1}){0,1}$/i.test(customAmount))\r\n ) {\r\n return { customAmount: t('addFundsBalanceThreshold') };\r\n }\r\n return {};\r\n };\r\n const checkIsNewMediaWithFundsInCart = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter(\r\n (el) => el.visibleId === NEWMEDIA_VISIBLE_ID && el.productFamily === E_PURSE_PRD_FAMILY\r\n );\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n const Heading = () => (\r\n \r\n {rendering?.fields?.CheckOutLink ? (\r\n \r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n const manageOrderDetails = (id) => {\r\n setOrderToBeAddedToCart((prevOrderId) => [...prevOrderId, id]);\r\n };\r\n const addToCartAPI = (products, fundAmt, index) => {\r\n let copyOfIndex = index;\r\n let product = products[index];\r\n let IsOrderCard = rendering?.fields?.IsOrderCard?.value;\r\n let visibleIdCheck = rendering?.fields?.IsOrderCard?.value ? NEWMEDIA_VISIBLE_ID : visibleId;\r\n let IsNewCardAdded = checkIsNewCardExist();\r\n if (product?.ProductId) {\r\n const productId = product?.ProductId;\r\n const amt =\r\n product.ProductName === SINGLE_FARE_CRD_CART_ITEM_NAME ? product.ProductPrice : fundAmt;\r\n api\r\n .addFundToCart({\r\n customerId: customerId !== undefined ? customerId : null,\r\n visibleId: visibleIdCheck,\r\n productId,\r\n price: amt,\r\n quantity: 1,\r\n IsNewCardAdded,\r\n IsOrderCard,\r\n Sct: guestUserInfo?.isGuestLogin && guestSCT?.sct ? guestSCT.sct : '',\r\n // Cct: guestUserInfo?.isGuestLogin && guestSCT?.cct ? guestSCT.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n })\r\n .then((res) => {\r\n manageOrderDetails(res.data.ShoppingCart.Order);\r\n setLoading(false);\r\n // if (guestUserInfo?.isGuestLogin) {\r\n dispatch(setGuestShoppingCartToken(res.data.Cookies));\r\n // dispatch(\r\n // setGuestShoppingCartPayload({\r\n // productId,\r\n // price: res.data.ShoppingCart.Order.TotalAmount,\r\n // })\r\n // );\r\n // }\r\n\r\n // if (index + 1 !== products.length) {\r\n // copyOfIndex += 1;\r\n // addToCartAPI(products, fundAmt, copyOfIndex);\r\n // }\r\n })\r\n .catch((err) => {\r\n setLoading(false);\r\n if (index + 1 === products.length) {\r\n // setLoading(false);\r\n } else {\r\n // copyOfIndex += 1;\r\n // addToCartAPI(products, fundAmt, copyOfIndex);\r\n }\r\n //console.log(err);\r\n });\r\n } else {\r\n setLoading(false);\r\n if (index + 1 === products.length) {\r\n setLoading(false);\r\n } else {\r\n // copyOfIndex += 1;\r\n // addToCartAPI(products, fundAmt, copyOfIndex);\r\n }\r\n }\r\n };\r\n const FormContent = () => (\r\n \r\n
\r\n \r\n {(pendingProducts.orders?.length > 0 && rendering.fields.note.value != \"\") && (\r\n \r\n \r\n )}\r\n {checkIsNewCardExist() && !rendering.fields.IsOrderCard.value ? showErrorMessage() : null}\r\n
\r\n \r\n \r\n
\r\n {rendering.fields.IsOrderCard.value ? (\r\n \r\n
\r\n ,\r\n loading ? \r\n \r\n \r\n redirectToUrlInNewWindow(fields.transferBalanceButtonLink?.value?.href)}\r\n >\r\n {fields.transferBalanceButtonLink?.value?.text}\r\n \r\n \r\n \r\n
\r\n \r\n);\r\n\r\nconst ActivateCard = ({ fields, t }) => {\r\n const dispatch = useDispatch();\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\r\n redirectToUrlInNewWindow(fields.activateNewCardButtonLink?.value?.href);\r\n dispatch(\r\n setActivateCardMode({\r\n activateCardDetailsEnabled: false,\r\n addToActivate: true,\r\n selectedCard: {},\r\n })\r\n );\r\n }}\r\n >\r\n {fields.activateNewCardButtonLink?.value?.text}\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst AddPrestoCard0 = (props) => {\r\n const PAPER_FORM_REGISTERED_CARD_STATUS = 1;\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const customerId = useSelector((reduxState) => reduxState.user.customerId);\r\n const { fields, state, setState, toNextStep, t } = props;\r\n const [error, setIsError] = useState('');\r\n\r\n let runValidation;\r\n const dispatch = useDispatch();\r\n const [firstLoad, setIsFirstLoad] = useState(true);\r\n if (firstLoad) {\r\n dispatch(showScreenHeader(true));\r\n setIsFirstLoad(false);\r\n }\r\n useEffect(() => {\r\n if (runValidation) {\r\n runValidation();\r\n }\r\n }, [t]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {error ? \r\n {\r\n api\r\n .verifyCard({\r\n MediaId: values.MediaId,\r\n CVN: values.VerificationNumber,\r\n CustomerId: customerId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n if (\r\n response.data.CardStatus === PAPER_FORM_REGISTERED_CARD_STATUS &&\r\n userInfo.fareMedias.length\r\n ) {\r\n setIsError(fields.paperFormRegisteredCardNotFirstCardErrorMessage.value);\r\n } else {\r\n const { CardStatus, ChildCustomerId, VerificationHash } = response.data;\r\n setState({\r\n ...state,\r\n MediaId: values.MediaId,\r\n CardStatus,\r\n CVN: values.VerificationNumber,\r\n CustomerId: customerId,\r\n ChildCustomerId,\r\n VerificationHash,\r\n });\r\n dispatch(showScreenHeader(false));\r\n toNextStep();\r\n }\r\n } else if (isJsonString(response.data.Error)) {\r\n const errorMessage = JSON.parse(response.data.Error);\r\n setIsError(errorMessage.Description);\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, validateForm }) => {\r\n runValidation = validateForm;\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\nexport default AddPrestoCard1;\r\n","import api from './api';\r\nimport { getRefreshToken, localstorageService, redirectToUrl } from './utils';\r\nimport { itemsAreLoading } from '../redux/user/actions';\r\nimport localStorageKeys from '../constants/localStorageKeys';\r\n\r\nconst handleLogOut = (dispatch, redirectUrl = '/B2CRedirect/B2CRegisteredSignIn') => {\r\n const finishLogOut = (url) => {\r\n localstorageService().removeItem(localStorageKeys.accessToken);\r\n localstorageService().removeItem(localStorageKeys.accessTokenValidity);\r\n localstorageService().removeItem(localStorageKeys.accessTokenLifetime);\r\n localstorageService().removeItem(localStorageKeys.refreshToken);\r\n localstorageService().removeItem(localStorageKeys.guestToken);\r\n localstorageService().removeItem(localStorageKeys.uniqueSessionId);\r\n localstorageService().removeItem('redux');\r\n localstorageService().removeItem(localStorageKeys.gtmContainerId);\r\n localstorageService().removeItem(localStorageKeys.unpaidFaresData);\r\n localstorageService().removeItem(localStorageKeys.unpaidFaresReposneData);\r\n localstorageService().removeItem(localStorageKeys.stsAccessToken);\r\n localstorageService().removeItem(localStorageKeys.isRiskyUser);\r\n localstorageService().removeItem(localStorageKeys.isRiskyUserDismissed);\r\n api.b2cSignOut();\r\n };\r\n\r\n dispatch(itemsAreLoading(true));\r\n\r\n api\r\n .logOut({ Token: getRefreshToken() })\r\n .then(() => {\r\n // dispatch(itemsAreLoading(false));\r\n finishLogOut(redirectUrl);\r\n })\r\n .catch((e) => {\r\n console.warn(e);\r\n // dispatch(itemsAreLoading(false));\r\n finishLogOut(redirectUrl);\r\n });\r\n};\r\n\r\nexport default handleLogOut;\r\n","import React, { useState } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport api from '../../services/api';\r\nimport { isJsonString, redirectToUrl } from '../../services/utils';\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport { refreshUserDataAfterPrestoCardAdded } from '../../redux/user/actions';\r\nimport routes from '../../constants/routes';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { Error, Modal, ValueRow } from '../../molecules';\r\nimport './addPrestoCard2.scss';\r\n\r\nconst AddPrestoCard2 = (props) => {\r\n const PAPER_FORM_REGISTERED_CARD_STATUS = 1;\r\n const { fields, state, toNextStep, toPreviousStep, toFirstStep, setState } = props;\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [isPaperFormModalOpen, setIsPaperFormModalOpen] = useState(false);\r\n const [error, setIsError] = useState('');\r\n const dispatch = useDispatch();\r\n const loginEmail = useSelector((state) => state.user.loginEmail);\r\n //const returnpath = `${routes.addCard}?addCardtype=presto`\r\n\r\n const handleClick = () => {\r\n if (state.CardStatus === PAPER_FORM_REGISTERED_CARD_STATUS) {\r\n api.addPaperFormPrestoCard(state).then((response) => {\r\n if (response.data.Success) {\r\n setIsPaperFormModalOpen(true);\r\n } else if (isJsonString(response.data.Error)) {\r\n const errorMessage = JSON.parse(response.data.Error);\r\n setIsError(errorMessage.Description);\r\n }\r\n });\r\n } else {\r\n api.addPrestoCard(state).then((response) => {\r\n if (response.data.Success) {\r\n setState({\r\n ...state,\r\n MediaId: state.MediaId,\r\n CVN: state.CVN,\r\n CustomerId: state.CustomerId,\r\n });\r\n const returnpath = `${routes.addCard}?addCardtype=presto¶m1= ${state.MediaId}¶m2=${state.CVN}¶m3=${state.CustomerId}`;\r\n redirectToUrl(`${routes.b2cRegisteredSignIn}?email=${loginEmail}&refreshToken=true&returnUrl=${returnpath}`);\r\n } else if (isJsonString(response.data.Error)) {\r\n const errorMessage = JSON.parse(response.data.Error);\r\n setIsError(errorMessage.Description);\r\n }\r\n });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {state.CardStatus === PAPER_FORM_REGISTERED_CARD_STATUS ? (\r\n
\r\n\r\n {error ? \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n
\r\n
\r\n \r\n
\r\n {fields.pinInputRuleDescription.value}} />\r\n
\r\n \r\n {state.CardStatus === PAPER_FORM_REGISTERED_CARD_STATUS ? (\r\n {\r\n api\r\n .validatePin({\r\n Pin: values.Pin,\r\n MediaId: state.MediaId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n setState({\r\n ...state,\r\n Pin: values.Pin,\r\n NickName: values.NickName,\r\n });\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(\r\n response.data.Error,\r\n setIsError,\r\n null,\r\n setInlineError\r\n );\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, validateForm }) => {\r\n runValidation = validateForm;\r\n\r\n return (\r\n \r\n );\r\n }}\r\n \r\n ) : (\r\n {\r\n setState({\r\n ...state,\r\n Pin: values.Pin,\r\n NickName: values.NickName,\r\n });\r\n toNextStep();\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, validateForm }) => {\r\n runValidation = validateForm;\r\n\r\n return (\r\n
\r\n \r\n );\r\n }}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n setIsModalOpen(true)}\r\n firstOrder\r\n white\r\n >\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddPrestoCard2;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { StepTracker } from '../../molecules';\r\nimport AddPrestoCard0 from './AddPrestoCard0';\r\nimport AddPrestoCard1 from './AddPrestoCard1';\r\nimport AddPrestoCard2 from './AddPrestoCard2';\r\nimport AddPrestoCard3 from './AddPrestoCard3';\r\nimport { getQueryParams, localstorageService } from '../../services/utils';\r\nimport '../../assets/scss/app.scss';\r\nimport './addPrestoCard.scss';\r\nimport { refreshUserDataAfterPrestoCardAdded, setB2cClaimsResponse } from '../../redux/user/actions';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport api from '../../services/api';\r\nimport handleServerError from '../../services/handleServerError';\r\n\r\nconst stepsMap = [AddPrestoCard0, AddPrestoCard1, AddPrestoCard2, AddPrestoCard3];\r\n\r\nconst AddPrestoCard = (props) => {\r\n const { t } = props;\r\n const userInfo = useSelector((s) => s.user);\r\n const focusDiv = useRef();\r\n const [step, setStep] = useState(0);\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => {\r\n setStep(0);\r\n focusDiv.current.focus();\r\n };\r\n const toPreviousStep = () => {\r\n setStep(step - 1);\r\n focusDiv.current.focus();\r\n };\r\n const Stepper = stepsMap[step];\r\n const [state, setState] = useState({});\r\n const queryParams = getQueryParams(useLocation().search);\r\n const dispatch = useDispatch();\r\n const [error, setError] = useState('');\r\n const location = useLocation();\r\n const history = useHistory();\r\n\r\n useEffect(() => {\r\n if (queryParams.paperForm !== undefined) {\r\n if (\r\n !userInfo.fareMedias.filter((fareMedia) => fareMedia.visibleId === queryParams.visibleId)\r\n .length\r\n ) {\r\n return;\r\n }\r\n\r\n setStep(3);\r\n setState({\r\n ...state,\r\n MediaId: queryParams.visibleId,\r\n });\r\n } else if (queryParams.addCardtype !== undefined && queryParams.addCardtype == 'presto') {\r\n setState({\r\n ...state,\r\n MediaId: queryParams.param1,\r\n CVN: queryParams.param2,\r\n CustomerId: queryParams.param3,\r\n });\r\n const queryParams1 = new URLSearchParams(location.search);\r\n if (queryParams1.has('addCardtype')) {\r\n queryParams1.delete('addCardtype');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n if (queryParams1.has('param1')) {\r\n queryParams1.delete('param1');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n if (queryParams1.has('param2')) {\r\n queryParams1.delete('param2');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n if (queryParams1.has('param3')) {\r\n queryParams1.delete('param3');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n if (queryParams1.has('param4')) {\r\n queryParams1.delete('param4');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n api\r\n .getClaims()\r\n .then((res) => {\r\n //console.log(res);\r\n if (res) {\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(\r\n localStorageKeys.refreshToken,\r\n res.data.Data.Access_token\r\n );\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n dispatch(refreshUserDataAfterPrestoCardAdded(true));\r\n dispatch(\r\n setB2cClaimsResponse({\r\n IsMfAEnabled: String(res?.data?.Data?.IsMfAEnabled).toLowerCase() === 'true',\r\n MFANotificationLastViewedDate: res?.data?.Data?.MFANotificationLastViewedDate,\r\n PasswordNotificationLastViewedDate: res?.data?.Data?.PasswordNotificationLastViewedDate,\r\n IsFirstTimeLogin: String(res?.data?.Data?.IsFirstTimeLogin).toLowerCase() === 'true',\r\n PhoneNumber: res?.data?.Data?.PhoneNumber,\r\n })\r\n );\r\n setStep(3);\r\n }\r\n })\r\n .catch((res) => {\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n else if (queryParams.addCardtype !== undefined && queryParams.addCardtype == 'presto') {\r\n setState({\r\n ...state,\r\n MediaId: queryParams.param1,\r\n CVN: queryParams.param2,\r\n CustomerId: queryParams.param3,\r\n });\r\n const queryParams1 = new URLSearchParams(location.search);\r\n if (queryParams1.has('addCardtype')) {\r\n queryParams1.delete('addCardtype')\r\n history.replace({\r\n search: queryParams1.toString(),\r\n })\r\n }\r\n if (queryParams1.has('param1')) {\r\n queryParams1.delete('param1')\r\n history.replace({\r\n search: queryParams1.toString(),\r\n })\r\n }\r\n if (queryParams1.has('param2')) {\r\n queryParams1.delete('param2')\r\n history.replace({\r\n search: queryParams1.toString(),\r\n })\r\n }\r\n if (queryParams1.has('param3')) {\r\n queryParams1.delete('param3')\r\n history.replace({\r\n search: queryParams1.toString(),\r\n })\r\n }\r\n if (queryParams1.has('param4')) {\r\n queryParams1.delete('param4')\r\n history.replace({\r\n search: queryParams1.toString(),\r\n })\r\n }\r\n api\r\n .getClaims()\r\n .then((res) => {\r\n //console.log(res);\r\n if (res) {\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Access_token);\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n dispatch(refreshUserDataAfterPrestoCardAdded());\r\n dispatch(\r\n setB2cClaimsResponse({\r\n IsMfAEnabled: String(res?.data?.Data?.IsMfAEnabled).toLowerCase() === 'true',\r\n MFANotificationLastViewedDate: res?.data?.Data?.MFANotificationLastViewedDate,\r\n PasswordNotificationLastViewedDate:\r\n res?.data?.Data?.PasswordNotificationLastViewedDate,\r\n IsFirstTimeLogin: String(res?.data?.Data?.IsFirstTimeLogin).toLowerCase() === 'true',\r\n PhoneNumber: res?.data?.Data?.PhoneNumber,\r\n })\r\n );\r\n setStep(3);\r\n }\r\n })\r\n .catch((res) => {\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {error ? \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {step !== 0 ? (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(AddPrestoCard);\r\n","import React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Button, ButtonBlock, PrintButton, PrestoLink } from '../../atoms';\r\nimport { Success, ValueRow } from '../../molecules';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport fundIcon from '../../assets/images/AddCard/Funds.svg';\r\nimport autoloadIcon from '../../assets/images/AddCard/Autoload.svg';\r\nimport autorenewIcon from '../../assets/images/AddCard/Autorenew.svg';\r\nimport { selectCard } from '../../redux/user/actions';\r\n\r\nimport './addPrestoCard3.scss';\r\n\r\nexport default function AddPrestoCard3(props) {\r\n const { fields, state, toFirstStep } = props;\r\n const dispatch = useDispatch();\r\n let allfareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n\r\n useEffect(() => {\r\n //console.log('allfareMedias', allfareMedias);\r\n let targetCard = allfareMedias.find((data) => data.visibleId === state?.MediaId);\r\n //console.log(targetCard, 'targetCard');\r\n if (targetCard !== undefined) {\r\n dispatch(selectCard(targetCard));\r\n }\r\n }, [allfareMedias]);\r\n\r\n return (\r\n \r\n
\r\n \r\n )}\r\n />\r\n \r\n \r\n (\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n\r\n \r\n
\r\n \r\n {anonymous ? (\r\n anonymousStatus ? (\r\n
\r\n \r\n {fields.AccCreationSuccessAssociationSuccess.value}\r\n
\r\n ) : (\r\n\r\n {fields.AccCreationSuccessAssociationFailed.value}\r\n
\r\n )\r\n ) : (\r\n\r\n {fields.AccountCreationSuccess.value}\r\n
\r\n )}\r\n {anonymous ? (\r\n anonymousStatus ? (\r\n\r\n {fields.AccCreationSuccessAssociationSuccessDesc.value}\r\n
\r\n ) : (\r\n \r\n {fields.AccCreationSuccessAssociationFailedDesc.value}\r\n
\r\n )\r\n ) : (\r\n \r\n {fields.AccountCreationSuccessDesc.value}\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n {props.fields.TechnicalError.value}
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n {isSuccess && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n);\r\n\r\nexport default ErrorPage;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Text, RichText, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport {\r\n StepTracker,\r\n TextInput,\r\n CardBlock,\r\n Header,\r\n Select,\r\n Note,\r\n Modal,\r\n Title,\r\n Success,\r\n} from '../../molecules';\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\nimport api from '../../services/api';\r\nimport { Loader, Button, Checkbox, InlineError } from '../../atoms';\r\nimport { setUserPersonalInfo, setFirstNamePersonalInfo, setB2cClaimsResponse } from '../../redux/user/actions';\r\nimport './b2cPersonalInformation.scss';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport {\r\n localstorageService,\r\n getQueryParams,\r\n redirectToUrl,\r\n resetAccessTokenValidity,\r\n} from '../../services/utils';\r\nimport {\r\n changeUserStatus,\r\n itemsAreLoading,\r\n fetchAllData,\r\n fetchAllDataSuccessfullyLoaded,\r\n fetchAvailableSettings,\r\n setWeakAccount,\r\n setGuestUserEnabled,\r\n anonymousSaveAccessToken,\r\n updatePersonalInfo\r\n} from '../../redux/user/actions';\r\nimport handleServerError from '../../services/handleServerError';\r\n\r\nconst B2CPersonalInformation = (props) => {\r\n const [options, setOptions] = useState([]);\r\n const [countryData, setCountryData] = useState('');\r\n const Countries = [{ label: 'Canada', value: 'CAN' }];\r\n const [emailChecked, setEmailChecked] = useState(true);\r\n const [contentchecked, setContentChecked] = useState(false);\r\n const [step, setStep] = useState(0);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [postalCode, setPostalCode] = useState('');\r\n const [accountCreation, setAccountCreation] = useState(false);\r\n const dispatch = useDispatch();\r\n const [startedLogin, setStartedLogin] = useState(false);\r\n const [error, setError] = useState('');\r\n\r\n const customerId = useSelector((state) => state.user.customerId);\r\n const loginEmail = useSelector((state) => state.user.loginEmail);\r\n const authenticated = useSelector((state) => state.user.authenticated);\r\n const anonymous = useSelector((state) => state.user.anonymous);\r\n const prestoCardCustomerId = useSelector((reduxState) => reduxState.user.customerId);\r\n const [newPersonalInfo, setNewPersonalInfo] = useState(null);\r\n // const step = 2;\r\n\r\n useEffect(() => {\r\n setStep(step + 2);\r\n api\r\n .getClaims()\r\n .then((res) => {\r\n //console.log(res);\r\n if (res) {\r\n setStartedLogin(true);\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Access_token);\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n dispatch(\r\n setB2cClaimsResponse({\r\n IsMfAEnabled: String(res?.data?.Data?.IsMfAEnabled).toLowerCase() === 'true',\r\n MFANotificationLastViewedDate: res?.data?.Data?.MFANotificationLastViewedDate,\r\n PasswordNotificationLastViewedDate:\r\n res?.data?.Data?.PasswordNotificationLastViewedDate,\r\n IsFirstTimeLogin: String(res?.data?.Data?.IsFirstTimeLogin).toLowerCase() === 'true',\r\n PhoneNumber: res?.data?.Data?.PhoneNumber,\r\n })\r\n );\r\n if (\r\n prestoCardCustomerId !== null &&\r\n prestoCardCustomerId !== undefined &&\r\n anonymous &&\r\n !authenticated\r\n ) {\r\n api\r\n .associateCustomerAddCard({\r\n CustomerId: res.data.Data.CustomerId,\r\n CardId: prestoCardCustomerId,\r\n })\r\n .then((res) => {\r\n dispatch(changeUserStatus(true));\r\n dispatch(fetchAllData());\r\n dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n getCountryData();\r\n });\r\n } else {\r\n dispatch(fetchAllData());\r\n dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n getCountryData();\r\n dispatch(changeUserStatus(false));\r\n }\r\n }\r\n })\r\n .catch((res) => {\r\n dispatch(itemsAreLoading(false));\r\n //(signInFormFields.googleToken, 1);\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n countryData &&\r\n countryData?.Areas &&\r\n countryData.Areas.map((data) => {\r\n let obj = {\r\n label: data.Name,\r\n value: data.Id,\r\n };\r\n options.push(obj);\r\n });\r\n }, [countryData]);\r\n\r\n const getCountryData = () => {\r\n setIsLoading(true);\r\n api\r\n .getCountryAreas()\r\n .then((response) => {\r\n //console.log(response);\r\n if (response.status === 200) {\r\n setCountryData(response?.data);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoading(false);\r\n });\r\n };\r\n const onEmailCheckedChange = (e) => {\r\n if (e) {\r\n setIsModalOpen(false);\r\n } else {\r\n setIsModalOpen(true);\r\n }\r\n setEmailChecked(e);\r\n };\r\n\r\n const onPostalCodeChange = (e) => {\r\n setPostalCode(e.target.value.toUpperCase());\r\n };\r\n\r\n const accCreationSuccessScreen = () => {\r\n return (\r\n \r\n (\r\n
\r\n );\r\n };\r\n // !accountCreation ?: (\r\n // accCreationSuccessScreen()\r\n // )\r\n return (\r\n \r\n
\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n {isLoading &&
\r\n );\r\n};\r\n\r\nexport default B2CPersonalInformation;\r\n","export default {\r\n cancelled: 0,\r\n initialize: 1,\r\n planning: 2,\r\n processed: 3,\r\n sent: 4,\r\n};\r\n","import React, { useRef, useEffect, useState } from 'react';\r\n\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\nimport useMedia from 'use-media';\r\n\r\nimport {\r\n formatDate,\r\n convertToDollars,\r\n formattoLocalDate,\r\n formatDecimalWithCurrency,\r\n indexOfSelectedCard,\r\n getStationNameFromParam,\r\n formatPrestoCardNumberA11y,\r\n formatPrestoCardNumber,\r\n redirectToUrl,\r\n} from '../../services/utils';\r\nimport { MediaImage, PrestoLink, Loader } from '../../atoms';\r\nimport { Modal, Error } from '../../molecules';\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport api from '../../services/api';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\nimport mediaSubType from '../../constants/mediaSubType';\r\nimport { fetchPendingProducts, selectCard, setBalanceAutoLoadData } from '../../redux/user/actions';\r\nimport autorenewActivationStatus from '../../constants/autorenewActivationStatus';\r\nimport GoTransitAgencyImg from '../../assets/images/GO.svg';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport './balanceBlock.scss';\r\nimport routes from '../../constants/routes';\r\n\r\nconst maxVisiblePasses = 6;\r\n\r\nconst BalanceBlock = (props) => {\r\n const userInfo = useSelector((state) => state.user);\r\n const location = useLocation();\r\n const history = useHistory();\r\n const { fareMedias, contactlessMedias, selectedCard } = userInfo;\r\n const allCards = fareMedias.concat(contactlessMedias);\r\n const selectedCardIndex = indexOfSelectedCard(userInfo.fareMedias, selectedCard.visibleId);\r\n const [product, setProduct] = useState({ list: {} });\r\n const pendingProducts = useSelector((state) => state.user.pendingProducts) || {\r\n list: [],\r\n orders: [],\r\n };\r\n const authenticated = useSelector((state) => state.user && state.user.authenticated);\r\n const cardDropdownRef = useRef(null);\r\n const [isArrowIconClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, false);\r\n const onClickSelect = () => openDropdown(!isArrowIconClicked);\r\n const [balance, setBalanceAutoload] = useState({ autoload: {} });\r\n const [autoloadStatusField, setAutoloadStatusField] = useState({ autoload: {} });\r\n const [isPendingFundsModalOpen, setIsPendingFundsModalOpen] = useState(false);\r\n const [isPendingPassesModalOpen, setIsPendingPassesModalOpen] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const logos = useSelector((state) => state.products.logos);\r\n const dispatch = useDispatch();\r\n const isMobile = useMedia({ maxWidth: '920px' });\r\n let deactivateCard = useSelector((reduxState) => reduxState.user.deactivateCardType);\r\n const redeemStepper = useSelector((reduxState) => reduxState.products.redeemVoucher);\r\n let content;\r\n const isMobileWallet = selectedCard.mediaType === mediaTypes.CRDNC;\r\n const isAppleWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.APPLE;\r\n const isGoogleWalletCard = selectedCard.mediaSubTypeWallet === mediaSubType.GOOGLE;\r\n const checkMediaType = (array) => {\r\n for (let i = 0; i < array.length; i++) {\r\n if (!array[i].hasOwnProperty('mediaType') || array[i].mediaType !== mediaTypes.CRDNC) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n };\r\n const onlyGWCards = checkMediaType(allCards);\r\n useEffect(() => {\r\n if (isMobileWallet) {\r\n const gWalletCard = contactlessMedias?.find(\r\n (card) => card.mediaType === mediaTypes.CRDNC && card.dpan === selectedCard.dpan\r\n );\r\n dispatch(selectCard({ ...gWalletCard }));\r\n }\r\n }, [isMobileWallet, contactlessMedias]);\r\n\r\n useEffect(() => {\r\n if (\r\n props?.fields?.TargetPath &&\r\n props?.fields?.TargetPath.some((item) => {\r\n const href = item?.fields['Target Link']?.value?.href;\r\n if (href) {\r\n const hrefLanguageMatch = href.match(/\\/[a-z-]+/i);\r\n const hrefLanguagePrefix = hrefLanguageMatch ? hrefLanguageMatch[0] : '';\r\n const hrefWithoutLanguage = href.replace(hrefLanguagePrefix, '');\r\n const formattedPathname = location.pathname.replace(/%20/g, '-').toLowerCase();\r\n const finalPathname = formattedPathname.replace(/ /g, '-');\r\n return finalPathname.includes(hrefWithoutLanguage.toLowerCase());\r\n }\r\n return false;\r\n }) &&\r\n isMobileWallet\r\n ) {\r\n setIsLoading(true);\r\n redirectToUrl(routes.walletCardDetails);\r\n }\r\n }, [location.pathname, selectedCard]);\r\n\r\n useEffect(() => {\r\n const unlisten = history.listen((newLocation) => {\r\n if (newLocation.pathname.includes(routes.walletCardDetails)) {\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n return () => {\r\n unlisten(); // Cleanup the listener to avoid memory leaks\r\n };\r\n }, [history]);\r\n\r\n useEffect(() => {\r\n let isGoogleCardNotSelected = selectedCard.mediaType !== mediaTypes.CRDNC;\r\n if (isGoogleCardNotSelected) {\r\n api.getProductsLoadedInMedia({ VisibleId: selectedCard.visibleId }).then((res) => {\r\n if (res.data.Success) {\r\n setProduct({\r\n list: res.data.productInstances,\r\n });\r\n }\r\n });\r\n\r\n dispatch(fetchPendingProducts(selectedCard.visibleId));\r\n }\r\n\r\n if (authenticated && isGoogleCardNotSelected) {\r\n api.getAutoloadSubscriptionForMedia({ VisibleId: selectedCard.visibleId }).then((res) => {\r\n if (res.data.Success) {\r\n setBalanceAutoload({\r\n autoload: res.data.SubscriptionList,\r\n });\r\n dispatch(setBalanceAutoLoadData(res.data.SubscriptionList));\r\n }\r\n });\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!balance.autoload?.length) {\r\n setAutoloadStatusField(props.fields.autoloadSetUpLabel);\r\n return;\r\n }\r\n\r\n if (\r\n balance.autoload.some(\r\n (subscriptionItem) => subscriptionItem.ActivationStatus === autorenewActivationStatus.sent\r\n )\r\n ) {\r\n setAutoloadStatusField(props.fields.autoloadPendingLink);\r\n } else {\r\n setAutoloadStatusField(props.fields.autoloadOnLabel);\r\n }\r\n }, [balance]);\r\n\r\n const getActivationDate = (id) => {\r\n const activationDate =\r\n selectedCard.passes.hasOwnProperty(id) && selectedCard.passes[id].length > 0\r\n ? selectedCard.passes[id][0].activationDate\r\n : null;\r\n return activationDate;\r\n };\r\n const getExpirationDate = (id) => {\r\n const expirationDate =\r\n selectedCard.passes.hasOwnProperty(id) && selectedCard.passes[id].length > 0\r\n ? selectedCard.passes[id][0].expirationDate\r\n : null;\r\n return expirationDate;\r\n };\r\n\r\n const getLogoName = (id) => {\r\n const productId =\r\n selectedCard.passes.hasOwnProperty(id) && selectedCard.passes[id].length > 0\r\n ? selectedCard.passes[id][0].productId\r\n : null;\r\n const commutePlan = `COMMUTEPLAN${id}_${productId}`;\r\n return selectedCard.displayText[commutePlan];\r\n };\r\n function getLogoImageSrc(item) {\r\n // if (!logos) {\r\n // return null;\r\n // }\r\n let logo = logos && logos[item.ProductServiceProvider.Id]?.Logo.Src;\r\n\r\n return logo ? logo : null;\r\n }\r\n const getTransitPassLogoForGoogleWallet = (id) => {\r\n const logoObj = Object.values(logos).find((obj) => obj.ServiceProviderId == id);\r\n return logoObj ? logoObj.Logo.Src : null;\r\n };\r\n if (isMobileWallet) {\r\n if (selectedCard.activePasses?.length === 1) {\r\n content = selectedCard.activePasses?.map((item) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n 0 &&\r\n options\r\n .filter((e) => {\r\n return e.label === 'Ontario';\r\n })\r\n .map((val) => {\r\n return val.value;\r\n })[0],\r\n\r\n Country: '',\r\n PostalCode: '',\r\n PrimaryPhoneNo: '',\r\n SecondaryPhoneNo: '',\r\n // [sharedFormConstants.terms]: false,\r\n }}\r\n validateOnChange={false}\r\n validationSchema={Yup.object().shape({\r\n FirstName: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.FirstNameError.value)\r\n .max(25, props.fields.FirstNameLength.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,25}$/, props.fields.FirstNameLength.value),\r\n LastName: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.LastNameError.value)\r\n .max(25, props.fields.LastNameLength.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,25}$/, props.fields.LastNameLength.value),\r\n StreetAdress: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.StreetAddressError.value)\r\n .max(50, props.fields.StreetAddressLength.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,50}$/, props.fields.StreetAddressLength.value),\r\n AptSuiteBuilding: Yup.string()\r\n .transform((value) => value.trim())\r\n .max(50, props.fields.ApartmentLength.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{0,50}$/, props.fields.ApartmentLength.value),\r\n City: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.CityError.value)\r\n .max(50, props.fields.CityLength.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,50}$/, props.fields.CityLength.value),\r\n PostalCode: Yup.string()\r\n .required(props.fields.PostalCodeError.value)\r\n .matches(\r\n /^[ABCEGHJ-NPRSTVXY][0-9][ABCEGHJ-NPRSTV-Z]\\s?[0-9][ABCEGHJ-NPRSTV-Z][0-9]$/,\r\n props.fields.PostalCodeFormatError.value\r\n ),\r\n Province: Yup.string().required(props.fields.ProvinceError.value),\r\n PrimaryPhoneNo: Yup.string()\r\n .required(props.fields.PrimaryPhoneNumberError.value)\r\n .matches(\r\n /^\\(?([0-9]{3})\\)?[\\s-●]?([0-9]{3})[\\s-●]?([0-9]{4})$/,\r\n props.fields.PrimaryPhoneNumberLength.value\r\n ),\r\n SecondaryPhoneNo: Yup.string().matches(\r\n /^\\(?([0-9]{3})\\)?[\\s-●]?([0-9]{3})[\\s-●]?([0-9]{4})$/,\r\n props.fields.SecondaryPhoneNumberError.value\r\n ),\r\n // [sharedFormConstants.terms]: Yup.boolean().oneOf(\r\n // [true],\r\n // props.fields.TermsandConditonsError.value\r\n // ),\r\n })}\r\n onSubmit={(values) => {\r\n // setIsLoading(true);\r\n let payload = {\r\n // CustomerId: user?.customerId,\r\n FirstName: values.FirstName,\r\n LastName: values.LastName,\r\n StreetAddress: values.StreetAdress,\r\n Apartment: values.AptSuiteBuilding,\r\n AreaId: values.Province,\r\n AreaName: options\r\n .filter((e) => {\r\n return e.value === values.Province;\r\n })\r\n .map((val) => {\r\n return val.label;\r\n })[0],\r\n AreaCode: values.Province,\r\n CountryId: 'CAN',\r\n City: values.City,\r\n PostalCode: values.PostalCode,\r\n StreetAddress: values.StreetAdress,\r\n Apartment: values.AptSuiteBuilding,\r\n Province: values.Province,\r\n CountryName: 'Canada',\r\n PrimaryPhone: values.PrimaryPhoneNo,\r\n SecondaryPhone: values.SecondaryPhoneNo,\r\n TraxOptInOut: emailChecked ? 'on' : 'off',\r\n MarktOptInOut: contentchecked ? 'on' : 'off',\r\n Email: loginEmail,\r\n CustomerId: customerId,\r\n };\r\n api\r\n .updatePersonalData(payload)\r\n .then((response) => {\r\n //console.log(response);\r\n if (response?.data?.Success) {\r\n dispatch(updatePersonalInfo({\r\n newUpdatePersonalInfo: response?.data?.UpdatedPersonalData\r\n }));\r\n dispatch(changeUserStatus(true));\r\n dispatch(fetchAllData());\r\n dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n dispatch(setFirstNamePersonalInfo(response.data.UpdatedPersonalData.Name.FirstName));\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: true },\r\n })\r\n );\r\n dispatch(updatePersonalInfo({\r\n firstName: response?.data?.UpdatedPersonalData?.Name?.FirstName,\r\n lastName: response?.data?.UpdatedPersonalData?.Name?.LastName,\r\n phoneNumber: response?.data?.UpdatedPersonalData?.PhoneNumber,\r\n currentShippingDetails: response?.data?.UpdatedPersonalData?.Address\r\n }));\r\n setAccountCreation(true);\r\n // setIsLoading(false);\r\n } else {\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: false },\r\n })\r\n );\r\n // setIsLoading(false);\r\n }\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: false },\r\n })\r\n );\r\n // setIsLoading(false);\r\n });\r\n //console.log(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleSubmit, handleChange }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n\r\n {\r\n
\r\n ) : (\r\n accCreationSuccessScreen()\r\n )}\r\n \r\n
\r\n \r\n
\r\n );\r\n });\r\n } else if (selectedCard.activePasses?.length === 2) {\r\n content = selectedCard.activePasses?.map((item) => {\r\n return (\r\n \r\n {getTransitPassLogoForGoogleWallet(item) ? (\r\n })
\r\n ) : (\r\n
\r\n \r\n
\r\n {getLogoName(item)}
\r\n \r\n {`${formattoLocalDate(getActivationDate(item), 'D MMM')} - ${formattoLocalDate(\r\n getExpirationDate(item)\r\n )}`}\r\n
\r\n \r\n \r\n {getTransitPassLogoForGoogleWallet(item) ? (\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n \r\n );\r\n });\r\n } else if (selectedCard.activePasses?.length > 2) {\r\n content = selectedCard.activePasses?.slice(0, maxVisiblePasses).map((item) => {\r\n return (\r\n \r\n {`${formattoLocalDate(getActivationDate(item), 'D MMM')} - ${formattoLocalDate(\r\n getExpirationDate(item)\r\n )}`}\r\n
\r\n \r\n
\r\n );\r\n }\r\n } else if (product.list?.length === 1) {\r\n content = product.list.map((item) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n });\r\n } else if (product.list?.length === 2) {\r\n content = product.list.map((item) => {\r\n return (\r\n \r\n {getLogoImageSrc(item) ? (\r\n })
\r\n ) : (\r\n
\r\n \r\n
\r\n {item.ProductName}
\r\n \r\n {`${formatDate(item.ValidityStartDate, 'D MMM')} - ${formatDate(\r\n item.ValidityEndDate\r\n )}`}\r\n
\r\n \r\n \r\n {getLogoImageSrc(item) ? (\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n \r\n );\r\n });\r\n } else if (product.list?.length > 2) {\r\n content = product.list.slice(0, maxVisiblePasses).map((item) => {\r\n return (\r\n \r\n {`${formatDate(item.ValidityStartDate, 'D MMM')} - ${formatDate(\r\n item.ValidityEndDate\r\n )}`}\r\n
\r\n \r\n
\r\n );\r\n }\r\n const BalanceContentBlock = () => (\r\n \r\n
\r\n \r\n
\r\n );\r\n let renderNickName;\r\n if (selectedCard.nickName !== null && selectedCard.nickName?.length >= 0) {\r\n renderNickName = \r\n
\r\n {userInfo.fareMedias[selectedCardIndex]?.tripDetails ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {isMobileWallet\r\n ? formatDecimalWithCurrency(convertToDollars(selectedCard.currentBalance))\r\n : formatDecimalWithCurrency(userInfo.fareMedias[selectedCardIndex]?.currentBalance)}\r\n
\r\n {isMobileWallet && (\r\n <>\r\n \r\n {selectedCard.autoload\r\n ? props.fields.autoloadOnLabel.value.text\r\n : props.fields.walletCardAutoLoadOffLabel.value}\r\n
\r\n \r\n {props.fields.walletCardFareTypeLabel.value} {selectedCard.fareType}\r\n
\r\n \r\n {props.fields.walletCardFareTypeExpiryLabel.value}{' '}\r\n {selectedCard.expiryDate === 'N/A'\r\n ? selectedCard.expiryDate\r\n : formattoLocalDate(selectedCard.expiryDate)}\r\n
\r\n {selectedCard.isOtherServiceProviderIdExists && (\r\n \r\n
\r\n )}\r\n \r\n )}\r\n {!isMobileWallet && authenticated && (\r\n \r\n null}\r\n onClick={() => setIsPendingFundsModalOpen(true)}\r\n className=\"balanceBlock-link\"\r\n >\r\n
\r\n ) : undefined}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {product.list?.length > 1 ? (\r\n {content}
\r\n {!isMobileWallet &&\r\n pendingProducts?.list?.length > 0 &&\r\n pendingProducts.list.slice(0, maxVisiblePasses).map((pendingProduct) => (\r\n \r\n
\r\n ))}\r\n \r\n null}\r\n onClick={() => setIsPendingPassesModalOpen(true)}\r\n className=\"balanceBlock-link pending-link\"\r\n >\r\n
\r\n \r\n {`${formatDate(pendingProduct.ValidityStartDate, 'D MMM')} - ${formatDate(\r\n pendingProduct.ValidityEndDate\r\n )}`}\r\n
\r\n \r\n
\r\n ) : null}\r\n {selectedCard?.defaultTripsData?.showDefaultTrips ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {`${getStationNameFromParam(\r\n userInfo.fareMedias[selectedCardIndex].tripDetails?.SourceStation\r\n )} - ${getStationNameFromParam(\r\n userInfo.fareMedias[selectedCardIndex].tripDetails?.DestinationStation\r\n )}`}\r\n
\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {`${getStationNameFromParam(\r\n selectedCard?.defaultTripsData?.fromLocationId\r\n )} - ${getStationNameFromParam(selectedCard?.defaultTripsData?.toLocationId)}`}\r\n
\r\n \r\n
\r\n {selectedCard.nickName}
;\r\n if (selectedCard.nickName?.length <= 13) {\r\n renderNickName = {selectedCard.nickName}
;\r\n }\r\n if (selectedCard.nickName?.length > 20) {\r\n renderNickName = (\r\n {`${selectedCard.nickName.substring(0, 19)}...`}
\r\n );\r\n }\r\n }\r\n const BalanceBlockErrorForGWallet = () => {\r\n if (\r\n isMobileWallet &&\r\n ((isGoogleWalletCard && !selectedCard.hasActiveImageGoog) ||\r\n (isAppleWalletCard && !selectedCard.hasActiveImageAppl) ||\r\n selectedCard.mediaSubTypeWallet === null ||\r\n '')\r\n ) {\r\n return (\r\n \r\n \r\n \r\n {formatPrestoCardNumber(selectedCard.cardNumber)}\r\n
\r\n )}\r\n \r\n \r\n {renderNickName}\r\n {!isMobileWallet ? (\r\n \r\n {formatPrestoCardNumber(selectedCard.visibleId)}\r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n ) : (\r\n \r\n {t('StepperChangeSRText')}\r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n}\r\n","import React, { useEffect } from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { formatDecimalWithCurrency, formatDate, redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport { PrintButton, ButtonBlock, Button } from '../../atoms';\r\nimport { Success, InlineButtonBlock } from '../../molecules';\r\n\r\nexport default function CancelAutoload2({ fields, product }) {\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n dispatch(showScreenHeader(false));\r\n }, []);\r\n\r\n if (product === null) {\r\n return null;\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 api\r\n .cancelAutoloadSubscription({\r\n customerId: userInfo.customerId,\r\n visibleId: userInfo.selectedCard.visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data.IsCancelled) {\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n }}\r\n >\r\n {({ handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(product.Amount)}
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(product.Threshold)}
\r\n \r\n
\r\n \r\n
\r\n {formatDate(Date.now())}
\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {discountResponse &&\r\n discountResponse.length > 0 &&\r\n discountResponse.map((data) => {\r\n return (\r\n \r\n {data.Term}\r\n {data.Discount}%\r\n \r\n {formatDecimalWithCurrency(data.DiscountedPrice)}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n >\r\n {fields.CloseCTA?.value}\r\n \r\n
\r\n \r\n }\r\n textSubmit={fields.CloseCTA?.value}\r\n isModalOpen={isModalOpen}\r\n onSubmit={() => {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n setIsModalOpen={setIsModalOpen}\r\n hideButtons\r\n withoutFocusTrap={true}\r\n />\r\n \r\n
\r\n \r\n {subscriptionInstance.ExpiryDateTime >= '1901' &&\r\n !cancel12MonthTTCPass &&\r\n !isCancel12MonthTTCSteps ? (\r\n \r\n \r\n {logo && logo.Src ? (\r\n 
\r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getTimePeriod(\r\n subscriptionInstance.StartDateTime,\r\n subscriptionInstance.ExpiryDateTime\r\n )}\r\n
\r\n \r\n {product.ProductName}\r\n
\r\n \r\n
\r\n \r\n {isCancel12MonthTTCSteps || cancel12MonthTTCPass\r\n ? null\r\n : formatDecimalWithCurrency(product.ProductPrice || product.Balance)}\r\n\r\n {goToCancelAutorenew ? (\r\n <>\r\n {authenticated && (\r\n <>\r\n
\r\n \r\n goToManageAutoRenew(subscriptionInstance)}\r\n onKeyDown={manageClickHandler}\r\n tabIndex=\"0\"\r\n >\r\n {t('autorenewManageAutorenew')}\r\n \r\n
\r\n \r\n {\r\n return (\r\n goToCancelAutorenew && goToCancelAutorenew(subscriptionInstance)\r\n );\r\n }}\r\n onKeyDown={cancelClickHandler}\r\n tabIndex=\"0\"\r\n >\r\n {t('autorenewCancelAutorenew')}\r\n \r\n
\r\n \r\n )}\r\n \r\n ) : null}\r\n {cancel12MonthTTCPass ? (\r\n <>\r\n \r\n {\r\n e.preventDefault();\r\n viewPaymentPlan(product.ProductId);\r\n }}\r\n onKeyDown={cancelClickHandler}\r\n tabIndex=\"0\"\r\n >\r\n {t('autorenewViewPaymentPlan')}\r\n \r\n
\r\n \r\n {\r\n return (\r\n cancel12MonthTTCPass && cancel12MonthTTCPass(subscriptionInstance)\r\n );\r\n }}\r\n onKeyDown={cancelClickHandler}\r\n tabIndex=\"0\"\r\n >\r\n {t('autorenewCancelTTC12MonthPass')}\r\n \r\n
\r\n \r\n ) : null}\r\n {isCancel12MonthTTCSteps ? (\r\n \r\n {\r\n e.preventDefault();\r\n viewPaymentPlan(product.ProductId);\r\n }}\r\n onKeyDown={cancelClickHandler}\r\n tabIndex=\"0\"\r\n >\r\n {t('autorenewViewPaymentPlan')}\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n {isCancel12MonthTTCSteps\r\n ? [\r\n \r\n
\r\n \r\n
\r\n {t('autorenewEndDate')}
\r\n \r\n
\r\n \r\n {formatMonthYear(subscriptionInstance.ExpiryDateTime)}\r\n
\r\n \r\n
,\r\n \r\n
\r\n \r\n
\r\n {TTCFields?.startDate?.value}
\r\n \r\n
\r\n \r\n {formatUtcDate(subscriptionInstance?.StartDateTime)}\r\n
\r\n \r\n
,\r\n showFinalBillingDate ? (\r\n \r\n
\r\n \r\n
\r\n {TTCFields?.endDate?.value}
\r\n \r\n
\r\n \r\n {formatUtcDate(subscriptionInstance?.ExpiryDateTime)}\r\n
\r\n \r\n
\r\n ) : null,\r\n \r\n
\r\n \r\n
\r\n \r\n {TTCFields?.finalBillingDate?.value}\r\n
\r\n \r\n
\r\n \r\n {formatUtcDate(subscriptionInstance?.ExpiryDateTime)}\r\n
\r\n \r\n
,\r\n ]\r\n : null}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(TransitPassItem);\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { Note, Title, Error } from '../../molecules';\r\nimport TransitPassItem from '../TransitPass/TransitPassItem';\r\nimport './cancelAutorenew.scss';\r\nimport api from '../../services/api';\r\nimport '../TransitPass/AddTransitPass/AddTransitPass.scss';\r\n\r\nconst CancelAutorenew1 = ({\r\n fields,\r\n subscriptionInstance,\r\n backToTransitPassesButtonLink,\r\n toNextStep,\r\n TTCrendering,\r\n}) => {\r\n const [error, setIsError] = useState('');\r\n const visibleId = useSelector((s) => s.user.selectedCard.visibleId);\r\n const customerId = useSelector((s) => s.user.customerId);\r\n const productId = subscriptionInstance.Product.ProductId;\r\n const isCancel12MonthTTC = fields?.isTTC?.value;\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const cancelAutorenew = () => {\r\n const data = {\r\n visibleId,\r\n customerId,\r\n productId,\r\n ...(isCancel12MonthTTC && { IsTTCSubscription: true }),\r\n };\r\n\r\n api.cancelAutorenewSubscription(data).then((response) => {\r\n if (response.data.IsCancelled) {\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n };\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {TTCFields?.accumulatedDiscount?.value}\r\n
\r\n \r\n
\r\n \r\n {formatDecimalWithCurrency(subscriptionInstance?.MDPAccumulatedDiscount)}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(CancelAutorenew1);\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Button, ButtonBlock, PrintButton, IconButton } from '../../atoms';\r\nimport { Success } from '../../molecules';\r\nimport TransitPassItem from '../TransitPass/TransitPassItem'; // TODO move to shared\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport './cancelAutorenew.scss';\r\nimport '../TransitPass/AddTransitPass/AddTransitPass.scss';\r\n\r\nconst CancelAutorenew2 = ({\r\n fields,\r\n subscriptionInstance,\r\n backToTransitPassesButtonLink,\r\n TTCrendering,\r\n}) => (\r\n \r\n \r\n <Text field={fields.title} />\r\n \r\n\r\n {error && \r\n \r\n\r\n \r\n \r\n cancelAutorenew()}\r\n >\r\n redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.backButtonTextA11y.value}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default withTranslation()(CancelAutorenew2);\r\n","import React, { useState, useRef } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Header, StepTracker } from '../../molecules';\r\nimport CancelAutorenew1 from './CancelAutorenew1';\r\nimport CancelAutorenew2 from './CancelAutorenew2';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nconst stepsMap = [CancelAutorenew1, CancelAutorenew2];\r\n\r\nconst CancelAutorenew = ({\r\n fields,\r\n t,\r\n state,\r\n setState,\r\n subscriptionInstance,\r\n backToTransitPassesButtonLink,\r\n TTCrendering,\r\n}) => {\r\n const userInfo = useSelector((s) => s.user);\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n\r\n const Stepper = stepsMap[step];\r\n\r\n if (!subscriptionInstance) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n (\r\n \r\n \r\n redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.toTransitPassesButtonTextA11y.value}\r\n >\r\n \r\n */}\r\n\r\n
\r\n \r\n
\r\n \r\n redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.toTransitPassesButtonTextA11y.value}\r\n >\r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {fields.PrintLabel.value}\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n \r\n \r\n
\r\n);\r\n\r\nexport default CardItem;\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSwipeable } from 'react-swipeable';\r\n\r\nimport { IconButton } from '../../atoms';\r\nimport circleBlack from '../../assets/images/circle-black.svg';\r\nimport circleWhite from '../../assets/images/circle-white.svg';\r\nimport arrowLeft from '../../assets/images/arrow-left.svg';\r\nimport arrowRight from '../../assets/images/arrow-right.svg';\r\nimport './carousel.scss';\r\n\r\nconst Carousel = (props) => {\r\n const [currentStep, setCurrentStep] = useState(0);\r\n const { 'presto-carousel': prestoCarousel } = props.rendering.placeholders;\r\n const totalpagecount = prestoCarousel.length;\r\n const [isFirstLoad, setIsFirstLoad] = useState(true);\r\n\r\n const selectStep = (nextPosition) => {\r\n if (currentStep + nextPosition === -1) {\r\n setCurrentStep(3);\r\n } else if (currentStep + nextPosition === 4) {\r\n setCurrentStep(0);\r\n } else {\r\n setCurrentStep(currentStep + nextPosition);\r\n }\r\n };\r\n\r\n const goToNextStep = () => {\r\n setIsFirstLoad(false);\r\n selectStep(1);\r\n };\r\n const goToPrevStep = () => {\r\n setIsFirstLoad(false);\r\n selectStep(-1);\r\n };\r\n\r\n const carouselDots = prestoCarousel.map((item, index) => {\r\n const progressA11y = props.fields.progressA11y.value\r\n .replace('{pagenumber}', index + 1)\r\n .replace('{totalpagecount}', totalpagecount);\r\n\r\n const addAccessibilityAlert = index === currentStep && !isFirstLoad;\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\nexport default Carousel;\r\n","import React from 'react';\r\n\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { redirectToUrlInNewWindow } from '../../services/utils';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\n\r\nimport './carouselSlide.scss';\r\n\r\nconst maxDescriptionLength = 120;\r\nconst maxHeadingLength = 30;\r\nconst maxCtaLength = 24;\r\n\r\nconst CarouselSlide = (props) => {\r\n const { fields, prestoCarousel, rendering, currentStep } = props;\r\n\r\n const isActive = prestoCarousel.findIndex((item) => item.uid === rendering.uid) === currentStep;\r\n const descriptionLength = fields.description?.value.length || 0;\r\n const headingLength = fields.heading?.value.length || 0;\r\n const ctaLength =\r\n fields.ctaLink?.value && fields.ctaLink.value.text ? fields.ctaLink.value.text.length : 0;\r\n const isImageHidden =\r\n descriptionLength > maxDescriptionLength ||\r\n headingLength > maxHeadingLength ||\r\n ctaLength > maxCtaLength;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n null} onClick={goToPrevStep}>\r\n
\r\n {carouselDots}
\r\n \r\n null} onClick={goToNextStep}>\r\n
\r\n \r\n \r\n redirectToUrlInNewWindow(fields.ctaLink.value.href)}\r\n >\r\n {fields.ctaLink.value.text}\r\n \r\n \r\n ) : null}\r\n
\r\n {!isImageHidden && (\r\n \r\n
\r\n \r\n
\r\n {fields.ctaLink?.value?.href && fields.ctaLink.value?.text ? (\r\n \r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(CarouselSlide);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Modal } from '../../molecules';\r\nimport { Checkbox } from '../../atoms';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport api from '../../services/api';\r\nimport './caslPopup.scss';\r\nimport { updateCaslPopupStatus, updateCaslPopupOpenedStatus } from '../../redux/user/actions';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\n\r\nconst CaslPopUp = ({ fields }) => {\r\n const dispatch = useDispatch();\r\n const { showCaslPopUp, customerId, isPopupOpened } = useSelector((reduxState) => reduxState.user);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [contentchecked, setContentChecked] = useState(false);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n useEffect(() => {\r\n if (showCaslPopUp && !isPopupOpened && isLoaded) {\r\n setTimeout(() => {\r\n setIsModalOpen(true);\r\n }, 1000);\r\n }\r\n }, [showCaslPopUp, isLoaded]);\r\n\r\n useEffect(() => {\r\n if (isModalOpen) {\r\n dispatch(updateCaslPopupOpenedStatus());\r\n }\r\n }, [isModalOpen]);\r\n\r\n // code change for rendering error\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [fields]);\r\n if (!isLoaded) return null;\r\n\r\n const confirmationStatus = ({ btnType }) => {\r\n api\r\n .updateConsentInput({\r\n IsConfirm: btnType === 'Confirm',\r\n IsOptIn: btnType === 'Close' ? false : contentchecked,\r\n CrmReferenceID: customerId,\r\n })\r\n .then((res) => {\r\n setIsModalOpen(false);\r\n dispatch(updateCaslPopupStatus());\r\n });\r\n };\r\n\r\n const submitHandler = () => {\r\n confirmationStatus({ btnType: 'Confirm' });\r\n };\r\n const closeHandler = () => {\r\n confirmationStatus({ btnType: 'Close' });\r\n };\r\n\r\n return (\r\n <>\r\n {showCaslPopUp && isLoaded ? (\r\n \r\n \r\n setContentChecked((contentchecked) => !contentchecked)}\r\n >\r\n {\r\n setContentChecked(e);\r\n }}\r\n checkboxA11y={fields?.caslCheckboxTextA11y?.value}\r\n >\r\n
\r\n \r\n }\r\n textCancel={fields?.caslCloseCtaText?.value}\r\n textSubmit={fields?.caslConfirmCtaText?.value}\r\n buttonTextCloseA11y={fields?.caslCloseCtaTextA11y?.value}\r\n buttonTextA11y={fields?.caslConfirmCtaTextA11y?.value}\r\n onSubmit={submitHandler}\r\n onClose={closeHandler}\r\n isCustomClose\r\n disableBackdropClick\r\n disableEscapeKeyDown\r\n withoutFocusTrap={false}\r\n isModalOpen={isModalOpen}\r\n setIsModalOpen={setIsModalOpen}\r\n />\r\n \r\n ) : null}\r\n \r\n );\r\n};\r\nexport default CaslPopUp;\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\nimport { withTranslation } from 'react-i18next';\r\nimport routes from '../../constants/routes';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport { IconButton, Button, Loader } from '../../atoms';\r\nimport { StepTracker, TextInput, Note } from '../../molecules';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport api from '../../services/api';\r\nimport { setChangeCardPinMode } from '../../redux/products/actions';\r\nimport './changepin.scss';\r\n\r\nconst ChangePIN = (props) => {\r\n const { t } = props;\r\n const manageMyProduct = useSelector((reduxState) => reduxState.products.manageMyProduct);\r\n const [step, setStep] = useState(0);\r\n const toNextStep = () => setStep(step + 1);\r\n const [loading, setLoading] = useState(false);\r\n const [checkError, setCheckError] = useState(true);\r\n const [newPin, updateNewPin] = useState('');\r\n const [oldPin, updateOldPin] = useState('');\r\n const [userInfo, setUserInfo] = useState({});\r\n const [confirmNewPin, updateConfirmNewPin] = useState('');\r\n const [apiStatus, setApiStatus] = useState({ submit: false, state: 'INITIAL' });\r\n const user = useSelector((reduxState) => reduxState.user);\r\n const fareMedia = useSelector((reduxState) => {\r\n let presto = reduxState.user.fareMedias.find(\r\n (el) => el.mediaId === manageMyProduct.selectedCard.mediaId\r\n );\r\n let contactless = reduxState.user.contactlessMedias.find(\r\n (el) => el.mediaId === manageMyProduct.selectedCard.mediaId\r\n );\r\n if (presto) return presto;\r\n if (contactless) return contactless;\r\n return {};\r\n });\r\n const PIN_REGEX = /^[0-9]{4}$/;\r\n const dispatch = useDispatch();\r\n const focusDiv = useRef();\r\n\r\n const onNewPinChange = (e) => {\r\n updateNewPin(e.target.value);\r\n };\r\n const onConfirmNewPinChange = (e) => {\r\n updateConfirmNewPin(e.target.value);\r\n };\r\n const changePinSubmitHandler = () => {\r\n if (checkError) {\r\n let button = document.getElementById('changepin-submit-button');\r\n button.click();\r\n return;\r\n }\r\n\r\n let card = userInfo?.Data?.Customer?.FareMedias.find(\r\n (el) => el.VisibleId === fareMedia?.visibleId\r\n );\r\n setLoading(true);\r\n let payload = {\r\n CustomerId: user?.customerId,\r\n VisibleId: fareMedia?.visibleId,\r\n MediaId:fareMedia?.mediaId,\r\n NewPIN: newPin,\r\n OldPIN: card?.PIN,\r\n Subject: user?.subject,\r\n };\r\n api\r\n .saveChangePinDetails(payload)\r\n .then((response) => {\r\n if (response?.data.Success) {\r\n setApiStatus({ submit: true, state: 'SUCCESS' });\r\n toNextStep();\r\n } else {\r\n setApiStatus({ submit: true, state: 'Error' });\r\n toNextStep();\r\n }\r\n setLoading(false);\r\n updateNewPin('');\r\n updateConfirmNewPin('');\r\n setCheckError(true);\r\n })\r\n .catch((err) => {\r\n setApiStatus({ submit: true, state: 'Error' });\r\n toNextStep();\r\n setLoading(false);\r\n });\r\n };\r\n useEffect(() => {\r\n if (apiStatus.submit) {\r\n focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n }\r\n }, [apiStatus]);\r\n useEffect(() => {\r\n if (manageMyProduct?.changeCardPinEnabled) {\r\n document.body.scrollTop = 0;\r\n focusDiv.current.focus();\r\n getUserInfo();\r\n }\r\n }, [manageMyProduct]);\r\n\r\n const getUserInfo = () => {\r\n setLoading(true);\r\n api\r\n .getUserInfo()\r\n .then((response) => {\r\n setUserInfo(response.data);\r\n setLoading(false);\r\n })\r\n .catch(() => {\r\n setLoading(false);\r\n });\r\n };\r\n\r\n const showPostSubmitMessage = () => {\r\n return (\r\n \r\n {apiStatus.state === 'SUCCESS' ? (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n {props.fields.Succesmessage.value}
\r\n \r\n
\r\n \r\n {props.fields.Pinchangedtext.value} : {fareMedia?.nickName}\r\n
\r\n{props.fields.Pinchangedendnote.value}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n {props.fields.FailureErrorlabel.value}
\r\n \r\n
\r\n {props.fields.FailureErrorContent.value}
\r\n\r\n
\r\n \r\n );\r\n };\r\n\r\n return [\r\n manageMyProduct?.changeCardPinEnabled ? (\r\n \r\n {\r\n setStep(0);\r\n setApiStatus({ submit: false, state: 'INITIAL' });\r\n dispatch(\r\n setChangeCardPinMode({\r\n changeCardPinEnabled: false,\r\n selectedCard: {},\r\n })\r\n );\r\n }}\r\n >\r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {props.fields.Printtextlabel.value}\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n ) : null,\r\n loading ? \r\n
\r\n \r\n
\r\n {!apiStatus.submit ? (\r\n <>\r\n \r\n {\r\n const errors = {};\r\n if (!values.NewPin) {\r\n errors.NewPin = props.fields.PinErrorlabel.value;\r\n } else if (!PIN_REGEX.test(values.NewPin)) {\r\n errors.NewPin = props.fields.NewpinLabelErr.value;\r\n }\r\n if (!values.ConfirmNewPin) {\r\n errors.ConfirmNewPin = props.fields.ConfirmPinErr.value;\r\n } else if (values.NewPin !== values.ConfirmNewPin) {\r\n errors.ConfirmNewPin = props.fields.MatchingpinErr.value;\r\n }\r\n\r\n if (\r\n Object.prototype.hasOwnProperty.call(errors, 'NewPin') ||\r\n Object.prototype.hasOwnProperty.call(errors, 'ConfirmNewPin')\r\n ) {\r\n setCheckError(true);\r\n } else {\r\n setCheckError(false);\r\n }\r\n\r\n return errors;\r\n }}\r\n validateOnChange={true}\r\n // validationSchema={Yup.object().shape({\r\n // NewPin: Yup.string()\r\n // .required(props.fields.PinErrorlabel.value)\r\n // .matches(/^[0-9]{4}$/, props.fields.NewpinLabelErr.value),\r\n // ConfirmNewPin: Yup.string()\r\n // .required(props.fields.ConfirmPinErr.value)\r\n // .matches(/^[0-9]{4}$/, props.fields.NewpinLabelErr.value)\r\n // .oneOf([Yup.ref('NewPin'), null], props.fields.MatchingpinErr.value),\r\n // })}\r\n // onSubmit={(values) => {\r\n // console.log(values);\r\n // setApiStatus({ submit: true, state: 'SUCCESS' });\r\n // toNextStep();\r\n // }}\r\n >\r\n {({ values, errors, touched, handleSubmit, handleChange }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.fields.Newpintitle.value}\r\n
\r\n \r\n \r\n {fareMedia?.nickName}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\r\n changePinSubmitHandler();\r\n }}\r\n >\r\n \r\n
\r\n \r\n ) : (\r\n showPostSubmitMessage()\r\n )}\r\n \r\n \r\n
\r\n \r\n {isOrderCard\r\n ? displayShoppingCartItems &&\r\n state.fareMedias &&\r\n state.fareMedias.map((fareMedia) => {\r\n if (fareMedia.visibleId === visibleId) {\r\n return (\r\n
\r\n {displayShoppingCartItems && state.items ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {addressType === 'current' ? (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {currentAddress?.Line1} {currentAddress?.Line2}\r\n \r\n
\r\n\r\n {currentAddress?.City}\r\n {currentAddress?.City && currentAddress?.Area?.Code ? `, ` : ''}\r\n {currentAddress?.Area?.Code}\r\n
\r\n{currentAddress?.Country?.Id}
\r\n{currentAddress?.PostalCode}
\r\n\r\n
\r\n )}\r\n \r\n \r\n {newShippingDetails?.Line1} {newShippingDetails?.Line2}\r\n \r\n
\r\n\r\n {newShippingDetails?.City}\r\n {newShippingDetails?.City && newShippingDetails?.AreaCode ? `, ` : ''}\r\n {newShippingDetails?.AreaCode}\r\n
\r\n{newShippingDetails?.CountryId}
\r\n{newShippingDetails?.PostalCode}
\r\n\r\n {configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'Cpg.Url')\r\n .map((configKey) => (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(CheckoutStep1);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n formatDate,\r\n formatDecimalWithCurrency,\r\n formatUtcTimeFromDate,\r\n formatUtcTimeFromDate2,\r\n formattoLocalDate,\r\n redirectToUrl,\r\n} from '../../services/utils';\r\nimport {\r\n removeAllFromShoppingCart,\r\n setUserSignedfromGuestFlow,\r\n setGuestShoppingCartPayload,\r\n} from '../../redux/user/actions';\r\nimport { ButtonBlock, Button, PrintButton } from '../../atoms';\r\nimport { CheckoutGrid, Note, Success, ThirdPartySystemErrorWarning } from '../../molecules';\r\nimport './checkout.scss';\r\nimport routes from '../../constants/routes';\r\nimport names from '../../constants/shoppingCart';\r\nimport { NEWMEDIA_VISIBLE_ID } from '../../constants/product.constants';\r\n\r\nconst CheckoutStep2 = ({\r\n fields,\r\n state,\r\n thirdPartySystemErrorType,\r\n goBackUrl,\r\n isOrderCard,\r\n isSuccess,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const shippingDetails = useSelector((redux) => redux.user.currentShippingDetails);\r\n const orderDetails = useSelector((redux) => redux.user.newCardDetails);\r\n const newShippingDetails = useSelector((redux) => redux.user.newShippingDetails);\r\n const addressType = useSelector((reduxState) => reduxState.user.addressType);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const dateAndTime = state?.TransactionDateTime?.split(' ');\r\n const formattedDate = dateAndTime && dateAndTime.length > 0 ? formatDate(dateAndTime[0]) : null;\r\n const formattedTime = formatUtcTimeFromDate(dateAndTime);\r\n const formattedDateTime = state?.TransactionDateTime\r\n ? formatUtcTimeFromDate2(state?.TransactionDateTime)\r\n : null;\r\n let items = [];\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n dispatch(removeAllFromShoppingCart());\r\n dispatch(setUserSignedfromGuestFlow(false));\r\n dispatch(setGuestShoppingCartPayload({}));\r\n if (orderDetails && orderDetails.OrderLines && orderDetails.OrderLines.length > 0) {\r\n let temp = orderDetails.OrderLines.map((data) => {\r\n let nickName;\r\n let cardLang;\r\n if (data?.SalesProductInfo?.ProdInstAttCollection?.NickName) {\r\n nickName = data?.SalesProductInfo?.ProdInstAttCollection?.NickName;\r\n } else {\r\n nickName = state?.nickNameValue;\r\n }\r\n if (data?.SalesProductInfo?.ProdInstAttCollection?.Language) {\r\n cardLang =\r\n data?.SalesProductInfo?.ProdInstAttCollection?.Language === 'en'\r\n ? fields?.EnglishLanguageText?.value\r\n : fields?.FrenchLanguageText?.value;\r\n } else {\r\n cardLang = state?.cardLanguage;\r\n }\r\n return {\r\n id: data?.Product?.ProductId,\r\n name: data?.Product?.ProductName?.replace(names.addMoney, names.funds),\r\n nickName: null,\r\n orderLineId: data?.OrderLineId,\r\n productFamily: data?.Product?.ProductFamily,\r\n quantity: data?.Quantity,\r\n subTotal: data?.SubTotal,\r\n validityEndDate: data?.Product?.ValidityEndDate,\r\n validityStartDate: data?.Product?.ValidityStartDate,\r\n visibleId: 'NEWMEDIA',\r\n serviceProvider: data?.Product?.ProductServiceProvider?.Id,\r\n nickNameValue: nickName,\r\n cardLanguage: cardLang,\r\n };\r\n });\r\n items = temp;\r\n } else {\r\n items = state?.items.map((el) => ({\r\n ...el,\r\n nickNameValue: state.nickNameValue,\r\n cardLanguage: state.cardLanguage,\r\n }));\r\n }\r\n }, []);\r\n\r\n const orderDate =\r\n !!state.date &&\r\n new Date(new Date('0001').getTime() + state.date / 10000).toLocaleString('en-US');\r\n\r\n const newDate = new Date(new Date('0001').getTime() + state.date / 10000);\r\n //const formattedDate = formatDate(newDate);\r\n //const formattedTime = formatUtcTimeFromDate(newDate);\r\n const shipping = {\r\n value: 'Shipping Address',\r\n };\r\n\r\n const hasNewCard = state?.items?.some((el) => el.visibleId === NEWMEDIA_VISIBLE_ID);\r\n return (\r\n <>\r\n {thirdPartySystemErrorType ? (\r\n \r\n {/*!state.savedPaymentMethodUsed &&*/ (state.AFMSSalesId || state.orderid) && (\r\n <>\r\n
\r\n \r\n
\r\n \r\n )}\r\n />\r\n\r\n {!state.savedPaymentMethodUsed && (\r\n \r\n {isOrderCard && (shippingDetails || newShippingDetails) && (\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {/* {guestUserInfo?.isGuestLogin && (\r\n <>\r\n \r\n
\r\n {addressType === 'current' ? (\r\n \r\n
\r\n ) : (\r\n \r\n {shippingDetails?.Line1} {shippingDetails?.Line2}\r\n
\r\n\r\n {shippingDetails?.City}\r\n {shippingDetails?.City && shippingDetails?.Area?.Code ? `, ` : ''}\r\n {shippingDetails?.Area?.Code}\r\n
\r\n\r\n {shippingDetails?.Country?.Id}\r\n {shippingDetails?.Country?.Id && shippingDetails?.PostalCode ? `, ` : ''}\r\n {shippingDetails?.PostalCode}\r\n
\r\n\r\n
\r\n )}\r\n \r\n {newShippingDetails?.Line1} {newShippingDetails?.Line2}\r\n
\r\n\r\n {newShippingDetails?.City}\r\n {newShippingDetails?.City && newShippingDetails?.AreaCode ? `, ` : ''}\r\n {newShippingDetails?.AreaCode}\r\n
\r\n\r\n {newShippingDetails?.CountryId}\r\n {newShippingDetails?.CountryId && newShippingDetails?.PostalCode\r\n ? `, `\r\n : ''}\r\n {newShippingDetails?.PostalCode}\r\n
\r\n\r\n
\r\n \r\n )} */}\r\n \r\n
\r\n \r\n
\r\n \r\n {newShippingDetails?.Line1} {newShippingDetails?.Line2}\r\n
\r\n\r\n {newShippingDetails?.City}\r\n {newShippingDetails?.City && newShippingDetails?.AreaCode?.value\r\n ? `, `\r\n : ''}\r\n {newShippingDetails?.AreaCode?.value}\r\n
\r\n\r\n {newShippingDetails?.CountryId}\r\n {newShippingDetails?.CountryId && newShippingDetails?.PostalCode\r\n ? `, `\r\n : ''}\r\n {newShippingDetails?.PostalCode}\r\n
\r\n\r\n
\r\n \r\n
\r\n {state.TransactionType || '-'}
\r\n \r\n
\r\n \r\n
\r\n \r\n {state.ResponseCode} - {decodeURIComponent(state.AcceptanceStatus)}\r\n
\r\n \r\n
\r\n \r\n
\r\n {state.ISOCode || '-'}
\r\n \r\n
\r\n \r\n
\r\n {formattedDateTime}
\r\n {/* {state?.TransactionDateTime ? state.TransactionDateTime : '-'}
*/}\r\n {/* {isOrderCard ? formattedDate + ' ' + formattedTime : orderDate || '-'}
*/}\r\n \r\n
\r\n \r\n
\r\n {state.TransactionNumber || '-'}
\r\n \r\n
\r\n \r\n {shippingRadioBlock ? (\r\n <>\r\n
\r\n {!shippingRadioBlock && (\r\n \r\n
\r\n \r\n setAddresType(values)}\r\n >\r\n {({ values, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n {\r\n const errors = {};\r\n if (\r\n !values.firstName ||\r\n values.firstName.trim() === \"\" ||\r\n values.firstName.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEXFirstlastname.test(values.firstName.trim())\r\n ) {\r\n errors.firstName = fields.FirstNameError.value;\r\n }\r\n if (\r\n !values.lastName ||\r\n values.lastName.trim() === \"\" ||\r\n values.lastName.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEXFirstlastname.test(values.lastName.trim())\r\n ) {\r\n errors.lastName = fields.LastNameError.value;\r\n }\r\n if (\r\n !values.streetAddress ||\r\n values.streetAddress.trim() === \"\" ||\r\n values.streetAddress.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.streetAddress.trim())\r\n ) {\r\n errors.streetAddress = fields.StreetAddressError.value;\r\n }\r\n // if (\r\n // values.apartmentAddress.length > 50 ||\r\n // !ALPHANUMERIC_REGEX.test(values.apartmentAddress)\r\n // ) {\r\n // errors.apartmentAddress = t('ApartmentLabelErrorMessage');\r\n // }\r\n if (\r\n //values.apartmentAddress.trim() === \"\" ||\r\n values.apartmentAddress.trim().length > 50 ||\r\n !ALPHANUMERIC_REGEX_APT_NUMBER.test(values.apartmentAddress.trim())\r\n ) {\r\n errors.apartmentAddress = t('ApartmentLabelErrorMessage');\r\n }\r\n if (\r\n !values.city ||\r\n values.city.trim() === \"\" ||\r\n values.city.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.city.trim())\r\n ) {\r\n errors.city = fields.CityError.value;\r\n }\r\n if (!values.postalCode || !POSTAL_REGEX.test(values.postalCode)) {\r\n errors.postalCode = fields.PostalCodeError.value;\r\n }\r\n if (Object.keys(errors).length === 0) {\r\n setIsError(false);\r\n setShippingData(values);\r\n } else {\r\n setIsError(true);\r\n setShippingData('');\r\n }\r\n return errors;\r\n }}\r\n // validateOnChange={true}\r\n /*validationSchema={Yup.object().shape({\r\n apartmentAddress: Yup.string()\r\n .max(50, t('ApartmentLabelErrorMessage'))\r\n .matches(/^[0-9a-zA-Z ]+$/, t('ApartmentLabelErrorMessage')),\r\n })}*/\r\n onSubmit={(values) => {\r\n //setShippingData(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n )}\r\n\r\n {!guestUserInfo?.isGuestLogin && shippingRadioBlock ? (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default CheckoutStep01;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport routes from '../../constants/routes';\r\nimport { getServerUrl, getQueryParams } from '../../services/utils';\r\nimport handleThirdPartyError from '../../services/handleThirdPartyError';\r\nimport CheckoutStep0 from './CheckoutStep0';\r\nimport CheckoutStep1 from './CheckoutStep1';\r\nimport CheckoutStep2 from './CheckoutStep2';\r\nimport CheckoutStep01 from './CheckoutStep01';\r\nimport { StepTracker, Header } from '../../molecules';\r\n\r\nimport './checkout.scss';\r\n\r\nlet stepsMap = [CheckoutStep0, CheckoutStep1, CheckoutStep2];\r\n\r\nconst Checkout = ({ fields, t, rendering }, props) => {\r\n const userInfo = useSelector((s) => s.user);\r\n const fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n const cartItems = useSelector((reduxState) => reduxState.user.shoppingCart.items);\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const subTotal = cartItems ? cartItems.reduce((acc, val) => acc + val.subTotal, 0) : 0;\r\n const [step, setStep] = useState(0);\r\n const [state, setState] = useState({});\r\n const [isError, setIsError] = useState(false);\r\n const focusDiv = useRef();\r\n const goBackURL = useSelector((reduxState) => reduxState.user.goBackURL);\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => setStep(0);\r\n const toPreviousStep = () => {\r\n setStep(step - 1);\r\n focusDiv.current.focus();\r\n };\r\n\r\n const Stepper = stepsMap[step];\r\n const location = useLocation();\r\n const [thirdPartySystemErrorType, setThirdPartySystemErrorType] = useState('');\r\n const returnUrl = `${getServerUrl()}${location.pathname}`;\r\n const queryParams = getQueryParams(location.search);\r\n const [isOrderCard, setIsOrderCard] = useState(false);\r\n let goBackUrl = goBackURL;\r\n // state?.items?.length && state.items?.every((item) => item.productFamily !== 'Epurse')\r\n // ? routes.transitPasses\r\n // : routes.loadMyCard;\r\n // goBackUrl =\r\n // state?.items?.length &&\r\n // state.items?.some((data) => data.productFamily === 'Fare Media') &&\r\n // routes.orderNewCard;\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.IframeJs').map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, [configKeys]);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] !== '') {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, [configKeys]);\r\n\r\n useEffect(() => {\r\n if (cartItems && cartItems.length > 0 && cartItems[0].visibleId === 'NEWMEDIA') {\r\n setIsOrderCard(true);\r\n stepsMap = [CheckoutStep0, CheckoutStep01, CheckoutStep1, CheckoutStep2];\r\n }\r\n const searchValues = location.search.substring(1);\r\n setState({ items: cartItems, fareMedias, total: subTotal });\r\n\r\n if (queryParams.error) {\r\n handleThirdPartyError(queryParams.error, (error) => {\r\n setThirdPartySystemErrorType(error);\r\n setState({ items: cartItems, reference: queryParams.reference || '' });\r\n setStep(2);\r\n focusDiv.current.focus();\r\n });\r\n }\r\n\r\n if (queryParams.success === 'True') {\r\n setState({\r\n items: cartItems,\r\n fareMedias,\r\n total: subTotal,\r\n ...JSON.parse(\r\n `{\"${decodeURI(searchValues)\r\n .replace(/\"/g, '\\\\\"')\r\n .replace(/&/g, '\",\"')\r\n .replace(/=/g, '\":\"')}\"}`\r\n ),\r\n });\r\n if (isOrderCard) {\r\n setStep(2);\r\n } else {\r\n setStep(3);\r\n }\r\n focusDiv.current.focus();\r\n } else if (queryParams.success === 'False') {\r\n setIsError(true);\r\n if (cartItems && cartItems.length > 0 && cartItems[0].visibleId === 'NEWMEDIA') {\r\n setStep(2);\r\n } else {\r\n setStep(1);\r\n }\r\n focusDiv.current.focus();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!state.savedPaymentMethodUsed && queryParams.success !== 'True') {\r\n setState({\r\n ...state,\r\n items: cartItems,\r\n fareMedias,\r\n total: subTotal,\r\n reference: queryParams.reference || '',\r\n });\r\n }\r\n }, [cartItems, subTotal, queryParams.reference]);\r\n\r\n return (\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {isOrderCard ? (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(Checkout);\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useSelector } from 'react-redux';\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { MediaImageWrapper } from '../../atoms';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport { SAMPLE_PAYLOAD } from '../ContactlessTransactionHistory/mockData';\r\nimport routes from '../../constants/routes';\r\nimport './contactlessAccountCardImage.scss';\r\nimport { redirectToUrl } from '../../services/utils';\r\n\r\nconst ContactlessAccountCardImage = (props) => {\r\n const [cardtype, setCardtype] = useState(false);\r\n const userInfoData = useSelector((state) => {\r\n if (state?.contactless?.userInfoData && state?.contactless?.userInfoData?.CardType) {\r\n return state.contactless.userInfoData;\r\n }\r\n return {};\r\n // return SAMPLE_PAYLOAD;\r\n });\r\n const shortenPan = userInfoData?.MaskedPan?.slice(userInfoData.MaskedPan.length - 4);\r\n const [cardProp, setCardProp] = useState({});\r\n useEffect(() => {\r\n if (userInfoData && userInfoData.CardType) {\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const [cardName, value] of Object.entries(props.fields)) {\r\n if (cardName.toLowerCase().includes(mediaSubTypes[userInfoData.CardType])) {\r\n setCardProp(value);\r\n }\r\n }\r\n\r\n if (userInfoData?.CardType === 'OPENP_VISA') {\r\n setCardtype(true);\r\n } else {\r\n setCardtype(false);\r\n }\r\n }\r\n }, [userInfoData]);\r\n\r\n let contactlessCardIDLabel = 'Contactless Card ID';\r\n if (props?.fields?.contactlessCardIDLabel && props?.fields?.contactlessCardIDLabel?.value) {\r\n contactlessCardIDLabel = props.fields.contactlessCardIDLabel.value;\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ContactlessAccountCardImage);\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { PrestoLink, SocialLink } from '../../atoms';\r\nimport './ContactlessFooter.scss';\r\n\r\nconst ContactlessFooter = (props) => {\r\n const { datasource } = props.fields.data ? props.fields.data : { children: [] };\r\n return (\r\n \r\n \r\n \r\n \r\n {' '}\r\n {shortenPan}\r\n
\r\n \r\n {contactlessCardIDLabel}:\r\n
\r\n {userInfoData?.MediaReferenceId}\r\n
\r\n \r\n {userInfoData?.MediaReferenceId}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ContactlessFooter);\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport './contactlessLeftNavigationFAQ.scss';\r\n\r\nconst ContactlessLeftNavigationFAQ = (props) => {\r\n const { datasource } = props.fields && props.fields.data ? props.fields.data : { children: [] };\r\n return (\r\n \r\n {datasource && (\r\n <>\r\n \r\n
\r\n \r\n {datasource.children.map((columns) =>\r\n columns.Title && columns.Title.value !== null ? (\r\n
\r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n {columns.Title.value}
\r\n- \r\n {columns.children.map((a) => (\r\n
- \r\n
\r\n \r\n ))}\r\n
\r\n {columns.children.map((social) => (\r\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 ContactlessLeftNavigationFAQ;\r\n","export default {\r\n SET_OVERLAY: 'contactless/SET_OVERLAY',\r\n IS_IFRAME_ENABLED: 'contactless/IS_IFRAME_ENABLED',\r\n IS_CONTACTLESS_USER_SIGNED_IN: 'contactless/IS_CONTACTLESS_USER_SIGNED_IN',\r\n SET_USER_INFO_DATA: 'contactless/SET_USER_INFO_DATA',\r\n SET_SIGN_OUT_REDIRECT_URL: 'contactless/SET_SIGN_OUT_REDIRECT_URL',\r\n SET_SETTINGS: 'contactless/SET_SETTINGS',\r\n SET_REDIRECT_URL: 'contactless/SET_REDIRECT_URL',\r\n SET_CONTACTLESS_TRANS_ITEMS: 'contactless/SET_CONTACTLESS_TRANS_ITEMS',\r\n SET_UNPAID_FARES: 'contactless/SET_UNPAID_FARES',\r\n SET_MULTI_UNPAID_FARES_PROPS: 'contactless/SET_MULTI_UNPAID_FARES_PROPS',\r\n UPDATE_RETRY_COUNTER: 'contactless/UPDATE_RETRY_COUNTER',\r\n SET_PAYMENTS_TO_VERIFY: 'contactless/SET_PAYMENTS_TO_VERIFY',\r\n CONTACTLESS_LOGIN_TIME: 'contactless/CONTACTLESS_LOGIN_TIME',\r\n CONTACTLESS_LOGOUT_TIME: 'contactless/CONTACTLESS_LOGOUT_TIME',\r\n};\r\n","import types from './types';\r\n\r\nexport function setSignInOverlay(payload) {\r\n return {\r\n type: types.SET_OVERLAY,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setIframeEnabled(payload) {\r\n return {\r\n type: types.IS_IFRAME_ENABLED,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setContactlessUserSignedIn(payload) {\r\n return {\r\n type: types.IS_CONTACTLESS_USER_SIGNED_IN,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setUserInfoData(payload) {\r\n return {\r\n type: types.SET_USER_INFO_DATA,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setSignOutRedirectUrl(payload) {\r\n return {\r\n type: types.SET_SIGN_OUT_REDIRECT_URL,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setSettings(data) {\r\n return {\r\n type: types.SET_SETTINGS,\r\n payload: {\r\n ...data,\r\n },\r\n };\r\n}\r\n\r\nexport function setContactlessLogInTime(contactlessLogInTime) {\r\n return {\r\n type: types.CONTACTLESS_LOGIN_TIME,\r\n payload: {\r\n contactlessLogInTime,\r\n },\r\n };\r\n}\r\n\r\nexport function setContactlessLogoutTime(contactlessLogoutTime) {\r\n return {\r\n type: types.CONTACTLESS_LOGOUT_TIME,\r\n payload: {\r\n contactlessLogoutTime,\r\n },\r\n };\r\n}\r\n\r\nexport function setRedirectUrl(payload) {\r\n return {\r\n type: types.SET_REDIRECT_URL,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setContactlessTransItems(payload) {\r\n return {\r\n type: types.SET_CONTACTLESS_TRANS_ITEMS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setUnpaidFares(payload) {\r\n return {\r\n type: types.SET_UNPAID_FARES,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setMultiUnpaidFareProps(payload) {\r\n return {\r\n type: types.SET_MULTI_UNPAID_FARES_PROPS,\r\n payload,\r\n };\r\n}\r\n\r\nexport function updateRetryCounter(payload) {\r\n return {\r\n type: types.UPDATE_RETRY_COUNTER,\r\n payload,\r\n };\r\n}\r\n\r\nexport function setPaymentsToVerify(payload) {\r\n return {\r\n type: types.SET_PAYMENTS_TO_VERIFY,\r\n payload,\r\n };\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport {\r\n setContactlessUserSignedIn,\r\n setSignInOverlay,\r\n setIframeEnabled,\r\n setUserInfoData,\r\n setSignOutRedirectUrl,\r\n setSettings,\r\n setRedirectUrl,\r\n setContactlessLogInTime,\r\n setContactlessLogoutTime,\r\n} from '../../redux/contactless/actions';\r\nimport { MediaImage } from '../../atoms';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport {\r\n getLocalStorageItem,\r\n localstorageService,\r\n sessionstorageService,\r\n getShortLanguageCode,\r\n} from '../../services/utils';\r\nimport { MediaImageList } from '../../molecules';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport moment from 'moment';\r\nimport CloseSideNavImage from '../../assets/images/HamburgerMenuClose.svg';\r\nimport './contactLessSignInOverlay.scss';\r\nimport api from '../../services/api';\r\nimport { Error } from '../../molecules';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { truncate } from 'lodash';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\n\r\nconst ContactLessSignInOverlay = (props) => {\r\n const signinItems = props?.fields?.items[1]?.fields;\r\n const dispatch = useDispatch();\r\n const isMobile = useMediaWidth();\r\n const signInModal = useSelector((state) => state.contactless.signInModal);\r\n const isIframeEnabled = useSelector((state) => state.contactless.isIframeEnabled);\r\n const isUserSignedIn = useSelector((state) => state.contactless.isContactlessUserSignedIn);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [errorCode, setErrorCode] = useState('');\r\n const [isInteracTab, setInteracTab] = useState(false);\r\n const tavEnable = props?.fields?.items[2]?.fields?.EnableCard?.value;\r\n const location = useLocation();\r\n const configKeys = useSelector((state) => state.contactless.configKeys);\r\n const signOutRedirectLink = useSelector((state) => state.contactless.signOutRedirectUrl);\r\n const pageLanguage = getShortLanguageCode();\r\n const uniqueSessionId = getLocalStorageItem(localStorageKeys.uniqueSessionId);\r\n\r\n useEffect(() => {\r\n const tokenExpiry = sessionstorageService().getItem('TokenExpiry');\r\n const currentTime = new Date();\r\n const loginTime = sessionstorageService().getItem('LoginTime');\r\n\r\n const formattedLoginTime = new Date(loginTime);\r\n const expiredTime = new Date(formattedLoginTime?.getTime() + tokenExpiry * 1000);\r\n const timeInterval = expiredTime - currentTime;\r\n const isShowSessionOut = sessionStorage?.getItem('ShowSessionOut');\r\n const accessToken = localstorageService().getItem(localStorageKeys.accessToken);\r\n const refreshToken = localstorageService().getItem(localStorageKeys.refreshToken);\r\n if (isUserSignedIn) {\r\n if (timeInterval <= 0 || !isShowSessionOut || !accessToken || !refreshToken) {\r\n signOutUser();\r\n }\r\n } else {\r\n if (timeInterval > 0 && isShowSessionOut && accessToken && refreshToken) {\r\n dispatch(setContactlessUserSignedIn(true));\r\n }\r\n }\r\n dispatch(setSignOutRedirectUrl(signinItems?.SignOutRedirectLink?.value?.href));\r\n dispatch(setRedirectUrl(signinItems?.RedirectLink?.value?.href));\r\n configData();\r\n }, []);\r\n\r\n const configData = () => {\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getAvailableSettings()\r\n .then(({ data }) => {\r\n if (!data?.Success) {\r\n reject();\r\n } else {\r\n dispatch(setSettings(data));\r\n resolve();\r\n }\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n });\r\n };\r\n\r\n const signOutUser = () => {\r\n localstorageService().removeItem(localStorageKeys?.accessToken);\r\n localstorageService().removeItem(localStorageKeys?.refreshToken);\r\n sessionstorageService().clear();\r\n dispatch(setContactlessUserSignedIn(false));\r\n let path = location?.pathname?.split('/');\r\n path = path[path?.length - 1];\r\n let redirectUrl = signOutRedirectLink?.split('/');\r\n redirectUrl = redirectUrl[redirectUrl?.length - 1];\r\n if (path !== redirectUrl) {\r\n window.location.href = signOutRedirectLink;\r\n }\r\n };\r\n\r\n const getUserInfo = () => {\r\n const redirectUrl = signinItems?.RedirectLink?.value?.href;\r\n return new Promise((resolve, reject) => {\r\n api\r\n .getUserinfoContactless()\r\n .then((response) => {\r\n dispatch(setUserInfoData(response?.data?.Data));\r\n resolve();\r\n setIsLoading(false);\r\n dispatch(setSignInOverlay(false));\r\n dispatch(setContactlessLogInTime(moment.utc().format()));\r\n dispatch(setContactlessLogoutTime(moment.utc().add(15, 'm').format()));\r\n window.location.href = redirectUrl;\r\n })\r\n .catch(() => {\r\n //console.log('error');\r\n reject();\r\n setIsLoading(false);\r\n dispatch(setSignInOverlay(false));\r\n });\r\n });\r\n };\r\n\r\n if (typeof window !== 'undefined') {\r\n window.addEventListener(\r\n 'message',\r\n (event) => {\r\n if (typeof event?.data === 'string' && event?.data !== 'recaptcha-setup') {\r\n const data = JSON.parse(event?.data);\r\n if (data && data?.statusCode != null) {\r\n if (\r\n data?.statusCode === 'STS_E_1002' ||\r\n data?.statusCode === 'STS_E_1005' ||\r\n data?.statusCode === 'STS_E_1008'\r\n ) {\r\n setErrorCode(data?.statusCode);\r\n dispatch(setIframeEnabled(false));\r\n } else if (data?.statusCode === 'STS_E_1010' || data?.statusCode === 'STS_E_1003' || data?.statusCode === 'STS_E_1020') {\r\n setErrorCode(data?.statusCode);\r\n dispatch(setIframeEnabled(true));\r\n document.querySelectorAll('iframe').forEach(function (e) {\r\n e.src += '';\r\n });\r\n }\r\n }\r\n\r\n if (\r\n data &&\r\n (data?.statusCode === 'STS_I_1001' ||\r\n data?.statusCode === 'STS_I_1007' ||\r\n data?.statusCode === 'STS_E_1004')\r\n ) {\r\n setErrorCode('');\r\n dispatch(setIframeEnabled(false));\r\n setIsLoading(true);\r\n setTimeout(function () {\r\n sessionstorageService().setItem('ShowSessionOut', true);\r\n }, data?.TokenExpiry);\r\n sessionstorageService().setItem('ShowSessionOut', true);\r\n sessionstorageService().setItem('TokenExpiry', data?.TokenExpiry);\r\n sessionstorageService().setItem('LoginTime', new Date());\r\n localstorageService().setItem(localStorageKeys?.accessToken, data?.AccessToken);\r\n localstorageService().setItem(localStorageKeys?.refreshToken, data?.RefreshToken);\r\n dispatch(setContactlessUserSignedIn(true));\r\n getUserInfo();\r\n }\r\n }\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n },\r\n false\r\n );\r\n }\r\n\r\n const loader = () => {\r\n return (\r\n \r\n 
\r\n
\r\n );\r\n };\r\n\r\n const errorBlock = () => {\r\n const errorItem = props?.fields?.items?.filter((data) => {\r\n return data?.fields['Error Code']?.value === errorCode;\r\n });\r\n const errorContent = errorItem[0]?.fields?.['Error Title']?.value;\r\n const errorDescription = errorItem[0]?.fields?.['Error Message'];\r\n const refreshValue = errorItem[0]?.fields['Error Button Text']?.value;\r\n if (errorCode === 'STS_E_1008' || errorCode === 'STS_E_1002') {\r\n return (\r\n <>\r\n \r\n {\r\n setErrorCode('');\r\n dispatch(setIframeEnabled(true));\r\n document.querySelectorAll('iframe').forEach(function (e) {\r\n e.src += '';\r\n });\r\n }}\r\n >\r\n {refreshValue}\r\n \r\n
\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n \r\n );\r\n };\r\n return [\r\n <>\r\n \r\n
\r\n {cardType}
\r\n \r\n {isCredit ? (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n ,\r\n ];\r\n};\r\n\r\nexport default withTranslation()(ContactLessSignInOverlay);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Link, Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport './contactlessTopNavigation.scss';\r\nimport { useParams, useLocation } from 'react-router-dom';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { setSignInOverlay, setContactlessUserSignedIn } from '../../redux/contactless/actions';\r\nimport { PrestoLink } from '../../atoms';\r\nimport {\r\n localstorageService,\r\n setLanguage,\r\n sessionstorageService,\r\n redirectToUrl,\r\n check15MinTillLogin,\r\n togglePageScroll,\r\n} from '../../services/utils';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\n\r\nconst ContactlessTopNavigation = (props) => {\r\n const dispatch = useDispatch();\r\n const [toggleClose, setToggleClose] = useState(true);\r\n const { datasource } = props.fields && props.fields.data ? props.fields.data : { children: [] };\r\n const urlParams = useParams();\r\n const location = useLocation();\r\n const [navIndex, setNavIndex] = useState('0');\r\n // const signOutRedirectLink = useSelector((state) => state.contactless.signOutRedirectUrl);\r\n const contactlessLoginTime = useSelector((state) => state.contactless.contactlessLogInTime);\r\n const contactlessLogoutTime = useSelector((state) => state.contactless.contactlessLogoutTime);\r\n const isContactlessAuthenticatedRedux = useSelector(\r\n (state) => state.contactless.isContactlessUserSignedIn\r\n );\r\n const [isUserSignedIn, setIsContactlessAuthenticated] = useState(false);\r\n\r\n const [topNavClass, setTopNavClass] = useState('');\r\n const [isSmartBannerPresent, setIsSmartBannerPresent] = useState(false);\r\n const [isSkipTranslateHidden, setIsSkipTranslateHidden] = useState(false);\r\n\r\n const handleDOMChanges = () => {\r\n const skipTranslateElement = document.querySelector('.skiptranslate');\r\n const smartBanner = document.querySelector('html.smartbanner-show');\r\n\r\n setIsSmartBannerPresent(!!smartBanner); // Set state based on smartBanner presence\r\n setIsSkipTranslateHidden(\r\n skipTranslateElement &&\r\n getComputedStyle(skipTranslateElement).getPropertyValue('display') === 'none'\r\n );\r\n\r\n const targetElement = document.querySelector('.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate');\r\n\r\n const navmenu = document.querySelector('.nav__wrapper.presto-nav-mobile');\r\n\r\n let newTopNavClass = '';\r\n if (window.location.href.toLowerCase().includes('about/contactless') && navmenu) {\r\n if (smartBanner && targetElement && !isSkipTranslateHidden) {\r\n navmenu.style.top = '174px';\r\n } else if (document.querySelector('html.smartbanner-show')) {\r\n navmenu.style.top = '136px';\r\n } else if (targetElement && !isSkipTranslateHidden) {\r\n navmenu.style.top = '96px';\r\n } else {\r\n navmenu.style.top = '56px'; // Default value if neither is present\r\n }\r\n }\r\n\r\n if (smartBanner && targetElement && !isSkipTranslateHidden) {\r\n newTopNavClass = 'topNav-both';\r\n } else if (smartBanner) {\r\n newTopNavClass = 'topNav-smartbanner';\r\n } else if (targetElement && !isSkipTranslateHidden) {\r\n newTopNavClass = 'topNav-translate';\r\n } else {\r\n newTopNavClass = 'topNav';\r\n }\r\n\r\n setTopNavClass(newTopNavClass);\r\n };\r\n\r\n useEffect(() => {\r\n const interval = setInterval(() => {\r\n handleDOMChanges();\r\n }, 100); // Check every 1 second\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n });\r\n\r\n useEffect(() => {\r\n setIsContactlessAuthenticated(isContactlessAuthenticatedRedux);\r\n }, []);\r\n\r\n const MINUTE_MS = 5000;\r\n\r\n useEffect(() => {\r\n const interval = setInterval(() => {\r\n const { isAfter15Min, contactlessLoginTimee, contactlessLogoutTimee } = check15MinTillLogin(\r\n contactlessLoginTime,\r\n contactlessLogoutTime\r\n );\r\n if (isAfter15Min && isContactlessAuthenticatedRedux) {\r\n signOutUser();\r\n } else {\r\n // Session still valid.\r\n }\r\n }, MINUTE_MS);\r\n return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.\r\n }, [contactlessLoginTime]);\r\n\r\n useEffect(() => {\r\n togglePageScroll(!toggleClose);\r\n }, [toggleClose]);\r\n\r\n const changeLanguage = () => {\r\n let url = { ...urlParams };\r\n let searchKeyword = location?.search;\r\n if (searchKeyword) {\r\n url = { ...url, sitecoreRoute: `${url?.sitecoreRoute}${searchKeyword}` };\r\n }\r\n setLanguage(url);\r\n };\r\n const getMobileMenu = () => {\r\n return (\r\n \r\n
\r\n ) : (\r\n ''\r\n )\r\n ) : !isLoading && isIframeEnabled ? (\r\n \r\n \r\n {signinItems?.Header?.value}\r\n
\r\n \r\n
\r\n {tavEnable ? '' : \r\n
\r\n <>{errorCode && errorBlock()}\r\n {isLoading ? loader() : ''}\r\n {tavEnable ? (\r\n !isLoading && isIframeEnabled ? (\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n )\r\n )}\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {isMobile && }\r\n {getTab(props?.fields?.items[2]?.fields?.Title?.value, true, false)}\r\n \r\n {getTab(props?.fields?.items[3]?.fields?.Title?.value, false, true)}\r\n {isMobile && }\r\n
\r\n\r\n {configKeys &&\r\n configKeys\r\n .filter((item) => item?.key === 'CreditcardIframe.Url')\r\n .map((configKey) =>\r\n !isInteracTab ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n {configKeys &&\r\n configKeys\r\n .filter((item) => item?.key === 'CreditcardIframe.Url')\r\n .map((configKey) => (\r\n
\r\n \r\n {isUserSignedIn ? (\r\n {\r\n signOutUser();\r\n setToggleClose(true);\r\n }}\r\n >\r\n \r\n \r\n {datasource.SignOutButton?.value}\r\n \r\n \r\n \r\n ) : (\r\n {\r\n // dispatch(setSignInOverlay(true));\r\n setToggleClose(true);\r\n }}\r\n >\r\n \r\n {\r\n redirectToUrl('/B2CRedirect/B2CRegisteredSignIn');\r\n }}\r\n href=\"javascript:void(0)\"\r\n className=\"signin__title\"\r\n >\r\n {datasource.SignInButton?.value}\r\n \r\n \r\n \r\n )}\r\n
\r\n - \r\n
- \r\n
- \r\n
- {columns.field?.jss?.value} \r\n
- \r\n {columns.children.map((a) => {\r\n if (!isUserSignedIn && a.Signin?.jss?.value) {\r\n return '';\r\n }\r\n\r\n const currentHeadingId = a.MainLink?.jss?.value?.href;\r\n const headingHashTag = location.pathname;\r\n return (\r\n <>\r\n
- \r\n
- \r\n \r\n {datasource.LanguageSwitchText?.value}\r\n \r\n \r\n
\r\n {/* \r\n setToggleClose(!toggleClose)}\r\n >\r\n {toggleClose ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n {datasource.PrestoCardLink.jss?.value?.text}\r\n \r\n \r\n {datasource.ContactlessLink.jss?.value?.text}\r\n \r\n
\r\n \r\n \r\n {' '}\r\n {datasource.LanguageSwitchText?.value}{' '}\r\n \r\n {isUserSignedIn ? (\r\n {\r\n signOutUser();\r\n }}\r\n href=\"javascript:void(0);\"\r\n aria-label=\"\"\r\n className=\"topNav__link\"\r\n >\r\n {' '}\r\n {datasource.SignOutButton?.value}\r\n \r\n ) : (\r\n {\r\n redirectToUrl('/B2CRedirect/B2CRegisteredSignIn');\r\n }}\r\n href=\"javascript:void(0);\"\r\n aria-label=\"\"\r\n className=\"topNav__link\"\r\n >\r\n {' '}\r\n {datasource.SignInButton?.value}{' '}\r\n \r\n )}\r\n
\r\n \r\n \r\n {discountTypes[discountName]} : {formatDecimalWithCurrency(convertToDollars(discountPrice))}\r\n
\r\n );\r\n };\r\n const logo = useSelector(\r\n (state) => state.products?.logos[transitAgencyIds[data.serviceProviderId]]?.Logo\r\n );\r\n if (discountTypes === null) return null;\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n {!unpaid && (\r\n \r\n
\r\n \r\n \r\n {logo && logo.Src ? (\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {label}
\r\n \r\n {`${\r\n isContactlessUserSignedIn\r\n ? data.displayTime\r\n : formatUtcTimeFromDateToEasternTime(data.displayTime)\r\n } ${\r\n isContactlessUserSignedIn ? '' : formatUtcDateToEasternTime(data.displayTime)\r\n }`}\r\n
\r\n \r\n {isContactlessUserSignedIn ? '' : stationName}\r\n
\r\n {transitagencyName}
\r\n \r\n
\r\n \r\n {isPendingFare ? '-' : formatDecimalWithCurrency(convertToDollars(data.amount))}\r\n
\r\n \r\n {isContactlessUserSignedIn\r\n ? data.displayTime\r\n : formatUtcTimeFromDateToEasternTime(data.displayTime)}\r\n
\r\n {isContactlessUserSignedIn ? '' : formatUtcDateToEasternTime(data.displayTime)}\r\n
\r\n \r\n {isContactlessUserSignedIn ? '' : formatUtcDateToEasternTime(data.displayTime)}\r\n
\r\n {data.Usage?.tripInfo?.tripDiscountItems.map((i) => (\r\n
\r\n \r\n setIsOpen(!isOpen)}\r\n onKeyPress={() => setIsOpen(!isOpen)}\r\n tabIndex=\"0\"\r\n aria-expanded={isOpen}\r\n >\r\n \r\n {isOpen ? (\r\n 
\r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n {isOpen ? (\r\n \r\n {\r\n if (processUnpaidFare) {\r\n processUnpaidFare(data);\r\n } else {\r\n redirectToUrl(`${ROUTES.unpaidFares}?id=${data.uuid}`);\r\n }\r\n }}\r\n className=\"contactlessTransactionGridItem-unpaidFare-header-link link\"\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {isContactlessUserSignedIn\r\n ? data.createdTime\r\n : formatUtcDateToEasternTime(data.createdTime)}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {data.lines.length}{' '}\r\n {data.lines.length === 1\r\n ? fields.oneItemNumberLabel?.value\r\n : fields.itemNumberLabel?.value}\r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(TransactionGridItem);\r\n","import React from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport './heading.scss';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst Heading = (props, fields) => {\r\n const redeemStepper = useSelector((reduxState) => reduxState.products.redeemVoucher);\r\n const divid = props.fields && props.fields.ID?.value ? props.fields.ID.value : 'rlc-card';\r\n const idname = divid === 'rlc' || divid === 'rlc-card' ? 'rlc-card' : props.fields.ID.value;\r\n\r\n const getHeading = (tag) => {\r\n if (tag === 'h2') {\r\n return 'h2';\r\n } else if (tag === 'h3') {\r\n return 'h3';\r\n } else {\r\n return 'h1';\r\n }\r\n };\r\n const authenticated = useSelector((state) => state.user.authenticated);\r\n const anonymous = useSelector((state) => state.user.anonymous);\r\n return redeemStepper?.redeemVoucherStepperBlock || (authenticated && !anonymous && divid === 'rlc') ? null : (\r\n \r\n {data.lines.map((i) => (\r\n
\r\n {isPendingFare ||\r\n transactionCase === CASES.unpaidFare ||\r\n transactionCase === CASES.cancelled ? (\r\n <>\r\n {transactionCase === CASES.cancelled ? null : (\r\n \r\n {transactionCase === CASES.unpaidFare ? (\r\n
\r\n )}\r\n \r\n ) : (\r\n \r\n {getcardIdentifier(transactionCase)}/{data.visibleSalesOrderId}\r\n
\r\n )}\r\n \r\n {/* */}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(Heading);\r\n","import React from 'react';\r\nimport './paragraphContent.scss';\r\nimport './termsAndConditions.scss';\r\n\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nconst ParagraphContent = (props) => (\r\n \r\n
\r\n);\r\n\r\nexport default withTranslation()(ParagraphContent);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { PrestoLink } from '../../atoms';\r\nimport moment from 'moment';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Link, RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { merge } from 'lodash';\r\n\r\nimport api from '../../services/api';\r\nimport TransactionGridItem from '../TransactionHistoryContactless/TransactionGridItem';\r\nimport {\r\n getLanguageAtsId,\r\n isOneOf,\r\n redirectToUrl,\r\n formatDecimalWithCurrency,\r\n convertToDollars,\r\n downloadContactlessCsvFile,\r\n isFrench,\r\n} from '../../services/utils';\r\nimport { InlineButtonBlock, Title } from '../../molecules';\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport upIcon from '../../assets/images/up.svg';\r\nimport exportIcon from '../../assets/images/Terms-And-Conditions.svg';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport { IconButton, Button, Loader, MediaImage, ButtonBlock } from '../../atoms';\r\nimport searchIcon from '../../assets/images/search_empty.svg';\r\nimport './contactlessTransactionHistory.scss';\r\nimport Heading from '../Heading';\r\nimport ParagraphContent from '../ParagraphContent';\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport { setTransitAgencyLogos } from '../../redux/products/actions';\r\nimport routes from '../../constants/routes';\r\nimport Debit from '../../assets/images/Debit.png';\r\nimport {\r\n setContactlessTransItems,\r\n setMultiUnpaidFareProps,\r\n setPaymentsToVerify,\r\n setUnpaidFares,\r\n updateRetryCounter,\r\n} from '../../redux/contactless/actions';\r\nimport MEDIA_SUB_TYPES from '../../constants/mediaSubTypes';\r\n\r\nconst EN_HEADER_ID = 'ContactlessOpTxHistoryEnglishHeaders';\r\nconst FR_HEADER_ID = 'ContactlessOpTxHistoryFrenchHeaders';\r\nconst ITEMS_PER_PAGE = 10;\r\nconst DAYS_TO_SUBRACT = 7;\r\nconst ContactlessTransactionHistory = (props) => {\r\n const [hasConnectionError, setHasConnectionError] = useState(false);\r\n const [isExpand, setIsExpand] = useState(false);\r\n const [sorting, setSorting] = useState('DESC');\r\n const [isLoadingData, setIsLoadingData] = useState(false);\r\n const [isCardBlocked, setIsCardBlocked] = useState(false);\r\n const [isInteracCard, setIsInteracCard] = useState(false);\r\n const [showVerifySuccess, setShowVerifySuccess] = useState(false);\r\n const [showVerifyBlock, setShowVerifyBlock] = useState(false);\r\n const [csvHeader, setCsvHeader] = useState('');\r\n const [verifyError, setVerifyError] = useState('');\r\n const [isInteracVerifyCardFlowVisible, setIsInteracVerifyCardFlowVisible] = useState(false);\r\n const userInfoData = useSelector((state) => {\r\n if (state?.contactless?.userInfoData && state?.contactless?.userInfoData?.CardType) {\r\n return state.contactless.userInfoData;\r\n }\r\n });\r\n const configKeys = useSelector((state) => state.contactless.configKeys);\r\n const transactionHistory = useSelector((reduxState) => reduxState.contactless.transactionHistory);\r\n const unpaidFares = useSelector((reduxState) => reduxState.contactless.unpaidFares);\r\n const paymentsToVerify = useSelector((reduxState) => reduxState.contactless.paymentsToVerify);\r\n\r\n const [totalUnpaidFares, setTotalUnpaidFares] = useState(0);\r\n const shortenPan = userInfoData?.MaskedPan?.slice(userInfoData.MaskedPan.length - 4);\r\n const dispatch = useDispatch();\r\n const langCode = isFrench();\r\n useEffect(() => {\r\n if (langCode) {\r\n const frenchheader = configKeys\r\n .filter((item) => item.key === FR_HEADER_ID)\r\n .map((config) => config.setting);\r\n setCsvHeader(frenchheader);\r\n } else {\r\n const englishheader = configKeys\r\n .filter((item) => item.key === EN_HEADER_ID)\r\n .map((config) => config.setting);\r\n setCsvHeader(englishheader);\r\n }\r\n\r\n //console.log(\"card type: \" + userInfoData?.CardType);\r\n if (userInfoData?.CardType === 'OPENP_INTR') {\r\n setIsInteracCard(true);\r\n } else {\r\n setIsInteracCard(false);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n //console.log(\"isInteracCard Flag after2: \" + isInteracCard);\r\n if (isInteracCard) setIsInteracVerifyCardFlowVisible(true);\r\n if (!isInteracCard) setIsInteracVerifyCardFlowVisible(false);\r\n }, [isInteracCard]);\r\n\r\n useEffect(() => {\r\n //console.log(\"isInteracVerifyCardFlowVisible Flag after2: \" + isInteracVerifyCardFlowVisible);\r\n }, [isInteracVerifyCardFlowVisible]);\r\n\r\n const checkIsCardBlocked = (data) => {\r\n const mediaInfo = data.media.mediaInfo;\r\n return (\r\n isOneOf(\r\n [\r\n 'FAILED_TOO_MANY_INSPECTIONS',\r\n 'CHARGEBACK_FRAUD',\r\n 'BACK_OFFICE_OVERRIDE',\r\n 'SUSPECTED_COUNTERFEIT',\r\n ],\r\n mediaInfo.statusReason\r\n ) && mediaInfo.mediaStatus === 'HOTLISTED'\r\n );\r\n };\r\n function fetchPaymentsToVerify() {\r\n let payload = {\r\n MediaReferenceId: userInfoData.MediaReferenceId,\r\n cardType: userInfoData?.CardType,\r\n StartTime: moment().subtract(DAYS_TO_SUBRACT, 'days').toDate().toISOString(),\r\n EndTime: moment().toDate().toISOString(),\r\n Language: getLanguageAtsId,\r\n };\r\n setIsLoadingData(true);\r\n api\r\n .getPaymentsToVerify(payload)\r\n .then((res) => {\r\n setIsLoadingData(false);\r\n if (res.data.PaymentsToVerify?.length > 0) {\r\n dispatch(setPaymentsToVerify(res.data.PaymentsToVerify));\r\n setShowVerifyBlock(true);\r\n if (isInteracCard) {\r\n setIsInteracVerifyCardFlowVisible(true);\r\n }\r\n } else {\r\n setShowVerifyBlock(false);\r\n dispatch(setPaymentsToVerify(res.data.PaymentsToVerify));\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoadingData(false);\r\n setHasConnectionError(true);\r\n });\r\n }\r\n const postAPIfunctions = (response) => {\r\n let transactionHistoryTemp = {\r\n ...response,\r\n };\r\n if (response && response?.transactions?.length) {\r\n const transactionItems = response?.transactions[0];\r\n const transactionItemsnew = response?.textMapping;\r\n if (checkIsCardBlocked(transactionItems)) setIsCardBlocked(true);\r\n if (transactionHistory.HasMoreItems) {\r\n const mergedListOfItems = {};\r\n const mergedtextmapping = {};\r\n const newItemsmapping = { ...transactionItemsnew };\r\n const newItems = [...transactionItems.payments];\r\n const newServicemapping = { ...transactionItemsnew.serviceProvider };\r\n\r\n if (newItems.length > 10) {\r\n if (sorting === 'DESC') {\r\n newItems.pop();\r\n newItemsmapping.pop();\r\n } else {\r\n newItems.shift();\r\n newItemsmapping.shift();\r\n }\r\n }\r\n mergedtextmapping.locations = merge(mergedtextmapping.locations, newItemsmapping.locations);\r\n\r\n mergedListOfItems.payments = [...newItems];\r\n\r\n mergedtextmapping.serviceProvider = {\r\n ...mergedtextmapping.serviceProvider,\r\n ...newServicemapping,\r\n };\r\n transactionHistoryTemp.transactions = {\r\n ...transactionHistoryTemp?.transactions[0],\r\n payments: mergedListOfItems,\r\n };\r\n transactionHistoryTemp.textMapping = mergedtextmapping;\r\n } else {\r\n transactionHistoryTemp.transactions = {\r\n ...transactionHistoryTemp?.transactions[0],\r\n payments: transactionItems.payments,\r\n };\r\n transactionHistoryTemp.textMapping = transactionItemsnew;\r\n }\r\n } else {\r\n transactionHistoryTemp.transactions = {\r\n ...transactionHistoryTemp?.transactions,\r\n payments: [],\r\n };\r\n transactionHistoryTemp.textMapping = [];\r\n }\r\n dispatch(setContactlessTransItems(transactionHistoryTemp));\r\n };\r\n\r\n const onExport = () => {\r\n let payload = {\r\n MediaInstanceIds: userInfoData?.MediaKeyDetails?.map((el) => el.mediaInstanceId).join('|'),\r\n cardType: userInfoData?.CardType,\r\n StartTime: moment().subtract(DAYS_TO_SUBRACT, 'days').toDate().toISOString(),\r\n EndTime: moment().toDate().toISOString(),\r\n Records: ITEMS_PER_PAGE,\r\n SortDescending: sorting === 'DESC',\r\n Language: getLanguageAtsId(),\r\n MediaReferenceId: userInfoData?.MediaReferenceId,\r\n };\r\n api\r\n .getExportContactlessTransactionHistory(payload)\r\n .then((response) => {\r\n downloadContactlessCsvFile(\r\n csvHeader,\r\n response?.data,\r\n `tx_history_${userInfoData?.MediaReferenceId}.csv`\r\n );\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n });\r\n };\r\n function CalculateTotalUnpaidFares(transactions) {\r\n let sumOfUnpaidFares = 0;\r\n let tempMultipleUnpaidFareProps = [];\r\n if (transactions?.length) {\r\n for (let i = 0; i < transactions.length; i += 1) {\r\n for (let j = 0; j < transactions[i].payments.length; j += 1) {\r\n tempMultipleUnpaidFareProps.push({\r\n id: transactions[i].payments[j].uuid,\r\n isPaid: false,\r\n selected: false,\r\n });\r\n sumOfUnpaidFares += Number.parseInt(\r\n transactions[i].payments[j].lines.reduce((acc, val) => acc + val.amount, 0),\r\n 10\r\n );\r\n }\r\n }\r\n }\r\n dispatch(setMultiUnpaidFareProps(tempMultipleUnpaidFareProps));\r\n dispatch(updateRetryCounter(0));\r\n return sumOfUnpaidFares;\r\n }\r\n const getUnPaidFares = () => {\r\n setIsLoadingData(true);\r\n api\r\n .getContactlessUnpaidFares({\r\n MediaReferenceId: userInfoData.MediaReferenceId,\r\n CardType: userInfoData?.CardType,\r\n Language: getLanguageAtsId(),\r\n StartTime: moment().subtract(DAYS_TO_SUBRACT, 'days').toDate().toISOString(),\r\n EndTime: moment().toDate().toISOString(),\r\n })\r\n .then((response) => {\r\n setIsLoadingData(false);\r\n if (response.data?.transactions?.length) {\r\n dispatch(setUnpaidFares(response.data));\r\n }\r\n })\r\n .catch((err) => {\r\n setIsLoadingData(false);\r\n });\r\n };\r\n const getContactlessTransactionHistoryData = () => {\r\n let payload = {\r\n MediaReferenceId: userInfoData.MediaReferenceId,\r\n cardType: userInfoData?.CardType,\r\n StartTime: moment().subtract(DAYS_TO_SUBRACT, 'days').toDate().toISOString(),\r\n EndTime: moment().toDate().toISOString(),\r\n Records: ITEMS_PER_PAGE,\r\n SortDescending: sorting === 'DESC',\r\n Language: getLanguageAtsId,\r\n };\r\n setIsLoadingData(true);\r\n api\r\n .getContactlessTransactionHistory(payload)\r\n .then((response) => {\r\n setIsLoadingData(false);\r\n if (response.data) {\r\n setContactlessTransItems(response.data);\r\n postAPIfunctions(response.data);\r\n }\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n setIsLoadingData(false);\r\n });\r\n };\r\n const setTransitPassLogos = () => {\r\n api\r\n .getTransitAgencyLogos()\r\n .then(({ data }) => {\r\n dispatch(setTransitAgencyLogos(data));\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n });\r\n };\r\n const verifyCardAPI = () => {\r\n setIsLoadingData(true);\r\n setVerifyError('');\r\n let payload = {\r\n SalesOrderUid: paymentsToVerify[0]?.Uuid,\r\n MediaInstanceId: paymentsToVerify[0]?.MediaInstanceId,\r\n MediaType: paymentsToVerify[0]?.MediaType,\r\n MediaSubType: paymentsToVerify[0]?.MediaSubType,\r\n };\r\n api\r\n .processContactlessUnpaidFare(payload)\r\n .then((response) => {\r\n //console.log(response);\r\n setIsLoadingData(false);\r\n if (response.status === 200 && response?.data?.Success) {\r\n setShowVerifySuccess(true);\r\n } else {\r\n setVerifyError(props.fields?.verifyCardErrorCVRCTAStep0301?.value);\r\n }\r\n })\r\n .catch((error) => {\r\n //console.log(error);\r\n setIsLoadingData(false);\r\n setVerifyError(props.fields?.verifyCardErrorCVRCTAStep0301?.value);\r\n });\r\n };\r\n const showVerifyCardMessage = () => {\r\n let title = props.fields.verifyCardAlertTitle;\r\n if (showVerifySuccess)\r\n return (\r\n \r\n
\r\n );\r\n if (verifyError) {\r\n return (\r\n \r\n
\r\n \r\n {props.fields.verifyCardSuccessTitle.value}\r\n
\r\n \r\n {props.fields.verifyCardSuccessText.value}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n if (isInteracVerifyCardFlowVisible)\r\n return (\r\n \r\n
\r\n \r\n {props.fields.verifyCardErrorTitle.value}\r\n
\r\n \r\n
\r\n {verifyError}
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n\r\n if (!isInteracVerifyCardFlowVisible)\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {props.fields?.verifyCardInteracTitle?.value}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n const showBlockCardMessage = () => {\r\n let title = props.fields.blockedCardErrorText;\r\n return (\r\n \r\n
\r\n \r\n {title.value}\r\n
\r\n \r\n {/* 
\r\n
\r\n \r\n {MEDIA_SUB_TYPES[userInfoData?.CardType]}...{shortenPan}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n const manageCollapseHandler = (e) => {\r\n if (e.keyCode == 13) {\r\n setIsExpand(!isExpand);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (userInfoData?.MediaReferenceId != '' || userInfoData?.MediaKeyDetails != '') {\r\n //console.log(\"inside if confdition\");\r\n getContactlessTransactionHistoryData();\r\n getUnPaidFares();\r\n setTransitPassLogos();\r\n fetchPaymentsToVerify();\r\n } else {\r\n //console.log(\"else block\");\r\n transactionHistory.transactions.payments = [];\r\n }\r\n }, []);\r\n useEffect(() => {\r\n setTotalUnpaidFares(CalculateTotalUnpaidFares(unpaidFares?.transactions));\r\n }, [unpaidFares]);\r\n const { textMapping, transactions } = transactionHistory;\r\n return (\r\n \r\n
\r\n \r\n {title.value}\r\n
\r\n \r\n {showVerifyBlock ? showVerifyCardMessage() : null}\r\n {isCardBlocked ? showBlockCardMessage() : null}\r\n {transactions.payments &&\r\n !transactions.payments.length &&\r\n !isLoadingData &&\r\n !hasConnectionError ? (\r\n
,\r\n \r\n \r\n <Text field={props.fields.NoTransactionHistoryHeadline} />\r\n \r\n handleLogOut(dispatch)}\r\n buttonText={props.fields.SignOutText}\r\n buttonTextA11y={props?.fields?.SignOutText?.value}\r\n />\r\n
\r\n ) : (\r\n [\r\n \r\n
\r\n
,\r\n \r\n ${props?.fields?.transactionHistorySubText?.value}`,\r\n },\r\n }}\r\n />\r\n
\r\n \r\n {totalUnpaidFares && totalUnpaidFares > 0 ? (\r\n
,\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {props?.fields?.LearMoreText?.value}\r\n \r\n
\r\n \r\n {props?.fields?.unpaidFareTitle?.value}\r\n
\r\n \r\n {formatDecimalWithCurrency(convertToDollars(totalUnpaidFares))}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setIsExpand(!isExpand)}\r\n onKeyDown={manageCollapseHandler}\r\n aria-expanded={isExpand}\r\n aria-label={\r\n isExpand\r\n ? props.fields.collapseTransactionButtonA11y.value\r\n : props.fields.expandTransactionButtonA11y.value\r\n }\r\n role=\"button\"\r\n >\r\n {isExpand ? (\r\n <>\r\n \r\n \r\n
\r\n {props.fields.collapseLabel.value}
\r\n \r\n ) : (\r\n <>\r\n {props.fields.expandLabel.value}
\r\n \r\n )}\r\n \r\n {transactions?.payments?.map((payment) => {\r\n return (\r\n {\r\n redirectToUrl(`${routes.contactlessUnpaidFares}?id=${data.uuid}`);\r\n }}\r\n />\r\n );\r\n })}\r\n
,\r\n \r\n
\r\n ) : null}\r\n {isLoadingData ? \r\n
\r\n \r\n
\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default ContactlessUnpaidFareSuccess;\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport { Button, IconButton } from '../../atoms';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport Heading from '../Heading';\r\nimport { redirectToUrl } from '../../services/utils';\r\n\r\nfunction ContactlessUnpaidFareError({\r\n fields,\r\n backToHome,\r\n retryCurrentPaymant,\r\n isThresholdReached,\r\n getUnpaidFareContent,\r\n}) {\r\n const goToLink = () => {\r\n redirectToUrl(fields?.LearnMoreLink?.value?.href, false);\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n {isSingleUnpaidMode\r\n ? fields?.SuccessMessage?.value\r\n : fields?.MultipleSalesOrderMessage?.value}\r\n \r\n
\r\n {isSingleUnpaidMode ? null : (\r\n \r\n {fields?.MultipleSalesOrderBodyText?.value}\r\n
\r\n )}\r\n - \r\n
- \r\n {fields?.AmountTitleText?.value}\r\n\r\n {formatDecimalWithCurrency(convertToDollars(responseData?.Amount))}\r\n\r\n \r\n
- \r\n {fields?.PaymanetReceivedText?.value}\r\n{formatDate(responseData?.ReceivedDateTime)}\r\n \r\n
- \r\n {fields?.ConfirmationNumberTitle?.value}\r\n#{responseData?.ReferenceNumber}\r\n \r\n
\r\n \r\n {`${fields?.FooterText1?.value} ${t('unpaidFareCardIdentifier')}/${\r\n responseData?.ReferenceNumber\r\n }`}\r\n \r\n
\r\n \r\n {fields?.FooterText2?.value}\r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"-1\">\r\n Print\r\n \r\n
\r\n \r\n \r\n {!isSingleUnpaidMode && unpaidSaleOrders.length ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ContactlessUnpaidFareError;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Link, Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport api from '../../services/api';\r\nimport Debit from '../../assets/images/Debit.png';\r\nimport Heading from '../Heading';\r\nimport ParagraphContent from '../ParagraphContent';\r\nimport { Button, IconButton, Loader, MediaImage } from '../../atoms';\r\nimport './contactlessUnpaidFare.scss';\r\nimport {\r\n formatDate,\r\n formatDecimalWithCurrency,\r\n getQueryParams,\r\n redirectToUrl,\r\n} from '../../services/utils';\r\nimport { setMultiUnpaidFareProps, updateRetryCounter } from '../../redux/contactless/actions';\r\nimport Transaction from '../TransactionHistoryContactless/Transaction';\r\nimport MEDIA_SUB_TYPES from '../../constants/mediaSubTypes';\r\nimport ContactlessUnpaidFareSuccess from './contactlessUnpaidFareSuccess';\r\nimport ContactlessUnpaidFareError from './contactlessUnpaidFareError';\r\nimport arrowLeft from '../../assets/images/arrow-left.svg';\r\n\r\nconst RETRY_LIMIT = 3;\r\nconst ContactlessUnpaidFare = ({ fields, t }) => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const queryParams = getQueryParams(location.search);\r\n const [isLoadingData, setIsLoadingData] = useState(false);\r\n const [responseData, setResponseData] = useState({});\r\n const [showSuccess, setShowSuccess] = useState(false);\r\n const [showError, setShowError] = useState(false);\r\n const userInfoData = useSelector((state) => {\r\n if (state?.contactless?.userInfoData && state?.contactless?.userInfoData?.CardType) {\r\n return state.contactless.userInfoData;\r\n }\r\n });\r\n const shortenPan = userInfoData?.MaskedPan?.slice(userInfoData.MaskedPan.length - 4);\r\n const { transactions, textMapping } = useSelector(\r\n (reduxState) => reduxState.contactless.unpaidFares\r\n );\r\n const multipleUnpaidFareProps = useSelector(\r\n (reduxState) => reduxState.contactless.multipleUnpaidFareProps\r\n );\r\n const retryLimit = useSelector((reduxState) => reduxState.contactless.retryLimit);\r\n\r\n const backToHome = () => {\r\n redirectToUrl(fields?.BackToHomeLink?.value?.href, false);\r\n };\r\n\r\n const { currentSaleOrder, totalNoOfSaleOrder, unpaidSaleOrders, isSingleUnpaidMode } =\r\n useMemo(() => {\r\n let tempObj = {\r\n currentSaleOrder: null,\r\n totalNoOfSaleOrder: 0,\r\n unpaidSaleOrders: [],\r\n isSingleUnpaidMode: false,\r\n };\r\n // SINGLE UNPAID FARE MODE\r\n if (queryParams?.id) {\r\n let tempMultipleUnpaidFareProps = [...multipleUnpaidFareProps];\r\n let singleSaleOrder = tempMultipleUnpaidFareProps.find(\r\n (el) => el.id === queryParams.id && !el.isPaid\r\n );\r\n if (singleSaleOrder && singleSaleOrder.id) {\r\n tempObj.currentSaleOrder = transactions[0]?.payments.find(\r\n (el) => el.uuid === singleSaleOrder.id\r\n );\r\n tempObj.isSingleUnpaidMode = true;\r\n } else {\r\n //console.log('Single sale order Already Paid');\r\n backToHome();\r\n }\r\n } else {\r\n // MULTIPLE UNPAID FARE MODE\r\n let nextSaleOrder = multipleUnpaidFareProps.find((el) => !el.isPaid);\r\n if (multipleUnpaidFareProps.length > 1) {\r\n tempObj.totalNoOfSaleOrder = multipleUnpaidFareProps.length;\r\n tempObj.unpaidSaleOrders = multipleUnpaidFareProps.filter((el) => !el.isPaid);\r\n tempObj.isSingleUnpaidMode = false;\r\n } else {\r\n tempObj.isSingleUnpaidMode = true;\r\n }\r\n if (nextSaleOrder && nextSaleOrder.id) {\r\n tempObj.currentSaleOrder = transactions[0]?.payments.find(\r\n (el) => el.uuid === nextSaleOrder.id\r\n );\r\n } else {\r\n //console.log('All Sale Orders paid');\r\n backToHome();\r\n }\r\n }\r\n return tempObj;\r\n }, [multipleUnpaidFareProps]);\r\n\r\n const processNextUnpaidFare = () => {\r\n setShowSuccess(false);\r\n let tempMultipleUnpaidFareProps = [...multipleUnpaidFareProps];\r\n let currentSaleOrderIndex = tempMultipleUnpaidFareProps.findIndex(\r\n (el) => el.id === currentSaleOrder.uuid\r\n );\r\n tempMultipleUnpaidFareProps[currentSaleOrderIndex].isPaid = true;\r\n dispatch(setMultiUnpaidFareProps(tempMultipleUnpaidFareProps));\r\n };\r\n const payUnpaidFare = () => {\r\n setIsLoadingData(true);\r\n let payload = {\r\n SalesOrderUid: currentSaleOrder?.uuid,\r\n // MediaInstanceId: userInfoData?.MediaKeyDetails?.map((el) => el.mediaInstanceId).join('|'),\r\n MediaInstanceId: transactions[0]?.media?.mediaInfo?.mediaInstanceId,\r\n MediaType: currentSaleOrder?.mediaType,\r\n MediaSubType: currentSaleOrder?.mediaSubType,\r\n };\r\n api\r\n .processContactlessUnpaidFare(payload)\r\n .then((response) => {\r\n //console.log(response);\r\n setIsLoadingData(false);\r\n if (response.status === 200 && response?.data?.Success) {\r\n setResponseData(response?.data);\r\n setShowSuccess(true);\r\n } else {\r\n dispatch(updateRetryCounter(retryLimit + 1));\r\n setShowError(true);\r\n }\r\n })\r\n .catch((error) => {\r\n //console.log(error);\r\n setIsLoadingData(false);\r\n setResponseData({});\r\n dispatch(updateRetryCounter(retryLimit + 1));\r\n setShowError(true);\r\n });\r\n };\r\n const retryCurrentPaymant = () => {\r\n setShowError(false);\r\n payUnpaidFare();\r\n };\r\n //console.log(fields, currentSaleOrder);\r\n\r\n const totalAmount = currentSaleOrder\r\n ? currentSaleOrder?.lines?.reduce((acc, val) => acc + val.amount, 0)\r\n : 0;\r\n const getUnpaidFareContent = () => (\r\n \r\n null}\r\n onClick={goToLink}\r\n >\r\n {fields?.LearrnMoreLinkText?.value}\r\n \r\n
\r\n {getUnpaidFareContent()}\r\n \r\n {fields?.FailureMessage?.value}\r\n
\r\n \r\n \r\n {isThresholdReached\r\n ? fields?.SigninDeclineErrorMessage?.value\r\n : fields?.RetryBodyText?.value}\r\n \r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"-1\">\r\n Print\r\n \r\n
\r\n \r\n \r\n {!isThresholdReached ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n );\r\n if (showSuccess) {\r\n return (\r\n \r\n
\r\n {formatDate(currentSaleOrder.createdTime)}
\r\n \r\n \r\n {fields['Total Text']?.value} {formatDecimalWithCurrency(parseFloat(totalAmount / 100))}\r\n \r\n
\r\n \r\n
\r\n \r\n {currentSaleOrder?.lines?.map((item) => (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ContactlessUnpaidFare);\r\n","import React, { useEffect } from 'react';\r\n\r\nimport api from '../../services/api';\r\nimport { localstorageService } from '../../services/utils';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\n\r\nconst ReCaptchaFormField = () => {\r\n function AppendReCaptchaJavaScript() {\r\n const script = document.createElement('script');\r\n script.src = `https://www.google.com/recaptcha/api.js?render=${localstorageService().getItem(\r\n localStorageKeys.reCaptchaKey\r\n )}`;\r\n document.body.appendChild(script);\r\n }\r\n\r\n useEffect(() => {\r\n if (!localstorageService() || !localstorageService().getItem(localStorageKeys.reCaptchaKey)) {\r\n api.getSetting({ settingName: 'GoogleRecaptchaV3.SiteKey' }).then((res) => {\r\n if (res.status === 200) {\r\n localstorageService().setItem(localStorageKeys.reCaptchaKey, res.data);\r\n AppendReCaptchaJavaScript();\r\n }\r\n });\r\n } else {\r\n AppendReCaptchaJavaScript();\r\n }\r\n }, []);\r\n\r\n return ;\r\n};\r\n\r\nexport default ReCaptchaFormField;\r\n","import React, { useRef, useEffect, useState } from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Select, CardBlock, TextInput, TextArea } from '../../molecules';\r\nimport { Formik } from 'formik';\r\nimport { Checkbox, Button, Loader } from '../../atoms';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport api from '../../services/api';\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport { useSelector } from 'react-redux';\r\nimport useDetectOutsideClick from '../../hooks/useDetectOutsideClick';\r\nimport ReCaptchaFormField from '../shared/ReCaptchaFormField';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport {\r\n localstorageService,\r\n updateRecaptchaToken,\r\n} from '../../services/utils';\r\nimport './contactUsForm.scss';\r\n\r\nconst ContactUsForm = ({ fields, t }) => {\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const [captchaDisable, setCaptchaDisable] = useState(true);\r\n const user = useSelector((reduxState) => reduxState.user);\r\n const [isRevertBack, setRevertBack] = useState(false);\r\n const [apiStatus, setApiStatus] = useState({ submit: false, state: 'INITIAL' });\r\n const [loading, setLoading] = useState(false);\r\n const cardDropdownRef = useRef(null);\r\n const [isArrowIconClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, false);\r\n const onClickSelect = () => openDropdown(!isArrowIconClicked);\r\n const iconText = isArrowIconClicked ? t('expandA11y') : t('collapseA11y');\r\n const { datasource, contextItem } = fields && fields.data ? fields.data : {};\r\n let subjectOptions = [];\r\n const id = t('CreateFeedbackForm');\r\n let custId = user?.customerId;\r\n const comments = datasource.Comments.jss.value.split('{0}');\r\n const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,25}$/;\r\n\r\n\r\n datasource.children.map((data) => {\r\n let obj = { label: data.Key.jss.value, value: data.Value.jss.value };\r\n subjectOptions.push(obj);\r\n });\r\n const [recaptchaToken, setRecaptchaToken] = useState('');\r\n const handleRecaptchaChange = (token) => {\r\n setRecaptchaToken(token);\r\n };\r\n\r\n useEffect(() => {\r\n const reCaptchaDisable = configKeys\r\n .filter((item) => item.key === 'GoogleRecaptchaV3.Disable')\r\n .map((config) => config.setting);\r\n if (reCaptchaDisable.toString() === 'true') {\r\n setCaptchaDisable(true);\r\n } else {\r\n setCaptchaDisable(false);\r\n }\r\n }, [configKeys]);\r\n\r\n const apiContactUs = (values) => {\r\n const payload = {\r\n FirstName: values.FirstName,\r\n LastName: values.LastName,\r\n Email: values.EmailAddress,\r\n Subject: values.subjectDropdown,\r\n Comments: values.CommentsQuestions,\r\n CustomerId: custId,\r\n IsRevertback: isRevertBack,\r\n FormId: id,\r\n GoogleToken: values.googleToken,\r\n };\r\n //console.log(\"recaptchaToken: \" + values.googleToken);\r\n api\r\n .getContactUsFormFeedback(payload)\r\n .then((response) => {\r\n if (response?.data?.Success) {\r\n setApiStatus({ submit: true });\r\n }\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n });\r\n };\r\n return (\r\n \r\n
\r\n \r\n
\r\n {isLoadingData ? \r\n ${fields['Multiple Fares Description']?.value\r\n .replace('{CurrentSalesOrderCount}', unpaidSaleOrders.length)\r\n .replace('{SalesOrderCount}', totalNoOfSaleOrder)}`,\r\n },\r\n }}\r\n />\r\n ) : null}\r\n
\r\n {getUnpaidFareContent()}\r\n \r\n
\r\n \r\n
\r\n \r\n {fields['Card Title'].value}\r\n
\r\n \r\n {/*
\r\n \r\n {MEDIA_SUB_TYPES[userInfoData.CardType]}...{shortenPan}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {isArrowIconClicked && (\r\n
\r\n );\r\n};\r\nexport default withTranslation()(ContactUsForm);","import React, { useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './googleWallet.scss';\r\nimport './contentBlock.scss';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\n\r\n/**\r\n * A simple Content Block component, with a heading and rich text block.\r\n * This is the most basic building block of a content site, and the most basic\r\n * JSS component that's useful.\r\n */\r\nconst getHeading = (tag) => {\r\n // console.log('tag', tag);\r\n if (tag === 'h2') {\r\n return 'h2';\r\n }\r\n if (tag === 'h3') {\r\n return 'h3';\r\n }\r\n return 'h1';\r\n};\r\n\r\nconst ContentBlock = (props) => {\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [props]);\r\n if (!isLoaded) return null;\r\n return (\r\n \r\n
\r\n {!apiStatus.submit ? (\r\n \r\n {\r\n const errors = {};\r\n if (!values.FirstName || values.FirstName.length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.FirstName)) {\r\n errors.FirstName = datasource.FirstNameError.jss.value;\r\n }\r\n if (!values.LastName || values.LastName.length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.LastName)) {\r\n errors.LastName = datasource.LastNameError.jss.value;\r\n }\r\n if (!values.EmailAddress) {\r\n //EmailAddressErrorMessage\r\n errors.EmailAddress = datasource.EmailAddressErrorMessage.jss.value;\r\n } else if (\r\n !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.EmailAddress)\r\n ) {\r\n errors.EmailAddress = t('updateEmailCheck');\r\n }\r\n if (!values.CommentsQuestions) {\r\n errors.CommentsQuestions = datasource.CommentsErrorMessage.jss.value;\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n if (captchaDisable) {\r\n apiContactUs(values);\r\n } else {\r\n updateRecaptchaToken(values, configKeys, (updatedValues) => apiContactUs(updatedValues));\r\n }\r\n\r\n }}\r\n >\r\n {({ errors, values, touched, handleChange, handleSubmit }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n \r\n ) : (\r\n {t('SuccessMessage')} \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ContentBlock);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Modal } from '../../molecules';\r\n\r\nimport './skipContentLink.scss';\r\n\r\nconst SkipContentLink = ({ linkToId = '', linkText = '' }) => {\r\n const [showModal, setShowModal] = useState(false);\r\n\r\n const link = (\r\n \r\n {linkText}\r\n \r\n );\r\n\r\n const skipContentClickHandler = (e) => {\r\n if (e.keyCode == 13 || e.keyCode == 32) {\r\n window.location.hash = '#' + linkToId;\r\n }\r\n };\r\n\r\n const skipContentFocusHandler = (e) => {\r\n window.location.hash = '';\r\n setShowModal(true);\r\n };\r\n\r\n const skipClickHandler = () => {\r\n window.location.hash = '#' + linkToId;\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {linkText}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default SkipContentLink;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { SkipContentLink } from '../../organisms';\r\nimport './contentPageLayout.scss';\r\nimport './contactlessDashboard.scss';\r\nimport './prestoSideNav.scss';\r\nimport './prestoContentPageLayout.scss';\r\nimport { scrollToView } from '../../services/utils';\r\nimport { setDeactivateCardType } from '../../redux/user/actions';\r\n\r\nconst sideBarId = 'sidebar';\r\n\r\nconst ContentPageLayout = ({ rendering, t }) => {\r\n const pageRef = useRef();\r\n const dispatch = useDispatch();\r\n const [showcontent, setShowContent] = useState(false);\r\n const [cso, setCso] = useState(false);\r\n const [isDeleteRequestpage, setIsDeleterequestpage] = useState(false);\r\n const [shouldRender, setShouldRender] = useState(false);\r\n\r\n const [isSmartBannerPresent, setIsSmartBannerPresent] = useState(false);\r\n const [isSkipTranslateHidden, setIsSkipTranslateHidden] = useState(false);\r\n const [ContentPage, setIsContentPage] = useState(\"\");\r\n\r\n const handleDOMChanges = () => {\r\n const skipTranslateElement = document.querySelector('.skiptranslate');\r\n const smartBanner = document.querySelector('html.smartbanner-show');\r\n\r\n setIsSmartBannerPresent(!!smartBanner); // Set state based on smartBanner presence\r\n setIsSkipTranslateHidden(skipTranslateElement && getComputedStyle(skipTranslateElement).getPropertyValue('display') === 'none');\r\n const targetElement = document.querySelector('.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate');\r\n if (targetElement && !isSkipTranslateHidden) {\r\n if (!smartBanner) {\r\n targetElement.style.top = '0px';\r\n }\r\n else {\r\n targetElement.style.top = '80px';\r\n }\r\n }\r\n\r\n let contentPageLayoutclass = '';\r\n if (window.location.href.toLowerCase().includes(\"about/contactless\")) {\r\n\r\n if (smartBanner && targetElement && !isSkipTranslateHidden) {\r\n contentPageLayoutclass = 'contentPageLayout-header-banner';\r\n } else if (document.querySelector('html.smartbanner-show')) {\r\n contentPageLayoutclass = 'contentPageLayout-header-banner';\r\n } else if (targetElement && !isSkipTranslateHidden) {\r\n contentPageLayoutclass = 'contentPageLayout-header-contactless';\r\n } else {\r\n contentPageLayoutclass = 'contentPageLayout-header';\r\n }\r\n }\r\n else if (smartBanner) {\r\n contentPageLayoutclass = 'contentPageLayout-header-padding';\r\n } else {\r\n contentPageLayoutclass = 'contentPageLayout-header';\r\n }\r\n setIsContentPage(contentPageLayoutclass);\r\n\r\n if (window.location.href.toLowerCase().includes(\"support/faqs/using-presto\")) {\r\n const notificationBanner = document.querySelector(\".NotificationBanner-wrapper\");\r\n if (notificationBanner) {\r\n notificationBanner.style.paddingTop = \"56px\";\r\n }\r\n }\r\n\r\n\r\n };\r\n\r\n\r\n\r\n useEffect(() => {\r\n // Call the handleDOMChanges function initially\r\n handleDOMChanges();\r\n\r\n // Set up a recurring check using setInterval\r\n const interval = setInterval(() => {\r\n handleDOMChanges();\r\n }, 500); // Check every 1 second\r\n\r\n // Clean up the interval when the component unmounts\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []); // Empty dependency array to run only once on component mount\r\n\r\n\r\n useEffect(() => {\r\n if (Object.keys(rendering.params).length) {\r\n if (rendering?.params?.isCso === \"true\") {\r\n setCso(true);\r\n setShouldRender(false);\r\n }\r\n if (rendering?.params?.isDeleteReqestPage === \"true\") {\r\n setIsDeleterequestpage(true)\r\n }\r\n }\r\n else {\r\n setShouldRender(true);\r\n }\r\n }, [rendering.params]);\r\n\r\n useEffect(() => {\r\n dispatch(setDeactivateCardType(''));\r\n let stateCheck = setInterval(() => {\r\n if (document.readyState === 'complete') {\r\n clearInterval(stateCheck);\r\n setShowContent(true);\r\n }\r\n }, 100);\r\n }, []);\r\n\r\n // useEffect(() => {\r\n // pageRef.current.focus();\r\n // let lastScrollPos = localStorage.getItem('scrollpos');\r\n // if (lastScrollPos && typeof window !== 'undefined') {\r\n // window.scroll(0, lastScrollPos);\r\n // }\r\n // }, []);\r\n if (typeof window !== 'undefined') {\r\n window.onbeforeunload = function (e) {\r\n localStorage.setItem('scrollpos', window.scrollY);\r\n };\r\n }\r\n // useEffect(() => {\r\n // let timer;\r\n // if (window?.location?.hash) {\r\n // timer = setTimeout(scrollToView, 500);\r\n // }\r\n // return () => {\r\n // clearTimeout(timer);\r\n // };\r\n // }, []);\r\n\r\n return (\r\n // <>\r\n // \r\n //
\r\n // \r\n\r\n <>\r\n \r\n //
\r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {cso &&\r\n \r\n
\r\n }\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(ContentPageLayout);\r\n","import React from 'react';\r\n\r\nimport { Text, Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport './copyright.scss';\r\n\r\nconst Copyright = (props) => (\r\n \r\n
\r\n);\r\n\r\nexport default Copyright;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { RichText, Text, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Header, StepTracker, CardBlock, TextInput, Note, Error } from '../../molecules';\r\nimport { Formik } from 'formik';\r\nimport routes from '../../constants/routes';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport { Button, InlineError } from '../../atoms';\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport * as Yup from 'yup';\r\nimport api from '../../services/api';\r\nimport './B2CAccountCreation.scss';\r\n\r\nconst B2CCreateAccount = (props) => {\r\n const [step, setStep] = useState(0);\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n // focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n };\r\n const [errorMsg, setErrorMsg] = useState(false);\r\n let customerType;\r\n let partialObj;\r\n\r\n const liveCheck = (data) => {\r\n api\r\n .B2CAccountCreation({\r\n userEmail: data.emailAddress,\r\n })\r\n .then((response) => {\r\n let apiResponse = JSON.parse(response.data.CustomerType);\r\n partialObj = apiResponse.value[0] !== null ? apiResponse.value[0] : '';\r\n if (partialObj === undefined) {\r\n redirectToUrl(\r\n `${routes.b2cRegisterAccount}?email=${encodeURIComponent(data.emailAddress)}`\r\n );\r\n } else {\r\n customerType = apiResponse.value.length > 0 ? Object.values(partialObj) : '';\r\n if (customerType[0].toLowerCase() === 'partner') {\r\n redirectToUrl(\r\n `${routes.b2cAccountExists}?email=${encodeURIComponent(data.emailAddress)}`\r\n );\r\n }\r\n if (\r\n customerType[0].toLowerCase() === 'customer' ||\r\n customerType[0].toLowerCase() === 'both'\r\n ) {\r\n //redirectToUrl(routes.b2cRegisteredSignIn);\r\n setErrorMsg(true);\r\n }\r\n }\r\n })\r\n .catch((err) => { });\r\n };\r\n return (\r\n \r\n \r\n \r\n {\r\n setErrorMsg(false);\r\n const errors = {};\r\n if (!values.emailAddress) {\r\n errors.emailAddress = props.fields.EmailAddressError.value;\r\n } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.emailAddress)) {\r\n errors.emailAddress = props.fields.InvalidEmailAddress.value;\r\n }\r\n if (!values.confirmEmailAddress) {\r\n errors.confirmEmailAddress = props.fields.ConfirmEmailAddressError.value;\r\n } else if (values.emailAddress !== values.confirmEmailAddress) {\r\n errors.confirmEmailAddress = props.fields.EmailNotMatching.value;\r\n }\r\n return errors;\r\n }}\r\n validationSchema={Yup.object().shape({\r\n [sharedFormConstants.terms]: Yup.boolean().oneOf(\r\n [true],\r\n props.fields.TermsandConditonsError.value\r\n ),\r\n })}\r\n onSubmit={(values) => {\r\n //console.log(values);\r\n liveCheck(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleSubmit, handleChange }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n {/*
\r\n );\r\n};\r\n\r\nexport default B2CCreateAccount;\r\n","import React, { useRef } from 'react';\r\n\r\nimport './CSOLocator.scss';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\nimport { is } from '../../services/utils';\r\n\r\nexport default function Accordion({\r\n props,\r\n getDirections,\r\n CSOLocatorLookUpData,\r\n newVisibleMarkers,\r\n handleAccordionClick,\r\n checkIsExist,\r\n gotToStore,\r\n t,\r\n}) {\r\n const accordionContainerRef = useRef(null);\r\n const isMobile = useMediaWidth();\r\n const finalStationData = newVisibleMarkers?.map((station) => {\r\n const CustomerServiceOutlet = station?.properties?.customerServiceOutlet\r\n ?.split('|')\r\n .map((csoId) => {\r\n const serviceOutletName = CSOLocatorLookUpData?.CsoLocators?.find(\r\n (cso) => cso.Id === csoId\r\n );\r\n return serviceOutletName ? serviceOutletName.ServiceOutletName : '';\r\n })\r\n .filter((serviceOutletName) => serviceOutletName !== '')\r\n .join(', ');\r\n const AvailableServices = station?.properties?.availableServices\r\n ?.split('|')\r\n .map((serviceId) => {\r\n const serviceName = CSOLocatorLookUpData?.AvailableServices?.find(\r\n (cso) => cso.Id === serviceId\r\n );\r\n return serviceName ? serviceName.ServiceName : '';\r\n })\r\n .filter((serviceName) => serviceName !== '')\r\n .join(', ');\r\n const TypeofFacility = station?.properties?.typeofFacility\r\n ?.split('|')\r\n .map((facilityId) => {\r\n const facilityName = CSOLocatorLookUpData?.TypeofFacilities?.find(\r\n (cso) => cso.Id === facilityId\r\n );\r\n return facilityName ? facilityName.FacilityName : '';\r\n })\r\n .filter((facilityName) => facilityName !== '')\r\n .join(', ');\r\n const distanceVal = station?.properties?.distance === null ? '' : station?.properties?.distance;\r\n const kMValue = props?.fields?.StoreDistanceText?.value;\r\n const finalKmValue = kMValue?.replace('{0}', distanceVal);\r\n const street = station?.properties?.street ? ` ${station?.properties?.street}` : '';\r\n const city = station?.properties?.city ? `, ${station?.properties?.city}` : '';\r\n const province = station?.properties?.province ? `, ${station.properties.province}` : '';\r\n const postalCode = station?.properties?.postalCode\r\n ? `, ${station?.properties?.postalCode}`\r\n : '';\r\n return {\r\n ...station,\r\n storeUniqueId: station?.properties?.id,\r\n icon: station?.properties?.icon?.url,\r\n distance: finalKmValue,\r\n storeNumber: station?.properties?.number,\r\n street,\r\n storeName: station?.properties?.storeName,\r\n address: station?.properties?.address,\r\n storePage: station?.properties?.storePage,\r\n city,\r\n cityExpanded: station?.properties?.city,\r\n province,\r\n postalCode,\r\n CustomerServiceOutlet,\r\n AvailableServices,\r\n TypeofFacility,\r\n };\r\n });\r\n\r\n return (\r\n finalStationData &&\r\n finalStationData.map((item) => {\r\n let locationID = item?.properties?.locationID;\r\n const isExpanded = checkIsExist(locationID);\r\n return (\r\n \r\n
\r\n\r\n \r\n
*/}\r\n \r\n \r\n handleAccordionClick(locationID)}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter') handleAccordionClick(locationID);\r\n }}\r\n aria-controls={`cso-result-acc-${locationID}`}\r\n tabIndex={0}\r\n >\r\n \r\n
\r\n \r\n {isExpanded && (\r\n \r\n {/*
\r\n \r\n \r\n
*/}\r\n \r\n
\r\n {item?.storeName}
\r\n\r\n {is(props?.fields?.AddressLabelA11y.value) ? (\r\n
\r\n \r\n {is(props?.fields?.GetDirectionsLabel?.value) ? (\r\n
\r\n )}\r\n \r\n );\r\n })\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport './CSOLocator.scss';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport downIcon from '../../assets/images/down.svg';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\nimport { is } from '../../services/utils';\r\n\r\nexport default function FilterStations({\r\n props,\r\n selectedFilters,\r\n setSelectedFilters,\r\n CSOLocatorLookUpData,\r\n handleFilterChange,\r\n csoFilterCounter,\r\n asFilterCounter,\r\n tfFilterCounter,\r\n setTfFilterCounter,\r\n setAsFilterCounter,\r\n setCsoFilterCounter,\r\n newVisibleMarkers,\r\n setCsoFilter,\r\n setAvailableFilter,\r\n setFacilityFilter,\r\n isMapLoaded,\r\n}) {\r\n const [expandedFilterIndex, setExpandedFilterIndex] = useState(-1);\r\n const [onSkipMap, setOnSkipMap] = useState(false);\r\n const isMobile = useMediaWidth();\r\n\r\n const handleCounter = () => {\r\n setSelectedFilters([]);\r\n setTfFilterCounter(0);\r\n setAsFilterCounter(0);\r\n setCsoFilterCounter(0);\r\n setCsoFilter([]);\r\n setAvailableFilter([]);\r\n setFacilityFilter([]);\r\n };\r\n const filterData = [\r\n {\r\n label: props?.fields?.CustomerServiceOutLetLabel?.value,\r\n counter: 0,\r\n options: CSOLocatorLookUpData?.CsoLocators?.map(({ Id, ServiceOutletName }) => ({\r\n id: Id,\r\n name: ServiceOutletName,\r\n filterType: 'csoLocators',\r\n })),\r\n },\r\n {\r\n label: props?.fields?.TypeofFacilityLabel?.value,\r\n counter: 0,\r\n options: CSOLocatorLookUpData?.TypeofFacilities?.map(({ Id, FacilityName }) => ({\r\n id: Id,\r\n name: FacilityName,\r\n filterType: 'typeofFacilities',\r\n })),\r\n },\r\n {\r\n label: props?.fields?.AvailableServicesLabel?.value,\r\n counter: 0,\r\n options: CSOLocatorLookUpData?.AvailableServices?.map(({ Id, ServiceName }) => ({\r\n id: Id,\r\n name: ServiceName,\r\n filterType: 'availableServices',\r\n })),\r\n },\r\n ];\r\n const moveFocus = (id) => {\r\n let goFocus = document?.getElementById(id).focus();\r\n };\r\n const findAccessibleEleBeforeClearAll = () => {\r\n let openedTabPanel = document?.getElementsByClassName('tab-panel current');\r\n if (openedTabPanel.length) {\r\n let lastCheckbox = openedTabPanel[0].lastElementChild;\r\n if (lastCheckbox && lastCheckbox.firstElementChild) {\r\n return lastCheckbox.firstElementChild;\r\n }\r\n }\r\n let lastTab = document.querySelector('[aria-controls=\"tabpanel-0\"]');\r\n if (lastTab) return lastTab;\r\n };\r\n const modifyAccessibility = (event, { before = false, on = false, after = false }) => {\r\n let flag = false;\r\n let isSkipMapEmpty = !is(props?.fields?.SkipMap?.value);\r\n let isClearAllEmpty = !is(props?.fields?.ClearSearchFilter?.value);\r\n if (!isMobile) {\r\n // only for desktop\r\n if (before) {\r\n if (!event.shiftKey && event.key === 'Tab') {\r\n // Tab press on last checkbox of opened tab\r\n flag = true;\r\n if (!isClearAllEmpty) {\r\n moveFocus('clear-all-btn-id');\r\n } else if (!isSkipMapEmpty) {\r\n moveFocus('skip-map-btn-id');\r\n }\r\n }\r\n } else if (on) {\r\n if (event.shiftKey && event.keyCode == 9) {\r\n // Shift + Tab on clear all filter\r\n flag = true;\r\n let el = findAccessibleEleBeforeClearAll();\r\n if (el) el.focus();\r\n } else if (event.key === 'Tab' && !isSkipMapEmpty) {\r\n // Tab press on clear all filter\r\n flag = true;\r\n moveFocus('skip-map-btn-id');\r\n }\r\n } else if (after) {\r\n // shift + tab on first map accessible element\r\n flag = true;\r\n if (!isSkipMapEmpty) {\r\n moveFocus('skip-map-btn-id');\r\n } else if (!isClearAllEmpty) {\r\n moveFocus('clear-all-btn-id');\r\n }\r\n }\r\n }\r\n\r\n if (flag) {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n }\r\n };\r\n useEffect(() => {\r\n if (isMapLoaded && document && !isMobile) {\r\n // Assign keydown event for google map's first accessible element\r\n let firstAccMapElement = document?.querySelector('[aria-label=\"Keyboard shortcuts\"]');\r\n let keyShortDivs = document?.querySelectorAll('[aria-label=\"Keyboard shortcuts\"]');\r\n if (keyShortDivs && keyShortDivs.length) {\r\n for (let i = 0; i < keyShortDivs.length; ++i) {\r\n if (keyShortDivs[i].innerText === '') {\r\n keyShortDivs[i].innerText = keyShortDivs[i].title;\r\n keyShortDivs[i].style.color = 'transparent';\r\n }\r\n }\r\n }\r\n if (firstAccMapElement) {\r\n firstAccMapElement.addEventListener('keydown', (event) => {\r\n if (event.isComposing || event.keyCode === 229) {\r\n return null;\r\n }\r\n if (event.shiftKey && event.keyCode == 9) {\r\n // Shift + Tab on first Map icon\r\n modifyAccessibility(event, { after: true });\r\n }\r\n });\r\n }\r\n }\r\n }, [isMapLoaded]);\r\n\r\n const selectTab = (index) => {\r\n setExpandedFilterIndex(index === expandedFilterIndex ? -1 : index);\r\n };\r\n const goBack = (index) => {\r\n let nextIndex = index;\r\n if (index === 0) {\r\n nextIndex = filterData?.length - 1;\r\n } else {\r\n nextIndex = index - 1;\r\n }\r\n moveFocus(`tab-${nextIndex}`);\r\n };\r\n const goNext = (index) => {\r\n let nextIndex = index;\r\n if (index === filterData?.length - 1) {\r\n nextIndex = 0;\r\n } else {\r\n nextIndex = index + 1;\r\n }\r\n moveFocus(`tab-${nextIndex}`);\r\n };\r\n const onKeyDownTab = (event, index) => {\r\n let flag = false;\r\n\r\n switch (true) {\r\n case event.key === 'ArrowLeft' && !isMobile:\r\n goBack(index);\r\n flag = true;\r\n break;\r\n\r\n case event.key === 'ArrowRight' && !isMobile:\r\n goNext(index);\r\n flag = true;\r\n break;\r\n case event.key === 'ArrowUp' && isMobile:\r\n goBack(index);\r\n flag = true;\r\n break;\r\n\r\n case event.key === 'ArrowDown' && isMobile:\r\n goNext(index);\r\n flag = true;\r\n break;\r\n\r\n case event.key === 'Home':\r\n moveFocus(0);\r\n flag = true;\r\n break;\r\n\r\n case event.key === 'End':\r\n moveFocus(filterData?.length - 1);\r\n flag = true;\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n\r\n if (flag) {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n let filterCounter = 0;\r\n const filterHeader = (filter, index) => {\r\n let isExpanded = expandedFilterIndex === index;\r\n if (index == 0 && csoFilterCounter > 0) {\r\n filter.counter = csoFilterCounter;\r\n }\r\n if (index == 2 && asFilterCounter > 0) {\r\n filter.counter = asFilterCounter;\r\n }\r\n if (index == 1 && tfFilterCounter > 0) {\r\n filter.counter = tfFilterCounter;\r\n }\r\n return is(filter?.label) ? (\r\n \r\n {is(props?.fields?.StoreDirectionsIcon?.value?.src) ? (\r\n getDirections(item)}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter') {\r\n getDirections(item);\r\n }\r\n }}\r\n tabIndex={0}\r\n title={t('opensNewWindowA11y')}\r\n rel=\"noopener noreferrer\"\r\n aria-label={props?.fields?.GetDirectionsLabel?.value}\r\n >\r\n {props?.fields?.GetDirectionsLabel?.value}\r\n \r\n
\r\n ) : null}\r\n - \r\n {is(props?.fields?.LocationLabel.value) ? (\r\n
- \r\n \r\n\r\n
\r\n {item?.storeName}\r\n \r\n ) : null}\r\n {/* {isMobile ? (\r\n - \r\n \r\n\r\n
\r\n {agencyName?.ServiceOutletName}\r\n \r\n ) : null} */}\r\n {is(props?.fields?.StationPageLabel.value) ? (\r\n - \r\n \r\n\r\n {/*
\r\n \r\n {item?.storePage}\r\n*/}\r\n\r\n {item?.storePage.startsWith('https://') ? (\r\n\r\n \r\n ) : null}\r\n {is(props?.fields?.AddressLabel.value) ? (\r\n - \r\n \r\n\r\n
\r\n {item?.address}\r\n \r\n ) : null}\r\n {is(props?.fields?.CityLabel.value) ? (\r\n - \r\n \r\n\r\n
\r\n {item?.cityExpanded}\r\n \r\n ) : null}\r\n {is(props?.fields?.CustomerServiceOutLetLabel.value) ? (\r\n - \r\n \r\n\r\n
\r\n {item?.CustomerServiceOutlet}\r\n \r\n ) : null}\r\n {is(props?.fields?.TypeofFacilityLabel.value) ? (\r\n - \r\n \r\n\r\n
\r\n {item?.TypeofFacility}\r\n \r\n ) : null}\r\n {is(props?.fields?.AvailableServicesLabel.value) ? (\r\n - \r\n \r\n\r\n
\r\n {item?.AvailableServices}\r\n \r\n ) : null}\r\n
\r\n \r\n isMobile\r\n ? null\r\n : modifyAccessibility(event, { before: filter?.options?.length - 1 === indexJ })\r\n }\r\n />\r\n \r\n
\r\n ) : null\r\n );\r\n return (\r\n \r\n handleCounter()}\r\n onKeyDown={(event) => (isMobile ? null : modifyAccessibility(event, { on: true }))}\r\n tabIndex={expandedFilterIndex < 0 || isMobile ? `0` : `-1`}\r\n >\r\n \r\n {isEmpty ? '' :
\r\n );\r\n };\r\n return (\r\n \r\n \r\n {[...filterData?.map((filter, index) => filterHeader(filter, index)), clearFilter()]}\r\n
\r\n {filterData?.map((filter, index) => filterContent(filter, index))}\r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport StationDetails from './StationDetails';\r\nimport './CSOLocator.scss';\r\nimport FilterStations from './FilterStations';\r\nimport api from '../../services/api';\r\nimport { getServerUrl, redirectToUrl, localstorageService } from '../../services/utils';\r\nimport { Loader } from '../../atoms';\r\nimport routes from '../../constants/routes';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\n\r\nconst ZOOM_THRESHOLD = 3;\r\n\r\nconst CSOLocator = (props) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const defaultLat = parseFloat(props?.fields?.DefaultLatitude?.value);\r\n const defaultLng = parseFloat(props?.fields?.DefaultLongitude?.value);\r\n const [map, setMap] = useState(null);\r\n const destinationRef = useRef(null);\r\n const [mapInit, setMapInit] = useState(false);\r\n const [currentLocation, setCurrentLocation] = useState({ lat: defaultLat, lng: defaultLng });\r\n const [inputValue, setInputValue] = useState('');\r\n const [showLocation, setShowLocation] = useState('');\r\n const [CSOLocatorLookUpData, setCSOLocatorLookUpData] = useState();\r\n const [stationData, setStationData] = useState([]);\r\n const [selectedFilters, setSelectedFilters] = useState([]);\r\n const [newVisibleMarkers, setNewVisibleMarkers] = useState([]);\r\n const [storeIndex, setStoreIndex] = useState();\r\n const [markerClicked, setMarkerClicked] = useState(false);\r\n const [expandedItems, setExpandedItems] = useState([]);\r\n const [visibleMarkersWithDistance, setVisibleMarkersWithDistance] = useState([]);\r\n const [visibleMarkersWithFilter, setVisibleMarkersWithFilter] = useState([]);\r\n const [getJsonObject, setGeoJsonObject] = useState();\r\n const [markerLayer, setMarkerLayer] = useState(null);\r\n const [blobData, setBlobData] = useState();\r\n const [visibleMarkerBaseData, setVisibleMarkerBaseData] = useState([]);\r\n const domain = getServerUrl();\r\n const countValue = props?.fields?.SearchResultCountLabel?.value;\r\n const [visibleMarkersCount, setVisibleMarkersCount] = useState();\r\n const searchCountValue = countValue\r\n ?.replace('{0}', visibleMarkersCount)\r\n .replace('{1}', showLocation);\r\n const defaultMapIcon = props?.fields?.DefaultMapPinIcon?.value?.src;\r\n const defaultSelectedMapIcon = props?.fields?.DefaultSelectedMapPinIcon?.value?.src;\r\n const zoomLevel = parseInt(props?.fields?.ZoomLevel?.value);\r\n const searchZoomLevel = parseInt(props?.fields?.SearchZoomLevel?.value);\r\n const [currentZoomlevel, setCurrentZoomlevel] = useState(null);\r\n const [tryZoomOut, setTryZoomOut] = useState({ enable: false, count: 0 });\r\n const [iconUpdate, setIconUpdate] = useState(false);\r\n const isMobile = useMediaWidth();\r\n const [isLocationDisabled, setIsLocationDisabled] = useState(false);\r\n const [isLocationEnabled, setIsLocationEnabled] = useState(false);\r\n\r\n useEffect(() => {\r\n if (map && isLocationEnabled) {\r\n map.setCenter(new window.google.maps.LatLng(currentLocation.lat, currentLocation.lng));\r\n map.setZoom(searchZoomLevel);\r\n }\r\n }, [isLocationEnabled, currentLocation]);\r\n\r\n const changeUserLocation = () => {\r\n if (isLocationDisabled === true) return;\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(\r\n (position) => {\r\n setCurrentLocation({\r\n lat: position.coords.latitude,\r\n lng: position.coords.longitude,\r\n });\r\n setShowLocation('');\r\n setInputValue('');\r\n setIsLocationEnabled(true);\r\n },\r\n (error) => {\r\n console.log(error);\r\n setIsLocationDisabled(true);\r\n setIsLocationEnabled(false);\r\n }\r\n );\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n setIsLoading(true);\r\n api\r\n .getCSOLocatorLookUpData()\r\n .then((response) => {\r\n if (response.status === 200) {\r\n setCSOLocatorLookUpData(response?.data);\r\n } else {\r\n redirectToUrl(routes.technicalDifficulties);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch(() => {\r\n redirectToUrl(routes.technicalDifficulties);\r\n setIsLoading(false);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (CSOLocatorLookUpData?.GoogleMapKey) {\r\n getBlobData();\r\n }\r\n }, [CSOLocatorLookUpData]);\r\n\r\n const getBlobData = () => {\r\n if (CSOLocatorLookUpData) {\r\n const account = CSOLocatorLookUpData?.BlobAccountName;\r\n const blobName = CSOLocatorLookUpData?.BlobName;\r\n const containerName = CSOLocatorLookUpData?.BlobContainerName;\r\n\r\n const url = `https://${account}.blob.core.windows.net/${containerName}/${blobName}`;\r\n\r\n api\r\n .getAzureData(url)\r\n .then((response) => {\r\n setBlobData(response?.data);\r\n })\r\n .catch((error) => {\r\n console.log('Azure API response', error);\r\n });\r\n }\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n setInputValue(e.target.value);\r\n setTryZoomOut({ enable: false, count: 0 });\r\n };\r\n\r\n const handleClearClick = () => {\r\n setInputValue('');\r\n };\r\n\r\n const getSelectedIcon = (selectedIconUrl) => {\r\n return {\r\n url: selectedIconUrl,\r\n scaledSize: new window.google.maps.Size(32, 32),\r\n anchor: new window.google.maps.Point(25, 50),\r\n origin: new window.google.maps.Point(0, 0),\r\n clickable: true,\r\n };\r\n };\r\n\r\n const getIcon = (iconUrl) => {\r\n return {\r\n url: iconUrl,\r\n scaledSize: new window.google.maps.Size(32, 32),\r\n origin: new window.google.maps.Point(0, 0),\r\n anchor: new window.google.maps.Point(25, 50),\r\n clickable: true,\r\n };\r\n };\r\n\r\n const handleSearch = () => {\r\n setTryZoomOut({ count: 0, enable: true });\r\n if (destinationRef?.current?.value === '') {\r\n return;\r\n }\r\n setExpandedItems([]);\r\n const geocoder = new window.google.maps.Geocoder();\r\n const address = destinationRef?.current?.value;\r\n geocoder.geocode({ address }, (results, status) => {\r\n if (status === 'OK') {\r\n const location = results[0].geometry.location;\r\n const lat = location.lat();\r\n const lng = location.lng();\r\n setCurrentLocation({ lat, lng });\r\n setShowLocation(destinationRef?.current?.value);\r\n localstorageService().setItem('searchFlag', JSON.stringify(true));\r\n map.panTo(location);\r\n if (results[0].geometry?.viewport) {\r\n map.fitBounds(results[0].geometry.viewport);\r\n } else {\r\n map.setZoom(searchZoomLevel);\r\n }\r\n } else {\r\n console.error(`Geocode request failed due to ${status}`);\r\n }\r\n });\r\n };\r\n\r\n const getDirections = (item) => {\r\n const destination = `${item?.geometry?.coordinates[1]},${item?.geometry?.coordinates[0]}`;\r\n const url = `https://www.google.com/maps/dir//${destination}`;\r\n window.open(url, '_blank');\r\n };\r\n\r\n const gotToStore = (item) => {\r\n const goToStoreUrl = item?.storePage;\r\n window.open(goToStoreUrl, '_blank');\r\n };\r\n\r\n useEffect(() => {\r\n if (blobData != undefined) {\r\n LoadGoogleMap();\r\n }\r\n }, [blobData]);\r\n\r\n const LoadGoogleMap = () => {\r\n if (blobData?.Result?.StoreLocations?.length > 0 && CSOLocatorLookUpData?.GoogleMapKey) {\r\n if (typeof window !== 'undefined') {\r\n const googleMapsScript = document.createElement('script');\r\n googleMapsScript.src = `https://maps.googleapis.com/maps/api/js?key=${CSOLocatorLookUpData?.GoogleMapKey}&callback=initMapAndAutocomplete&libraries=geometry,places`;\r\n googleMapsScript.async = true;\r\n window.document.body.appendChild(googleMapsScript);\r\n }\r\n\r\n const geoJSON = {\r\n type: 'FeatureCollection',\r\n features: [],\r\n };\r\n const storeList = blobData?.Result?.StoreLocations;\r\n const coordinates = storeList?.filter((store) => store.Latitude && store.Longitude);\r\n const latLngSet = new Set();\r\n const uniqueStores = coordinates?.filter((store) => {\r\n const latLng = `${store.Latitude},${store.Longitude}`;\r\n if (latLngSet.has(latLng)) {\r\n return false;\r\n }\r\n latLngSet.add(latLng);\r\n return true;\r\n });\r\n const storeCoordinates = uniqueStores?.map((location) => ({\r\n type: 'Feature',\r\n geometry: {\r\n type: 'Point',\r\n coordinates: [parseFloat(location?.Longitude), parseFloat(location?.Latitude)],\r\n },\r\n properties: {\r\n id: location?.StoreUniqueId,\r\n icon: '',\r\n number: location?.StoreNumber,\r\n street: location?.Street,\r\n storeName: location?.StoreName,\r\n address: location?.Address,\r\n storePage: location?.StorePage,\r\n city: location?.City,\r\n province: location?.Province,\r\n postalCode: location?.PostalCode,\r\n customerServiceOutlet: location?.CustomerServiceOutlet,\r\n typeofFacility: location?.TypeofFacility,\r\n availableServices: location?.AvailableServices,\r\n locationID: location.LocationID,\r\n },\r\n }));\r\n\r\n geoJSON.features = [...storeCoordinates];\r\n const geojsonString = JSON.stringify(geoJSON);\r\n const geojsonObject = JSON.parse(geojsonString);\r\n setGeoJsonObject(geojsonObject);\r\n\r\n window.initMapAndAutocomplete = () => {\r\n initMap();\r\n };\r\n } else {\r\n redirectToUrl(routes.technicalDifficulties);\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const updateShowMarkers = () => {\r\n setIconUpdate(false);\r\n if (map) {\r\n if (selectedFilters.length == 0) {\r\n markerLayer.forEach(function (feature) {\r\n markerLayer.remove(feature);\r\n });\r\n\r\n const filterGeoJsonNew = {\r\n type: 'FeatureCollection',\r\n features: [],\r\n };\r\n const filteredMarkers = newVisibleMarkers.map((filterObject) => {\r\n return filterObject;\r\n });\r\n filterGeoJsonNew.features = [...filteredMarkers];\r\n\r\n setVisibleMarkersCount(filteredMarkers.length);\r\n markerLayer.addGeoJson(filterGeoJsonNew);\r\n let iconsSet = 0;\r\n const totalIcons = filterGeoJsonNew.features.length;\r\n markerLayer.setStyle(function (feature) {\r\n const csoId = feature.getProperty('customerServiceOutlet').split('|')[0];\r\n const iconData = CSOLocatorLookUpData.CsoLocators.find((icon) => csoId.includes(icon.Id));\r\n const iconUrl = iconData ? `${domain}${iconData.MapIcon}` : defaultMapIcon;\r\n const icon = getIcon(iconUrl);\r\n feature.setProperty('icon', icon);\r\n iconsSet++;\r\n if (iconsSet === totalIcons) {\r\n setIconUpdate(true);\r\n }\r\n return {\r\n icon,\r\n title: feature?.getProperty('storeName'),\r\n };\r\n });\r\n }\r\n }\r\n };\r\n\r\n const showFilteredPins = () => {\r\n setIconUpdate(false);\r\n if (selectedFilters.length > 0) {\r\n const filterGeoJSON = {\r\n type: 'FeatureCollection',\r\n features: [],\r\n };\r\n const filteredMarkers = newVisibleMarkers.map((filterObject) => {\r\n return filterObject;\r\n });\r\n filterGeoJSON.features = [...filteredMarkers];\r\n markerLayer.forEach(function (feature) {\r\n markerLayer.remove(feature);\r\n });\r\n\r\n setVisibleMarkersCount(filteredMarkers.length);\r\n markerLayer.addGeoJson(filterGeoJSON);\r\n\r\n let iconsSet = 0;\r\n const totalIcons = filterGeoJSON.features.length;\r\n markerLayer.setStyle(function (feature) {\r\n const csoId1 = feature.getProperty('customerServiceOutlet').split('|')[0];\r\n const iconData1 = CSOLocatorLookUpData?.CsoLocators.find((icon) =>\r\n csoId1.includes(icon.Id)\r\n );\r\n const iconUrl = iconData1 ? `${domain}${iconData1.MapIcon}` : defaultMapIcon;\r\n const icon = getIcon(iconUrl);\r\n feature.setProperty('icon', icon);\r\n iconsSet++;\r\n if (iconsSet === totalIcons) {\r\n setIconUpdate(true);\r\n }\r\n return {\r\n icon,\r\n title: feature?.getProperty('storeName'),\r\n };\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n showFilteredMarkers();\r\n }, [visibleMarkersWithDistance]);\r\n\r\n const calculateDistances = () => {\r\n if (visibleMarkerBaseData.length > 0) {\r\n const destinations = visibleMarkerBaseData?.map((marker) => {\r\n const coords = marker.geometry.coordinates;\r\n return { lat: coords[1], lng: coords[0] };\r\n });\r\n const origin = currentLocation;\r\n for (let i = 0; i < destinations.length; i++) {\r\n const destination = destinations[i];\r\n const distance = haversineDistance(origin, destination);\r\n visibleMarkerBaseData[i].properties.distance = distance.toFixed(1);\r\n }\r\n const sortedMarkers = visibleMarkerBaseData.sort((marker1, marker2) => {\r\n const distance1 = marker1.properties.distance;\r\n const distance2 = marker2.properties.distance;\r\n if (distance1 === null || distance2 === null) {\r\n return distance1 === null ? 1 : -1;\r\n }\r\n return distance1 - distance2;\r\n });\r\n // Capping limit of 100 nearest location\r\n const newSortedMarkers = sortedMarkers.slice(0, 100);\r\n setVisibleMarkersWithDistance(newSortedMarkers);\r\n } else {\r\n setVisibleMarkersWithDistance([]);\r\n }\r\n };\r\n\r\n function haversineDistance(coord1, coord2) {\r\n const earthRadius = 6371; // Radius of the Earth in kilometers\r\n const lat1 = toRadians(coord1.lat);\r\n const lon1 = toRadians(coord1.lng);\r\n const lat2 = toRadians(coord2.lat);\r\n const lon2 = toRadians(coord2.lng);\r\n\r\n const deltaLat = lat2 - lat1;\r\n const deltaLon = lon2 - lon1;\r\n\r\n const a =\r\n Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +\r\n Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);\r\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n const distance = earthRadius * c;\r\n\r\n return distance;\r\n }\r\n\r\n // Utility function to convert degrees to radians\r\n function toRadians(degrees) {\r\n return degrees * (Math.PI / 180);\r\n }\r\n\r\n useEffect(() => {\r\n calculateDistances();\r\n }, [visibleMarkerBaseData]);\r\n\r\n const [csoFilterCounter, setCsoFilterCounter] = useState(0);\r\n const [asFilterCounter, setAsFilterCounter] = useState(0);\r\n const [tfFilterCounter, setTfFilterCounter] = useState(0);\r\n const [csoFilter, setCsoFilter] = useState([]);\r\n const [availableFilter, setAvailableFilter] = useState([]);\r\n const [facilityFilter, setFacilityFilter] = useState([]);\r\n\r\n const handleFilterChange = (event) => {\r\n const filterId = event.target.value;\r\n const isChecked = event.target.checked;\r\n const cso = event.target.classList.contains('csoLocators');\r\n const availSer = event.target.classList.contains('availableServices');\r\n const typeFac = event.target.classList.contains('typeofFacilities');\r\n if (isChecked) {\r\n if (cso) {\r\n setCsoFilterCounter(csoFilterCounter + 1);\r\n setCsoFilter((prevFilters) => [...prevFilters, filterId]);\r\n }\r\n if (availSer) {\r\n setAsFilterCounter(asFilterCounter + 1);\r\n setAvailableFilter((prevFilters) => [...prevFilters, filterId]);\r\n }\r\n if (typeFac) {\r\n setTfFilterCounter(tfFilterCounter + 1);\r\n setFacilityFilter((prevFilters) => [...prevFilters, filterId]);\r\n }\r\n setSelectedFilters((prevFilters) => [...prevFilters, filterId]);\r\n } else {\r\n setSelectedFilters((prevFilters) => prevFilters.filter((id) => id !== filterId));\r\n if (cso) {\r\n setCsoFilterCounter(csoFilterCounter - 1);\r\n setCsoFilter((prevFilters) => prevFilters.filter((id) => id !== filterId));\r\n }\r\n if (availSer) {\r\n setAsFilterCounter(asFilterCounter - 1);\r\n setAvailableFilter((prevFilters) => prevFilters.filter((id) => id !== filterId));\r\n }\r\n if (typeFac) {\r\n setTfFilterCounter(tfFilterCounter - 1);\r\n setFacilityFilter((prevFilters) => prevFilters.filter((id) => id !== filterId));\r\n }\r\n }\r\n setExpandedItems([]);\r\n };\r\n useEffect(() => {}, [visibleMarkerBaseData]);\r\n useEffect(() => {\r\n showFilteredMarkers();\r\n }, [selectedFilters]);\r\n\r\n const showFilteredMarkers = () => {\r\n let finalMarker = [...visibleMarkersWithDistance];\r\n if (selectedFilters.length > 0 && map) {\r\n let filteredVisibleMarkers = {};\r\n const bounds = map.getBounds();\r\n const filterObj = {\r\n availableServices: availableFilter,\r\n customerServiceOutlet: csoFilter,\r\n typeofFacility: facilityFilter,\r\n };\r\n const query = buildFilter(filterObj);\r\n const result = newpinsFilterData(visibleMarkersWithDistance, query);\r\n\r\n const filteredGeojsonObject = {\r\n type: 'FeatureCollection',\r\n features: result,\r\n };\r\n finalMarker = filteredGeojsonObject.features.filter((feature) => {\r\n const geometry = feature.geometry;\r\n return bounds.contains(\r\n new window.google.maps.LatLng(geometry.coordinates[1], geometry.coordinates[0])\r\n );\r\n });\r\n }\r\n setNewVisibleMarkers(finalMarker);\r\n if (tryZoomOut.enable) {\r\n if (!finalMarker.length) {\r\n startZoomingOut();\r\n } else {\r\n stopZoomingOut();\r\n }\r\n }\r\n };\r\n\r\n const startZoomingOut = () => {\r\n if (\r\n tryZoomOut.enable &&\r\n tryZoomOut.count <= ZOOM_THRESHOLD &&\r\n currentZoomlevel >= searchZoomLevel\r\n ) {\r\n let updatedCount = { ...tryZoomOut, count: tryZoomOut.count + 1 };\r\n setTryZoomOut(updatedCount);\r\n map.setZoom(currentZoomlevel - 1);\r\n }\r\n };\r\n const stopZoomingOut = () => {\r\n if (\r\n tryZoomOut.enable &&\r\n tryZoomOut.count >= ZOOM_THRESHOLD &&\r\n currentZoomlevel <= searchZoomLevel\r\n ) {\r\n setTryZoomOut({ enable: false, count: 0 });\r\n }\r\n };\r\n useEffect(() => {\r\n stopZoomingOut();\r\n }, [tryZoomOut]);\r\n const buildFilter = (filterObj) => {\r\n let query = {};\r\n for (let keys in filterObj) {\r\n if (filterObj[keys].constructor === Array && filterObj[keys].length > 0) {\r\n query[keys] = filterObj[keys];\r\n }\r\n }\r\n return query;\r\n };\r\n\r\n const newpinsFilterData = (data, query) => {\r\n const specialKeys = ['availableServices', 'typeofFacility'];\r\n const filteredData = data.filter((item, index) => {\r\n let properties = item.properties;\r\n for (let key in query) {\r\n if (properties[key] === undefined) {\r\n return false;\r\n }\r\n if (specialKeys.includes(key)) {\r\n const itemKeyArr = properties[key].split('|');\r\n const queryKeyArr = query[key];\r\n for (let val in queryKeyArr) {\r\n if (!itemKeyArr.includes(queryKeyArr[val])) {\r\n return false;\r\n }\r\n }\r\n } else if (!query[key].includes(properties[key])) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n });\r\n return filteredData;\r\n };\r\n\r\n const handleBoundsChanged = () => {\r\n setIconUpdate(false);\r\n let visibleMarkers = {};\r\n if (map && currentLocation?.lat && currentLocation?.lng) {\r\n const bounds = map.getBounds();\r\n if (!bounds) return;\r\n const storedSearchFlag = JSON.parse(localstorageService().getItem('searchFlag'));\r\n if (storedSearchFlag === false) {\r\n setShowLocation('');\r\n }\r\n localstorageService().setItem('searchFlag', JSON.stringify(false));\r\n visibleMarkers = getJsonObject.features.filter((feature) => {\r\n const geometry = feature.geometry;\r\n return bounds.contains(\r\n new window.google.maps.LatLng(geometry.coordinates[1], geometry.coordinates[0])\r\n );\r\n });\r\n setExpandedItems([]);\r\n setVisibleMarkerBaseData(visibleMarkers);\r\n }\r\n };\r\n const checkIsExist = (locId) => expandedItems.includes(locId);\r\n\r\n const handleAccordionClick = (locId, keepExpanded = false) => {\r\n const newExpandedItems = [...expandedItems];\r\n if (checkIsExist(locId)) {\r\n let index = newExpandedItems.findIndex((el) => el === locId);\r\n if (index >= 0) {\r\n if (!keepExpanded) {\r\n newExpandedItems.splice(index, 1);\r\n }\r\n }\r\n } else {\r\n newExpandedItems.push(locId);\r\n }\r\n setExpandedItems(newExpandedItems);\r\n };\r\n const gotToResult = (id) => {\r\n let ele = document.getElementById(`cso-result-id-${id}`);\r\n let container = document?.getElementsByClassName('stations-container');\r\n\r\n if (isMobile && ele) {\r\n ele.style.scrollMarginTop = '64px';\r\n ele.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start',\r\n inline: 'nearest',\r\n });\r\n ele.style.scrollMarginTop = '0px';\r\n\r\n handleAccordionClick(id, true);\r\n } else if (!isMobile && container.length && ele) {\r\n let resultCont = container[0];\r\n const index = Array.from(ele.parentElement.children).indexOf(ele);\r\n let childPos = ele.getBoundingClientRect();\r\n let pixelToScroll = index * childPos.height;\r\n resultCont.scrollTop = 0;\r\n resultCont.scrollTop = pixelToScroll;\r\n resultCont.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n handleAccordionClick(id, true);\r\n }\r\n if (ele) {\r\n let buttonContainer = ele.firstElementChild;\r\n if (buttonContainer && buttonContainer.firstElementChild) {\r\n buttonContainer.firstElementChild.focus({ preventScroll: true });\r\n }\r\n }\r\n };\r\n\r\n const showMarkers = () => {\r\n if (map) {\r\n const markerLayer = new window.google.maps.Data({ map });\r\n setMarkerLayer(markerLayer);\r\n setIsLoading(false);\r\n setExpandedItems([]);\r\n // click event listener to the markerLayer\r\n markerLayer.addListener('click', function (event) {\r\n const feature = event.feature;\r\n const csoId = feature.getProperty('customerServiceOutlet').split('|')[0];\r\n markerLayer.revertStyle();\r\n const selectedIconData = CSOLocatorLookUpData?.CsoLocators.find((icon) =>\r\n csoId.includes(icon.Id)\r\n );\r\n const selectedIconUrl = selectedIconData\r\n ? `${domain}${selectedIconData.SelectedMapIcon}`\r\n : defaultSelectedMapIcon;\r\n const selectedIcon = getSelectedIcon(selectedIconUrl);\r\n markerLayer.overrideStyle(feature, { icon: selectedIcon });\r\n const storeNumber = event.feature.getProperty('locationID');\r\n setStoreIndex(storeNumber);\r\n setMarkerClicked(true);\r\n setExpandedItems([]);\r\n gotToResult(event.feature.getProperty('locationID'));\r\n });\r\n\r\n map.addListener('idle', () => {\r\n handleBoundsChanged();\r\n });\r\n map.addListener('bounds_changed', () => {\r\n setCurrentZoomlevel(map.getZoom());\r\n });\r\n map.addListener('tilesloaded', () => {\r\n if (!mapInit) setMapInit(true);\r\n });\r\n\r\n const autocomplete = new window.google.maps.places.Autocomplete(destinationRef.current);\r\n if (autocomplete) {\r\n autocomplete.addListener('place_changed', () => {\r\n setTryZoomOut({ count: 0, enable: true });\r\n const place = autocomplete.getPlace();\r\n if (place && place.geometry) {\r\n const location = place.geometry.location;\r\n const lat = location.lat();\r\n const lng = location.lng();\r\n setCurrentLocation({ lat, lng });\r\n setInputValue(place.formatted_address);\r\n setShowLocation(place.formatted_address);\r\n localstorageService().setItem('searchFlag', JSON.stringify(true));\r\n map.panTo(location);\r\n if (place?.geometry?.viewport) {\r\n map.fitBounds(place.geometry.viewport);\r\n } else {\r\n map.setZoom(searchZoomLevel);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n showMarkers();\r\n }, [map]);\r\n\r\n useEffect(() => {\r\n if (selectedFilters.length > 0) {\r\n showFilteredPins();\r\n } else {\r\n updateShowMarkers();\r\n }\r\n }, [newVisibleMarkers]);\r\n\r\n const initMap = () => {\r\n let finalZoom;\r\n if (currentLocation) {\r\n if (zoomLevel < 0) {\r\n finalZoom = 0;\r\n } else if (zoomLevel > 22) {\r\n finalZoom = 22;\r\n } else {\r\n finalZoom = zoomLevel;\r\n }\r\n setCurrentZoomlevel(finalZoom);\r\n const googleMap = new window.google.maps.Map(document.getElementById('map'), {\r\n center: currentLocation,\r\n zoom: finalZoom,\r\n disableDefaultUI: true, // remove all default options\r\n });\r\n\r\n const dataLayer = new window.google.maps.Data({ map: googleMap });\r\n setMap(googleMap);\r\n }\r\n };\r\n const manageAutoComplete = (event, mode) => {\r\n let pacContainer = document.getElementsByClassName('pac-container');\r\n let inputField = document.getElementById('cso-search-input');\r\n if (mode === 'show' && pacContainer.length) {\r\n inputField.appendChild(pacContainer[0]);\r\n } else if (mode === 'hide' && pacContainer.length) {\r\n console.log('remove');\r\n }\r\n };\r\n return (\r\n <>\r\n {isLoading && \r\n {isMobile ? (\r\n <>\r\n {clearFilter()}\r\n \r\n {filterData?.map((filter, index) => {\r\n return [\r\n filterHeader(filter, index),\r\n filterContent(filter, index),\r\n ,\r\n ];\r\n })}\r\n
\r\n {skipMapButton()}
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n manageAutoComplete(e, 'show')}\r\n onBlur={(e) => manageAutoComplete(e, 'hide')}\r\n onChange={handleInputChange}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n handleSearch();\r\n }\r\n }}\r\n />\r\n
\r\n \r\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 withTranslation()(CSOLocator);\r\n","import React from 'react';\r\n\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './ctaButton.scss';\r\n\r\nconst CTAButton = (props) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CTAButton;\r\n","export default {\r\n googleToken: 'googleToken',\r\n password: 'password',\r\n username: 'username',\r\n remember: 'remember',\r\n prestoCardNumber: 'prestoCardNumber',\r\n verificationNumber: 'verificationNumber',\r\n};\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { Placeholder, Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport * as Yup from 'yup';\r\nimport { Formik, Field } from 'formik';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport signInFormFields from '../../constants/signInFormFields';\r\nimport api from '../../services/api';\r\nimport routes from '../../constants/routes';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport {\r\n localstorageService,\r\n getQueryParams,\r\n redirectToUrl,\r\n resetAccessTokenValidity,\r\n} from '../../services/utils';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport {\r\n changeUserStatus,\r\n itemsAreLoading,\r\n fetchAllData,\r\n fetchAllDataSuccessfullyLoaded,\r\n fetchAvailableSettings,\r\n setWeakAccount,\r\n setGuestUserEnabled,\r\n anonymousSaveAccessToken,\r\n} from '../../redux/user/actions';\r\nimport { Header, Error, TextInput, AdvancedModal, MediaImageList } from '../../molecules';\r\n\r\nconst Dashboard = (props) => {\r\n const [error, setError] = useState('');\r\n const [errorTitleMsg, setErrorTitleMsg] = useState(false);\r\n const [state, setState] = useState('');\r\n const [errorTitle] = useState(props.t('registeredAccountSignInTitleErrorMessage'));\r\n const dispatch = useDispatch();\r\n const [setIsContentState] = useState(false);\r\n let usernameInputRef = useRef();\r\n const userInfo = useSelector((s) => s.user);\r\n const {\r\n fetchAllDataSuccess,\r\n isWeakPasswordAndQaAVisible,\r\n isWeakPasswordVisible,\r\n isWeakQaAVisible,\r\n emailError,\r\n } = userInfo;\r\n\r\n const showContentOnMobiles = (e) => {\r\n e.preventDefault();\r\n setIsContentState(true);\r\n };\r\n\r\n const queryParams = getQueryParams(useLocation().search);\r\n const returnUrl = queryParams.returnUrl;\r\n\r\n const [settings, setSettings] = useState([]);\r\n const [startedLogin, setStartedLogin] = useState(false);\r\n\r\n // useEffect(() => {\r\n // getClaimsDetails();\r\n // }, []);\r\n\r\n // const getClaimsDetails = () => {\r\n // setError('');\r\n // dispatch(itemsAreLoading(true));\r\n // dispatch(fetchAllDataSuccessfullyLoaded(undefined));\r\n // api\r\n // .getClaims()\r\n // .then((res) => {\r\n // console.log(res);\r\n // if (res) {\r\n // setStartedLogin(true);\r\n // localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n // localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Access_token);\r\n // localstorageService().setItem(\r\n // localStorageKeys.accessTokenLifetime,\r\n // res.data.Data.Expires_in\r\n // );\r\n // resetAccessTokenValidity();\r\n // // if (res.data.Data.Role === \"Anonymous\") {\r\n // // dispatch(changeUserStatus(false, true));\r\n // // dispatch(anonymousSaveAccessToken(res.data.Data.Access_token));\r\n // // dispatch(fetchAllData());\r\n // // }\r\n // // else if (res.data.Data.Role === \"Registered\") {\r\n // dispatch(changeUserStatus(true));\r\n // dispatch(fetchAllData());\r\n // dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n // //}\r\n // }\r\n // })\r\n // .catch((res) => {\r\n // dispatch(itemsAreLoading(false));\r\n // //(signInFormFields.googleToken, 1);\r\n // handleServerError(undefined, setError)(res);\r\n // });\r\n // }\r\n\r\n // useEffect(() => {\r\n // setStartedLogin(false);\r\n // dispatch(itemsAreLoading(false));\r\n // }, [startedLogin, fetchAllDataSuccess]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n window.location.href = props?.fields?.ButtonLink?.value?.href;\r\n }}\r\n >\r\n {props?.fields?.ButtonText?.value}\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 withTranslation()(Dashboard);\r\n","import { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Button, ButtonBlock } from '../../../atoms';\r\nimport { CheckoutGrid } from '../../../molecules';\r\nimport { setDeactivateCardType } from '../../../redux/user/actions';\r\nimport { formatDecimalWithCurrency } from '../../../services/utils';\r\nimport './DeactivateAndTransferNew0.scss';\r\n\r\nconst DeactivateAndTransferNew0 = ({\r\n state,\r\n toNextStep,\r\n fields,\r\n userInfo,\r\n isTransferBalance,\r\n step,\r\n}) => {\r\n const visibleId = userInfo?.selectedCard?.visibleId;\r\n const nickname = userInfo?.selectedCard?.nickName;\r\n let fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n fareMedias =\r\n fareMedias && fareMedias.length > 0 && fareMedias.find((data) => data.visibleId === visibleId);\r\n const currentBalance = fareMedias?.currentBalance;\r\n const transitPass =\r\n fareMedias && fareMedias?.passes && fareMedias?.passes.length > 0 && fareMedias?.passes;\r\n const dispatch = useDispatch();\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n }, []);\r\n\r\n const subTotalValue = fields.PriceValue.value;\r\n const items = [\r\n {\r\n id: 1,\r\n image: fields.PrestoCardIcon.value,\r\n name: fields.SingleFarecard.value,\r\n quantity: 1,\r\n subTotal: subTotalValue.substring(1),\r\n productFamily: '',\r\n visibleId: '',\r\n serviceProvider: 'Presto',\r\n productFamily: 'Epurse',\r\n },\r\n ];\r\n let formattedBalance = formatDecimalWithCurrency(currentBalance);\r\n return (\r\n <>\r\n {isTransferBalance ? (\r\n ''\r\n ) : (\r\n \r\n
\r\n )}\r\n\r\n {step == 0\r\n ? state.fareMedias &&\r\n state.fareMedias.map((fareMedia, index) => {\r\n if (index == 0) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {transitPass.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n '-'\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n
\r\n );\r\n }\r\n })\r\n : state.fareMedias &&\r\n state.fareMedias.map((fareMedia) => {\r\n if (fareMedia.visibleId === visibleId) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n })}\r\n \r\n {shippingRadioBlock ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n setAddresType(values)}\r\n >\r\n {({ values, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 0 &&\r\n options\r\n .filter((e) => {\r\n return e.label === 'Ontario';\r\n })\r\n .map((val) => {\r\n return val.value;\r\n }),\r\n country: 'CAN',\r\n postalCode: '',\r\n countryName: 'Canada',\r\n }}\r\n validate={(values) => {\r\n const errors = {};\r\n if (\r\n !values.firstName ||\r\n values.firstName.trim() === \"\" ||\r\n values.firstName.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEXFirstlastname.test(values.firstName.trim())\r\n ) {\r\n errors.firstName = fields.FirstNameError.value;\r\n }\r\n if (\r\n !values.lastName ||\r\n values.lastName.trim() === \"\" ||\r\n values.lastName.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEXFirstlastname.test(values.lastName.trim())\r\n ) {\r\n errors.lastName = fields.LastNameError.value;\r\n }\r\n if (\r\n !values.streetAddress ||\r\n values.streetAddress.trim() === \"\" ||\r\n values.streetAddress.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.streetAddress.trim())\r\n ) {\r\n errors.streetAddress = fields.StreetAddressError.value;\r\n }\r\n if (\r\n //values.apartmentAddress.trim() === \"\" ||\r\n values.apartmentAddress.trim().length > 50 ||\r\n !ALPHANUMERIC_REGEX_APT_NUMBER.test(values.apartmentAddress.trim())\r\n ) {\r\n errors.apartmentAddress = t('ApartmentLabelErrorMessage');\r\n }\r\n if (\r\n !values.city ||\r\n values.city.trim() === \"\" ||\r\n values.city.trim().length > 25 ||\r\n !ALPHANUMERIC_REGEX.test(values.city.trim())\r\n ) {\r\n errors.city = fields.CityProvinceError.value;\r\n }\r\n if (!values.postalCode || !POSTAL_REGEX.test(values.postalCode)) {\r\n errors.postalCode = fields.PostalCodeError.value;\r\n }\r\n if (Object.keys(errors).length === 0) {\r\n setIsError(false);\r\n } else {\r\n setIsError(true);\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => setShippingData(values)}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {currentAddress?.Line1} {currentAddress?.Line2}\r\n
\r\n\r\n {currentAddress?.City}, {currentAddress?.Area?.Name}\r\n
\r\n{currentAddress?.Country?.Id}
\r\n{currentAddress?.PostalCode}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {newAddress?.Line1} {newAddress?.Line2}\r\n
\r\n\r\n {newAddress?.City}, {newAddress?.AreaName}\r\n
\r\n{newAddress?.CountryId}
\r\n{newAddress?.PostalCode}
\r\n\r\n {configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'Cpg.Url')\r\n .map((configKey) => (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(DeactivateAndTransferNew2);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n formatDate,\r\n formatDecimalWithCurrency,\r\n formatUtcTimeFromDate,\r\n formatUtcTimeFromDate2,\r\n redirectToUrl,\r\n TransactionCodeValue,\r\n} from '../../../services/utils';\r\nimport { removeAllFromShoppingCart } from '../../../redux/user/actions';\r\nimport { ButtonBlock, Button, PrintButton, IconButton, Loader } from '../../../atoms';\r\nimport { CheckoutGrid, Error, Success, ThirdPartySystemErrorWarning } from '../../../molecules';\r\nimport { transactionType } from '../../../constants/transactionType';\r\nimport printIcon from '../../../assets/images/printer.svg';\r\nimport api from '../../../services/api';\r\nimport { setUserInfo, setDeactivateCardType, fetchUserInfoData } from '../../../redux/user/actions';\r\n\r\nimport './DeactivateAndTransferNew3.scss';\r\n\r\nconst DeactivateAndTransferNew3 = ({\r\n fields,\r\n state,\r\n thirdPartySystemErrorType,\r\n toPreviousStep,\r\n userInfo,\r\n t,\r\n isTransferBalance,\r\n step,\r\n}) => {\r\n const visibleId = userInfo.selectedCard.visibleId;\r\n const dispatch = useDispatch();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const orderCardResponse = useSelector((reduxData) => reduxData.user.orderCardResponse);\r\n const paymentApiResponse = useSelector((reduxState) => reduxState.user.paymentApiSuccess);\r\n const isErrorBlock = !orderCardResponse?.data?.Success;\r\n const newShippingDetails = useSelector((redux) => redux.user.newShippingDetails);\r\n const defaultShippingDetails = useSelector((redux) => redux.user.currentShippingDetails);\r\n const addressType = useSelector((reduxState) => reduxState.user.addressType);\r\n const paymentApiSuccess = paymentApiResponse?.data?.Success;\r\n const shippingDetails = orderCardResponse?.data?.Order?.ShippingAddress\r\n ? orderCardResponse.data.Order.ShippingAddress\r\n : paymentApiResponse?.data?.Order?.ShippingAddress;\r\n let paymentDetails = orderCardResponse?.data?.Order?.Payment?.Details\r\n ? orderCardResponse.data.Order?.Payment?.Details\r\n : paymentApiResponse?.data?.Order?.Payment?.Details;\r\n // paymentDetails =\r\n // paymentDetails && paymentDetails.length > 0 && paymentDetails[0].PaymentDetailModel;\r\n let dateAndTime = orderCardResponse?.data?.Order?.Payment?.Details?.TransactionDateTime\r\n ? orderCardResponse.data.Order.Payment.Details.TransactionDateTime\r\n : paymentApiResponse?.data?.Order?.Payment?.Details?.TransactionDateTime;\r\n // let dateSplit = dateAndTime?.split(' ');\r\n const formattedDate = dateAndTime ? formatUtcTimeFromDate2(dateAndTime) : null;\r\n // const formattedTime = formatUtcTimeFromDate2(dateAndTime);\r\n let TxType = TransactionCodeValue(paymentDetails?.TransactionType);\r\n const referenceNumber = orderCardResponse?.data?.Order?.AFMSSalesId\r\n ? orderCardResponse.data.Order.AFMSSalesId\r\n : paymentApiResponse?.data?.Order?.AFMSSalesId;\r\n let fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n fareMedias = fareMedias.find((data) => data.visibleId === visibleId);\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n dispatch(removeAllFromShoppingCart());\r\n if (!isErrorBlock || paymentApiSuccess) {\r\n dispatch(fetchUserInfoData());\r\n }\r\n }, []);\r\n\r\n const GotoDashBoardHandler = () => {\r\n // dispatch(setDeactivateCardType(''));\r\n window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // setIsLoading(true);\r\n // api\r\n // .getUserInfo()\r\n // .then((response) => {\r\n // if (response?.data?.Success) {\r\n // dispatch(setUserInfo(response.data.Data));\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // }\r\n // })\r\n // .catch(() => {\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // });\r\n };\r\n\r\n const label = {\r\n value: 'Label',\r\n };\r\n\r\n const orderLines = orderCardResponse?.data?.Order?.OrderLines;\r\n const newCardDetails = orderLines && orderLines.length > 0 && orderLines[0].FareMedia;\r\n const subTotalValue = fields.PriceValue.value;\r\n const newbalanceval = fareMedias?.currentBalance - parseInt(subTotalValue.substring(1));\r\n const items = [\r\n {\r\n image: fields.PrestoCardIcon.value,\r\n name: fields.SingleFarecard.value,\r\n quantity: 1,\r\n subTotal: subTotalValue.substring(1),\r\n productFamily: '',\r\n visibleId: 'NEWMEDIA',\r\n serviceProvider: 'Presto',\r\n productFamily: 'Epurse',\r\n },\r\n ];\r\n\r\n const orderLinesNew = paymentApiResponse?.data?.Order?.OrderLines;\r\n const fareMediasNew =\r\n paymentApiResponse?.data?.Order?.Customer &&\r\n paymentApiResponse?.data?.Order?.Customer.FareMedias;\r\n const itemsNew = [\r\n {\r\n id: 1,\r\n name: fields.SingleFarecard.value,\r\n quantity: 1,\r\n subTotal: subTotalValue.substring(1),\r\n productFamily: fareMediasNew && fareMediasNew.length > 0 && fareMediasNew[0].ProductFamily,\r\n visibleId: fareMediasNew && fareMediasNew.length > 0 && fareMediasNew[0].VisibleId,\r\n serviceProvider: 'Presto',\r\n productFamily: 'Epurse',\r\n },\r\n ];\r\n return (\r\n <>\r\n {thirdPartySystemErrorType ? (\r\n \r\n {state.orderid && !state.savedPaymentMethodUsed && (\r\n <>\r\n
\r\n \r\n
\r\n \r\n )}\r\n />\r\n\r\n {!state.savedPaymentMethodUsed && (\r\n \r\n {addressType == 'new' ? (\r\n
\r\n )}\r\n \r\n ) : (\r\n <>\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {newShippingDetails?.Line1} {newShippingDetails?.Line2}\r\n \r\n
\r\n\r\n {newShippingDetails?.City} {newShippingDetails?.AreaCode}\r\n
\r\n\r\n {newShippingDetails?.CountryId} {newShippingDetails?.PostalCode}\r\n
\r\n\r\n
\r\n )}\r\n {TxType !== undefined && paymentDetails?.TransactionType !== null && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {defaultShippingDetails?.Line1} {defaultShippingDetails?.Line2}\r\n \r\n
\r\n\r\n {defaultShippingDetails?.City} {defaultShippingDetails?.Area?.Code}\r\n
\r\n\r\n {defaultShippingDetails?.Country?.Id} {defaultShippingDetails?.PostalCode}\r\n
\r\n\r\n
\r\n )}\r\n {paymentDetails?.ResponseCode && (\r\n \r\n
\r\n {TxType}
\r\n \r\n
\r\n )}\r\n {paymentDetails?.ISOCode && (\r\n \r\n
\r\n \r\n {paymentDetails.ResponseCode} - {paymentDetails.AcceptanceStatus}\r\n
\r\n \r\n
\r\n )}\r\n {dateAndTime && (\r\n \r\n
\r\n {paymentDetails.ISOCode}
\r\n \r\n
\r\n )}\r\n {referenceNumber && (\r\n \r\n
\r\n {`${formattedDate}`}
\r\n \r\n
\r\n )}\r\n \r\n
\r\n {referenceNumber}
\r\n \r\n \r\n {\r\n getUserInfoApi();\r\n }}\r\n >\r\n dispatch(setDeactivateCardType(''))}\r\n >\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Deactivate0;\r\n","import { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Button, IconButton, Loader } from '../../../atoms';\r\nimport { Error, Success } from '../../../molecules';\r\nimport printIcon from '../../../assets/images/printer.svg';\r\nimport './Deactivate1.scss';\r\nimport { formatDecimalWithCurrency } from '../../../services/utils';\r\nimport api from '../../../services/api';\r\nimport { setUserInfo, fetchUserInfoData } from '../../../redux/user/actions';\r\n\r\nconst Deactivate1 = ({ toPreviousStep, fields, userInfo }) => {\r\n const hotlistApiSuccess = useSelector((reduxState) => reduxState.user.hotlistApiSuccess);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dispatch = useDispatch();\r\n const visibleId = userInfo.selectedCard.visibleId;\r\n let fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n fareMedias =\r\n fareMedias && fareMedias.length > 0 && fareMedias.find((data) => data.visibleId === visibleId);\r\n const currentBalance = fareMedias?.currentBalance;\r\n const userFareMedias = hotlistApiSuccess?.data?.Data?.Customer?.FareMedias;\r\n const verificationNumber =\r\n userFareMedias && userFareMedias.length > 0 && userFareMedias[0]?.VerificationNumber;\r\n const transitPasses =\r\n fareMedias && fareMedias?.passes && fareMedias?.passes.length > 0 && fareMedias?.passes;\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n if (hotlistApiSuccess?.hotlistApiSuccess) {\r\n dispatch(fetchUserInfoData());\r\n api.UpdateFareMediaSession({ VisibleId: visibleId }).then(({ data }) => {});\r\n }\r\n }, []);\r\n const GotoTransferHandler = () => {\r\n window.location.href = fields?.TransferBalanceCTALink?.value?.href;\r\n // setIsLoading(true);\r\n // api\r\n // .getUserInfo()\r\n // .then((response) => {\r\n // if (response?.data?.Success) {\r\n // dispatch(setUserInfo(response.data.Data));\r\n // setIsLoading(false);\r\n // window.location.href = fields?.TransferBalanceCTALink?.value?.href;\r\n // }\r\n // })\r\n // .catch(() => {\r\n // setIsLoading(false);\r\n // window.location.href = fields?.TransferBalanceCTALink?.value?.href;\r\n // });\r\n };\r\n let formattedBalance = formatDecimalWithCurrency(currentBalance);\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {transitPasses.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n '-'\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n
\r\n \r\n {hotlistApiSuccess?.hotlistApiSuccess ? (\r\n (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Deactivate1;\r\n","import { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Button, ButtonBlock } from '../../../atoms';\r\nimport { setDeactivateCardType } from '../../../redux/user/actions';\r\nimport { formatDecimalWithCurrency } from '../../../services/utils';\r\nimport './DeactivateAndTransfer0.scss';\r\n\r\nconst DeactivateAndTransfer0 = ({ toNextStep, fields, userInfo }) => {\r\n const visibleId = userInfo?.selectedCard?.visibleId;\r\n const nickname = userInfo?.selectedCard?.nickName;\r\n let fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n fareMedias = fareMedias.find((data) => data.visibleId === visibleId);\r\n const currentBalance = fareMedias?.currentBalance;\r\n const transitPasses =\r\n fareMedias && fareMedias?.passes && fareMedias?.passes.length > 0 && fareMedias?.passes;\r\n // const transitPasses = useSelector((reduxState) => reduxState.user.selectedCard.products);\r\n const dispatch = useDispatch();\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n }, []);\r\n let formattedBalance = formatDecimalWithCurrency(currentBalance);\r\n return (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n />\r\n ) : (\r\n \r\n {visibleId && (\r\n
\r\n \r\n
\r\n )}\r\n {verificationNumber && (\r\n \r\n
\r\n )}\r\n {currentBalance && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n {transitPasses.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n '-'\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n {hotlistApiSuccess.hotlistApiSuccess ? (\r\n window.print()} icon={printIcon}>\r\n {fields.Print.value}\r\n \r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {\r\n toPreviousStep();\r\n }}\r\n >\r\n
\r\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 DeactivateAndTransfer0;\r\n","import { Placeholder, RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { Button, ButtonBlock, InlineError, Loader } from '../../../atoms';\r\nimport sharedFormConstants from '../../../constants/sharedFormConstants';\r\nimport { TextInput } from '../../../molecules';\r\nimport {\r\n setHotlistApiSuccess,\r\n setNewCardDetails,\r\n setDeactivateCardType,\r\n} from '../../../redux/user/actions';\r\nimport api from '../../../services/api';\r\nimport { withTranslation } from 'react-i18next';\r\nimport './DeactivateAndTransfer1.scss';\r\n\r\nconst DIGIT_REGEX = /^[0-9]*$/;\r\n\r\nconst DeactivateAndTransfer1 = ({\r\n toNextStep,\r\n userInfo,\r\n toPreviousStep,\r\n rendering,\r\n t,\r\n fields,\r\n isTransferBalance,\r\n callRefreshToken,\r\n}) => {\r\n const customerId = userInfo.customerId;\r\n const visibleId = userInfo?.selectedCard?.visibleId;\r\n const mediaId = userInfo?.selectedCard?.mediaId;\r\n const oldVisibleId = userInfo?.selectedCard?.visibleId;\r\n const [fareMedias, setFareMedias] = useState('');\r\n const [oldCvn, setOldCvn] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n setIsLoading(true);\r\n api\r\n .getUserInfo()\r\n .then((response) => {\r\n setIsLoading(false);\r\n if (response?.Success) {\r\n setFareMedias(response?.data?.Data?.Customer?.FareMedias);\r\n } else {\r\n //console.log('error');\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoading(false);\r\n //console.log('error');\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n const oldCvn =\r\n fareMedias &&\r\n fareMedias.length > 0 &&\r\n fareMedias.find((data) => {\r\n return data.VisibleId == oldVisibleId;\r\n });\r\n setOldCvn(oldCvn?.VerificationNumber);\r\n }, [fareMedias]);\r\n\r\n const handleSubmitData = (data) => {\r\n setIsLoading(true);\r\n dispatch(setNewCardDetails(data));\r\n let payload = {\r\n CustomerId: customerId,\r\n NewCVN: data.cardVerificationNumber,\r\n NewVisibleId: data.newCardNumber,\r\n IsStubEnabled: 'true',\r\n IsErrorFlowEnabled: 'false',\r\n OldMediaId: mediaId,\r\n OldVisibleId: visibleId,\r\n OldCVN: oldCvn,\r\n NewMediaId: null,\r\n IsTransferBalance: isTransferBalance,\r\n IsAnonymousFlow: true\r\n };\r\n // if (isTransferBalance) {\r\n // payload = {\r\n // CustomerId: customerId,\r\n // CVN: data.cardVerificationNumber,\r\n // NewVisibleId: data.newCardNumber,\r\n // IsStubEnabled: 'true',\r\n // IsErrorFlowEnabled: 'false',\r\n // OldMediaId: mediaId,\r\n // OldVisibleId: visibleId,\r\n // IsTransferBalance: true,\r\n // };\r\n // }\r\n api\r\n .createHotlistAndTransferCard(payload)\r\n .then((response) => {\r\n dispatch(setHotlistApiSuccess(response.data));\r\n if (response.data.Success) {\r\n setIsLoading(false);\r\n callRefreshToken(() => {\r\n toNextStep();\r\n });\r\n } else {\r\n //console.log('error');\r\n toNextStep();\r\n }\r\n })\r\n .catch((error) => {\r\n api.UpdateFareMediaSession({ VisibleId: visibleId }).then(({ data }) => { });\r\n dispatch(setHotlistApiSuccess({ Success: false }));\r\n //console.log('error', error);\r\n setIsLoading(false);\r\n toNextStep();\r\n });\r\n };\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {transitPasses.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n '-'\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n {\r\n const errors = {};\r\n if (!values.newCardNumber) {\r\n errors.newCardNumber = fields.CardNumberMissing.value;\r\n } else if (!DIGIT_REGEX.test(values.newCardNumber)) {\r\n errors.newCardNumber = fields.CardNumberInputError.value;\r\n } else if (values.newCardNumber.length !== 17) {\r\n errors.newCardNumber = fields.CardNumberIncorrectDigits.value;\r\n }\r\n if (!values.cardVerificationNumber) {\r\n errors.cardVerificationNumber = fields.CVNError.value;\r\n } else if (!DIGIT_REGEX.test(values.cardVerificationNumber)) {\r\n errors.cardVerificationNumber = fields.CVNInvalid.value;\r\n } else if (values.cardVerificationNumber.length !== 3) {\r\n errors.cardVerificationNumber = fields.CVNInvalid.value;\r\n }\r\n if (!values.terms) {\r\n errors[sharedFormConstants.terms] = t('termsAndConditionsRequired');\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n handleSubmitData(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(DeactivateAndTransfer1);\r\n","import { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Button, IconButton, Loader } from '../../../atoms';\r\nimport { Error, Success } from '../../../molecules';\r\nimport printIcon from '../../../assets/images/printer.svg';\r\nimport { formatDecimalWithCurrency, getErrorTranslation } from '../../../services/utils';\r\nimport api from '../../../services/api';\r\nimport {\r\n setUserInfo,\r\n fetchUserInfoData,\r\n setDeactivateCardType,\r\n selectCard,\r\n} from '../../../redux/user/actions';\r\n\r\nconst DeactivateAndTransfer2 = ({ toPreviousStep, fields, userInfo }) => {\r\n const visibleId = userInfo?.selectedCard?.visibleId;\r\n const dispatch = useDispatch();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [errorMsg, setErrorMsg] = useState('');\r\n const hotlistApiSuccess = useSelector((reduxState) => reduxState.user.hotlistApiSuccess);\r\n let fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n fareMedias = fareMedias.find((data) => data.visibleId === visibleId);\r\n const currentBalance = fareMedias?.currentBalance;\r\n const userFareMedias = hotlistApiSuccess?.data?.Data?.Customer?.FareMedias;\r\n const verificationNumber =\r\n userFareMedias && userFareMedias.length > 0 && userFareMedias[0]?.VerificationNumber;\r\n const transitPasses =\r\n fareMedias && fareMedias?.passes && fareMedias?.passes.length > 0 && fareMedias?.passes;\r\n const newCardDetails = useSelector((reduxState) => reduxState.user.newCardDetails);\r\n const error = hotlistApiSuccess?.Error && JSON.parse(hotlistApiSuccess.Error);\r\n let allfareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n if (hotlistApiSuccess?.Success) {\r\n dispatch(fetchUserInfoData());\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (hotlistApiSuccess?.Success) {\r\n let targetCard = allfareMedias.find(\r\n (data) => data.visibleId === newCardDetails?.newCardNumber\r\n );\r\n if (targetCard === undefined) {\r\n dispatch(selectCard(allfareMedias[0]));\r\n } else {\r\n dispatch(selectCard(targetCard));\r\n }\r\n }\r\n }, [allfareMedias]);\r\n\r\n const GotoDashBoardHandler = () => {\r\n //dispatch(setDeactivateCardType(''));\r\n window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // setIsLoading(true);\r\n // api\r\n // .getUserInfo()\r\n // .then((response) => {\r\n // if (response?.data?.Success) {\r\n // dispatch(setUserInfo(response.data.Data));\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // }\r\n // })\r\n // .catch(() => {\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // });\r\n };\r\n const errorBlock = () => {\r\n const errorCode = error?.Code;\r\n // let errorMsg = '';\r\n // let errorMsg = getErrorTranslation(errorCode);\r\n getErrorTranslation(errorCode, (error) => {\r\n if (error && error.data) {\r\n setErrorMsg(error.data);\r\n } else {\r\n switch (errorCode) {\r\n case 'AFMS-CRT-MA-0001':\r\n setErrorMsg(fields.AFMSCRTMA1.value);\r\n break;\r\n case 'AFMS-CRT-FE-0008':\r\n setErrorMsg(fields.AFMSCRTFE8.value);\r\n break;\r\n case 'AFMS-CRT-FE-0038':\r\n setErrorMsg(fields.AFMSCRTFE6.value);\r\n break;\r\n case 'AFMS-CRT-FE-0006':\r\n setErrorMsg(fields.AFMSCRTFE6.value);\r\n break;\r\n case 'AFMS-DAX-FE-0003':\r\n setErrorMsg(fields.AFMSDAXFE3.value);\r\n break;\r\n case 'AFMS-DAX-FE-0008':\r\n setErrorMsg(fields.AFMSDAXFE8.value);\r\n break;\r\n case 'RLCCCTP-AStep3-06':\r\n setErrorMsg(fields.AFMSDAXFE3.value);\r\n break;\r\n case 'AFMS-CRT-FE-0039':\r\n setErrorMsg(fields.AFMSCRTFE39.value);\r\n break;\r\n\r\n default:\r\n setErrorMsg(fields.OrderFailureMessage.value);\r\n break;\r\n }\r\n }\r\n });\r\n\r\n return (\r\n <>\r\n \r\n {hotlistApiSuccess?.Success ? (\r\n (\r\n <>\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default DeactivateAndTransfer2;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik, useFormikContext } from 'formik';\r\nimport * as Yup from 'yup';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { Button, ButtonBlock, Loader } from '../../../atoms';\r\nimport { Select } from '../../../molecules';\r\nimport { setDeactivateCardType, setSelectedCardData } from '../../../redux/user/actions';\r\nimport api from '../../../services/api';\r\nimport './DeactivateAndTransferAnother0.scss';\r\nimport { formatDecimalWithCurrency } from '../../../services/utils';\r\n\r\nconst AutoSubmitToken = () => {\r\n const { values, submitForm } = useFormikContext();\r\n useEffect(() => {\r\n if (values.cardName) {\r\n submitForm();\r\n }\r\n }, [values]);\r\n return null;\r\n};\r\n\r\nconst DeactivateAndTransferAnother0 = ({ toNextStep, fields }) => {\r\n const dispatch = useDispatch();\r\n const [cardNameDetail, setCardNameDetail] = useState('');\r\n const selectedCard = useSelector((redux) => redux.user.selectedCard);\r\n const fareMedias = useSelector((redux) => redux.user.fareMedias);\r\n const [options, setOptions] = useState([]);\r\n const [transferToCard, setTransferToCard] = useState([]);\r\n const [transferToNickName, setTransferToNickName] = useState('');\r\n const [targetCardAutoload, setTargetCardAutoload] = useState([]);\r\n const [targetCardAutorenew, setTargetCardAutorenew] = useState([]);\r\n const [sourceCardAutorenew, setSourceCardAutorenew] = useState([]);\r\n const [sourceCardTransitPass, setSourceCardTransitPass] = useState([]);\r\n const [targetCardTransitPass, setTargetCardTransitPass] = useState([]);\r\n const autoLoadData = useSelector((redux) => redux.user.autoLoadData);\r\n const selectedCardAutoLoad = autoLoadData && autoLoadData?.length > 0 && autoLoadData[0].Product;\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isTransferableCardPresent, setIsTransferableCardPresent] = useState(false);\r\n const selectedCardDetails =\r\n fareMedias &&\r\n fareMedias.length > 0 &&\r\n fareMedias.filter((fareMedia) => {\r\n return fareMedia.visibleId === selectedCard.visibleId;\r\n });\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n setIsLoading(true);\r\n api\r\n .getAutorenewSubscriptionsForMedia({ visibleId: selectedCard.visibleId })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n if (response.data.SubscriptionList.length > 0) {\r\n setSourceCardAutorenew(response.data.SubscriptionList);\r\n } else {\r\n setSourceCardAutorenew([]);\r\n }\r\n } else {\r\n setSourceCardAutorenew([]);\r\n }\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n //console.log('error', err);\r\n });\r\n api\r\n .getAllRegisteredCardsEligibleForTransfer({\r\n VisibleId: selectedCard.visibleId,\r\n })\r\n .then((response) => {\r\n setIsLoading(false);\r\n if (response.data.Success) {\r\n const { optionsArr, elgibleCards } = response.data.FareMedias.reduce(\r\n (result, card) => {\r\n const VisibleId = card.VisibleId;\r\n const NickName = card.NickName;\r\n let obj = {\r\n label: `${NickName}'s ${fields?.CardLabel?.value} - **${VisibleId.slice(-4)}`,\r\n value: VisibleId,\r\n };\r\n let transferToObj = {\r\n visibleId: VisibleId,\r\n nickName: NickName,\r\n };\r\n result.optionsArr.push(obj);\r\n result.elgibleCards.push(transferToObj);\r\n return result;\r\n },\r\n { optionsArr: [], elgibleCards: [] }\r\n );\r\n const defaultValue = {\r\n label: fields.SelectCardLabel.value,\r\n value: '',\r\n };\r\n optionsArr.unshift(defaultValue);\r\n let transfermedias = fareMedias?.filter((x) => x.visibleId !== selectedCard.visibleId);\r\n for (let i = 0; i < transfermedias?.length; i++) {\r\n let card = elgibleCards.find((x) => x.visibleId === transfermedias[i].visibleId);\r\n if (card === undefined) {\r\n let obj = {\r\n label: `${transfermedias[i].nickName}'s ${fields?.CardLabel?.value} - ${fields?.NotEligibleLabel?.value}`,\r\n value: '0',\r\n };\r\n optionsArr.push(obj);\r\n }\r\n }\r\n setOptions(optionsArr);\r\n setTransferToCard(elgibleCards);\r\n if (response.data?.FareMedias?.length > 0) {\r\n setIsTransferableCardPresent(true);\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n //console.log('error', err);\r\n });\r\n api\r\n .getAllProductsLoadedInMedia({\r\n visibleId: selectedCard.visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n if (response.data.productInstances.length > 0) {\r\n setSourceCardTransitPass(response.data.productInstances);\r\n } else {\r\n setSourceCardTransitPass([]);\r\n }\r\n } else {\r\n setSourceCardTransitPass([]);\r\n }\r\n });\r\n }, []);\r\n const selectCardChangeHandler = () => {\r\n setTimeout(() => {\r\n document.getElementById('selectdropdown').value = '';\r\n }, 500);\r\n };\r\n //console.log(options);\r\n const selectCard = (value) => {\r\n setIsLoading(true);\r\n Promise.all([\r\n api.getAutoloadSubscriptionForMedia({ visibleId: value }),\r\n api.getAutorenewSubscriptionsForMedia({ visibleId: value }),\r\n api.getAllProductsLoadedInMedia({ visibleId: value }),\r\n ])\r\n .then((responses) => {\r\n setIsLoading(false);\r\n return Promise.all(\r\n responses.map((response, index) => {\r\n if (index == 0) {\r\n if (response.data.Success) {\r\n if (response.data.SubscriptionList.length > 0) {\r\n setTargetCardAutoload(response.data.SubscriptionList[0].Product);\r\n } else {\r\n setTargetCardAutoload([]);\r\n }\r\n } else {\r\n setTargetCardAutoload([]);\r\n }\r\n } else if (index == 1) {\r\n if (response.data.Success) {\r\n if (response.data.SubscriptionList.length > 0) {\r\n setTargetCardAutorenew(response.data.SubscriptionList);\r\n } else {\r\n setTargetCardAutorenew([]);\r\n }\r\n } else {\r\n setTargetCardAutorenew([]);\r\n }\r\n } else if (response.data.Success) {\r\n if (response.data.productInstances.length > 0) {\r\n setTargetCardTransitPass(response.data.productInstances);\r\n } else {\r\n setTargetCardTransitPass([]);\r\n }\r\n } else {\r\n setTargetCardTransitPass([]);\r\n }\r\n })\r\n );\r\n })\r\n .then((data) => {\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n setIsLoading(false);\r\n //console.log('error', error);\r\n });\r\n\r\n const cardNameDetails =\r\n fareMedias &&\r\n fareMedias.length > 0 &&\r\n fareMedias.filter((fareMedia) => {\r\n return fareMedia.visibleId == value;\r\n });\r\n setCardNameDetail(cardNameDetails && cardNameDetails.length > 0 && cardNameDetails[0]);\r\n\r\n const transferToNickNames =\r\n transferToCard &&\r\n transferToCard.length > 0 &&\r\n transferToCard.filter((transferToCardEl) => {\r\n return transferToCardEl.visibleId == value;\r\n });\r\n setTransferToNickName(\r\n transferToNickNames && transferToNickNames.length > 0 && transferToNickNames[0]\r\n );\r\n };\r\n function GetSortOrder(arrayItem) {\r\n return function (a, b) {\r\n if (a[arrayItem] !== '' && b[arrayItem] !== '') {\r\n if (a[arrayItem] < b[arrayItem]) {\r\n return 1;\r\n }\r\n if (a[arrayItem] > b[arrayItem]) {\r\n return -1;\r\n }\r\n }\r\n return 0;\r\n };\r\n }\r\n const submitData = () => {\r\n const selectedCardTemp = {\r\n nickName: selectedCardDetails[0]?.nickName,\r\n transferToNickName: transferToNickName.nickName,\r\n cardNumber: cardNameDetail.visibleId,\r\n balance: cardNameDetail.currentBalance + selectedCardDetails[0].currentBalance,\r\n autoloadContract: selectedCardAutoLoad ? selectedCardAutoLoad : targetCardAutoload,\r\n autorenewContract: sourceCardAutorenew.concat(targetCardAutorenew),\r\n transitPass: sourceCardTransitPass.concat(targetCardTransitPass),\r\n fareType: selectedCardDetails[0].fareType,\r\n mediaId: cardNameDetail.mediaId,\r\n };\r\n dispatch(setSelectedCardData(selectedCardTemp));\r\n toNextStep();\r\n };\r\n let formattedBalance = formatDecimalWithCurrency(selectedCardDetails[0]?.currentBalance);\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n )}\r\n />\r\n ) : (\r\n errorBlock()\r\n )}\r\n \r\n {newCardDetails?.newCardNumber && (\r\n
\r\n \r\n
\r\n )}\r\n {verificationNumber && (\r\n \r\n
\r\n )}\r\n {currentBalance && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n {transitPasses.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n '-'\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n {!hotlistApiSuccess.hotlistApiSuccess ? (\r\n window.print()} icon={printIcon}>\r\n {fields.Print.value}\r\n \r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {\r\n toPreviousStep();\r\n }}\r\n >\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {sourceCardAutorenew.map((pass) => {\r\n if (pass?.Product?.ProductName !== null) {\r\n return
\r\n ) : (\r\n -\r\n )}\r\n {pass?.Product?.ProductName}
;\r\n }\r\n })}\r\n\r\n \r\n
\r\n\r\n \r\n {sourceCardTransitPass.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n -\r\n )}\r\n {pass.ProductName}
;\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 DeactivateAndTransferAnother0;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Button, ButtonBlock, InlineError, Loader } from '../../../atoms';\r\nimport { Placeholder, RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Formik } from 'formik';\r\nimport sharedFormConstants from '../../../constants/sharedFormConstants';\r\nimport { Error } from '../../../molecules';\r\nimport api from '../../../services/api';\r\nimport './DeactivateAndTransferAnother1.scss';\r\nimport { formatDecimalWithCurrency } from '../../../services/utils';\r\nimport { setHotlistApiSuccess } from '../../../redux/user/actions';\r\n\r\nconst DeactivateAndTransferAnother1 = ({\r\n toNextStep,\r\n fields,\r\n toPreviousStep,\r\n rendering,\r\n t,\r\n userInfo,\r\n isTransferBalance,\r\n callRefreshToken,\r\n}) => {\r\n const [isError, setIsError] = useState(false);\r\n const [errorMsg, setErrorMsg] = useState({ error: '' });\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [fareMedias, setFareMedias] = useState('');\r\n const [oldCvn, setOldCvn] = useState('');\r\n const [newCvn, setNewCvn] = useState('');\r\n const customerId = userInfo.customerId;\r\n const oldVisibleId = userInfo?.selectedCard?.visibleId;\r\n const oldMediaId = userInfo?.selectedCard?.mediaId;\r\n const selectedCardData = useSelector((redux) => redux.user.selectedCardData);\r\n let finalTransitpasses =\r\n selectedCardData?.transitPass?.length > 0 &&\r\n selectedCardData?.transitPass.filter((x) => x.ProductName !== null);\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n setIsLoading(true);\r\n api\r\n .getUserInfo()\r\n .then((response) => {\r\n setIsLoading(false);\r\n if (response?.data?.Success) {\r\n setFareMedias(response?.data?.Data?.Customer?.FareMedias);\r\n } else {\r\n //console.log('error');\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoading(false);\r\n //console.log('error');\r\n });\r\n }, []);\r\n useEffect(() => {\r\n const oldCvn =\r\n fareMedias &&\r\n fareMedias.length > 0 &&\r\n fareMedias.find((data) => {\r\n return data.VisibleId == oldVisibleId;\r\n });\r\n const newCvn =\r\n fareMedias &&\r\n fareMedias.length > 0 &&\r\n fareMedias.find((data) => {\r\n return data.VisibleId == selectedCardData?.cardNumber;\r\n });\r\n setOldCvn(oldCvn?.VerificationNumber);\r\n setNewCvn(newCvn?.VerificationNumber);\r\n }, [fareMedias]);\r\n\r\n const handleSubmit = () => {\r\n setIsLoading(true);\r\n api\r\n .createHotlistAndTransferCard({\r\n CustomerId: customerId,\r\n NewCVN: newCvn,\r\n NewMediaId: selectedCardData.mediaId,\r\n NewVisibleId: selectedCardData.cardNumber,\r\n OldMediaId: oldMediaId,\r\n OldVisibleId: oldVisibleId,\r\n OldCVN: oldCvn,\r\n IsStubEnabled: 'true',\r\n IsErrorFlowEnabled: 'false',\r\n IsTransferBalance: isTransferBalance,\r\n IsAnonymousFlow: false,\r\n })\r\n .then((response) => {\r\n dispatch(setHotlistApiSuccess(response.data));\r\n if (response?.data?.Success) {\r\n setIsLoading(false);\r\n setIsError(false);\r\n callRefreshToken(() => {\r\n toNextStep();\r\n });\r\n } else {\r\n toNextStep();\r\n }\r\n })\r\n .catch(() => {\r\n api.UpdateFareMediaSession({ VisibleId: oldVisibleId }).then(({ data }) => { });\r\n setIsLoading(false);\r\n //console.log('error');\r\n setIsError(true);\r\n });\r\n };\r\n let formattedBalance = formatDecimalWithCurrency(selectedCardData?.balance);\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n
\r\n \r\n {\r\n const errors = {};\r\n if (!values.cardName || values.cardName === '0') {\r\n selectCardChangeHandler();\r\n errors.cardName = fields.SelectCardLabelError.value;\r\n setCardNameDetail('');\r\n }\r\n\r\n return errors;\r\n }}\r\n validationSchema={Yup.object().shape({\r\n cardName: Yup.string().required(fields?.SelectCardLabelError?.value),\r\n })}\r\n onSubmit={(values) => selectCard(values.cardName)}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n {\r\n const errors = {};\r\n if (!values.terms) {\r\n errors[sharedFormConstants.terms] = t('termsAndConditionsRequired');\r\n }\r\n\r\n return errors;\r\n }}\r\n onSubmit={() => {\r\n handleSubmit();\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DeactivateAndTransferAnother1;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Button, ButtonBlock, IconButton } from '../../../atoms';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Error, Success } from '../../../molecules';\r\nimport './DeactivateAndTransferAnother2.scss';\r\nimport printIcon from '../../../assets/images/printer.svg';\r\nimport api from '../../../services/api';\r\n\r\nimport {\r\n setUserInfo,\r\n fetchUserInfoData,\r\n setDeactivateCardType,\r\n selectCard,\r\n} from '../../../redux/user/actions';\r\nimport { getErrorTranslation } from '../../../services/utils';\r\n\r\nconst DeactivateAndTransferAnother2 = ({ fields }) => {\r\n const transferToNickName = useSelector((redux) => redux.user.selectedCardData.nickName);\r\n const hotlistApiSuccess = useSelector((reduxState) => reduxState.user.hotlistApiSuccess);\r\n const dispatch = useDispatch();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [errorMsg, setErrorMsg] = useState('');\r\n const error = hotlistApiSuccess?.Error && JSON.parse(hotlistApiSuccess?.Error);\r\n let allfareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n const selectedCardData = useSelector((redux) => redux.user.selectedCardData);\r\n var successMessage = fields?.SuccessMessageForTransferToAnotherCard.value;\r\n successMessage = {\r\n value: successMessage.replace('{0}', transferToNickName),\r\n };\r\n\r\n useEffect(() => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n if (hotlistApiSuccess?.Success) {\r\n dispatch(fetchUserInfoData());\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (hotlistApiSuccess?.Success) {\r\n let targetCard = allfareMedias.find(\r\n (data) => data.visibleId === selectedCardData?.cardNumber\r\n );\r\n if (targetCard === undefined) {\r\n dispatch(selectCard(allfareMedias[0]));\r\n } else {\r\n dispatch(selectCard(targetCard));\r\n }\r\n }\r\n }, [allfareMedias]);\r\n\r\n const GotoDashBoardHandler = () => {\r\n // dispatch(setDeactivateCardType(''));\r\n window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // setIsLoading(true);\r\n // api\r\n // .getUserInfo()\r\n // .then((response) => {\r\n // if (response?.data?.Success) {\r\n // dispatch(setUserInfo(response.data.Data));\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // }\r\n // })\r\n // .catch(() => {\r\n // setIsLoading(false);\r\n // window.location.href = fields?.GotoDashBoardLink?.value?.href;\r\n // });\r\n };\r\n\r\n const label = {\r\n value: 'Label',\r\n };\r\n const errorBlock = () => {\r\n const errorCode = error?.Code;\r\n // let errorMsg = '';\r\n // errorMsg = getErrorTranslation(errorCode);\r\n getErrorTranslation(errorCode, (error) => {\r\n if (error && error.data) {\r\n setErrorMsg(error.data);\r\n } else {\r\n switch (errorCode) {\r\n case 'AFMS-CRT-MA-0001':\r\n setErrorMsg(fields.AFMSCRTMA1.value);\r\n break;\r\n case 'AFMS-CRT-FE-0030':\r\n setErrorMsg(fields.AFMSCRTFE3.value);\r\n break;\r\n case 'AFMS-DAX-FX-0010':\r\n setErrorMsg(fields.AFMSDAXFX1.value);\r\n break;\r\n\r\n default:\r\n setErrorMsg(fields.AFMSCRTTE1.value);\r\n break;\r\n }\r\n }\r\n });\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {selectedCardData?.balance && (\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {selectedCardData?.autorenewContract.map((pass) => {\r\n if (pass?.Product?.ProductName !== null) {\r\n return
\r\n ) : (\r\n -\r\n )}\r\n {pass?.Product?.ProductName}
;\r\n }\r\n })}\r\n\r\n \r\n
\r\n\r\n \r\n {selectedCardData.transitPass.map((pass) => {\r\n if (pass.ProductName !== null) {\r\n return
\r\n ) : (\r\n -\r\n )}\r\n {pass.ProductName}
;\r\n }\r\n })}\r\n\r\n \r\n
\r\n \r\n {hotlistApiSuccess?.Success ? (\r\n (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DeactivateAndTransferAnother2;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { Header, StepTracker } from '../../molecules';\r\nimport { getServerUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport api from '../../services/api';\r\nimport DeactivateAndTransferNew0 from './DeactivateAndTransferNew/DeactivateAndTransferNew0';\r\nimport DeactivateAndTransferNew1 from './DeactivateAndTransferNew/DeactivateAndTransferNew1';\r\nimport DeactivateAndTransferNew2 from './DeactivateAndTransferNew/DeactivateAndTransferNew2';\r\nimport DeactivateAndTransferNew3 from './DeactivateAndTransferNew/DeactivateAndTransferNew3';\r\nimport Deactivate0 from './Deactivate/Deactivate0';\r\nimport Deactivate1 from './Deactivate/Deactivate1';\r\nimport { setDeactivateCardType } from '../../redux/user/actions';\r\nimport './deactivateCard.scss';\r\nimport DeactivateAndTransfer0 from './DeactivateAndTransfer/DeactivateAndTransfer0';\r\nimport DeactivateAndTransfer1 from './DeactivateAndTransfer/DeactivateAndTransfer1';\r\nimport DeactivateAndTransfer2 from './DeactivateAndTransfer/DeactivateAndTransfer2';\r\nimport deactivateAndTransferAnother0 from './DeactivateAndTransferAnother/DeactivateAndTransferAnother0';\r\nimport deactivateAndTransferAnother1 from './DeactivateAndTransferAnother/DeactivateAndTransferAnother1';\r\nimport deactivateAndTransferAnother2 from './DeactivateAndTransferAnother/DeactivateAndTransferAnother2';\r\n\r\nconst DeactivateCard = ({ fields, t, rendering }, props) => {\r\n const userInfo = useSelector((s) => s.user);\r\n const fareMedias = useSelector((reduxState) => reduxState.user.fareMedias);\r\n const cartItems = useSelector((reduxState) => reduxState.user.shoppingCart.items);\r\n const subTotal = cartItems ? cartItems.reduce((acc, val) => acc + val.subTotal, 0) : 0;\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => {\r\n setStep(0);\r\n focusDiv.current.focus();\r\n };\r\n const toPreviousStep = () => {\r\n setStep(step - 1);\r\n focusDiv.current.focus();\r\n };\r\n const [state, setState] = useState({});\r\n const location = useLocation();\r\n const returnUrl = `${getServerUrl()}${location.pathname}`;\r\n const [isError, setIsError] = useState(false);\r\n const dispatch = useDispatch();\r\n const [stepItemLists, setStepItemLists] = useState([]);\r\n const [DeactivateFlow, setDeactivateFlow] = useState('');\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n let deactivateCard = useSelector((reduxState) => reduxState.user.deactivateCardType);\r\n const [isTransferBalance, setIsTransferBalance] = useState(fields?.IsTransferBalance.value);\r\n let stepDeactivateNew = [\r\n DeactivateAndTransferNew0,\r\n DeactivateAndTransferNew1,\r\n DeactivateAndTransferNew2,\r\n DeactivateAndTransferNew3,\r\n ];\r\n let stepDeactivateAndTransfer = [\r\n DeactivateAndTransfer0,\r\n DeactivateAndTransfer1,\r\n DeactivateAndTransfer2,\r\n ];\r\n let stepDeactivate = [Deactivate0, Deactivate1];\r\n let stepTransferExisting = [DeactivateAndTransfer1, DeactivateAndTransfer2];\r\n let stepTransferAnother = [\r\n deactivateAndTransferAnother0,\r\n deactivateAndTransferAnother1,\r\n deactivateAndTransferAnother2,\r\n ];\r\n let Stepper = stepDeactivateNew[step];\r\n\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.IframeJs').map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n dispatch(setDeactivateCardType(''));\r\n document.body.removeChild(script);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] !== '') {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n dispatch(setDeactivateCardType(''));\r\n }, []);\r\n\r\n if (deactivateCard?.deactivateCardType == 0) {\r\n Stepper = stepDeactivateNew[step];\r\n } else if (deactivateCard?.deactivateCardType == 1) {\r\n if (isTransferBalance) {\r\n Stepper = stepTransferExisting[step];\r\n } else {\r\n Stepper = stepDeactivateAndTransfer[step];\r\n }\r\n } else if (deactivateCard?.deactivateCardType == 2) {\r\n Stepper = stepDeactivate[step];\r\n } else {\r\n Stepper = stepTransferAnother[step];\r\n }\r\n\r\n let stepItemList = [];\r\n useEffect(() => {\r\n const elementData = document.getElementById('rlc-card');\r\n if (deactivateCard?.deactivateCardType && elementData) {\r\n elementData.style.display = 'none';\r\n }\r\n setDeactivateFlow(deactivateCard?.deactivateCardType);\r\n setState({ items: cartItems, fareMedias, total: subTotal });\r\n const deFlow = deactivateCard?.deactivateCardType;\r\n // step0 - shown in all flows\r\n const step0 = {\r\n text: (\r\n \r\n
\r\n )}\r\n />\r\n ) : (\r\n errorBlock()\r\n )}\r\n \r\n
\r\n {dateTime && (\r\n \r\n \r\n
\r\n )}\r\n {referenceNumber && (\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n window.print()} icon={printIcon}>\r\n {fields.Print.value}\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {\r\n api.refreshToken().then(() => {\r\n if (callBack) callBack();\r\n });\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(DeactivateCard);\r\n","import React, { useState, useRef } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { CardBlock } from '../../molecules';\r\nimport api from '../../services/api';\r\nimport { redirectToUrl, getRefreshToken, localstorageService } from '../../services/utils';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport './deleteAccount.scss';\r\n\r\nconst DeleteAccount = ({ fields, t }) => {\r\n const focusDiv = useRef();\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const [requestDeletion, setRequestdeletion] = useState(false);\r\n const [isButtonDisabled, setIsButtonDisabled] = useState(false);\r\n const [isProceedBtnDisabled, setProceedBtnDisable] = useState(true);\r\n const cwsRedirectUrl = fields.RedirectUrl?.value?.href;\r\n const gotostep2 = () => {\r\n document.body.scrollTop = document.documentElement.scrollTop = 0;\r\n setRequestdeletion(true);\r\n focusDiv.current.focus();\r\n };\r\n\r\n const cancelDeleteAccount = () => {\r\n redirectToUrl(fields.GoBackButtonUrl?.value?.href);\r\n };\r\n const clearReduxHistory = () => {\r\n localstorageService().removeItem('redux');\r\n localstorageService().removeItem(localStorageKeys.accessToken);\r\n localstorageService().removeItem(localStorageKeys.accessTokenValidity);\r\n localstorageService().removeItem(localStorageKeys.accessTokenLifetime);\r\n localstorageService().removeItem(localStorageKeys.refreshToken);\r\n localstorageService().removeItem(localStorageKeys.guestToken);\r\n localstorageService().removeItem(localStorageKeys.uniqueSessionId);\r\n localstorageService().removeItem(localStorageKeys.gtmContainerId);\r\n localstorageService().removeItem(localStorageKeys.unpaidFaresData);\r\n localstorageService().removeItem(localStorageKeys.unpaidFaresReposneData);\r\n localstorageService().removeItem(localStorageKeys.stsAccessToken);\r\n localstorageService().removeItem(localStorageKeys.unpaidFaresIndex);\r\n localstorageService().removeItem(localStorageKeys.paymentsToVerifyData);\r\n api.deleteaccountSignOut(cwsRedirectUrl);\r\n };\r\n\r\n const deleteAccountSubmitHandler = () => {\r\n setIsButtonDisabled(true);\r\n setProceedBtnDisable(false);\r\n const payload = {\r\n Category: fields?.Category?.value,\r\n Comments: fields?.Comment?.value,\r\n IsRevertBack: true,\r\n Source: 'CWS',\r\n CustomerId: userInfo.customerId,\r\n FirstName: userInfo.firstName,\r\n LastName: userInfo.lastName,\r\n Email: userInfo.email,\r\n PhoneNumber: userInfo.phoneNumber ? userInfo.phoneNumber : '',\r\n };\r\n api\r\n .customerAccountDeletion(payload)\r\n .then((response) => {\r\n if (response?.data?.Success) {\r\n api\r\n .logOut({ Token: getRefreshToken() })\r\n .then(() => {\r\n clearReduxHistory();\r\n })\r\n .catch((e) => {\r\n setIsButtonDisabled(false);\r\n setProceedBtnDisable(true);\r\n });\r\n }\r\n else {\r\n setIsButtonDisabled(false);\r\n setProceedBtnDisable(true);\r\n }\r\n })\r\n .catch((err) => {\r\n setIsButtonDisabled(false);\r\n setProceedBtnDisable(true);\r\n });\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n {DeactivateFlow == 0 &&
\r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {!requestDeletion ? (\r\n \r\n \r\n \r\n gotostep2()}\r\n >\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n deleteAccountSubmitHandler()}\r\n isDisabled={isButtonDisabled}\r\n >\r\n cancelDeleteAccount()}\r\n buttonTextA11y={fields?.GoBackButtonA11y?.value}\r\n >\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(DeleteAccount);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { Button, ButtonBlock, Loader } from '../../atoms';\r\nimport { CardBlock } from '../../molecules';\r\nimport '../../molecules/page/Header/header.scss';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport './deleteAccountsuccess.scss';\r\n\r\nconst DeleteAccountSuccess = ({ fields }) => {\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const isAccountDeleted = userInfo.isAccountDeleted;\r\n const authenticated = userInfo.authenticated;\r\n const anonymous = userInfo.anonymous;\r\n const [isLoading, setIsLoading] = useState(false);\r\n useEffect(() => {\r\n if ((authenticated && !isAccountDeleted) || (anonymous)) {\r\n setIsLoading(true);\r\n redirectToUrl(fields.DeleteAccountRedirectUrl?.value?.href);\r\n }\r\n }, []);\r\n\r\n return (\r\n <>\r\n {isLoading && \r\n \r\n \r\n \r\n redirectToUrl(fields?.DoneButtonLink?.value?.href)}\r\n >\r\n {fields?.DoneButtonText?.value}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(DeleteAccountSuccess);\r\n","import React from 'react';\r\n\r\nimport './digital-distribution.scss';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst DigitalDistributionServices = (props) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DigitalDistributionServices;\r\n","import React, { useState } from 'react';\r\nimport './Divider.scss';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\n\r\nconst Divider = (props) => {\r\n const dividerClassName = (props && props.params.classname) ? props.params.classname : 'dividerlarge';\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [props]);\r\n\r\n if (!isLoaded) return null;\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\nexport default Divider;\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport { isJsonString, hasLongInputLabel } from '../../services/utils';\r\nimport apiResponses from '../../constants/apiResponses';\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport { updateUserInfo } from '../../redux/user/actions';\r\nimport { ButtonBlock, Button } from '../../atoms';\r\nimport { Error, TextInput, CardBlock, Header } from '../../molecules';\r\n\r\nexport default function UpdateEmail0({\r\n fields,\r\n toNextStep,\r\n setState,\r\n toFirstStep,\r\n t,\r\n userInfo,\r\n dispatch,\r\n}) {\r\n const [inlineErrorEmail, setInlineErrorEmail] = useState();\r\n const [inlineErrorPassword, setInlineErrorPassword] = useState();\r\n const [error, setIsError] = useState();\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n )}\r\n />\r\n \r\n {state.newEmail || state.verifiedEmail}\r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )}\r\n />\r\n {state.newEmail}
\r\n \r\n \r\n \r\n \r\n \r\n {props.fields.redirectToLink.value?.href !== '' && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n);\r\n\r\nexport default ErrorPage;\r\n","import React from 'react';\r\n\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './featuresBlock.scss';\r\n\r\nconst FeaturesBlock = (props) => (\r\n <>\r\n \r\n
\r\n \r\n);\r\n\r\nexport default FeaturesBlock;\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { PrestoLink, SocialLink } from '../../atoms';\r\nimport './footer.scss';\r\n\r\nconst Footer = (props) => {\r\n const { datasource } = props.fields.data ? props.fields.data : { children: [] };\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\nexport default withTranslation()(Footer);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport { getLongLanguageCode } from '../../services/utils';\r\nimport api from '../../services/api';\r\nimport { Error, InlineButtonBlock, TextInput } from '../../molecules';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\n\r\nexport default function SecurityQuestionStep({\r\n fields,\r\n toNextStep,\r\n state,\r\n setState,\r\n t,\r\n apiUrl,\r\n setIsServerError,\r\n securityQuestionSubmitsForm,\r\n}) {\r\n const [error, setIsError] = useState('');\r\n const question =\r\n state.questions && state.questions.find((i) => i.LanguageCode === getLongLanguageCode());\r\n\r\n return (\r\n <>\r\n {error ? \r\n {datasource && (\r\n <>\r\n \r\n
\r\n \r\n {datasource.children.map((columns) =>\r\n columns.Title && columns.Title.value !== null ? (\r\n
\r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n {columns.Title.value}
\r\n- \r\n {columns.children.map((a) => (\r\n
- \r\n
\r\n \r\n ))}\r\n
\r\n {columns.children.map((social) => (\r\n
\r\n )\r\n )}\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState, useRef } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport ForgotPassword1 from './ForgotPassword1';\r\nimport SecurityQuestionStep from '../shared/SecurityQuestionStep';\r\nimport ForgotPassword3 from './ForgotPassword3';\r\nimport ForgotPassword4 from './ForgotPassword4';\r\nimport { PrestoLink } from '../../atoms';\r\nimport { Header, Error, StepTracker } from '../../molecules';\r\nimport './forgot.scss';\r\nimport '../ForgotUsername/forgot.scss';\r\n\r\nconst stepsMap = [ForgotPassword1, SecurityQuestionStep, ForgotPassword3, ForgotPassword4];\r\n\r\nfunction ForgotPassword({ fields, t }) {\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const [isServerError, setIsServerError] = useState(false);\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const Stepper = stepsMap[step];\r\n const [state, setState] = useState({\r\n questions: [],\r\n });\r\n\r\n return (\r\n \r\n {\r\n api[apiUrl || 'validateSecurityQA']({\r\n ...state,\r\n SecurityQuestionId: question.Id,\r\n SecurityAnswer: values?.SecurityAnswer?.trim(),\r\n questions: undefined,\r\n }).then(({ data }) => {\r\n if (data.Success) {\r\n setState({\r\n ...state,\r\n username: data.UserName,\r\n encryptedSecurityKeyToken: data.encryptedSecurityKeyToken,\r\n });\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(data.Error, setIsError, setIsServerError);\r\n }\r\n }, handleServerError(setIsServerError, setIsError));\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {question && question.Text}
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default withTranslation()(ForgotPassword);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport { InlineButtonBlock, TextInput, Error } from '../../molecules';\r\n\r\nexport default function ForgotPassword1({ fields, toNextStep, t, setState, setIsServerError }) {\r\n const [error, setIsError] = useState('');\r\n\r\n return (\r\n <>\r\n {error ? \r\n {/* eslint-disable-next-line no-nested-ternary */}\r\n {isServerError ? (\r\n typeof isServerError === 'object' ? (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport { InlineButtonBlock, TextInput, Error, Note } from '../../molecules';\r\n\r\nexport default function ForgotPassword3({ fields, toNextStep, t, state, setIsServerError }) {\r\n const [error, setIsError] = useState('');\r\n\r\n return (\r\n <>\r\n {error ? \r\n {\r\n api\r\n .getSecurityQuestionsForExistingUser({\r\n PostalCode: values.PostalCode.toUpperCase(),\r\n UserName: values.UserName,\r\n })\r\n .then(({ data }) => {\r\n if (data.Success) {\r\n setState({ ...values, questions: data.securityQuestion });\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(data.Error, setIsError);\r\n }\r\n }, handleServerError(setIsServerError, setIsError));\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n */}\r\n
\r\n \r\n
\r\n \r\n {/* \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport { Success, InlineButtonBlock } from '../../molecules';\r\n\r\nexport default function ForgotPassword4({ fields }) {\r\n const history = useHistory();\r\n return (\r\n \r\n (\r\n \r\n
\r\n \r\n )}\r\n />\r\n\r\n()+,”]))[A-Za-z\\d@$!%*#?&\\'\\\"<>()+,”]{8,25}$/,\r\n t('forgotPasswordNewPasswordValidation')\r\n ),\r\n ConfirmNewPassword: Yup.string()\r\n .required(fields.enterConfirmPassword.value)\r\n .oneOf([Yup.ref('Password'), null], t('forgotPasswordPaswordsNotMatched')),\r\n })}\r\n onSubmit={(values) => {\r\n api\r\n .resetPassword({\r\n Password: values.Password,\r\n encryptedSecurityKeyToken: state.encryptedSecurityKeyToken,\r\n })\r\n .then(({ data }) => {\r\n if (data.Success) {\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(data.Error, setIsError);\r\n }\r\n }, handleServerError(setIsServerError, setIsError));\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )}\r\n />\r\n\r\n
\r\n \r\n {t('StepperChangeSRText')}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default withTranslation()(ForgotUsername);\r\n","import React, { useState } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport { Note, Error, InlineButtonBlock, TextInput } from '../../molecules';\r\n\r\nexport default function ForgotUsername1({ fields, toNextStep, setState, setIsServerError, t }) {\r\n const [error, setIsError] = useState('');\r\n const [inlineError, setInlineError] = useState('');\r\n\r\n return (\r\n <>\r\n {error ? \r\n {isServerError ? (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { InlineButtonBlock, Success } from '../../molecules';\r\n\r\nexport default function ForgotUsername3({ fields, state }) {\r\n const history = useHistory();\r\n return (\r\n \r\n \r\n {\r\n api.getSecurityQuestions(values).then(({ data }) => {\r\n if (data.Success) {\r\n setState({ ...values, questions: data.securityQuestion });\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(data.Error, setIsError, null, setInlineError);\r\n }\r\n }, handleServerError(setIsServerError, setIsError));\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\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 FourthcolumnLayout;\r\n","import React from 'react';\r\n\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst FullScreenLayout = (props) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\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 withTranslation()(FullWidthLayout);\r\n","import React, { useState } from 'react';\r\nimport { RichText, Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport './globalNotification.scss';\r\n\r\nconst GlobalNotification = (props) => {\r\n const [divAppear, setDivAppear] = useState(true);\r\n\r\n return divAppear ? (\r\n \r\n \r\n\r\n
\r\n ) : null;\r\n};\r\n\r\nexport default GlobalNotification;\r\n","export default {\r\n english: 'EN_CA',\r\n french: 'FR_CA',\r\n failedTwoMany: 'FAILED_TOO_MANY_INSPECTIONS',\r\n chargeBackFraud: 'CHARGEBACK_FRAUD',\r\n backOfficeOverride: 'BACK_OFFICE_OVERRIDE',\r\n setDefaultTrip: 'DEFAULT_TRIP_SET',\r\n removeDefaultTrip: 'DEFAULT_TRIP_REMOVE',\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { ButtonBlock, Button, Loader } from '../../atoms';\r\nimport routes from '../../constants/routes';\r\nimport api from '../../services/api';\r\nimport goDefaultTripConstants from '../../constants/goDefaultTrip';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport GOTransitAgencyImg from '../../assets/images/GO.svg';\r\nimport './goDefaultTrip.scss';\r\n\r\nexport default function RetrieveDefaultTrip({ props,\r\n checkError,\r\n apiStatus,\r\n setApiStatus,\r\n setIsDefaultTrip,\r\n userInfoRegisteredUser,\r\n userInfoData,\r\n isContactlessUserSignedIn,\r\n locationId,\r\n getStationList\r\n}) {\r\n const [loading, setLoading] = useState(false);\r\n const focusDiv = useRef();\r\n\r\n const removeDefaultTrip = () => {\r\n setLoading(true);\r\n api\r\n .setOrUpdateDefaultTrip({\r\n CardType: isContactlessUserSignedIn ? userInfoData?.CardType : userInfoRegisteredUser?.type,\r\n FromLocationId: locationId?.FromLocationId,\r\n ToLocationId: locationId?.ToLocationId,\r\n ActionType: goDefaultTripConstants.removeDefaultTrip,\r\n MediaInstanceId: isContactlessUserSignedIn ? userInfoData?.MediaKeyDetails[0]?.mediaInstanceId : userInfoRegisteredUser?.visibleId.split('|')[0]\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n setApiStatus({ submit: true, state: 'SUCCESS' });\r\n }\r\n else {\r\n // setApiStatus({ submit: true, state: 'ERROR' });\r\n // setCheckError(true)\r\n redirectToUrl(routes.technicalDifficulties);\r\n }\r\n setLoading(false);\r\n }).catch(() => {\r\n redirectToUrl(routes.technicalDifficulties);\r\n setLoading(false);\r\n });\r\n\r\n };\r\n\r\n useEffect(() => {\r\n if (apiStatus.submit) {\r\n focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n }\r\n }, [apiStatus]);\r\n\r\n const changeDefaultTrip = () => {\r\n setIsDefaultTrip(false);\r\n getStationList();\r\n };\r\n\r\n const showMessage = () => {\r\n if (checkError) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {/* To Do: Map error message if not routing to Technical Difficulties page */}\r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n return [\r\n !apiStatus.submit ? (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : showMessage(),\r\n loading ? \r\n \r\n
\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/* To Do: Map error message if not routing to Technical Difficulties page */}\r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n return [\r\n !apiStatus.submit ? (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n let fromStation = locationId?.FromLocationId.toString();\r\n let toStation = locationId?.ToLocationId.toString();\r\n if (values.SelectStation1 === fromStation && values.SelectStation2 === toStation) {\r\n setFieldError('SelectStation1', props.fields.changeDropDownMessage?.value);\r\n setFieldError('SelectStation2', props.fields.changeDropDownMessage?.value);\r\n } else {\r\n setOrUpdateDefaultTrip(values);\r\n }\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n \r\n ) : (\r\n showMessage()\r\n ),\r\n loading ? \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
,\r\n isContactlessUserSignedIn ? (\r\n isLessTransactionHistory ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n isCardBlocked ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )\r\n )\r\n )\r\n ) : (\r\n isCardBlocked ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )\r\n )\r\n ),\r\n loading ? \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GoogleMap;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport { DialogContent } from '@material-ui/core';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Button, ButtonBlock, Loader } from '../../atoms';\r\nimport * as Yup from 'yup';\r\nimport { Formik, Field } from 'formik';\r\nimport signInFormFields from '../../constants/signInFormFields';\r\nimport api from '../../services/api';\r\nimport routes from '../../constants/routes';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport {\r\n changeUserStatus,\r\n itemsAreLoading,\r\n fetchAllData,\r\n fetchAllDataSuccessfullyLoaded,\r\n fetchAvailableSettings,\r\n setWeakAccount,\r\n setGuestUserCartCheckout,\r\n setGuestUserEnabled,\r\n setGuestSignPopupEnabled,\r\n setUserSignedfromGuestFlow,\r\n setGuestShoppingCartPayload,\r\n removeFromShoppingCart,\r\n addShoppingCartMessage,\r\n setShoppingCart,\r\n setGuestShoppingCartToken,\r\n} from '../../redux/user/actions';\r\nimport {\r\n localstorageService,\r\n redirectToUrl,\r\n updateRecaptchaToken,\r\n resetAccessTokenValidity,\r\n} from '../../services/utils';\r\nimport { Error, TextInput, MediaImageList } from '../../molecules';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport ReCaptchaFormField from '../shared/ReCaptchaFormField';\r\nimport './GuestSignin.scss';\r\nimport HeaderLogo from '../../assets/images/PRESTO-Header-Logo.svg';\r\n\r\nconst GuestSignin = (props) => {\r\n const [error, setError] = useState('');\r\n const [errorTitleMsg, setErrorTitleMsg] = useState(false);\r\n const [errorTitle] = useState(props.t('registeredAccountSignInTitleErrorMessage'));\r\n const [open, setOpen] = useState(false);\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [settings, setSettings] = useState([]);\r\n const [startedLogin, setStartedLogin] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dispatch = useDispatch();\r\n let usernameInputRef = useRef();\r\n const guestSigninPopup = useSelector((reduxState) => reduxState.user.guestSignPopupEnabled);\r\n const guestuserCheckout = useSelector((reduxState) => reduxState.user.guestuserCheckoutEnabled);\r\n const shoppingCart = useSelector((reduxState) => reduxState.user.shoppingCart);\r\n const cartItems = useSelector((reduxState) => reduxState.user.shoppingCart.items);\r\n const guestSCPayload = useSelector((reduxState) => reduxState.user.guestShoppingCartPayload);\r\n const guestSCT = useSelector((reduxState) => reduxState.user.guestShoppingCartToken);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const anonymous = useSelector((state) => state.user && state.user.anonymous);\r\n const guestpopupfromordercard = useSelector(\r\n (reduxState) => reduxState.user.guestsiginPopupfromOrderCard\r\n );\r\n const userInfo = useSelector((s) => s.user);\r\n const configKeys = useSelector((state) => state.settings.configKeys);\r\n const [captchaDisable, setCaptchaDisable] = useState(true);\r\n const {\r\n fetchAllDataSuccess,\r\n isWeakPasswordAndQaAVisible,\r\n isWeakPasswordVisible,\r\n isWeakQaAVisible,\r\n emailError,\r\n } = userInfo;\r\n const orderLineId =\r\n cartItems &&\r\n cartItems.filter((item) => {\r\n return item.name === 'Single Farecard';\r\n });\r\n\r\n const handleClose = () => {\r\n // setOpen(false);\r\n };\r\n\r\n const GuestContinueCheckoutHandler = () => {\r\n setOpen(false);\r\n dispatch(\r\n setGuestUserCartCheckout({\r\n continueCheckout: true,\r\n })\r\n );\r\n };\r\n\r\n const GuestContinuefromOrderCardHandler = () => {\r\n setOpen(false);\r\n let payload = {\r\n customerId: '',\r\n VisibleId: 'NEWMEDIA',\r\n mediaId: '',\r\n SctToken: guestUserInfo?.isGuestLogin ? guestSCT.sct : '',\r\n CctToken: '',\r\n IsGuestFlow: guestUserInfo?.isGuestLogin ? true : false,\r\n };\r\n\r\n api\r\n .buyAprestoCardCommenceCheckOut(payload)\r\n .then((res) => {\r\n dispatch(setGuestShoppingCartToken(res.data.Cookies));\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: false }));\r\n const redirectUrl = routes.checkout;\r\n redirectToUrl(redirectUrl);\r\n })\r\n .catch(() => { });\r\n };\r\n\r\n const GuestSigninPopupClose = () => {\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: false }));\r\n setOpen(false);\r\n };\r\n\r\n const GuestSiginkeydownHandler = (e) => {\r\n if (e.keyCode == 13 || e.keyCode == 32) {\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: false }));\r\n setOpen(false);\r\n }\r\n };\r\n\r\n const backToCartHandler = () => {\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: false }));\r\n setOpen(false);\r\n };\r\n\r\n const removeItemfromCart = (callback) => {\r\n if (orderLineId && orderLineId.length) {\r\n const data = {\r\n customerId: userInfo.customerId,\r\n mediaId: userInfo.selectedCard.visibleId,\r\n orderLineId: orderLineId && orderLineId.length ? orderLineId[0].orderLineId : '',\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n dispatch(removeFromShoppingCart(data, callback));\r\n dispatch(addShoppingCartMessage(''));\r\n } else if (cartItems && cartItems.length) {\r\n cartItems.forEach((item, index, array) => {\r\n const data = {\r\n customerId: userInfo.customerId,\r\n mediaId: userInfo.selectedCard.visibleId,\r\n orderLineId: item.orderLineId,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n if (index === array.length - 1) {\r\n dispatch(removeFromShoppingCart(data, callback));\r\n } else {\r\n dispatch(removeFromShoppingCart(data));\r\n }\r\n dispatch(addShoppingCartMessage(''));\r\n });\r\n }\r\n };\r\n\r\n function login(values, setFieldError) {\r\n setError('');\r\n // dispatch(itemsAreLoading(true));\r\n setIsLoading(true);\r\n dispatch(fetchAllDataSuccessfullyLoaded(undefined));\r\n return api\r\n .login({\r\n [signInFormFields.username]: values[signInFormFields.username],\r\n [signInFormFields.password]: values[signInFormFields.password],\r\n [signInFormFields.googleToken]: captchaDisable\r\n ? 'googleCaptchaToken'\r\n : values[signInFormFields.googleToken],\r\n })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n setStartedLogin(true);\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Refresh_token);\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n resetAccessTokenValidity();\r\n dispatch(setGuestShoppingCartPayload(shoppingCart));\r\n dispatch(changeUserStatus(true));\r\n dispatch(fetchAllData());\r\n dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: false }));\r\n GuestSigninPopupClose();\r\n\r\n if (values[signInFormFields.remember]) {\r\n localstorageService().setItem(\r\n localStorageKeys.rememberedUsername,\r\n values[signInFormFields.username] || ''\r\n );\r\n } else {\r\n localstorageService().setItem(localStorageKeys.rememberedUsername, '');\r\n }\r\n // setIsLoading(false);\r\n } else {\r\n setIsLoading(false);\r\n\r\n if (res.data.Message) {\r\n const data = JSON.parse(res.data.Message);\r\n if (data.Code === 'AFMS-DAX-FE-0000' || data.Code === 'AFMS-DAX-FE-0005') {\r\n setError(props.fields.InvalidUsernamePassword.value);\r\n }\r\n if (data.Code === 'AFMS-CRT-FE-0032') {\r\n setError(props.fields.UnVerifiedEmailError.value);\r\n }\r\n if (data.Code === 'AFMS-DAX-FE-0008') {\r\n setErrorTitleMsg(props.fields.PasswordLimitErrorNext.value);\r\n setError(props.fields.PasswordLimitErrorNext.value);\r\n }\r\n }\r\n }\r\n })\r\n .catch((res) => {\r\n setIsLoading(false);\r\n setFieldError(signInFormFields.googleToken, 1);\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n\r\n const addGuestProducttoCart = async (payload) => {\r\n await api.addProductToCart(payload).then((res) => {\r\n dispatch(setShoppingCart(res.data.ShoppingCart.Order, false));\r\n dispatch(setUserSignedfromGuestFlow(true));\r\n GuestSigninPopupClose();\r\n setIsLoading(false);\r\n // if (guestSigninPopup) {\r\n // const redirectUrl = routes.checkout;\r\n // redirectToUrl(redirectUrl);\r\n // }\r\n });\r\n };\r\n\r\n const reAddtheItemstoCart = () => {\r\n let epurse = guestSCPayload.items.filter((x) => x.productFamily === 'Epurse');\r\n let passes = guestSCPayload.items.filter((x) => x.productFamily === 'CAPP');\r\n\r\n if (epurse.length > 0) {\r\n let payload = {\r\n customerId: userInfo.customerId !== undefined ? userInfo.customerId : null,\r\n visibleId: 'NEWMEDIA',\r\n productId: epurse[0].id,\r\n price: epurse[0].subTotal,\r\n quantity: 1,\r\n IsNewCardAdded: false,\r\n IsOrderCard: true,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n api.addFundToCart(payload).then((res) => {\r\n dispatch(setShoppingCart(res.data.ShoppingCart.Order, false));\r\n dispatch(setUserSignedfromGuestFlow(true));\r\n GuestSigninPopupClose();\r\n setIsLoading(false);\r\n // if (guestSigninPopup) {\r\n // const redirectUrl = routes.checkout;\r\n // redirectToUrl(redirectUrl);\r\n // }\r\n });\r\n }\r\n\r\n if (passes.length > 0) {\r\n for (let i = 0; i < passes.length; i++) {\r\n let payload = {\r\n customerId: userInfo.customerId !== undefined ? userInfo.customerId : null,\r\n visibleId: 'NEWMEDIA',\r\n productId: passes[i].id,\r\n price: passes[i].subTotal,\r\n quantity: 1,\r\n IsNewCardAdded: epurse.length > 0 ? true : false,\r\n IsOrderCard: true,\r\n IsAnonymousUser: anonymous ? true : false,\r\n };\r\n addGuestProducttoCart(payload);\r\n }\r\n }\r\n };\r\n\r\n function redirectAfterLogin() {\r\n reAddtheItemstoCart();\r\n // const redirectUrl = routes.checkout;\r\n // redirectToUrl(redirectUrl);\r\n }\r\n\r\n function onRedirection() {\r\n dispatch(itemsAreLoading(false));\r\n if (isWeakPasswordAndQaAVisible || isWeakPasswordVisible || isWeakQaAVisible) {\r\n dispatch(setWeakAccount(true));\r\n // setState({ showPopup: 'true' });\r\n } else if (!isWeakPasswordAndQaAVisible || !isWeakPasswordVisible || !isWeakQaAVisible) {\r\n if (!fetchAllDataSuccess && emailError) {\r\n // handleServerSuccessError(emailError, setError);\r\n if (emailError) {\r\n const data = JSON.parse(emailError);\r\n if (data.Code === 'AFMS-CRT-FE-0032') {\r\n setError(props.fields.UnVerifiedEmailError.value);\r\n }\r\n }\r\n } else if (fetchAllDataSuccess) {\r\n redirectAfterLogin();\r\n } else {\r\n //console.log('error redirection', fetchAllDataSuccess);\r\n redirectAfterLogin();\r\n // handleLogOut(dispatch, '/technical-difficulties');\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n api.getAllBusinessRules().then((res) => {\r\n if (res.status === 200) {\r\n setSettings(res.data);\r\n }\r\n });\r\n fetchAvailableSettings(dispatch);\r\n if (window.outerWidth < 920) {\r\n setIsMobile(true);\r\n } else {\r\n setIsMobile(false);\r\n }\r\n window.addEventListener(\r\n 'resize',\r\n function (event) {\r\n if (this.window.outerWidth < 920) {\r\n setIsMobile(true);\r\n } else {\r\n setIsMobile(false);\r\n }\r\n },\r\n true\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (error) {\r\n usernameInputRef.focus();\r\n }\r\n }, [error]);\r\n\r\n useEffect(() => {\r\n const reCaptchaDisable = configKeys\r\n .filter((item) => item.key === 'GoogleRecaptchaV3.Disable')\r\n .map((config) => config.setting);\r\n if (reCaptchaDisable.toString() === 'true') {\r\n setCaptchaDisable(true);\r\n } else {\r\n setCaptchaDisable(false);\r\n }\r\n }, [configKeys]);\r\n\r\n useEffect(() => {\r\n if (guestSigninPopup?.enablePopup) {\r\n setOpen(true);\r\n }\r\n }, [guestSigninPopup]);\r\n\r\n useEffect(() => {\r\n if (!startedLogin || fetchAllDataSuccess === undefined) {\r\n return;\r\n }\r\n setStartedLogin(false);\r\n if (cartItems && cartItems.length > 0) {\r\n removeItemfromCart(onRedirection);\r\n } else {\r\n onRedirection();\r\n }\r\n }, [startedLogin, fetchAllDataSuccess]);\r\n\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n {!isMobile && (\r\n <>\r\n {\r\n GuestSigninPopupClose();\r\n }}\r\n onKeyDown={GuestSiginkeydownHandler}\r\n />\r\n \r\n )}\r\n {isMobile && (\r\n <>\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n {props.fields.BacktoCart.value}
\r\n \r\n )}\r\n \r\n {\r\n // if (captchaDisable) {\r\n // login(values, setFieldError);\r\n // } else {\r\n // updateRecaptchaToken(values, (updatedValues) =>\r\n // login(updatedValues, setFieldError)\r\n // );\r\n // }\r\n api.b2cGuestSignIn();\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {error ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(HeroBannerWithBackground);\r\n","import React from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport './heroBannerWithButton.scss';\r\nimport { setSignInOverlay } from '../../redux/contactless/actions';\r\nimport { Text, Image, RichText, Link } from '@sitecore-jss/sitecore-jss-react';\r\nconst HeroBannerWithButton = (props) => {\r\n const dispatch = useDispatch();\r\n const isUserSignedIn = useSelector((state) => state.contactless.isContactlessUserSignedIn);\r\n const redirectUrl = useSelector((state) => state.contactless.redirectUrl);\r\n const goTo = (url) => {\r\n if (url) {\r\n window.open(url, '_self');\r\n } else {\r\n if (!isUserSignedIn) {\r\n dispatch(setSignInOverlay(true));\r\n } else {\r\n window.open(redirectUrl, '_self');\r\n }\r\n }\r\n };\r\n return (\r\n <>\r\n {!props.fields.IsHomePageBanner.value && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n )}\r\n {props.fields.IsHomePageBanner.value && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n goTo(props.fields.SecondaryLink.value.href)}\r\n >\r\n {props.fields.ButtonText.value}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(HeroBannerWithButton);\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport { Button } from '../../atoms';\r\n\r\nimport './ImageCTALinkable.scss'\r\n\r\n// \r\n\r\nconst ImageCTALinkable = (props) => {\r\n\r\n \r\n\r\nreturn (\r\n \r\n
\r\n \r\n
\r\n \r\n {props.fields?.Title?.value && (\r\n \r\n
\r\n )}\r\n\r\n goTo(props.fields.SecondaryLink.value.href)}\r\n >\r\n {props.fields.ButtonText.value}\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n);\r\n\r\n}\r\n\r\n\r\n\r\nexport default withTranslation()(ImageCTALinkable);","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport './imageWithLink.scss';\r\nimport { Button } from '../../atoms';\r\n\r\nconst ImageParagraphwithButton = (props) => {\r\n //console.log('fields', props);\r\n return (\r\n \r\n\r\n \r\n\r\n\r\n\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ImageParagraphwithButton;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\n\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport './imageWithParagraph.scss';\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport {\r\n setGuestUserEnabled,\r\n setGuestSignPopupEnabled,\r\n setGuestSignPopupEnabledfromOrdercard,\r\n} from '../../redux/user/actions';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport { is } from '../../services/utils';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\n\r\nconst ImageWithParagraph = (props) => {\r\n const dispatch = useDispatch();\r\n const userInfo = useSelector((state) => state.user);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n let [showImage, setShowImage] = useState(true);\r\n const isMobile = useMediaWidth();\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n\r\n useEffect(() => {\r\n let hasUserInfo = userInfo.customerId ? true : false;\r\n if (document.getElementsByClassName('order_new_card_image_para').length > 0 && !hasUserInfo) {\r\n // guestuser\r\n setShowImage(true);\r\n dispatch(\r\n setGuestUserEnabled({\r\n isGuestLogin: true,\r\n })\r\n );\r\n } else if (\r\n document.getElementsByClassName('order_new_card_image_para').length > 0 &&\r\n hasUserInfo\r\n ) {\r\n // registereduser\r\n setShowImage(false);\r\n } else if (!document.getElementsByClassName('order_new_card_image_para').length > 0) {\r\n // staticpages\r\n setShowImage(true);\r\n }\r\n }, [isLoaded]);\r\n\r\n useEffect(() => {\r\n if (guestUserInfo?.isGuestLogin) {\r\n const element = document.getElementById('orderacardguestsignin');\r\n if (element !== null) {\r\n element.addEventListener('click', function () {\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: true }));\r\n dispatch(setGuestSignPopupEnabledfromOrdercard(true));\r\n });\r\n\r\n element.addEventListener('keydown', function (e) {\r\n if (e.code === 'Enter') {\r\n dispatch(setGuestSignPopupEnabled({ enablePopup: true }));\r\n dispatch(setGuestSignPopupEnabledfromOrdercard(true));\r\n }\r\n });\r\n }\r\n }\r\n }, [guestUserInfo]);\r\n\r\n const getHeading = (tag) => {\r\n if (tag === 'h2') {\r\n return 'h2';\r\n }\r\n if (tag === 'h3') {\r\n return 'h3';\r\n }\r\n return 'h1';\r\n };\r\n const hasTitle = props?.fields?.Title.value.length > 0;\r\n const hasDescription = props?.fields?.Description.value.length > 0;\r\n const setImageAtBottom = useMemo(() => {\r\n if (is(props?.params?.SetImageAtBottom)) {\r\n return Number(props.params.SetImageAtBottom) === 1;\r\n }\r\n return false;\r\n }, [props.params]);\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [props]);\r\n const imageContainer = () => [\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {\r\n window.location.href = props?.fields?.Pagelink?.value?.href;\r\n }}\r\n >\r\n {props.fields.Pagelink.value.text}\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
,\r\n \r\n
,\r\n ];\r\n if (!isLoaded) return null;\r\n return !showImage ? null : (\r\n \r\n {hasTitle && (\r\n
\r\n )}\r\n {isMobile || setImageAtBottom ? imageContainer() : null}\r\n \r\n \r\n
\r\n )}\r\n {hasDescription && (\r\n \r\n
\r\n )}\r\n \r\n \r\n {fields?.steps?.map((stepItem) => (\r\n <>\r\n {stepItem?.fields?.link?.value !== '' &&\r\n fields?.steps?.length === 1 &&\r\n stepItem?.fields?.stepImage?.value?.src && (\r\n <>\r\n = 4\r\n ? 'stepper-four-column'\r\n : params?.fourColumnLayout === 0 && fields?.steps?.length >= 3\r\n ? 'stepper-three-column'\r\n : ''\r\n }\r\n >{fields?.isMobileNotASlideShow?.value === true && typeof window !== 'undefined' &&\r\n typeof (document.getElementsByClassName('mobile-process-step-container process-step-layout-md')[0]) !== \"undefined\" &&\r\n typeof (document.getElementsByClassName('mobile-process-step-container process-step-layout-sm')[0]) !== \"undefined\" ?\r\n (document.getElementsByClassName('mobile-process-step-container process-step-layout-md')[0].style.display = 'block',\r\n document.getElementsByClassName('mobile-process-step-container process-step-layout-sm')[0].style.display = 'none')\r\n :\r\n \r\n {fields?.steps?.map((stepItem) => (\r\n <>\r\n {is([\r\n stepItem?.fields?.stepTitle?.value,\r\n stepItem?.fields?.stepDescription?.value,\r\n ]) ? (\r\n }\r\n
\r\n {is(fields?.googleWalletLink?.value?.href) ? (\r\n \r\n
\r\n \r\n )}\r\n\r\n {params?.fourColumnLayout == '1' && fields?.steps?.length >= 4 && (\r\n \r\n
\r\n \r\n
\r\n \r\n {is(stepItem?.fields?.stepImage?.value?.src) ? (\r\n
\r\n )}\r\n\r\n {params?.fourColumnLayout === undefined && fields?.steps?.length >= 3 && fields?.isImageAtBottom?.value === false && (\r\n //\r\n
\r\n ) : null}\r\n {is([\r\n stepItem?.fields?.stepTitle?.value,\r\n stepItem?.fields?.stepDescription?.value,\r\n ]) ? (\r\n \r\n {is(stepItem?.fields?.stepTitle?.value) ? (\r\n
\r\n ) : null}\r\n {stepItem?.fields?.stepTitle?.value}
\r\n ) : null}\r\n {is(stepItem?.fields?.stepDescription?.value) ? (\r\n{stepItem?.fields?.stepDescription?.value}
\r\n ) : null}\r\n\r\n
\r\n\r\n {/* mobile view */}\r\n \r\n {is(stepItem?.fields?.stepImage.value?.src) ? (\r\n
\r\n )}\r\n {params?.fourColumnLayout === undefined && fields?.steps?.length >= 3 && fields?.isImageAtBottom?.value === true && (\r\n //\r\n
\r\n ) : null}\r\n {is([\r\n stepItem?.fields?.stepTitle?.value,\r\n stepItem?.fields?.stepDescription?.value,\r\n ]) ? (\r\n \r\n {is(stepItem?.fields?.stepTitle?.value) ? (\r\n
\r\n ) : null}\r\n {stepItem?.fields?.stepTitle?.value}
\r\n ) : null}\r\n {is(stepItem?.fields?.stepDescription?.value) ? (\r\n{stepItem?.fields?.stepDescription?.value}
\r\n ) : null}\r\n\r\n
\r\n \r\n {is([\r\n stepItem?.fields?.stepTitle?.value,\r\n stepItem?.fields?.stepDescription?.value,\r\n ]) ? (\r\n
\r\n )}\r\n {is(fields?.googleWalletLink?.value?.href) ? (\r\n \r\n {is(stepItem?.fields?.stepTitle?.value) ? (\r\n
\r\n ) : null}\r\n {is(stepItem?.fields?.stepImage.value?.src) ? (\r\n {stepItem?.fields?.stepTitle?.value}
\r\n ) : null}\r\n {is(stepItem?.fields?.stepDescription?.value) ? (\r\n{stepItem?.fields?.stepDescription?.value}
\r\n ) : null}\r\n\r\n
\r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n \r\n ))}\r\n \r\n
\r\n {is(stepItem?.fields?.stepTitle?.value) ? (\r\n
\r\n ) : null}\r\n {stepItem?.fields?.stepTitle?.value}
\r\n ) : null}\r\n {is(stepItem?.fields?.stepDescription?.value) ? (\r\n\r\n {stepItem?.fields?.stepDescription?.value}\r\n
\r\n ) : null}\r\n\r\n {is(stepItem?.fields?.stepImage?.value?.src) ? (\r\n = 4\r\n ? '210'\r\n : '230'\r\n }\r\n field={stepItem?.fields?.stepImage}\r\n />\r\n ) : null}\r\n
\r\n {stepItem?.fields?.link?.value !== '' && fields?.steps?.length === 1 && (\r\n \r\n )}\r\n \r\n ))}\r\n \r\n
\r\n \r\n {fields?.steps[carouselstate.activeSlide]?.fields?.stepTitle?.value}\r\n {fields?.steps[carouselstate.activeSlide]?.fields?.stepDescription?.value}\r\n
\r\n\r\n
\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default ImageWithProcessStep;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './imageWithWalletInfo.scss';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport { is } from '../../services/utils';\r\n\r\nconst ImageWithWalletInfo = ({ fields }) => {\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [fields]);\r\n\r\n useEffect(() => {\r\n if (typeof window !== 'undefined' && document) {\r\n let h1 = document.getElementById('pay-with-title1');\r\n let h2 = document.getElementById('pay-with-title2');\r\n let h3 = document.getElementById('pay-with-title3');\r\n if (h1) {\r\n let width = Math.round(h1.getBoundingClientRect().width);\r\n let targetEl = document.getElementById('pay-with-desc1');\r\n if (width && targetEl) {\r\n targetEl.style.width = `${width}px`;\r\n }\r\n }\r\n if (h2) {\r\n let width = Math.round(h2.getBoundingClientRect().width);\r\n let targetEl = document.getElementById('pay-with-desc2');\r\n if (width && targetEl) {\r\n targetEl.style.width = `${width}px`;\r\n }\r\n }\r\n if (h3) {\r\n let width = Math.round(h3.getBoundingClientRect().width);\r\n let targetEl = document.getElementById('pay-with-desc3');\r\n if (width && targetEl) {\r\n targetEl.style.width = `${width}px`;\r\n }\r\n }\r\n }\r\n });\r\n if (!isLoaded) return null;\r\n\r\n return (\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ImageWithWalletInfo;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\nimport './leftNavigation.scss';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nconst LeftNavigation = (props) => {\r\n const { datasource } = props.fields && props.fields.data ? props.fields.data : { children: [] };\r\n const location = useLocation();\r\n const [navIndex, setNavIndex] = useState('0');\r\n const isContactlessAuthenticatedRedux = useSelector((state) => state.contactless.isContactlessUserSignedIn);\r\n const [isContactlessAuthenticated,setIsContactlessAuthenticated] = useState(false);\r\n \r\n useEffect(() => {\r\n const elementPos = document.getElementById(location.hash.substring(1));\r\n const offsetValue = elementPos?.offsetTop;\r\n if (offsetValue && typeof sessionStorage != 'undefined' && sessionStorage.getItem('goToUrl')) {\r\n window.scroll(0, offsetValue);\r\n }\r\n setIsContactlessAuthenticated(isContactlessAuthenticatedRedux);\r\n sessionStorage.removeItem('goToUrl');\r\n }, []);\r\n const goTo = () => {\r\n if (typeof sessionStorage != 'undefined') {\r\n sessionStorage.setItem('goToUrl', true);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {is(fields?.WalletInfoHeadline1.value) ? (\r\n
\r\n \r\n \r\n
\r\n
\r\n ) : null}\r\n {is(fields?.WalletInfoContent1.value) ? (\r\n \r\n
\r\n \r\n {is(fields?.WalletInfoHeadline2.value) ? (\r\n
\r\n \r\n \r\n
\r\n
\r\n ) : null}\r\n {is(fields?.WalletInfoContent2.value) ? (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LeftNavigation;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Text, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Loader } from '../../atoms';\r\nimport { Header } from '../../molecules';\r\nimport { hasAnyCard, getQueryParams } from '../../services/utils';\r\nimport '../../assets/scss/app.scss';\r\nimport './loadMyCard.scss';\r\n\r\nconst LoadMyCard = (props) => {\r\n const isScreenHeaderVisible = useSelector((reduxState) => reduxState.user.isScreenHeaderVisible);\r\n const [isTabClicked, showTab] = useState(false);\r\n const location = useLocation();\r\n const queryParams = getQueryParams(location.search);\r\n const authenticated = useSelector((state) => state.user && state.user.authenticated);\r\n\r\n const userInfo = useSelector((s) => s.user);\r\n\r\n let screenHeader = \r\n {hasAnyCard(userInfo) ? (\r\n <>\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {screenHeader}\r\n {\r\n // eslint-disable-next-line no-nested-ternary\r\n hasAnyCard(userInfo) ? (\r\n authenticated ? (\r\n !isTabClicked ? (\r\n \r\n {authenticated ? (\r\n <>\r\n {\r\n showTab(!isTabClicked);\r\n }}\r\n onKeyPress={() => {\r\n showTab(!isTabClicked);\r\n }}\r\n >\r\n {\r\n showTab(!isTabClicked);\r\n }}\r\n onKeyPress={() => {\r\n showTab(!isTabClicked);\r\n }}\r\n >\r\n
\r\n \r\n ) : null}\r\n \r\n \r\n
\r\n {contextText && (\r\n \r\n
\r\n {richText ?
\r\n )}\r\n {Content ?
\r\n \r\n );\r\n};\r\n\r\nexport default function InComplete({ title, titleA11y, Content, contextText, richText }) {\r\n const [inCompleteContent, setInCompleteContent] = useState(null);\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setInCompleteContent(\r\n \r\n {inCompleteContent}\r\n
\r\n );\r\n}\r\n","export default {\r\n Success: 'Success',\r\n Update: 'Update',\r\n Enroll: 'Enroll',\r\n Disable: 'Disable',\r\n EnrollCancel: 'EnrollCancel',\r\n UpdateCancel: 'UpdateCancel',\r\n DisableCancel: 'DisableCancel',\r\n IsMaxTryExceedsOnEnroll: 'IsMaxTryExceedsOnEnroll',\r\n IsMaxTryExceedsOnUpdate: 'IsMaxTryExceedsOnUpdate',\r\n IsMaxTryExceedsOnDisable:'IsMaxTryExceedsOnDisable',\r\n};\r\n","export const LOYALTY_SUMMARY_MONTHS_PERIOD = 2;\r\n","export default {\r\n INITIAL: 'INITIAL',\r\n LOADING: 'LOADING',\r\n SUCCESS: 'SUCCESS',\r\n ERROR: 'ERROR',\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport moment from 'moment';\r\n\r\nimport api from '../../services/api';\r\nimport { Button, IconButton, Loader } from '../../atoms';\r\nimport { setTransitPasses } from '../../redux/products/actions';\r\nimport { Select } from '../../molecules';\r\nimport { isFrench } from '../../services/utils';\r\nimport { LOYALTY_SUMMARY_MONTHS_PERIOD } from '../../constants/form.constants';\r\nimport API_STATUS from '../../constants/apiStatus';\r\nimport printIcon from '../../assets/images/printer.svg';\r\n\r\nimport './loyaltySummary.scss';\r\n\r\nconst CURRENT_MONTH = 2;\r\nconst PREVIOUS_MONTH = 3;\r\nconst REM_MONTH = 4;\r\nconst TOTAL_MONTH = 12;\r\n\r\nmoment.locale(isFrench() ? 'fr' : 'en');\r\nconst fromMonth = moment().subtract(LOYALTY_SUMMARY_MONTHS_PERIOD, 'months');\r\nconst toMonth = moment();\r\n\r\nconst LoyaltySummary = (props) => {\r\n const [serviceOptions, setServiceOptions] = useState([]);\r\n const [apiState, setApiState] = useState(API_STATUS.INITIAL);\r\n const [disableAgencyDropdown, setDisableAgencyDropdown] = useState(true);\r\n const dispatch = useDispatch();\r\n const userInfo = useSelector((s) => s.user);\r\n const [formError, setFormError] = useState(false);\r\n const [searchResponse, setSearchResponse] = useState({});\r\n const getMonthsBetweenDates = (startDate, endDate, returnFormat) => {\r\n let now = startDate.clone();\r\n let dates = [];\r\n while (now.isSameOrBefore(endDate)) {\r\n dates.push({ label: now.format(returnFormat), value: now.format('M') });\r\n now.add(1, 'months');\r\n }\r\n return dates;\r\n };\r\n\r\n const getMonthValue = (selected, current) => {\r\n let periodid;\r\n if (selected === 0) {\r\n periodid = 1;\r\n } else {\r\n let diff = current - selected;\r\n if (diff < 0) {\r\n diff += TOTAL_MONTH;\r\n }\r\n switch (diff) {\r\n case 0:\r\n periodid = CURRENT_MONTH;\r\n break;\r\n case 1:\r\n periodid = PREVIOUS_MONTH;\r\n break;\r\n default:\r\n periodid = REM_MONTH;\r\n }\r\n }\r\n return periodid;\r\n };\r\n\r\n useEffect(() => {\r\n if (!userInfo.fareMedias || !userInfo.selectedCard) return;\r\n api\r\n .getServiceProviders({\r\n visibleId: userInfo?.selectedCard?.visibleId,\r\n disableSitecoreFilter: true,\r\n })\r\n .then(({ data }) => {\r\n if (!data.Success) return;\r\n\r\n setServiceOptions(\r\n data.serviceProvider.map((i) => ({\r\n label: i.Name,\r\n value: i.Id,\r\n products: i.Products,\r\n }))\r\n );\r\n setDisableAgencyDropdown(!data.serviceProvider.length);\r\n dispatch(setTransitPasses(data));\r\n });\r\n }, []);\r\n\r\n const getLoyaltySummary = (formValues) => {\r\n let periodId = getMonthValue(Number(formValues?.month), Number(moment().format('M')));\r\n setApiState(API_STATUS.LOADING);\r\n let payload = {\r\n visibleId: userInfo?.selectedCard?.visibleId,\r\n periodId,\r\n providerId: formValues?.transitAgency,\r\n mediaId: userInfo?.selectedCard?.mediaId,\r\n };\r\n api\r\n .getLoyaltySummary(payload)\r\n .then((res) => {\r\n if (res?.data?.Success) {\r\n setApiState(API_STATUS.SUCCESS);\r\n setSearchResponse(res.data);\r\n } else {\r\n setApiState(API_STATUS.ERROR);\r\n }\r\n })\r\n .catch((err) => {\r\n setApiState(API_STATUS.ERROR);\r\n });\r\n };\r\n\r\n const showResultContent = () => {\r\n const {\r\n TotalFarePaidLabel,\r\n TotalDiscountReceived,\r\n NumberOfLoyaltyLabel,\r\n CurrentStep,\r\n LoyaltyCurrentStepText,\r\n } = props.fields;\r\n return (\r\n - \r\n
- \r\n {TotalFarePaidLabel.value}\r\n{searchResponse.TotalFarePaid}\r\n \r\n
- \r\n {TotalDiscountReceived.value}\r\n{searchResponse.TotalDiscountReceived}\r\n \r\n
- \r\n {NumberOfLoyaltyLabel.value}\r\n{searchResponse.NumberofLoyaltyTrips}\r\n \r\n
- \r\n {CurrentStep.value}\r\n{searchResponse.CurrentStep}\r\n \r\n
- \r\n {LoyaltyCurrentStepText.value}\r\n{searchResponse.NumberofLoyaltyApplicableTripsUntilNextStep}\r\n \r\n
\r\n {partDescriptionText?.length\r\n ? [\r\n
\r\n );\r\n};\r\n\r\nexport default LoyaltySummary;\r\n","import React, { useState } from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { PrestoLink, Button } from '../../atoms';\r\nimport api from '../../services/api';\r\nimport './MainHeroBanner.scss';\r\n\r\nconst MainHeroBanner = (props) => {\r\n const { datasource, contextItem } = props.fields && props.fields.data ? props.fields.data : {};\r\n const [slide, setSlide] = useState([\r\n { screenIndex: 0, visible: false },\r\n { screenIndex: 1, visible: false },\r\n ]);\r\n const [flag, setFlag] = useState(false);\r\n const sliderScreen = () => {\r\n return (\r\n <>\r\n \r\n
\r\n {\r\n getLoyaltySummary(values);\r\n }}\r\n validate={(values) => {\r\n const errors = {};\r\n if (!values.transitAgency) {\r\n errors.transitAgency = TransitAgencyErrordescription.value;\r\n }\r\n if (\r\n Object.prototype.hasOwnProperty.call(errors, 'transitAgency') ||\r\n Object.prototype.hasOwnProperty.call(errors, 'month')\r\n ) {\r\n setFormError(true);\r\n } else {\r\n setFormError(false);\r\n }\r\n return errors;\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
,\r\n apiState !== API_STATUS.INITIAL ? (\r\n <>\r\n \r\n {apiState === API_STATUS.SUCCESS && !isDataAvailable ? (\r\n
\r\n {apiState === API_STATUS.SUCCESS && isDataAvailable ? (\r\n \r\n {NoRecordstext.value}\r\n
\r\n ) : null}\r\n {apiState === API_STATUS.SUCCESS && isDataAvailable ? (\r\n \r\n {showResultContent()}\r\n
\r\n ) : null}\r\n {apiState === API_STATUS.ERROR ? (\r\n \r\n
\r\n ) : null}\r\n {ConnectErrorheading.value}
\r\n {ConnectionErrordescription.value}\r\n\r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {Print.value}\r\n \r\n
\r\n ) : null}\r\n \r\n ) : null,\r\n apiState === API_STATUS.LOADING ? \r\n {datasource.children.map((child, index) => {\r\n const isVisible = slide.filter(\r\n (el) => el.screenIndex === index && el.visible === true\r\n ).length;\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n );\r\n };\r\n return slide.filter((el) => el.visible).length ? (\r\n sliderScreen()\r\n ) : (\r\n \r\n \r\n {\r\n setSlide([\r\n { screenIndex: 0, visible: false },\r\n { screenIndex: 1, visible: false },\r\n ]);\r\n setFlag(true);\r\n }}\r\n >\r\n \r\n
\r\n {child.GoBack.jss.value}
\r\n \r\n\r\n \r\n
\r\n {child.Description.jss.value}\r\n
\r\n \r\n
\r\n {child.Description.jss.value}\r\n \r\n
\r\n \r\n
\r\n - \r\n {child.children.map((subchild, index) => {\r\n return (\r\n
- \r\n \r\n\r\n \r\n
{subchild.Title.jss.value}
\r\n{subchild.Description.jss.value}
\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(MainHeroBanner);\r\n","/* eslint-disable no-nested-ternary */\r\nimport React, { useState } from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Text, RichText, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport { Loader, AutoloadGridItem, ButtonBlock, Button } from '../../atoms';\r\nimport { Note, CardBlock } from '../../molecules';\r\nimport { formatDecimalWithCurrency, getQueryParams } from '../../services/utils';\r\n\r\nimport '../Autoload/autoload.scss';\r\nimport '../Autoload/autoloadPayment.scss';\r\nimport '../Autoload/autoloadSuccess.scss';\r\n\r\nconst ManageAutoload = ({\r\n fields,\r\n product,\r\n rendering,\r\n backToMyCardButtonLink,\r\n displayActivationNote,\r\n displayCancellationNote,\r\n}) => {\r\n const [isUpdateClicked, showUpdate] = useState(false);\r\n const [isCancelClicked, showCancel] = useState(false);\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const queryParams = getQueryParams(location.search);\r\n let content;\r\n content = \r\n
\r\n \r\n \r\n \r\n {datasource.Subtitle.jss.value}\r\n \r\n \r\n
\r\n {datasource.Title.jss.value}
\r\n \r\n\r\n \r\n {displayActivationNote ? (\r\n (\r\n \r\n (\r\n \r\n \r\n \r\n {\r\n dispatch(showScreenHeader(false));\r\n showCancel(!isCancelClicked);\r\n }}\r\n >\r\n {\r\n dispatch(showScreenHeader(false));\r\n showUpdate(!isUpdateClicked);\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 (isCancelClicked) {\r\n content = (\r\n \r\n {content}\r\n {queryParams.action !== 'update' ||\r\n !isCancelClicked ||\r\n !isUpdateClicked(\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ManageAutoload);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { StepTracker } from '../../molecules';\r\nimport './manageAutoRenew.scss';\r\nimport routes from '../../constants/routes';\r\nimport ManageAutoRenew1 from './manageAutoRenew1';\r\nimport ManageAutoRenew2 from './manageAutoRenew2';\r\nimport { getQueryParams } from '../../services/utils';\r\nimport handleThirdPartyError from '../../services/handleThirdPartyError';\r\n\r\nconst backToTransitPassesButtonLink = routes.transitPasses;\r\nconst stepsMap = [ManageAutoRenew1, ManageAutoRenew2];\r\nconst checkoutStep1 = 0;\r\nconst checkoutStep2 = 1;\r\n\r\nconst ManageAutoRenew = ({ fields, t }, props) => {\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const [thirdPartySystemErrorType, setThirdPartySystemErrorType] = useState('');\r\n const toCheckoutStep1 = () => {\r\n setStep(checkoutStep1);\r\n focusDiv.current.focus();\r\n };\r\n const toCheckoutStep2 = () => {\r\n setStep(checkoutStep2);\r\n focusDiv.current.focus();\r\n };\r\n const userInfo = useSelector((s) => s.user);\r\n const configKeys = useSelector((s) => s.settings.configKeys);\r\n const manageAutoRenew = useSelector((reduxState) => reduxState.products.manageAutoRenew);\r\n const { Step1Label, Step2Label } = fields;\r\n const Stepper = stepsMap[step];\r\n const queryParams = getQueryParams(useLocation().search);\r\n const isSuccess = queryParams.success;\r\n const error = queryParams.error;\r\n\r\n useEffect(() => {\r\n if (manageAutoRenew?.checkoutData?.isManageAutoRenew) {\r\n if (isSuccess === 'true') {\r\n setStep(checkoutStep2);\r\n focusDiv.current.focus();\r\n } else {\r\n let stepToSet = checkoutStep1;\r\n\r\n if (error) {\r\n handleThirdPartyError(error, (err) => {\r\n setThirdPartySystemErrorType(err);\r\n stepToSet = checkoutStep2;\r\n });\r\n }\r\n setStep(stepToSet);\r\n focusDiv.current.focus();\r\n }\r\n }\r\n }, [manageAutoRenew]);\r\n\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.IframeJs').map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] !== '') {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, []);\r\n\r\n return manageAutoRenew?.visibility ? (\r\n \r\n
\r\n )}\r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nexport default withTranslation()(ManageAutoRenew);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport moment from 'moment';\r\nimport { Placeholder, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { cloneDeep } from 'lodash';\r\n\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport { CardBlock, Error, Header, Select, PaymentModal } from '../../molecules';\r\nimport api from '../../services/api';\r\nimport { Button, ButtonBlock, InlineError, Loader, RadioInput } from '../../atoms';\r\nimport {\r\n formatDecimalWithCurrency,\r\n getLongLanguageCode,\r\n getServerUrl,\r\n redirectToUrl,\r\n isJsonString,\r\n} from '../../services/utils';\r\nimport { setManageAutoRenewMode } from '../../redux/products/actions';\r\nimport CreditCardImg from '../../assets/images/credit_card.png';\r\nimport AmericanExpress from '../../assets/images/Latest_American_Express.png';\r\nimport Interac from '../../assets/images/card_interac.png';\r\nimport MasterCard from '../../assets/images/mastercard_new.png';\r\nimport VisaCardImg from '../../assets/images/Visa_latest.png';\r\nimport Sears from '../../assets/images/Sears.png';\r\nimport MonerisVault from '../../assets/images/MonerisVault.png';\r\nimport MonerisToken from '../../assets/images/MonerisToken.png';\r\nimport Master from '../../assets/images/Master.png';\r\nimport Jcb from '../../assets/images/Jcb.png';\r\nimport Discover from '../../assets/images/Discover.png';\r\nimport Debit from '../../assets/images/Debit.png';\r\nimport Unipay from '../../assets/images/Unipay.png';\r\n\r\nconst ManageAutoRenew1 = ({\r\n t,\r\n fields,\r\n instance,\r\n userInfo,\r\n toCheckoutStep2,\r\n queryParams,\r\n TCrendering,\r\n configKeys,\r\n backToTransitPassesButtonLink,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const { Heading, BillingDateLabel, BillingDateLabelA11y } = fields;\r\n const [isSavedPaymentSetForCustomer, setSavedPaymentSetForCustomer] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [token, setToken] = useState('');\r\n const [isError, setIsError] = useState(null);\r\n const [calendarOptions, setCalendarOptions] = useState(null);\r\n const [checkoutData, setCheckoutData] = useState({});\r\n const [currentBillingMonth, setCurrentBillingMonth] = useState('');\r\n const [currentBillingYear, setCurrentBillingYear] = useState('');\r\n const [state, setState] = useState({});\r\n const customerId = userInfo.customerId;\r\n const visibleId = userInfo.selectedCard.visibleId;\r\n const userName = userInfo.userName;\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isGetTicketFetching, setIsGetTicketFetching] = useState(false);\r\n const [showCard, setShowCard] = useState({ paymenMethodsList: [] });\r\n const [isGetTicketFetchError, setIsGetTicketFetchError] = useState('');\r\n const [autorenewSubscriptionError, setAutorenewSubscriptionError] = useState('');\r\n const [initialMonth, setInitialMonth] = useState('');\r\n const [checkedCard, setCheckedCard] = useState(\"\");\r\n const [processdone,setProcessdone] = useState(false);\r\n\r\n\r\n const radioStyle = {\r\n margin: '16px 0px 16px 0px',\r\n };\r\n useEffect(() => {\r\n if (instance?.Product) {\r\n setCheckoutData({\r\n serviceProvider: instance?.Product.ProductServiceProvider.Id,\r\n productId: instance?.Product.ProductId,\r\n name: instance?.Product.ProductName,\r\n subTotal: instance?.Product.ProductPrice,\r\n validityStartDate: instance?.StartDateTime,\r\n validityEndDate: instance?.ExpiryDateTime,\r\n oldEndDate: instance?.ExpiryDateTime,\r\n autorenew: {\r\n month: currentBillingMonth,\r\n year: currentBillingYear,\r\n endDate:\r\n !currentBillingYear && !currentBillingMonth\r\n ? null : currentBillingYear === 1900\r\n ? `${currentBillingYear}-${currentBillingMonth}-1 00:00:00Z`\r\n : `${currentBillingYear}-${currentBillingMonth}-${new Date(\r\n currentBillingYear,\r\n parseInt(currentBillingMonth, 10),\r\n 0\r\n ).getDate()} 00:00:00Z`,\r\n },\r\n isManageAutoRenew: true,\r\n });\r\n }\r\n }, [currentBillingMonth, currentBillingYear]);\r\n const currentDate = new Date();\r\n const currentYear = currentDate.getFullYear();\r\n const currentMonth = currentDate.getMonth() + 1;\r\n function isMonthValid(selectedYear, monthOption) {\r\n if (selectedYear > currentYear) {\r\n return true;\r\n }\r\n return monthOption.value > currentMonth;\r\n }\r\n useEffect(() => {\r\n if (\r\n Object.prototype.hasOwnProperty.call(queryParams, 'error') &&\r\n (queryParams.error === '' || queryParams.error === 'true')\r\n ) {\r\n setIsError(true);\r\n }\r\n }, [queryParams]);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n document.body.scrollTop = 0;\r\n api\r\n .getRegisterPaymentMeansForCustomer({\r\n CustomerId: customerId,\r\n VisibleId: visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data?.Success) {\r\n if (response.data.RegisterPaymentMeansList[0]?.RegFormOfPaymRecId) {\r\n setSavedPaymentSetForCustomer(true);\r\n setShowCard({\r\n paymenMethodsList: response.data.RegisterPaymentMeansList,\r\n });\r\n let registerPaymentMeansList = response.data.RegisterPaymentMeansList;\r\n let padInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 0);\r\n let cardInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 1);\r\n\r\n setIsLoading(false);\r\n //To pre-select radio button on pageload\r\n if (padInSPM.length > 0) {\r\n var id = fields.AuthorizedLabel.value;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n \r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: padInSPM[0].RegFormOfPaymRecId,\r\n });\r\n\r\n }\r\n if (padInSPM.length == 0 && cardInSPM.length > 0) {\r\n var id = `**** ${cardInSPM[0].CreditCard.TruncatedPAN.slice(\r\n -4\r\n )}`;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: cardInSPM[0].RegFormOfPaymRecId,\r\n });\r\n }\r\n } else {\r\n setIsLoading(false);\r\n var id = fields.AdhocPaymentLabel.value;\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionDebit,\r\n });\r\n }\r\n } else {\r\n setIsLoading(false);\r\n }\r\n });\r\n api.getAutorenewCalendar().then((calendarResponse) => {\r\n if (!calendarResponse.data) return;\r\n\r\n const opts = {};\r\n Object.keys(calendarResponse.data).forEach((language) => {\r\n const dataPerLanguage = calendarResponse.data[language];\r\n\r\n const yearOpt = [...Array(dataPerLanguage.amountOfFutureYears + 1).keys()]\r\n .map((i) => i + currentYear)\r\n .map((year) => {\r\n return { value: year, label: year };\r\n });\r\n\r\n const monthOpt = Object.keys(dataPerLanguage.months).map((key) => {\r\n return { value: key, label: dataPerLanguage.months[key] };\r\n });\r\n opts[language] = { yearOpt, monthOpt };\r\n });\r\n setCalendarOptions(opts);\r\n });\r\n api\r\n .getAccessToken()\r\n .then((accessToken) => setToken(accessToken))\r\n .catch(() => {\r\n setToken('');\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if(processdone)\r\n setCheckboxState(checkedCard);\r\n \r\n}, [processdone]);\r\n\r\nconst setCheckboxState = (id) => {\r\n const element = document.getElementById(id);\r\n if (id && element) {\r\n element.checked = true;\r\n }\r\n};\r\n\r\n const postCpgAdHocPaymentForm = async () => {\r\n document.getElementById('frmPayment').submit();\r\n };\r\n const location = useLocation();\r\n const returnUrl = `${getServerUrl()}${location.pathname}`;\r\n\r\n const getTermsAndConditions = () => {\r\n const rendering1 = cloneDeep(TCrendering);\r\n const rendering2 = cloneDeep(TCrendering);\r\n rendering1.placeholders['presto-terms-and-conditions'].splice(1, 1);\r\n rendering2.placeholders['presto-terms-and-conditions'].splice(0, 1);\r\n return rendering1;\r\n };\r\n const monerisEnvironment =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.Environment').map((config) => config.setting);\r\n\r\n const handleMoneris = () => {\r\n setIsOpen(true);\r\n setIsGetTicketFetching(true);\r\n setIsLoading(false);\r\n api\r\n .getTicket({\r\n paymentProfileType: 'TOKENIZE',\r\n OrderNumber: '',\r\n customerId: customerId,\r\n VisibleId: visibleId,\r\n userName: userName,\r\n Amount: instance?.Product.ProductPrice,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n var myCheckout = new window.monerisCheckout();\r\n myCheckout.setMode(monerisEnvironment[0]);\r\n myCheckout.setCheckoutDiv('monerisCheckout');\r\n myCheckout.setCallback('page_loaded', PageLoad);\r\n myCheckout.setCallback('cancel_transaction', CancelTransaction);\r\n myCheckout.setCallback('error_event', ErrorEvent);\r\n myCheckout.setCallback('payment_receipt', PaymentReceipt);\r\n myCheckout.setCallback('payment_complete', PaymentComplete);\r\n myCheckout.startCheckout(response.data.TicketResponse.ticket);\r\n const ticketResponse = response.data.TicketResponse.ticket;\r\n\r\n function PageLoad() {\r\n setIsGetTicketFetching(false);\r\n setIsLoading(false);\r\n }\r\n\r\n function CancelTransaction() {\r\n setIsOpen(false);\r\n if (checkedCard && document.getElementById(checkedCard)) {\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n\r\n function PaymentComplete(args) {\r\n document.getElementById('monerisCheckout').innerHTML = '';\r\n document.getElementById('monerisCheckout').style = '';\r\n const parsedData = isJsonString(args) ? JSON.parse(args) : '';\r\n if (parsedData?.response_code !== '001') {\r\n setIsOpen(false);\r\n setAutorenewSubscriptionError(t('monerisPaymentError'));\r\n } else {\r\n setIsOpen(false);\r\n setIsLoading(true);\r\n api\r\n .updateAutorenewSubscriptionByMoneris({\r\n customerId: customerId,\r\n visibleId: visibleId,\r\n mediaId: userInfo.selectedCard.mediaId,\r\n productId: instance?.Product.ProductId,\r\n year: currentBillingYear,\r\n month: parseInt(currentBillingMonth),\r\n deviceId: userInfo.sessionInstanceId,\r\n ticket: ticketResponse,\r\n userName: userName,\r\n token: token,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n dispatch(\r\n setManageAutoRenewMode({\r\n visibility: true,\r\n instance,\r\n TCrendering,\r\n checkoutData,\r\n })\r\n );\r\n setIsGetTicketFetching(false);\r\n setIsLoading(false);\r\n toCheckoutStep2();\r\n } else {\r\n setIsGetTicketFetching(false);\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setAutorenewSubscriptionError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function PaymentReceipt(args) {\r\n PaymentComplete(args);\r\n }\r\n\r\n function ErrorEvent() {\r\n setIsOpen(false);\r\n }\r\n } else {\r\n setIsGetTicketFetching(false);\r\n setIsOpen(false);\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setIsGetTicketFetchError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n })\r\n .catch(() => { })\r\n .finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n };\r\n\r\n const getCardImage = (Type) => {\r\n let cardImage;\r\n switch (Type.toLowerCase()) {\r\n case 0:\r\n case 'v':\r\n case 'visa':\r\n cardImage = VisaCardImg;\r\n break;\r\n case 1:\r\n case 'm':\r\n case 'mastercard':\r\n cardImage = MasterCard;\r\n break;\r\n case 2:\r\n case 'americanexpress':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 3:\r\n case 'no':\r\n case 'discover':\r\n cardImage = Discover;\r\n break;\r\n case 4:\r\n case 'monerisvault':\r\n cardImage = MonerisVault;\r\n break;\r\n case 5:\r\n case 'moneristoken':\r\n cardImage = MonerisToken;\r\n break;\r\n case 6:\r\n case 'interac':\r\n cardImage = Interac;\r\n break;\r\n case 7:\r\n case 'master':\r\n cardImage = Master;\r\n break;\r\n case 8:\r\n case 'ax':\r\n case 'amex':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 9:\r\n case 'unknown':\r\n cardImage = CreditCardImg;\r\n break;\r\n case 10:\r\n cardImage = CreditCardImg;\r\n break;\r\n case 11:\r\n case 'c1':\r\n case 'jcb':\r\n cardImage = Jcb;\r\n break;\r\n case 12:\r\n case 'd':\r\n case 'debit':\r\n cardImage = Interac;\r\n break;\r\n case 13:\r\n case 'se':\r\n case 'sears':\r\n cardImage = Sears;\r\n break;\r\n case 14:\r\n case 'up':\r\n case 'unionpay':\r\n cardImage = Unipay;\r\n break;\r\n default:\r\n cardImage = CreditCardImg;\r\n }\r\n return cardImage;\r\n };\r\n\r\n var errors = {};\r\n const formRef1 = useRef(null);\r\n const formRef2 = useRef(null);\r\n\r\n const validate1 = (values) => {\r\n if (values.year !== 1900 && values.month === '') errors.month = \"Please select a month\";\r\n else delete errors.month;\r\n return errors;\r\n };\r\n const validate2 = (values) => {\r\n if (!values[sharedFormConstants.terms]) errors[sharedFormConstants.terms] = fields.TermsandConditionErrorMessage.value;\r\n else delete errors.terms;\r\n if (currentBillingYear !== 1900 && currentBillingMonth == '') errors.month = \"Please Select a Month\";\r\n else delete errors.month;\r\n return errors;\r\n };\r\n\r\n return [\r\n isLoading ? \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n \r\n {\r\n setProcessdone(false);\r\n const newState = { ...state };\r\n setIsLoading(true);\r\n if (newState.selectedCard === sharedFormConstants.cardOptionSaved) {\r\n api\r\n .manageAutorenewSubscription({\r\n VisibleId: userInfo.selectedCard.visibleId,\r\n CustomerId: userInfo.customerId,\r\n MediaId: userInfo.selectedCard.mediaId,\r\n ProductId: instance?.Product.ProductId,\r\n RegFormOfPaymRecId: state.regFormOfPaymRecId,\r\n PaymentGatewayResponse: null,\r\n Month: currentBillingMonth,\r\n Year: currentBillingYear,\r\n })\r\n .then((result) => {\r\n if (result.data.Success) {\r\n dispatch(\r\n setManageAutoRenewMode({\r\n visibility: true,\r\n instance,\r\n TCrendering,\r\n checkoutData,\r\n })\r\n );\r\n setIsLoading(false);\r\n toCheckoutStep2();\r\n } else {\r\n handleServerSuccessError(result.data.Error, setIsError);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoading(false);\r\n })\r\n .finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n } else {\r\n handleMoneris();\r\n }\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values }) => {\r\n return (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {BillingDateLabel.value}
\r\n{moment(instance?.ExpiryDateTime).utc().format('D MMM YYYY')}
\r\n{fields.AutorenewDescription.value}
\r\n\r\n \r\n {({ errors, touched, handleSubmit, values, setFieldValue }) => {\r\n setInitialMonth(moment(instance?.ExpiryDateTime).utc().format('M'));\r\n if (values.year === 1900 && values.month === \"\") {\r\n setCurrentBillingMonth(initialMonth);\r\n }\r\n else {\r\n setCurrentBillingMonth(values.month)\r\n }\r\n if (values.year !== currentBillingYear) {\r\n setCurrentBillingYear(values.year);\r\n }\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n \r\n {\r\n setState({ ...state, selectedCard: e.target.value });\r\n setCheckedCard(e.target.id);\r\n }}\r\n />\r\n
\r\n {isSavedPaymentSetForCustomer && (\r\n \r\n {showCard &&\r\n showCard.paymenMethodsList &&\r\n showCard.paymenMethodsList.map((card, index) => {\r\n if (card.AccountType === 1) {\r\n return (\r\n
\r\n )}\r\n \r\n {\r\n setState({\r\n ...state,\r\n selectedCard: e.target.value,\r\n regFormOfPaymRecId: card.RegFormOfPaymRecId,\r\n });\r\n setCheckedCard(e.target.id);\r\n }}\r\n cardImgSrc={getCardImage(card.CreditCard.CardType)}\r\n cardImgAlt=\"Media Icon\"\r\n sm\r\n />\r\n
\r\n );\r\n }\r\n if (card.AccountType === 0) {\r\n return (\r\n \r\n {\r\n setState({\r\n ...state,\r\n selectedCard: e.target.value,\r\n regFormOfPaymRecId: card.RegFormOfPaymRecId,\r\n });\r\n setCheckedCard(e.target.id);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n })}\r\n \r\n \r\n {errors[sharedFormConstants.terms]}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {state.selectedCard === sharedFormConstants.cardOptionDebit ? (\r\n \r\n
\r\n ) : null}\r\n \r\n (\r\n <>\r\n
\r\n );\r\n};\r\n\r\nexport default ManageAutoRenew2;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport { Button, ButtonBlock, MediaImage } from '../../atoms';\r\nimport { CardBlock, ValueRowSecond, Modal } from '../../molecules';\r\nimport { formatDecimalWithCurrency, redirectToUrl, formatUtcDate } from '../../services/utils';\r\nimport cardStatuses from '../../constants/cardStatuses';\r\nimport routes from '../../constants/routes';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport chevronUp from '../../assets/images/up.svg';\r\nimport chevronDown from '../../assets/images/down.svg';\r\nimport tick from '../../assets/images/TickBlack.svg';\r\nimport {\r\n setEditCardMode,\r\n setActivateCardMode,\r\n setChangeCardPinMode,\r\n setRemoveCardMode,\r\n} from '../../redux/products/actions';\r\nimport './manageMyProducts.scss';\r\n\r\nconst MediaListItem = ({ card, fields, t, isExpandedByDefault = false, isFirstCard }) => {\r\n const dispatch = useDispatch();\r\n const isAnonymous = card?.type === mediaSubTypes.anonymous;\r\n const [isExpanded, setIsExpanded] = useState(isExpandedByDefault);\r\n const [isConsessionStudent, setIsConsessionStudent] = useState(false);\r\n const collapsibleContentStyle = { display: isExpanded || isAnonymous ? 'block' : 'none' };\r\n const toggle = () => {\r\n setIsExpanded(!isExpanded);\r\n };\r\n\r\n const cardType = `${isAnonymous ? 'prestoCard' : `${card.type}Card`}`;\r\n const mediaImageProps = {\r\n big: true,\r\n [cardType]: true,\r\n };\r\n const isPrestoCard = card?.type === mediaSubTypes.presto;\r\n\r\n const showChangePinBtn = isPrestoCard && card.cardStateCode === cardStatuses.ActiveRegistered;\r\n const showActivationBtn = isPrestoCard && card.cardStateCode === cardStatuses.RegisteredNotActive;\r\n const fareTypeExpirationStudentChild =\r\n ((isPrestoCard || isAnonymous) && card.fareType === 'Student') ||\r\n ((isPrestoCard || isAnonymous) && card.fareType === 'Child');\r\n const fareTypeExpirationPostSecondary =\r\n (isPrestoCard || isAnonymous) && card.fareType.toUpperCase() === 'PS1';\r\n const fareTypeExpirationSpecificFare = (isPrestoCard || isAnonymous) && card.specificFare != '';\r\n\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n if (t(card.fareType) === t('Student')) {\r\n setIsConsessionStudent(true);\r\n }\r\n if (isFirstCard) {\r\n toggle();\r\n }\r\n }, []);\r\n\r\n if (!card.type) {\r\n return null;\r\n }\r\n const expiryValue = card?.endDate?.split('T');\r\n const date = expiryValue ? formatUtcDate(expiryValue[0]) : null;\r\n\r\n const prepareEditDetails = () => {\r\n dispatch(\r\n setEditCardMode({\r\n editCardDetailsEnabled: true,\r\n selectedCard: { ...card },\r\n })\r\n );\r\n };\r\n\r\n const prepareChangeCardPin = () => {\r\n dispatch(\r\n setChangeCardPinMode({\r\n changeCardPinEnabled: true,\r\n selectedCard: { ...card },\r\n })\r\n );\r\n };\r\n const activateSelectedCardDetails = () => {\r\n dispatch(\r\n setActivateCardMode({\r\n activateCardDetailsEnabled: true,\r\n selectedCard: { ...card },\r\n })\r\n );\r\n };\r\n\r\n const removeCard = () => {\r\n dispatch(\r\n setRemoveCardMode({\r\n removeCardEnabled: true,\r\n selectedCard: { ...card },\r\n })\r\n );\r\n };\r\n\r\n const anonymousCardHandler = () => {\r\n redirectToUrl(routes.loadMyCard);\r\n };\r\n\r\n const anonymousCardChangeHandler = (e) => {\r\n if (e.keyCode == 13) {\r\n redirectToUrl(routes.loadMyCard);\r\n }\r\n };\r\n\r\n const description = {\r\n value: fields.Description.value.replace('{fareTypeExpiry}', date),\r\n };\r\n\r\n const status = (cardsStatus) => {\r\n let cardStatus;\r\n switch (cardsStatus) {\r\n case 0:\r\n cardStatus = fields.InitializedAndNotActivated?.value;\r\n break;\r\n case 1:\r\n cardStatus = fields.Active?.value;\r\n break;\r\n case 2:\r\n cardStatus = fields.Hotlisted?.value;\r\n break;\r\n case 3:\r\n cardStatus = fields.Blocked?.value;\r\n break;\r\n case 4:\r\n cardStatus = fields.NotActivated?.value;\r\n break;\r\n case 5:\r\n cardStatus = fields.Inactive?.value;\r\n break;\r\n case 6:\r\n cardStatus = fields.Disposed?.value;\r\n break;\r\n case 7:\r\n cardStatus = fields.Rejected?.value;\r\n break;\r\n\r\n default:\r\n cardStatus = '';\r\n }\r\n\r\n return `${cardStatus}, ${fields.CardStatusNotRegistered?.value}`;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n {checkoutItems.length ? (\r\n \r\n
\r\n \r\n
\r\n {checkoutData.autorenew.endDate ? (\r\n \r\n {`${formatDate(new Date())} - ${formatDate(checkoutData.autorenew.endDate)}`}\r\n
\r\n ) : null}\r\n\r\n \r\n {fields.autorenewAgreementPeriodDescription.value\r\n .replace(\r\n '{monthly-payment-amount}',\r\n formatDecimalWithCurrency(checkoutData.subTotal)\r\n )\r\n .replace('{transit-pass-name}', checkoutData.name)}\r\n
\r\n \r\n
\r\n \r\n )}\r\n />\r\n ) : null}\r\n \r\n
\r\n \r\n redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.GoToTransitPassCTA.value}\r\n >\r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {fields.PrintCTA.value}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {card.type === mediaSubTypes.presto || card.type === mediaSubTypes.anonymous ? (\r\n \r\n {!isAnonymous && (\r\n \r\n {card.visibleId}\r\n
\r\n ) : null}\r\n {card.type === mediaSubTypes.presto ? (\r\n \r\n {card.nickName || '-'}\r\n
\r\n )}\r\n {card.type === mediaSubTypes.anonymous ? (\r\n \r\n {card.visibleId}\r\n
\r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n \r\n {!isAnonymous && (\r\n \r\n {formatDecimalWithCurrency(card.currentBalance)}\r\n
\r\n {card.isPrimary ? (\r\n \r\n 
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )}\r\n \r\n \r\n {isAnonymous && (\r\n \r\n \r\n {showChangePinBtn && (\r\n \r\n )}\r\n {!isPrestoCard ? (\r\n \r\n ) : null}\r\n \r\n {showActivationBtn && (\r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n ) : null}\r\n\r\n {isPrestoCard ? (\r\n <>\r\n \r\n {\r\n setIsModalOpen(true);\r\n }}\r\n aria-label={date}\r\n >\r\n
\r\n \r\n {fields.FareTypeExpirationLabel?.value}\r\n
\r\n {date}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n activateCardDetails()}\r\n >\r\n {fields.activateCardButton?.value.title}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(ManageMyProducts);\r\n","export default function handleAVSValidationError(queryParams, t) {\r\n if (!queryParams) {\r\n return;\r\n }\r\n if (queryParams.AVSResponse !== undefined && queryParams.AVSResponse.toUpperCase() === 'FALSE') {\r\n if (\r\n queryParams.CVVResponse !== undefined &&\r\n queryParams.CVVResponse.toUpperCase() === 'FALSE'\r\n ) {\r\n // eslint-disable-next-line consistent-return\r\n return t('directPaymentCouldNotBeProcessed');\r\n }\r\n\r\n // eslint-disable-next-line consistent-return\r\n return t('transactionDeclinedAVS');\r\n }\r\n\r\n if (queryParams.CVVResponse !== undefined && queryParams.CVVResponse.toUpperCase() === 'FALSE') {\r\n // eslint-disable-next-line consistent-return\r\n return t('directPaymentCouldNotBeProcessed');\r\n }\r\n if (\r\n queryParams.ResponseCode !== undefined &&\r\n queryParams.ResponseCode.toUpperCase() === 'FALSE'\r\n ) {\r\n // eslint-disable-next-line consistent-return\r\n return t('directPaymentCouldNotBeProcessed');\r\n }\r\n\r\n // eslint-disable-next-line consistent-return\r\n return t('directPaymentCouldNotBeProcessed');\r\n}\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { useLocation } from 'react-router-dom';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { StepTracker } from '../../molecules';\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport { getServerUrl, getQueryParams } from '../../services/utils';\r\nimport handleAVSValidationError from '../../services/handleAVSValidationError';\r\nimport ModifyAutoload1 from './ModifyAutoload1';\r\nimport ModifyAutoload2 from './ModifyAutoload2';\r\nimport ModifyAutoload3 from './ModifyAutoload3';\r\n\r\nimport '../Autoload/autoload.scss';\r\nimport '../Autoload/autoloadPayment.scss';\r\nimport '../Autoload/autoloadSuccess.scss';\r\n\r\nconst stepsModifyAutoloadMap = [ModifyAutoload1, ModifyAutoload2, ModifyAutoload3];\r\n\r\nconst ModifyAutoload = ({ fields, t, product, backToMyCardButtonLink, rendering }) => {\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => window.location.reload();\r\n const [state, setState] = useState({});\r\n const location = useLocation();\r\n const dispatch = useDispatch();\r\n\r\n const queryParams = getQueryParams(location.search);\r\n const errorDisplay = handleAVSValidationError(queryParams, t);\r\n\r\n useEffect(() => {\r\n if (queryParams.success === 'true') {\r\n const { loadAmount, thresholdAmount, transactionDate } = queryParams;\r\n dispatch(showScreenHeader(false));\r\n setState({\r\n ...state,\r\n loadAmount,\r\n thresholdAmount,\r\n transactionDate,\r\n });\r\n setStep(2);\r\n focusDiv.current.focus();\r\n }\r\n if (queryParams.error !== undefined || queryParams.cancel !== undefined) {\r\n const { loadAmount, thresholdAmount } = queryParams;\r\n setState({\r\n ...state,\r\n loadAmount,\r\n thresholdAmount,\r\n });\r\n setStep(1);\r\n focusDiv.current.focus();\r\n }\r\n }, []);\r\n\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'Moneris.IframeJs')\r\n .map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] != \"\") {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, []);\r\n\r\n const Stepper = stepsModifyAutoloadMap[step];\r\n\r\n const returnUrl = `${getServerUrl()}${location.pathname}`;\r\n\r\n return (\r\n <>\r\n {allCards.length ?
\r\n {!isAnonymous && (\r\n <>\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n\r\n \r\n
\r\n {error ? \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n api\r\n .isAutoloadAllowed({\r\n visibleId: userInfo.selectedCard.visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n api\r\n .isAutoloadAllowedWithBalance({\r\n autoLoadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n })\r\n .then((response2) => {\r\n if (response2.data.Success) {\r\n api\r\n .setupAutoloadDetails({\r\n autoloadStatementType: 0,\r\n customerId: userInfo.customerId,\r\n visibleId: userInfo.selectedCard.visibleId,\r\n nickName: userInfo.selectedCard.nickName,\r\n loadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n })\r\n .then((response3) => {\r\n if (response3.data) {\r\n setState({\r\n loadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n });\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(response2.data.Error, setIsError);\r\n }\r\n });\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { Placeholder, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport {\r\n getServerUrl,\r\n getLongLanguageCode,\r\n formatDecimalWithCurrency,\r\n isJsonString,\r\n} from '../../services/utils';\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport api from '../../services/api';\r\nimport { RadioInput, ButtonBlock, Button, Loader } from '../../atoms';\r\nimport { Error, PaymentModal } from '../../molecules';\r\nimport CreditCardImg from '../../assets/images/credit_card.png';\r\nimport AmericanExpress from '../../assets/images/Latest_American_Express.png';\r\nimport Interac from '../../assets/images/card_interac.png';\r\nimport MasterCard from '../../assets/images/mastercard_new.png';\r\nimport VisaCardImg from '../../assets/images/Visa_latest.png';\r\nimport Sears from '../../assets/images/Sears.png';\r\nimport MonerisVault from '../../assets/images/MonerisVault.png';\r\nimport MonerisToken from '../../assets/images/MonerisToken.png';\r\nimport Master from '../../assets/images/Master.png';\r\nimport Jcb from '../../assets/images/Jcb.png';\r\nimport Discover from '../../assets/images/Discover.png';\r\nimport Debit from '../../assets/images/Debit.png';\r\nimport Unipay from '../../assets/images/Unipay.png';\r\n\r\nexport default function ModifyAutoload2({\r\n fields,\r\n toNextStep,\r\n setState,\r\n state,\r\n toFirstStep,\r\n userInfo,\r\n configKeys,\r\n t,\r\n returnUrl,\r\n isError,\r\n errorContent,\r\n rendering,\r\n}) {\r\n const [isSavedPaymentSetForCustomer, setSavedPaymentSetForCustomer] = useState(false);\r\n const [isSavedPaymentSetForCustomerSelected, setSavedPaymentSetForCustomerSelected] = useState(\r\n false\r\n );\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [token, setToken] = useState('');\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isGetTicketFetching, setIsGetTicketFetching] = useState(false);\r\n const [showCard, setShowCard] = useState({ paymenMethodsList: [] });\r\n const [isGetTicketFetchError, setIsGetTicketFetchError] = useState('');\r\n const [modifySubscriptionError, setModifySubscriptionError] = useState('');\r\n const [checkedCard,setCheckedCard] = useState(\"\");\r\n const customerId = userInfo.customerId;\r\n const visibleId = userInfo.selectedCard.visibleId;\r\n const userName = userInfo.userName;\r\n const [processdone,setProcessdone] = useState(false);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n api\r\n .getRegisterPaymentMeansForCustomer({\r\n CustomerId: customerId,\r\n VisibleId: visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data?.Success) {\r\n if (response.data.RegisterPaymentMeansList[0]?.RegFormOfPaymRecId) {\r\n setSavedPaymentSetForCustomer(true);\r\n setShowCard({\r\n paymenMethodsList: response.data.RegisterPaymentMeansList,\r\n });\r\n \r\n let registerPaymentMeansList = response.data.RegisterPaymentMeansList;\r\n let padInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 0);\r\n let cardInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 1);\r\n\r\n setIsLoading(false);\r\n //To pre-select radio button on pageload\r\n if (padInSPM.length > 0) {\r\n var id = fields.authorizedLabel.value;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n \r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: padInSPM[0].RegFormOfPaymRecId,\r\n });\r\n\r\n }\r\n if (padInSPM.length == 0 && cardInSPM.length > 0) {\r\n var id = `**** ${cardInSPM[0].CreditCard.TruncatedPAN.slice(\r\n -4\r\n )}`;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: cardInSPM[0].RegFormOfPaymRecId,\r\n });\r\n \r\n\r\n /*\r\n var id = `**** ${response.data.RegisterPaymentMeansList[0].CreditCard.TruncatedPAN.slice(\r\n -4\r\n )}`;\r\n document.getElementById(id).checked = true;\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: response.data.RegisterPaymentMeansList[0].RegFormOfPaymRecId,\r\n });\r\n */\r\n }\r\n } else {\r\n setIsLoading(false);\r\n var id = fields.creditCardOption.value;\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionDebit,\r\n });\r\n }\r\n } else {\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n api\r\n .getAccessToken()\r\n .then((accessToken) => setToken(accessToken))\r\n .catch(() => {\r\n setToken('');\r\n });\r\n }, []);\r\n \r\n useEffect(() => {\r\n if(processdone)\r\n setCheckboxState(checkedCard);\r\n \r\n}, [processdone]);\r\n\r\nconst setCheckboxState = (id) => {\r\n const element = document.getElementById(id);\r\n if (id && element) {\r\n element.checked = true;\r\n }\r\n};\r\n\r\n const monerisEnvironment =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.Environment').map((config) => config.setting);\r\n\r\n const postCpgAdHocPaymentForm = async () => {\r\n document.getElementById('frmPayment').submit();\r\n };\r\n\r\n const handleMoneris = () => {\r\n setIsOpen(true);\r\n setIsLoading(false);\r\n setIsGetTicketFetching(true);\r\n api\r\n .getTicket({\r\n paymentProfileType: 'TOKENIZE',\r\n OrderNumber: '',\r\n CustomerId: customerId,\r\n VisibleId: visibleId,\r\n userName: userName,\r\n amount: 0,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n var myCheckout = new window.monerisCheckout();\r\n myCheckout.setMode(monerisEnvironment[0]);\r\n myCheckout.setCheckoutDiv('monerisCheckout');\r\n myCheckout.setCallback('page_loaded', PageLoad);\r\n myCheckout.setCallback('cancel_transaction', CancelTransaction);\r\n myCheckout.setCallback('error_event', ErrorEvent);\r\n myCheckout.setCallback('payment_receipt', PaymentReceipt);\r\n myCheckout.setCallback('payment_complete', PaymentComplete);\r\n myCheckout.startCheckout(response.data.TicketResponse.ticket);\r\n const ticketResponse = response.data.TicketResponse.ticket;\r\n\r\n function PageLoad() {\r\n setIsGetTicketFetching(false);\r\n }\r\n\r\n function CancelTransaction() {\r\n setIsOpen(false);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n\r\n function PaymentComplete(args) {\r\n document.getElementById('monerisCheckout').innerHTML = '';\r\n document.getElementById('monerisCheckout').style = '';\r\n const parsedData = isJsonString(args) ? JSON.parse(args) : '';\r\n if (parsedData?.response_code !== '001') {\r\n setIsOpen(false);\r\n setModifySubscriptionError(t('monerisPaymentError'));\r\n } else {\r\n setIsOpen(false);\r\n setIsLoading(true);\r\n api\r\n .modifyAutoloadSubscription({\r\n LoadAmount: state.loadAmount,\r\n ThresholdAmount: state.thresholdAmount,\r\n VisibleId: visibleId,\r\n CustomerId: customerId,\r\n Ticket: ticketResponse,\r\n Username: userName,\r\n DeviceId: userInfo.sessionInstanceId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n setIsLoading(false);\r\n toNextStep();\r\n } else {\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setModifySubscriptionError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function PaymentReceipt(args) {\r\n PaymentComplete(args);\r\n }\r\n\r\n function ErrorEvent() {\r\n setIsOpen(false);\r\n }\r\n } else {\r\n setIsGetTicketFetching(false);\r\n setIsOpen(false);\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setIsGetTicketFetchError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n })\r\n .catch(() => { })\r\n .finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n };\r\n\r\n const radioStyle = {\r\n margin: '16px 0px 16px 0px',\r\n };\r\n const errorStyle = {\r\n margin: '15px 0px',\r\n };\r\n\r\n const getCardImage = (Type) => {\r\n let cardImage;\r\n switch (Type.toLowerCase()) {\r\n case 0:\r\n case 'v':\r\n case 'visa':\r\n cardImage = VisaCardImg;\r\n break;\r\n case 1:\r\n case 'm':\r\n case 'mastercard':\r\n cardImage = MasterCard;\r\n break;\r\n case 2:\r\n case 'americanexpress':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 3:\r\n case 'no':\r\n case 'discover':\r\n cardImage = Discover;\r\n break;\r\n case 4:\r\n case 'monerisvault':\r\n cardImage = MonerisVault;\r\n break;\r\n case 5:\r\n case 'moneristoken':\r\n cardImage = MonerisToken;\r\n break;\r\n case 6:\r\n case 'interac':\r\n cardImage = Interac;\r\n break;\r\n case 7:\r\n case 'master':\r\n cardImage = Master;\r\n break;\r\n case 8:\r\n case 'ax':\r\n case 'amex':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 9:\r\n case 'unknown':\r\n cardImage = CreditCardImg;\r\n break;\r\n case 10:\r\n cardImage = CreditCardImg;\r\n break;\r\n case 11:\r\n case 'c1':\r\n case 'jcb':\r\n cardImage = Jcb;\r\n break;\r\n case 12:\r\n case 'd':\r\n case 'debit':\r\n cardImage = Interac;\r\n break;\r\n case 13:\r\n case 'se':\r\n case 'sears':\r\n cardImage = Sears;\r\n break;\r\n case 14:\r\n case 'up':\r\n case 'unionpay':\r\n cardImage = Unipay;\r\n break;\r\n default:\r\n cardImage = CreditCardImg;\r\n }\r\n return cardImage;\r\n };\r\n\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(state.loadAmount)}
\r\n \r\n
\r\n \r\n
\r\n \r\n {formatDecimalWithCurrency(state.thresholdAmount)}\r\n
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(state.loadAmount)}
\r\n \r\n {modifySubscriptionError ?
\r\n \r\n \r\n
\r\n (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(state.loadAmount)}
\r\n \r\n
\r\n \r\n
\r\n {formatDecimalWithCurrency(state.thresholdAmount)}
\r\n \r\n
\r\n \r\n
\r\n {state.transactionDate || formatDate(Date.now())}
\r\n \r\n
\r\n \r\n {\r\n e.preventDefault();\r\n handleClick(props.card, selectedCard);\r\n }}\r\n >\r\n {nickName}\r\n \r\n {type === 'presto' || isMobileWallet ? (\r\n
\r\n \r\n {currentBalance !== null\r\n ? isMobileWallet\r\n ? formatDecimalWithCurrency(convertToDollars(currentBalance))\r\n : formatDecimalWithCurrency(currentBalance)\r\n : ''}\r\n
\r\n ) : null}\r\n \r\n {props?.activePasses?.length && props.showTransitPass\r\n ? [\r\n ,\r\n
\r\n \r\n
,\r\n ]\r\n : null}\r\n {props?.pendingPasses?.length && props.showTransitPass\r\n ? [\r\n ,\r\n {props?.fields?.TransitLabel?.value}
\r\n\r\n {props.activePasses.map((transitPass) => getTransitPassLogo(transitPass))}\r\n
\r\n \r\n
,\r\n ]\r\n : null}\r\n {props?.activePassesForGoogleWallet?.length\r\n ? [\r\n ,\r\n {props?.fields?.PendingPasslabel?.value}
\r\n\r\n {props.pendingPasses.map((transitPass) => getTransitPassLogo(transitPass))}\r\n
\r\n \r\n
,\r\n ]\r\n : null}\r\n {props?.fields?.TransitLabel?.value}
\r\n\r\n {props.activePassesForGoogleWallet.map((id) =>\r\n getTransitPassLogoForGoogleWallet(id)\r\n )}\r\n
\r\n \r\n \r\n {isMobileWallet || onlyGWCards ? (\r\n
\r\n
\r\n \r\n {isMobileWallet || onlyGWCards ? (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n - \r\n {totalViewableCards.map((card) => {\r\n if (card.mediaType === mediaTypes.CRDNC) {\r\n return (\r\n
\r\n
\r\n \r\n redirectToUrlInNewWindow(props.fields.primaryLink?.value.href)}\r\n >\r\n {props.fields.primaryLink?.value.text}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {linkableHeadingForNoMedia ? (\r\n
\r\n
\r\n \r\n {linkableHeadingForNoMedia ? (\r\n
\r\n \r\n
\r\n \r\n {isLoading ? null : <>{hasAnyCard ?
\r\n )\r\n );\r\n};\r\nexport default withTranslation()(MyProductsOverview);\r\n","import React from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { hasAnyCard } from '../../services/utils';\r\n\r\nconst MyProductsPage = (props) => {\r\n let content;\r\n\r\n content = hasAnyCard(useSelector((state) => state.user)) ? (\r\n {content}
;\r\n};\r\n\r\nexport default MyProductsPage;\r\n","import { Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect, useState } from 'react';\r\nimport './notificationBanner.scss';\r\n\r\nconst NotificationBanner = ({ fields }) => {\r\n const {\r\n BackGroundColor,\r\n NotificationIcon,\r\n NotificationDescription,\r\n NotificationDescriptionA11y,\r\n CloseIcon,\r\n FontColor,\r\n } = fields;\r\n const bannerStyle = {\r\n backgroundColor: BackGroundColor.value,\r\n color: FontColor.value,\r\n };\r\n const [showNotification, dismissNotification] = useState(false);\r\n\r\n useEffect(() => {\r\n const elements = document.getElementsByClassName('NotificationBanner-wrapper');\r\n if (elements.length > 0) elements[elements.length - 1].style.marginBottom = 'unset';\r\n });\r\n\r\n const manageCloseHandler = (e) => {\r\n if (e.keyCode == 13) {\r\n dismissNotification(true);\r\n }\r\n };\r\n\r\n return !showNotification ? (\r\n \r\n
\r\n ) : null;\r\n};\r\nexport default NotificationBanner;\r\n","import React from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { dismissNotification, updateNotification } from '../../redux/user/actions';\r\nimport { ButtonBlock, Button } from '../../atoms';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport { formatUtcDate, localstorageService, redirectToUrl } from '../../services/utils';\r\nimport chevronDown from '../../assets/images/down.svg';\r\nimport chevronUp from '../../assets/images/up.svg';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport api from '../../services/api';\r\n\r\nconst CollapsibleNotification = ({\r\n notification,\r\n fields,\r\n index,\r\n isExpanded = false,\r\n onToggle,\r\n t,\r\n notificationTypes,\r\n verificationSuccessNotificationExists,\r\n IsRiskyUser = false,\r\n IsRiskyUserDismissed = false,\r\n}) => {\r\n const dispatch = useDispatch();\r\n let fareType = '';\r\n const userEmail = useSelector((state) => state.user.email || state.user.loginEmail);\r\n\r\n const hasCta =\r\n fields[notification?.ctaField]?.value?.text && fields[notification?.ctaField]?.value?.href;\r\n let contentField;\r\n\r\n if (notification?.isFareTypeExpiry) {\r\n const isConcessionStudent = t(notification?.fareType) === t('Student');\r\n const isAnonymous = notification?.type === mediaSubTypes.anonymous;\r\n const isPrestoCard = notification?.type === mediaSubTypes.presto;\r\n fareType =\r\n isPrestoCard || isAnonymous\r\n ? `${isConcessionStudent ? t('Youth') : t(notification.fareType)}${notification.specificFare ? `${''} ${notification.specificFare}` : ''\r\n } `\r\n : t('Adult');\r\n const expiryValue = notification?.expiryDate?.split('T');\r\n const formattedExpiryDate = expiryValue ? formatUtcDate(expiryValue[0]) : null;\r\n contentField = {\r\n ...fields[notification?.contentField],\r\n value: fields[notification?.contentField]?.value\r\n .replace('{fare_type}', fareType)\r\n .replace('{card_nickname}', notification.nickName)\r\n .replace('{expiration_date}', formattedExpiryDate),\r\n };\r\n } else {\r\n contentField = {\r\n ...fields[notification?.contentField],\r\n value: fields[notification?.contentField]?.value.replace(\r\n '{email}',\r\n `< span class= \"notifications-userEmail\" > ${userEmail} `\r\n ),\r\n };\r\n }\r\n return (\r\n <>\r\n {!notification?.isDismissed && (\r\n \r\n dismissNotification(true)}\r\n loading=\"lazy\"\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {isExpanded && (\r\n \r\n
\r\n \r\n
\r\n \r\n {visibleNotifications.length ? null :
\r\n );\r\n};\r\n\r\nexport default Notifications;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport { Title } from '../../molecules';\r\nimport { Button } from '../../atoms';\r\nimport './orderaCard.scss';\r\nimport api from '../../services/api';\r\nimport { setTransitAgencyLogos } from '../../redux/products/actions';\r\n\r\nconst OrderaCard = (props) => {\r\n const shoppingCart = useSelector((reduxState) => reduxState.user.shoppingCart);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const [isCAPP, setIsCAPP] = useState(false);\r\n const checkAnyNonNewmediaItemInCart = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter((el) => el.visibleId !== 'NEWMEDIA');\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n const [index, setIndex] = useState(0);\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n if (guestUserInfo?.isGuestLogin === true && index === 0) {\r\n api\r\n .getTransitAgencyLogosforGuestFlow()\r\n .then(({ data }) => {\r\n dispatch(setTransitAgencyLogos(data));\r\n })\r\n .catch(() => { });\r\n setIndex(1);\r\n }\r\n }, [guestUserInfo]);\r\n\r\n useEffect(() => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let TransitPass = shoppingCart.items.filter(\r\n (el) => el.visibleId !== 'NEWMEDIA' && el.productFamily === 'CAPP'\r\n );\r\n if (TransitPass.length > 0) {\r\n setIsCAPP(true);\r\n }\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n ) : null}\r\n {visibleNotifications.length\r\n ? visibleNotifications?.map((notification, index) => (\r\n \r\n
\r\n \r\n \r\n <Text field={props.fields.Title} />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrderaCard;\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { SubHeader } from '../../atoms';\r\nimport { Header } from '../../molecules';\r\n\r\nconst Faqs = (props) => (\r\n <>\r\n \r\n {checkAnyNonNewmediaItemInCart() ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n \r\n isCAPP ? redirectToUrl(routes.transitPasses) : redirectToUrl(routes.loadMyCard)\r\n }\r\n >\r\n
\r\n {props.fields.CheckoutButton ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n api.b2cChangePassword()}\r\n buttonTextA11y={fields?.UpdateButtonLabelA11y.value}\r\n >\r\n \r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ),\r\n ];\r\n};\r\n\r\nexport default PasswordChange;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { itemsAreLoading } from '../../redux/user/actions';\r\nimport api from '../../services/api';\r\nimport envelopeIcon from '../../assets/images/envelope_checked.svg';\r\nimport { ButtonBlock, Button } from '../../atoms';\r\nimport { ValueRowSecond, CardBlock } from '../../molecules';\r\nimport { setUserPersonalInfo } from '../../redux/user/actions';\r\n\r\nimport './personalInformation.scss';\r\n\r\nconst PersonalInformation = (props) => {\r\n const dispatch = useDispatch();\r\n const updateBtnRef = useRef();\r\n const [personalData, setPersonalData] = useState({});\r\n const [isFocusable, setIsFocusable] = useState(false);\r\n const { firstName, lastName, phoneNumber, currentShippingDetails, managePersonalInfo } = useSelector((reduxState) => reduxState.user);\r\n const newUserInfo = useSelector((reduxState) => reduxState.user.newUpdatePersonalInfo);\r\n\r\n useEffect(() => {\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: {},\r\n })\r\n );\r\n getPersonalInformation();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (\r\n updateBtnRef &&\r\n updateBtnRef.current &&\r\n props?.fields?.prestoPromotionalMailNoteAnchorText?.value\r\n ) {\r\n updateBtnRef.current.focus();\r\n }\r\n }, [props?.fields?.prestoPromotionalMailNoteAnchorText?.value]);\r\n\r\n useEffect(() => {\r\n const urlId = window.location.hash.substring(1);\r\n if (isFocusable && urlId === props?.fields?.prestoPromotionalMailNoteAnchorText?.value) {\r\n updateBtnRef.current.focus();\r\n window.scrollTo(0, updateBtnRef.current.offsetTop + 5);\r\n }\r\n }, [isFocusable]);\r\n\r\n useEffect(() => {\r\n if (managePersonalInfo?.updatePersonalInfoEnabled === false) {\r\n if (managePersonalInfo?.submittedInfo?.success) {\r\n getPersonalInformation();\r\n }\r\n document.body.scrollTop = 0;\r\n }\r\n }, [managePersonalInfo]);\r\n\r\n const getPersonalInformation = () => {\r\n api\r\n .getPersonalData()\r\n .then(({ data }) => {\r\n if (data.Success === true) {\r\n setIsFocusable(true);\r\n setPersonalData(data.Data);\r\n } else {\r\n // TODO: Error hadling on UI\r\n console.warn('Error while fetching personal user info.');\r\n }\r\n })\r\n .catch((e) => {\r\n // TODO: Error hadling on UI\r\n console.warn('Error while fetching personal user info.', e);\r\n })\r\n .then(() => {\r\n dispatch(itemsAreLoading(false));\r\n });\r\n dispatch(itemsAreLoading(true));\r\n };\r\n\r\n const updateInfoHandler = () => {\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: true,\r\n userPersonalInfo: personalData,\r\n submittedInfo: {},\r\n })\r\n );\r\n };\r\n\r\n return managePersonalInfo?.updatePersonalInfoEnabled ? null : (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n const errors = {};\r\n if (!values.currentPassword) {\r\n errors.currentPassword = fields?.CurrentPasswordError.value;\r\n }\r\n if (!values.newPassword) {\r\n errors.newPassword = fields?.NewPasswordError.value;\r\n } else if (\r\n !PASSWORD_REGEX.test(values.newPassword) ||\r\n values.newPassword.length < 8 ||\r\n values.newPassword.length > 25\r\n ) {\r\n errors.newPassword = fields?.NewpwdValidateerror.value;\r\n }\r\n if (!values.confirmNewPassword) {\r\n errors.confirmNewPassword = fields?.ConfirmPasswordError.value;\r\n } else if (values.newPassword !== values.confirmNewPassword) {\r\n errors.confirmNewPassword = fields?.ConfirmPwdValidateerror.value;\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n handleSubmitData(values);\r\n }}\r\n >\r\n {({ values, errors, touched, handleChange, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n {managePersonalInfo?.submittedInfo?.submit ? (\r\n <>\r\n {managePersonalInfo?.submittedInfo?.success ? (\r\n \r\n \r\n \r\n
\r\n )}\r\n {personalData.TraxOptInOut !== 'on' ||\r\n props.fields.transactionActivitiesMailNote.value === '' ? null : (\r\n \r\n
\r\n {managePersonalInfo?.submittedInfo?.submit ? (\r\n <>\r\n {managePersonalInfo?.submittedInfo?.success ? (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n {props.fields.InfoUpdateSuccess.value}
\r\n \r\n
\r\n )}\r\n \r\n ) : null}\r\n\r\n {/* Line1 - APartemnt address and Line2 - street address */}\r\n\r\n \r\n
\r\n {props.fields.InfoUpdateError.value}
\r\n \r\n
\r\n {props.fields.InfoUpdateErrorDesc.value}
\r\n\r\n {/* Decorative image - alt is intentionaly left empty */}\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n {/* Decorative image - alt is intentionaly left empty */}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {error ? \r\n \r\n \r\n
\r\n \r\n ) : null;\r\n};\r\nexport default withTranslation()(RedeemVoucher);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { StepTracker } from '../../molecules';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { setRedeemVoucherStepperBlock } from '../../redux/products/actions';\r\n\r\nimport RedeemVoucherStepperBlock1 from './RedeemVoucherStepperBlock1';\r\nimport RedeemVoucherStepperBlock2 from './RedeemVoucherStepperBlock2';\r\nimport RedeemVoucherStepperBlock3 from './RedeemVoucherStepperBlock3';\r\n\r\nconst stepsRedeemVoucherStepperBlockMap = [\r\n RedeemVoucherStepperBlock1,\r\n RedeemVoucherStepperBlock2,\r\n RedeemVoucherStepperBlock3,\r\n];\r\n\r\nconst RedeemVoucherStepperBlock = ({ fields, t, rendering }) => {\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const [state, setState] = useState({});\r\n const dispatch = useDispatch();\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const redeemStepper = useSelector((reduxState) => reduxState.products.redeemVoucher);\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const toFirstStep = () => {\r\n setStep(0);\r\n focusDiv.current.focus();\r\n };\r\n\r\n const toRedeemVoucher = () => {\r\n dispatch(\r\n setRedeemVoucherStepperBlock({\r\n redeemVoucherStepperBlock: false,\r\n redeemVoucherBlock: true,\r\n voucherCode: '',\r\n })\r\n );\r\n };\r\n\r\n const Stepper = stepsRedeemVoucherStepperBlockMap[step];\r\n\r\n useEffect(() => {\r\n setState({ ...state });\r\n }, []);\r\n\r\n return redeemStepper?.redeemVoucherStepperBlock ? (\r\n <>\r\n \r\n \r\n {\r\n const errors = {};\r\n if (!values.PrestoVoucherCode) {\r\n errors.PrestoVoucherCode = props.fields.ContinuetoRedeemError.value;\r\n }\r\n if (errors.PrestoVoucherCode) {\r\n setCheck(true);\r\n } else {\r\n setCheck(false);\r\n }\r\n return errors;\r\n }}\r\n validateOnChange={true}\r\n validationSchema={Yup.object().shape({\r\n PrestoVoucherCode: Yup.string()\r\n .required(props.fields.ContinuetoRedeemError.value)\r\n .matches(/^[A-Za-z0-9 ]+$/, props.fields.SpecialCharacterError.value),\r\n })}\r\n onSubmit={(values) => {\r\n toRedeemStepper();\r\n }}\r\n >\r\n {({ errors, values, touched, handleChange, handleSubmit }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n const getItem = (text1, text2) => (\r\n \r\n
\r\n );\r\n const getItemWithImage = (text1, text2, image, ProgramProduct) => (\r\n {text1}
\r\n \r\n {text2}\r\n
\r\n \r\n
\r\n \r\n );\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n }, []);\r\n return (\r\n <>\r\n \r\n ![{logo[image]?.Logo?.Alt}]({logo[image]?.Logo?.Src})
\r\n
\r\n \r\n
\r\n \r\n {text1}\r\n
\r\n\r\n {getTimePeriod(ProgramProduct?.PeriodPassStartDate, ProgramProduct?.PeriodPassEndDate)}\r\n
\r\n \r\n
\r\n {text2}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState, forwardRef, useEffect } from 'react';\r\n\r\nimport { RichText, Text, Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport moment from 'moment';\r\n\r\nimport api from '../../services/api';\r\nimport { ButtonBlock, Button, InlineError, DatePickerInput, Loader } from '../../atoms';\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport apiResponses from '../../constants/apiResponses';\r\nimport { CardBlock, TextInput } from '../../molecules';\r\nimport Calendar from '../../assets/images/Calendar.svg';\r\nimport './redeemVoucherStepperBlock.scss';\r\nimport {\r\n getTimePeriod,\r\n formatDateTx,\r\n formatDecimalWithCurrency,\r\n isFrench,\r\n getErrorTranslation,\r\n} from '../../services/utils';\r\nimport { setShoppingCart } from '../../redux/user/actions';\r\n\r\nconst RedeemVoucherStepperBlock2 = ({\r\n fields,\r\n toNextStep,\r\n toFirstStep,\r\n setState,\r\n t,\r\n rendering,\r\n}) => {\r\n const MAX_DATE = new Date();\r\n const [date, setDate] = useState('');\r\n const [month, setMonth] = useState('');\r\n const [year, setYear] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n const [selectedDate, setSelectedDate] = useState();\r\n const [DOBError, setDOBError] = useState(fields.DOBError.value);\r\n const [errorBorder, setErrorBorder] = useState(false);\r\n const dispatch = useDispatch();\r\n const redeemStepper = useSelector((reduxState) => reduxState.products.redeemVoucher);\r\n const program = redeemStepper?.apiData?.VoucherProducts?.program;\r\n const include = program?.ProgramProducts.filter(\r\n (ProgramProduct) =>\r\n ProgramProduct.ProductType === 1 ||\r\n ProgramProduct.ProductType === 4 ||\r\n ProgramProduct.ProductType === 5\r\n );\r\n const ProductTypeID_5 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 5\r\n );\r\n const ProductTypeID_1 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 1\r\n );\r\n const ProductTypeID_4 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 4\r\n );\r\n const ProductTypeID_3 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 3\r\n );\r\n const validateBirthDate = redeemStepper?.apiData?.ValidateBirthDate;\r\n const user = useSelector((reduxState) => reduxState.user);\r\n const logo = useSelector((state) => state.products.logos);\r\n const fareMedia = useSelector((reduxState) =>\r\n reduxState.user.fareMedias.find((el) => el.mediaId === reduxState.user.selectedCard.mediaId)\r\n );\r\n const voucherNote = fields.CardNote.value.toString().split('{0)');\r\n const voucherNote1 = () => {\r\n const note1 = voucherNote[0].toString();\r\n const note2 = fareMedia.nickName.toString();\r\n const note3 = fareMedia.visibleId.toString();\r\n const note4 = voucherNote[1].toString();\r\n\r\n return (\r\n \r\n
\r\n \r\n {voucherNote1()}\r\n {include.length > 0 && (\r\n \r\n {ProductTypeID_5?.map((ProgramProduct) => {\r\n if (ProgramProduct.ProductType === 5) {\r\n let productName = '';\r\n if (isFrench()) {\r\n if (\r\n fields?.FareTypeStudent ===\r\n ProgramProduct?.Concession?.ConcessionShortName_FR\r\n ) {\r\n productName = fields?.FareTypeYouth;\r\n } else {\r\n productName = ProgramProduct?.Concession?.ConcessionName_FR;\r\n }\r\n } else if (\r\n fields?.FareTypeStudent === ProgramProduct?.Concession?.ConcessionShortName_EN\r\n ) {\r\n productName = fields?.FareTypeYouth;\r\n } else {\r\n productName = ProgramProduct?.Concession?.ConcessionShortName_EN;\r\n }\r\n return [\r\n getItem(fields.FareTypeUpdate.value, productName?.toString()),\r\n ProgramProduct?.ConcessionEndDate !== null &&\r\n ProgramProduct?.Concession?.IsEndDateRequired\r\n ? getItem(\r\n fields.ExpiryTitle.value,\r\n formatDateTx(ProgramProduct?.ConcessionEndDate)\r\n )\r\n : null,\r\n ];\r\n }\r\n })}\r\n\r\n {ProductTypeID_1?.map((ProgramProduct) => {\r\n return getItem(\r\n fields.VouchercreditTitle.value,\r\n '$' + ProgramProduct?.ProductValue?.toString())\r\n })}\r\n\r\n {ProductTypeID_4?.map((ProgramProduct) => {\r\n let productName = '';\r\n if (isFrench()) {\r\n productName = ProgramProduct?.ProductNameFR;\r\n } else {\r\n productName = ProgramProduct?.ProductNameEN;\r\n }\r\n return getItemWithImage(\r\n productName ? productName : ProgramProduct?.ProductName,\r\n fields?.PassFare?.value?.toString(),\r\n ProgramProduct?.ProductOwner,\r\n ProgramProduct\r\n );\r\n })}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {ProductTypeID_3.length > 0 && (\r\n \r\n {ProductTypeID_3.map((ProgramProduct) => {\r\n let productName = '';\r\n if (isFrench()) {\r\n productName = ProgramProduct.ProductNameFR;\r\n } else {\r\n productName = ProgramProduct.ProductNameEN;\r\n }\r\n return getItemWithImage(\r\n productName ? productName : ProgramProduct?.ProductName,\r\n formatDecimalWithCurrency(ProgramProduct?.ProductValue?.toString()),\r\n ProgramProduct?.ProductOwner,\r\n ProgramProduct\r\n );\r\n })}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {ProductTypeID_3.length > 0 && (\r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {note1}\r\n {note2}({note3}\r\n {')'}\r\n {note4}\r\n
\r\n );\r\n };\r\n const voucherCard = fields.CartNote.value.toString().split('{0)');\r\n const voucherCard1 = () => {\r\n const card1 = voucherCard[0].toString();\r\n const card2 = fareMedia.nickName.toString();\r\n const card3 = fareMedia.visibleId.toString();\r\n const card4 = voucherCard[1].toString();\r\n\r\n return (\r\n \r\n {card1}\r\n {card2}({card3}\r\n {')'}\r\n {card4}\r\n
\r\n );\r\n };\r\n\r\n const redeemApiSubmit = () => {\r\n setLoading(true);\r\n const payload = {\r\n CustomerId: user?.customerId,\r\n VoucherCode: redeemStepper.voucherCode,\r\n VisibleId: fareMedia?.visibleId,\r\n ConcessionDate: moment(selectedDate).format(),\r\n MediaId: fareMedia?.mediaId,\r\n EnableStub: true,\r\n EnableErrorFlow: false,\r\n EnableShopingCartFlow: true,\r\n VerifyConcessionDate: redeemStepper.apiData.ValidateBirthDate,\r\n };\r\n api\r\n .redeemVoucher(payload)\r\n .then((response) => {\r\n if (response?.data?.Sucess) {\r\n if (ProductTypeID_3 && ProductTypeID_3.length > 0) {\r\n api\r\n .getShoppingCart({\r\n customerId: user?.customerId,\r\n visibleId: fareMedia?.visibleId,\r\n mediaId: fareMedia?.mediaId,\r\n })\r\n .then((cartRes) => {\r\n if (cartRes.status === 200) {\r\n const order = cartRes?.data?.ShoppingCart?.Order;\r\n const isNewItem = false;\r\n dispatch(setShoppingCart(order, isNewItem));\r\n setLoading(false);\r\n }\r\n setState({ ...response?.data });\r\n toNextStep();\r\n });\r\n } else {\r\n setState({ ...response?.data });\r\n setLoading(false);\r\n toNextStep();\r\n }\r\n } else if (response?.data?.ErrorMessage) {\r\n if (response?.data?.ErrorMessage === apiResponses.redeemVoucherDOBError) {\r\n getErrorTranslation(response?.data?.ErrorMessage, (errorMsg) => {\r\n if (errorMsg && errorMsg.data) {\r\n setDOBError(errorMsg.data);\r\n setErrorBorder(true);\r\n }\r\n });\r\n setLoading(false);\r\n } else {\r\n setState(response?.data);\r\n setLoading(false);\r\n toNextStep();\r\n }\r\n } else {\r\n setState(response?.data);\r\n setLoading(false);\r\n toNextStep();\r\n }\r\n })\r\n .catch((err) => {\r\n //console.log('error', err);\r\n });\r\n };\r\n const CustomInput = forwardRef(({ value, onClick }, ref) => (\r\n \r\n
\r\n );\r\n const getItemWithImage = (text1, text2, image, ProgramProduct) => (\r\n {text1}
\r\n \r\n {text2}\r\n
\r\n \r\n
\r\n \r\n );\r\n\r\n const handleDateInput = (value, type) => {\r\n if (type == 'DATE') {\r\n setDate(value);\r\n } else if (type == 'MONTH') {\r\n setMonth(value);\r\n } else if (type == 'YEAR') {\r\n setYear(value);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (validateBirthDate) {\r\n if (!isNaN(date) && !isNaN(month) && !isNaN(year)) {\r\n let isDateValid = moment([year, Number(month) - 1, date]).isValid();\r\n if (isDateValid) {\r\n let setMomentDate = moment([year, Number(month) - 1, date]).toDate();\r\n\r\n setSelectedDate(setMomentDate);\r\n }\r\n\r\n if (!date && !month && !year) {\r\n setSelectedDate(MAX_DATE.setFullYear(MAX_DATE.getFullYear() - 45));\r\n }\r\n }\r\n if (date && month && year) {\r\n setErrorBorder(false);\r\n }\r\n document.body.scrollTop = 0;\r\n }\r\n }, [date, month, year]);\r\n\r\n const syncDate = (date) => {\r\n setSelectedDate(date);\r\n setDate(moment(date).format('DD'));\r\n setMonth(moment(date).format('MM'));\r\n setYear(moment(date).format('YYYY'));\r\n };\r\n const getDateOfBirthField = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {text1}\r\n
\r\n\r\n {getTimePeriod(ProgramProduct?.PeriodPassStartDate, ProgramProduct?.PeriodPassEndDate)}\r\n
\r\n \r\n
\r\n {text2}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n }}\r\n \r\n );\r\n };\r\n return (\r\n <>\r\n \r\n
\r\n\r\n {getDateOfBirthField()}\r\n \r\n );\r\n};\r\n\r\nexport default RedeemVoucherStepperBlock2;\r\n","import React, { useEffect } from 'react';\r\n\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport failIcon from '../../assets/images/Failed.svg';\r\nimport routes from '../../constants/routes';\r\nimport { Button, IconButton } from '../../atoms';\r\nimport { CardBlock, Note, Success } from '../../molecules';\r\nimport './redeemVoucherStepperBlock.scss';\r\nimport { setRedeemVoucherStepperBlock } from '../../redux/products/actions';\r\nimport {\r\n redirectToUrl,\r\n getTimePeriod,\r\n formatDateTx,\r\n formatDecimalWithCurrency,\r\n isFrench,\r\n} from '../../services/utils';\r\n\r\nconst RedeemVoucherStepperBlock3 = ({\r\n fields,\r\n toNextStep,\r\n toFirstStep,\r\n setState,\r\n state,\r\n t,\r\n userInfo,\r\n product,\r\n rendering,\r\n}) => {\r\n const redeemStepper = useSelector((reduxState) => reduxState.products.redeemVoucher);\r\n const program = redeemStepper?.apiData?.VoucherProducts?.program;\r\n const include = program?.ProgramProducts.filter(\r\n (ProgramProduct) =>\r\n ProgramProduct.ProductType === 1 ||\r\n ProgramProduct.ProductType === 4 ||\r\n ProgramProduct.ProductType === 5\r\n );\r\n const ProductTypeID_5 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 5\r\n );\r\n const ProductTypeID_1 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 1\r\n );\r\n const ProductTypeID_4 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 4\r\n );\r\n const ProductTypeID_3 = program?.ProgramProducts.filter(\r\n (ProgramProduct) => ProgramProduct.ProductType === 3\r\n );\r\n const fareMedia = useSelector((reduxState) =>\r\n reduxState.user.fareMedias.find((el) => el.mediaId === reduxState.user.selectedCard.mediaId)\r\n );\r\n const logo = useSelector((state) => state.products.logos);\r\n const dispatch = useDispatch();\r\n // const vn = { value: \r\n
\r\n );\r\n };\r\n\r\n const errorContent = fields.RedeemVoucherError.value.toString().split('{0}');\r\n const errorContent1 = `${errorContent[0]} (${redeemStepper.voucherCode}) ${errorContent[1]}`;\r\n\r\n const errorScreen = () => {\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 {errorContent1.toString()}
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {fields.PrintText.value}\r\n \r\n
\r\n \r\n );\r\n };\r\n const getItem = (text1, text2) => (\r\n \r\n redirectToUrl(routes.dashboard)}\r\n >\r\n
\r\n \r\n
\r\n );\r\n\r\n const getItemWithImage = (text1, text2, image, ProgramProduct) => (\r\n {text1}
\r\n \r\n {text2}\r\n
\r\n \r\n
\r\n \r\n );\r\n\r\n const checkoutButton = () => {\r\n dispatch(\r\n setRedeemVoucherStepperBlock({\r\n redeemVoucherStepperBlock: false,\r\n redeemVoucherBlock: true,\r\n voucherCode: '',\r\n })\r\n );\r\n redirectToUrl(routes.checkout);\r\n };\r\n\r\n const GoToDashBoardHandler = () => {\r\n dispatch(\r\n setRedeemVoucherStepperBlock({\r\n redeemVoucherStepperBlock: false,\r\n redeemVoucherBlock: true,\r\n voucherCode: '',\r\n })\r\n );\r\n redirectToUrl(routes.dashboard);\r\n };\r\n\r\n useEffect(() => {\r\n document.body.scrollTop = 0;\r\n }, []);\r\n return state?.Sucess ? (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {text1}\r\n
\r\n\r\n {getTimePeriod(ProgramProduct?.PeriodPassStartDate, ProgramProduct?.PeriodPassEndDate)}\r\n
\r\n \r\n
\r\n {text2}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n errorScreen()\r\n );\r\n};\r\nexport default RedeemVoucherStepperBlock3;\r\n","import React, { useEffect } from 'react';\r\n\r\nimport { redirectToUrl } from '../../services/utils';\r\n\r\nconst Redirection = (props) => (\r\n \r\n
\r\n {include.length > 0 && (\r\n \r\n {/* {state.ReedeemVoucherResponse.OrderNumber} */}\r\n
\r\n \r\n voucherNote1()}\r\n />\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {ProductTypeID_5?.map((ProgramProduct) => {\r\n if (ProgramProduct.ProductType === 5) {\r\n let productName = '';\r\n if (isFrench()) {\r\n if (\r\n fields?.FareTypeStudent ===\r\n ProgramProduct?.Concession?.ConcessionShortName_FR\r\n ) {\r\n productName = fields?.FareTypeYouth;\r\n } else {\r\n productName = ProgramProduct?.Concession?.ConcessionName_FR;\r\n }\r\n } else if (\r\n fields?.FareTypeStudent === ProgramProduct?.Concession?.ConcessionShortName_EN\r\n ) {\r\n productName = fields?.FareTypeYouth;\r\n } else {\r\n productName = ProgramProduct?.Concession?.ConcessionShortName_EN;\r\n }\r\n return [\r\n getItem(fields.FareTypeUpdate.value, productName?.toString()),\r\n ProgramProduct?.ConcessionEndDate !== null &&\r\n ProgramProduct?.Concession?.IsEndDateRequired\r\n ? getItem(\r\n fields.ExpiryTitle.value,\r\n formatDateTx(ProgramProduct?.ConcessionEndDate)\r\n )\r\n : null,\r\n ];\r\n }\r\n })}\r\n\r\n {ProductTypeID_1?.map((ProgramProduct) => {\r\n return getItem(\r\n fields.VouchercreditTitle.value,\r\n '$' + ProgramProduct?.ProductValue?.toString()\r\n );\r\n })}\r\n\r\n {ProductTypeID_4?.map((ProgramProduct) => {\r\n let productName = '';\r\n if (isFrench()) {\r\n productName = ProgramProduct?.ProductNameFR;\r\n } else {\r\n productName = ProgramProduct?.ProductNameEN;\r\n }\r\n return getItemWithImage(\r\n productName ? productName : ProgramProduct?.ProductName,\r\n fields?.PassFare?.value?.toString(),\r\n ProgramProduct?.ProductOwner,\r\n ProgramProduct\r\n );\r\n })}\r\n \r\n
\r\n \r\n {ProductTypeID_3.length > 0 && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {ProductTypeID_3.map((ProgramProduct) => {\r\n let productName = '';\r\n if (isFrench()) {\r\n productName = ProgramProduct.ProductNameFR;\r\n } else {\r\n productName = ProgramProduct.ProductNameEN;\r\n }\r\n return getItemWithImage(\r\n productName ? productName : ProgramProduct?.ProductName,\r\n formatDecimalWithCurrency(ProgramProduct?.ProductValue?.toString()),\r\n ProgramProduct?.ProductOwner,\r\n ProgramProduct\r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {ProductTypeID_3.length > 0 && (\r\n GoToDashBoardHandler()}\r\n >\r\n
\r\n \r\n checkoutButton()}\r\n buttonTextA11y={fields.CheckoutTextA11y.value}\r\n >\r\n
\r\n )}\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {fields.PrintText.value}\r\n \r\n
\r\n \r\n {props.fields.redirectionMessage.value.replace(\r\n '{waitTimeInSeconds}',\r\n props.fields.waitTimeInSeconds.value\r\n )}\r\n {useEffect(() => {\r\n setTimeout(() => {\r\n redirectToUrl(props.fields.redirectionLink?.value.href);\r\n }, props.fields.waitTimeInSeconds.value * 1000);\r\n }, [])}\r\n
\r\n);\r\n\r\nexport default Redirection;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { Placeholder, Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport * as Yup from 'yup';\r\nimport { Formik, Field } from 'formik';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { Button, ButtonBlock, Loader } from '../../atoms';\r\nimport signInFormFields from '../../constants/signInFormFields';\r\nimport ReCaptchaFormField from '../shared/ReCaptchaFormField';\r\nimport api from '../../services/api';\r\nimport routes from '../../constants/routes';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport {\r\n localstorageService,\r\n getQueryParams,\r\n redirectToUrl,\r\n updateRecaptchaToken,\r\n resetAccessTokenValidity,\r\n} from '../../services/utils';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport {\r\n changeUserStatus,\r\n itemsAreLoading,\r\n fetchAllData,\r\n fetchAllDataSuccessfullyLoaded,\r\n fetchAvailableSettings,\r\n setWeakAccount,\r\n setGuestUserEnabled,\r\n} from '../../redux/user/actions';\r\nimport { Error, TextInput, AdvancedModal, MediaImageList } from '../../molecules';\r\nimport './registeredAccount.scss';\r\n\r\nconst RegisteredAccount = (props) => {\r\n const [error, setError] = useState('');\r\n const [errorTitleMsg, setErrorTitleMsg] = useState(false);\r\n const [state, setState] = useState('');\r\n const [errorTitle] = useState(props.t('registeredAccountSignInTitleErrorMessage'));\r\n const dispatch = useDispatch();\r\n const [setIsContentState] = useState(false);\r\n const [captchaDisable, setCaptchaDisable] = useState(true);\r\n let usernameInputRef = useRef();\r\n const userInfo = useSelector((s) => s.user);\r\n const {\r\n fetchAllDataSuccess,\r\n isWeakPasswordAndQaAVisible,\r\n isWeakPasswordVisible,\r\n isWeakQaAVisible,\r\n emailError,\r\n } = userInfo;\r\n const configKeys = useSelector((state) => state.settings.configKeys);\r\n const showContentOnMobiles = (e) => {\r\n e.preventDefault();\r\n setIsContentState(true);\r\n };\r\n\r\n const queryParams = getQueryParams(useLocation().search);\r\n const returnUrl = queryParams.returnUrl;\r\n\r\n const [settings, setSettings] = useState([]);\r\n const [startedLogin, setStartedLogin] = useState(false);\r\n\r\n function redirectAfterLogin() {\r\n const redirectUrl = returnUrl ? returnUrl : routes.dashboard;\r\n redirectToUrl(redirectUrl);\r\n }\r\n\r\n function login(values, setFieldError) {\r\n setError('');\r\n dispatch(itemsAreLoading(true));\r\n dispatch(fetchAllDataSuccessfullyLoaded(undefined));\r\n return api\r\n .login({\r\n [signInFormFields.username]: values[signInFormFields.username],\r\n [signInFormFields.password]: values[signInFormFields.password],\r\n [signInFormFields.googleToken]: captchaDisable\r\n ? 'googleCaptchaToken'\r\n : values[signInFormFields.googleToken],\r\n })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n setStartedLogin(true);\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Refresh_token);\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n resetAccessTokenValidity();\r\n dispatch(changeUserStatus(true));\r\n dispatch(fetchAllData());\r\n dispatch(setGuestUserEnabled({ isGuestLogin: false }));\r\n\r\n if (values[signInFormFields.remember]) {\r\n localstorageService().setItem(\r\n localStorageKeys.rememberedUsername,\r\n values[signInFormFields.username] || ''\r\n );\r\n } else {\r\n localstorageService().setItem(localStorageKeys.rememberedUsername, '');\r\n }\r\n } else {\r\n dispatch(itemsAreLoading(false));\r\n\r\n if (res.data.Message) {\r\n const data = JSON.parse(res.data.Message);\r\n if (data.Code === 'AFMS-DAX-FE-0000' || data.Code === 'AFMS-DAX-FE-0005') {\r\n setError(props.fields.InvalidUsernamePassword.value);\r\n }\r\n if (data.Code === 'AFMS-CRT-FE-0032') {\r\n setError(props.fields.UnVerifiedEmailError.value);\r\n }\r\n if (data.Code === 'AFMS-DAX-FE-0008') {\r\n setErrorTitleMsg(props.fields.PasswordLimitErrorNext.value);\r\n setError(props.fields.PasswordLimitErrorNext.value);\r\n }\r\n }\r\n }\r\n })\r\n .catch((res) => {\r\n dispatch(itemsAreLoading(false));\r\n setFieldError(signInFormFields.googleToken, 1);\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n if (!startedLogin || fetchAllDataSuccess === undefined) {\r\n return;\r\n }\r\n setStartedLogin(false);\r\n dispatch(itemsAreLoading(false));\r\n if (isWeakPasswordAndQaAVisible || isWeakPasswordVisible || isWeakQaAVisible) {\r\n dispatch(setWeakAccount(true));\r\n setState({ showPopup: 'true' });\r\n } else if (!isWeakPasswordAndQaAVisible || !isWeakPasswordVisible || !isWeakQaAVisible) {\r\n dispatch(setWeakAccount(false));\r\n if (!fetchAllDataSuccess && emailError) {\r\n // handleServerSuccessError(emailError, setError);\r\n if (emailError) {\r\n const data = JSON.parse(emailError);\r\n if (data.Code === 'AFMS-CRT-FE-0032') {\r\n setError(props.fields.UnVerifiedEmailError.value);\r\n }\r\n }\r\n } else if (fetchAllDataSuccess) {\r\n redirectAfterLogin();\r\n } else {\r\n //console.log('error redirection', fetchAllDataSuccess);\r\n redirectAfterLogin();\r\n //handleLogOut(dispatch, '/technical-difficulties');\r\n }\r\n }\r\n }, [startedLogin, fetchAllDataSuccess]);\r\n\r\n useEffect(() => {\r\n api.getAllBusinessRules().then((res) => {\r\n if (res.status === 200) {\r\n setSettings(res.data);\r\n }\r\n });\r\n fetchAvailableSettings(dispatch);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const reCaptchaDisable = configKeys\r\n .filter((item) => item.key === 'GoogleRecaptchaV3.Disable')\r\n .map((config) => config.setting);\r\n if (reCaptchaDisable.toString() === 'true') {\r\n setCaptchaDisable(true);\r\n } else {\r\n setCaptchaDisable(false);\r\n }\r\n }, [configKeys]);\r\n\r\n useEffect(() => {\r\n if (error) {\r\n usernameInputRef.focus();\r\n }\r\n }, [error]);\r\n /* return (\r\n \r\n {\r\n if (captchaDisable) {\r\n login(values, setFieldError);\r\n } else {\r\n updateRecaptchaToken(values, (updatedValues) => login(updatedValues, setFieldError));\r\n }\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n );*/\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {error ? (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {errorBlock && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {\r\n const errors = {};\r\n if (!values.deactivateCardType) {\r\n errors.deactivateCardType = true;\r\n }\r\n if (Object.keys(errors).length === 0) {\r\n setErrorBlock(false);\r\n } else {\r\n setErrorBlock(true);\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => dispatch(setDeactivateCardType(values))}\r\n >\r\n {({ values, errors, handleChange, handleSubmit }) => (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {!isTransferBalance ? (\r\n \r\n
\r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n \r\n {t('StepperChangeSRText')}\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 const getRegisterPaymentMeansForCustomer = () => {\r\n api\r\n .getRegisterPaymentMeansForCustomer({\r\n VisibleId: userInfo.selectedCard.visibleId,\r\n CustomerId: userInfo.customerId,\r\n })\r\n .then((response) => {\r\n if (response) {\r\n if (response.data.Success === false) {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n setIsloading(false);\r\n } else if (response.data.Success) {\r\n setComponent({\r\n paymenMethodsList: response.data.RegisterPaymentMeansList,\r\n });\r\n if (\r\n response.data.RegisterPaymentMeansList.filter((key) => key.AccountType == 1).length >=\r\n 3\r\n ) {\r\n setMaxPaymentThresholdReached(true);\r\n setIsloading(false);\r\n } else {\r\n setMaxPaymentThresholdReached(false);\r\n setIsloading(false);\r\n }\r\n setIsloading(false);\r\n }\r\n }\r\n });\r\n };\r\n\r\n const handleCheckoutModal = () => {\r\n setIsGetTicketFetchError('');\r\n setAddPaymentError('');\r\n if (maxPaymentThresholdReached === true) {\r\n setIsModalOpen(true);\r\n } else {\r\n setIsloading(true);\r\n setIsGetTicketFetching(true);\r\n api\r\n .getTicket({\r\n PaymentProfileType: 'TOKENIZE',\r\n OrderNumber: '',\r\n CustomerId: userInfo.customerId,\r\n VisibleId: visibleId,\r\n userName: userInfo.userName,\r\n Amount: 0,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n setIsloading(false);\r\n setIsOpen(true);\r\n var myCheckout = new window.monerisCheckout();\r\n myCheckout.setMode(monerisEnvironment[0]);\r\n myCheckout.setCheckoutDiv('monerisCheckout');\r\n myCheckout.setCallback('page_loaded', myPageLoad);\r\n myCheckout.setCallback('cancel_transaction', myCancelTransaction);\r\n myCheckout.setCallback('error_event', myErrorEvent);\r\n myCheckout.setCallback('payment_receipt', myPaymentReceipt);\r\n myCheckout.setCallback('payment_complete', myPaymentComplete);\r\n myCheckout.startCheckout(response.data.TicketResponse.ticket);\r\n\r\n const ticketResponse = response.data.TicketResponse.ticket;\r\n\r\n function myPageLoad() {\r\n setIsGetTicketFetching(false);\r\n }\r\n\r\n function myCancelTransaction() {\r\n setIsOpen(false); \r\n }\r\n\r\n function myPaymentComplete(args) {\r\n document.getElementById('monerisCheckout').innerHTML = '';\r\n document.getElementById('monerisCheckout').style = '';\r\n const parsedData = isJsonString(args) ? JSON.parse(args) : '';\r\n if (parsedData?.response_code !== '001') {\r\n setIsOpen(false);\r\n setAddPaymentError(t('monerisPaymentError'));\r\n } else {\r\n setIsOpen(false);\r\n setIsloading(true);\r\n api\r\n .createRegisteredPaymentMean({\r\n PaymentProfileType: 'TOKENIZE',\r\n Ticket: ticketResponse,\r\n VisibleId: visibleId,\r\n CustomerId: userInfo.customerId,\r\n Username: userInfo.userName,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n getRegisterPaymentMeansForCustomer();\r\n setAddPaymentSuccess(true);\r\n } else {\r\n setIsloading(false);\r\n setAddPaymentSuccess(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n const data = JSON.parse(response.data.Error);\r\n if (data.Code === 'AFMS-CRT-FE-0069') {\r\n setAddPaymentError(fields.paymentMethodAddedError.value);\r\n } else {\r\n setAddPaymentError(parsedError?.Description);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function myPaymentReceipt(args) {\r\n myPaymentComplete(args);\r\n }\r\n\r\n function myErrorEvent() {\r\n setIsOpen(false);\r\n }\r\n } else {\r\n setIsloading(false);\r\n setIsGetTicketFetching(false);\r\n setIsOpen(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setIsGetTicketFetchError(parsedError?.Description);\r\n }\r\n })\r\n .catch(() => { });\r\n }\r\n };\r\n\r\n const removeSavedCard = (card) => {\r\n setIsRemoveCardModalOpen(false);\r\n setIsloading(true);\r\n setAddPaymentError('');\r\n api\r\n .terminateRegisterPaymentMean({\r\n customerId: userInfo.customerId,\r\n RegFormOfPaymRecId: card.RegFormOfPaymRecId,\r\n VisibleId: visibleId,\r\n Username: userInfo.userName,\r\n VaultId: card.CreditCard.VaultId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n getRegisterPaymentMeansForCustomer();\r\n setAddPaymentSuccess(false);\r\n } else {\r\n setAddPaymentSuccess(false);\r\n setIsloading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setAddPaymentError(parsedError?.Description);\r\n }\r\n });\r\n };\r\n\r\n const getCardImage = (Type) => {\r\n let cardImage;\r\n let cardName;\r\n switch (Type.toLowerCase()) {\r\n case 0:\r\n case 'v':\r\n case 'visa':\r\n cardImage = VisaCardImg;\r\n cardName = 'visaCard';\r\n break;\r\n case 1:\r\n case 'm':\r\n case 'mastercard':\r\n cardImage = MasterCard;\r\n cardName = 'masterCard';\r\n break;\r\n case 2:\r\n case 'americanexpress':\r\n cardImage = AmericanExpress;\r\n cardName = 'amexCard';\r\n break;\r\n case 3:\r\n case 'no':\r\n case 'discover':\r\n cardImage = Discover;\r\n cardName = '';\r\n break;\r\n case 4:\r\n case 'monerisvault':\r\n cardImage = MonerisVault;\r\n cardName = '';\r\n break;\r\n case 5:\r\n case 'moneristoken':\r\n cardImage = MonerisToken;\r\n cardName = '';\r\n break;\r\n case 6:\r\n case 'interac':\r\n cardImage = Interac;\r\n cardName = 'interacCard';\r\n break;\r\n case 7:\r\n case 'master':\r\n cardImage = Master;\r\n cardName = 'masterCard';\r\n break;\r\n case 8:\r\n case 'ax':\r\n case 'amex':\r\n cardImage = AmericanExpress;\r\n cardName = 'amexCard';\r\n break;\r\n case 9:\r\n case 'unknown':\r\n cardImage = CreditCardImg;\r\n cardName = '';\r\n break;\r\n case 10:\r\n cardImage = CreditCardImg;\r\n cardName = '';\r\n break;\r\n case 11:\r\n case 'c1':\r\n case 'jcb':\r\n cardImage = Jcb;\r\n cardName = '';\r\n break;\r\n case 12:\r\n case 'd':\r\n case 'debit':\r\n cardImage = Interac;\r\n cardName = 'interacCard';\r\n break;\r\n case 13:\r\n case 'se':\r\n case 'sears':\r\n cardImage = Sears;\r\n cardName = '';\r\n break;\r\n case 14:\r\n case 'up':\r\n case 'unionpay':\r\n cardImage = Unipay;\r\n cardName = '';\r\n break;\r\n default:\r\n cardImage = CreditCardImg;\r\n cardName = '';\r\n }\r\n return { cardImage, cardName };\r\n };\r\n\r\n return (\r\n <>\r\n {isLoading && \r\n
\r\n ) : null}\r\n\r\n \r\n \r\n {\r\n setSelectedCard(card);\r\n setIsRemoveCardModalOpen(true);\r\n }}\r\n >\r\n
\r\n {index !== component.paymenMethodsList.length - 1 &&
}
\r\n \r\n );\r\n }\r\n if (card.AccountType === 0) {\r\n return null;\r\n }\r\n })}\r\n }
\r\n
\r\n ) : (\r\n \r\n \r\n \r\n {searchResults.totalSearchResults > pageSize && (\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 SearchResults;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { getQueryParams, redirectToUrl } from '../../services/utils';\r\nimport { setWeakAccount } from '../../redux/user/actions';\r\nimport routes from '../../constants/routes';\r\nimport Password0 from './Password0';\r\nimport Password1 from './Password1';\r\nimport Questions0 from './Questions0';\r\nimport Questions1 from './Questions1';\r\nimport './securityAlerts.scss';\r\n\r\nconst stepsSecurityAlertsMap = [Password0, Password1, Questions0, Questions1];\r\n\r\nconst SecurityAlerts = ({ t, fields }) => {\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const dispatch = useDispatch();\r\n const [step, setStep] = useState(0);\r\n const [state, setState] = useState({});\r\n const toNextStep = () => setStep(step + 1);\r\n const Stepper = stepsSecurityAlertsMap[step];\r\n const queryParams = getQueryParams(useLocation().search);\r\n const returnUrl = queryParams.returnUrl;\r\n\r\n function redirectAfterLogin() {\r\n const redirectUrl = returnUrl ? returnUrl : routes.dashboard;\r\n dispatch(setWeakAccount(false));\r\n redirectToUrl(redirectUrl);\r\n }\r\n\r\n useEffect(() => {\r\n if (userInfo.isWeakQaAVisible) {\r\n setStep(2);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {isLoading && \r\n {item.pageTitle}}\r\n titleA11y={item.pageTitle}\r\n >\r\n {item.description}\r\n \r\n {`${item.url}`}\r\n \r\n \r\n ))}\r\n
\r\n \r\n {getResultNumber(fields.resultNumbers)}\r\n
\r\n {searchResults.results.map((item) => (\r\n \r\n
\r\n \r\n {error ? (\r\n \r\n
\r\n
\r\n \r\n )}\r\n />\r\n\r\n()+,”]))[A-Za-z\\d@$!%*#?&\\'\\\"<>()+,”]{8,25}$/,\r\n t('forgotPasswordNewPasswordValidation')\r\n ),\r\n ConfirmNewPassword: Yup.string()\r\n .required(fields.enterConfirmPassword?.value)\r\n .oneOf([Yup.ref('NewPassword'), null], t('forgotPasswordPaswordsNotMatched')),\r\n })}\r\n onSubmit={(values) => {\r\n api\r\n .updatePassword({\r\n Password: values.CurrentPassword,\r\n NewPassword: values.NewPassword,\r\n CustomerId: userInfo.customerId,\r\n })\r\n .then(({ data }) => {\r\n if (data.Success) {\r\n toNextStep();\r\n } else if (data.Error) {\r\n setState({\r\n ...state,\r\n updateResult: 'notUpdated',\r\n });\r\n } else {\r\n handleServerSuccessError(data.Error, setInlineError);\r\n }\r\n }, handleServerError(setIsServerError, setIsError));\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport { Success, InlineButtonBlock, Header, Error } from '../../molecules';\r\n\r\nexport default function Password1({ fields, userInfo, toNextStep, redirectAfterLogin, state }) {\r\n const dispatch = useDispatch();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n />\r\n\r\n
\r\n \r\n \r\n {state.updateResult && state.updateResult === 'notUpdated' ? (\r\n <>\r\n handleLogOut(dispatch)}\r\n buttonText={fields.buttonSignout}\r\n buttonTextA11y={fields.buttonSignoutA11y.value}\r\n />\r\n \r\n ) : (\r\n <>\r\n (\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport * as Yup from 'yup';\r\nimport { Formik } from 'formik';\r\n\r\nimport api from '../../services/api';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport { Button, ButtonBlock, Loader, SubHeader } from '../../atoms';\r\nimport { CardBlock, Select, TextInput, Header } from '../../molecules';\r\n\r\nexport default function Questions0({ state, toNextStep, fields, t, setState, userInfo }) {\r\n const [questions, setQuestions] = useState([]);\r\n const [answers, setAnswers] = useState([]);\r\n const [allQuestions, setAllQuestions] = useState([]);\r\n const [secuQuesLoading, setSecuQuesLoading] = useState(false);\r\n const [secuQuesWithAnsLoading, setSecuQuesWithAnsLoading] = useState(false);\r\n\r\n useEffect(() => {\r\n setState({\r\n securityQuestionsResult: null,\r\n });\r\n setSecuQuesLoading(true);\r\n api\r\n .getAllSecurityQuestions()\r\n .then((response) => {\r\n setSecuQuesLoading(false);\r\n if (response.status === 200) {\r\n setAllQuestions(\r\n response.data.map((i) => ({\r\n label: i.Item2,\r\n value: i.Item1,\r\n }))\r\n );\r\n }\r\n })\r\n .catch((err) => setSecuQuesLoading(false));\r\n }, []);\r\n\r\n useEffect(() => {\r\n setSecuQuesWithAnsLoading(true);\r\n api\r\n .getSecurityQuestionsWithAnswers()\r\n .then((response) => {\r\n setSecuQuesWithAnsLoading(false);\r\n if (response.data.Success) {\r\n setQuestions(\r\n response.data.Data.map((i) => ({\r\n label: i.Item1.Text,\r\n value: i.Item1.Id,\r\n }))\r\n );\r\n\r\n setAnswers(\r\n response.data.Data.map((i) => ({\r\n answer: i.Item2,\r\n }))\r\n );\r\n\r\n setState({\r\n ...state,\r\n response,\r\n });\r\n } else {\r\n handleServerSuccessError(response.data.Error, {});\r\n }\r\n })\r\n .catch((err) => setSecuQuesWithAnsLoading(false));\r\n }, []);\r\n\r\n if (secuQuesLoading || secuQuesWithAnsLoading) return \r\n
\r\n \r\n {\r\n api\r\n .updateSecurityQuestions({\r\n CustomerId: userInfo.customerId,\r\n Question1Id: values.Question1Id,\r\n Question2Id: values.Question2Id,\r\n Question3Id: values.Question3Id,\r\n Answer1: values?.Answer1?.trim(),\r\n Answer2: values?.Answer2?.trim(),\r\n Answer3: values?.Answer3?.trim(),\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n toNextStep();\r\n } else if (!response.data.Success && response.data.Error) {\r\n setState({\r\n errorField: JSON.parse(response.data.Error),\r\n });\r\n handleServerSuccessError(response.data.Error, {}, null, {});\r\n } else {\r\n setState({\r\n ...state,\r\n qaaUpdatedResult: 'notUpdated',\r\n });\r\n toNextStep();\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values }) => (\r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport handleLogOut from '../../services/handleLogOut';\r\nimport { Success, InlineButtonBlock, Header, Error } from '../../molecules';\r\n\r\nexport default function Questions1({ fields, redirectAfterLogin, state }) {\r\n const dispatch = useDispatch();\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 {state.qaaUpdatedResult && state.qaaUpdatedResult === 'notUpdated' ? (\r\n <>\r\n handleLogOut(dispatch)}\r\n buttonText={fields.buttonSignout}\r\n buttonTextA11y={fields.buttonSignoutA11y.value}\r\n />\r\n \r\n ) : (\r\n <>\r\n (\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport { StepTracker } from '../../molecules';\r\nimport { getServerUrl, getQueryParams } from '../../services/utils';\r\nimport handleThirdPartyError from '../../services/handleThirdPartyError';\r\nimport handleAVSValidationError from '../../services/handleAVSValidationError';\r\nimport SetAutoload1 from './SetAutoload1';\r\nimport SetAutoload2 from './SetAutoload2';\r\nimport SetAutoload3 from './SetAutoload3';\r\n\r\nimport '../Autoload/autoload.scss';\r\nimport '../Autoload/autoloadPayment.scss';\r\nimport '../Autoload/autoloadSuccess.scss';\r\n\r\nconst stepsSetAutoloadMap = [SetAutoload1, SetAutoload2, SetAutoload3];\r\n\r\nconst SetAutoload = ({ fields, t, rendering, backToMyCardButtonLink }) => {\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toPreviousStep = () => {\r\n setStep(step - 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => window.location.reload();\r\n const [state, setState] = useState({});\r\n const location = useLocation();\r\n const dispatch = useDispatch();\r\n const [firstLoad, setIsFirstLoad] = useState(false);\r\n const [thirdPartySystemErrorType, setThirdPartySystemErrorType] = useState('');\r\n\r\n const returnUrl = `${getServerUrl()}${location.pathname}`;\r\n\r\n const queryParams = getQueryParams(location.search);\r\n const errorDisplay = handleAVSValidationError(queryParams, t);\r\n useEffect(() => {\r\n if (queryParams.success !== 'true' && step === 0 && !firstLoad) {\r\n dispatch(showScreenHeader(true));\r\n setIsFirstLoad(true);\r\n }\r\n if (queryParams.success === 'true') {\r\n const { loadAmount, thresholdAmount, transactionDate } = queryParams;\r\n dispatch(showScreenHeader(false));\r\n setState({\r\n ...state,\r\n loadAmount,\r\n thresholdAmount,\r\n transactionDate,\r\n });\r\n setStep(2);\r\n focusDiv.current.focus();\r\n }\r\n if (queryParams.error !== undefined || queryParams.cancel !== undefined) {\r\n const { loadAmount, thresholdAmount } = queryParams;\r\n let stepToSet = 1;\r\n\r\n setState({\r\n ...state,\r\n loadAmount,\r\n thresholdAmount,\r\n });\r\n\r\n handleThirdPartyError(queryParams.error, (error) => {\r\n setThirdPartySystemErrorType(error);\r\n stepToSet = 2;\r\n });\r\n dispatch(showScreenHeader(false));\r\n setStep(stepToSet);\r\n focusDiv.current.focus();\r\n }\r\n }, []);\r\n\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.IframeJs').map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] !== '') {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, []);\r\n\r\n const Stepper = stepsSetAutoloadMap[step];\r\n\r\n return (\r\n <>\r\n {step !== 0 ? (\r\n \r\n
\r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useDispatch } from 'react-redux';\r\nimport { Placeholder, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\n\r\nimport { showScreenHeader } from '../../redux/user/actions';\r\nimport handleServerSuccessError from '../../services/handleServerSuccessError';\r\nimport api from '../../services/api';\r\nimport {\r\n getServerUrl,\r\n getLongLanguageCode,\r\n formatDecimal,\r\n isJsonString,\r\n} from '../../services/utils';\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport { RadioInput, ButtonBlock, Button, Loader } from '../../atoms';\r\nimport { Error, PaymentModal } from '../../molecules';\r\nimport CreditCardImg from '../../assets/images/credit_card.png';\r\nimport AmericanExpress from '../../assets/images/Latest_American_Express.png';\r\nimport Interac from '../../assets/images/card_interac.png';\r\nimport MasterCard from '../../assets/images/mastercard_new.png';\r\nimport VisaCardImg from '../../assets/images/Visa_latest.png';\r\nimport Sears from '../../assets/images/Sears.png';\r\nimport MonerisVault from '../../assets/images/MonerisVault.png';\r\nimport MonerisToken from '../../assets/images/MonerisToken.png';\r\nimport Master from '../../assets/images/Master.png';\r\nimport Jcb from '../../assets/images/Jcb.png';\r\nimport Discover from '../../assets/images/Discover.png';\r\nimport Debit from '../../assets/images/Debit.png';\r\nimport Unipay from '../../assets/images/Unipay.png';\r\n\r\nexport default function SetAutoload2({\r\n fields,\r\n toNextStep,\r\n setState,\r\n state,\r\n toPreviousStep,\r\n userInfo,\r\n configKeys,\r\n t,\r\n returnUrl,\r\n isError,\r\n errorContent,\r\n rendering,\r\n}) {\r\n const [error, setIsError] = useState('');\r\n const dispatch = useDispatch();\r\n const [isSavedPaymentSetForCustomer, setSavedPaymentSetForCustomer] = useState(false);\r\n const [isSavedPaymentSetForCustomerSelected, setSavedPaymentSetForCustomerSelected] = useState(\r\n false\r\n );\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [token, setToken] = useState('');\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isGetTicketFetching, setIsGetTicketFetching] = useState(false);\r\n const [showCard, setShowCard] = useState({ paymenMethodsList: [] });\r\n const [isGetTicketFetchError, setIsGetTicketFetchError] = useState('');\r\n const [autoloadSubscriptionError, setAutoloadSubscriptionError] = useState('');\r\n const [checkedCard,setCheckedCard] = useState(\"\");\r\n const customerId = userInfo.customerId;\r\n const visibleId = userInfo.selectedCard.visibleId;\r\n const userName = userInfo.userName;\r\n const [processdone,setProcessdone] = useState(false);\r\n\r\n const radioStyle = {\r\n margin: '16px 0px 16px 0px',\r\n };\r\n const errorStyle = {\r\n margin: '15px 0px',\r\n };\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n api\r\n .getRegisterPaymentMeansForCustomer({\r\n CustomerId: customerId,\r\n VisibleId: visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data?.Success) {\r\n if (response.data.RegisterPaymentMeansList[0]?.RegFormOfPaymRecId) {\r\n setSavedPaymentSetForCustomer(true);\r\n setShowCard({\r\n paymenMethodsList: response.data.RegisterPaymentMeansList,\r\n });\r\n \r\n //To pre-select radio button on pageload\r\n let registerPaymentMeansList = response.data.RegisterPaymentMeansList;\r\n let padInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 0);\r\n let cardInSPM = registerPaymentMeansList?.filter((key, index) => key.AccountType == 1);\r\n\r\n setIsLoading(false);\r\n //To pre-select radio button on pageload\r\n if (padInSPM.length > 0) {\r\n var id = fields.authorizedLabel.value;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n \r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: padInSPM[0].RegFormOfPaymRecId,\r\n });\r\n\r\n }\r\n if (padInSPM.length == 0 && cardInSPM.length > 0) {\r\n var id = `**** ${cardInSPM[0].CreditCard.TruncatedPAN.slice(\r\n -4\r\n )}`;\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n }\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: cardInSPM[0].RegFormOfPaymRecId,\r\n });\r\n\r\n /*\r\n var id = `**** ${response.data.RegisterPaymentMeansList[0].CreditCard.TruncatedPAN.slice(\r\n -4\r\n )}`;\r\n\r\n\r\n if (document.getElementById(id) != null) {\r\n document.getElementById(id).checked = true;\r\n }\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionSaved,\r\n regFormOfPaymRecId: response.data.RegisterPaymentMeansList[0].RegFormOfPaymRecId,\r\n });\r\n */\r\n } \r\n }else {\r\n setIsLoading(false);\r\n var id = fields.creditCardOption.value;\r\n document.getElementById(id).checked = true;\r\n setCheckedCard(id);\r\n setState({\r\n ...state,\r\n selectedCard: sharedFormConstants.cardOptionDebit,\r\n });\r\n }\r\n } else {\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n api\r\n .getAccessToken()\r\n .then((accessToken) => setToken(accessToken))\r\n .catch(() => {\r\n setToken('');\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if(processdone)\r\n setCheckboxState(checkedCard);\r\n \r\n}, [processdone]);\r\n\r\nconst setCheckboxState = (id) => {\r\n const element = document.getElementById(id);\r\n if (id && element) {\r\n element.checked = true;\r\n }\r\n};\r\n\r\n const monerisEnvironment =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.Environment').map((config) => config.setting);\r\n\r\n const postCpgAdHocPaymentForm = async () => {\r\n document.getElementById('frmPayment').submit();\r\n };\r\n\r\n const handleMoneris = () => {\r\n setIsOpen(true);\r\n setIsLoading(false);\r\n setIsGetTicketFetching(true);\r\n api\r\n .getTicket({\r\n paymentProfileType: 'TOKENIZE',\r\n OrderNumber: '',\r\n customerId: customerId,\r\n VisibleId: visibleId,\r\n userName: userName,\r\n amount: 0,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n var myCheckout = new window.monerisCheckout();\r\n myCheckout.setMode(monerisEnvironment[0]);\r\n myCheckout.setCheckoutDiv('monerisCheckout');\r\n myCheckout.setCallback('page_loaded', PageLoad);\r\n myCheckout.setCallback('cancel_transaction', CancelTransaction);\r\n myCheckout.setCallback('error_event', ErrorEvent);\r\n myCheckout.setCallback('payment_receipt', PaymentReceipt);\r\n myCheckout.setCallback('payment_complete', PaymentComplete);\r\n myCheckout.startCheckout(response.data.TicketResponse.ticket);\r\n const ticketResponse = response.data.TicketResponse.ticket;\r\n\r\n function PageLoad() {\r\n setIsGetTicketFetching(false);\r\n }\r\n\r\n function CancelTransaction() {\r\n setIsOpen(false);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n\r\n function PaymentComplete(args) {\r\n document.getElementById('monerisCheckout').innerHTML = '';\r\n document.getElementById('monerisCheckout').style = '';\r\n const parsedData = isJsonString(args) ? JSON.parse(args) : '';\r\n if (parsedData?.response_code !== '001') {\r\n setIsOpen(false);\r\n setAutoloadSubscriptionError(t('monerisPaymentError'));\r\n } else {\r\n setIsOpen(false);\r\n setIsLoading(true);\r\n api\r\n .createAutoloadSubscription({\r\n LoadAmount: state.loadAmount,\r\n ThresholdAmount: state.thresholdAmount,\r\n VisibleId: visibleId,\r\n CustomerId: customerId,\r\n Ticket: ticketResponse,\r\n DeviceId: userInfo.sessionInstanceId,\r\n Username: userName,\r\n })\r\n .then((response) => {\r\n if (response.data.Success === true) {\r\n toNextStep();\r\n setIsGetTicketFetching(false);\r\n setIsLoading(false);\r\n } else {\r\n setIsGetTicketFetching(false);\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setAutoloadSubscriptionError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function PaymentReceipt(args) {\r\n PaymentComplete(args);\r\n }\r\n\r\n function ErrorEvent() {\r\n setIsOpen(false);\r\n }\r\n } else {\r\n setIsGetTicketFetching(false);\r\n setIsOpen(false);\r\n setIsLoading(false);\r\n const parsedError = isJsonString(response?.data?.Error)\r\n ? JSON.parse(response.data.Error)\r\n : '';\r\n setIsGetTicketFetchError(parsedError?.Description);\r\n if(checkedCard && document.getElementById(checkedCard)){\r\n document.getElementById(checkedCard).checked = true;\r\n }\r\n }\r\n }).catch(() => { })\r\n .finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n };\r\n\r\n const getCardImage = (Type) => {\r\n let cardImage;\r\n switch (Type.toLowerCase()) {\r\n case 0:\r\n case 'v':\r\n case 'visa':\r\n cardImage = VisaCardImg;\r\n break;\r\n case 1:\r\n case 'm':\r\n case 'mastercard':\r\n cardImage = MasterCard;\r\n break;\r\n case 2:\r\n case 'americanexpress':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 3:\r\n case 'no':\r\n case 'discover':\r\n cardImage = Discover;\r\n break;\r\n case 4:\r\n case 'monerisvault':\r\n cardImage = MonerisVault;\r\n break;\r\n case 5:\r\n case 'moneristoken':\r\n cardImage = MonerisToken;\r\n break;\r\n case 6:\r\n case 'interac':\r\n cardImage = Interac;\r\n break;\r\n case 7:\r\n case 'master':\r\n cardImage = Master;\r\n break;\r\n case 8:\r\n case 'ax':\r\n case 'amex':\r\n cardImage = AmericanExpress;\r\n break;\r\n case 9:\r\n case 'unknown':\r\n cardImage = CreditCardImg;\r\n break;\r\n case 10:\r\n cardImage = CreditCardImg;\r\n break;\r\n case 11:\r\n case 'c1':\r\n case 'jcb':\r\n cardImage = Jcb;\r\n break;\r\n case 12:\r\n case 'd':\r\n case 'debit':\r\n cardImage = Interac;\r\n break;\r\n case 13:\r\n case 'se':\r\n case 'sears':\r\n cardImage = Sears;\r\n break;\r\n case 14:\r\n case 'up':\r\n case 'unionpay':\r\n cardImage = Unipay;\r\n break;\r\n default:\r\n cardImage = CreditCardImg;\r\n }\r\n return cardImage;\r\n };\r\n\r\n return (\r\n <>\r\n {isLoading && \r\n {\r\n api\r\n .isAutoloadAllowed({\r\n visibleId: userInfo.selectedCard.visibleId,\r\n })\r\n .then((response) => {\r\n if (response.data.Success) {\r\n api\r\n .isAutoloadAllowedWithBalance({\r\n autoLoadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n })\r\n .then((response2) => {\r\n if (response2.data.Success) {\r\n api\r\n .setupAutoloadDetails({\r\n autoloadStatementType: 0,\r\n customerId: userInfo.customerId,\r\n visibleId: userInfo.selectedCard.visibleId,\r\n nickName: userInfo.selectedCard.nickName,\r\n loadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n })\r\n .then((response3) => {\r\n if (response3.data) {\r\n setState({\r\n loadAmount: values.loadAmount,\r\n thresholdAmount: values.thresholdAmount,\r\n });\r\n dispatch(showScreenHeader(false));\r\n toNextStep();\r\n } else {\r\n handleServerSuccessError(response2.data.Error, setIsError);\r\n }\r\n });\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n } else {\r\n handleServerSuccessError(response.data.Error, setIsError);\r\n }\r\n });\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setProcessdone(false);\r\n const newState = { ...state };\r\n setIsLoading(true);\r\n if (newState.selectedCard === sharedFormConstants.cardOptionSaved) {\r\n setSavedPaymentSetForCustomerSelected(true);\r\n api\r\n .createAutoloadSubscriptionWithSavedPaymentMethod({\r\n LoadAmount: state.loadAmount,\r\n ThresholdAmount: state.thresholdAmount,\r\n VisibleId: visibleId,\r\n SavedPaymentMethodId: state.regFormOfPaymRecId,\r\n CustomerId: customerId,\r\n })\r\n .then((result) => {\r\n if (result.data.Success) {\r\n toNextStep();\r\n setIsLoading(false);\r\n } else {\r\n handleServerSuccessError(result.data.Error, setIsError);\r\n setIsLoading(false);\r\n }\r\n }).catch((error) => {\r\n })\r\n .finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n } else {\r\n handleMoneris();\r\n }\r\n }}\r\n >\r\n {({ errors, touched, values, handleSubmit }) => (\r\n
\r\n )}\r\n \r\n\r\n {values[sharedFormConstants.cardOption] ===\r\n sharedFormConstants.cardOptionDebit && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {error ?
\r\n\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n {thirdPartySystemErrorType ? (\r\n (\r\n \r\n
\r\n \r\n
\r\n {thirdPartySystemErrorType ? (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {state.transactionDate || formatDate(Date.now())}
\r\n \r\n \r\n \r\n\r\n (\r\n {\r\n setProcessdone(false);\r\n const newState = { ...state };\r\n setIsLoading(true);\r\n if (newState.selectedCard === sharedFormConstants.cardOptionSaved) {\r\n setSavedPaymentSetForCustomerSelected(true);\r\n api\r\n .createSavedPaymentAutorenewSubscription({\r\n VisibleId: userInfo.selectedCard.visibleId,\r\n CustomerId: userInfo.customerId,\r\n MediaId: userInfo.selectedCard.mediaId,\r\n ProductId: state.product.ProductId,\r\n RegFormOfPaymRecId: state.regFormOfPaymRecId,\r\n PaymentGatewayResponse: null,\r\n Month: state.autorenew.month,\r\n Year: state.autorenew.year,\r\n })\r\n .then((result) => {\r\n if (result.data.Success) {\r\n toCheckoutStep2();\r\n setIsLoading(false);\r\n } else {\r\n handleServerSuccessError(result.data.Error, setIsError);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch(() => {\r\n setIsLoading(false);\r\n }).finally(() => {\r\n setIsLoading(false);\r\n setProcessdone(true);\r\n });\r\n } else {\r\n handleMoneris();\r\n }\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values }) => {\r\n const checkOption =\r\n values[sharedFormConstants.cardOption] === sharedFormConstants.cardOptionDebit;\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 {checkoutItem.autorenew.endDate ? (\r\n \r\n {`${formatDate(new Date())} - ${formatDate(checkoutItem.autorenew.endDate)}`}\r\n
\r\n ) : null}\r\n\r\n \r\n {fields.autorenewAgreementPeriodDescription.value\r\n .replace(\r\n '{monthly-payment-amount}',\r\n formatDecimalWithCurrency(checkoutItem.subTotal)\r\n )\r\n .replace('{transit-pass-name}', checkoutItem.name)}\r\n
\r\n \r\n
\r\n )}\r\n />\r\n \r\n {error ?
\r\n \r\n {\r\n setState({ ...state, selectedCard: e.target.value });\r\n setCheckedCard(e.target.id);\r\n }}\r\n />\r\n
\r\n {isSavedPaymentSetForCustomer && (\r\n \r\n {showCard &&\r\n showCard.paymenMethodsList &&\r\n showCard.paymenMethodsList.map((card, index) => {\r\n if (card.AccountType === 1) {\r\n return (\r\n
\r\n )}\r\n \r\n {\r\n setState({\r\n ...state,\r\n selectedCard: e.target.value,\r\n regFormOfPaymRecId: card.RegFormOfPaymRecId,\r\n });\r\n setCheckedCard(e.target.id);\r\n }}\r\n cardImgSrc={getCardImage(card.CreditCard.CardType)}\r\n cardImgAlt=\"Media Icon\"\r\n sm\r\n />\r\n
\r\n );\r\n }\r\n if (card.AccountType === 0) {\r\n return (\r\n \r\n {\r\n setState({\r\n ...state,\r\n selectedCard: e.target.value,\r\n regFormOfPaymRecId: card.RegFormOfPaymRecId,\r\n });\r\n setCheckedCard(e.target.id);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n })}\r\n \r\n \r\n {errors[sharedFormConstants.terms]}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {state.selectedCard === sharedFormConstants.cardOptionDebit ? (\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n\r\n {thirdPartySystemErrorType ? (\r\n (\r\n <>\r\n \r\n \r\n redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.toTransitPassesButtonTextA11y.value}\r\n >\r\n \r\n */}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(SetAutorenew2);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { getQueryParams } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport { StepTracker } from '../../molecules';\r\nimport handleThirdPartyError from '../../services/handleThirdPartyError';\r\nimport handleAVSValidationError from '../../services/handleAVSValidationError';\r\nimport SetAutorenew1 from './SetAutorenew1';\r\nimport SetAutorenew2 from './SetAutorenew2';\r\n\r\nconst backToTransitPassesButtonLink = routes.transitPasses;\r\nconst stepsMap = [SetAutorenew1, SetAutorenew2];\r\nconst checkoutStep1 = 0;\r\nconst checkoutStep2 = 1;\r\n\r\nconst SetAutorenew = ({ fields, t, state, setState, action, isSuccess, error, rendering }) => {\r\n const userInfo = useSelector((s) => s.user);\r\n const configKeys = useSelector((s) => s.settings.configKeys);\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toCheckoutStep1 = () => {\r\n setStep(checkoutStep1);\r\n focusDiv.current.focus();\r\n };\r\n const toCheckoutStep2 = () => {\r\n setStep(checkoutStep2);\r\n focusDiv.current.focus();\r\n };\r\n const [thirdPartySystemErrorType, setThirdPartySystemErrorType] = useState('');\r\n const location = useLocation();\r\n const queryParams = getQueryParams(location.search);\r\n const errorDisplay = handleAVSValidationError(queryParams, t);\r\n\r\n const monerisIframeUrl =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.IframeJs').map((config) => config.setting);\r\n\r\n const monerisApplePayJs =\r\n configKeys &&\r\n configKeys.filter((item) => item.key === 'Moneris.ApplepayJs').map((config) => config.setting);\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = monerisIframeUrl[0];\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const applePayScript = document.createElement('script');\r\n applePayScript.src = monerisApplePayJs[0];\r\n if (monerisApplePayJs[0] != null && monerisApplePayJs[0] !== '') {\r\n applePayScript.src = monerisApplePayJs[0];\r\n }\r\n applePayScript.async = true;\r\n document.body.appendChild(applePayScript);\r\n return () => {\r\n document.body.removeChild(applePayScript);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const serializedData = queryParams?.serializedData && JSON.parse(queryParams.serializedData);\r\n if (action === 'set' && serializedData.flow !== 'ttc') {\r\n if (isSuccess === 'true') {\r\n setStep(checkoutStep2);\r\n focusDiv.current.focus();\r\n } else {\r\n let stepToSet = checkoutStep1;\r\n\r\n if (error) {\r\n handleThirdPartyError(error, (err) => {\r\n setThirdPartySystemErrorType(err);\r\n stepToSet = checkoutStep2;\r\n });\r\n }\r\n setStep(stepToSet);\r\n focusDiv.current.focus();\r\n }\r\n }\r\n }, []);\r\n\r\n const Stepper = stepsMap[step];\r\n return (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n {checkoutItem.autorenew.endDate ? (\r\n \r\n {`${formatDate(new Date())} - ${formatDate(checkoutItem.autorenew.endDate)}`}\r\n
\r\n ) : null}\r\n\r\n \r\n {fields.autorenewAgreementPeriodDescription.value\r\n .replace(\r\n '{monthly-payment-amount}',\r\n formatDecimalWithCurrency(checkoutItem.subTotal)\r\n )\r\n .replace('{transit-pass-name}', checkoutItem.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 redirectToUrl(backToTransitPassesButtonLink)}\r\n buttonTextA11y={fields.toTransitPassesButtonTextA11y.value}\r\n >\r\n
\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {fields.Print.value}\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n );\r\n};\r\nexport default withTranslation()(SetAutorenew);\r\n","import { useSelector } from 'react-redux';\r\n\r\nimport mediaSubTypes from '../constants/mediaSubTypes';\r\n\r\nconst useSelectedCard = () => {\r\n const { type, visibleId } = useSelector((state) => state.user.selectedCard);\r\n return useSelector((state) => {\r\n if (type === '') {\r\n return state.user.selectedCard;\r\n }\r\n if (type === mediaSubTypes.presto) {\r\n let faremedias = state.user.fareMedias.find((i) => i.visibleId === visibleId);\r\n if (faremedias === undefined) {\r\n return state.user.fareMedias[0];\r\n }\r\n return faremedias;\r\n }\r\n if (type === mediaSubTypes.anonymous) {\r\n return state.user.fareMedias.find((i) => i.visibleId === visibleId);\r\n }\r\n return state.user.contactlessMedias.find((i) => i.visibleId === visibleId);\r\n });\r\n};\r\n\r\nexport default useSelectedCard;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport useSelectedCard from '../../hooks/useSelectedCard';\r\nimport { Loader, PrestoLink } from '../../atoms';\r\nimport { CardSwitcher, CardControlledMenuItem } from '../../molecules';\r\nimport accountAvatarImg from '../../assets/images/account_avatar.svg';\r\nimport './sideNavigation.scss';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport routes from '../../constants/routes';\r\nimport { redirectToUrl } from '../../services/utils';\r\n\r\nconst SideNavigation = (props) => {\r\n const { datasource, contextItem } = props.fields && props.fields.data ? props.fields.data : {};\r\n // const authenticated = useSelector((state) => state.user.authenticated);\r\n // const anonymous = useSelector((state) => state.user.anonymous);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n const selectedCard = useSelectedCard();\r\n const userInfo = useSelector((state) => state.user);\r\n const isLoading = useSelector((state) => state.user.isLoading);\r\n const firstNameUpdatePersonalInfo = useSelector((reduxState) => reduxState.user.firstNameUpdatePersonalInfo);\r\n let [showSideNav, setShowSideNav] = useState(true);\r\n let [loading, setLoading] = useState(false);\r\n\r\n let showCardSwitcher = false;\r\n\r\n function enableCardSwitcher(enable) {\r\n showCardSwitcher = enable;\r\n }\r\n\r\n function showElement(showForPrestoCard, showForContactlessCard) {\r\n return (\r\n !showCardSwitcher ||\r\n (showCardSwitcher && showForPrestoCard && selectedCard?.type === mediaSubTypes.presto) ||\r\n (showCardSwitcher && showForContactlessCard && selectedCard?.type !== mediaSubTypes.presto)\r\n );\r\n }\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [props]);\r\n useEffect(() => {\r\n let hasUserInfo = userInfo.customerId ? true : false;\r\n if (document.getElementsByClassName('order_new_card_image_para').length > 0 && !hasUserInfo) {\r\n setShowSideNav(false);\r\n } else if (\r\n document.getElementsByClassName('order_new_card_image_para').length > 0 &&\r\n hasUserInfo\r\n ) {\r\n setShowSideNav(true);\r\n } else if (!document.getElementsByClassName('order_new_card_image_para').length > 0) {\r\n setShowSideNav(true);\r\n }\r\n }, [isLoaded]);\r\n\r\n /* useEffect(() => {\r\n if (anonymous && !authenticated) {\r\n datasource.children.splice(2, datasource.children.length);\r\n }\r\n }, []); */\r\n\r\n return showSideNav\r\n ? [\r\n loading ? \r\n
,\r\n ]\r\n : null;\r\n};\r\n\r\nexport default withTranslation()(SideNavigation);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport './signinsidebar.scss';\r\nimport { MediaImageList } from '../../molecules';\r\nimport { MediaImage, Button } from '../../atoms';\r\nimport ChevronRight from '../../assets/images/ChevronRight.svg';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\nimport { redirectToUrl, getQueryParams } from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport api from '../../services/api';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nconst SigninSidebar = (props) => {\r\n const isMobile = useMediaWidth();\r\n const { datasource, contextItem } = props.fields && props.fields.data ? props.fields.data : {};\r\n const [selectedType, setSelectedType] = useState('');\r\n const [isClicked, setIsClicked] = useState(false);\r\n\r\n const queryParams = getQueryParams(useLocation().search);\r\n const cwsRedirectUrlHash = queryParams.hash;\r\n const cwsRedirectUrl = queryParams.redirectUrl; \r\n\r\n const onClickHandler = (e, type) => {\r\n setIsClicked(true);\r\n setSelectedType(type);\r\n props.onClickCallback(type);\r\n };\r\n\r\n const keyDownHandler = (e, type) => {\r\n if (e.keyCode == 13) {\r\n setIsClicked(true);\r\n setSelectedType(type);\r\n props.onClickCallback(type);\r\n }\r\n };\r\n \r\n const signinCard = (\r\n type,\r\n ariaLabel,\r\n accountType,\r\n cardImageProps,\r\n isAnonymousPresto = false,\r\n isPrestoAccount = false\r\n ) => (\r\n \r\n {datasource &&\r\n (datasource.WithCardSwitcher?.jss.value === true && selectedCard?.type === '' ? (\r\n <>\r\n {datasource.children.some(\r\n (child) => child.ShowCardSwitcher?.jss.value === true\r\n ) && \r\n
\r\n )}\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n ))}\r\n - \r\n {datasource.children.map((child) => (\r\n <>\r\n {child.ShowCardSwitcher?.jss.value === true && (\r\n
- \r\n
\r\n
\r\n {child.WelcomeMessage?.jss.value}\r\n {userInfo.firstName?.length ? (\r\n
\r\n12 ? 'isSmall' : ''}>\r\n {firstNameUpdatePersonalInfo ? firstNameUpdatePersonalInfo : userInfo.firstName}!\r\n\r\n ) : null}\r\n \r\n )}\r\n {child.ShowDivider?.jss.value === true &&\r\n showElement(\r\n child.ShowForPrestoCard?.jss.value === true,\r\n child.ShowForContactlessCard?.jss.value === true\r\n ) ? (\r\n - \r\n
\r\n \r\n ) : null}\r\n \r\n ))}\r\n
\r\n
\r\n \r\n
\r\n {accountType}
\r\n \r\n {isAnonymousPresto ? (\r\n
\r\n \r\n 
\r\n
\r\n \r\n );\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n {signinCard(\r\n 'AC',\r\n datasource.children[1].AccountTitleA11y?.jss.value,\r\n datasource.children[1].AccountTitle?.jss.value,\r\n {\r\n showInteracCard: true,\r\n }\r\n )}\r\n
\r\n \r\n
\r\n {cwsRedirectUrl ?\r\n \r\n
\r\n {datasource.SigninTitle?.jss.value}
\r\n api.b2cRegisteredSignInRedirect(cwsRedirectUrl, cwsRedirectUrlHash)}\r\n onKeyPress={(event) => {\r\n if (event.key === 'Enter') {\r\n api.b2cRegisteredSignInRedirect(cwsRedirectUrl,cwsRedirectUrlHash)\r\n }\r\n }}\r\n className={`${(!isMobile && props.typeSelected === 'PA') ||\r\n (isMobile && props.isClicked && props.typeSelected === 'PA')\r\n ? 'card-wrapper-active'\r\n : 'card-wrapper'\r\n }`}\r\n >\r\n {signinCard(\r\n 'PA',\r\n datasource.children[2].AccountTitleA11y?.jss.value,\r\n datasource.children[2].AccountTitle?.jss.value,\r\n { all: true, showInteracCard: true },\r\n false,\r\n true\r\n )}\r\n
: \r\n api.b2cRegisteredSignIn()}\r\n onKeyPress={(event) => {\r\n if (event.key === 'Enter') {\r\n api.b2cRegisteredSignIn()\r\n }\r\n }}\r\n className={`${(!isMobile && props.typeSelected === 'PA') ||\r\n (isMobile && props.isClicked && props.typeSelected === 'PA')\r\n ? 'card-wrapper-active'\r\n : 'card-wrapper'\r\n }`}\r\n >\r\n {signinCard(\r\n 'PA',\r\n datasource.children[2].AccountTitleA11y?.jss.value,\r\n datasource.children[2].AccountTitle?.jss.value,\r\n { all: true, showInteracCard: true },\r\n false,\r\n true\r\n )}\r\n
\r\n }\r\n \r\n
\r\n { cwsRedirectUrl ? {datasource.Ortext?.jss.value}
\r\n{datasource.SigninTitleAcc?.jss.value}
\r\n api.b2cPrestoCardSignInRedirect(cwsRedirectUrl, cwsRedirectUrlHash)}\r\n onKeyPress={(event) => {\r\n if (event.key === 'Enter') {\r\n api.b2cPrestoCardSignInRedirect(cwsRedirectUrl, cwsRedirectUrlHash)\r\n }\r\n }}\r\n className={`${(!isMobile && props.typeSelected === 'APC') ||\r\n (isMobile && props.isClicked && props.typeSelected === 'APC')\r\n ? 'card-wrapper-active'\r\n : props.typeSelected === 'AC'\r\n ? 'card-wrapper card-ac-selected'\r\n : 'card-wrapper'\r\n }`}\r\n >\r\n {signinCard(\r\n 'APC',\r\n datasource.children[0].AccountTitleA11y?.jss.value,\r\n datasource.children[0].AccountTitle?.jss.value,\r\n {},\r\n true\r\n )}\r\n
:\r\n api.b2cPrestoCardSignIn()}\r\n onKeyPress={(event) => {\r\n if (event.key === 'Enter') {\r\n api.b2cPrestoCardSignIn()\r\n }\r\n }}\r\n className={`${(!isMobile && props.typeSelected === 'APC') ||\r\n (isMobile && props.isClicked && props.typeSelected === 'APC')\r\n ? 'card-wrapper-active'\r\n : props.typeSelected === 'AC'\r\n ? 'card-wrapper card-ac-selected'\r\n : 'card-wrapper'\r\n }`}\r\n >\r\n {signinCard(\r\n 'APC',\r\n datasource.children[0].AccountTitleA11y?.jss.value,\r\n datasource.children[0].AccountTitle?.jss.value,\r\n {},\r\n true\r\n )}\r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SigninSidebar;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Placeholder, Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport CloseSideNavImage from '../../assets/images/HamburgerMenuClose.svg';\r\nimport { setSignInOverlay, setIframeEnabled } from '../../redux/contactless/actions';\r\nimport '../../assets/scss/app.scss';\r\nimport './signin.scss';\r\nimport SigninSidebar from '../SigninSidebar';\r\nimport { concat } from 'lodash';\r\nimport { getLocalStorageItem, redirectToUrl, setLocalStorageItem } from '../../services/utils';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\nimport HeaderLogo from '../../assets/images/PRESTO-Header-Logo.svg';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport api from '../../services/api';\r\n\r\nconst Signin = (props) => {\r\n const isMobile = useMediaWidth();\r\n const dispatch = useDispatch();\r\n const [isContentState] = useState(false);\r\n const [selectedType, setSelectedType] = useState('');\r\n const [isClicked, setIsClicked] = useState(false);\r\n dispatch(setIframeEnabled(true));\r\n\r\n const location = useLocation();\r\n let pathName = location.pathname;\r\n\r\n const onClickCallback = (type) => {\r\n setSelectedType(type);\r\n setIsClicked(true);\r\n if (type === 'AC') {\r\n dispatch(setSignInOverlay(true));\r\n }\r\n setTimeout(() => {\r\n if (type === 'PA') {\r\n const element = document.getElementById('prestoaccountsignin');\r\n element.focus();\r\n }\r\n if (type === 'APC') {\r\n const element = document.getElementById('anonymousaccountsignin');\r\n element.focus();\r\n }\r\n if (type === 'AC') {\r\n const element = document.getElementById('contactlessaccountsignin');\r\n element.focus();\r\n }\r\n }, 300);\r\n };\r\n const onClickCallbackMobile = (type) => {\r\n setSelectedType(type);\r\n setIsClicked(true);\r\n if (type === 'AC') {\r\n dispatch(setSignInOverlay(true));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n isMobile && !selectedType && setSelectedType('');\r\n pathName.includes(\"/sign-in\") && !isMobile && !selectedType && api.b2cRegisteredSignIn();\r\n //pathName.includes(\"/ContactlessSignin\") && !isMobile\r\n //console.log(selectedType);\r\n if (pathName.includes(\"/ContactlessSignin\") && !isMobile) {\r\n setSelectedType('AC');\r\n setIsClicked(true);\r\n dispatch(setSignInOverlay(true));\r\n }\r\n }, [isMobile, pathName]);\r\n\r\n const backToSigninSidebar = () => {\r\n setSelectedType('');\r\n setIsClicked(false);\r\n };\r\n\r\n useEffect(() => {\r\n let uniqueSessionId = uuidv4().replace(/-/g, '');\r\n if (!getLocalStorageItem(localStorageKeys.uniqueSessionId)) {\r\n setLocalStorageItem(localStorageKeys.uniqueSessionId, uniqueSessionId);\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 {!isMobile && (\r\n <>\r\n {\r\n redirectToUrl('/');\r\n }}\r\n href=\"javascript:void(0)\"\r\n >\r\n \r\n \r\n \r\n )}\r\n {isMobile &&\r\n (!isClicked ? (\r\n <>\r\n {\r\n redirectToUrl('/');\r\n }}\r\n href=\"javascript:void(0)\"\r\n >\r\n \r\n \r\n \r\n ) : (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n {props.fields.backToOption.value}
\r\n \r\n {!isMobile && (\r\n <>\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(SigninSuccess);\r\n","import React from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { PrestoLink } from '../../atoms';\r\nimport './Sitemap.scss';\r\n\r\nconst Sitemap = (props) => {\r\n const { datasource, contextItem } =\r\n props?.fields && props?.fields?.data ? props?.fields?.data : {};\r\n let indexvar;\r\n\r\n return (\r\n \r\n {datasource?.children?.map((child) => {\r\n indexvar = datasource?.children?.indexOf(child);\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(Sitemap);\r\n","import React from 'react';\r\nconst SogrButton = (props) => (\r\n \r\n);\r\n\r\nexport default SogrButton;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport api from '../../services/api';\r\nimport {\r\n redirectToUrl,\r\n redirectToUrlInNewWindow,\r\n formatDecimalWithCurrency,\r\n indexOfSelectedCard,\r\n} from '../../services/utils';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport useSelectedCard from '../../hooks/useSelectedCard';\r\n\r\nimport { setActivateCardMyProducts } from '../../redux/products/actions';\r\n\r\nimport './systemStatusMessage.scss';\r\nimport { useSelector } from 'react-redux';\r\n\r\nconst SystemStatusMessage = (props) => {\r\n const [message, setMessage] = useState(null);\r\n const [color, setColor] = useState('');\r\n const dispatch = useDispatch();\r\n const userInfo = useSelector((state) => state.user);\r\n const selectedCard = userInfo.selectedCard;\r\n const selectedCardIndex = indexOfSelectedCard(userInfo.fareMedias, selectedCard.visibleId);\r\n\r\n const { language } = props.fields;\r\n const { cardStateCode, currentBalance } = useSelectedCard();\r\n\r\n // const currentBalance = useSelector(\r\n // (state) => state.user.fareMedias[selectedCardIndex].currentBalance\r\n // );\r\n\r\n useEffect(() => {\r\n api\r\n .getFareCardStatusMessage({ cardStatusCode: cardStateCode })\r\n .then((response) => {\r\n setMessage(response.data);\r\n setColor(response.data.SystemColor.toLowerCase());\r\n })\r\n .catch(() => {});\r\n }, [language]);\r\n\r\n const handleButtonClick = (url, isLinkInternal) => {\r\n if (url.includes('/account/manage-my-cards')) {\r\n dispatch(setActivateCardMyProducts(true));\r\n }\r\n isLinkInternal ? redirectToUrl(url, false, isLinkInternal) : redirectToUrlInNewWindow(url);\r\n };\r\n\r\n return (\r\n <>\r\n {color && (\r\n \r\n \r\n
\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {child.children.map((subchild) => (\r\n \r\n \r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n {message.Cta1Link.Text && message.Cta1Link.Url && (\r\n \r\n handleButtonClick(message.Cta1Link.Url, message.Cta1Link.InternalLink)\r\n }\r\n >\r\n {message.Cta1Link.Text}\r\n \r\n )}\r\n {message.Cta2Link.Text && message.Cta2Link.Url && (\r\n \r\n handleButtonClick(message.Cta1Link.Url, message.Cta1Link.InternalLink)\r\n }\r\n firstOrder\r\n white\r\n >\r\n {message.Cta2Link.Text}\r\n \r\n )}\r\n \r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(SystemStatusMessage);\r\n","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Button } from '../../atoms';\r\nimport './targetedMessage.scss';\r\nimport { useSelector } from 'react-redux';\r\n\r\nconst TargetedMessage = (props) => {\r\n const authenticated = useSelector((state) => state.user.authenticated);\r\n const anonymous = useSelector((state) => state.user.anonymous);\r\n return authenticated && !anonymous ? null : (\r\n \r\n
\r\n {message.Header}
\r\n \r\n {props.fields.Balanceheading.value}: {formatDecimalWithCurrency(currentBalance)}\r\n
\r\n {message.Description}
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TargetedMessage;\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport useMedia from 'use-media';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Formik } from 'formik';\r\nimport * as Yup from 'yup';\r\nimport './termsAndConditions.scss';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport sharedFormConstants from '../../constants/sharedFormConstants';\r\nimport { Button, ButtonBlock, Checkbox, PrintButton } from '../../atoms';\r\nimport { Success, TextInput } from '../../molecules';\r\nimport api from '../../services/api';\r\n\r\nconst EmailButton = ({ onClick, isExpanded, buttonText, buttonTextA11y }) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props?.fields?.FirstLink?.value?.href && (\r\n {\r\n window.location.href = props?.fields?.FirstLink?.value?.href;\r\n }}\r\n >\r\n {props?.fields?.FirstLink?.value.text}\r\n \r\n )}\r\n {props?.fields?.SecondLink?.value?.href && (\r\n {\r\n window.location.href = props?.fields?.SecondLink?.value?.href;\r\n }}\r\n >\r\n {props?.fields?.SecondLink?.value.text}\r\n \r\n )}\r\n {props?.fields?.ThirdLink?.value?.href && (\r\n {\r\n window.location.href = props?.fields?.ThirdLink?.value?.href;\r\n }}\r\n >\r\n {props?.fields?.ThirdLink?.value.text}\r\n \r\n )}\r\n
\r\n \r\n \r\n {t('termsAndConditionsAgreement')}\r\n \r\n {redeemStepper?.redeemVoucherStepperBlock\r\n ? t('termsAndConditionsNewText')\r\n : t('termsAndConditionsLinkText')}\r\n \r\n \r\n
\r\n\r\n {/* TODO - Refactor - change to modal molecule */}\r\n {isModalOpen && (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {isMobile && (\r\n \r\n {isEmailOpen && (\r\n \r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\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 withTranslation()(TermsAndConditions);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport './ThirdcolumnLayout.scss';\r\nconst ThirdcolumnLayout = (props) => {\r\n const [threeColumnbg, setThreeColumnbg] = useState(false);\r\n useEffect(() => {\r\n if (props?.fields?.WhiteBackGround.value) {\r\n setThreeColumnbg(true);\r\n }\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\n
\r\n
\r\n {isEmailSent && (\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 ThirdcolumnLayout;\r\n","import React, { useState } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Placeholder, Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport './thumbnailCollection.scss';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\n\r\nconst ThumbnailCollection = (props) => {\r\n const thumbDivider = props?.params.pageCss;\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n useDidMountEffect(() => {\r\n setIsLoaded(true);\r\n }, [props]);\r\n if (!isLoaded) return null;\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\nexport default withTranslation()(ThumbnailCollection);\r\n","import React from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst ThumbnailCollections = (props) => (\r\n \r\n \r\n {props?.fields?.Title?.value}\r\n \r\n {props?.fields?.SubTitle ? (\r\n \r\n
\r\n \r\n
- \r\n {navigationItem.children?.map((a, i) => {\r\n let hasChild = a?.children?.length > 0;\r\n let disableParent = a?.DisableParentLink?.jss?.value;\r\n let EnableSubNavigationMenu = a?.EnableSubNavigationMenu?.jss?.value;\r\n let className = `${disableParent ? `disable-nav-link` : ``}`;\r\n return (\r\n
- \r\n
\r\n \r\n ))}\r\n
- \r\n {a.children.map((gChild, j) => (\r\n
\r\n
\r\n );\r\n const onSubmit = () => {\r\n setIsModalOpen(false);\r\n };\r\n\r\n return (\r\n \r\n {t('sessionTimeoutCountdownTitle')}\r\n
\r\n\r\n \r\n \r\n {({ getTime }) => (\r\n <>\r\n {getTime() < 1000 && timeOut !== 'timeOutReached' && setTimeOut('timeOutReached')}\r\n \r\n
\r\n {t('sessionTimeoutCountdownUnits')}
\r\n- \r\n
- \r\n {child.Link && child.children.length === 0 && (\r\n
\r\n )}\r\n {(child.Title || (child.Link && child.children.length > 0)) && (\r\n <>\r\n {child.Title && !child.WithCardSwitcher && (\r\n - \r\n {child.WithCardSwitcher === null &&\r\n child.children?.map((grandchild) => (\r\n
- \r\n {grandchild.Link && grandchild.children.length === 0 && (\r\n
\r\n )}\r\n {(grandchild.Title ||\r\n (grandchild.Link && grandchild.children.length > 0)) && (\r\n <>\r\n {grandchild.Title && (\r\n - \r\n
\r\n ))}\r\n\r\n - \r\n
\r\n ))}\r\n \r\n \r\n )}\r\n \r\n ))}\r\n - \r\n {grandchild.Link && grandchild.children.length === 0 && (\r\n
- \r\n \r\n\r\n \r\n
- \r\n
\r\n setOpenShoppingCart(!isOpenShoppingCart)}\r\n onKeyPress={() => setOpenShoppingCart(!isOpenShoppingCart)}\r\n >\r\n
\r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n >\r\n
\r\n \r\n\r\n \r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n />\r\n
\r\n - \r\n {child.WithCardSwitcher?.jss.value && (\r\n <>\r\n {allCards?.map((card, index) => (\r\n <>\r\n {/* eslint-disable */}\r\n
{card.nickName}
*/}\r\n {card.visibleId}
\r\n \r\n
\r\n \r\n {isCardSwitcherActive && activeCardIndex === index ? (\r\n - \r\n
- \r\n {child.Link && child.children.length === 0 && (\r\n
\r\n )}\r\n {(child.Title || (child.Link && child.children.length > 0)) && (\r\n <>\r\n {child.Title && (\r\n - \r\n {child.WithCardSwitcher?.jss.value && (\r\n <>\r\n {allCards?.map((card, index) => (\r\n <>\r\n {/* eslint-disable */}\r\n
{card.nickName}\r\n\r\n {card.type === mediaSubTypes.presto\r\n ? card.visibleId\r\n : card.mediaType === mediaTypes.CRDNC\r\n ? card.cardNumber\r\n : card.mediaId}\r\n\r\n \r\n {isCardSwitcherActive && activeCardIndex === index ? (\r\n - \r\n {(grandchild.Link && grandchild.children.length === 0) && (\r\n <>\r\n {grandchild.Link?.jss.value.href.includes(routes.loginAndSecurityRefresh) ?\r\n (\r\n
redirectToUrl(routes.loginAndSecurityRefresh)} />\r\n ) :\r\n (\r\n \r\n )}\r\n \r\n )}\r\n {(grandchild.Title ||\r\n (grandchild.Link && grandchild.children.length > 0)) && (\r\n <>\r\n {grandchild.Title && (\r\n - \r\n
\r\n ))}\r\n \r\n ) : null}\r\n \r\n )}\r\n\r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n ))}\r\n\r\n - \r\n
- \r\n \r\n\r\n \r\n
- \r\n
\r\n setOpenShoppingCart(!isOpenShoppingCart)}\r\n onKeyPress={() => setOpenShoppingCart(!isOpenShoppingCart)}\r\n >\r\n
\r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n >\r\n
\r\n \r\n\r\n \r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n />\r\n \r\n {child.children?.map((grandchild) => (\r\n <>\r\n {card.mediaType === mediaTypes.CRDNC ? (\r\n grandchild.Link &&\r\n card.mediaSubTypeWallet === mediaSubType.GOOGLE &&\r\n grandchild.ShowForGoogleWalletCard.jss.value ? (\r\n {\r\n e.preventDefault();\r\n redirectMyproductsMobile(card, grandchild);\r\n }}\r\n />\r\n ) : grandchild.Link &&\r\n card.mediaSubTypeWallet === mediaSubType.APPLE &&\r\n grandchild.ShowForAppleWalletCard.jss.value ? (\r\n {\r\n e.preventDefault();\r\n redirectMyproductsMobile(card, grandchild);\r\n }}\r\n />\r\n ) : grandchild.Link &&\r\n (card.mediaSubTypeWallet === null || '') &&\r\n !grandchild.ShowForPrestoCard.jss.value &&\r\n !grandchild.ShowForAppleWalletCard.jss.value &&\r\n !grandchild.ShowForGoogleWalletCard.jss.value &&\r\n !grandchild.ShowForContactlessCard.jss.value ? (\r\n {\r\n e.preventDefault();\r\n redirectMyproductsMobile(card, grandchild);\r\n }}\r\n />\r\n ) : (\r\n <>\r\n )\r\n ) : (\r\n grandchild.Link && (\r\n {\r\n e.preventDefault();\r\n redirectMyproductsMobile(card, grandchild);\r\n }}\r\n />\r\n )\r\n )}\r\n \r\n ))}\r\n \r\n ) : null}\r\n \r\n ))}\r\n \r\n )}\r\n {child.WithCardSwitcher === null &&\r\n child.children?.map((grandchild) => (\r\n
\r\n - \r\n
- \r\n
- \r\n {child.Link && child.children.length === 0 && (\r\n
\r\n )}\r\n {(child.Title || (child.Link && child.children.length > 0)) && (\r\n <>\r\n {child.Title && (\r\n - \r\n {child.children?.map((grandchild) => (\r\n
- \r\n {grandchild.Link && grandchild.children.length === 0 && (\r\n
- \r\n
\r\n ))}\r\n - \r\n
\r\n ))}\r\n \r\n \r\n )}\r\n \r\n ))}\r\n - \r\n {grandchild.Link && grandchild.children.length === 0 && (\r\n
- \r\n
\r\n {guestLogin && (\r\n <>\r\n setOpenShoppingCart(!isOpenShoppingCart)}\r\n onKeyPress={() => setOpenShoppingCart(!isOpenShoppingCart)}\r\n >\r\n
\r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n >\r\n
\r\n \r\n\r\n \r\n \r\n {\r\n showMobileMenu();\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setFilters({ ...values, PeriodId: datepickerValue });\r\n setIsFilters(false);\r\n }}\r\n >\r\n {({ errors, handleSubmit, values, setFieldValue, setFieldError, resetForm }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TransactionFilters;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport Iframe from 'react-iframe';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport routes from '../../../constants/routes';\r\nimport { getShortLanguageCode, localstorageService } from '../../../services/utils';\r\nimport { itemsAreLoading } from '../../../redux/user/actions';\r\nimport monerisConstants from '../../../constants/moneris';\r\nimport mediaSubTypes from '../../../constants/mediaSubTypes';\r\nimport api from '../../../services/api';\r\nimport creditCardIcon from '../../../assets/images/credit_card.svg';\r\nimport { ButtonBlock, Button, IconWithText } from '../../../atoms';\r\nimport { Error, ConnectionError, CardBlock } from '../../../molecules';\r\nimport localStorageKeys from '../../../constants/localStorageKeys';\r\nimport {\r\n redirectToUrl,\r\n} from '../../../services/utils';\r\nimport './cardVerification.scss';\r\n\r\nconst CardVerification0 = (props) => {\r\n const dispatch = useDispatch();\r\n const { fields, toNextStep, toFirstStep, setState, state } = props;\r\n const configKeys = useSelector((reduxState) => reduxState.settings.configKeys);\r\n const userInfo = useSelector((reduxState) => reduxState.user);\r\n const customerId = userInfo?.customerId || '';\r\n const accountId = userInfo?.accountId || '';\r\n const sessionInstanceId = userInfo.sessionInstanceId || '';\r\n const [hideIframe, setHideIframe] = useState(false);\r\n const [error, setError] = useState('');\r\n const [hasConnectionError, setHasConnectionError] = useState('');\r\n const [token, setToken] = useState('');\r\n\r\n function refreshIframe() {\r\n document.getElementById('iframe').src += '';\r\n setHideIframe(false);\r\n setHasConnectionError(false);\r\n }\r\n\r\n function setErrorAndRefreshIframe(errorText) {\r\n setError(errorText);\r\n refreshIframe();\r\n }\r\n\r\n function verifyCard(monerisToken, associatedMedia, cardVerificationRequiredItems, selectedCard) {\r\n const mediaInstanceIds = selectedCard.visibleId.split('|');\r\n const selectedCardMediaSubType = Object.keys(mediaSubTypes).find(\r\n (key) => mediaSubTypes[key] === selectedCard.type\r\n );\r\n\r\n if (\r\n associatedMedia.MediaReferenceId === selectedCard.mediaId &&\r\n associatedMedia.MediaIdentifiers.length === mediaInstanceIds.length &&\r\n associatedMedia.MediaIdentifiers.every(\r\n (item) =>\r\n mediaInstanceIds.indexOf(item.mediaInstanceId) > -1 &&\r\n item.mediaSubType === selectedCardMediaSubType &&\r\n item.mediaType === 'OPENP'\r\n )\r\n ) {\r\n dispatch(itemsAreLoading(true));\r\n api\r\n .verifyContactlessCard({\r\n MonerisToken: monerisToken,\r\n VerifyItem:\r\n JSON.parse(localstorageService().getItem(localStorageKeys.paymentsToVerifyData)),\r\n //VerifyItem: cardVerificationRequiredItems,\r\n })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n setState({\r\n ...state,\r\n hasSuccess: true,\r\n verificationError: '',\r\n });\r\n toNextStep();\r\n } else {\r\n const resError = JSON.parse(res.data.Error);\r\n\r\n setState({\r\n ...state,\r\n hasSuccess: false,\r\n verificationError: resError.Code || '',\r\n });\r\n toNextStep();\r\n }\r\n })\r\n .catch((err) => {\r\n console.warn(err);\r\n setState({\r\n ...state,\r\n hasSuccess: false,\r\n verificationError: 'Contactless_ConnectionError',\r\n });\r\n toNextStep();\r\n })\r\n .then(() => {\r\n dispatch(itemsAreLoading(false));\r\n });\r\n } else {\r\n setErrorAndRefreshIframe(fields.verifyCardErrorCVRCTAStep0205?.value);\r\n }\r\n }\r\n\r\n function processResponse(iframeResponse) {\r\n if (iframeResponse.StatusCode === monerisConstants.responses.success) {\r\n verifyCard(\r\n iframeResponse.DataKey,\r\n iframeResponse.AssociatedMedia,\r\n props.cardVerificationRequiredItems,\r\n userInfo.selectedCard\r\n );\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.connectionErrorI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.unauthorized ||\r\n iframeResponse.StatusCode === monerisConstants.responses.connectionErrorE\r\n ) {\r\n setError('');\r\n setHasConnectionError(true);\r\n setHideIframe(true);\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.authenticationErrorI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.authenticationErrorE\r\n ) {\r\n setErrorAndRefreshIframe(fields.verifyCardErrorCVRCTAStep0203?.value);\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.retryAttemptsExceededI ||\r\n iframeResponse.StatusCode === monerisConstants.responses.retryAttemptsExceededE\r\n ) {\r\n setError(fields.verifyCardErrorCVRCTAStep0202?.value);\r\n setHasConnectionError(false);\r\n setHideIframe(true);\r\n } else if (\r\n iframeResponse.StatusCode === monerisConstants.responses.technicalError ||\r\n iframeResponse.StatusCode === monerisConstants.responses.generalError ||\r\n iframeResponse.StatusCode === monerisConstants.responses.noAssociatedMediasFound ||\r\n iframeResponse.StatusCode === monerisConstants.responses.associatedMediasEmpty ||\r\n iframeResponse.StatusCode === monerisConstants.responses.forbidden\r\n ) {\r\n setErrorAndRefreshIframe(fields.verifyCardErrorCVRCTAStep0204?.value);\r\n } else {\r\n //setErrorAndRefreshIframe(fields.verifyCardErrorCVRCTAStep0204?.value);\r\n }\r\n }\r\n\r\n const handleIframeTask = (res) => {\r\n try {\r\n const iframeResponse = JSON.parse(res.data);\r\n processResponse(iframeResponse);\r\n } catch (err) {\r\n console.warn(err);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n let stsAccessToken = localstorageService().getItem(localStorageKeys.stsAccessToken);\r\n setToken(stsAccessToken);\r\n window.addEventListener('message', handleIframeTask);\r\n return () => window.removeEventListener('message', handleIframeTask);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {error ? {\r\n refreshIframe();\r\n }}\r\n />\r\n ) : null}\r\n <>\r\n {configKeys &&\r\n token &&\r\n configKeys\r\n .filter((item) => item.key === 'Ats.GatewayUrl')\r\n .map((configKey) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CardVerification0;\r\n","import React from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { ButtonBlock, PrintButton, Button, PrestoLink } from '../../../atoms';\r\nimport { Error, Success } from '../../../molecules';\r\nimport routes from '../../../constants/routes';\r\nimport {\r\n redirectToUrl,\r\n} from '../../../services/utils';\r\nimport './cardVerification.scss';\r\n\r\nconst CardVerification1 = (props) => {\r\n const { fields, toFirstStep, toPreviosuStep, state, setPaymentsToVerify } = props;\r\n const { hasSuccess, verificationError } = state;\r\n const goToTransactionHistory = () => {\r\n if (hasSuccess) {\r\n setPaymentsToVerify([]);\r\n }\r\n toFirstStep();\r\n };\r\n let isRetryBtnVisible;\r\n let errorMsgText = '';\r\n\r\n if (verificationError) {\r\n switch (verificationError) {\r\n case 'Contactless_ConnectionError':\r\n errorMsgText = fields.verifyCardErrorCVRCTAStep0301?.value;\r\n isRetryBtnVisible = false;\r\n break;\r\n case 'Contactless_FailedPayment':\r\n errorMsgText = fields.verifyCardErrorCVRCTAStep0302?.value;\r\n isRetryBtnVisible = true;\r\n break;\r\n case 'Contactless_SystemError':\r\n errorMsgText = fields.verifyCardErrorCVRCTAStep0303?.value;\r\n isRetryBtnVisible = true;\r\n break;\r\n case 'Contactless_TokenTimeout':\r\n toPreviosuStep();\r\n break;\r\n // Reserved for future release\r\n // case 'BeginCyclePaymentFailure':\r\n // errorMsgText = fields.verifyCardErrorCVRCTAStep0304?.value;\r\n // isRetryBtnVisible = false;\r\n // break;\r\n default:\r\n //errorMsgText = `Error: ${verificationError}`;\r\n //isRetryBtnVisible = false;\r\n errorMsgText = fields.verifyCardErrorCVRCTAStep0303?.value;\r\n isRetryBtnVisible = false;\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {hasSuccess ? (\r\n \r\n \r\n \r\n {isRetryBtnVisible ? (\r\n \r\n ) : null}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CardVerification1;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport { showScreenHeader } from '../../../redux/user/actions';\r\nimport { Header, StepTracker } from '../../../molecules';\r\nimport CardVerification0 from './CardVerification0';\r\nimport CardVerification1 from './CardVerification1';\r\n\r\nconst CardVerification = (props) => {\r\n const { fields, t } = props;\r\n const dispatch = useDispatch();\r\n const stepsMap = [CardVerification0, CardVerification1];\r\n const [step, setStep] = useState(0);\r\n const focusDiv = useRef();\r\n const toNextStep = () => {\r\n setStep(step + 1);\r\n focusDiv.current.focus();\r\n };\r\n const toFirstStep = () => props.toggleVerificationFlow(false);\r\n const toPreviousStep = () => {\r\n setStep(step - 1);\r\n focusDiv.current.focus();\r\n };\r\n const Stepper = stepsMap[step];\r\n const [state, setState] = useState({\r\n hasSuccess: false,\r\n verificationError: '',\r\n });\r\n\r\n useEffect(() => {\r\n dispatch(showScreenHeader(false));\r\n\r\n return () => {\r\n dispatch(showScreenHeader(true));\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n ) : null}\r\n\r\n {fields.verifyCardErrorTitle?.value}
\r\n {errorMsgText}
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(CardVerification);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport api from '../../../services/api';\r\nimport { Error } from '../../../molecules';\r\nimport mediaTypes from '../../../constants/mediaTypes';\r\nimport { ButtonBlock, Button, PrestoLink } from '../../../atoms';\r\nimport {\r\n getLanguageAtsId,\r\n redirectToUrl,\r\n formatDecimalWithCurrency,\r\n convertToDollars,\r\n} from '../../../services/utils';\r\n\r\nconst UnpaidFaresAlert = ({\r\n fields,\r\n isInteracCard,\r\n startTime,\r\n endTime,\r\n reloadUnpaidFare = false,\r\n}) => {\r\n const cardInfo = useSelector((state) => state.user.selectedCard);\r\n const [totalUnpaidFares, setTotalUnpaidFares] = useState(0);\r\n\r\n function CalculateTotalUnpaidFares(transactions) {\r\n let sumOfUnpaidFares = 0;\r\n\r\n if (transactions?.length) {\r\n for (let i = 0; i < transactions.length; i += 1) {\r\n for (let j = 0; j < transactions[i].payments.length; j += 1) {\r\n sumOfUnpaidFares += Number.parseInt(\r\n transactions[i].payments[j].lines.reduce((acc, val) => acc + val.amount, 0),\r\n 10\r\n );\r\n }\r\n }\r\n }\r\n\r\n return sumOfUnpaidFares;\r\n }\r\n useEffect(() => {\r\n if (reloadUnpaidFare) {\r\n callUnpaidFaresApi();\r\n }\r\n }, [reloadUnpaidFare]);\r\n useEffect(() => {\r\n if (cardInfo.mediaType !== mediaTypes.CRDNC) callUnpaidFaresApi();\r\n }, []);\r\n\r\n const callUnpaidFaresApi = () => {\r\n api\r\n .getContactlessUnpaidFares({\r\n MediaReferenceId: cardInfo?.mediaId,\r\n CardType: cardInfo?.type,\r\n Language: getLanguageAtsId(),\r\n StartTime: startTime,\r\n EndTime: endTime,\r\n })\r\n .then((response) => {\r\n if (response.data?.transactions?.length) {\r\n setTotalUnpaidFares(CalculateTotalUnpaidFares(response.data?.transactions));\r\n }\r\n });\r\n };\r\n return (\r\n <>\r\n {totalUnpaidFares && totalUnpaidFares > 0 ? (\r\n \r\n {/* \r\n \r\n \r\n {\r\n redirectToUrl(fields?.unpaidFareViewDetailsButtonLink?.value.href, false);\r\n }}\r\n >\r\n \r\n \r\n ) : null}\r\n */}\r\n
\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(UnpaidFaresAlert);\r\n","import React from 'react';\r\n\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nimport { Error } from '../../../molecules';\r\nimport { PrestoLink } from '../../../atoms';\r\n\r\nconst VerifyCardInteracAlert = ({ fields }) => {\r\n return (\r\n <>\r\n \r\n {formatDecimalWithCurrency(convertToDollars(totalUnpaidFares))}\r\n
\r\n \r\n
\r\n {!isInteracCard ? (\r\n \r\n
\r\n \r\n
\r\n \r\n {fields?.unpaidFareTitle?.value}\r\n
\r\n \r\n {formatDecimalWithCurrency(convertToDollars(totalUnpaidFares))}\r\n
\r\n \r\n
\r\n \r\n {!isInteracCard ? (\r\n \r\n \r\n {\r\n redirectToUrl(fields?.unpaidFareViewDetailsButtonLink?.value.href, false);\r\n }}\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(VerifyCardInteracAlert);\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport moment from 'moment';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport TransactionGridItem from './TransactionGridItem';\r\nimport TransactionFilters from './TransactionFilters';\r\nimport CardVerification from './CardVerification';\r\nimport UnpaidFaresAlert from './UnpaidFaresAlert';\r\nimport VerifyCardInteracAlert from './VerifyCardInteracAlert';\r\nimport filterIcon from '../../assets/images/Filter.svg';\r\nimport expandIcon from '../../assets/images/down.svg';\r\nimport calendarIcon from '../../assets/images/Calendar.svg';\r\nimport creditCardIcon from '../../assets/images/credit_card.svg';\r\nimport searchIcon from '../../assets/images/search_empty.svg';\r\nimport api from '../../services/api';\r\nimport {\r\n shallowObjEqual,\r\n getLanguageAtsId,\r\n isOneOf,\r\n redirectToUrl,\r\n isFrench,\r\n subtractDays,\r\n getQueryParams,\r\n localstorageService,\r\n downloadCsvFile,\r\n} from '../../services/utils';\r\nimport routes from '../../constants/routes';\r\nimport mediaSubTypes from '../../constants/mediaSubTypes';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport {\r\n IconButton,\r\n ButtonBlock,\r\n Button,\r\n IconWithText,\r\n ExportButton,\r\n PrintButton,\r\n PrestoLink,\r\n} from '../../atoms';\r\nimport { Error } from '../../molecules';\r\n\r\nimport './contactlessTransactionHistory.scss';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\nimport { selectCard } from '../../redux/user/actions';\r\n\r\nconst PERIOD_IDS = {\r\n lastTwoYears: '1',\r\n currentMont: '2',\r\n lastMonth: '3',\r\n monthBeforeLastMonth: '4',\r\n specificDateRange: '5',\r\n};\r\nconst ITEMS_PER_PAGE = 10;\r\n\r\nconst TransactionHistoryContactless = ({ fields, t }) => {\r\n const [defaultFiltersState, setDefaultFiltersState] = useState({\r\n FromDate: subtractDays(31),\r\n ToDate: new Date(),\r\n PeriodId: PERIOD_IDS.currentMont,\r\n });\r\n const [hasConnectionError, setHasConnectionError] = useState(false);\r\n const [hasFiltersApplied, setHasFiltersApplied] = useState(false);\r\n const [isLoadingData, setIsLoadingData] = useState(true);\r\n const [isFilters, setIsFilters] = useState(false);\r\n const [isExpand, setIsExpand] = useState(false);\r\n const [items, setItems] = useState({ payments: [] });\r\n const [isVerifyCardFlowVisible, setIsVerifyCardFlowVisible] = useState(false);\r\n const [isInteracVerifyCardFlowVisible, setIsInteracVerifyCardFlowVisible] = useState(false);\r\n const [paymentsToVerify, setPaymentsToVerify] = useState([]);\r\n const [sorting, setSorting] = useState('DESC');\r\n const [filters, setFilters] = useState(defaultFiltersState);\r\n const [finalFilters, setFinalFilters] = useState();\r\n const [updatingHistory, setUpdatingHistory] = useState(false);\r\n const [showingMoreItems, setShowingMoreItems] = useState(false);\r\n const selectedCard = useSelector((state) => state.user.selectedCard);\r\n const [textMapping, setTextMapping] = useState({ textMapping: [] });\r\n const [isCardBlocked, setIsCardBlocked] = useState(false);\r\n const [hasMoreItems, setHasMoreItems] = useState(false);\r\n const isInteracCard = selectedCard.type === mediaSubTypes.OPENP_INTR;\r\n const [csvHeader, setCsvHeader] = useState('');\r\n const configKeys = useSelector((state) => state.settings.configKeys);\r\n const langCode = isFrench();\r\n const [error, setError] = useState('');\r\n const queryParams = getQueryParams(useLocation().search);\r\n const dispatch = useDispatch();\r\n function clearFilters() {\r\n setFilters(defaultFiltersState);\r\n }\r\n useEffect(() => {\r\n if (langCode) {\r\n const frenchheader = configKeys\r\n .filter((item) => item.key === 'ContactlessTxHistoryFrenchHeaders')\r\n .map((config) => config.setting);\r\n setCsvHeader(frenchheader);\r\n } else {\r\n const englishheader = configKeys\r\n .filter((item) => item.key === 'ContactlessTxHistoryEnglishHeaders')\r\n .map((config) => config.setting);\r\n setCsvHeader(englishheader);\r\n }\r\n }, []);\r\n function getCopyOfFilters() {\r\n const copyFilters = { ...filters };\r\n\r\n if (copyFilters.PeriodId && copyFilters.PeriodId !== PERIOD_IDS.specificDateRange) {\r\n if (copyFilters.PeriodId === PERIOD_IDS.lastTwoYears) {\r\n copyFilters.FromDate = moment()\r\n .utc()\r\n .clone()\r\n .subtract(t('travelHistoryDays'), t('travelHistoryType'));\r\n copyFilters.ToDate = moment().utc();\r\n } else if (copyFilters.PeriodId === PERIOD_IDS.currentMont) {\r\n copyFilters.FromDate = moment().utc().clone().startOf('month');\r\n copyFilters.ToDate = moment().utc();\r\n } else if (copyFilters.PeriodId === PERIOD_IDS.lastMonth) {\r\n copyFilters.FromDate = moment().utc().clone().subtract(1, 'month').startOf('month');\r\n copyFilters.ToDate = moment().utc().clone().subtract(1, 'month').endOf('month');\r\n } else if (copyFilters.PeriodId === PERIOD_IDS.monthBeforeLastMonth) {\r\n copyFilters.FromDate = moment().utc().clone().subtract(2, 'month').startOf('month');\r\n copyFilters.ToDate = moment().utc().clone().subtract(2, 'month').endOf('month');\r\n }\r\n }\r\n\r\n return copyFilters;\r\n }\r\n\r\n function getDate(type) {\r\n let copyFilters;\r\n\r\n if (!finalFilters) {\r\n copyFilters = getCopyOfFilters();\r\n setFinalFilters(copyFilters);\r\n } else {\r\n copyFilters = finalFilters;\r\n }\r\n if (type === 'START') {\r\n return showingMoreItems\r\n ? copyFilters.FromDate\r\n : moment(copyFilters.FromDate).startOf('day').toDate().toISOString();\r\n }\r\n return showingMoreItems\r\n ? copyFilters.ToDate\r\n : moment(copyFilters.ToDate).endOf('day').toDate().toISOString();\r\n }\r\n function fetchPaymentsToVerify() {\r\n api\r\n .getPaymentsToVerify({\r\n MediaReferenceId: selectedCard.mediaId,\r\n CardType: selectedCard.type,\r\n Language: getLanguageAtsId(),\r\n //StartTime: getDate('START'),\r\n //EndTime: getDate('END'),\r\n })\r\n .then((res) => {\r\n if (res.data.PaymentsToVerify?.length) {\r\n setPaymentsToVerify(res.data.PaymentsToVerify);\r\n localstorageService().setItem(\r\n localStorageKeys.paymentsToVerifyData,\r\n JSON.stringify(res.data.PaymentsToVerify)\r\n );\r\n if (isInteracCard) {\r\n setIsInteracVerifyCardFlowVisible(true);\r\n }\r\n }\r\n })\r\n .catch(() => {\r\n setHasConnectionError(true);\r\n });\r\n }\r\n\r\n function getTransactionCasesInterac(data) {\r\n if (\r\n isOneOf(\r\n ['DEBT_BELOW_THRESHOLD', 'DEBT_ABOVE_THRESHOLD', 'DEBT_WRITTEN_OFF', 'DEBT_INCURRED'],\r\n data.debtStatus\r\n ) &&\r\n data.accountType !== 'CUSTOMER_INITIATED_DEBT_RECOVERY'\r\n ) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n function calculateTotalUnpaidFaresForInterac(transactions) {\r\n let sumOfUnpaidFares = 0;\r\n if (transactions && transactions.length > 0) {\r\n for (let i = 0; i < transactions.length; i += 1) {\r\n for (let j = 0; j < transactions[i].payments.length; j += 1) {\r\n sumOfUnpaidFares += Number.parseInt(\r\n transactions[i].payments[j].lines.reduce((acc, val) => acc + val.amount, 0),\r\n 10\r\n );\r\n }\r\n }\r\n }\r\n return sumOfUnpaidFares;\r\n }\r\n\r\n function verifyCardInterac(transactions) {\r\n if (transactions && transactions.length > 0) {\r\n let unpaidTransactions = [];\r\n for (let i = 0; i < transactions.length; i += 1) {\r\n for (let j = 0; j < transactions[i].payments.length; j += 1) {\r\n if (getTransactionCasesInterac(transactions[i].payments[j])) {\r\n unpaidTransactions.push(transactions[i]);\r\n }\r\n }\r\n }\r\n if (unpaidTransactions && unpaidTransactions.length > 0) {\r\n let sumOfUnpaidFares = calculateTotalUnpaidFaresForInterac(unpaidTransactions);\r\n setIsInteracVerifyCardFlowVisible(sumOfUnpaidFares === 0);\r\n }\r\n }\r\n }\r\n\r\n function updateHistory() {\r\n let copyFilters;\r\n\r\n if (!finalFilters) {\r\n copyFilters = getCopyOfFilters();\r\n setFinalFilters(copyFilters);\r\n } else {\r\n copyFilters = finalFilters;\r\n }\r\n\r\n setIsLoadingData(true);\r\n\r\n const checkIsCardBlocked = (data) => {\r\n const mediaInfo = data.media.mediaInfo;\r\n\r\n return (\r\n isOneOf(\r\n ['FAILED_TOO_MANY_INSPECTIONS', 'CHARGEBACK_FRAUD', 'BACK_OFFICE_OVERRIDE', 'SUSPECTED_COUNTERFEIT'],\r\n mediaInfo.statusReason\r\n ) && mediaInfo.mediaStatus === 'HOTLISTED'\r\n );\r\n };\r\n\r\n api\r\n .getContactlessTransactionHistory({\r\n MediaReferenceId: selectedCard.mediaId,\r\n CardType: selectedCard.type,\r\n Records: ITEMS_PER_PAGE,\r\n SortDescending: sorting === 'DESC',\r\n Language: getLanguageAtsId(),\r\n }).then((res) => {\r\n setIsLoadingData(false);\r\n const transactionItems = res.data.transactions[0];\r\n const transactionItemsnew = res.data.textMapping;\r\n if (isInteracCard && transactionItems) {\r\n verifyCardInterac(res.data.transactions);\r\n }\r\n\r\n if (transactionItems) {\r\n if (checkIsCardBlocked(transactionItems)) {\r\n setIsCardBlocked(true);\r\n selectedCard.status = 'blocked';\r\n dispatch(selectCard(selectedCard));\r\n }\r\n }\r\n })\r\n .catch(() => {\r\n setHasConnectionError(true);\r\n setIsLoadingData(false);\r\n });\r\n\r\n api\r\n .getContactlessTransactionHistory({\r\n MediaReferenceId: selectedCard.mediaId,\r\n CardType: selectedCard.type,\r\n StartTime: showingMoreItems\r\n ? copyFilters.FromDate\r\n : moment(copyFilters.FromDate).startOf('day').toDate().toISOString(),\r\n EndTime: showingMoreItems\r\n ? copyFilters.ToDate\r\n : moment(copyFilters.ToDate).endOf('day').toDate().toISOString(),\r\n Records: ITEMS_PER_PAGE,\r\n SortDescending: sorting === 'DESC',\r\n Language: getLanguageAtsId(),\r\n })\r\n .then((res) => {\r\n setIsLoadingData(false);\r\n\r\n setHasMoreItems(res.data.HasMoreItems);\r\n\r\n if (res.data && !res.data.transactions) {\r\n setHasConnectionError(true);\r\n return;\r\n }\r\n\r\n const transactionItems = res.data.transactions[0];\r\n const transactionItemsnew = res.data.textMapping;\r\n if (isInteracCard && transactionItems) {\r\n verifyCardInterac(res.data.transactions);\r\n }\r\n\r\n if (transactionItems) {\r\n /*if (checkIsCardBlocked(transactionItems)) {\r\n setIsCardBlocked(true);\r\n selectedCard.status = 'blocked';\r\n dispatch(selectCard(selectedCard));\r\n }*/\r\n\r\n // setTextMapping(res.data.textMapping);\r\n if (showingMoreItems) {\r\n const mergedListOfItems = { ...items };\r\n const mergedtextmapping = { ...textMapping };\r\n const newItemsmapping = { ...transactionItemsnew };\r\n const newItems = [...transactionItems.payments];\r\n const newServicemapping = { ...transactionItemsnew.serviceProvider };\r\n\r\n if (newItems.length > 10) {\r\n if (sorting === 'DESC') {\r\n newItems.pop();\r\n newItemsmapping.pop();\r\n } else {\r\n newItems.shift();\r\n newItemsmapping.shift();\r\n }\r\n }\r\n const _ = require('lodash');\r\n\r\n mergedtextmapping.locations = _.merge(\r\n mergedtextmapping.locations,\r\n newItemsmapping.locations\r\n );\r\n\r\n mergedListOfItems.payments = [...mergedListOfItems.payments, ...newItems];\r\n\r\n mergedtextmapping.serviceProvider = {\r\n ...mergedtextmapping.serviceProvider,\r\n ...newServicemapping,\r\n };\r\n\r\n setItems(mergedListOfItems);\r\n setTextMapping(mergedtextmapping);\r\n } else {\r\n setItems(transactionItems);\r\n setTextMapping(transactionItemsnew);\r\n }\r\n } else {\r\n setItems({ payments: [] });\r\n setTextMapping({ textMapping: [] });\r\n }\r\n })\r\n .catch(() => {\r\n setHasConnectionError(true);\r\n setIsLoadingData(false);\r\n });\r\n }\r\n const exportCsv = (customerData, fileName) => {\r\n if (customerData && customerData.length) {\r\n let csvContent = 'data:text/csv;charset=utf-8,';\r\n let headers = customerData[0];\r\n csvContent += `${headers}\\r\\n`;\r\n let rowData = customerData.slice(1, customerData.length - 1);\r\n csvContent += rowData.join('\\n');\r\n let encodedUri = encodeURI(csvContent);\r\n let link = document.createElement('a');\r\n link.setAttribute('href', encodedUri);\r\n link.setAttribute('id', 'csv_download_link');\r\n link.setAttribute('download', fileName);\r\n document.body.appendChild(link);\r\n link.click();\r\n\r\n let elem = document.getElementById('csv_download_link');\r\n elem.parentNode.removeChild(elem);\r\n }\r\n };\r\n const onExport = () => {\r\n let copyFilters;\r\n\r\n if (!finalFilters) {\r\n copyFilters = getCopyOfFilters();\r\n setFinalFilters(copyFilters);\r\n } else {\r\n copyFilters = finalFilters;\r\n }\r\n let payload = {\r\n cardType: selectedCard?.type,\r\n StartTime: showingMoreItems\r\n ? copyFilters.FromDate\r\n : moment(copyFilters.FromDate).startOf('day').toDate().toISOString(),\r\n EndTime: showingMoreItems\r\n ? copyFilters.ToDate\r\n : moment(copyFilters.ToDate).endOf('day').toDate().toISOString(),\r\n Records: ITEMS_PER_PAGE,\r\n SortDescending: sorting === 'DESC',\r\n Language: getLanguageAtsId(),\r\n MediaReferenceId: selectedCard?.mediaId,\r\n };\r\n api\r\n .getExportContactlessTransactionHistory(payload)\r\n .then((response) => {\r\n // exportCsv(response?.data?.split('\\r\\n'), `tx_history_${selectedCard?.mediaId}.csv`);\r\n downloadCsvFile(csvHeader, response?.data, `tx_history_${selectedCard?.mediaId}.csv`);\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n });\r\n };\r\n function loadMoreItems() {\r\n const copyFilters = getCopyOfFilters();\r\n\r\n const lastItem = items.payments[items.payments.length - 1];\r\n\r\n if (sorting === 'DESC') {\r\n copyFilters.ToDate = lastItem.createdTime;\r\n } else {\r\n copyFilters.FromDate = lastItem.createdTime;\r\n }\r\n\r\n setShowingMoreItems(true);\r\n setFinalFilters(copyFilters);\r\n setUpdatingHistory(true);\r\n }\r\n\r\n useEffect(() => {\r\n setFinalFilters(undefined);\r\n setUpdatingHistory(true);\r\n setShowingMoreItems(false);\r\n }, [sorting]);\r\n\r\n useDidMountEffect(() => {\r\n setFinalFilters(undefined);\r\n setHasFiltersApplied(!shallowObjEqual(defaultFiltersState, filters));\r\n setUpdatingHistory(true);\r\n setShowingMoreItems(false);\r\n }, [filters]);\r\n\r\n useEffect(() => {\r\n if (!updatingHistory) {\r\n return;\r\n }\r\n setUpdatingHistory(false);\r\n if (selectedCard.mediaType !== mediaTypes.CRDNC) updateHistory();\r\n }, [updatingHistory, showingMoreItems]);\r\n\r\n useEffect(() => {\r\n if (\r\n !isVerifyCardFlowVisible &&\r\n paymentsToVerify.length === 0 &&\r\n selectedCard.mediaType !== mediaTypes.CRDNC\r\n ) {\r\n fetchPaymentsToVerify();\r\n }\r\n }, [isVerifyCardFlowVisible]);\r\n\r\n useEffect(() => {\r\n //console.log('inside useeffect, Card Verf:' + queryParams.cardVerification + \" isVerifyCardFlow: \" + isVerifyCardFlowVisible + \" isInteracCard: \" + isInteracCard);\r\n if (queryParams.cardVerification === undefined && isVerifyCardFlowVisible && !isInteracCard) {\r\n setIsVerifyCardFlowVisible(false);\r\n const returnpath = `${routes.transactionHistory}?cardVerification=cardVerification`;\r\n redirectToUrl(\r\n `${routes.b2cRegisteredSignIn}?cardVerification=cardVerification&returnUrl=${returnpath}`\r\n );\r\n } else if (\r\n queryParams.cardVerification !== undefined &&\r\n queryParams.cardVerification === 'cardVerification'\r\n ) {\r\n api\r\n .getSTSCloudClaims()\r\n .then((res) => {\r\n //console.log(res);\r\n if (res) {\r\n localstorageService().setItem(\r\n localStorageKeys.stsAccessToken,\r\n res.data.Data.Access_token\r\n );\r\n // localstorageService().setItem(localStorageKeys.refreshToken, res.data.Data.Access_token);\r\n // localstorageService().setItem(\r\n // localStorageKeys.accessTokenLifetime,\r\n // res.data.Data.Expires_in\r\n // );\r\n setIsVerifyCardFlowVisible(true);\r\n }\r\n })\r\n .catch((res) => {\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n }, [isVerifyCardFlowVisible]);\r\n\r\n if (isVerifyCardFlowVisible && !isInteracCard) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {fields?.verifyCardInteracTitle?.value}
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {fields.blockedCardErrorText.value} \r\n
\r\n \r\n {!isInteracCard && paymentsToVerify?.length ? (\r\n \r\n \r\n {\r\n setIsVerifyCardFlowVisible(true);\r\n //const returnpath = (`${routes.transactionHistory}?cardVerification=cardVerification`);\r\n //redirectToUrl(`${routes.b2cRegisteredSignIn}?returnUrl=${returnpath}`);\r\n }}\r\n >\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {fields.verifyCardAlertTitle?.value}\r\n
\r\n \r\n
\r\n \r\n setSorting(sorting === 'ASC' ? 'DESC' : 'ASC')}\r\n className=\"contactlessTransactionHistory-buttons-sorting desktopOnly\"\r\n icon={calendarIcon}\r\n >\r\n {sorting === 'ASC' ? (\r\n setIsFilters(!isFilters)}\r\n className=\"contactlessTransactionHistory-buttons-filters\"\r\n icon={filterIcon}\r\n ariaExpanded={isFilters}\r\n >\r\n setIsExpand(!isExpand)}\r\n className=\"contactlessTransactionHistory-buttons-expand\"\r\n icon={expandIcon}\r\n ariaLabel={isExpand ? fields.collapseLabelA11y.value : fields.expandLabelA11y.value}\r\n ariaExpanded={isExpand}\r\n >\r\n {isExpand ?
\r\n {isFilters ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {items.payments.map((i) => (\r\n
\r\n {items.payments.length ? (\r\n \r\n 
\r\n
\r\n ) : null}\r\n {hasConnectionError ? (\r\n \r\n
\r\n
\r\n ) : null}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(TransactionHistoryContactless);\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport {\r\n formatUtcDate,\r\n formatUtcTimeFromDate,\r\n formatDecimalWithCurrency,\r\n getCardTransactionTypes,\r\n blockTransactionHistoryEntry,\r\n} from '../../../services/utils';\r\nimport downIcon from '../../../assets/images/down.svg';\r\nimport upIcon from '../../../assets/images/up.svg';\r\nimport { Modal } from '../../../molecules';\r\nimport './transactionGridItem.scss';\r\n\r\nconst TransactionGridItem = ({ data, expand, fields }) => {\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [modelData, setModelData] = useState({ title: '', text: '' });\r\n const logos = useSelector((state) => state.products?.logos);\r\n const logo = logos && logos[data.ServiceProviderID]?.Logo;\r\n const prestoLogo = logos && logos['Presto']?.Logo;\r\n const {\r\n nullType,\r\n tapOn,\r\n tapOff,\r\n defaultTrip,\r\n farePayment,\r\n fareAdjTapOffNotDetected,\r\n tapOffNotDetected,\r\n loadAmount,\r\n autoLoadAmount,\r\n transitPassTap,\r\n freeTransfer,\r\n inPerson,\r\n webOrAppLoad,\r\n transitPassAutoRenew,\r\n defaultType,\r\n cardSettingChange,\r\n cardActivation,\r\n paymentByCredit,\r\n paymentbyCash,\r\n } = useMemo(() => getCardTransactionTypes(data, fields), [data, fields]);\r\n useEffect(() => {\r\n setIsOpen(expand);\r\n }, [expand]);\r\n const transactionTypeTextMap = {\r\n 0: fields.transactionTypeNull.value,\r\n 1: fields.transactionTypeLoads.value,\r\n 2: fields.transactionTypeTransitPassLoads.value,\r\n 3: fields.transactionTypeCardIssuanceFee.value,\r\n 4: fields.transactionTypePaymentByCash.value,\r\n 5: fields.transactionTypeFarecardReplacement.value,\r\n 6: fields.transactionTypeFarecardPhotoAdd.value,\r\n 7: fields.transactionTypeRefund.value,\r\n 8: fields.transactionTypeTransitPassRefund.value,\r\n 9: fields.transactionTypeReimburseOnFailure.value,\r\n 10: fields.transactionTypeBlockEvent.value,\r\n 11: fields.transactionTypeCardSettingChange.value,\r\n 12: fields.transactionTypeCardActivation.value,\r\n 13: fields.transactionTypePurchase.value,\r\n 14: fields.transactionTypeFarePayment.value,\r\n 15: fields.transactionTypeTransitPassPayment.value,\r\n 16: fields.transactionTypeTransfer.value,\r\n 17: fields.transactionTypeFareInspection.value,\r\n 18: fields.transactionTypeDeviceEvent.value,\r\n 19: fields.transactionTypeOperationsConfigurationEvent.value,\r\n 20: fields.transactionTypeOperationsCardBlockEvent.value,\r\n 21: fields.transactionTypeDeviceReport.value,\r\n 22: fields.transactionTypePaymentCardBalance.value,\r\n 23: fields.transactionTypePaymentByCredit.value,\r\n 24: fields.transactionTypeDriverShiftReport.value,\r\n 25: fields.transactionTypeOpenPaymentTap.value,\r\n 26: fields.transactionTypeOpenPaymentFarePaymentTravel.value,\r\n 27: fields.transactionTypeOpenPaymentPeriodPassTravel.value,\r\n 28: fields.transactionTypeOpenPaymentFreeTransferTravel.value,\r\n 29: fields.transactionTypeLUMUsage.value,\r\n 99: fields.transactionTypeShift.value,\r\n 100: fields.transactionTypePaperTicketFarePayment.value,\r\n };\r\n\r\n const getTransactionTypeText = (transactionTypeId) => {\r\n return transactionTypeTextMap[transactionTypeId];\r\n };\r\n\r\n const transactionType = () => {\r\n let final;\r\n if (nullType) {\r\n final = fields.transactionTypeNull.value;\r\n } else if (tapOn) {\r\n final = fields.TapOnLabel.value;\r\n } else if (tapOff) {\r\n final = fields.TapOffLabel.value;\r\n } else if (defaultTrip) {\r\n final = fields.DefaultTrip.value;\r\n } else if (fareAdjTapOffNotDetected) {\r\n final = (\r\n \r\n
\r\n \r\n
\r\n
\r\n {data?.DiscountSum > 0\r\n ? `${fields.entryDiscountBalanceLabel.value}: ${formatDecimalWithCurrency(\r\n data.DiscountSum\r\n )}`\r\n : null}\r\n
,\r\n \r\n {data?.ServiceClass ? `${fields.entryServiceClasslabel.value}: ${data.ServiceClass}` : null}\r\n
,\r\n ];\r\n };\r\n const getLogo = () => {\r\n return logo && logo.Src ? (\r\n \r\n setIsOpen(!isOpen)}\r\n onKeyPress={() => setIsOpen(!isOpen)}\r\n tabIndex=\"0\"\r\n aria-expanded={isOpen}\r\n >\r\n \r\n {isOpen ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n {isOpen ? (\r\n {getLogo()}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {formatUtcDate(data.Date)}
\r\n \r\n {formatUtcTimeFromDate(data.Date)}\r\n
\r\n {showTransitAgencyName()}
\r\n \r\n
\r\n \r\n
\r\n \r\n {transactionType()} {getCurrency()}\r\n
\r\n {getBalance()}
\r\n \r\n
\r\n ) : null}\r\n \r\n )}\r\n \r\n {`${fields.entryLocationLabel.value}: ${data.Location}`}\r\n
\r\n {`${fields.entryTransactionNumberLabel.value}: ${data.SequenceNumber}`}\r\n
\r\n \r\n {`${fields.entryTransactionNumberLabel.value}: ${data.SequenceNumber}`}\r\n
{getTransactionMoreRight()}
\r\n \r\n {\r\n setFilters({\r\n ...values,\r\n TransactionCategoryId: values.TransactionCategoryId.join(','),\r\n PeriodId: datepickerValue,\r\n });\r\n setIsFilters(false);\r\n }}\r\n >\r\n {({ errors, handleSubmit, values, setFieldValue, setFieldError, resetForm }) => {\r\n if (\r\n values.TransactionCategoryId.length &&\r\n values.TransactionCategoryId.length < 4 &&\r\n isAll\r\n ) {\r\n setIsAll(false);\r\n }\r\n if (\r\n values.TransactionCategoryId.length &&\r\n values.TransactionCategoryId.length === 4 &&\r\n !isAll\r\n ) {\r\n setIsAll(true);\r\n }\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TransactionFilters;\r\n","import { subtractDays } from '../services/utils';\r\n\r\nexport default {\r\n defaultPrestoTxFiltersState: {\r\n PeriodId: '2',\r\n FromDate: subtractDays(31),\r\n ToDate: new Date(),\r\n ServiceProviderId: '-1',\r\n TransactionCategoryId: '1,2,3,4',\r\n },\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Placeholder, Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport api from '../../services/api';\r\nimport {\r\n getLanguageLcid,\r\n shallowObjEqual,\r\n isFrench,\r\n formatDate,\r\n blockTransactionHistoryEntry,\r\n} from '../../services/utils';\r\nimport useDidMountEffect from '../../hooks/useDidMountEffect';\r\nimport TransactionGridItem from './TransactionGridItem';\r\nimport TransactionFilters from './TransactionFilters';\r\nimport filterIcon from '../../assets/images/Filter.svg';\r\nimport expandIcon from '../../assets/images/down.svg';\r\nimport calendarIcon from '../../assets/images/Calendar.svg';\r\nimport searchIcon from '../../assets/images/search_empty.svg';\r\nimport { ExportButton, ButtonBlock, PrintButton, IconButton } from '../../atoms';\r\nimport { ConnectionError, Note, Pagination } from '../../molecules';\r\nimport transactionHistoryConsts from '../../constants/transactionHistory';\r\nimport mediaTypes from '../../constants/mediaTypes';\r\nimport './transactionHistory.scss';\r\nimport TA from '../../constants/transitAgency.constants';\r\n\r\nconst TransactionHistoryPresto = ({ t, fields, rendering }) => {\r\n const defaultFiltersState = transactionHistoryConsts.defaultPrestoTxFiltersState;\r\n const [hasConnectionError, setHasConnectionError] = useState(false);\r\n const [hasFiltersApplied, setHasFiltersApplied] = useState(false);\r\n const [isLoadingData, setIsLoadingData] = useState(true);\r\n const [isFilters, setIsFilters] = useState(false);\r\n const [isExpand, setIsExpand] = useState(false);\r\n const [items, setItems] = useState({ items: [], total: 0 });\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [sorting, setSorting] = useState('DESC');\r\n const [filters, setFilters] = useState(defaultFiltersState);\r\n const selectedCard = useSelector((state) => state.user.selectedCard);\r\n const configKeys = useSelector((state) => state.settings.configKeys);\r\n const [txData, setTxData] = useState([]);\r\n const [csvHeader, setCsvHeader] = useState('');\r\n const langCode = isFrench();\r\n const isGoogleWallet = selectedCard.mediaType === mediaTypes.CRDNC;\r\n function updateHistory(data) {\r\n setIsLoadingData(true);\r\n api\r\n .getTransactionHistory({\r\n MediaId: selectedCard.mediaId,\r\n LanguageCode: getLanguageLcid(),\r\n PageNumber: pageNumber,\r\n SortingOrder: sorting,\r\n PageCount: 10,\r\n ...filters,\r\n FromDate: filters.PeriodId.toString() === '6' ? filters.FromDate : '',\r\n ToDate: filters.PeriodId.toString() === '6' ? filters.ToDate : '',\r\n PeriodId: filters.PeriodId.toString() === '6' ? 5 : filters.PeriodId,\r\n TransactionCategoryId:\r\n filters.TransactionCategoryId.length === 7 ? '0' : filters.TransactionCategoryId,\r\n ...data,\r\n })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n const itemsObject = { items: res.data.TravelList };\r\n if (res.data.PageCount) {\r\n itemsObject.total = res.data.PageCount;\r\n }\r\n setTxData(res.data.TravelList);\r\n setItems({ ...items, ...itemsObject });\r\n setHasConnectionError(false);\r\n } else {\r\n setItems({ items: [], total: 0 });\r\n setHasConnectionError(true);\r\n }\r\n setIsLoadingData(false);\r\n })\r\n .catch(() => {\r\n setHasConnectionError(true);\r\n setIsLoadingData(false);\r\n });\r\n }\r\n const onExport = (customerData) => {\r\n let csvContent = 'data:text/csv;charset=utf-8,';\r\n let headers = csvHeader.toString();\r\n csvContent += `${headers}\\r\\n`;\r\n let exportableData = customerData.filter((el) => !blockTransactionHistoryEntry(el));\r\n let rowData = exportableData.reduce((previous, next) => {\r\n let options = [];\r\n\r\n options.push(\r\n ...[\r\n formatDate(next.Date, 'MM/DD/YYYY h:mm:ss a'),\r\n next.SequenceNumber,\r\n next.ServiceProviderName,\r\n next.Location,\r\n next.Type,\r\n next.ServiceClass,\r\n next.DiscountSum,\r\n next.Amount,\r\n next.Balance,\r\n ]\r\n );\r\n previous.push(options);\r\n\r\n return previous;\r\n }, []);\r\n csvContent += rowData.map((e) => e.join(',')).join('\\n');\r\n\r\n let encodedUri = encodeURI(csvContent);\r\n let link = document.createElement('a');\r\n link.setAttribute('href', encodedUri);\r\n link.setAttribute('id', 'csv_download_link');\r\n link.setAttribute('download', 'TX history.csv');\r\n document.body.appendChild(link);\r\n link.click();\r\n\r\n let elem = document.getElementById('csv_download_link');\r\n elem.parentNode.removeChild(elem);\r\n };\r\n const getAllDataToExport = () => {\r\n api\r\n .getTransactionHistory({\r\n MediaId: selectedCard.mediaId,\r\n LanguageCode: getLanguageLcid(),\r\n PageNumber: 1,\r\n SortingOrder: sorting,\r\n PageCount: 10 * Number(items?.total),\r\n ...filters,\r\n FromDate: filters.PeriodId.toString() === '6' ? filters.FromDate : '',\r\n ToDate: filters.PeriodId.toString() === '6' ? filters.ToDate : '',\r\n PeriodId: filters.PeriodId.toString() === '6' ? 5 : filters.PeriodId,\r\n TransactionCategoryId:\r\n filters.TransactionCategoryId.length === 7 ? '0' : filters.TransactionCategoryId,\r\n })\r\n .then((res) => {\r\n if (res.data.Success) {\r\n onExport(res.data.TravelList);\r\n }\r\n });\r\n };\r\n function clearFilters() {\r\n setFilters(defaultFiltersState);\r\n }\r\n useEffect(() => {\r\n if (langCode) {\r\n const frenchheader = configKeys\r\n .filter((item) => item.key === 'PrestoTxHistoryFrenchHeaders')\r\n .map((config) => config.setting);\r\n setCsvHeader(frenchheader);\r\n } else {\r\n const englishheader = configKeys\r\n .filter((item) => item.key === 'PrestoTxHistoryEnglishHeaders')\r\n .map((config) => config.setting);\r\n setCsvHeader(englishheader);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (selectedCard.mediaType !== mediaTypes.CRDNC) updateHistory();\r\n }, [pageNumber, sorting]);\r\n\r\n useDidMountEffect(() => {\r\n if (pageNumber === 1) {\r\n updateHistory();\r\n } else {\r\n setPageNumber(1);\r\n }\r\n setHasFiltersApplied(!shallowObjEqual(defaultFiltersState, filters));\r\n }, [filters]);\r\n\r\n let paymentbyCardTx = items?.items?.filter((el) => el.TrxTypeId === 22);\r\n let displayableData = items?.items?.filter((el) => !blockTransactionHistoryEntry(el));\r\n displayableData = displayableData.map((trans) => {\r\n if (\r\n (trans.TrxTypeId === 1 &&\r\n (trans.LoadType === '5' || trans.LoadType === '6') &&\r\n (trans.ServiceProviderID === TA.GO_TRANSIT || trans.ServiceProviderID === TA.UP_EXPRESS)) ||\r\n (trans.TrxTypeId === 2 && (trans.LoadType === '1' || trans.LoadType === '2')) ||\r\n (trans.TrxTypeId === 2 && (trans.LoadType === '4' || trans.LoadType === '6')) ||\r\n (trans.TrxTypeId === 2 && (trans.LoadType === '5' || trans.LoadType === '7'))\r\n ) {\r\n let bal = paymentbyCardTx.filter((x) => x.SequenceNumber === trans.SequenceNumber);\r\n return {\r\n ...trans,\r\n Balance: bal?.length > 0 ? bal[0].Balance : trans.Balance,\r\n };\r\n } else {\r\n return trans;\r\n }\r\n });\r\n return (\r\n \r\n \r\n \r\n {!isGoogleWallet && (\r\n <>\r\n \r\n window.print()} />\r\n \r\n {items.total ? (\r\n \r\n \r\n ) : null}\r\n {displayableData?.length === 0 && !isLoadingData && !hasConnectionError ? (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(TransactionHistoryPresto);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { Text, Image, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { PrestoLink } from '../../atoms';\r\nimport './transitAgencyList.scss';\r\n\r\nconst TransitAgencyList = (props) => {\r\n const { datasource, contextItem } = props.fields && props.fields.data ? props.fields.data : {};\r\n const [transitClass, setTransitClass] = useState(false);\r\n useEffect(() => {\r\n if (datasource.Cssclass.jss.value === 'Transit-class') {\r\n setTransitClass(true);\r\n }\r\n }, [datasource]);\r\n return (\r\n \r\n setSorting(sorting === 'ASC' ? 'DESC' : 'ASC')}\r\n className=\"transactionHistory-buttons-sorting desktopOnly\"\r\n icon={calendarIcon}\r\n >\r\n setIsFilters(!isFilters)}\r\n className=\"transactionHistory-buttons-filters\"\r\n icon={filterIcon}\r\n ariaExpanded={isFilters}\r\n >\r\n setIsExpand(!isExpand)}\r\n className=\"transactionHistory-buttons-expand\"\r\n icon={expandIcon}\r\n ariaLabel={isExpand ? fields?.collapseLabelA11y.value : fields?.expandLabelA11y.value}\r\n ariaExpanded={isExpand}\r\n >\r\n {isExpand ? (\r\n
\r\n {isFilters ? (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {displayableData?.map((data, index) => (\r\n
\r\n {displayableData?.length ? (\r\n \r\n \r\n
\r\n ) : null}\r\n {hasConnectionError ? (\r\n \r\n
\r\n
\r\n );\r\n};\r\nexport default withTranslation()(TransitAgencyList);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { useField } from 'formik';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Modal } from '../../../molecules';\r\nimport { formatDate, formatDecimalWithCurrency } from '../../../services/utils';\r\nimport { Checkbox, RadioInput, Button } from '../../../atoms';\r\nimport api from '../../../services/api';\r\n\r\nimport './agencyOption.scss';\r\n\r\nexport default function AgencyOption({\r\n children,\r\n product,\r\n name,\r\n fields,\r\n showAutoRenew = true,\r\n values,\r\n viewPaymentPlan,\r\n autoRenewName,\r\n t,\r\n}) {\r\n const [{ value }] = useField(name);\r\n const logo = useSelector(\r\n (state) => state.products?.logos[product?.ProductServiceProvider.Id]?.Logo\r\n );\r\n const radioInputA11y = `${product?.ProductName} ${fields.transitPassSelectionA11y?.value}`;\r\n const [discountResponse, setDiscountResponse] = useState('');\r\n const [saveAverageValue, setSaveAverageValue] = useState('');\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);\r\n function getTimePeriod(startDate, endDate) {\r\n return `${formatDate(startDate)} - ${formatDate(endDate)}`;\r\n }\r\n\r\n //console.log('TTCSaveAverage', t('TTCSaveAverage'));\r\n\r\n let ttcSaveAverage = t('TTCSaveAverage');\r\n let updatedttcAverage = '';\r\n\r\n const getPaymentPlan = (productId) => {\r\n api\r\n .getAutorenewPassDiscounts({\r\n productId,\r\n IsStubEnabled: false,\r\n IsErrorFlowEnabled: true,\r\n })\r\n .then((response) => {\r\n setDiscountResponse(response?.data?.MDPDetails);\r\n updatedttcAverage = ttcSaveAverage.replace(\r\n '{0}',\r\n response?.data?.MDPDetails[0]?.Discount.toString()\r\n );\r\n setSaveAverageValue(updatedttcAverage);\r\n })\r\n .catch((error) => {\r\n //console.log('error', error);\r\n });\r\n };\r\n\r\n const viewPaymentPlanModal = () => {\r\n setIsModalOpen(true);\r\n setIsPaymentModalOpen(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (product?.ProductFamily === 'MDP') {\r\n getPaymentPlan(product.ProductId);\r\n }\r\n }, []);\r\n return (\r\n <>\r\n {isPaymentModalOpen ? (\r\n \r\n
\r\n \r\n {datasource.Title.jss.value &&
\r\n {datasource.Title.jss.value}
}\r\n {datasource.children.map((child) => {\r\n return (\r\n\r\n \r\n
\r\n );\r\n })}\r\n \r\n {child.Title?.jss.value && (\r\n
\r\n \r\n
\r\n )}\r\n {child.Description?.jss.value && (\r\n {child.Title?.jss.value}
\r\n\r\n
\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {discountResponse &&\r\n discountResponse.length > 0 &&\r\n discountResponse.map((data) => {\r\n return (\r\n \r\n {data.Term}\r\n {data.Discount}%\r\n \r\n {formatDecimalWithCurrency(data.DiscountedPrice)}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n >\r\n {fields.CloseCTA?.value}\r\n \r\n
\r\n \r\n }\r\n textSubmit={fields.CloseCTA?.value}\r\n isModalOpen={isModalOpen}\r\n onSubmit={() => {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n setIsModalOpen={setIsModalOpen}\r\n hideButtons\r\n withoutFocusTrap={true}\r\n />\r\n \r\n
\r\n \r\n {showAutoRenew ? (\r\n \r\n
\r\n \r\n
\r\n \r\n {logo && logo.Src ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n \r\n {getTimePeriod(product.ValidityStartDate, product.ValidityEndDate)}\r\n
\r\n \r\n {product.ProductName}\r\n
\r\n \r\n {product.ProductFamily === 'CAPP' ? (\r\n \r\n {formatDecimalWithCurrency(product.ProductPrice)}\r\n
\r\n ) : (\r\n \r\n {\r\n e.preventDefault();\r\n viewPaymentPlanModal();\r\n }}\r\n type=\"button\"\r\n className=\"agencyOption-plan-link\"\r\n href=\"\"\r\n tabIndex=\"0\"\r\n >\r\n
\r\n )}\r\n \r\n {discountResponse && discountResponse?.length && <> {saveAverageValue}}\r\n
\r\n \r\n \r\n \r\n {values[autoRenewName] ?
\r\n ) : null}\r\n \r\n {/* \r\n
\r\n {children}
: null}\r\n \r\n \r\n
\r\n ) : null}\r\n {product?.ProductName ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {discountResponse &&\r\n discountResponse.length > 0 &&\r\n discountResponse.map((data) => {\r\n return (\r\n \r\n {data.Term}\r\n {data.Discount}%\r\n \r\n {formatDecimalWithCurrency(data.DiscountedPrice)}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setIsTTCModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n >\r\n {transitPassfields.CloseCTA?.value}\r\n \r\n
\r\n \r\n }\r\n textSubmit={transitPassfields.CloseCTA?.value}\r\n isModalOpen={isTTCModalOpen}\r\n onSubmit={() => {\r\n setIsTTCModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n setIsModalOpen={setIsTTCModalOpen}\r\n hideButtons\r\n withoutFocusTrap={true}\r\n />\r\n \r\n {nickname} - \r\n {visibleId}\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n />\r\n ) : null}\r\n {pauseAndReinstate ? (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {logo && logo.Src ? (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {product.ProductName}\r\n
\r\n \r\n {getTimePeriod(product.ValidityStartDate, product.ValidityEndDate)}\r\n
\r\n \r\n
\r\n \r\n {product?.ProductFamily === 'MDP' ? (\r\n
\r\n \r\n {formatDecimalWithCurrency(state?.discountedProduct?.DiscountedPrice)}\r\n
\r\n ) : (\r\n \r\n {formatDecimalWithCurrency(product?.ProductPrice)}\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {product?.ProductFamily === 'MDP'\r\n ? `${formatDecimalWithCurrency(\r\n state?.discountedProduct?.DiscountedPrice\r\n )}`\r\n : `${formatDecimalWithCurrency(product?.ProductPrice)}`}\r\n
\r\n \r\n
\r\n ) : null}\r\n {state?.showConfirmation && (\r\n \r\n \r\n
\r\n\r\n {pauseAndReinstate ? (\r\n <>\r\n \r\n
\r\n \r\n {logo && logo.Src ? (\r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n e.preventDefault();\r\n viewPaymentPlan(product.ProductId);\r\n }}\r\n onKeyDown={paymentClickHandler}\r\n >\r\n
\r\n \r\n
\r\n {/* \r\n {autorenewSubscriptionList &&\r\n autorenewSubscriptionList.length > 0 &&\r\n autorenewSubscriptionList[0]?.Product.ProductName}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n View Discounted Plan
*/}\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n {state?.TransactionType && (\r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n )}\r\n\r\n {state?.ResponseCode && (\r\n \r\n \r\n {' '}\r\n
\r\n )}\r\n\r\n {state?.ISOCode && (\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n\r\n {state?.TransactionNumber && (\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {discountResponse &&\r\n discountResponse.length > 0 &&\r\n discountResponse.map((data) => {\r\n return (\r\n \r\n {data.Term}\r\n {data.Discount}%\r\n \r\n {formatDecimalWithCurrency(data.DiscountedPrice)}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setIsTTCModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n >\r\n {transitPassfields.CloseCTA?.value}\r\n \r\n
\r\n \r\n }\r\n textSubmit={transitPassfields.CloseCTA?.value}\r\n isModalOpen={isTTCModalOpen}\r\n onSubmit={() => {\r\n setIsTTCModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n setIsModalOpen={setIsTTCModalOpen}\r\n hideButtons\r\n withoutFocusTrap={true}\r\n />\r\n \r\n
\r\n )}\r\n\r\n {!pauseAndReinstate && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {nickname}\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n {!pauseAndReinstate && (\r\n \r\n \r\n
\r\n\r\n {!pauseAndReinstate ? (\r\n \r\n
\r\n ) : (\r\n \r\n {logo && logo.Src ? (\r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n e.preventDefault();\r\n viewPaymentPlan(product.ProductId);\r\n }}\r\n onKeyDown={paymentClickHandler}\r\n >\r\n
\r\n \r\n
\r\n {/* {state?.product?.ProductName}
\r\n \r\n
\r\n \r\n {getTimePeriod(\r\n state?.product?.ValidityStartDate,\r\n state?.product?.ValidityEndDate\r\n )}\r\n
\r\n {/* \r\n \r\n
\r\n \r\n \r\n
*/}\r\n {/* \r\n \r\n
*/}\r\n {ttcFields.TTC12MonthPassNote.value}
\r\n \r\n {product?.ProductFamily === 'MDP' ? (\r\n
\r\n \r\n {formatDecimalWithCurrency(state?.discountedProduct?.DiscountedPrice)}\r\n
\r\n ) : (\r\n \r\n {formatDecimalWithCurrency(state?.product?.ProductPrice)}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n {logo && logo.Src ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n
\r\n {state?.product?.ProductAttibutes?.NoOfBasicPeriod === NO_OF_BASIC_PERIOD ? (\r\n {state?.product?.ProductName}
\r\n {getTimePeriod(startDate, endDate)}
\r\n {ttcFields.TtcPassNote.value}
\r\n ) : null}\r\n \r\n {state?.product?.ProductPrice ? (\r\n
\r\n \r\n {formatDecimalWithCurrency(state?.product?.ProductPrice)}\r\n
\r\n ) : null}\r\n \r\n {state?.product?.ProductAttibutes?.NoOfBasicPeriod === NO_OF_BASIC_PERIOD ? (\r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n \r\n \r\n {step === 1 ? (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(TTCCheckout);\r\n","import React, { useEffect, useState, useRef } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Formik } from 'formik';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport * as Yup from 'yup';\r\nimport { withTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport {\r\n getLongLanguageCode,\r\n getQueryParams,\r\n formatDecimalWithCurrency,\r\n} from '../../../services/utils';\r\nimport AgencyOption from '../AgencyOption';\r\nimport api from '../../../services/api';\r\nimport './AddTransitPass.scss';\r\nimport {\r\n setShoppingCart,\r\n addShoppingCartMessage,\r\n setCheckoutTransitPage,\r\n setGuestShoppingCartToken,\r\n setGuestShoppingCartPayload,\r\n} from '../../../redux/user/actions';\r\nimport { setTransitPasses } from '../../../redux/products/actions';\r\nimport { ButtonBlock, Button, Loader } from '../../../atoms';\r\nimport { Error, Select, Note, Title, CardBlock, Modal } from '../../../molecules';\r\nimport downIcon from '../../../assets/images/down.svg';\r\nimport useDetectOutsideClick from '../../../hooks/useDetectOutsideClick';\r\nimport {\r\n CAPP_PRD_FAMILY,\r\n MAX_NO_OF_TRANSIT_PASSES,\r\n MDP_PRD_FAMILY,\r\n NEWMEDIA_VISIBLE_ID,\r\n SINGLE_FARE_CRD_CART_ITEM_NAME,\r\n NO_OF_BASIC_PERIOD,\r\n} from '../../../constants/product.constants';\r\nimport '../transitpass.scss';\r\nimport TTCCheckout from './TTCCheckout';\r\n\r\nconst AddTransitPass = ({\r\n fields,\r\n t,\r\n state,\r\n setState,\r\n goToSetAutorenew,\r\n autorenewSubscriptionList,\r\n mergedSubscriptionList,\r\n rendering,\r\n action,\r\n isSuccess,\r\n error,\r\n pausedState,\r\n}) => {\r\n const [loading, setLoading] = useState(false);\r\n const [isAccordionClicked, setIsAccordionClicked] = useState(false);\r\n const focusDiv = useRef();\r\n const [disableAgencyDropdown, setDisableAgencyDropdown] = useState(true);\r\n const [serviceOptions, setServiceOptions] = useState([]);\r\n const [calendarOptions, setCalendarOptions] = useState([]);\r\n const [selectedService, setSelectedService] = useState('');\r\n const [selectedProductId, setSelectedProductId] = useState('');\r\n const shoppingCart = useSelector((reduxState) => reduxState.user.shoppingCart);\r\n const selectedCard = useSelector((reduxState) => reduxState.user.selectedCard);\r\n const userInfo = useSelector((s) => s.user);\r\n const [is12MonthPass, setIs12MonthPass] = useState(false);\r\n const [TTCProduct, setTTCProduct] = useState('');\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const location = useLocation();\r\n const queryParams = getQueryParams(location.search);\r\n const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);\r\n const [submittedValues, setSubmittedValues] = useState('');\r\n const checkoutTransitPage = useSelector((redux) => redux.user.checkoutTransitPage);\r\n const guestUserInfo = useSelector((reduxState) => reduxState.user.guestUserInfoEnabled);\r\n const guestSCT = useSelector((reduxState) => reduxState.user.guestShoppingCartToken);\r\n const authenticated = useSelector((state) => state.user && state.user.authenticated);\r\n const anonymous = useSelector((state) => state.user && state.user.anonymous);\r\n const checkAnyNonNewmediaItemInCart = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter((el) => el.visibleId !== NEWMEDIA_VISIBLE_ID);\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n const isProviderAddedToCart = (currentService) => {\r\n if (\r\n currentService &&\r\n shoppingCart &&\r\n shoppingCart.items &&\r\n shoppingCart.items.length &&\r\n selectedCard &&\r\n selectedCard.visibleId\r\n ) {\r\n let IsOrderCard = fields?.IsOrderCard?.value;\r\n let filteredItems = shoppingCart.items.filter(\r\n (item) =>\r\n item.serviceProvider === currentService &&\r\n (item.visibleId === selectedCard.visibleId ||\r\n (IsOrderCard && item.visibleId === NEWMEDIA_VISIBLE_ID))\r\n );\r\n if (filteredItems && filteredItems.length) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n };\r\n const dispatch = useDispatch();\r\n const [discountResponse, setDiscountResponse] = useState('');\r\n const cardDropdownRef = useRef(null);\r\n const [isArrowIconClicked, openDropdown] = useDetectOutsideClick(cardDropdownRef, false);\r\n const onClickSelect = () => {\r\n openDropdown(!isArrowIconClicked);\r\n setIsAccordionClicked(true);\r\n };\r\n const iconText = isArrowIconClicked ? t('expandA11y') : t('collapseA11y');\r\n const currentDate = new Date();\r\n const currentYear = currentDate.getFullYear();\r\n const currentMonth = currentDate.getMonth() + 1; // counting months from 1 instead of 0 (e.g. January will be 1 not 0)\r\n\r\n function isMonthValid(selectedYear, monthOption) {\r\n if (selectedYear > currentYear) {\r\n return true;\r\n }\r\n return monthOption.value > currentMonth;\r\n }\r\n\r\n const getItemId = (values) => {\r\n const service = serviceOptions && serviceOptions.find((i) => i.value === values.service);\r\n const product =\r\n service && service.products && service.products.find((p) => p.ProductId === values.productId);\r\n return product?.ProductAttibutes?.NoOfBasicPeriod;\r\n };\r\n\r\n useEffect(() => {\r\n const serializedData = queryParams?.serializedData && JSON.parse(queryParams.serializedData);\r\n if (serializedData?.flow === 'ttc' && !is12MonthPass) {\r\n setIs12MonthPass(true);\r\n dispatch(setCheckoutTransitPage(true));\r\n } else {\r\n dispatch(setCheckoutTransitPage(false));\r\n }\r\n if (!userInfo.fareMedias || !userInfo.selectedCard) return;\r\n if (!guestUserInfo?.isGuestLogin) {\r\n api\r\n .getServiceProviders({\r\n visibleId: userInfo.selectedCard.visibleId,\r\n IsOrderCard: fields?.IsOrderCard?.value,\r\n })\r\n .then(({ data }) => {\r\n if (!data.Success) return;\r\n\r\n setServiceOptions(\r\n data.serviceProvider.map((i) => ({\r\n label: i.Name,\r\n value: i.Id,\r\n products: i.Products,\r\n }))\r\n );\r\n setDisableAgencyDropdown(!data.serviceProvider.length);\r\n dispatch(setTransitPasses(data));\r\n });\r\n } else {\r\n api\r\n .getTransitAgencyServiceProvidersforGuestFlow({\r\n visibleId: '',\r\n IsOrderCard: true,\r\n })\r\n .then(({ data }) => {\r\n if (!data.Success) return;\r\n\r\n setServiceOptions(\r\n data.serviceProvider.map((i) => ({\r\n label: i.Name,\r\n value: i.Id,\r\n products: i.Products,\r\n }))\r\n );\r\n setDisableAgencyDropdown(!data.serviceProvider.length);\r\n dispatch(setTransitPasses(data));\r\n });\r\n }\r\n\r\n api.getAutorenewCalendar().then((calendarResponse) => {\r\n if (!calendarResponse.data) return;\r\n\r\n const opts = {};\r\n Object.keys(calendarResponse.data).forEach((language) => {\r\n const dataPerLanguage = calendarResponse.data[language];\r\n\r\n const yearOptions = [...Array(dataPerLanguage.amountOfFutureYears + 1).keys()]\r\n .map((i) => i + currentYear)\r\n .map((year) => {\r\n return { value: year, label: year };\r\n });\r\n\r\n const monthOptions = Object.keys(dataPerLanguage.months).map((key) => {\r\n return { value: key, label: dataPerLanguage.months[key] };\r\n });\r\n\r\n opts[language] = { yearOptions, monthOptions };\r\n });\r\n setCalendarOptions(opts);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isPaymentModalOpen) {\r\n document.body.scrollTop = 0;\r\n }\r\n }, [isPaymentModalOpen]);\r\n\r\n useEffect(() => {\r\n if (checkoutTransitPage && autorenewSubscriptionList.length) {\r\n const serviceValue =\r\n autorenewSubscriptionList &&\r\n autorenewSubscriptionList.length > 0 &&\r\n autorenewSubscriptionList[0]?.Product &&\r\n autorenewSubscriptionList[0]?.Product?.ProductServiceProvider &&\r\n autorenewSubscriptionList[0]?.Product?.ProductServiceProvider?.Id;\r\n\r\n const productValue =\r\n autorenewSubscriptionList &&\r\n autorenewSubscriptionList.length > 0 &&\r\n autorenewSubscriptionList[0]?.Product &&\r\n autorenewSubscriptionList[0]?.Product?.ProductId;\r\n\r\n const service = serviceOptions && serviceOptions.find((i) => i.value === serviceValue);\r\n const product =\r\n service?.products && service.products.find((p) => p.ProductId === productValue);\r\n const chosenService = serviceOptions && serviceOptions.find((i) => i.value === serviceValue);\r\n const chosenServiceId = chosenService?.value;\r\n const choosenProduct =\r\n chosenService?.products && chosenService.products.find((p) => p.ProductId === productValue);\r\n\r\n if (product) setTTCProduct(product);\r\n if (choosenProduct && chosenServiceId) {\r\n setState({\r\n ...state,\r\n product: choosenProduct,\r\n serviceProviderId: chosenServiceId,\r\n });\r\n }\r\n }\r\n if (checkoutTransitPage) {\r\n setIs12MonthPass(true);\r\n } else {\r\n setIs12MonthPass(false);\r\n }\r\n }, [checkoutTransitPage]);\r\n\r\n useEffect(() => {\r\n if (isAccordionClicked) {\r\n if (focusDiv.current) {\r\n focusDiv.current.focus();\r\n }\r\n }\r\n }, [isArrowIconClicked]);\r\n\r\n const checkIsNewCardExist = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter(\r\n (el) =>\r\n el.name.toUpperCase() === SINGLE_FARE_CRD_CART_ITEM_NAME ||\r\n el.visibleId === NEWMEDIA_VISIBLE_ID\r\n );\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n function addToCart(productId) {\r\n let IsOrderCard = fields?.IsOrderCard?.value;\r\n let visibleIdCheck = fields?.IsOrderCard?.value\r\n ? NEWMEDIA_VISIBLE_ID\r\n : userInfo?.selectedCard?.visibleId;\r\n let IsNewCardAdded = checkIsNewCardExist();\r\n setLoading(true);\r\n api\r\n .addProductToCart({\r\n customerId: userInfo.customerId,\r\n visibleId: visibleIdCheck,\r\n productId,\r\n quantity: 1,\r\n IsNewCardAdded,\r\n IsOrderCard,\r\n Sct: guestUserInfo?.isGuestLogin && guestSCT?.sct ? guestSCT.sct : '',\r\n // Cct: guestUserInfo?.isGuestLogin && guestSCT?.cct ? guestSCT.cct : '',\r\n IsGuestUser: guestUserInfo?.isGuestLogin ? true : false,\r\n IsAnonymousUser: anonymous ? true : false,\r\n })\r\n .then((res) => {\r\n setLoading(false);\r\n dispatch(setShoppingCart(res.data.ShoppingCart.Order, true));\r\n\r\n //if (guestUserInfo?.isGuestLogin) {\r\n dispatch(setGuestShoppingCartToken(res.data.Cookies));\r\n // dispatch(\r\n // setGuestShoppingCartPayload({\r\n // productId,\r\n // price: res.data.ShoppingCart.Order.TotalAmount,\r\n // })\r\n // );\r\n //}\r\n if (checkIsNewCardExist()) {\r\n dispatch(addShoppingCartMessage(t('orderACardCheckoutNotification')));\r\n }\r\n dispatch(addShoppingCartMessage(t('shoppingCartNotificationsAddTransitPass')));\r\n setSelectedService('');\r\n setSelectedProductId('');\r\n })\r\n .catch(() => {\r\n setLoading(false);\r\n });\r\n }\r\n const checkIsTransitPassInCart = () => {\r\n if (shoppingCart && shoppingCart.items && shoppingCart.items.length) {\r\n let check = shoppingCart.items.filter((el) => el.productFamily === CAPP_PRD_FAMILY);\r\n return check.length ? true : false;\r\n }\r\n return false;\r\n };\r\n const Heading = () => (\r\n \r\n {state?.confirmationNo && (\r\n <>\r\n \r\n
\r\n ) : pausedState || reinstateState ? (\r\n ''\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n ) : getItemId(submittedValues) === NO_OF_BASIC_PERIOD ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {discountResponse &&\r\n discountResponse.length > 0 &&\r\n discountResponse.map((data) => {\r\n return (\r\n \r\n {data.Term}\r\n {data.Discount}%\r\n \r\n {formatDecimalWithCurrency(data.DiscountedPrice)}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n >\r\n {fields.CloseCTA?.value}\r\n \r\n
\r\n \r\n }\r\n textSubmit={fields.CloseCTA?.value}\r\n isModalOpen={isModalOpen}\r\n onSubmit={() => {\r\n setIsModalOpen(false);\r\n setIsPaymentModalOpen(false);\r\n }}\r\n setIsModalOpen={setIsModalOpen}\r\n hideButtons\r\n withoutFocusTrap={true}\r\n />\r\n \r\n {mergedSubscriptionList.length < MAX_NO_OF_TRANSIT_PASSES ? (\r\n {\r\n // let errors = {};\r\n // // if (values?.autoRenewCheck && !values.year) {\r\n // // errors.year = t('transitPassYearRequired');\r\n // // } else if (values?.autoRenewCheck && !values.month) {\r\n // // errors.month = t('transitPassMonthRequired');\r\n // // } else if (values?.autoRenewCheck && values.month && !values.year) {\r\n // // errors.year = t('transitPassYearRequired');\r\n // // }\r\n // return errors;\r\n // }}\r\n // month: Yup.number().ensure()\r\n month: Yup.number()\r\n .when(['year'], {\r\n is: (year) => {\r\n return year;\r\n },\r\n then: Yup.number().required(t('transitPassMonthRequired')),\r\n })\r\n .when(['year'], {\r\n is: (year) => {\r\n return year === currentYear;\r\n },\r\n then: Yup.number().min(currentMonth + 1, t('transitPassMonthRequired')),\r\n }),\r\n year: Yup.number(),\r\n })}\r\n onSubmit={(values) => {\r\n setSubmittedValues(values);\r\n const service =\r\n serviceOptions && serviceOptions.find((i) => i.value === values.service);\r\n const product =\r\n service.products && service.products.find((p) => p.ProductId === values.productId);\r\n if (product.ProductFamily === MDP_PRD_FAMILY && !fields?.IsOrderCard?.value) {\r\n setIsModalOpen(true);\r\n setTTCProduct(product);\r\n const chosenService =\r\n serviceOptions && serviceOptions.find((i) => i.value === values.service);\r\n const chosenServiceId = chosenService?.value;\r\n const choosenProduct =\r\n chosenService.products &&\r\n chosenService.products.find((p) => p.ProductId === values.productId);\r\n // setState({\r\n // ...state,\r\n // product: choosenProduct,\r\n // serviceProviderId: chosenServiceId,\r\n // autorenew: {\r\n // month: values.month,\r\n // year: values.year,\r\n // },\r\n // });\r\n setLoading(true);\r\n api\r\n .getAutorenewPassDiscounts({\r\n productId: product.ProductId,\r\n IsStubEnabled: false,\r\n IsErrorFlowEnabled: true,\r\n })\r\n .then((response) => {\r\n setLoading(false);\r\n if (response?.data?.MDPDetails?.length > 0) {\r\n setState({\r\n ...state,\r\n product: choosenProduct,\r\n serviceProviderId: chosenServiceId,\r\n autorenew: {\r\n month: values.month,\r\n year: values.year,\r\n },\r\n discountedProduct: response?.data?.MDPDetails[0],\r\n });\r\n if (getItemId(values) !== NO_OF_BASIC_PERIOD) {\r\n setIs12MonthPass(true);\r\n dispatch(setCheckoutTransitPage(true));\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n //console.log('error', error);\r\n });\r\n } else if (!values?.autoRenewCheck) {\r\n addToCart(values.productId);\r\n } else if (values?.autoRenewCheck) {\r\n const chosenService =\r\n serviceOptions && serviceOptions.find((i) => i.value === values.service);\r\n const chosenServiceId = chosenService?.value;\r\n const choosenProduct =\r\n chosenService.products &&\r\n chosenService.products.find((p) => p.ProductId === values.productId);\r\n setState({\r\n ...state,\r\n product: choosenProduct,\r\n serviceProviderId: chosenServiceId,\r\n autorenew: {\r\n month: values.month,\r\n year: values.year,\r\n },\r\n });\r\n goToSetAutorenew();\r\n }\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit, values, setFieldValue, setFieldTouched }) => {\r\n const chosenService =\r\n serviceOptions && serviceOptions.find((i) => i.value === values.service);\r\n\r\n let checkIsProviderAddedToCart = isProviderAddedToCart(chosenService?.value);\r\n let checkIsAnyProviderAddedWithNewCard =\r\n checkIsNewCardExist() && checkIsTransitPassInCart();\r\n let checkAnyNonNewmediaItemInCartInOrderACard =\r\n fields?.IsOrderCard?.value && checkAnyNonNewmediaItemInCart();\r\n let checkAnyNewmediaItemInCartInAddPass =\r\n !fields?.IsOrderCard?.value && checkIsNewCardExist();\r\n function onKeyDown(keyEvent) {\r\n if ((((keyEvent.charCode || keyEvent.keyCode) === 13) ||\r\n ((keyEvent.charCode || keyEvent.keyCode) === 32)) && (checkIsProviderAddedToCart ||\r\n checkIsAnyProviderAddedWithNewCard ||\r\n checkAnyNonNewmediaItemInCartInOrderACard ||\r\n checkAnyNewmediaItemInCartInAddPass)) {\r\n keyEvent.preventDefault();\r\n }\r\n }\r\n const handleChange = (e) => {\r\n const { name } = e.target;\r\n if (name === 'productId') {\r\n setFieldValue('autoRenewCheck', false);\r\n setFieldValue('month', '');\r\n setFieldValue('year', '');\r\n }\r\n if (name === 'autoRenewCheck') {\r\n setFieldValue('month', '');\r\n setFieldValue('year', '');\r\n }\r\n\r\n }\r\n\r\n const handleChangedropdown = (e) => {\r\n setFieldValue('productId',\"\");\r\n setFieldValue('autoRenewCheck', false);\r\n setFieldValue('month', '');\r\n setFieldValue('year', ''); \r\n }\r\n \r\n return (\r\n \r\n
\r\n )\r\n )}\r\n {values.service && !checkIsProviderAddedToCart ? (\r\n \r\n
\r\n ) : (\r\n <>\r\n {values.service && !checkIsProviderAddedToCart ? (\r\n \r\n {chosenService.products.map((i) => {\r\n if (\r\n i?.ProductAttibutes?.NoOfBasicPeriod === 12 &&\r\n fields?.IsOrderCard?.value\r\n ) {\r\n return null;\r\n }\r\n return (\r\n {\r\n viewPaymentPlan(data);\r\n }}\r\n t={t}\r\n >\r\n
\r\n ) : (\r\n checkIsProviderAddedToCart && (\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 (!values.month) setFieldValue('month', '');\r\n }}\r\n placeholder={fields.addAutorenewEndDateYearText.value}\r\n labelA11y={fields.addAutorenewEndDateYearTextA11y}\r\n name=\"year\"\r\n options={calendarOptions[getLongLanguageCode()].yearOptions}\r\n errors={errors}\r\n touched={touched}\r\n />\r\n
\r\n\r\n \r\n {\r\n if (!values.year) {\r\n setFieldTouched('year', true);\r\n setFieldValue('year', '');\r\n }\r\n }}\r\n placeholder={fields.addAutorenewEndDateMonthText.value}\r\n labelA11y={fields.addAutorenewEndDateMonthTextA11y}\r\n name=\"month\"\r\n options={calendarOptions[\r\n getLongLanguageCode()\r\n ].monthOptions.filter((month) => {\r\n return isMonthValid(values.year, month);\r\n })}\r\n isDisabled={!values.year}\r\n errors={errors}\r\n touched={touched}\r\n />\r\n
\r\n \r\n
\r\n )}\r\n noteA11y={fields.transitPassNoteA11y.value}\r\n >\r\n \r\n {hasAnyCard(userInfo) ? (\r\n <>\r\n {!checkoutTransitPage && (\r\n <>\r\n {fields.IsOrderCard.value ? null : (\r\n \r\n \r\n )}\r\n {\r\n setSelectedSubscription(subscriptionInstance);\r\n setShowCancelAutorenew(true);\r\n }}\r\n goToManageAutoRenew={(subscriptionInstance) => {\r\n dispatch(\r\n setManageAutoRenewMode({\r\n visibility: true,\r\n instance: subscriptionInstance,\r\n TCrendering: rendering.placeholders['presto-transit-pass-autorenew-set'][0],\r\n checkoutData: {},\r\n })\r\n );\r\n }}\r\n mergedSubscriptionList={mergedSubscriptionList}\r\n cancel12MonthTTCPass={(subscriptionInstance) => {\r\n setSelectedSubscription(subscriptionInstance);\r\n setCancel12MonthTTCPass(true);\r\n }}\r\n />\r\n ) : null}\r\n {!IsOrderCard && (pausedState || reinstateState) ? (\r\n \r\n \r\n {\r\n dispatch(setCheckoutTransitPage(true));\r\n }}\r\n >\r\n \r\n
\r\n }\r\n custom\r\n />\r\n )}\r\n \r\n ) : null}\r\n \r\n )}\r\n \r\n {reinstateState ? (\r\n \r\n \r\n \r\n \r\n
\r\n }\r\n titleA11y={fields?.TTCPaymentInProgressA11y.value}\r\n descriptionA11y={fields?.TTCPaymentInProgressA11y.value}\r\n custom\r\n />\r\n ) : (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {flag.errorMsg &&
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n const errors = {};\r\n if (!values.selectYear) {\r\n errors.selectYear = props.fields.SelectyearErrLabel.value;\r\n }\r\n if (Object.prototype.hasOwnProperty.call(errors, 'selectYear')) {\r\n setFormError(true);\r\n } else {\r\n setFormError(false);\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => {\r\n getApiDetails(values);\r\n }}\r\n >\r\n {({ errors, touched, handleSubmit }) => (\r\n \r\n )}\r\n \r\n
\r\n {flag.exportCsv ? (\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n {downloadPdf && (\r\n
\r\n \r\n {/* */}\r\n \r\n {props?.fields?.DownloadPDFlabel.value}\r\n \r\n
\r\n )}\r\n {flag.exportCsv && (\r\n \r\n {/* */}\r\n \r\n
\r\n )}\r\n \r\n {countCsv === 4 && turPdfbefore2017.length !== 0 ? (\r\n \r\n {turPdfbefore2017.map((eachYear, index) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n ) : null}\r\n \r\n {title} {eachYear.year}\r\n
\r\n \r\n \r\n
\r\n ,\r\n loading ? \r\n
\r\n \r\n {datasource && chunk(datasource.children, 2).map(child => (\r\n
\r\n );\r\n};\r\n\r\nexport default TwoColumnImagesContent;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport './TwocolumnLayout.scss';\r\n\r\nconst TwocolumnLayout = (props) => {\r\n const [twoColumnbg, setTwoColumnbg] = useState(false);\r\n useEffect(() => {\r\n if (props?.fields?.WhiteBackGround.value) {\r\n setTwoColumnbg(true);\r\n }\r\n }, [props]);\r\n\r\n return (\r\n \r\n {child.map(imagecontent =>
\r\n\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TwocolumnLayout;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { withTranslation } from 'react-i18next';\r\nimport './styles.scss';\r\nimport { CardBlock } from '../../molecules';\r\nimport api from '../../services/api';\r\nimport { Button, ButtonBlock } from '../../atoms';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { updateLoginAndSecurityFields, setB2cClaimsResponse } from '../../redux/user/actions';\r\nimport { localstorageService } from '../../services/utils';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport handleServerError from '../../services/handleServerError';\r\n\r\nconst TwoStepVerification = ({ fields }) => {\r\n const dispatch = useDispatch();\r\n const b2cClaimsResponse = useSelector((reduxState) => reduxState?.user?.b2cClaimsResponse);\r\n const loginAndSecurityProps = useSelector((reduxState) => reduxState.user.loginAndSecurity);\r\n const shortenPhoneNumber = b2cClaimsResponse?.PhoneNumber;\r\n const [error, setError] = useState('');\r\n const { search } = useLocation();\r\n\r\n let IsMfAEnabled =\r\n b2cClaimsResponse && b2cClaimsResponse.hasOwnProperty('IsMfAEnabled')\r\n ? b2cClaimsResponse.IsMfAEnabled\r\n : false;\r\n\r\n useEffect(() => {\r\n if (\r\n fields?.SetupEnrollSuccessMsg?.value != '' &&\r\n (loginAndSecurityProps?.SetupEnrollSuccessMsg?.value === '' ||\r\n loginAndSecurityProps?.SetupEnrollSuccessMsg?.value !== fields?.SetupEnrollSuccessMsg?.value)\r\n ) {\r\n dispatch(\r\n updateLoginAndSecurityFields({\r\n SetupEnrollSuccessMsg: { value: fields?.SetupEnrollSuccessMsg?.value },\r\n SetupUpdateSuccessMsg: { value: fields?.SetupUpdateSuccessMsg?.value },\r\n SetupDisableSuccessMsg: { value: fields?.SetupDisableSuccessMsg?.value },\r\n SetupMaxEntryOnEnrollErrorMsg: { value: fields?.SetupEnrollMaxEntryErrorMsg?.value },\r\n SetupMaxEntryOnUpdateErrorMsg: { value: fields?.SetupUpdateMaxEntryErrorMsg?.value },\r\n SetupMaxEntryOnDisableErrorMsg: { value: fields?.SetupDisableMaxEntryErrorMsg?.value },\r\n SetupInfoMsg: { value: fields?.SetupInfoMsg?.value },\r\n SetupInfoUpdateMsg: { value: fields?.SetupInfoUpdateMsg?.value },\r\n SetupInfoDisableMsg: { value: fields?.SetupInfoDisableMsg?.value },\r\n })\r\n );\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const queryParams1 = new URLSearchParams(search);\r\n if (\r\n !queryParams1.has('Update') && !queryParams1.has('Enroll') && !queryParams1.has('Disable')\r\n ) {\r\n api\r\n .getClaims()\r\n .then((res) => {\r\n //console.log(res);\r\n if (res) {\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(\r\n localStorageKeys.refreshToken,\r\n res.data.Data.Access_token\r\n );\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n dispatch(\r\n setB2cClaimsResponse({\r\n IsMfAEnabled: String(res?.data?.Data?.IsMfAEnabled).toLowerCase() === 'true',\r\n MFANotificationLastViewedDate: res?.data?.Data?.MFANotificationLastViewedDate,\r\n PasswordNotificationLastViewedDate:\r\n res?.data?.Data?.PasswordNotificationLastViewedDate,\r\n IsFirstTimeLogin:\r\n String(res?.data?.Data?.IsFirstTimeLogin).toLowerCase() === 'true',\r\n PhoneNumber: res?.data?.Data?.PhoneNumber,\r\n })\r\n );\r\n }\r\n })\r\n .catch((res) => {\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {fields.PhoneNumberTitle?.value}\r\n {shortenPhoneNumber}\r\n
\r\n ),\r\n }\r\n : {})}\r\n >\r\n \r\n {IsMfAEnabled ? (\r\n
\r\n {fields.SelectSetupNote?.value}
\r\n )}\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n else {\r\n return (\r\n <>\r\n {loading && \r\n
\r\n \r\n );\r\n }\r\n };\r\n\r\n return [\r\n\r\n manageMyProduct?.removeCardEnabled ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n redirectToUrl(routes.manageMyCards)}\r\n buttonTextA11y={props.fields.backToManageMyCardA11y.value} >\r\n \r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n ) : null,\r\n loading ? \r\n
\r\n \r\n
\r\n \r\n
\r\n {!apiStatus.submit ? (\r\n \r\n \r\n \r\n
\r\n ) : (\r\n showMessage()\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {nickName}
\r\n\r\n
\r\n \r\n
\r\n {cardId}
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n redirectToUrl(routes.manageMyCards)}>\r\n \r\n \r\n
\r\n \r\n
\r\n {isButton && !isInteracCard ? (\r\n \r\n
\r\n {formatDate(data.createdTime)}
\r\n \r\n \r\n {fields?.totalLabel.value}\r\n {formatDecimalWithCurrency(parseFloat(totalAmount / 100))}\r\n \r\n
\r\n \r\n
\r\n \r\n {data.lines.map((item) => (\r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n {connectionError ? (\r\n \r\n
\r\n ) : null}\r\n \r\n ) : (\r\n \r\n {configKeys &&\r\n token &&\r\n configKeys\r\n .filter((item) => item.key === 'Ats.GatewayUrl')\r\n .map((configKey) => (\r\n refreshIframe()}\r\n />\r\n )}\r\n
\r\n \r\n \r\n
\r\n )}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n {step ? (\r\n
\r\n );\r\n};\r\n\r\nexport default withTranslation()(UnpaidFares);\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Formik } from 'formik';\r\nimport { withTranslation } from 'react-i18next';\r\nimport printIcon from '../../assets/images/printer.svg';\r\nimport { IconButton, Checkbox, Button, Loader } from '../../atoms';\r\nimport routes from '../../constants/routes';\r\nimport { StepTracker, TextInput } from '../../molecules';\r\nimport { redirectToUrl } from '../../services/utils';\r\nimport api from '../../services/api';\r\nimport {\r\n fetchUserInfo,\r\n setMediaNickName,\r\n setContactlessMediaNickName,\r\n} from '../../redux/user/actions';\r\nimport { setEditCardMode } from '../../redux/products/actions';\r\nimport cardTypes from '../../constants/mediaSubTypes';\r\nimport './updateCardNickName.scss';\r\n\r\nconst NICKNAME_REGEX = /^([a-zA-Z0-9àâäèéêëîïôœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ ]){1,25}$/;\r\n\r\nconst UpdateCardNickName = (props) => {\r\n const { t } = props;\r\n const [step, setStep] = useState(0);\r\n const [loading, setLoading] = useState(false);\r\n const [checkError, setCheckError] = useState(false);\r\n const [nickName, updateNickName] = useState('');\r\n const manageMyProduct = useSelector((reduxState) => reduxState.products.manageMyProduct);\r\n const toNextStep = () => setStep(step + 1);\r\n const [apiStatus, setApiStatus] = useState({ submit: false, state: 'INITIAL' });\r\n const user = useSelector((reduxState) => reduxState.user);\r\n const prestoCards = useSelector((reduxState) => reduxState.user.fareMedias);\r\n const contactlessCards = useSelector((reduxState) => reduxState.user.contactlessMedias);\r\n const fareMedia = useSelector((reduxState) => {\r\n let presto = reduxState.user.fareMedias.find(\r\n (el) => el.mediaId === manageMyProduct.selectedCard.mediaId\r\n );\r\n let contactless = reduxState.user.contactlessMedias.find(\r\n (el) => el.mediaId === manageMyProduct.selectedCard.mediaId\r\n );\r\n if (presto) return presto;\r\n if (contactless) return contactless;\r\n return {};\r\n });\r\n const [isPrimary, setIsPrimary] = useState(fareMedia?.isPrimary);\r\n const dispatch = useDispatch();\r\n const focusDiv = useRef();\r\n\r\n const prestoUpdateNickName = (payload) => {\r\n api\r\n .prestoCardUpdateNickname(payload)\r\n .then((response) => {\r\n if (response?.data?.Success) {\r\n setApiStatus({ submit: true, state: 'SUCCESS' });\r\n toNextStep();\r\n dispatch(\r\n setMediaNickName({\r\n NickName: nickName,\r\n IsPrimary: isPrimary,\r\n visibleId: fareMedia?.visibleId,\r\n })\r\n );\r\n // fetchUserInfo(dispatch);\r\n }\r\n setLoading(false);\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n setApiStatus({ submit: false, state: 'ERROR' });\r\n setLoading(false);\r\n });\r\n };\r\n const contactlessUpdateNickName = (payload) => {\r\n api\r\n .contactlessUpdateNickname(payload)\r\n .then((response) => {\r\n if (response?.data?.Success) {\r\n setApiStatus({ submit: true, state: 'SUCCESS' });\r\n toNextStep();\r\n //fetchUserInfo(dispatch);\r\n dispatch(\r\n setContactlessMediaNickName({\r\n NickName: nickName,\r\n visibleId: fareMedia?.visibleId,\r\n })\r\n );\r\n }\r\n setLoading(false);\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n setApiStatus({ submit: false, state: 'ERROR' });\r\n setLoading(false);\r\n });\r\n };\r\n const checkIsPresto = () => fareMedia.type === cardTypes.presto;\r\n const handleUpdateNickName = () => {\r\n let payload = {};\r\n setLoading(true);\r\n if (checkIsPresto()) {\r\n payload = {\r\n CustomerId: user?.customerId,\r\n Nickname: nickName,\r\n MediaId: fareMedia?.mediaId,\r\n IsPrimary: isPrimary,\r\n VisibleId: fareMedia?.visibleId,\r\n };\r\n prestoUpdateNickName(payload);\r\n } else {\r\n payload = {\r\n AccountId: user?.accountId,\r\n Nickname: nickName,\r\n MediaId: fareMedia?.visibleId?.split('|')[0],\r\n };\r\n contactlessUpdateNickName(payload);\r\n }\r\n };\r\n const onNickNameChange = (e) => {\r\n updateNickName(e.target.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (manageMyProduct?.editCardDetailsEnabled) {\r\n focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n }\r\n }, [manageMyProduct]);\r\n\r\n useEffect(() => {\r\n if (apiStatus.submit) {\r\n focusDiv.current.focus();\r\n document.body.scrollTop = 0;\r\n }\r\n }, [apiStatus]);\r\n const showMessage = () => {\r\n let successMsg = props.fields.SucessMessage.value;\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n return [\r\n manageMyProduct?.editCardDetailsEnabled ? (\r\n \r\n
\r\n \r\n
\r\n {successMsg}
\r\n \r\n
\r\n {props.fields.successDescription.value}
\r\n{nickName}
\r\n\r\n \r\n window.print()} icon={printIcon} tabIndex=\"0\">\r\n {props.fields.PrintText.value}\r\n \r\n
\r\n \r\n \r\n {t('StepperChangeSRText')}\r\n \r\n
\r\n ) : null,\r\n loading ? \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {!apiStatus.submit ? (\r\n \r\n
\r\n ) : (\r\n showMessage()\r\n )}\r\n \r\n {\r\n const errors = {};\r\n if (!values.NickName) {\r\n errors.NickName = props.fields.ErrorMessage1.value;\r\n } else if (!NICKNAME_REGEX.test(values.NickName)) {\r\n errors.NickName = props.fields.ErrorMessage2.value;\r\n } else if (checkIsPresto()) {\r\n let checkPrestDuplicate = prestoCards.find(\r\n (el) => el.nickName === values.NickName\r\n );\r\n if (checkPrestDuplicate) {\r\n errors.NickName = props.fields.ErrorMessage3.value;\r\n }\r\n } else if (!checkIsPresto()) {\r\n let checkContactlessDuplicate = contactlessCards.find(\r\n (el) => el.nickName === values.NickName\r\n );\r\n if (checkContactlessDuplicate) {\r\n errors.NickName = props.fields.ErrorMessage3.value;\r\n }\r\n }\r\n if (Object.prototype.hasOwnProperty.call(errors, 'NickName')) {\r\n setCheckError(true);\r\n } else {\r\n setCheckError(false);\r\n }\r\n return errors;\r\n }}\r\n onSubmit={(values) => updateNickName(values.NickName)}\r\n >\r\n {({ errors, touched, handleSubmit, handleChange }) => {\r\n return (\r\n \r\n );\r\n }}\r\n \r\n {checkIsPresto() ? (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {props.fields.CardIdLabel.value}\r\n {`${checkIsPresto() ? ` ` : ` ${fareMedia.type.toUpperCase()} `}`}\r\n {checkIsPresto() ? fareMedia?.visibleId : fareMedia?.mediaId}\r\n
\r\n\r\n
\r\n {fareMedia?.nickName}
\r\n\r\n
\r\n ) : null}\r\n \r\n {\r\n setIsPrimary(!isPrimary);\r\n }}\r\n checked={isPrimary}\r\n >\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n 0 &&\r\n options\r\n .filter((e) => {\r\n return e.value === managePersonalInfo?.userPersonalInfo?.Address?.Area?.Id;\r\n })\r\n .map((val) => {\r\n return val.value;\r\n })[0],\r\n Country: Countries[0].value,\r\n PostalCode: managePersonalInfo?.userPersonalInfo?.Address?.PostalCode,\r\n PrimaryPhoneNo: managePersonalInfo?.userPersonalInfo?.PhoneNumber,\r\n SecondaryPhoneNo: managePersonalInfo?.userPersonalInfo?.PhoneNumber2,\r\n }}\r\n validateOnChange={false}\r\n validationSchema={Yup.object().shape({\r\n FirstName: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.FnameError.value)\r\n .max(25, props.fields.FirstnameValidate.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,25}$/, props.fields.FirstnameValidate.value),\r\n LastName: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.LnameError.value)\r\n .max(25, props.fields.LastNameValidate.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,25}$/, props.fields.LastNameValidate.value),\r\n StreetAdress: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.StreetError.value)\r\n .max(50, props.fields.StreetAdressValidate.value)\r\n .matches(\r\n /^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,50}$/,\r\n props.fields.StreetAdressValidate.value\r\n ),\r\n AptSuiteBuilding: Yup.string()\r\n .transform((value) => value.trim())\r\n .max(50, props.fields.AptsuitebuildingValidate.value)\r\n .matches(\r\n /^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{0,50}$/,\r\n props.fields.AptsuitebuildingValidate.value\r\n ),\r\n City: Yup.string()\r\n .transform((value) => value.trim())\r\n .required(props.fields.CityError.value)\r\n .max(50, props.fields.cityValidate.value)\r\n .matches(/^[a-zA-Z0-9àâäæèéêëîïôœùûüÿçÀÂÄÆÈÉÊËÎÏÔŒÙÛÜŸÇ ,.'-]{1,50}$/, props.fields.cityValidate.value),\r\n PostalCode: Yup.string()\r\n .required(props.fields.postalError.value)\r\n .matches(\r\n /^[ABCEGHJ-NPRSTVXY][0-9][ABCEGHJ-NPRSTV-Z]\\s?[0-9][ABCEGHJ-NPRSTV-Z][0-9]$/,\r\n props.fields.PostalCodeerror.value\r\n ),\r\n Province: Yup.string().required(props.fields.provinceValidate.value),\r\n PrimaryPhoneNo: Yup.string()\r\n .required(props.fields.Primaryphonerror.value)\r\n .matches(\r\n /^\\(?([0-9]{3})\\)?[\\s-●]?([0-9]{3})[\\s-●]?([0-9]{4})$/,\r\n props.fields.primaryphonedigiterror.value\r\n ),\r\n SecondaryPhoneNo: Yup.string().matches(\r\n /^\\(?([0-9]{3})\\)?[\\s-●]?([0-9]{3})[\\s-●]?([0-9]{4})$/,\r\n props.fields.secondaryphonenoerrorValidate.value\r\n ),\r\n })}\r\n onSubmit={(values) => {\r\n let payload = {\r\n CustomerId: user?.customerId,\r\n FirstName: values.FirstName,\r\n LastName: values.LastName,\r\n StreetAddress: values.StreetAdress,\r\n Apartment: values.AptSuiteBuilding,\r\n AreaId: values.Province,\r\n AreaName: options\r\n .filter((e) => {\r\n return e.value === values.Province;\r\n })\r\n .map((val) => {\r\n return val.label;\r\n })[0],\r\n AreaCode: values.Province,\r\n CountryId: 'CAN',\r\n City: values.City,\r\n PostalCode: values.PostalCode,\r\n Province: values.Province,\r\n CountryName: 'Canada',\r\n PrimaryPhone: values.PrimaryPhoneNo,\r\n SecondaryPhone: values.SecondaryPhoneNo,\r\n TraxOptInOut: emailChecked ? 'on' : 'off',\r\n MarktOptInOut: contentchecked ? 'on' : 'off',\r\n Email: user?.email,\r\n };\r\n setIsLoading(true);\r\n api\r\n .updatePersonalData(payload)\r\n .then((response) => {\r\n //console.log(response);\r\n if (response?.data?.Success) {\r\n dispatch(updatePersonalInfo({\r\n newUpdatePersonalInfo: response?.data?.UpdatedPersonalData\r\n }));\r\n dispatch(setFirstNamePersonalInfo(response.data.UpdatedPersonalData.Name.FirstName));\r\n dispatch(updatePersonalInfo({\r\n firstName: response?.data?.UpdatedPersonalData?.Name?.FirstName,\r\n lastName: response?.data?.UpdatedPersonalData?.Name?.LastName,\r\n phoneNumber: response?.data?.UpdatedPersonalData?.PhoneNumber,\r\n currentShippingDetails: response?.data?.UpdatedPersonalData?.Address\r\n }));\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: true },\r\n })\r\n );\r\n setIsLoading(false);\r\n } else {\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: false },\r\n })\r\n );\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch((err) => {\r\n //console.log(err);\r\n dispatch(\r\n setUserPersonalInfo({\r\n updatePersonalInfoEnabled: false,\r\n userPersonalInfo: {},\r\n submittedInfo: { submit: true, success: false },\r\n })\r\n );\r\n setIsLoading(false);\r\n });\r\n }}\r\n >\r\n {({ values, errors, touched, handleSubmit, handleChange }) => {\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 const ErrorMessage = ({ title, titleA11y, message, messageA11y }) => {\r\n return (\r\n {props.fields.SucessTitle.value}
\r\n\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n {children ? children : {message}
}\r\n\r\n {authenticated || anonymous ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n
\r\n );\r\n };\r\n if (responseMode === INVALID_EMAIL_VERIFICATION) {\r\n return (\r\n {props.fields.VerificationTitle.value}
\r\n\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n {message}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default VerifyEmailLink;","import React, { useEffect, useState } from 'react';\r\n\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport { isFrench } from '../../services/utils';\r\nimport { fetchAvailableSettings } from '../../redux/user/actions';\r\n\r\nconst VirtualAssistant = (props) => {\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n const dispatch = useDispatch();\r\n\r\n const configKeys = useSelector((state) => state.settings.configKeys);\r\n\r\n const baseUrl =\r\n configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'VirtualAssistant.BaseUrl')\r\n .map((config) => config.setting);\r\n\r\n const lookupEndpointSettings =\r\n configKeys &&\r\n configKeys\r\n .filter((item) => item.key === 'VirtualAssistant.LookupEndpoint')\r\n .map((config) => config.setting);\r\n\r\n const langCode = isFrench() ? 'fr' : '';\r\n const lookupEndpoint = `${baseUrl}${lookupEndpointSettings}`;\r\n const lookupEndpointWithLangCode = `${lookupEndpoint}${langCode}`;\r\n\r\n useEffect(() => {\r\n if (\r\n props.fields.enableWebChat.value &&\r\n typeof window !== 'undefined' &&\r\n configKeys?.length > 1\r\n ) {\r\n const element = document.getElementById('cv_va_script');\r\n if (element === null) {\r\n const script = document.createElement('script');\r\n script.id = 'cv_va_script';\r\n script.src = `${baseUrl}cv-va.js`;\r\n script.async = true;\r\n document.body.appendChild(script);\r\n window.cvVASettings = {\r\n lookup: 'remote',\r\n lookupEndpoint: lookupEndpointWithLangCode,\r\n };\r\n }\r\n setIsLoaded(true);\r\n }\r\n }, [configKeys]);\r\n\r\n useEffect(() => {\r\n if (configKeys?.length <= 1) {\r\n fetchAvailableSettings(dispatch);\r\n }\r\n\r\n var timeout = 0,\r\n poll = window.setInterval(function () {\r\n const element = document.getElementById('btncvwebchat');\r\n if (element !== null) {\r\n element.addEventListener('click', function () {\r\n window.CVlaunchVA();\r\n });\r\n window.clearInterval(poll);\r\n } else if (timeout++ > 50) {\r\n window.clearInterval(poll);\r\n }\r\n }, 50);\r\n }, []);\r\n\r\n return isLoaded ? : null;\r\n};\r\n\r\nexport default VirtualAssistant;\r\n","/* eslint-disable */\n// Do not edit this file, it is auto-generated at build time!\n// See scripts/generate-component-factory.js to modify the generation of this file.\nimport AccordianItemwithImage from '../components/AccordianItemwithImage';\nimport AccordianItemwithImageIcon from '../components/AccordianItemwithImageIcon';\nimport AccordianSection from '../components/AccordianSection';\nimport Accordion from '../components/Accordion';\nimport AccountDeletion from '../components/AccountDeletion';\nimport AccountSecurity from '../components/AccountSecurity';\nimport ActivateCard from '../components/ActivateCard';\nimport AddCard from '../components/AddCard';\nimport AddContactlessCard from '../components/AddContactlessCard';\nimport AddFunds from '../components/AddFunds';\nimport AddPrestoCard from '../components/AddPrestoCard';\nimport AnchorComponent from '../components/AnchorComponent';\nimport Autoload from '../components/Autoload';\nimport B2CAccountCreation from '../components/B2CAccountCreation';\nimport B2CError from '../components/B2CError';\nimport B2CPersonalInformation from '../components/B2CPersonalInformation';\nimport BalanceBlock from '../components/BalanceBlock';\nimport CancelAutoload from '../components/CancelAutoload';\nimport CancelAutorenew from '../components/CancelAutorenew';\nimport Card from '../components/Card';\nimport CardItem from '../components/CardItem';\nimport Carousel from '../components/Carousel';\nimport CarouselSlide from '../components/CarouselSlide';\nimport CaslPopUp from '../components/CaslPopUp';\nimport ChangePIN from '../components/ChangePIN';\nimport Checkout from '../components/Checkout';\nimport ContactlessAccountCardImage from '../components/ContactlessAccountCardImage';\nimport ContactlessFooter from '../components/ContactlessFooter';\nimport ContactlessLeftNavigationFAQ from '../components/ContactlessLeftNavigationFAQ';\nimport ContactLessSignInOverlay from '../components/ContactLessSignInOverlay';\nimport ContactlessTopNavigation from '../components/ContactlessTopNavigation';\nimport ContactlessTransactionHistory from '../components/ContactlessTransactionHistory';\nimport ContactlessUnpaidFare from '../components/ContactlessUnpaidFare';\nimport ContactUsForm from '../components/ContactUsForm';\nimport ContentBlock from '../components/ContentBlock';\nimport ContentPageLayout from '../components/ContentPageLayout';\nimport Copyright from '../components/Copyright';\nimport CreateAccount from '../components/CreateAccount';\nimport CSOLocator from '../components/CSOLocator';\nimport CTAButton from '../components/CTAButton';\nimport Dashboard from '../components/Dashboard';\nimport DeactivateCard from '../components/DeactivateCard';\nimport DeleteAccount from '../components/DeleteAccount';\nimport DeleteAccountSuccess from '../components/DeleteAccountSuccess';\nimport DigitalDistributionServices from '../components/DigitalDistributionServices';\nimport Divider from '../components/Divider';\nimport EmailVerification from '../components/EmailVerification';\nimport ErrorPage from '../components/ErrorPage';\nimport FeaturesBlock from '../components/FeaturesBlock';\nimport Footer from '../components/Footer';\nimport ForgotPassword from '../components/ForgotPassword';\nimport ForgotUsername from '../components/ForgotUsername';\nimport FourthcolumnLayout from '../components/FourthcolumnLayout';\nimport FullScreenLayout from '../components/FullScreenLayout';\nimport FullWidthLayout from '../components/FullWidthLayout';\nimport GlobalNotification from '../components/GlobalNotification';\nimport godefaulttrip from '../components/godefaulttrip';\nimport GoogleMap from '../components/GoogleMap';\nimport GuestSignin from '../components/GuestSignin';\nimport Heading from '../components/Heading';\nimport HeroBannerWithBackground from '../components/HeroBannerWithBackground';\nimport HeroBannerWithButton from '../components/HeroBannerWithButton';\nimport ImageCTALinkable from '../components/ImageCTALinkable';\nimport ImageParagraphwithButton from '../components/ImageParagraphwithButton';\nimport ImageWithParagraph from '../components/ImageWithParagraph';\nimport ImageWithProcessStep from '../components/ImageWithProcessStep';\nimport ImageWithWalletInfo from '../components/ImageWithWalletInfo';\nimport LeftNavigation from '../components/LeftNavigation';\nimport LoadMyCard from '../components/LoadMyCard';\nimport LoginAndSecurityMessage from '../components/LoginAndSecurityMessage';\nimport LoyaltySummary from '../components/LoyaltySummary';\nimport MainHeroBanner from '../components/MainHeroBanner';\nimport ManageAutoload from '../components/ManageAutoload';\nimport ManageAutoRenew from '../components/ManageAutoRenew';\nimport ManageMyProducts from '../components/ManageMyProducts';\nimport ModifyAutoload from '../components/ModifyAutoload';\nimport MyProductsOverview from '../components/MyProductsOverview';\nimport MyProductsPage from '../components/MyProductsPage';\nimport NotificationBanner from '../components/NotificationBanner';\nimport Notifications from '../components/Notifications';\nimport OrderaCard from '../components/OrderaCard';\nimport PageHeading from '../components/PageHeading';\nimport ParagraphContent from '../components/ParagraphContent';\nimport PasswordChange from '../components/PasswordChange';\nimport PersonalInformation from '../components/PersonalInformation';\nimport PrestocardSignin from '../components/PrestocardSignin';\nimport RedeemVoucher from '../components/RedeemVoucher';\nimport RedeemVoucherStepperBlock from '../components/RedeemVoucherStepperBlock';\nimport Redirection from '../components/Redirection';\nimport RegisteredAccount from '../components/RegisteredAccount';\nimport ReportLostCard from '../components/ReportLostCard';\nimport SavedPaymentMethod from '../components/SavedPaymentMethod';\nimport SearchResults from '../components/SearchResults';\nimport SecurityAlerts from '../components/SecurityAlerts';\nimport SetAutoload from '../components/SetAutoload';\nimport SetAutorenew from '../components/SetAutorenew';\nimport SideNavigation from '../components/SideNavigation';\nimport Signin from '../components/Signin';\nimport SigninSidebar from '../components/SigninSidebar';\nimport SigninSuccess from '../components/SigninSuccess';\nimport Sitemap from '../components/Sitemap';\nimport SogrButton from '../components/SogrButton';\nimport SystemStatusMessage from '../components/SystemStatusMessage';\nimport TargetedMessage from '../components/TargetedMessage';\nimport TermsAndConditions from '../components/TermsAndConditions';\nimport ThirdcolumnLayout from '../components/ThirdcolumnLayout';\nimport ThumbnailCollection from '../components/ThumbnailCollection';\nimport ThumbnailCollections from '../components/ThumbnailCollections';\nimport TopNavigation from '../components/TopNavigation';\nimport TopNavigationAnonymous from '../components/TopNavigationAnonymous';\nimport TopNavigationAuthenticated from '../components/TopNavigationAuthenticated';\nimport TopNavigationUnAuthenticated from '../components/TopNavigationUnAuthenticated';\nimport TransactionHistory from '../components/TransactionHistory';\nimport TransactionHistoryContactless from '../components/TransactionHistoryContactless';\nimport TransactionHistoryPresto from '../components/TransactionHistoryPresto';\nimport TransitAgencyList from '../components/TransitAgencyList';\nimport TransitPass from '../components/TransitPass';\nimport TransitUsageReport from '../components/TransitUsageReport';\nimport TwoColumnImagesContent from '../components/TwoColumnImagesContent';\nimport TwocolumnLayout from '../components/TwocolumnLayout';\nimport TwoStepVerification from '../components/TwoStepVerification';\nimport UnlinkCard from '../components/UnlinkCard';\nimport UnpaidFares from '../components/UnpaidFares';\nimport UpdateCardNickName from '../components/UpdateCardNickName';\nimport UpdatePersonalInformation from '../components/UpdatePersonalInformation';\nimport VerifyEmailLink from '../components/VerifyEmailLink';\nimport VirtualAssistant from '../components/VirtualAssistant';\n\nconst components = new Map();\ncomponents.set('AccordianItemwithImage', AccordianItemwithImage);\ncomponents.set('AccordianItemwithImageIcon', AccordianItemwithImageIcon);\ncomponents.set('AccordianSection', AccordianSection);\ncomponents.set('Accordion', Accordion);\ncomponents.set('AccountDeletion', AccountDeletion);\ncomponents.set('AccountSecurity', AccountSecurity);\ncomponents.set('ActivateCard', ActivateCard);\ncomponents.set('AddCard', AddCard);\ncomponents.set('AddContactlessCard', AddContactlessCard);\ncomponents.set('AddFunds', AddFunds);\ncomponents.set('AddPrestoCard', AddPrestoCard);\ncomponents.set('AnchorComponent', AnchorComponent);\ncomponents.set('Autoload', Autoload);\ncomponents.set('B2CAccountCreation', B2CAccountCreation);\ncomponents.set('B2CError', B2CError);\ncomponents.set('B2CPersonalInformation', B2CPersonalInformation);\ncomponents.set('BalanceBlock', BalanceBlock);\ncomponents.set('CancelAutoload', CancelAutoload);\ncomponents.set('CancelAutorenew', CancelAutorenew);\ncomponents.set('Card', Card);\ncomponents.set('CardItem', CardItem);\ncomponents.set('Carousel', Carousel);\ncomponents.set('CarouselSlide', CarouselSlide);\ncomponents.set('CaslPopUp', CaslPopUp);\ncomponents.set('ChangePIN', ChangePIN);\ncomponents.set('Checkout', Checkout);\ncomponents.set('ContactlessAccountCardImage', ContactlessAccountCardImage);\ncomponents.set('ContactlessFooter', ContactlessFooter);\ncomponents.set('ContactlessLeftNavigationFAQ', ContactlessLeftNavigationFAQ);\ncomponents.set('ContactLessSignInOverlay', ContactLessSignInOverlay);\ncomponents.set('ContactlessTopNavigation', ContactlessTopNavigation);\ncomponents.set('ContactlessTransactionHistory', ContactlessTransactionHistory);\ncomponents.set('ContactlessUnpaidFare', ContactlessUnpaidFare);\ncomponents.set('ContactUsForm', ContactUsForm);\ncomponents.set('ContentBlock', ContentBlock);\ncomponents.set('ContentPageLayout', ContentPageLayout);\ncomponents.set('Copyright', Copyright);\ncomponents.set('CreateAccount', CreateAccount);\ncomponents.set('CSOLocator', CSOLocator);\ncomponents.set('CTAButton', CTAButton);\ncomponents.set('Dashboard', Dashboard);\ncomponents.set('DeactivateCard', DeactivateCard);\ncomponents.set('DeleteAccount', DeleteAccount);\ncomponents.set('DeleteAccountSuccess', DeleteAccountSuccess);\ncomponents.set('DigitalDistributionServices', DigitalDistributionServices);\ncomponents.set('Divider', Divider);\ncomponents.set('EmailVerification', EmailVerification);\ncomponents.set('ErrorPage', ErrorPage);\ncomponents.set('FeaturesBlock', FeaturesBlock);\ncomponents.set('Footer', Footer);\ncomponents.set('ForgotPassword', ForgotPassword);\ncomponents.set('ForgotUsername', ForgotUsername);\ncomponents.set('FourthcolumnLayout', FourthcolumnLayout);\ncomponents.set('FullScreenLayout', FullScreenLayout);\ncomponents.set('FullWidthLayout', FullWidthLayout);\ncomponents.set('GlobalNotification', GlobalNotification);\ncomponents.set('godefaulttrip', godefaulttrip);\ncomponents.set('GoogleMap', GoogleMap);\ncomponents.set('GuestSignin', GuestSignin);\ncomponents.set('Heading', Heading);\ncomponents.set('HeroBannerWithBackground', HeroBannerWithBackground);\ncomponents.set('HeroBannerWithButton', HeroBannerWithButton);\ncomponents.set('ImageCTALinkable', ImageCTALinkable);\ncomponents.set('ImageParagraphwithButton', ImageParagraphwithButton);\ncomponents.set('ImageWithParagraph', ImageWithParagraph);\ncomponents.set('ImageWithProcessStep', ImageWithProcessStep);\ncomponents.set('ImageWithWalletInfo', ImageWithWalletInfo);\ncomponents.set('LeftNavigation', LeftNavigation);\ncomponents.set('LoadMyCard', LoadMyCard);\ncomponents.set('LoginAndSecurityMessage', LoginAndSecurityMessage);\ncomponents.set('LoyaltySummary', LoyaltySummary);\ncomponents.set('MainHeroBanner', MainHeroBanner);\ncomponents.set('ManageAutoload', ManageAutoload);\ncomponents.set('ManageAutoRenew', ManageAutoRenew);\ncomponents.set('ManageMyProducts', ManageMyProducts);\ncomponents.set('ModifyAutoload', ModifyAutoload);\ncomponents.set('MyProductsOverview', MyProductsOverview);\ncomponents.set('MyProductsPage', MyProductsPage);\ncomponents.set('NotificationBanner', NotificationBanner);\ncomponents.set('Notifications', Notifications);\ncomponents.set('OrderaCard', OrderaCard);\ncomponents.set('PageHeading', PageHeading);\ncomponents.set('ParagraphContent', ParagraphContent);\ncomponents.set('PasswordChange', PasswordChange);\ncomponents.set('PersonalInformation', PersonalInformation);\ncomponents.set('PrestocardSignin', PrestocardSignin);\ncomponents.set('RedeemVoucher', RedeemVoucher);\ncomponents.set('RedeemVoucherStepperBlock', RedeemVoucherStepperBlock);\ncomponents.set('Redirection', Redirection);\ncomponents.set('RegisteredAccount', RegisteredAccount);\ncomponents.set('ReportLostCard', ReportLostCard);\ncomponents.set('SavedPaymentMethod', SavedPaymentMethod);\ncomponents.set('SearchResults', SearchResults);\ncomponents.set('SecurityAlerts', SecurityAlerts);\ncomponents.set('SetAutoload', SetAutoload);\ncomponents.set('SetAutorenew', SetAutorenew);\ncomponents.set('SideNavigation', SideNavigation);\ncomponents.set('Signin', Signin);\ncomponents.set('SigninSidebar', SigninSidebar);\ncomponents.set('SigninSuccess', SigninSuccess);\ncomponents.set('Sitemap', Sitemap);\ncomponents.set('SogrButton', SogrButton);\ncomponents.set('SystemStatusMessage', SystemStatusMessage);\ncomponents.set('TargetedMessage', TargetedMessage);\ncomponents.set('TermsAndConditions', TermsAndConditions);\ncomponents.set('ThirdcolumnLayout', ThirdcolumnLayout);\ncomponents.set('ThumbnailCollection', ThumbnailCollection);\ncomponents.set('ThumbnailCollections', ThumbnailCollections);\ncomponents.set('TopNavigation', TopNavigation);\ncomponents.set('TopNavigationAnonymous', TopNavigationAnonymous);\ncomponents.set('TopNavigationAuthenticated', TopNavigationAuthenticated);\ncomponents.set('TopNavigationUnAuthenticated', TopNavigationUnAuthenticated);\ncomponents.set('TransactionHistory', TransactionHistory);\ncomponents.set('TransactionHistoryContactless', TransactionHistoryContactless);\ncomponents.set('TransactionHistoryPresto', TransactionHistoryPresto);\ncomponents.set('TransitAgencyList', TransitAgencyList);\ncomponents.set('TransitPass', TransitPass);\ncomponents.set('TransitUsageReport', TransitUsageReport);\ncomponents.set('TwoColumnImagesContent', TwoColumnImagesContent);\ncomponents.set('TwocolumnLayout', TwocolumnLayout);\ncomponents.set('TwoStepVerification', TwoStepVerification);\ncomponents.set('UnlinkCard', UnlinkCard);\ncomponents.set('UnpaidFares', UnpaidFares);\ncomponents.set('UpdateCardNickName', UpdateCardNickName);\ncomponents.set('UpdatePersonalInformation', UpdatePersonalInformation);\ncomponents.set('VerifyEmailLink', VerifyEmailLink);\ncomponents.set('VirtualAssistant', VirtualAssistant);\n\nexport default function componentFactory(componentName) {\n return components.get(componentName);\n};\n","import React, { useEffect, useState } from 'react';\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Error, Success } from '../../molecules';\r\nimport api from '../../services/api';\r\nimport { getQueryParams, localstorageService } from '../../services/utils';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport InComplete from '../../molecules/InComplete';\r\nimport './style.scss';\r\nimport localStorageKeys from '../../constants/localStorageKeys';\r\nimport { setB2cClaimsResponse, updateUserInfo } from '../../redux/user/actions';\r\nimport handleServerError from '../../services/handleServerError';\r\nimport b2cQueryParams from '../../constants/b2cQueryParams';\r\nimport useMediaWidth from '../../hooks/useMediaWidth';\r\n\r\nexport default function LoginAndSecurityMessage(props) {\r\n const divid = props.fields && props.fields.ID?.value ? props.fields.ID?.value : 'rlc-card';\r\n const idname = divid === 'rlc' || divid === 'rlc-card' ? 'rlc-card' : props.fields.ID?.value;\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const { search } = useLocation();\r\n const [error, setError] = useState('');\r\n const [showMessage, setShowMessage] = useState('');\r\n const isMobile = useMediaWidth();\r\n const loginAndSecurityProps = useSelector((reduxState) => reduxState.user.loginAndSecurity);\r\n\r\n const showPasswordChangeMessage = () => {\r\n return showMessage === b2cQueryParams.Success\r\n ? showSuccessMessage(\r\n 'password-success-block',\r\n loginAndSecurityProps?.SuccessPwdchange,\r\n loginAndSecurityProps?.SuccessPwdchange\r\n )\r\n : loginAndSecurityProps?.passwordUpdateErrCode === 'AFMS-DAX-FE-0001'\r\n ? showErrorMessage(\r\n 'password-error-block',\r\n loginAndSecurityProps?.FailurePwdChange,\r\n loginAndSecurityProps?.FailurePwdChangeA11y,\r\n loginAndSecurityProps?.FailurePwdChangeDescription1\r\n )\r\n : loginAndSecurityProps?.passwordUpdateErrCode === 'AFMS-DAX-FE-0008'\r\n ? showErrorMessage(\r\n 'password-error-block',\r\n loginAndSecurityProps?.FailurePwdChange,\r\n loginAndSecurityProps?.FailurePwdChangeA11y,\r\n loginAndSecurityProps?.FailurePwdChangeDescription\r\n )\r\n : showErrorMessage(\r\n 'password-error-block',\r\n loginAndSecurityProps?.FailurePwdChange,\r\n loginAndSecurityProps?.FailurePwdChangeA11y,\r\n loginAndSecurityProps?.WrongPwdDescription\r\n );\r\n };\r\n const showSuccessMessage = (className = '', title = '') => {\r\n return (\r\n {props?.fields?.VerifyEmailSentLabel.value}
\r\n{userInfo?.email}
\r\n{props?.fields?.VerifyEmailNote.value}
\r\n\r\n
\r\n );\r\n };\r\n const showErrorMessage = (\r\n className = '',\r\n title = { value: '' },\r\n titleA11y = { value: '' },\r\n text = ''\r\n ) => {\r\n return (\r\n \r\n
\r\n );\r\n };\r\n const showInCompleteMessage = (className = '', title = '', text = '') => {\r\n return (\r\n \r\n
\r\n );\r\n };\r\n const handleShowMessage = () => {\r\n if (showMessage === b2cQueryParams.Success) {\r\n return showPasswordChangeMessage();\r\n } else if (showMessage === b2cQueryParams.Enroll) {\r\n return showSuccessMessage(\r\n 'mfa-success-block',\r\n loginAndSecurityProps?.SetupEnrollSuccessMsg,\r\n loginAndSecurityProps?.SetupEnrollSuccessMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.Update) {\r\n return showSuccessMessage(\r\n 'mfa-success-block',\r\n loginAndSecurityProps?.SetupUpdateSuccessMsg,\r\n loginAndSecurityProps?.SetupUpdateSuccessMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.Disable) {\r\n return showSuccessMessage(\r\n 'mfa-success-block',\r\n loginAndSecurityProps?.SetupDisableSuccessMsg,\r\n loginAndSecurityProps?.SetupDisableSuccessMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.EnrollCancel) {\r\n return showInCompleteMessage(\r\n 'mfa-incomplete-block',\r\n loginAndSecurityProps?.SetupInfoMsg,\r\n loginAndSecurityProps?.SetupInfoMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.UpdateCancel) {\r\n return showInCompleteMessage(\r\n 'mfa-incomplete-block',\r\n loginAndSecurityProps?.SetupInfoUpdateMsg,\r\n loginAndSecurityProps?.SetupInfoUpdateMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.DisableCancel) {\r\n return showInCompleteMessage(\r\n 'mfa-incomplete-block',\r\n loginAndSecurityProps?.SetupInfoDisableMsg,\r\n loginAndSecurityProps?.SetupInfoDisableMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.IsMaxTryExceedsOnEnroll) {\r\n return showErrorMessage(\r\n 'mfa-error-block',\r\n loginAndSecurityProps?.SetupMaxEntryOnEnrollErrorMsg,\r\n loginAndSecurityProps?.SetupMaxEntryOnEnrollErrorMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.IsMaxTryExceedsOnUpdate) {\r\n return showErrorMessage(\r\n 'mfa-error-block',\r\n loginAndSecurityProps?.SetupMaxEntryOnUpdateErrorMsg,\r\n loginAndSecurityProps?.SetupMaxEntryOnUpdateErrorMsg\r\n );\r\n } else if (showMessage === b2cQueryParams.IsMaxTryExceedsOnDisable) {\r\n return showErrorMessage(\r\n 'mfa-error-block',\r\n loginAndSecurityProps?.SetupMaxEntryOnDisableErrorMsg,\r\n loginAndSecurityProps?.SetupMaxEntryOnDisableErrorMsg\r\n );\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n\r\n if (showMessage !== '' && !isMobile) {\r\n\r\n const onPageLoad = () => {\r\n\r\n const intervalId = setInterval(() => {\r\n\r\n const classNames = [\r\n\r\n 'password-error-block',\r\n\r\n 'password-success-block',\r\n\r\n 'mfa-success-block',\r\n\r\n 'mfa-error-block',\r\n\r\n 'mfa-incomplete-block'\r\n\r\n ];\r\n\r\n const roleRemoveElement = classNames.map(className => document.querySelector(`.${className} div div div`))\r\n\r\n .find(element => element !== null);\r\n\r\n const passwordWrapper = classNames.map(className => document.querySelector(`.${className} div`))\r\n\r\n .find(element => element !== null);\r\n\r\n if (passwordWrapper) {\r\n\r\n passwordWrapper.setAttribute('aria-hidden', 'true');\r\n\r\n passwordWrapper.setAttribute('tabindex', '0');\r\n\r\n const clickEvent = new MouseEvent('click', {\r\n\r\n bubbles: true,\r\n\r\n cancelable: true,\r\n\r\n view: window,\r\n\r\n });\r\n\r\n passwordWrapper.dispatchEvent(clickEvent);\r\n\r\n passwordWrapper.focus();\r\n\r\n passwordWrapper.removeAttribute('aria-hidden');\r\n\r\n if (roleRemoveElement) {\r\n\r\n roleRemoveElement.removeAttribute('role');\r\n\r\n }\r\n\r\n clearInterval(intervalId);\r\n\r\n }\r\n\r\n }, 100);\r\n\r\n return () => clearInterval(intervalId);\r\n\r\n };\r\n\r\n if (document.readyState === 'complete') {\r\n\r\n onPageLoad();\r\n\r\n } else {\r\n\r\n window.addEventListener('load', onPageLoad);\r\n\r\n }\r\n\r\n return () => {\r\n\r\n window.removeEventListener('load', onPageLoad);\r\n\r\n };\r\n\r\n }\r\n\r\n }, [showMessage]);\r\n\r\n useEffect(() => {\r\n if (\r\n showMessage === b2cQueryParams.Enroll ||\r\n showMessage === b2cQueryParams.Disable ||\r\n showMessage === b2cQueryParams.Update\r\n ) {\r\n api\r\n .getClaims()\r\n .then((res) => {\r\n if (res) {\r\n localstorageService().setItem(localStorageKeys.accessToken, res.data.Data.Access_token);\r\n localstorageService().setItem(\r\n localStorageKeys.refreshToken,\r\n res.data.Data.Access_token\r\n );\r\n localstorageService().setItem(\r\n localStorageKeys.accessTokenLifetime,\r\n res.data.Data.Expires_in\r\n );\r\n dispatch(\r\n setB2cClaimsResponse({\r\n IsMfAEnabled: String(res?.data?.Data?.IsMfAEnabled).toLowerCase() === 'true',\r\n MFANotificationLastViewedDate: res?.data?.Data?.MFANotificationLastViewedDate,\r\n PasswordNotificationLastViewedDate:\r\n res?.data?.Data?.PasswordNotificationLastViewedDate,\r\n IsFirstTimeLogin:\r\n String(res?.data?.Data?.IsFirstTimeLogin).toLowerCase() === 'true',\r\n PhoneNumber: res?.data?.Data?.PhoneNumber,\r\n })\r\n );\r\n }\r\n })\r\n .catch((res) => {\r\n handleServerError(undefined, setError)(res);\r\n });\r\n }\r\n }, [showMessage]);\r\n useEffect(() => {\r\n const queryParams1 = new URLSearchParams(search);\r\n if (showMessage === '' && queryParams1.has('Update')) {\r\n setShowMessage('Update');\r\n queryParams1.delete('Update');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('Disable')) {\r\n setShowMessage('Disable');\r\n queryParams1.delete('Disable');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('Enroll')) {\r\n setShowMessage('Enroll');\r\n queryParams1.delete('Enroll');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('Success')) {\r\n setShowMessage('Success');\r\n queryParams1.delete('Success');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('EnrollCancel')) {\r\n setShowMessage('EnrollCancel');\r\n queryParams1.delete('EnrollCancel');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('UpdateCancel')) {\r\n setShowMessage('UpdateCancel');\r\n queryParams1.delete('UpdateCancel');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('DisableCancel')) {\r\n setShowMessage('DisableCancel');\r\n queryParams1.delete('DisableCancel');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('IsMaxTryExceedsOnEnroll')) {\r\n setShowMessage('IsMaxTryExceedsOnEnroll');\r\n queryParams1.delete('IsMaxTryExceedsOnEnroll');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('IsMaxTryExceedsOnUpdate')) {\r\n setShowMessage('IsMaxTryExceedsOnUpdate');\r\n queryParams1.delete('IsMaxTryExceedsOnUpdate');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n } else if (showMessage === '' && queryParams1.has('IsMaxTryExceedsOnDisable')) {\r\n setShowMessage('IsMaxTryExceedsOnDisable');\r\n queryParams1.delete('IsMaxTryExceedsOnDisable');\r\n history.replace({\r\n search: queryParams1.toString(),\r\n });\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import axios from 'axios';\r\n\r\n/**\r\n * Implements a data fetcher using Axios - replace with your favorite\r\n * SSR-capable HTTP or fetch library if you like. See HttpJsonFetcher\r\n \r\n
\r\n {handleShowMessage()}
\r\n Page not found
\r\nThis page does not exist.
\r\n\r\n Site: {context.site && context.site.name}\r\n
\r\n Language: {context.language}\r\n
\r\n \r\n {i18n.t('Page not found')} \r\n \r\n
\r\n );\r\n }\r\n\r\n // Don't render anything if the route data or dictionary data is not fully loaded yet.\r\n // This is a good place for a \"Loading\" component, if one is needed.\r\n if (!routeData || this.languageIsChanging) {\r\n return null;\r\n }\r\n\r\n // Render the app's root structural layout\r\n return