\n
\n );\n}\n\nBankTransferItem.propTypes = {\n item: PropTypes.bankAccount.isRequired,\n gridWidth: PropTypes.number.isRequired,\n i18nBankTransferPrefix: PropTypes.string.isRequired,\n};\n\nconst BankTransfer = ({ data, i18nPrefix, bankCurrency }) => {\n const containerWidth = data.length * colWidth;\n const itemWidth = maxColumnWidth / data.length;\n const i18nBankTransferPrefix = `${i18nPrefix}-payment-options-bank-transfer`;\n const bankTransferTitleKey =\n bankCurrency === CURRENCY_USD\n ? `${i18nBankTransferPrefix}-title-usd`\n : `${i18nBankTransferPrefix}-title`;\n\n return (\n {item.bankName}
\n- \n
- {i18n(`${i18nBankTransferPrefix}-payee`)} \n
- {item.accountName} \n {showBranchCode(item.bankCountry) && (\n
- {branchCodeLabel} \n
- {item.bankCode} \n
- {i18n(`${i18nBankTransferPrefix}-account-no`)} \n
- {item.accountNumber} \n {item.swift && (\n
- {i18n(`${i18nBankTransferPrefix}-swift`)} \n
- {item.swift} \n
- {i18n(`${i18nBankTransferPrefix}-iban`)} \n
- {item.iban} \n
- {i18n(`${i18nBankTransferPrefix}-reference`)} \n
- {item.userPaymentReference} \n
- {i18n(`${i18nBankTransferPrefix}-address`)} \n
- {item.bankAddress} \n
\n
\n );\n};\n\nBankTransfer.propTypes = {\n data: PropTypes.arrayOf(PropTypes.bankAccount).isRequired,\n i18nPrefix: PropTypes.string.isRequired,\n bankCurrency: PropTypes.string.isRequired,\n};\n\nBankTransfer.displayName = 'BankTransfer';\nexport default BankTransfer;\n","import React from 'react';\nimport i18n from 'libs/i18n';\nimport PropTypes from 'prop-types';\n\nconst BPay = ({ data, i18nPrefix }) => {\n const i18nBPayPrefix = `${i18nPrefix}-payment-options-bpay`;\n return (\n {i18n(bankTransferTitleKey)}
\n\n {data.map((bank) => (\n
\n \n
\n );\n};\n\nBPay.propTypes = {\n data: PropTypes.shape({\n billerCode: PropTypes.string.isRequired,\n reference: PropTypes.string.isRequired,\n }),\n i18nPrefix: PropTypes.string.isRequired,\n};\n\nBPay.displayName = 'BPay';\nexport default BPay;\n","import React from 'react';\nimport i18n from 'libs/i18n';\nimport PropTypes from 'prop-types';\n\nconst BillPayment = ({ data, i18nPrefix }) => {\n const i18nBillPaymentPrefix = `${i18nPrefix}-payment-options-bill-payment`;\n const i18nFinancialInstitutionKeys = [\n `${i18nPrefix}-payment-options-bill-payment-financial-institutions-rbc`,\n `${i18nPrefix}-payment-options-bill-payment-financial-institutions-bmo`,\n `${i18nPrefix}-payment-options-bill-payment-financial-institutions-credit-unions`,\n ];\n return (\n {i18n(`${i18nBPayPrefix}-title`)}
\n \n\n
\n {i18n(`${i18nBPayPrefix}-instructions`)}
\n\n
\n - \n
- {i18n(`${i18nBPayPrefix}-biller-code`)} \n
- {data.billerCode} \n
- {i18n(`${i18nBPayPrefix}-reference`)} \n
- {data.reference} \n
\n
\n );\n};\n\nBillPayment.propTypes = {\n data: PropTypes.shape({\n biller: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n }),\n i18nPrefix: PropTypes.string.isRequired,\n};\n\nBillPayment.displayName = 'BillPayment';\nexport default BillPayment;\n","import { connect, Dispatch } from 'react-redux';\nimport { toastCreator } from 'components/Toast';\nimport { i18n } from 'libs/i18n';\nimport { reduxForm, formValueSelector } from 'redux-form';\nimport error from 'validation/error';\nimport * as moment from 'moment';\nimport Component from './Component';\nimport { partition, actions, IPartition } from './reducers';\nimport { DEBIT_CARD_OPTIONS, fieldNames, formName } from './constants';\n\nconst selector = formValueSelector(formName);\n\ninterface IContainerProps {\n onSuccess: (values: any) => void;\n onCancel: () => void;\n paymentAmount: string;\n dealId: string;\n}\n\nconst message = (label: string, props?: any): string =>\n i18n(`view-transfer-payment-options-debit-card-modal-${label}`, props);\n\nexport const validateCardExpiryDate = (values: any): {} | undefined => {\n if (values.card_expirationMonth && values.card_expirationYear) {\n const today = moment();\n const currentMonth = today.month() + 1;\n const currentYear = today.year();\n\n /* eslint-disable-next-line */\n const expirationMonth = parseInt(values.card_expirationMonth, 10);\n /* eslint-disable-next-line */\n const expirationYear = parseInt(values.card_expirationYear, 10);\n\n if (expirationYear === currentYear && expirationMonth < currentMonth) {\n const errorMessage = message('expiration-mm-invalid');\n return {\n card_expirationMonth: error(errorMessage),\n };\n }\n }\n\n return undefined;\n};\n\nexport const updateCardExpiryValue = (values: any) => {\n const monthPrefix =\n values.card_expirationMonth && values.card_expirationMonth.length === 1 ? '0' : '';\n const yearPrefix =\n values.card_expirationYear && values.card_expirationYear.length === 2 ? '20' : '';\n\n values.card_expiry_date =\n `${monthPrefix}${values.card_expirationMonth}-` +\n `${yearPrefix}${values.card_expirationYear}`;\n};\n\nconst initialValues: any = {\n [fieldNames.saveCardForLater]: true,\n [fieldNames.debitCardOption]: DEBIT_CARD_OPTIONS.NEW,\n};\n\nconst mapStateToProps = (state: any, ownProps: IContainerProps) => {\n const cyberSourceData = state[partition].get(\"cyberSourceData\");\n const saveCardForLater = state[partition].get(\"saveCardForLater\");\n const cardOption = cyberSourceData.lastFourDigitsOfSavedCard\n ? DEBIT_CARD_OPTIONS.SAVED\n : DEBIT_CARD_OPTIONS.NEW;\n\n initialValues[fieldNames.saveCardForLater] = saveCardForLater;\n initialValues[fieldNames.debitCardOption] = cardOption;\n\n if (cyberSourceData.signedFields) {\n Object.keys(cyberSourceData.signedFields).map(\n (key: any) => (initialValues[key] = cyberSourceData.signedFields[key]),\n );\n }\n\n return {\n cyberSourceData,\n initialValues,\n selectedCardOption: selector(state, fieldNames.debitCardOption),\n };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch{i18n(`${i18nBillPaymentPrefix}-title`)}
\n\n
\n {i18n(`${i18nBillPaymentPrefix}-info`)}
\n- \n {i18nFinancialInstitutionKeys.map((key) => (\n
- {i18n(key)} \n ))}\n
\n
\n - \n
- {i18n(`${i18nBillPaymentPrefix}-biller`)} \n
- {data.biller} \n
- \n {i18n(`${i18nBillPaymentPrefix}-account`)}\n \n
- {data.account} \n
\n
\n ) : null;\n }\n\n render() {\n const {\n dealId,\n paymentAmount,\n cyberSourceData,\n selectedCardOption,\n handleSubmit,\n saveCardChanged,\n } = this.props;\n\n return (\n {i18n(`${i18nDebitCardPrefix}-option-title`)}
\n\n
\n );\n }\n}\n\nexport default DebitCard;\n","export { default } from './DebitCardModal';\n","import * as React from 'react';\nimport i18n from 'libs/i18n';\nimport { FormProps } from 'redux-form';\nimport { Footers } from 'components/Modals';\nimport NewCardForm from './NewCardForm';\nimport SavedCardForm from './SavedCardForm';\nimport CyberSourceFingerPrint from './CyberSourceFingerPrint';\nimport { DEBIT_CARD_OPTIONS, fieldNames } from '../constants';\n\ninterface IFormData {\n card_type: string;\n card_number: string;\n card_expirationMonth: number;\n card_expirationYear: number;\n card_cvn: string;\n card_expiry_date: string;\n}\n\ninterface IComponentProps extends FormProps\n {i18n(`${i18nDebitCardPrefix}-title`)}\n
\n \n\n \n \n {i18n(`${i18nDebitCardPrefix}-pay-button`)}\n \n {this.state.modalOpen && (\n
\n {i18n(`${i18nDebitCardPrefix}-instructions-1`)}
\n- \n
- {i18n(`${i18nDebitCardPrefix}-instructions-2`)} \n
- {i18n(`${i18nDebitCardPrefix}-instructions-3`)} \n
\n {\n this.form = form;\n }}\n noValidate\n method=\"POST\"\n action={cyberSourceData.silentOrderPOSTUrl}\n onSubmit={onSuccess(this.submitForm)}\n >\n
\n );\n }\n}\n\nexport default DebitCardModal;\n","import * as React from 'react';\nimport i18n from 'libs/i18n';\nimport { Modal } from 'components/Modals';\nimport SimpleField from 'components/Form/SimpleField';\nimport FormCheckbox from 'components/Form/Checkbox';\nimport * as validation from 'validation';\nimport { fieldNames } from '../constants';\n\ninterface IFormData {\n /*\n These field names maps directly to the cybersource parameters as per the docomentation and should not be changed.\n http://apps.cybersource.com/library/documentation/dev_guides/Secure_Acceptance_SOP/html/wwhelp/wwhimpl/js/html/wwhelp.htm#href=app_fields_SOP.10.2.html\n */\n card_type: string;\n card_number: string;\n card_expirationMonth: number;\n card_expirationYear: number;\n card_cvn: string;\n card_expiry_date: string;\n}\n\nconst digitsOnlyRegex = /^[0-9]*$/;\nconst acceptedCardTypes = ['visa', 'master-card'];\nconst message = (label: string, props?: any) =>\n i18n(`view-transfer-payment-options-debit-card-modal-${label}`, props);\n\ninterface IComponentProps {\n footer: JSX.Element;\n paymentAmount: string;\n saveCardChanged: (checked: boolean | string) => void;\n}\n\nclass Component extends React.Component\n
\n {message('amount-label')}
\n {paymentAmount}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {message('amount-label')}
\n {paymentAmount}\n\n \n
\n {`****${lastFourDigitsOfSavedCard}`}
\n\n \n 
\n \n \n \n \n\n \n
\n );\n};\n\nexport default Component;\n","/* eslint-disable */\nimport { connect, Dispatch } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { actions, partition } from './reducers';\nimport Component from './Component';\n\nconst HEADER_PARTITION = 'headerV2';\n\nconst mapStateToProps = (state: any) => {\n const paymentOptions = state[partition];\n const headerV2Partition = state[HEADER_PARTITION];\n const user = headerV2Partition.get('User') || {};\n return {\n customerRefNumber: user.CustomerReferenceNumber,\n data: paymentOptions.get('accounts'),\n };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch\n
\n );\n }\n}\n\nexport default Component;\n","import * as React from 'react';\nimport i18n from 'libs/i18n';\nimport { BankTransfer, BPay, BillPayment } from 'components/PaymentOptions';\nimport ModalInfoMessage from 'components/ModalInfoMessage';\nimport { FeatureFlagsConsumer } from 'components/FeatureFlags';\nimport ldFlags from 'constants/ldFlags';\nimport { Accounts } from './Component';\nimport { i18nPrefix } from '../constants';\nimport { currencyCodes } from 'components/BankDetails/constants';\n\ntype IComponentProps = {\n accounts: Accounts;\n};\n\ntype IComponentState = {\n visible: boolean;\n};\n\nclass Component extends React.Component{i18n(`${i18nPrefix}-title`)}
\n{i18n(`${i18nPrefix}-instruction`, { customerRefNumber })}
\n {accounts && accounts.length > 0 ? (\n accounts.map((currency) => (\n\n {i18n(`${i18nPrefix}-payment-options-no-options`)}\n
\n )}\n\n
\n {isBuyCurrencyEUR && (\n \n \n )}\n
\n \n );\n }\n\n render() {\n const { accounts } = this.props;\n const btnLinkCss = this.state.visible ? 'expand' : 'collapse';\n return (\n \n {accounts.bpay &&
\n \n this.setState({ visible: !this.state.visible })}\n >\n \n
\n );\n }\n}\n\nexport default Component;\n","export const DEBIT_CARD_OPTIONS = {\n NEW: 'new',\n SAVED: 'saved',\n};\nexport const actionPrefix = 'DEBIT_CARD/';\nexport const formName = 'debitCardForm';\nexport const fieldNames = {\n debitCardOption: 'debitCardOption',\n deviceFingerprintId: 'device_fingerprint_id',\n saveCardForLater: 'saveCardForLater',\n};\n","export { default } from './Container';\nexport { default as reducers } from './reducers';\n","export const i18nPrefix = 'payment-accounts';\nexport const FEATURE_NAMESPACE = 'PAYMENT_ACCOUNTS';\n"],"sourceRoot":""}\n
\n {`${accounts.currencyName} (${accounts.currencyCode})`}
\n\n \n
\n \n {this.renderPaymentDetails()}\n