Config - Cleared LocalStorage
;\n }\n}\n\nexport default WebAppConfig;\n","import React, {Fragment, createElement} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n KEY_ENTER,\r\n KEY_ESC,\r\n KEY_UP,\r\n KEY_DOWN,\r\n KEY_SPACEBAR,\r\n TRANSITION_OPENED,\r\n TRANSITION_IS_OPENING,\r\n TRANSITION_CLOSED,\r\n TRANSITION_IS_CLOSING,\r\n} from './config/constants';\r\nimport EmailValidator from 'email-validator';\r\n\r\nexport const withStatic = values => Component => Object.assign(Component, values);\r\n\r\nexport const withValidator = ({type}) => Component => {\r\n class withValidatorWrapper extends React.PureComponent {\r\n static propTypes = {\r\n onValidityChange: PropTypes.func,\r\n customIsValid: PropTypes.bool,\r\n customSetValidation: PropTypes.func,\r\n }\r\n static defaultProps = {\r\n customSetValidation: null,\r\n customIsValid: null,\r\n }\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isValid: props.customIsValid || true,\r\n };\r\n this.setValidation = this.setValidation.bind(this);\r\n this.validate = this.validate.bind(this);\r\n this.getIsValid = this.getIsValid.bind(this);\r\n this._comp = React.createRef();\r\n }\r\n validate(value) {\r\n if (type === 'email') {\r\n if (EmailValidator.validate(value)) {\r\n return this.setValidation(true);\r\n } else {\r\n return this.setValidation(false, { extra: 'FAILED_VALIDATION_EMAIL' });\r\n }\r\n }\r\n return this.setValidation(true);\r\n }\r\n setValidation(_isValid, { extra } = {}) {\r\n const {onValidityChange, customIsValid, customSetValidation} = this.props;\r\n const {isValid: stateIsValid} = this.state;\r\n let isValid, setValidationFunc;\r\n if (customSetValidation) {\r\n isValid = customIsValid;\r\n setValidationFunc = customSetValidation;\r\n } else {\r\n isValid = stateIsValid;\r\n setValidationFunc = (v, {extra, doneCallback} = {}) => {\r\n this.setState({\r\n isValid: v,\r\n extra,\r\n }, doneCallback);\r\n };\r\n }\r\n if (isValid === _isValid) return;\r\n setValidationFunc(_isValid, {extra, doneCallback: () => {\r\n onValidityChange && onValidityChange(_isValid, { extra });\r\n }});\r\n }\r\n getIsValid() {\r\n const {customSetValidation, customIsValid} = this.props;\r\n const {isValid: stateIsValid} = this.state;\r\n\r\n if (customSetValidation) {\r\n return customIsValid;\r\n } else {\r\n return stateIsValid;\r\n }\r\n }\r\n render() {\r\n const isValid = this.getIsValid();\r\n return (\r\n {message && (\r\n
\r\n);\r\n\r\nSpinnerBig.propTypes = {\r\n className: PropTypes.string,\r\n message: PropTypes.node,\r\n color: PropTypes.string,\r\n};\r\n\r\nexport const SpinnerSmall = ({className, color}) => (\r\n \r\n {message}\r\n
\r\n )}\r\n \r\n {message}\r\n
\r\n )}\r\n \r\n
\r\n ||\r\n \r\n
\r\n \r\n {label}\r\n
\r\n \r\n {message}\r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n);\r\n\r\nSpinner.propTypes = {\r\n message: PropTypes.node,\r\n};\r\n\r\nexport default Spinner;\r\n","export default __webpack_public_path__ + \"assets/icon-success.13de5de634.svg\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from '../../../css/TextInput.css';\nimport {compose} from '../../Util';\nimport {\n withValidator,\n withAutoFocus,\n withValue,\n withFocusState,\n withStatic,\n} from '../../Hoc.jsx';\nimport {SpinnerSmall} from '../Spinner';\nimport iconSuccess from '../../../assets/icon-success.svg';\nimport classNames from 'classnames/bind';\n\nconst cx = classNames.bind(style);\n\nconst STATUS_IDLE = 'idle';\nconst STATUS_DISABLED = 'disabled';\nconst STATUS_LOADING = 'loading';\nconst STATUS_SUCCESS = 'success';\nconst STATUS_ERROR = 'error';\n\nconst TYPE_TEXT = 'text';\nconst TYPE_EMAIL = 'email';\nconst TYPE_PASSWORD = 'password';\nconst TYPE_NUMBER = 'number';\n\nconst TextInput = React.forwardRef(({\n className,\n inputFieldClass,\n status,\n placeholder,\n value,\n message,\n focused,\n hover,\n prepend,\n append,\n setValue,\n setKeyDown,\n setFocus,\n setHover,\n onClick,\n validate,\n inputType,\n spinnerColor,\n onKeyDown,\n activeDescendant,\n ariaLabel,\n tabFocused,\n id,\n}, ref) => (\n \n {prepend && (\n \n {prepend}\n \n )}\n {status === STATUS_DISABLED ? (\n \n {value}\n \n ) : (\n {\n const value = e.target.value;\n setValue(value);\n if (validate) {\n validate(value);\n }\n }}\n onKeyDown={e => {\n setKeyDown(e.keyCode, e);\n }}\n onFocus={() => {\n setFocus(true);\n }}\n onBlur={() => {\n setFocus(false);\n }}\n autoComplete=\"off\"\n aria-owns=\"listbox\"\n aria-activedescendant={activeDescendant}\n aria-label={ariaLabel} />\n )}\n {status === STATUS_LOADING && (\n \n 
\n \n )}\n {append && (\n \n {append}\n \n )}\n
\n {message && status === STATUS_ERROR &&\n {message}}\n \n));\n\nTextInput.displayName = 'TextInput';\n\nTextInput.propTypes = {\n className: PropTypes.string,\n inputFieldClass: PropTypes.string,\n placeholder: PropTypes.string,\n status: PropTypes.oneOf([\n STATUS_IDLE,\n STATUS_DISABLED,\n STATUS_LOADING,\n STATUS_SUCCESS,\n STATUS_ERROR,\n ]),\n inputType: PropTypes.oneOf([\n TYPE_TEXT,\n TYPE_EMAIL,\n TYPE_PASSWORD,\n TYPE_NUMBER,\n ]),\n value: PropTypes.string,\n message: PropTypes.node,\n id: PropTypes.string,\n focused: PropTypes.bool,\n hover: PropTypes.bool,\n prepend: PropTypes.node,\n append: PropTypes.node,\n setValue: PropTypes.func,\n setKeyDown: PropTypes.func,\n setFocus: PropTypes.func,\n setHover: PropTypes.func,\n onClick: PropTypes.func,\n validate: PropTypes.func,\n spinnerColor: PropTypes.string,\n onKeyDown: PropTypes.func,\n activeDescendant: PropTypes.string,\n ariaLabel: PropTypes.string,\n tabFocused: PropTypes.bool,\n};\n\nTextInput.defaultProps = {\n status: STATUS_IDLE,\n inputType: TYPE_TEXT,\n value: '',\n focused: false,\n hover: false,\n setValue: () => null,\n setKeyDown: () => null,\n setFocus: () => null,\n setHover: () => null,\n onClick: () => null,\n};\n\nconst TextInputComposer = compose(\n withAutoFocus,\n withValue,\n withFocusState,\n withStatic({\n STATUS_IDLE,\n STATUS_DISABLED,\n STATUS_LOADING,\n STATUS_SUCCESS,\n STATUS_ERROR,\n TYPE_TEXT,\n TYPE_EMAIL,\n TYPE_PASSWORD,\n TYPE_NUMBER,\n }),\n);\n\nconst EmailInputComposer = compose(\n TextInputComposer,\n withValidator({type: TYPE_EMAIL}),\n withStatic({\n displayName: 'EmailInput',\n }),\n);\n\nexport const EmailInput = EmailInputComposer(TextInput);\n\nexport default TextInputComposer(TextInput);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames/bind';\nimport style from '../../../css/List.css';\n\nconst cx = classNames.bind(style);\n\nexport const ROW_TYPE_1_COL = '1col';\nexport const ROW_TYPE_2_COL = '2col';\nexport const ROW_SIZE_STANDARD = 'standard';\nexport const ROW_SIZE_LARGE = 'large';\n\nconst AbstractList = React.forwardRef(({\n className,\n size,\n type,\n keyDown,\n keyUp,\n onMouseOver,\n children,\n withPointer,\n activeDescendant,\n tabIndex,\n ariaLabel,\n ariaExpanded,\n ariaHidden,\n role,\n blur,\n}, ref) => (\n \r\n {(size === ROW_SIZE_LARGE) && rawData && rawData.logoUri && (\r\n
\r\n);\r\n\r\nListCell.propTypes = {\r\n title: PropTypes.node,\r\n data: PropTypes.node.isRequired,\r\n extra: PropTypes.node,\r\n size: PropTypes.oneOf([\r\n ROW_SIZE_STANDARD,\r\n ROW_SIZE_LARGE,\r\n ]),\r\n className: PropTypes.string,\r\n dropdown: PropTypes.bool,\r\n rawData: PropTypes.object,\r\n appendItem: PropTypes.node,\r\n};\r\n\r\nListCell.defaultProps = {\r\n title: '',\r\n data: '',\r\n extra: '',\r\n appendItem: '',\r\n size: ROW_SIZE_STANDARD,\r\n};\r\n\r\nexport default ListCell;\r\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames/bind';\nimport {ROW_SIZE_STANDARD, ROW_SIZE_LARGE} from './Abstract';\nimport {SpinnerSmall} from '../Spinner';\nimport style from '../../../css/List.css';\n\nconst cx = classNames.bind(style);\n\nconst ListCellLoader = ({\n size,\n className,\n spinnerColor,\n}) => (\n \r\n 
{\r\n if (e.target.src !== `${bankDefaultLogo}`) {\r\n e.target.src = `${bankDefaultLogo}`;\r\n }\r\n }} alt={''} className={cx('List__row__cell__extra__image')} />\r\n
\r\n )}\r\n \r\n {(size === ROW_SIZE_LARGE) && title && (\r\n \r\n {title}\r\n \r\n )}\r\n \r\n {data}\r\n \r\n
\r\n {(size === ROW_SIZE_LARGE) && extra && (\r\n \r\n \r\n {extra}\r\n \r\n
\r\n )}\r\n {appendItem && (\r\n \r\n
\r\n )}\r\n \r\n {appendItem}\r\n
\r\n \n \n
\n);\n\nListCellLoader.propTypes = {\n size: PropTypes.oneOf([\n ROW_SIZE_STANDARD,\n ROW_SIZE_LARGE,\n ]),\n spinnerColor: PropTypes.string,\n className: PropTypes.string,\n};\n\nListCellLoader.defaultProps = {\n size: ROW_SIZE_STANDARD,\n};\n\nexport default ListCellLoader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames/bind';\nimport style from '../../../css/List.css';\nimport AbstractList from './Abstract';\nimport ListRow from './Row';\nimport ListCell from './Cell';\nimport ListCellLoader from './CellLoader';\nimport {isNull, getAriaLabelForList} from '../../Util';\nimport {SEARCH_RESET_DELAY} from '../../config/constants';\n\nconst cx = classNames.bind(style);\n\nlet timer = Date.now();\n\nconst List = React.forwardRef(({\n data,\n value,\n loadingFirstBatch,\n loadingMore,\n border,\n selected,\n setSelected,\n withPointer,\n className,\n setSearch,\n searchTerm,\n rowClass,\n spinnerColor,\n allowDeselect,\n CellComponent,\n tabIndex,\n activeDescendant,\n showFocusOutline,\n ariaHidden,\n focused,\n appendItem,\n ...props\n}, ref) => (\n \r\n {!isNull(value)\r\n ?
\r\n {showCaret &&\r\n \n {\n showFocusOutline(type, false);\n if (status === STATUS_IDLE) {\n onClick();\n }\n }}\n onBlur={e => {\n showFocusOutline(type, false);\n }}\n onKeyUp={e => {\n if (e.key === 'Tab') showFocusOutline(type, true);\n }}\n onKeyDown={e => {\n if (e.key === 'Tab') showFocusOutline(type, false);\n }}\n ref={ref}>\n \n {status === STATUS_LOADING && loadingText || text || 'Continue'}\n \n \n
\n );\n});\n\nButton.displayName = 'Button';\n\nButton.propTypes = {\n type: PropTypes.oneOf([\n TYPE_PRIMARY,\n TYPE_SECONDARY,\n TYPE_DELETE,\n TYPE_SUCCESS,\n TYPE_GHOST,\n TYPE_GHOST_WARNING,\n ]),\n status: PropTypes.oneOf([\n STATUS_IDLE,\n STATUS_DISABLED,\n STATUS_LOADING,\n ]),\n loadingText: PropTypes.node,\n withForward: PropTypes.bool,\n icon: PropTypes.string,\n onClick: PropTypes.func,\n autoFocus: PropTypes.bool,\n className: PropTypes.string,\n showFocusOutline: PropTypes.func,\n tabStatus: PropTypes.any,\n text: PropTypes.node,\n};\n\nButton.defaultProps = {\n type: TYPE_PRIMARY,\n status: STATUS_IDLE,\n loadingText: 'Please wait...',\n withForward: false,\n icon: '',\n onClick: () => {},\n showFocusOutline: () => {},\n autoFocus: false,\n};\n\nexport default compose(\n withAutoFocus,\n withStatic({\n TYPE_PRIMARY, TYPE_SECONDARY, TYPE_DELETE, TYPE_SUCCESS,\n TYPE_GHOST, STATUS_IDLE, STATUS_DISABLED, STATUS_LOADING,\n WITH_FORWARD, WITH_ICON, TYPE_GHOST_WARNING\n }),\n)(Button);\n","import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport style from '../../../css/TokenContainer.css';\nimport classNames from 'classnames/bind';\nimport {forceRedrawForSafari} from '../../Util.js';\n\nconst cx = classNames.bind(style);\n\nclass TokenContainer extends Component {\n componentDidMount() {\n // hack for safari redraw issue\n forceRedrawForSafari();\n }\n render() {\n const {className, children, noMargin, noScrollable, innerRef, ...props} = this.props;\n const classNames = cx({\n 'TokenContainer': true,\n 'TokenContainer-margin': !noMargin,\n 'TokenContainer-scrollable': !noScrollable,\n [className]: !!className,\n });\n return {children}
;\n }\n}\n\nTokenContainer.propTypes = {\n className: PropTypes.string,\n children: PropTypes.node,\n noMargin: PropTypes.bool,\n noScrollable: PropTypes.bool,\n innerRef: PropTypes.any,\n};\n\nexport default TokenContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from '../../../css/TokenTitle.css';\nimport classNames from 'classnames/bind';\n\nconst cx = classNames.bind(style);\n\nconst TokenTitle = ({className, children, sub, backArrow, arrowColor = '#05A5F0', ...props}) => {\n const classNames = cx({\n TokenTitle: !sub,\n TokenSubtitle: sub,\n 'TokenTitle--with-back': backArrow,\n [className]: !!className,\n });\n return (\n \n {backArrow &&\n \n \n \n || null}\n {children}\n
\n );\n};\n\nTokenTitle.propTypes = {\n className: PropTypes.string,\n children: PropTypes.any,\n sub: PropTypes.bool,\n backArrow: PropTypes.bool,\n onClick: PropTypes.func,\n arrowColor: PropTypes.string,\n};\n\nexport default TokenTitle;\n","import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport style from '../../../css/TokenButtonsContainer.css';\nimport classNames from 'classnames/bind';\n\nconst cx = classNames.bind(style);\n\nclass TokenButtonsContainer extends Component {\n constructor(props) {\n super(props);\n this.state = {\n status: {\n type: '',\n tabFocused: false,\n },\n };\n this.showFocusOutline = this.showFocusOutline.bind(this);\n }\n\n showFocusOutline = (type, visible) => {\n this.setState({status: {type: type, tabFocused: visible}});\n };\n\n render() {\n const {className, children, alignment, ...props} = this.props;\n const classNames = cx({\n TokenButtonsContainer: true,\n [`TokenButtonsContainer--${alignment}`]: true,\n [className]: !!className,\n });\n return (\n \n {React.Children.map(children, child => React.cloneElement(child, {\n showFocusOutline: this.showFocusOutline,\n tabStatus: this.state.status,\n }))}\n
\n );\n }\n}\n\nTokenButtonsContainer.defaultProps = {\n alignment: 'row',\n};\n\nTokenButtonsContainer.propTypes = {\n className: PropTypes.string,\n children: PropTypes.any,\n};\n\nexport default TokenButtonsContainer;\n","import React, { useState, useLayoutEffect, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@token-io/lib-web-components/src/Components/Button';\nimport { connect } from 'reducers';\nimport { CUSTOM_TPP_FEATURES as featureConfig } from '../../../config/constants';\nimport { FormattedMessage } from 'react-intl';\n\nconst isInViewport = element => {\n try {\n const elementPosition = element.getBoundingClientRect();\n return (\n elementPosition.top >= 0 &&\n elementPosition.left >= 0 &&\n Math.abs(\n elementPosition.height +\n element.scrollTop -\n element.scrollHeight,\n ) < 20\n );\n } catch (e) {\n return false;\n }\n};\n\nconst ButtonVisibilityWrapper = ({\n scrollRef,\n status,\n isButtonFlagEnabled,\n text,\n ...props\n}) => {\n const [visibleStatus, setVisibleStatus] = useState(Button.STATUS_DISABLED);\n const [innerRef, setInnerRef] = useState(scrollRef);\n const [buttonText, setButtonText] = useState(\n isButtonFlagEnabled ? (\n \n {\n this.updateAlias(value);\n this.setState({\n selectedType: 'EMAIL',\n });\n }}\n onKeyEnter={this.continuePress}\n placeholder={this.props.intl.formatMessage({\n id: 'common.aliasInput.aliasTypes.email',\n })}\n className={cx('AliasInput-email-field')}\n inputFieldClass={cx('AliasInput-field')}\n />\n \n \n
\n );\n }\n\n renderSwitch(param, customAliasLabel) {\n switch (param) {\n case 'EMAIL':\n return (\n \n countryTelData.allCountries}\n useCustomData\n customData={formatCountriesPhone(\n countryTelData.allCountries,\n )}\n value={this.state.country}\n customSetValue={async (value, { doneCallback }) => {\n await this.onChange(value);\n doneCallback();\n }}\n withPointer>\n {\n this.updateAlias(value);\n this.setState({\n selectedType: 'PHONE',\n });\n }}\n onKeyEnter={this.continuePressPhone}\n placeholder={this.props.intl.formatMessage({\n id: 'common.aliasInput.aliasTypes.phone',\n })}\n inputFieldClass={cx('AliasInput-phone-field-inner')}\n />\n
\n \n {\n await this.onChange(value);\n doneCallback();\n }}\n withPointer>\n {\n this.updateAlias(value);\n this.setState({\n selectedType: 'PHONE',\n });\n }}\n onKeyEnter={this.continuePressPhone}\n placeholder={this.props.intl.formatMessage({\n id: 'common.aliasInput.aliasTypes.phone',\n })}\n inputFieldClass={cx('AliasInput-phone-field-inner')}\n />\n
\n );\n case 'CUSTOM':\n return (\n \n
\n
\n \n {(error && (\n
\n \n
\n
\n {strings[2]}\n {strings[3]}\n
\n )) ||\n null}\n {(strings[4] && !hasCustomization && (\n\n {strings[4]}\n
\n )) ||\n null}\n\n
\n \n \n
\n \n {appName},\n }}\n />\n
\n \n
\n \n {strings[0]}\n
\n {strings[1]}\n
\n \n \n
\n \n
\n );\n};\n\nFlickerImage.propTypes = {\n flickerCode: PropTypes.string,\n};\n\nexport default FlickerImage;\n","import React from 'react';\nimport './EyeIcon.css';\nimport PropTypes from 'prop-types';\nimport style from './../Pisp/Consent.css';\nimport classNames from 'classnames/bind';\nimport { BsEyeSlashFill } from 'react-icons/bs';\nimport { BsEyeFill } from 'react-icons/bs';\n\nconst cx = classNames.bind(style);\n\nconst EyeIcon = ({ setPasswordVisible, isVisible }) => {\n return isVisible ? (\n \n \n \n \n \n \n \n
\n \n \n updateSize(newSize[0])}\n />\n \n updateSpeed(newSpeed[0])}\n />\n
\n \n \n {data.displayName}\n
\n \n \n {data.displayName}\n
\n \n {staticImages?.map((data, i) => {\n return (\n
\n \n
\n );\n })}\n \n {flickerCode && (\n
\n {captureCredentials?.length > 0 && (\n \n
\n )}\n \n \n {captureCredentials?.map(data => {\n switch (data.type) {\n case fieldType.OPTIONS:\n return this.displayOptions(data);\n case fieldType.PASSWORD:\n return this.displayCredentialField(\n data,\n true,\n );\n default:\n return this.displayCredentialField(\n data,\n );\n }\n })}\n \n
\n )}\n \n\n {!decoupledFlow && (\n \n \n {text}\n \n
\n );\n }\n return (\n \n { logo && (\n
\n );\n};\n\nTokenBackgroundTitle.propTypes = {\n logo: PropTypes.string,\n text: PropTypes.string,\n noPrepend: PropTypes.bool,\n};\n\nconst TokenBackgroundContent = createContainer({\n type: 'div',\n displayName: 'TokenBackgroundContent',\n className: cx('TokenBackground-content'),\n});\n\nconst TokenBackgroundFooter = createContainer({\n type: 'div',\n displayName: 'TokenBackgroundFooter',\n className: cx('TokenBackground-footer'),\n});\n\nexport default compose(\n withStatic({\n Header: TokenBackgroundHeader,\n Title: TokenBackgroundTitle,\n Content: TokenBackgroundContent,\n Footer: TokenBackgroundFooter,\n }),\n)(TokenBackground);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { sanitizeHTML } from 'util/index';\nimport { connect } from 'reducers';\nimport { CUSTOM_TPP_FEATURES as featureConfig } from 'config/constants';\nimport TokenBackground from '@token-io/lib-web-components/src/Components/Layout/TokenBackground';\nimport classNames from 'classnames/bind';\nimport style from './FooterText.css';\n\nconst cx = classNames.bind(style);\n\nconst CustomFooterText = ({\n customFooterText = 'powered by Token',\n className,\n tppLogo,\n resellerLogo,\n displayShadow,\n}) => {\n if (customFooterText) {\n const tppImg = `\n
\n );\n};\n\nLoading.propTypes = {\n color: PropTypes.string,\n displaySplashScreen: PropTypes.bool,\n setStep: PropTypes.func,\n stepsUntilNow: PropTypes.array,\n};\n\nconst mapStateToProps = ({ tokenRequestService, sharedService }) => {\n const colors = {\n ...defaultColors,\n ...tokenRequestService.getTppFeature(featureConfig.CUSTOM_COLORS),\n };\n const displaySplashScreen = !!tokenRequestService\n .getTppFeature(featureConfig.SPLASH_SCREEN)\n ?.trim();\n const stepsUntilNow = sharedService.getSteps();\n\n return {\n color:\n argbToRgba(colors['color-spinner']) ||\n argbToRgba(colors['color-primary']),\n displaySplashScreen,\n stepsUntilNow,\n };\n};\n\nconst mapDispatchToProps = {\n setStep,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Loading);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport style from './LanguageSwitcher.css';\nimport classNames from 'classnames/bind';\nimport { intlShape } from 'react-intl';\nimport { connect } from 'reducers';\nimport StaticDataProvider from '@token-io/lib-web-components/src/Components/Data/StaticDataProvider';\nimport AbstractDropdown from '@token-io/lib-web-components/src/Components/Dropdown/Abstract';\nimport { languages } from 'config/constants';\nimport { setLocale } from 'actions/shared';\nimport { getURLParameter } from '../../util';\n\nconst cx = classNames.bind(style);\n\nclass LanguageSwitcher extends Component {\n constructor() {\n super();\n this.onChange = this.onChange.bind(this);\n this.getPreferredLang = this.getPreferredLang.bind(this);\n }\n getPreferredLang() {\n // Find preferred language in array and set its locale code (e.g. 'en' becomes 'en-US')\n for (const [i, lang] of languages.entries()) {\n if (\n lang.code.toLowerCase() ===\n this.props.locale.slice(0, 2).toLowerCase()\n ) {\n lang.code = this.props.locale;\n return i;\n }\n }\n return 0;\n }\n\n onChange(lang) {\n if (this.props.locale !== lang.code) {\n this.props.setLocale(lang.code);\n }\n }\n\n componentDidMount() {\n const defaultLang = getURLParameter('lang');\n if (defaultLang) {\n this.props.setLocale(defaultLang);\n }\n }\n\n render() {\n return (\n {null}
;\n\nexport default EmptyBackgroundTitle;\n","import React from 'react';\nimport style from './LeftChevron.css';\nimport classNames from 'classnames/bind';\nimport PropTypes from 'prop-types';\n\nconst cx = classNames.bind(style);\n\nconst LeftChevron = ({ color = 'none', svgClassName }) => {\n return (\n \n \n
\n );\n};\n\nLeftChevron.propTypes = {\n color: PropTypes.string,\n svgClassName: PropTypes.string,\n};\n\nexport default LeftChevron;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from './HomeIconSvg.css';\nimport classNames from 'classnames/bind';\n\nconst cx = classNames.bind(style);\n\nconst HomeIconSvg = ({\n bgColor,\n svgHeight,\n svgWidth,\n scale = -10,\n svgColor = '#000000',\n}) => {\n return (\n \n \n \n <>\n \n \n \n
\n \n \n
\n {!merchantName && (\n \n \n handleOverlay(false)}\n className=\"ConsentBackToTpp-button\"\n text={\n \n
\n \n \n \n \n \n );\n};\n\nConsentBackToTppOverlay.propTypes = {\n handleOverlay: PropTypes.func,\n declineConsent: PropTypes.func,\n tppName: PropTypes.string,\n merchantName: PropTypes.string,\n productName: PropTypes.string,\n};\n\nconst mapStateToProps = ({ tokenRequestService }) => {\n const tppName = tokenRequestService.getTppProfile()?.tppName;\n const tppAlias = tokenRequestService.getTppAlias();\n const actingAs = tokenRequestService.getTppActingAs();\n const merchantName = actingAs?.displayName || tppName || '';\n const productName = tokenRequestService.getTppFeature(\n featureConfig.PRODUCT_NAME,\n '',\n );\n\n return {\n tppName:\n actingAs?.displayName ||\n tppName ||\n actingAs?.secondaryName ||\n tppAlias.value,\n merchantName,\n productName,\n };\n};\n\nconst mapDispatchToProps = {\n declineConsent: () => async dispatch => {\n addCheckForTokenReqRejection();\n dispatch(changeRoute(ROUTE_LOADING));\n await dispatch(setTokenRequestStatus(requestStatus.REJECTED));\n dispatch(\n terminateFlow({\n error: 'access_denied',\n message: 'User Cancelled',\n }),\n );\n },\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps,\n)(ConsentBackToTppOverlay);\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'reducers';\nimport LeftChevron from './Icons/LeftChevron';\nimport classNames from 'classnames/bind';\nimport style from './TokenBackgroundBackButton.css';\nimport ConsentBackToTppOverlay from './ConsentBackToTppOverlay.js';\nimport { intlShape } from 'react-intl';\nimport { FormattedMessage } from 'react-intl';\n\nconst cx = classNames.bind(style);\n\nconst TokenBackgroundBackButton = ({ intl, tppName }) => {\n const [displayOverlay, setDisplayOverlay] = useState(false);\n\n const handleBackButton = () => {\n if (displayOverlay) {\n setDisplayOverlay(false);\n } else {\n setDisplayOverlay(true);\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n {displayOverlay && (\n \n
\n );\n};\n\nBankOutageError.propTypes = {\n bank: PropTypes.string.isRequired,\n};\n\nexport default BankOutageError;\n","import React, {PureComponent} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNull} from '../../Util';\nimport style from '../../../css/Scroll.css';\nimport classNames from 'classnames/bind';\nimport {SCROLL_BOTTOM_LOAD_DISTANCE} from '../../config/constants';\n\nconst cx = classNames.bind(style);\n\nclass InfiniteScroll extends PureComponent {\n static propTypes = {\n children: PropTypes.node.isRequired,\n fetchData: PropTypes.func.isRequired,\n page: PropTypes.number,\n loadingFirstBatch: PropTypes.bool,\n loadingMore: PropTypes.bool,\n selected: PropTypes.number,\n maxHeight: PropTypes.number,\n searchTerm: PropTypes.string,\n setSelected: PropTypes.func,\n withPointer: PropTypes.bool,\n className: PropTypes.string,\n }\n static defaultProps = {\n fetchData: () => null,\n page: 1,\n loadingFirstBatch: false,\n loadingMore: false,\n selected: null,\n }\n constructor(props) {\n super(props);\n this.container = React.createRef();\n this.overflow = React.createRef();\n this.handleScroll = this.handleScroll.bind(this);\n this.checkScroll = this.checkScroll.bind(this);\n this.setSelected = this.setSelected.bind(this);\n }\n /*\n * Scrolls list item into view\n *\n * @param {index} selected - index of the selected item to scroll into view, this is\n * essentially always the one that is denoted by cursor\n */\n handleScroll(selected) {\n const container = this.container.current;\n const overflow = this.overflow.current;\n if (selected === null) {\n container.scrollTop = 0;\n return 0;\n }\n const el = overflow.children[selected];\n if(!(el && container && overflow)) return;\n const offsetUp = el.offsetTop - overflow.offsetTop - container.scrollTop;\n const offsetDown = offsetUp + el.offsetHeight - container.offsetHeight;\n const scrollUp = offsetUp < 0;\n const scrollDown = offsetDown > 0;\n const scrollBy = scrollDown && offsetDown || scrollUp && offsetUp || 0;\n if (scrollBy === 0) return 0;\n container.scrollTop += scrollBy;\n return scrollBy;\n }\n /*\n * Handler for when the user scrolls, checks if close to bottom and fires API call to load\n * more banks\n */\n async checkScroll() {\n if (this.props.loadingMore || this.props.loadingFirstBatch || this.checkingScroll) return;\n const container = this.container.current;\n const overflow = this.overflow.current;\n if (overflow.offsetHeight - container.offsetHeight - container.scrollTop\n < SCROLL_BOTTOM_LOAD_DISTANCE) {\n this.checkingScroll = true;\n await this.props.fetchData({\n page: this.props.page + 1,\n search: this.props.searchTerm,\n });\n }\n }\n componentDidUpdate(prevProps) {\n this.checkingScroll = false;\n if (this.props.selected !== prevProps.selected) {\n this.handleScroll(this.props.selected);\n }\n }\n componentDidMount() {\n const {selected} = this.props;\n if (isNull(selected)) return;\n this.handleScroll(selected);\n }\n setSelected(selected, {doneCallback, preventScroll, ...options} = {}) {\n if (this.props.withPointer) {\n this.props.setSelected(selected, {\n doneCallback: () => {\n !preventScroll && this.handleScroll(selected);\n doneCallback && doneCallback();\n },\n ...options,\n });\n }\n }\n render() {\n const {children, maxHeight, className, ...props} = this.props;\n return (\n \n
\n \n 
\n
\n \n
\n \n {`${data.length} results found`}\n
\n \n {(value === true) && }\n
\n \n));\n\nRadioButton.displayName = 'RadioButton';\n\nRadioButton.propTypes = {\n className: PropTypes.string,\n status: PropTypes.oneOf([\n STATUS_IDLE,\n STATUS_DISABLED,\n ]),\n value: PropTypes.bool,\n focused: PropTypes.bool,\n hover: PropTypes.bool,\n setValue: PropTypes.func,\n setFocus: PropTypes.func,\n setHover: PropTypes.func,\n setKeyDown: PropTypes.func,\n};\n\nRadioButton.defaultProps = {\n status: STATUS_IDLE,\n focused: false,\n hover: false,\n setFocus: () => null,\n setHover: () => null,\n setValue: () => null,\n setKeyDown: () => null,\n};\n\nconst RadioButtonComposer = compose(\n withAutoFocus,\n withValue,\n withFocusState,\n withStatic({\n STATUS_IDLE,\n STATUS_DISABLED,\n }),\n);\n\nexport default RadioButtonComposer(RadioButton);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames/bind';\nimport {ROW_SIZE_STANDARD, ROW_SIZE_LARGE} from './Abstract';\nimport RadioButton from '../Radio';\nimport style from '../../../css/List.css';\n\nconst cx = classNames.bind(style);\n\nconst ListCellRadio = ({\n title,\n data,\n extra,\n highlighted,\n size,\n className,\n value,\n status,\n}) => (\n \n
\n);\n\nListCellRadio.propTypes = {\n title: PropTypes.node,\n data: PropTypes.node.isRequired,\n value: PropTypes.bool,\n extra: PropTypes.node,\n highlighted: PropTypes.bool,\n size: PropTypes.oneOf([\n ROW_SIZE_STANDARD,\n ROW_SIZE_LARGE,\n ]),\n className: PropTypes.string,\n status: PropTypes.string,\n};\n\nListCellRadio.defaultProps = {\n title: '',\n data: '',\n extra: '',\n value: false,\n highlighted: false,\n size: ROW_SIZE_STANDARD,\n};\n\nexport default ListCellRadio;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames/bind';\nimport style from '../../../css/List.css';\nimport {withStatic} from '../../Hoc.jsx';\nimport AbstractList from '../List/Abstract';\nimport ListRow from '../List/Row';\nimport ListCellRadio from '../List/CellRadio';\nimport ListCellLoader from '../List/CellLoader';\nimport {ROW_SIZE_STANDARD, ROW_SIZE_LARGE} from '../List/Abstract';\nimport RadioButton from '.';\nimport {compose, isNull} from '../../Util';\nimport {SEARCH_RESET_DELAY} from '../../config/constants';\n\nconst cx = classNames.bind(style);\n\nlet timer = Date.now();\n\nconst List = React.forwardRef(({\n data,\n value,\n loadingFirstBatch,\n loadingMore,\n border,\n selected,\n setSelected,\n withPointer,\n className,\n setSearch,\n searchTerm,\n rowClass,\n spinnerColor,\n size,\n allowDeselect,\n idKey,\n tabIndex,\n ariaLabel,\n showFocusOutline,\n focused,\n ...props\n}, ref) => (\n \n {(size === ROW_SIZE_LARGE) && title && (\n \n {title}\n \n )}\n \n {data}\n \n {(size === ROW_SIZE_LARGE) && extra && (\n \n {extra}\n \n )}\n
\n \n
\n \n
\n \n \n
\n );\n};\n\nRightChevron.propTypes = {\n color: PropTypes.string,\n svgClassName: PropTypes.string,\n};\n\nexport default RightChevron;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'reducers';\nimport TokenTitle from '@token-io/lib-web-components/src/Components/Layout/TokenTitle';\nimport List from '@token-io/lib-web-components/src/Components/List';\nimport StaticDataProvider from '@token-io/lib-web-components/src/Components/Data/StaticDataProvider';\nimport { intlShape } from 'react-intl';\nimport msg from 'config/locales/en.json';\nimport { setBank, setOneStepSupport } from 'actions/shared';\nimport { FormattedMessage } from 'react-intl';\nimport { fetchTransferDestinationUrl } from '../../../actions/pisp';\nimport classNames from 'classnames/bind';\nimport style from './TopBanks.css';\nimport RightChevron from '../Icons/RightChevron';\n\nconst cx = classNames.bind(style);\n\nconst TopBanks = props => {\n const {\n intl,\n setBank,\n selectedBankId,\n banks,\n setBankAndProceedToConsent,\n setTransferDestinationsUrl,\n destinations,\n fetchTransferDestinationUrl,\n searchInputFocused,\n } = props;\n const hasTransferDestinationsUrlOnly =\n setTransferDestinationsUrl && !destinations;\n return (\n \n
\n \n )}\n\n
\n {\n formatCountries(\n countries,\n intl.formatMessage,\n )[0].key\n }\n
\n )) || (\n \n {\n const searching =\n options.search !== searchTerm;\n const nextPage =\n (searching && 1) ||\n (page && page + 1) ||\n 2;\n if (\n !searching &&\n (loadingMore || page >= pageCount)\n )\n return;\n this.setState({\n loadingMore: true,\n searchTerm: options.search,\n });\n await fetchBanks(\n Object.assign(options, {\n country: country && country.code,\n page: nextPage,\n }),\n this.setPaging,\n );\n this.setState({\n loadingMore: false,\n });\n }}\n fetchOnMount={false}\n useCustomData\n customData={banks}\n customLoading={loadingMore}\n customSetValue={async (\n value,\n { doneCallback },\n ) => {\n const bank = {\n ...value.rawData,\n selectedCountry: country.code.toUpperCase(),\n };\n hasTransferDestinationsUrlOnly\n ? fetchTransferDestinationUrl(bank)\n : setBankAndProceedToConsent(bank);\n doneCallback();\n }}\n value={selectedBank}\n withPointer>\n
\n ) : (\n (displayRecentBanks &&\n recentBanks?.length &&\n !this.state.displayBankOutageError && (\n \n \n
\n \n \n
\n \n {iconDisplay()}\n \n handleIbanInput(e.target.value?.toUpperCase())\n }\n placeholder={intl.formatMessage({\n id: 'aisp.consent.mandatory.iban.placeholder',\n })}\n key=\"iban\"\n name=\"iban_inputField\"\n className={cx({\n TextInput__inner__input: true,\n 'AliasInput-field': true,\n 'IbanInput-field': true,\n })}\n aria-required=\"true\"\n validateInput={\n !isIbanValid &&\n !displayIbanSpinner &&\n !!currentIban\n }\n value={ibanWithCountry()}\n required\n autoFocus\n />\n
\n {currentIban && !isIbanValid && !displayIbanSpinner && (\n \n \n \n \n \n
\n \n {typeof resources[0] === 'string' ? (\n resources.map(r => (\n \n \n
\n \n ))\n ) : (\n \n \n \n \n \n
\n \n \n \n
\n {!hideConsentTextBlock && (\n \n
\n \n
\n \n \n {resources[0].bankAccount.iban\n ? resources[0].bankAccount.iban.iban\n : resources[0].bankAccount.domestic\n .accountNumber}\n \n
\n \n
\n \n
\n \n \n {aispName}\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n \n {renderProductStuff()}\n
\n {tppSplashImg}\n \n {acc.key}\n {acc.value}\n
\n ),\n }));\n const defaultValue = accs.find(acc => acc.id === paymentAccount);\n return (\n \n
\n \n {alias ? (\n \n \n \n \n {alias}\n \n \n \n ) : (\n ''\n )}\n \n \n \n \n {bank.name}\n \n \n \n {\n e.preventDefault();\n goToBankSelection();\n }}>\n \n \n \n \n \n \n \n accs}\n defaultValue={defaultValue || accs[0]}\n onChange={acc => {\n setPaymentAccount(acc.id);\n }}\n withPointer>\n \n \n
\n - \n
- \n
- {total} \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n {this.iconDisplay()}\n \n this.checkSubBranch(\n e.target.value?.toUpperCase(),\n )\n }\n placeholder={this.props.intl.formatMessage({\n id: 'pisp.iban.description',\n })}\n key=\"iban\"\n name=\"iban_inputField\"\n className={cx({\n TextInput__inner__input: true,\n 'AliasInput-field': true,\n 'IbanInput-field': true,\n })}\n aria-required=\"true\"\n validateInput={\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner &&\n !!this.state.iban\n }\n value={this.ibanWithCountry()}\n required\n autoFocus\n />\n
\n {this.state.iban &&\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner && (\n \n \n
\n \n \n \n \n \n
\n \n \n \n \n {executionDate}\n \n
\n \n ) : null}\n \n
\n {executionDate ? (\n \n
\n \n \n {total}\n \n
\n \n \n
\n \n
\n {showBeneficiaryDetails &&\n Object.keys(destinationAccount).map(key => {\n return (\n \n
\n \n \n {pispName ? (\n {pispName}\n ) : (\n {pispAlias}\n )}\n \n
\n \n \n
\n \n
\n {description && (\n \n
\n \n \n {refId} \n \n copyOnClipboard(refId)\n }\n onClick={() =>\n copyOnClipboard(refId)\n }\n />\n \n
\n \n \n
\n \n \n
\n \n {this.iconDisplay()}\n \n this.checkSubBranch(\n e.target.value?.toUpperCase(),\n )\n }\n placeholder={this.props.intl.formatMessage({\n id: 'pisp.iban.description',\n })}\n key=\"iban\"\n name=\"iban_inputField\"\n className={cx({\n TextInput__inner__input: true,\n 'AliasInput-field': true,\n 'IbanInput-field': true,\n })}\n validateInput={\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner &&\n !!this.state.iban\n }\n aria-required=\"true\"\n value={this.ibanWithCountry()}\n required\n autoFocus\n />\n
\n {this.state.iban &&\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner && (\n \n \n
\n \n \n \n \n \n
\n \n \n \n \n {endDate}\n \n
\n \n ) : null}\n \n
\n \n
\n \n \n {total}\n \n
\n \n
\n \n
\n \n \n {startDate}\n \n
\n \n
\n {endDate ? (\n \n
\n \n
\n \n \n
\n \n
\n {showBeneficiaryDetails &&\n Object.keys(destinationAccount).map(key => {\n return (\n \n
\n \n \n {pispName ? (\n {pispName}\n ) : (\n {pispAlias}\n )}\n \n
\n \n
\n\n {oneStepSupport\n ? defaultIban === ''\n ? this.ibanInputDisplay()\n : this.defaultIbanDisplay()\n : null}\n {requiredMandatoryFields && (\n \n
\n \n \n {selectedBankName}\n \n {(defaultBankId === '' ||\n modifyPreSelectedBank) && (\n backToBankSelector()}\n className={cx('ChangeBank')}\n text={this.props.intl.formatMessage(\n {\n id:\n 'pisp.consent.changeBank.label',\n },\n )}\n />\n )}\n
\n \n
\n {description && (\n \n
\n \n \n {refId}\n \n copyOnClipboard(refId)\n }\n onClick={() =>\n copyOnClipboard(refId)\n }\n />\n \n
\n \n \n
\n \n \n
\n \n {this.iconDisplay()}\n \n this.checkSubBranch(\n e.target.value?.toUpperCase(),\n )\n }\n placeholder={this.props.intl.formatMessage({\n id: 'pisp.iban.description',\n })}\n key=\"iban\"\n name=\"iban_inputField\"\n className={cx({\n TextInput__inner__input: true,\n 'AliasInput-field': true,\n 'IbanInput-field': true,\n })}\n validateInput={\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner &&\n !!this.state.iban\n }\n aria-required=\"true\"\n value={this.ibanWithCountry()}\n required\n autoFocus\n />\n
\n {this.state.iban &&\n !this.state.isIbanValid &&\n !this.state.displayIbanSpinner && (\n \n \n
\n \n \n \n \n \n
\n \n \n \n \n {executionDate}\n \n
\n \n ) : null}\n \n
\n {executionDate ? (\n \n
\n \n \n {total}\n \n
\n \n \n
\n \n
\n {showBeneficiaryDetails &&\n Object.keys(destinationAccount).map(key => {\n return (\n \n
\n \n \n {pispName ? (\n {pispName}\n ) : (\n {pispAlias}\n )}\n \n
\n \n
\n\n {oneStepSupport\n ? defaultIban === ''\n ? this.ibanInputDisplay()\n : this.defaultIbanDisplay()\n : null}\n \n
\n \n \n {selectedBankName}\n \n {(defaultBankId === '' ||\n modifyPreSelectedBank) && (\n backToBankSelector()}\n className={cx('ChangeBank')}\n text={this.props.intl.formatMessage(\n {\n id:\n 'pisp.consent.changeBank.label',\n },\n )}\n />\n )}\n
\n \n
\n {description && (\n \n
\n \n \n {refId} \n \n copyOnClipboard(refId)\n }\n onClick={() =>\n copyOnClipboard(refId)\n }\n />\n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n \n \n {total}\n \n
\n \n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n )}\n {bankIbanOrAccNo && (\n \n
\n \n \n {userInfo.name}\n \n
\n \n
\n )}\n {bankBicOrSc && (\n \n
\n \n \n {bankIbanOrAccNo}\n \n
\n \n
\n )}\n \n );\n }\n\n render() {\n const {\n declineTerms,\n pispName,\n pispAlias,\n maxAmountPerPayment,\n businessName,\n backToBankSelector,\n refId,\n defaultBankId,\n description,\n modifyPreSelectedBank,\n proceedToBankForVrp,\n periodicLimits,\n debtorInfo,\n creditorInfo,\n selectedBankName,\n creditorBankName,\n expiration,\n } = this.props;\n const expireDate = new Date();\n expireDate.setDate(\n expireDate.getDate() + DEFAULT_ACCESS_TOKEN_EXPIRATION_DAYS,\n );\n\n const messageVariableValues = {\n BUSINESS_NAME: `${businessName}`,\n DISPLAY_NAME: pispName ? pispName : pispAlias,\n EXPIRATION_DATE: `${convertToReadableDate(\n expireDate,\n )}`,\n };\n\n const consentText = this.props.intl.formatMessage(\n {\n id: 'vrp.consent.text',\n defaultMessage: ' ',\n },\n messageVariableValues,\n );\n\n const hideConsentTextBlock = hideConsentText(consentText);\n\n return (\n \n
\n \n \n {bankBicOrSc}\n \n
\n \n \n \n \n \n
\n \n \n {periodicLimits &&\n periodicLimits.map((periodicLimit, index) => (\n \n \n
\n \n
\n \n
\n \n \n {maxAmountPerPayment}\n \n
\n \n
\n {description && (\n \n
\n \n \n {refId} \n \n copyOnClipboard(refId)\n }\n onClick={() =>\n copyOnClipboard(refId)\n }\n />\n \n
\n \n \n
\n \n \n
\n \n
\n {debtorInfo &&\n this.displayUserInfo(debtorInfo, 'payer')}\n {expiration && (\n \n
\n \n \n {selectedBankName}\n \n {(defaultBankId === '' ||\n modifyPreSelectedBank) && (\n backToBankSelector()}\n className={cx('ChangeBank')}\n text={this.props.intl.formatMessage(\n {\n id:\n 'pisp.consent.changeBank.label',\n },\n )}\n />\n )}\n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n \n {userInfo.name}\n \n
\n \n )}\n {bankIbanOrAccNo && (\n \n
\n \n \n \n {bankIbanOrAccNo}\n \n
\n \n )}\n {bankBicOrSc && (\n \n
\n \n \n \n {bankBicOrSc}\n \n
\n \n )}\n \n );\n }\n\n render() {\n const {\n pispName,\n pispAlias,\n maxAmountPerPayment,\n refId,\n description,\n periodicLimits,\n debtorInfo,\n creditorInfo,\n selectedBankName,\n creditorBankName,\n expiration,\n initStatus,\n goToTpp,\n } = this.props;\n const { seconds } = this.state;\n const expireDate = new Date();\n expireDate.setDate(\n expireDate.getDate() + DEFAULT_ACCESS_TOKEN_EXPIRATION_DAYS,\n );\n\n return (\n \n
\n \n \n \n \n {initStatus}\n \n
\n \n {periodicLimits &&\n periodicLimits.map((periodicLimit, index) => (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n
\n
\n
\n
\n \n );\n};\n\nDefaultErrorPage.propTypes = {\n error: PropTypes.object,\n setDisplayFooterShadow: PropTypes.func,\n};\n\nconst mapStateToProps = ({ sharedService }) => {\n return {\n error: sharedService.getError(),\n };\n};\n\nexport default connect(mapStateToProps)(DefaultErrorPage);\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'reducers';\nimport style from './GPHSBCErrorPage.css';\nimport classNames from 'classnames/bind';\nimport TokenContainer from '@token-io/lib-web-components/src/Components/Layout/TokenContainer';\nimport { errorMessageKeys } from 'config/constants';\nimport FailureIcon from '../Icons/FailureIcon';\nimport { FormattedMessage } from 'react-intl';\n\nconst cx = classNames.bind(style);\n\nconst getErrorMessageKey = errorMessage => {\n let errorMessageKey = errorMessageKeys['DEFAULT'];\n Object.keys(errorMessageKeys).forEach(function (key) {\n if (errorMessage.toUpperCase().includes(key)) {\n errorMessageKey = errorMessageKeys[key];\n }\n });\n return errorMessageKey;\n};\n\nconst GPHSBCErrorPage = ({ setDisplayFooterShadow, isTokenError, error }) => {\n useEffect(() => {\n setDisplayFooterShadow(false);\n }, []);\n\n const gpHsbcErrorMessageId = isTokenError\n ? 'common.gpHsbc.errorPage.TOKEN_ERROR'\n : `common.gpHsbc.errorPage.${getErrorMessageKey(error.message)}`;\n\n return (\n \n
\n \n \n {errorTitle}\n
\n \n
\n {errorText}
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n redirectToTpp()}\n text={intl.formatMessage(\n {\n id: 'common.redirectTpp.button',\n },\n {\n TPP_NAME: tppName,\n },\n )}\n />\n \n {(!hideFooter && (\n {footer}\n )) ||\n null}\n
\n );\n};\n\nRedirectTpp.propTypes = {\n footer: PropTypes.node,\n hideFooter: PropTypes.bool.isRequired,\n color: PropTypes.string,\n redirectToTpp: PropTypes.func.isRequired,\n tppName: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n isError: PropTypes.bool,\n};\n\nRedirectTpp.defaultProps = {\n hideFooter: false,\n isError: false,\n};\n\nconst mapStateToProps = ({ tokenRequestService }) => {\n const hasCustomization = tokenRequestService.hasCustomization();\n const colors = {\n ...defaultColors,\n ...tokenRequestService.getTppFeature(featureConfig.CUSTOM_COLORS),\n };\n const footer =\n (hasCustomization && (\n \n powered by Token\n \n )) ||\n `© ${new Date().getFullYear()} Token.io, Ltd. All rights reserved.`;\n const actingAs = tokenRequestService.getTppActingAs();\n const isError = tokenRequestService.isTppRedirectError();\n const tppName = tokenRequestService.getTppProfile()?.tppName;\n const tppAlias = tokenRequestService.getTppAlias();\n\n return {\n footer,\n color: argbToRgba(colors['color-primary']),\n tppName:\n actingAs?.displayName ||\n tppName ||\n actingAs?.secondaryName ||\n tppAlias?.value,\n isError,\n };\n};\n\nconst mapDispatchToProps = {\n redirectToTpp,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RedirectTpp);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TokenContainer from '@token-io/lib-web-components/src/Components/Layout/TokenContainer';\nimport TokenTitle from '@token-io/lib-web-components/src/Components/Layout/TokenTitle';\nimport Button from '@token-io/lib-web-components/src/Components/Button';\nimport { connect } from 'reducers';\nimport style from './RedirectOptions.css';\nimport classNames from 'classnames/bind';\nimport { CUSTOM_TPP_FEATURES as featureConfig } from 'config/constants';\nimport { redirectToBankUrl, goToTppAfterBackButton } from 'actions/shared';\nimport { FormattedMessage, intlShape } from 'react-intl';\nimport { FooterText } from 'components/App/Shared/FooterText';\n\nconst cx = classNames.bind(style);\n\nconst RedirectOptions = ({\n tppName,\n footer,\n intl,\n bankName,\n redirectToBankUrl,\n goToTppAfterBackButton,\n}) => (\n \n \n \n \n {\n await redirectToBankUrl();\n }}\n text={intl.formatMessage(\n {\n id: 'common.redirectOptions.redirectBank',\n },\n {\n BANK_NAME: bankName,\n },\n )}\n />\n
\n {\n await goToTppAfterBackButton();\n }}\n text={intl.formatMessage(\n {\n id: 'common.redirectOptions.redirectTpp',\n },\n {\n TPP_NAME: tppName,\n },\n )}\n />\n \n {(!!footer && (\n {footer}\n )) ||\n null}\n
\n);\n\nRedirectOptions.propTypes = {\n footer: PropTypes.node,\n hideFooter: PropTypes.bool.isRequired,\n tppName: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n bankName: PropTypes.string,\n goToTppAfterBackButton: PropTypes.func.isRequired,\n redirectToBankUrl: PropTypes.func.isRequired,\n};\n\nRedirectOptions.defaultProps = {\n hideFooter: false,\n};\n\nconst mapStateToProps = ({ tokenRequestService, sharedService }) => {\n const customFooterText = tokenRequestService.getTppFeature(\n featureConfig.FOOTER_TEXT,\n );\n const footer = customFooterText ? \n
\n \n \n \n {\n setRedirecting(true);\n await redirectToBankUrl();\n }}\n text={intl.formatMessage(\n {\n id: 'common.bankRedirect.button',\n },\n {\n BANK_NAME: bank.name,\n },\n )}\n status={\n (!isRedirectReady && Button.STATUS_DISABLED) ||\n (isRedirecting && Button.STATUS_LOADING) ||\n Button.STATUS_IDLE\n }\n />\n \n
\n );\n};\n\nBankRedirect.propTypes = {\n bank: PropTypes.object,\n redirectToBankUrl: PropTypes.func.isRequired,\n intl: intlShape.isRequired,\n isRedirectReady: PropTypes.bool,\n};\n\nconst mapStateToProps = ({ sharedService, tokenService }) => ({\n bank: sharedService.getSelectedBank(),\n isRedirectReady: !!tokenService.getBankRedirectUrl(),\n});\n\nconst mapDispatchToProps = {\n redirectToBankUrl,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BankRedirect);\n","import React, { createRef, useState } from 'react';\nimport TokenContainer from '@token-io/lib-web-components/src/Components/Layout/TokenContainer';\nimport Button from '@token-io/lib-web-components/src/Components/Button';\nimport { connect } from 'reducers';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, intlShape } from 'react-intl';\nimport classNames from 'classnames/bind';\nimport style from './CsrfMismatch.css';\nimport { copyToClipboard } from 'util/index';\n\nconst cx = classNames.bind(style);\n\nconst CsrfMismatch = ({ intl, redirectUrl }) => {\n const [isCopied, setCopied] = useState(false);\n const ref = createRef();\n return (\n \n \n \n {\n copyToClipboard(ref.current);\n setCopied(true);\n }}>\n
\n \n \n \n \n \n
\n \n \n
\n
\n \n
\n \n
- \n
- \n
- \n
- \n
\n \n
\n
\n \n
\n \n
\n
\n Email :{' '}\n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n
\n
\n
\n
\n \n \n \n \n
\n \n \n
\n
\n \n
\n \n
- \n
- \n
- \n
- \n
\n \n
\n
\n \n
\n \n
\n Email:\n
\n
\n
\n Email:\n
\n
\n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n \n \n \n
\n \n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n \n
\n );\n } else if (isEnfuse) {\n return (\n \n \n \n
\n );\n } else {\n return (\n \n \n \n
\n );\n }\n }\n}\n\nTerms.propTypes = {\n isEnfuse: PropTypes.bool,\n isGmbh: PropTypes.bool,\n};\nconst mapStateToProps = ({ tokenRequestService, sharedService }) => {\n const selectedCountry = sharedService.getSelectedCountry();\n const isEnfuse =\n tokenRequestService.getTppFeature(\n featureConfig.IS_ENFUSE_LICENSE_TPP,\n false,\n ) && selectedCountry !== 'GB';\n const isGmbh = tokenRequestService.getTppFeature(\n featureConfig.IS_TPP_GMBH,\n false,\n );\n return {\n isEnfuse,\n isGmbh,\n };\n};\n\nexport default connect(mapStateToProps)(Terms);\n","import { hot } from 'react-hot-loader/root';\nimport { App, throwError, TokenException } from '@token-io/lib-web-app';\nimport React from 'react';\nimport './main.css';\nimport Root from 'components/App';\nimport reducer, {\n getRedactedState,\n getSanitizedState,\n getServices,\n} from 'reducers';\nimport {\n ROUTE_AISP,\n ROUTE_BANK_LOADING,\n ROUTE_BANK_REDIRECT,\n ROUTE_REDIRECT_TO_TPP,\n TPP_LOADING,\n ROUTE_REDIRECT_OPTIONS,\n ROUTE_CSRF_MISMATCH,\n ROUTE_CONFIG,\n ROUTE_ERROR,\n ROUTE_LOADING,\n ROUTE_SPLASH,\n ROUTE_PISP,\n ROUTE_VRP,\n SENTRY_DSN,\n TOKEN_ENV,\n TOKEN_BANK_POPUP,\n TOKEN_BANK_POPUP_CLOSE,\n defaultLocale,\n gitSha,\n languages,\n sendErrorReports,\n hotModule,\n} from 'config/constants';\nimport {\n EXCEPTION_UNSUPPORTED_MESSAGING_API,\n EXCEPTION_INVALID_PATH,\n} from 'config/exceptions';\nimport TokenCommunicator from 'services/TokenCommunicator';\nimport {\n initiateBankCallbackFlow,\n initiateRedirectFlow,\n initiatePaymentInitStatus,\n handlePopState,\n validateContext,\n allowUserToGoBack,\n blockUserToGoBack,\n initiateCredentialsFlow,\n} from 'actions/shared';\nimport { validateBrowserSession } from 'actions/helpers';\nimport { handleInitiation, initiateBankCallbackFlowV2 } from 'actions/vrp';\nimport { changeRoute } from 'actions/shared/route';\nimport WebAppConfig from 'components/WebAppConfig';\nimport Aisp from 'components/App/Aisp';\nimport Pisp from 'components/App/Pisp';\nimport Vrp from 'components/App/Vrp';\nimport ErrorPage from 'components/App/Shared/ErrorPage';\nimport Loading from 'components/App/Shared/Loading';\nimport RedirectTpp from 'components/App/Shared/RedirectTpp';\nimport RedirectOptions from 'components/App/Shared/RedirectOptions';\nimport BankSpinner from 'components/App/Shared/BankSpinner';\nimport RedirectTppSpinner from 'components/App/Shared/RedirectTppSpinner';\nimport BankRedirect from 'components/App/Shared/BankRedirect';\nimport CsrfMismatch from 'components/App/Shared/CsrfMismatch';\nimport SplashScreen from 'components/App/Shared/SplashScreen';\nimport {\n addCustomCss,\n syncLocalStorageVersion,\n isPopup,\n isContextIframe,\n getInitialReduxState,\n buildPathReqEx,\n sessionStorageWrapper,\n setHtmlLanguageAttribute,\n} from 'util/index';\nimport { enableIframePassthrough } from 'actions/shared/api';\nimport { ROUTE_TERMS_CONDITIONS } from './config/constants';\nimport 'assets/favicon.png';\nimport Terms from './components/App/Terms';\n\nenableIframePassthrough();\n\nconst storeCallback = async store => {\n module.hot?.accept('reducers', () => store.replaceReducer(reducer));\n try {\n const isCtxPopup = isPopup();\n const isCtxIframe = isContextIframe();\n\n if (isCtxPopup || isCtxIframe) {\n const path = window?.location?.pathname?.split('/');\n if (isCtxPopup) {\n TokenCommunicator.setup(store.dispatch);\n if (!path[1]) {\n TokenCommunicator.dispatchMessage('POPUP_IS_OPEN');\n }\n } else if (isCtxIframe) {\n TokenCommunicator.setupIframe(store.dispatch);\n if (!path[1]) {\n TokenCommunicator.dispatchMessage('WEB_APP_IFRAME_IS_OPEN');\n }\n }\n } else {\n // Redirect\n TokenCommunicator.setupBankPopup(store.dispatch);\n }\n await validateBrowserSession(store);\n } catch (e) {\n store.dispatch(\n throwError(\n new TokenException(\n EXCEPTION_UNSUPPORTED_MESSAGING_API,\n 'Messaging API is not supported',\n ),\n ),\n );\n }\n};\n\nconst RootApp = (hotModule && hot(Root)) || Root;\n\nconst options = {\n root: RootApp,\n rootId: 'app',\n store: {\n reducer,\n getServices,\n devToolsEnabled: TOKEN_ENV !== 'prd',\n initialState: getInitialReduxState(),\n afterCreate: storeCallback,\n beforeSave: getSanitizedState,\n useSessionStorage: true,\n },\n i18n: {\n defaultLocale,\n locales: languages.map(l => l.code),\n getLocale: state => state.shared.locale,\n getLocalesData: () => {\n return languages.reduce((p, n) => {\n const locale = n.code?.slice(0, 2);\n return {\n ...p,\n [locale]: require(`./config/locales/${locale}.json`),\n };\n }, {});\n },\n getCustomTranslations: state =>\n state.tokenRequest?.tpp?.configurations?.translations,\n },\n history: {\n stateSanitizer: getSanitizedState,\n onPopState: (e, store) => {\n if (sessionStorageWrapper.get('blockUserToGoBack') === true) {\n return false;\n } else {\n store.dispatch(handlePopState(e.state));\n }\n },\n },\n sentry: sendErrorReports && {\n dsn: SENTRY_DSN,\n env: TOKEN_ENV,\n release: gitSha,\n stateRedactor: getRedactedState,\n },\n tracerConfig: {},\n env: TOKEN_ENV,\n};\n\nconst initApp = async () => {\n try {\n syncLocalStorageVersion();\n const state = sessionStorageWrapper.get('reduxState');\n if (state) {\n const tokenRequestId = state.tokenRequest?.request.id;\n const vrpConsentId = state.vrp?.request.vrpId;\n if (state.tokenRequest?.tpp?.configurations?.colors) {\n if (tokenRequestId) {\n await addCustomCss(tokenRequestId);\n } else if (vrpConsentId) {\n await addCustomCss(vrpConsentId, 'VRP_CONSENT');\n }\n }\n\n // Sets the language and translation attributes of the tag.\n setHtmlLanguageAttribute(state.shared.locale);\n document.documentElement.setAttribute('translate', 'no');\n }\n } catch (e) {\n console.error(e); // eslint-disable-line\n }\n\n const app = new App(options);\n app.handleDefault(() =>\n throwError(\n new TokenException(EXCEPTION_INVALID_PATH, 'Path is invalid'),\n ),\n )\n .handle(/terms/, () => changeRoute(ROUTE_TERMS_CONDITIONS), {\n restoreState: true,\n beforeLoad: state => {\n return state;\n },\n })\n .handle(buildPathReqEx('/(app/?)?$'), validateContext)\n .handle(buildPathReqEx('/app/config$'), () => changeRoute(ROUTE_CONFIG))\n .handle(buildPathReqEx('/app/request-token'), () =>\n initiateRedirectFlow(),\n )\n .handle(buildPathReqEx('/app/initiation'), () => handleInitiation())\n .handle(\n buildPathReqEx('/app/v2/callback'),\n initiateBankCallbackFlowV2,\n {\n restoreState: true,\n beforeLoad: state => {\n blockUserToGoBack();\n if (state) {\n state.shared.route.route.current.id = 'ROUTE_LOADING';\n }\n return state;\n },\n },\n )\n .handle(\n buildPathReqEx('/app/pisp/confirmation$'),\n initiatePaymentInitStatus,\n {\n restoreState: true,\n beforeLoad: state => {\n blockUserToGoBack();\n if (state) {\n state.shared.route.route.current.id = 'ROUTE_LOADING';\n }\n return state;\n },\n },\n )\n .handle(\n buildPathReqEx('/app/auth/callback$'),\n initiateBankCallbackFlow,\n {\n restoreState: true,\n beforeLoad: state => {\n blockUserToGoBack();\n if (window.name === TOKEN_BANK_POPUP) {\n TokenCommunicator.setup();\n TokenCommunicator.dispatchMessage(\n TOKEN_BANK_POPUP_CLOSE,\n window.location.href,\n );\n setTimeout(window.close, 100);\n }\n if (state) {\n state.shared.route.route.current.id = 'ROUTE_LOADING';\n }\n return state;\n },\n },\n )\n .handle(\n buildPathReqEx('/app/auth/credentials$'),\n initiateCredentialsFlow,\n {\n restoreState: false,\n beforeLoad: state => {\n allowUserToGoBack();\n if (state) {\n state.shared.route.route.current.id = 'ROUTE_LOADING';\n }\n return state;\n },\n },\n )\n .register(ROUTE_TERMS_CONDITIONS,