\n \n this.handleChangeEmail(event.target.value, 'errMessageEmail')\n }\n onBlur={(event) => this.handleBlur(event.target.value)}\n />\n
\n );\n }\n}\n\nexport default Email;\n","/*\n\tThis validation was pulled from https://github.paypal.com/ConsumerWeb-R/consonbdnodeweb/blob/develop/lib/validator.js#L143\n\tand was converted from OOP to a more simplistic functional structure with ES6 flare.\n */\n\nexport default function (password) {\n let warningCodes = [];\n\n // check empty\n if (!password || !password.trim()) {\n warningCodes.push('_IS_NULL');\n }\n // length check\n const minLength = 8;\n if (password.length < minLength) {\n warningCodes.push('_TOO_SHORT');\n }\n const maxLength = 20;\n if (password.length > maxLength) {\n warningCodes.push('_TOO_LONG');\n }\n // repeated sequence\n const disallowedRepetition = /(.)\\1{3}/g;\n if (password.match(disallowedRepetition)) {\n warningCodes.push('_CONTAINS_REPEATED_CHARACTERS');\n }\n // consecutive Number\n const disallowedNumberPatterns =\n /0123|1234|2345|3456|4567|5678|6789|7890|8901|9012/g;\n if (password.match(disallowedNumberPatterns)) {\n warningCodes.push('_CONTAINS_NUMBER_SEQUENCE');\n }\n // sequence Character\n const disallowedSequences =\n /qwer|wert|erty|rtyu|tyui|yuio|uiop|asdf|sdfg|dfgh|fghj|ghjk|hjkl|zxcv|xcvb|cvbn|vbnm|QWER|WERT|ERTY|RTYU|TYUI|YUIO|UIOP|ASDF|SDFG|DFGH|FGHJ|GHJK|HJKL|ZXCV|XCVB|CVBN|VBNM/g;\n if (password.match(disallowedSequences)) {\n warningCodes.push('_CONTAINS_LETTER_SEQUENCE');\n }\n // sequence Special Characters\n const disallowedCharacters =\n /\\`123|890-|90-=|iop[|op[]|p\\[\\]\\\\|jkl\\;|kl\\;'|bnm,|nm,.|m,.\\/|~!@\\#|!@\\#$|@#\\$%|#\\$%\\^|\\$%\\^&|\\%\\^&\\*|\\^&\\*\\(|&\\*\\(\\)|\\*\\(\\)\\_|\\(\\)\\_\\+|iop\\[|op\\[\\]|p\\[\\]\\\\|BNM<|NM<>|M<>\\?|IOP{}|OP{}|P{}\\|/g;\n if (password.match(disallowedCharacters)) {\n warningCodes.push('_CONTAINS_NUMBER_LETTER_SEQUENCE');\n }\n // blacklisted password\n const blacklisted_passwords = [\n 'password',\n 'access14',\n 'americanidol',\n 'baseball',\n 'baseball1',\n 'bigdaddy',\n 'blink182',\n 'butthead',\n 'cocacola',\n 'computer',\n 'corvette',\n 'cowboys',\n 'danielle',\n 'dolphins',\n 'einstein',\n 'firebird',\n 'football',\n 'football1',\n 'iloveyou',\n 'iloveyou1',\n 'internet',\n 'jennifer',\n 'jordan23',\n 'liverpool',\n 'liverpool1',\n 'marlboro',\n 'maverick',\n 'melanie',\n 'michelle',\n 'midnight',\n 'mistress',\n 'mountain',\n 'myspace1',\n 'password',\n 'password1',\n 'princess1',\n 'qwertyui',\n 'redwings',\n 'rush2112',\n 'samantha',\n 'scorpion',\n 'slipknot1',\n 'srinivas',\n 'startrek',\n 'starwars',\n 'sunshine',\n 'superman',\n 'superman1',\n 'swimming',\n 'trustno1',\n 'victoria',\n 'whatever',\n 'passwort',\n 'passwort1',\n 'frankfurt',\n 'fussball',\n ];\n if (blacklisted_passwords.includes(password.toLowerCase())) {\n warningCodes.push('_IS_BLACKLISTED');\n }\n // contains spaces\n if (/\\s/.test(password)) {\n warningCodes.push('_CONTAINS_SPACES');\n }\n // has illegal chars & allow only 7-bit printable chars\n if (\n password\n .split('')\n .some((char) => char.charCodeAt(0) < 32 || char.charCodeAt(0) > 126)\n ) {\n warningCodes.push('_HAS_ILLEGAL_CHARACTERS');\n }\n\n return warningCodes;\n}\n","import * as dateUtils from './dateUtils';\n\n/**\n * Localization Utilities\n *\n * Helps to solve problems when working with different countries and locales.\n * Makes it easier when validating, formatting, getting date values.\n *\n */\n\n/**\n * The list of all supported localized countries and their settings.\n * DOBPattern, occupations and nationalIds can also be passed as props to component and props will take priority\n */\nconst countryInfo = {\n US: {\n showDOB: false,\n showOccupation: false,\n showNationality: false,\n showLegalCheckBox: false,\n showLegalTextOnly: true,\n showPasswordHint: false,\n showConsentCheckBox: false,\n consentCheckBoxEnabled: false,\n DOBPattern: 'MM/DD/YYYY', // DOBPattern can also be passed as props to component\n occupations: [],\n showGuestTermsText: true,\n showGuestTermsCheckBox: false,\n showGuestCPF: false,\n },\n CA: {\n showDOB: true,\n showOccupation: true,\n showNationality: false,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: true,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'MM/DD/YYYY',\n showGuestTermsText: true,\n showGuestTermsCheckBox: false,\n showPhoneCountryCode: false,\n occupations: [\n // occupations can also be passed as props to component\n { label: 'Accounting', value: 'Accounting' },\n { label: 'Administration', value: 'Administration' },\n { label: 'Arts, Culture', value: 'Arts, Culture' },\n { label: 'Business', value: 'Business' },\n { label: 'Communications', value: 'Communications' },\n { label: 'Customer Service', value: 'Customer Service' },\n { label: 'Education', value: 'Education' },\n { label: 'Energy, Utilities', value: 'Energy, Utilities' },\n { label: 'Engineering', value: 'Engineering' },\n { label: 'Finance', value: 'Finance' },\n { label: 'Financial Services', value: 'Financial Services' },\n { label: 'Government', value: 'Government' },\n { label: 'Health', value: 'Health' },\n { label: 'Hospitality', value: 'Hospitality' },\n { label: 'Human Resources', value: 'Human Resources' },\n { label: 'Internet', value: 'Internet' },\n { label: 'Legal', value: 'Legal' },\n { label: 'Manufacturing', value: 'Manufacturing' },\n { label: 'Marketing', value: 'Marketing' },\n { label: 'Non-profit', value: 'Non-profit' },\n { label: 'Recreation', value: 'Recreation' },\n { label: 'Religion', value: 'Religion' },\n { label: 'Research', value: 'Research' },\n { label: 'Sales', value: 'Sales' },\n { label: 'Sports, Fitness', value: 'Sports, Fitness' },\n { label: 'Student', value: 'Student' },\n { label: 'Technology', value: 'Technology' },\n { label: 'Trade', value: 'Trade' },\n { label: 'Transportation', value: 'Transportation' },\n { label: 'Travel', value: 'Travel' },\n ],\n showGuestCPF: false,\n },\n GB: {\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: true,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n AU: {\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: false,\n showLegalCheckBox: true,\n showLegalTextOnly: true,\n showPasswordHint: true,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: false,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n FR: {\n // FRANCE\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n IT: {\n // ITALY\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n IL: {\n // ISRAEL\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: false,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: false,\n consentCheckBoxEnabled: false,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showGuestCPF: false,\n },\n ES: {\n // SPAIN\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n IE: {\n // IRELAND\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: false,\n showPhoneCountryCode: false,\n showGuestCPF: false,\n },\n NL: {\n // NETHERLANDS\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: true,\n showGuestCPF: false,\n },\n AT: {\n // AUSTRIA\n showDOB: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD.MM.YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: true,\n showGuestCPF: false,\n },\n CH: {\n // SWITZERLAND\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: true,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: true,\n consentCheckBoxEnabled: true,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: true,\n showNationalId: true,\n nationalIds: [\n // nationalIds can also be passed as props to component\n { label: 'Identity card', value: 'NATIONAL_ID' },\n { label: 'Passport', value: 'PASSPORT_NUMBER' },\n { label: 'Driver licence', value: 'DRIVERS_LICENSE' },\n ],\n showGuestCPF: false,\n },\n BR: {\n // BRAZIL\n showDOB: true,\n showDOBHelp: true,\n showDOBMust18: true,\n showOccupation: false,\n showNationality: false,\n showLegalCheckBox: true,\n showLegalTextOnly: false,\n showPasswordHint: false,\n showConsentCheckBox: false,\n consentCheckBoxEnabled: false,\n DOBPattern: 'DD/MM/YYYY',\n occupations: [],\n showGuestTermsText: false,\n showGuestTermsCheckBox: true,\n showPhoneCountryCode: true,\n showGuestCPF: true,\n },\n};\n\n/**\n * Returns a valid settings for specific country.\n *\n * @param {string} country code.\n * @return {Object} country settings.\n */\nexport function getCountryInfo(country = 'US') {\n return countryInfo[country] ? countryInfo[country] : countryInfo.US;\n}\n\n/**\n * Returns a date of birth string depending on the country format.\n *\n * @param {string} date of birth\n * @param {string} country code\n * @return {string} birthDate\n */\nexport function getFormattedDob(dob, DOBPattern) {\n return dateUtils.getFormattedDob(dob, DOBPattern);\n}\n\n/**\n * Validates date of birth from DoB string.\n *\n * @param {string} date of birth\n * @return {boolean} is valid\n */\nexport function validateDob(dob, DOBPattern) {\n return dateUtils.validateDob(dob, DOBPattern);\n}\n\n/**\n * Validates date of birth must be 18 Years from DoB string.\n *\n * @param {string} date of birth\n * @return {boolean} is valid\n */\nexport function validateDobIs18(dob, DOBPattern) {\n return dateUtils.isOfLegalAge(dob, DOBPattern);\n}\n","/**\n * NationalId component used to get the user's national ID type and value\n * - used with account creation and can be a hidden input\n */\n\nimport PropTypes from 'prop-types';\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport { TextInput, DropdownMenu } from '@paypalcorp/pp-react';\nimport { StyleSheet, css } from 'aphrodite';\nimport { getCountryInfo } from './util/localizer';\nimport _isEmpty from 'lodash/isEmpty';\n\nconst STYLES = StyleSheet.create({\n typeWrapper: {\n margin: '10px 0 0',\n position: 'relative',\n },\n errorMessage: {\n transition: 'all 0.25s ease-in-out',\n },\n dropdown: {\n padding: 0,\n textIndent: 12,\n boxSizing: 'content-box',\n appearance: 'none',\n },\n arrow: {\n position: 'absolute',\n right: 10,\n top: '50%',\n cursor: 'default',\n pointerEvents: 'none',\n },\n arrowError: {\n marginTop: -17,\n },\n errorStyles: {\n height: '100%',\n },\n});\n\nclass NationalId extends React.Component {\n constructor(props) {\n super(props);\n const nationalIds = !_isEmpty(this.props.nationalIds)\n ? this.props.nationalIds\n : getCountryInfo(this.props.country).nationalIds;\n this.state = {\n nationalIdTypeIdx: nationalIds.findIndex(\n (item) => item.value === this.props.defaultIdType\n ),\n };\n }\n static propTypes = {\n country: PropTypes.string,\n labelNationalIdType: PropTypes.string,\n labelNationalIdNumber: PropTypes.string,\n helpText: PropTypes.string,\n showErrorMessages: PropTypes.bool,\n value: PropTypes.string,\n errorMessageType: PropTypes.string,\n errorMessageNumber: PropTypes.string,\n defaultIdType: PropTypes.string,\n nationalIds: PropTypes.array,\n changeEmail: PropTypes.func,\n handleFocus: PropTypes.func,\n handleBlur: PropTypes.func,\n resetNationalId: PropTypes.func,\n validNationalIdType: PropTypes.func,\n validNationalIdNumber: PropTypes.func,\n };\n\n static defaultProps = {\n showErrorMessages: true,\n handleFocus: () => {},\n handleBlur: () => {},\n resetNationalId: () => {},\n validNationalIdType: () => {},\n validNationalIdNumber: () => {},\n };\n\n /**\n * Call parent's handleFocus\n * @param {String} nationalIdNumber - national ID number\n */\n handleFocus = (nationalIdNumber) => {\n this.props.handleFocus(nationalIdNumber);\n };\n\n /**\n * Call parent's handleBlur\n * @param {String} nationalIdNumber - national ID number\n */\n handleBlur = (nationalIdNumber) => {\n this.props.handleBlur(nationalIdNumber);\n };\n getNationalIds = () => {\n const countryInfo = getCountryInfo(this.props.country);\n // Getting natiponal id's from props or from localizer\n return !_isEmpty(this.props.nationalIds)\n ? this.props.nationalIds\n : countryInfo.nationalIds;\n };\n getNationalIdOptions = () => {\n const nationalIds = this.getNationalIds();\n return nationalIds.map((item) => {\n return {\n primaryText: item.label,\n };\n });\n };\n\n /**\n * handleChangeNationalIdType\n * @param {Number} index - national ID type index\n */\n handleChangeNationalIdType = (index) => {\n this.setState({ nationalIdTypeIdx: index });\n const nationalIds = this.getNationalIds();\n let nationalIdType = nationalIds[index].value;\n\n if (nationalIdType) {\n this.props.validNationalIdType(nationalIdType);\n } else {\n this.props.resetNationalId();\n }\n };\n\n /**\n * Call parent's handleFocus\n * @param {String} nationalIdNumber - national ID number\n */\n handleChangeNationalNumber = (nationalIdNumber) => {\n this.setState({ nationalIdNumber });\n if (nationalIdNumber) {\n this.props.validNationalIdNumber(nationalIdNumber);\n } else {\n this.props.resetNationalId();\n }\n return nationalIdNumber;\n };\n\n render() {\n const countryInfo = getCountryInfo(this.props.country);\n const {\n value: initialValue,\n errorMessageType,\n errorMessageNumber,\n showErrorMessages,\n } = this.props;\n\n let typeWrapperClassNames = classNames(css(STYLES.typeWrapper), {\n 'vx_has-error-with-message ppvx_field--error': errorMessageType,\n });\n\n // define the wrapper classNames, which handle showing error messages\n let numberWrapperClassNames = classNames(css(STYLES.typeWrapper), {\n 'vx_has-error-with-message ppvx_field--error': errorMessageNumber,\n });\n\n return (\n \n {countryInfo.showNationalId && (\n
\n )}\n \n );\n }\n}\n\nexport default NationalId;\n","/*\n * This component is awfully similar to CreateAccountPost, but with some interesting use case differences.\n *\n * Namely, this component is planned to be used amongst other fields (and won't have it's own submit button), AND these fields\n * don't have to be completed. As a result, it will look to this.props.showValidation to determine if errors should actually be shown (if the user clicks\n * some other submit with invalid details, for example). This component keeps track of what is wrong, the consumer of the component determines if it's a good time to show the errors.\n *\n * Also, because it's not (always ** read last paragraph **) necessary for the consumer to worry about this component's validation (if a user chooses not to create an account),\n * this component will call this.props.handleCreateAccountCheckbox with a boolean designating the user's intent to do so and that the consumer must now\n * wait for valid password info before proceeding.\n *\n * Lastly, this component will assess the validation of the content in its fields every time state or props are updated.\n * If all of the content is valid at any point it will fire this.props.handleValidInfo() which will allow the consumer to know\n * the chosen password — and implicitly — that this part of the form is completed. (We'll also call resetValidInfo() if this is ever made untrue again.)\n *\n * If this component is used with 'mandatory' prop set to 'true', the optional checkbox will be hidden, and the password inputs will be visible always.\n * Additionally, the this.props.handleCreateAccountCheckbox will not be called, because the consumer should assume that they should wait for\n * this.props.handleValidInfo() to show that the user successfully completed the, now mandatory, password selection.\n * */\n\nimport PropTypes from 'prop-types';\n\nimport React from 'react';\nimport { StyleSheet, css } from 'aphrodite';\nimport classnames from 'classnames';\nimport passwordValidator from './util/passwordValidator';\nimport {\n FULL,\n VARIANT_VALUEPROP_1,\n VARIANT_VALUEPROP_2,\n VARIANT_VALUEPROP_3,\n} from '../utility/constants';\nimport {\n TextInput,\n Checkbox,\n HeadingText,\n CaptionText,\n DropdownMenu,\n Switch,\n} from '@paypalcorp/pp-react';\nimport NationalId from './NationalId';\nimport {\n getCountryInfo,\n getFormattedDob,\n validateDob,\n validateDobIs18,\n} from './util/localizer';\nimport isEmpty from 'lodash/isEmpty';\nimport { trackErrorIM } from '../fpti/fpti';\n\nconst styles = StyleSheet.create({\n mainTitle: {\n marginBottom: '10px',\n },\n mainBlurb: {\n marginBottom: '15px',\n },\n itsFreeLine: {\n margin: '30px 0 15px 0',\n },\n shiftRight: {\n marginLeft: '40px',\n },\n hide: {\n display: 'none',\n },\n createAccountCheckboxWrapper: {\n position: 'absolute',\n width: 'inherit',\n display: 'inline',\n },\n createAccountSwitch: {\n ':before': {\n overflow: 'hidden',\n border: '1px solid #9b9b9b',\n },\n },\n createAccountLine: {\n marginLeft: '40px',\n },\n passwordWarningWrapper: {\n background: '#fff7f7',\n padding: '10px 10px 5px',\n borderRadius: 5,\n border: '1px solid #c72e2e',\n marginTop: 15,\n },\n passwordHintWrapper: {\n background: '#eef1f6',\n padding: 5,\n paddingLeft: 40,\n borderRadius: 5,\n marginTop: 5,\n fontSize: 12,\n },\n passwordWarningItem: {\n margin: 0,\n paddingBottom: 5,\n },\n legalCheckboxWrapper: {\n position: 'absolute',\n width: 'inherit',\n display: 'inline',\n },\n legalCheckbox: {\n ':before': {\n overflow: 'hidden',\n border: '1px solid #9b9b9b',\n },\n },\n redBorder: {\n ':before': {\n background: '#fff7f7',\n border: '1px solid #c72e2e',\n },\n },\n legalBlurb: {\n lineHeight: '18px',\n marginLeft: '40px',\n },\n legalTextOnly: {\n lineHeight: '18px',\n },\n button: {\n display: 'block',\n margin: '40px auto 0',\n },\n passwordWrapper: {\n marginBottom: '16px',\n },\n dobWrapper: {\n marginBottom: '16px',\n },\n dobHelpText: {\n border: 'solid 1px #0093e0',\n background: '#f2fafe',\n color: 'black',\n borderTop: 'none',\n },\n dropdown: {\n padding: 0,\n textIndent: 12,\n boxSizing: 'content-box',\n appearance: 'none',\n },\n noHelperText: {\n marginTop: '16px',\n },\n});\nclass CreateAccountPre extends React.Component {\n static propTypes = {\n mainTitle: PropTypes.string.isRequired,\n mainBlurb: PropTypes.string.isRequired,\n legalBlurbHTML: PropTypes.object.isRequired,\n createAccountCheckboxContent: PropTypes.string.isRequired,\n handleValidInfo: PropTypes.func.isRequired,\n resetValidInfo: PropTypes.func.isRequired,\n\n handleAllValidInfo: PropTypes.func,\n resetAllValidInfo: PropTypes.func,\n\n legalOnlyHTML: PropTypes.object,\n legalOnlyHTMLShort: PropTypes.object,\n\n labelnationality: PropTypes.string,\n consentBlurbHTML: PropTypes.object,\n supportedCountries: PropTypes.array,\n occupations: PropTypes.array,\n\n showValidationErrors: PropTypes.bool.isRequired,\n itsFreeLine: PropTypes.string,\n createAccountHelp1: PropTypes.string,\n createAccountHelp2: PropTypes.string,\n labeldob: PropTypes.string,\n helpdob: PropTypes.string,\n dobPattern: PropTypes.string,\n dobHelp: PropTypes.string,\n occupationError: PropTypes.bool,\n nationalityError: PropTypes.bool,\n defaultIdType: PropTypes.string,\n isNNA: PropTypes.bool,\n\n label1: PropTypes.string,\n handleFocusOnPasswordOne: PropTypes.func,\n label2: PropTypes.string,\n handleCreateAccountCheckbox: PropTypes.func,\n showCreateAccountFields: PropTypes.bool,\n mandatory: PropTypes.bool,\n country: PropTypes.string,\n labelocc: PropTypes.string,\n passwordWarnings: PropTypes.shape({\n _MISMATCH: PropTypes.string.isRequired,\n _IS_NULL: PropTypes.string.isRequired,\n _TOO_SHORT: PropTypes.string.isRequired,\n _TOO_LONG: PropTypes.string.isRequired,\n _CONTAINS_REPEATED_CHARACTERS: PropTypes.string.isRequired,\n _CONTAINS_NUMBER_SEQUENCE: PropTypes.string.isRequired,\n _CONTAINS_LETTER_SEQUENCE: PropTypes.string.isRequired,\n _CONTAINS_NUMBER_LETTER_SEQUENCE: PropTypes.string.isRequired,\n _IS_BLACKLISTED: PropTypes.string.isRequired,\n _CONTAINS_SPACES: PropTypes.string.isRequired,\n _HAS_ILLEGAL_CHARACTERS: PropTypes.string.isRequired,\n _LEGAL_CHECKBOX: PropTypes.string.isRequired,\n _INVALID_DOB: PropTypes.string,\n _REQUIRED_DOB: PropTypes.string,\n _HELP_DOB: PropTypes.string,\n _MUST_18_DOB: PropTypes.string,\n _OCCUPATION: PropTypes.string,\n _NATIONALITY: PropTypes.string,\n _NATIONAL_ID_TYPE: PropTypes.string,\n _NATIONAL_ID_NUMBER: PropTypes.string,\n _HINT1: PropTypes.string,\n _HINT2: PropTypes.string,\n _HINT3: PropTypes.string,\n }).isRequired,\n incentive: PropTypes.object,\n variantType: PropTypes.string,\n nnaValueProps: PropTypes.object,\n };\n\n constructor(props) {\n super(props);\n const { country = 'US', defaultIdType } = props;\n const countryInfo = getCountryInfo(country);\n\n this.state = {\n showCreateAccountFields: false,\n password1: '',\n password2: '',\n dateOfBirth: '', // For cross-border\n occupation: '', // For cross-border\n nationality: '',\n nationalIdNumber: '',\n nationalIdType: defaultIdType || '',\n acceptedLegal: false, // For cross-border\n consentCommunication: countryInfo.consentCheckBoxEnabled || false, // For cross-border\n showPasswordHint: false, // For cross-border\n showDateOfBirthHelp: false, // For Date of Birth\n passwordErrors: [],\n optional: false,\n };\n }\n\n componentDidMount() {\n this.preCheckSignUpToggle();\n }\n\n // every time the component updates, should check for valid info to fire to parent\n componentDidUpdate(prevProps, prevState) {\n // If someone where calling setState (or anything prompting rerender) within this.props.handleValidInfo or this.props.resetValidInfo\n // it would cause an infinite loop (component would rerender, passwords would still be valid, etc.).\n // This outer `if` statement checks that the password or checkbox has changed before calling the parent method.\n if (\n prevState.password1 !== this.state.password1 ||\n prevState.password2 !== this.state.password2 ||\n prevState.acceptedLegal !== this.state.acceptedLegal\n ) {\n const passwordErrors = passwordValidator(this.state.password1);\n // if the passwords match, have no error, and the user has accepted the legal agreement...\n if (\n this.doPasswordsMatch() &&\n !passwordErrors.length &&\n this.state.acceptedLegal\n ) {\n // call the prop function that signifies to the parent that everything is ready to go!\n this.props.handleValidInfo(this.state.password1);\n } else {\n // This covers the scenario where a user has valid information, but goes back and changes things to be invalid later\n // consumers need to know to clear the initial valid information from their stores.\n this.props.resetValidInfo();\n }\n }\n\n // This outer `if` statement checks that the password or acceptedLegal or dateOfBirth or occupation or nationalityor checkbox has changed before calling the parent method.\n if (\n prevState.password1 !== this.state.password1 ||\n prevState.password2 !== this.state.password2 ||\n prevState.acceptedLegal !== this.state.acceptedLegal ||\n prevState.dateOfBirth !== this.state.dateOfBirth ||\n prevState.occupation !== this.state.occupation ||\n prevState.nationality !== this.state.nationality ||\n prevState.nationalIdType !== this.state.nationalIdType ||\n prevState.nationalIdNumber !== this.state.nationalIdNumber ||\n prevState.consentCommunication !== this.state.consentCommunication\n ) {\n let {\n passwordValid = true,\n dobValid = true,\n occValid = true,\n legalValid = true,\n natValid = true,\n naIdTypeValid = true,\n naIdNoValid = true,\n } = {};\n\n const { country = 'US' } = this.props;\n const {\n password1,\n acceptedLegal,\n dateOfBirth,\n occupation,\n nationality,\n nationalIdType,\n nationalIdNumber,\n consentCommunication,\n } = this.state;\n const passwordErrors = passwordValidator(password1);\n const countryInfo = getCountryInfo(country);\n\n let userData = { password: password1 };\n passwordValid = this.doPasswordsMatch() && !passwordErrors.length;\n\n if (countryInfo.showLegalCheckBox) {\n userData.legalValid = acceptedLegal;\n legalValid = !!acceptedLegal;\n }\n\n if (countryInfo.showDOB) {\n userData.dateOfBirth = dateOfBirth;\n userData.dateOfBirthPattern = this.getDobPattern();\n dobValid = validateDob(dateOfBirth, userData.dateOfBirthPattern);\n }\n\n if (countryInfo.showOccupation) {\n userData.occupation = occupation;\n occValid = !!occupation;\n }\n\n if (countryInfo.showNationality) {\n userData.nationality = nationality;\n natValid = !!nationality;\n }\n\n if (countryInfo.showNationalId) {\n userData.nationalIdType = nationalIdType;\n naIdTypeValid = !!nationalIdType;\n }\n\n if (countryInfo.showNationalId) {\n userData.nationalIdNumber = nationalIdNumber;\n naIdNoValid = !!nationalIdNumber;\n }\n\n if (countryInfo.showConsentCheckBox) {\n userData.consentCommunication = consentCommunication;\n }\n\n if (\n passwordValid &&\n legalValid &&\n dobValid &&\n occValid &&\n natValid &&\n naIdTypeValid &&\n naIdNoValid\n ) {\n // If passwords are identical, have no errors, and legal has\n // been accepted. Call the prop function that signifies to the\n // parent that everything is ready to go!\n if (this.props.handleAllValidInfo) {\n this.props.handleAllValidInfo(userData);\n }\n } else if (this.props.resetAllValidInfo) {\n // This covers the scenario where a user has valid information,\n // but goes back and changes things to be invalid later\n // consumers need to know to clear the initial valid information\n // from their stores.\n this.props.resetAllValidInfo(userData);\n }\n }\n\n if (\n prevProps.showValidationErrors !== this.props.showValidationErrors &&\n this.props.showValidationErrors &&\n !isEmpty(this.state.passwordErrors)\n ) {\n trackErrorIM({\n errorCode: 'PASSWORD_VALIDATION_ERROR',\n errorMessage: this.state.passwordErrors.join(','),\n fieldName: 'password',\n });\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n // in the case that the user fills nothing out after ticking the create account box\n // we need to show password validation errors for empty password fields\n this.setState({\n passwordErrors: passwordValidator(this.state.password1),\n });\n\n // Set optional to false when its not mandatory\n // This is required for re-setting \"optional\" when it changes\n // to mandatory from optional\n if (this.props.mandatory) {\n this.setState({\n optional: false,\n });\n }\n }\n\n handleCreateAccountCheckbox = (event) => {\n this.props.handleCreateAccountCheckbox(\n event.target.checked,\n event.target.id\n );\n\n this.setState({\n optional: event.target.checked,\n showCreateAccountFields: event.target.checked,\n });\n };\n\n handleUpdatePasswords = (password, whichInput, hasPasswordHint) => {\n let newState = {\n [whichInput]: password,\n showPasswordHint: hasPasswordHint, // we only show password hint for password1 if is enabled\n // we only base the password validation on 'input1', otherwise things get really confusing\n passwordErrors:\n whichInput === 'password1'\n ? passwordValidator(password)\n : this.state.passwordErrors,\n };\n this.setState(newState);\n return password; // returning for TextInput https://github.paypal.com/react/react-text-input\n };\n\n hidePasswordHint = (isHint) => {\n if (isHint) {\n this.setState({ showPasswordHint: false });\n }\n };\n\n handleLegalCheckbox = (event) => {\n this.setState({\n acceptedLegal: event.target.checked,\n });\n };\n\n handleConsentCheckbox = (event) => {\n this.setState({\n consentCommunication: event.target.checked,\n });\n };\n\n handleResetPasswordFields = () => {\n this.setState({\n optional: false,\n acceptedLegal: false,\n showCreateAccountFields: false,\n });\n this.handleUpdatePasswords('', 'password1');\n this.handleUpdatePasswords('', 'password2');\n };\n\n /**\n * check that the two passwords within state are matching\n * @return {boolean}\n */\n doPasswordsMatch = () => {\n return this.state.password1 === this.state.password2;\n };\n\n /**\n * Return dobPattern from specified props or get it from countryInfo\n */\n getDobPattern = () => {\n if (this.props.dobPattern) {\n return this.props.dobPattern;\n }\n\n const { country = 'US' } = this.props;\n const countryInfo = getCountryInfo(country);\n\n return countryInfo.DOBPattern;\n };\n\n /**\n * check if date of birth is valid\n * @return {string}\n */\n handleChangeDob = (date) => {\n let dateOfBirth = getFormattedDob(date, this.getDobPattern());\n\n this.setState({\n dateOfBirth: dateOfBirth,\n dobReqErrors: date === '',\n dobErrors: date !== '' && !validateDob(dateOfBirth, this.getDobPattern()),\n });\n return dateOfBirth;\n };\n\n validateDobIs18 = (date) => {\n this.setState({\n dobIs18Errors: !validateDobIs18(date, this.getDobPattern()),\n });\n };\n\n handleDobBlur = (date) => {\n this.setState({ dobReqErrors: date === '', showDateOfBirthHelp: false });\n this.validateDobIs18(date);\n };\n\n handleDobFocus = (date) => {\n this.setState({ dobReqErrors: false, showDateOfBirthHelp: true });\n };\n\n handleChangeOccupation = (event) => {\n this.setState({ occupationError: false, occupation: event.target?.value });\n };\n\n handleChangeNationality = (event) => {\n this.setState({\n nationalityError: false,\n nationality: event.target?.value,\n });\n };\n\n renderPasswordErrors = () => {\n return (\n \n {/* password mismatch content */}\n {!this.doPasswordsMatch() && (\n \n \n \n this.handleChangeNationalNumber(event.target.value)\n }\n onFocus={(event) => this.handleFocus(event.target.value)}\n onBlur={(event) => this.handleBlur(event.target.value)}\n />\n
\n \n
\n\n \n {this.props.isNNA ? (\n {this.props.mainTitle} \n \n {this.props.mainBlurb}\n \n \n )}\n \n {!this.props.mandatory && ( // if the password is optional — show the optional checkbox\n \n {!this.props.isNNA && this.props.itsFreeLine ? (\n \n {!this.props.mandatory && !this.props.isNNA && !isCountryUS && (\n \n \n this.hidePasswordHint(countryInfo.showPasswordHint)\n }\n onBlur={() =>\n this.hidePasswordHint(countryInfo.showPasswordHint)\n }\n onChange={(event) => {\n this.handleUpdatePasswords(\n event.target.value,\n 'password1',\n countryInfo.showPasswordHint\n );\n if (!this.canDisplayVariant(FULL)) {\n this.handleUpdatePasswords(\n event.target.value,\n 'password2',\n countryInfo.showPasswordHint\n );\n }\n }}\n onFocus={this.props.handleFocusOnPasswordOne}\n value={this.state.password1}\n />\n {showPasswordHint && countryInfo.showPasswordHint && (\n \n {this.props.passwordWarnings._HINT1 && (\n
\n )}\n \n\n {this.canDisplayVariant(FULL) && (\n \n \n {this.props.mainTitle}\n \n
\n ) : (\n <>\n \n {this.props.itsFreeLine}\n
\n ) : null}\n\n \n
\n \n )}\n {!this.canDisplayVariant(FULL) && (\n <>\n {this.canDisplayVariant(VARIANT_VALUEPROP_2) ? (\n \n {this.props.createAccountHelp1 && (\n
\n )}\n {this.props.createAccountHelp1}
\n )}\n {this.props.createAccountHelp2 && (\n{this.props.createAccountHelp2}
\n )}\n{this.props.passwordWarnings._HINT1}
\n )}\n {this.props.passwordWarnings._HINT2 && (\n {this.props.passwordWarnings._HINT2}
\n )}\n {this.props.passwordWarnings._HINT3 && (\n {this.props.passwordWarnings._HINT3}
\n )}\n \n {showValidationErrors &&\n passwordErrorsExist &&\n this.renderPasswordErrors()}\n {showValidationErrors &&\n countryInfo.showDOB &&\n dobErrors &&\n !dateOfBirthHelp && (\n
\n )}\n\n {countryInfo.showConsentCheckBox && (\n \n \n {this.props.passwordWarnings._INVALID_DOB}\n \n
\n )}\n {showValidationErrors &&\n countryInfo.showDOB &&\n (dobReqErrors || !dateOfBirth) &&\n !dateOfBirthHelp && (\n \n \n {this.props.passwordWarnings._REQUIRED_DOB}\n \n
\n )}\n {dateOfBirthIs18ErrorsExist && (\n \n \n {this.props.passwordWarnings._MUST_18_DOB}\n \n
\n )}\n {occupationErrorsExist && (\n \n \n {this.props.passwordWarnings._OCCUPATION}\n \n
\n )}\n {nationalityErrorsExist && (\n \n \n {this.props.passwordWarnings._NATIONALITY}\n \n
\n )}\n {nationalIdTypeErrorsExist && (\n \n \n {this.props.passwordWarnings._NATIONAL_ID_TYPE}\n \n
\n )}\n {nationalIdNoErrorsExist && (\n \n \n {this.props.passwordWarnings._NATIONAL_ID_NUMBER}\n \n
\n )}\n {showValidationErrors &&\n countryInfo.showLegalCheckBox &&\n !acceptedLegal && (\n \n \n {this.props.passwordWarnings._LEGAL_CHECKBOX}\n \n
\n )}\n \n
\n )}\n\n {countryInfo.showLegalCheckBox && (\n \n
\n )}\n\n {countryInfo.showLegalTextOnly && (\n \n \n {this.canDisplayVariant(FULL)\n ? this.props.legalOnlyHTML\n : this.props.legalOnlyHTMLShort}\n \n
\n )}\n \n \n \n );\n }\n}\n\nclass ValueProps extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n propsData: [\n {\n img: 'https://www.paypalobjects.com/paypal-ui/spots/svg/general-support.svg',\n label: props.nnaValueProp1,\n },\n {\n img: 'https://www.paypalobjects.com/paypal-ui/spots/svg/insured.svg',\n label: props.nnaValueProp2,\n },\n {\n img: 'https://www.paypalobjects.com/paypal-ui/spots/svg/rewards.svg',\n label: props.nnaValueProp3,\n },\n ],\n };\n }\n\n render() {\n const { nnaValuePropType } = this.props;\n return (\n <>\n \n \n 
\n
\n {item.label}
\n \n );\n })}\n \n \n );\n }\n}\n\nValueProps.propTypes = {\n nnaValuePropType: PropTypes.string,\n nnaValueProp1: PropTypes.string,\n nnaValueProp2: PropTypes.string,\n nnaValueProp3: PropTypes.string,\n};\nexport default CreateAccountPre;\n","/**\n * Generic address entry field used for adding a new address\n * Wrap all the address entry fields in a when using the grid\n * - Address fields are generic because they vary based on the user's locale\n * - Shows a state list dropdown if it exists\n * - Validates the postcode (zipcode) and shows the error message (vx_form-control-message)\n * - If it's a US address, show the state and zipcode on the same line\n */\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport { TextInput, DropdownMenu } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport { stateListPropType } from 'prop-validators';\nimport _map from 'lodash/map';\nimport { trackErrorIM } from '../fpti/fpti';\n\n/**\n * State dropdown list\n */\nclass StateList extends React.Component {\n static propTypes = {\n id: PropTypes.string.isRequired,\n country: PropTypes.string.isRequired,\n fieldName: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n stateList: stateListPropType,\n required: PropTypes.bool,\n value: PropTypes.string, // default value\n errorMessage: PropTypes.string,\n handleChangeField: PropTypes.func.isRequired,\n handleFocus: PropTypes.func,\n handleBlur: PropTypes.func,\n };\n\n state = {\n value: this.props.value || '',\n };\n\n handleChangeOption = (event) => {\n let value = event.target.value;\n this.setState({ value });\n this.props.handleChangeField(this.props.fieldName, value);\n };\n\n getStateOptions = (stateList) => {\n return _map(stateList, (state) => {\n return {\n primaryText: state.$elt,\n value: state.$id,\n };\n });\n };\n\n render() {\n let {\n id,\n fieldName,\n required,\n stateList = [],\n errorMessage,\n label,\n } = this.props;\n\n return (\n \n
\n );\n }\n}\n\n/**\n * A generic address entry field that handles different fields specified by griffin\n * Values will be stored in component state\n */\nclass AddressEntryField extends React.Component {\n static propTypes = {\n id: PropTypes.string.isRequired,\n country: PropTypes.string.isRequired,\n fieldName: PropTypes.string.isRequired,\n required: PropTypes.bool,\n maxLength: PropTypes.number,\n validationPattern: PropTypes.string,\n labels: PropTypes.object.isRequired, // addressEntryFormat.strings\n value: PropTypes.string, // default value\n errorMessage: PropTypes.string,\n handleChangeField: PropTypes.func.isRequired,\n handleFocus: PropTypes.func,\n handleBlur: PropTypes.func,\n handlePostcodeHasError: PropTypes.func.isRequired,\n };\n\n static defaultProps = {\n handleFocus: () => {},\n handleBlur: () => {},\n };\n\n state = {\n value: '',\n zipErrorMessage: '',\n };\n\n handleFocus = (value) => {\n this.props.handleFocus(this.props.fieldName, value);\n };\n\n /**\n * Validate postcode onBlur\n * - set the state with the error message from the labels object\n * - call parent's handlePostcodeHasError to disable submission of the form\n */\n handleBlur = (value) => {\n let shouldValidatePostcode =\n this.props.fieldName === 'postcode' && this.state.value;\n\n // if the postcode is invalid based on the validationPattern,\n // set zipErrorMessage = labels.validationError that we get from Griffin\n if (\n shouldValidatePostcode &&\n !new RegExp(`^${this.props.validationPattern}$`).test(this.state.value)\n ) {\n this.setState({ zipErrorMessage: this.props.labels.validationError });\n trackErrorIM({\n errorCode: 'INVALID_BILLING_ADDRESS_POSTCODE',\n errorMessage: this.props.labels.validationError,\n fieldName: 'postcode',\n });\n this.props.handlePostcodeHasError(true);\n } else {\n this.setState({ zipErrorMessage: '' });\n this.props.handlePostcodeHasError(false);\n }\n\n this.props.handleBlur(this.props.fieldName, value);\n };\n\n /**\n * Handle changing the input value\n * - call parent's handleChangeField to store the address value\n * - set the state so the component also keeps track of this value\n * @param {String} value - the input value\n */\n handleChangeField = (value) => {\n this.props.handleChangeField(this.props.fieldName, value);\n this.setState({ value });\n return value;\n };\n\n render() {\n let {\n id,\n country,\n fieldName,\n required,\n maxLength,\n validationPattern,\n labels,\n errorMessage,\n handleChangeField,\n } = this.props;\n let { optionalLabel, stateList } = labels;\n optionalLabel = required ? '' : ` ${optionalLabel || ''}`;\n let label = `${labels[`${fieldName}Label`]}${optionalLabel}`;\n let attributes = {\n required,\n maxLength: maxLength,\n pattern: validationPattern,\n };\n\n // if there is a stateList, let's render a \n
\n \n
\n );\n }\n}\n\nexport { defaultCardSpec };\nexport default CardNumber;\n","/**\n * Date Utilities\n *\n * Helps to solve problems when working with dates.\n * Makes it easier when validating, formatting, getting date values.\n *\n * Uses:\n * - getting a valid month\n * - expiration date parsing and formatting\n */\n\n/**\n * Returns a valid month number 01-12\n *\n * @param {string} month\n * @return {string} month\n */\nexport function getValidMonthString(month) {\n // if the user typed an incorrect month of '00', autocorrect them\n if (month === '00') {\n return '01';\n }\n\n // make sure the month is valid: 01-12\n // convert the month to an integer and test it\n if (+month > 12) {\n return '12';\n }\n return month.toString();\n}\n\n/**\n * Return a valud year that's not less than the current year\n *\n * @example for a year value of '00', return the current year\n *\n * @param {string} year\n * @return {string} year\n */\nexport function getValidYearString(year) {\n let currentYear = new Date().getFullYear().toString().slice(-2);\n if (year.length === 2) {\n return +year < currentYear ? currentYear : year;\n }\n return year.toString();\n}\n\n/**\n * Returns the full year 20** if year.length > 1\n * - prepends '20' to the last 2 digits\n * - just return the year value if year.length < 2\n *\n * @example for a year value of '88', return '2088'\n * @example for a year value of '2000', return the current year\n *\n * @param {string} year\n * @return {string} a valid full year\n */\nexport function getFullYear(year) {\n if (year.length > 1) {\n return `20${getValidYearString(year.slice(-2))}`;\n }\n\n return year.toString();\n}\n\n/**\n * Returns a formatted expiration date\n *\n * - if the month is less than 10, we pad the month with a '0'\n * @example for a date value of '8', return '08'\n *\n * - the date is formatted with the '/' inserted\n * @example for a date value of '1216', return '12/16'\n *\n * @param {string} date\n * @return {string} expirationDate\n */\nexport function getFormattedExpirationDate(date, options = {}) {\n let expirationDate = date.replace(/\\D+/g, '');\n\n // if we just want to remove the trailing slash, just return the date\n // without padding or a trailing slash\n if (options.shouldRemoveTrailingSlash) {\n return expirationDate;\n }\n\n // pad the month with a '0' and append trailing slash only if the value is > 1;\n // otherwise, the user could want to enter '11' or '12'\n if (\n expirationDate.length === 1 &&\n expirationDate !== '0' &&\n expirationDate !== '1'\n ) {\n return `0${expirationDate}/`;\n }\n\n let month = expirationDate.slice(0, 2);\n let year = getValidYearString(expirationDate.slice(2));\n\n // get a valid full year\n if (year.length > 3) {\n year = getFullYear(year);\n }\n\n if (!year) {\n if (month.length > 1) {\n return `${getValidMonthString(month)}/`;\n }\n return getValidMonthString(month);\n }\n\n // format the expiration date with the '/'\n return `${getValidMonthString(month)}/${year}`;\n}\n","import React from 'react';\nimport { TextInput } from '@paypalcorp/pp-react';\n\n/**\n * Expiry date used for adding a card\n */\n\nimport PropTypes from 'prop-types';\n\nimport { cardSpecPropType } from 'prop-validators';\nimport { getFormattedExpirationDate } from './date-utils';\n\nclass Expiry extends React.Component {\n static propTypes = {\n cardSpec: cardSpecPropType,\n label: PropTypes.string.isRequired,\n helpText: PropTypes.string,\n errorMessage: PropTypes.string,\n handleChangeDate: PropTypes.func.isRequired,\n handleFocus: PropTypes.func,\n handleBlur: PropTypes.func,\n dir: PropTypes.string,\n };\n\n static defaultProps = {\n handleFocus: () => {},\n handleBlur: () => {},\n };\n\n state = {\n value: '',\n showIsRequiredError: false,\n lastCharacterIsSlash: false,\n };\n\n /**\n * Handle changing expiry date\n * Use the getFormattedExpirationDate util to format the date\n * @param {String} date - expiry date\n * @return {String} expiry - the formatted date\n */\n handleChangeDate = ({ target: { value: date } }) => {\n // if the new date is two digits and the previous date ended in a slash, we\n // should not add a slash when we format the date\n const shouldRemoveTrailingSlash =\n date.length === 2 && this.state.lastCharacterIsSlash;\n\n let expiry = getFormattedExpirationDate(date, {\n shouldRemoveTrailingSlash,\n });\n this.handleCheckForValue(date);\n this.props.handleChangeDate(expiry);\n\n this.setState({\n lastCharacterIsSlash: expiry.slice(-1) === '/',\n value: expiry,\n });\n\n return expiry;\n };\n\n /**\n * Check for a date value\n * If the field is required, we should show that this field needs a value\n * @param {String} date - expiry date\n */\n handleCheckForValue = (date) => {\n const { required = false } = this.props.cardSpec.fields.expirationDate;\n this.setState({ showIsRequiredError: required && !date });\n };\n\n /**\n * Call parent's handleFocus\n * @param {String} date - expiry date\n */\n handleFocus = ({ target: { value: date } }) => {\n this.props.handleFocus(date);\n };\n\n /**\n * Check for a date value and call parent's handleBlur\n * @param {String} date - expiry date\n */\n handleBlur = ({ target: { value: date } }) => {\n this.handleCheckForValue(date);\n this.props.handleBlur(date);\n };\n\n render() {\n const expirySpecs = this.props.cardSpec.fields.expirationDate;\n let { errorMessage } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nexport default Expiry;\n","/**\n * Card number input used for adding a card\n *\n * Dependent on getCardSpecs() from https://github.paypal.com/ConsumerWeb-Modules/consumerweb-card/blob/master/lib/card-config.js,\n * but you could just supply an object of specifications similar to what getCardSpecs returns.\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { StyleSheet, css } from 'aphrodite';\nimport { DropdownMenu } from '@paypalcorp/pp-react';\n\nimport { defaultCardSpec } from '../utility/card-utils';\n\nconst STYLES = StyleSheet.create({\n logoWrapper: {\n height: '100%',\n position: 'absolute',\n top: 0,\n right: 0,\n },\n dropdown: {\n padding: 0,\n textIndent: 12,\n boxSizing: 'content-box',\n WebkitAppearance: 'none',\n MozAppearance: 'none',\n appearance: 'none',\n '@-moz-document url-prefix()': {\n textIndent: 2.5,\n },\n '::-ms-expand': { display: 'none' },\n },\n arrow: {\n position: 'absolute',\n right: 10,\n top: 20,\n cursor: 'default',\n pointerEvents: 'none',\n },\n logo: {\n display: 'inline-block',\n marginTop: 12,\n marginRight: 2,\n },\n errorMessage: {\n WebkitTransition: 'all 0.25s ease-in-out',\n MozTransition: 'all 0.25s ease-in-out',\n msTransition: 'all 0.25s ease-in-out',\n OTransition: 'all 0.25s ease-in-out',\n transition: 'all 0.25s ease-in-out',\n marginRight: -2,\n color: 'rgb(0, 0, 0)',\n },\n errorStylesSelect: {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n },\n});\n\nclass CardType extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n cardTypeErrorMessage: '',\n showIsRequiredError: false,\n cardType: this.props.cardType,\n };\n }\n\n /*\n * Format card typepes into array\n */\n formatCardTypes = (cardTypes = {}) => {\n return Object.keys(cardTypes).map((cardType) => cardTypes[cardType]) || [];\n };\n\n /*\n * Handle card type change\n */\n handleChange = (event) => {\n const {\n cardSpecs: { cardTypes = {} },\n } = this.props;\n const cardType = this.formatCardTypes(cardTypes).find(\n (card) => card.type === event.target?.value\n );\n this.setState({ cardType: event.target?.value });\n this.props.changeCardType(cardType);\n };\n\n getCardTypeOptions = (cardTypes) => {\n return this.formatCardTypes(cardTypes).map((item) => {\n return {\n primaryText: item.name,\n value: item.type,\n };\n });\n };\n\n render() {\n const {\n country,\n cardSpecs: { cardTypes = {} },\n errorMessage,\n } = this.props;\n let { cardTypeErrorMessage } = this.state;\n let errorMessageClassNames = classNames(css(STYLES.errorMessage), {\n 'vx_form-control-message': errorMessage || cardTypeErrorMessage,\n });\n let errorStyles = {\n height: 0,\n padding: 0,\n };\n if (errorMessage || cardTypeErrorMessage) {\n errorStyles = { height: '100%' };\n }\n\n // Removing card type 'SWITCH' for GB\n if (country === 'GB') {\n delete cardTypes.SWITCH;\n }\n\n return (\n \n
\n );\n }\n}\n\nCardType.propTypes = {\n changeCardType: PropTypes.func.isRequired,\n};\n\nexport { defaultCardSpec };\nexport default CardType;\n","/**\n * Card number input used for adding a card\n *\n * Dependent on getCardSpecs() from https://github.paypal.com/ConsumerWeb-Modules/consumerweb-card/blob/master/lib/card-config.js,\n * but you could just supply an object of specifications similar to what getCardSpecs returns.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { StyleSheet, css } from 'aphrodite';\nimport { TextInput } from '@paypalcorp/pp-react';\n\nconst STYLES = {\n logoWrapper: {\n height: '100%',\n position: 'absolute',\n top: 0,\n right: 0,\n },\n\n dropdown: {\n padding: 0,\n textIndent: 10,\n WebkitAppearance: 'none',\n MozAppearance: 'none',\n appearance: 'none',\n },\n\n arrow: {\n position: 'absolute',\n right: 10,\n top: 20,\n cursor: 'default',\n },\n\n logo: {\n display: 'inline-block',\n marginTop: 12,\n marginRight: 2,\n },\n\n errorMessage: {\n WebkitTransition: 'all 0.25s ease-in-out',\n MozTransition: 'all 0.25s ease-in-out',\n msTransition: 'all 0.25s ease-in-out',\n OTransition: 'all 0.25s ease-in-out',\n transition: 'all 0.25s ease-in-out',\n },\n};\n\nclass IssueNumber extends React.Component {\n constructor() {\n super();\n this.state = {\n issueNumber: '',\n };\n }\n\n handleChange = (value) => {\n this.setState({ issueNumber: value });\n this.props.handleChange(value);\n return value;\n };\n\n handleFocus = () => {\n this.props.handleFocus();\n };\n\n /**\n * Check for a issue number value\n * If the field is required, we should show that this field needs a value\n * @param {String} issueNumber - the csc\n */\n handleCheckForValue(issueNumber) {\n const cscSpecs = this.props.cardSpec.fields.csc;\n const isRequired = cscSpecs.required;\n this.setState({ showIsRequiredError: isRequired && !issueNumber });\n }\n\n handleBlur = (issueNumber) => {\n this.handleCheckForValue(issueNumber);\n this.props.handleBlur(issueNumber);\n };\n\n render() {\n const issueNumberSpecs = this.props.cardSpec.fields.issueNumber;\n\n let { errorMessage } = this.props;\n let errorStyles = {\n height: 0,\n padding: 0,\n };\n if (errorMessage) {\n errorStyles = { height: '100%' };\n }\n\n return (\n \n
\n \n {\n // \n }\n \n this.handleChange(event.target.value)}\n onFocus={(event) => this.handleFocus(event.target.value)}\n onBlur={(event) => this.handleBlur(event.target.value)}\n errorText={errorMessage}\n />\n
\n \n );\n }\n}\n\nIssueNumber.propTypes = {\n handleChange: PropTypes.func.isRequired,\n};\n\nexport default IssueNumber;\n","/**\n * Start date used for adding a card\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { cardSpecPropType } from 'prop-validators';\nimport { getFormattedExpirationDate } from './date-utils';\n\nconst STYLES = {\n logoWrapper: {\n height: '100%',\n position: 'absolute',\n top: 0,\n right: 0,\n },\n dropdown: {\n padding: 0,\n textIndent: 10,\n WebkitAppearance: 'none',\n MozAppearance: 'none',\n appearance: 'none',\n height: 42,\n },\n dropdownLeft: {\n borderRadius: '5px 0px 0px 5px',\n borderRight: 0,\n },\n dropdownRight: {\n borderRadius: '0px 5px 5px 0px',\n },\n arrow: {\n position: 'absolute',\n right: 10,\n top: 20,\n cursor: 'default',\n },\n logo: {\n display: 'inline-block',\n marginTop: 12,\n marginRight: 2,\n },\n errorMessage: {\n WebkitTransition: 'all 0.25s ease-in-out',\n MozTransition: 'all 0.25s ease-in-out',\n msTransition: 'all 0.25s ease-in-out',\n OTransition: 'all 0.25s ease-in-out',\n transition: 'all 0.25s ease-in-out',\n width: '200%',\n },\n};\n\nclass StartDate extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showIsRequiredError: false,\n lastCharacterIsSlash: false,\n startMonth: '',\n startYear: '',\n allMonths: this.getAllMonths(),\n allYears: this.getEligibleYears(),\n // startMonth: this.props.startMonth,\n // startYear: this.props.startYear,\n };\n }\n\n getAllMonths() {\n return [...Array(12)].map((_, i) => {\n let month = (i + 1).toString();\n if (month.length === 1) {\n return '0' + month;\n }\n return month;\n });\n }\n\n getEligibleYears() {\n const currentYear = new Date().getFullYear();\n return [...Array(10)].map((_, i) => currentYear - i);\n }\n\n /**\n * Handle changing start month\n * @return {String} month - the formatted month\n */\n handleMonthChange = (event) => {\n const month = event.target.value;\n this.setState({ startMonth: month });\n this.props.handleChange({\n startMonth: month,\n startYear: this.state.startYear,\n });\n return month;\n };\n\n /**\n * Handle changing start year\n * Use the getFormattedExpirationDate util to format the date\n * @return {String} start - the formatted year\n */\n handleYearChange = (event) => {\n let year = event.target.value;\n this.setState({ startYear: year });\n this.props.handleChange({\n startMonth: this.state.startMonth,\n startYear: year,\n });\n return year;\n };\n\n render() {\n let { errorMessage } = this.props;\n let errorStyles = {\n height: 0,\n padding: 0,\n };\n if (errorMessage) {\n errorStyles = { height: '100%' };\n }\n return (\n \n {\n // \n }\n
\n \n \n
\n \n \n \n {this.state.allMonths.map((item) => (\n \n ))}\n \n \n \n {errorMessage}\n
\n \n \n \n {this.state.allYears.map((item) => (\n \n ))}\n \n \n
\n \n \n \n );\n }\n}\n\nStartDate.propTypes = {\n cardSpec: cardSpecPropType,\n label: PropTypes.string,\n helpText: PropTypes.string,\n errorMessage: PropTypes.string,\n handleChange: PropTypes.func,\n dir: PropTypes.string,\n};\n\nexport default StartDate;\n","/**\n * Expiry date used for adding a card\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { TextInput } from '@paypalcorp/pp-react';\n\nimport { cardSpecPropType } from 'prop-validators';\nimport { getFormattedExpirationDate } from './date-utils';\nimport { getCountryInfo } from '../utility/localizer';\n\nconst STYLES = {\n errorMessage: {\n WebkitTransition: 'all 0.25s ease-in-out',\n MozTransition: 'all 0.25s ease-in-out',\n msTransition: 'all 0.25s ease-in-out',\n OTransition: 'all 0.25s ease-in-out',\n transition: 'all 0.25s ease-in-out',\n },\n dobWrapper: {\n margin: '16px 0 0',\n },\n};\nclass DateOfBirth extends React.Component {\n constructor() {\n super();\n this.state = {\n showIsRequiredError: false,\n showIsInvalidError: false,\n inValidDate: false,\n lastCharacterIsSlash: false,\n dateOfBirth: '',\n };\n }\n\n /**\n * Check for a date value\n * If the field is required, we should show that this field needs a value\n * @param {String} date - dateOfBirth\n */\n handleCheckForValue(date) {\n let inValid = this.state.inValidDate;\n this.setState({\n showIsRequiredError: !date,\n showIsInvalidError: date && inValid,\n });\n }\n\n /**\n * Handle changing dateofbirth\n * @param {String} date - dateOfBirth date\n * @return {String} date - the formatted date\n */\n handleChange = (dob) => {\n let dateOfBirth = '';\n let flatDate = dob.replace(/\\D+/g, '').slice(0, 8);\n const pattern = getCountryInfo(this.props.country).DOBPattern;\n\n let j = 0;\n for (let i = 0; i < flatDate.length; i++) {\n if (pattern[j] === '/') {\n dateOfBirth += '/';\n j++;\n }\n\n dateOfBirth += flatDate[i];\n j++;\n }\n\n this.setState({ dateOfBirth: dateOfBirth });\n this.validateDateOfBirth(dateOfBirth);\n\n return dateOfBirth;\n };\n\n validateDateOfBirth(dateOfBirth) {\n const DOBPattern = getCountryInfo(this.props.country).DOBPattern;\n const dobDateCard = dateOfBirth.split('/');\n const patternsCard = DOBPattern.split('/');\n const yyyy = dobDateCard[patternsCard.indexOf('YYYY')];\n const currentYear = new Date().getFullYear().toString();\n\n if (dateOfBirth.length === DOBPattern.length && currentYear > yyyy) {\n this.setState({ inValidDate: false });\n this.props.handleChange(dateOfBirth);\n } else {\n this.setState({ inValidDate: true });\n }\n }\n\n /**\n * Call parent's handleFocus\n * @param {String} date - expiry date\n */\n handleFocus = (date) => {\n this.props.handleFocus(date);\n };\n\n /**\n * Check for a date value and call parent's handleBlur\n * @param {String} date - dateOfBirth\n */\n handleBlur = (date) => {\n this.handleCheckForValue(date);\n this.props.handleBlur(date);\n };\n\n render() {\n const expirySpecs = this.props.cardSpec.fields.expirationDate;\n let { errorMessage, showValidationErrors } = this.props;\n let errorStyles = {\n height: 0,\n padding: 0,\n };\n if (errorMessage) {\n errorStyles = { height: '100%' };\n }\n return (\n \n
\n );\n }\n}\n\nPaymentComponent.propTypes = {\n changePaymentInfo: PropTypes.func.isRequired,\n};\n\nexport default PaymentComponent;\n","/**\n * This component is a fork of react-phone-number.\n * `react-phone-number` uses a google library for formatting which has been removed from this fork.\n * This component uses a `formator` prop which does the formatting.\n *\n *\n * Phone component used to get the user's phone number\n * - utilizes Google's libphonenumber for phone formatting (https://github.com/seegno/google-libphonenumber)\n * - used with account creation and can be a hidden input\n */\n\nimport PropTypes from 'prop-types';\n\nimport React from 'react';\nimport { TextInput } from '@paypalcorp/pp-react';\n\nclass PhoneNumber extends React.Component {\n static propTypes = {\n type: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n exampleNumber: PropTypes.string.isRequired,\n phoneCode: PropTypes.string,\n formator: PropTypes.func,\n country: PropTypes.string.isRequired,\n pattern: PropTypes.string,\n maxlength: PropTypes.number,\n required: PropTypes.bool,\n value: PropTypes.string,\n changePhone: PropTypes.func.isRequired,\n errorMessage: PropTypes.string,\n handleBlur: PropTypes.func,\n };\n\n static defaultProps = {\n type: 'tel',\n handleBlur: () => {},\n };\n\n state = {\n showIsRequiredError: false,\n };\n\n /**\n * Get the formatted phone number using Google's libphonenumber\n * libphonenumber throws an error if the number provided is only 1 character long\n * @param {String} phone - the phone number\n * @return {String} phone - the formatted phone number\n */\n getFormattedPhoneNumber = (phone = '') => {\n let { phoneCode } = this.props;\n\n let phoneNumber = phone;\n\n if (this.props.formator) {\n phoneNumber = this.props.formator(phoneCode, phoneNumber);\n }\n\n return phoneNumber;\n };\n\n /**\n * Check for a phoneNumber value\n * If the field is required, we should show that this field needs a value\n * @param {String} phoneNumber - the card number\n */\n handleCheckForValue = (phoneNumber) => {\n const isRequired = this.props.required;\n this.setState({ showIsRequiredError: isRequired && !phoneNumber });\n };\n\n /**\n * Handle changing the phone number\n * Remove non-digits from the phone and pass it to Griffin to format it\n * @param {String} phone - the phone number\n * @return {String} phone - the formatted phone number\n */\n handleChangePhone = (phone, mssg_error) => {\n phone = phone.replace(/\\D/g, ''); // remove non-digits for when the griffin formatting kicks in\n this.handleCheckForValue(phone);\n this.props.changePhone(phone, mssg_error);\n return this.getFormattedPhoneNumber(phone);\n };\n\n /**\n * Check for a security code value and call parent's handleBlur\n * @param {String} phoneNumber - the card number\n */\n handleBlur = (phoneNumber) => {\n phoneNumber = phoneNumber.replace(/\\D/g, '');\n this.handleCheckForValue(phoneNumber);\n this.props.handleBlur(phoneNumber, this.props.phoneCode);\n };\n\n render() {\n let initialValue = this.getFormattedPhoneNumber(this.props.value);\n let { errorMessage } = this.props;\n\n return (\n \n {!autodetect && (\n
\n\n {this.state.resetPayment && (\n \n this.handleChangeCardType(value)}\n />\n
\n )}\n\n \n {this.state.resetPayment && (\n \n this.handleChangeCardNumber(\n value,\n spec,\n 'errorMessageCardNumber'\n )\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageCardNumber',\n 'REQUIRED_CARD_NUMBER',\n 'INVALID_CARD_NUMBER'\n )\n }\n selectedCardSpec={this.state.cardSpec}\n cardSpecs={this.props.cardSpecs}\n />\n )}\n
\n \n
\n )}\n \n {expirationDate && (\n
\n {dob && (\n \n {\n \n this.handleChangeDate(value, 'errorMessageExpiry')\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageExpiry',\n 'REQUIRED_EXPIRY',\n 'INVALID_EXPIRY'\n )\n }\n cardSpec={this.state.cardSpec}\n />\n }\n
\n )}\n\n {csc && (\n \n \n this.handleChangeSecurityCode(value, 'errorMessageCSC')\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageCSC',\n 'REQUIRED_SECURITY_CODE',\n 'INVALID_SECURITY_CODE'\n )\n }\n cardSpec={this.state.cardSpec}\n />\n
\n )}\n\n {startDate && (\n \n \n this.handleChangeStartDate(value, 'errorMessageStartDate')\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageStartDate',\n 'REQUIRED_START_DATE',\n 'INVALID_START_DATE'\n )\n }\n cardSpec={this.state.cardSpec}\n />\n
\n )}\n\n {issueNumber && (\n \n \n this.handleChangeIssueNumber(\n value,\n 'errorMessageIssueNumber'\n )\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageIssueNumber',\n 'REQUIRED_ISSUER_NUMBER',\n 'INVALID_ISSUER_NUMBER'\n )\n }\n cardSpec={this.state.cardSpec}\n />\n
\n )}\n \n
\n )}\n \n \n this.handleDateOfBirth(value, 'errorMessageDateOfBirth')\n }\n handleBlur={(value) =>\n this.handleFieldBlur(\n value,\n 'errorMessageDateOfBirth',\n 'REQUIRED_DATE_OF_BIRTH',\n 'INVALID_DATE_OF_BIRTH'\n )\n }\n cardSpec={this.state.cardSpec}\n />\n
\n \n {this.props.type !== 'hidden' && (\n this.handleBlur(event.target.value)}\n onChange={(event) =>\n this.handleChangePhone(\n event.target.value,\n 'errMessagePhoneNumber'\n )\n }\n errorText={errorMessage}\n />\n )}\n
\n );\n }\n}\n\nexport default PhoneNumber;\n","/**\n * Card number input used for adding a card\n *\n * Dependent on getCardSpecs() from https://github.paypal.com/ConsumerWeb-Modules/consumerweb-card/blob/master/lib/card-config.js,\n * but you could just supply an object of specifications similar to what getCardSpecs returns.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropdownMenu } from '@paypalcorp/pp-react';\n\nclass PhoneType extends React.Component {\n constructor(props) {\n super();\n this.state = {\n phoneTypeErrorMessage: '',\n showIsRequiredError: false,\n selectedPhoneType: 'Mobile',\n };\n }\n\n getPhoneTypeOptions = () => {\n return [\n { primaryText: this.props.guestLabels.phoneTypeMobile, value: 'Mobile' },\n { primaryText: this.props.guestLabels.phoneTypeHome, value: 'Home' },\n { primaryText: this.props.guestLabels.phoneTypeWork, value: 'Work' },\n ];\n };\n\n handleChange = (event) => {\n this.setState({ selectedPhoneType: event.target?.value });\n this.props.changePhoneType(event.target?.value);\n };\n\n render() {\n const { errorMessage } = this.props;\n let { phoneTypeErrorMessage } = this.state;\n\n return (\n \n
\n );\n }\n}\n\nPhoneType.propTypes = {\n changePhoneType: PropTypes.func.isRequired,\n errorMessage: PropTypes.string,\n guestLabels: PropTypes.object,\n};\n\nexport default PhoneType;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { DropdownMenu } from '@paypalcorp/pp-react';\n\nclass PhoneCountryCode extends React.Component {\n constructor(props) {\n super();\n const { defaultNumber: { countryCode } = {} } = props;\n this.state = {\n countryCode: countryCode,\n phoneTypeErrorMessage: '',\n showIsRequiredError: false,\n selectedItemIdx: -1,\n };\n }\n\n handleChange = (index) => {\n let value =\n index >= 0\n ? this.props.supportedCountries[index].phoneCode\n : this.state.countryCode;\n this.setState({ countryCode: value, selectedItemIdx: index });\n this.props.changeCountryCode(value);\n };\n\n render() {\n const { errorMessage, label, supportedCountries } = this.props;\n let { countryCodeErrorMessage } = this.state;\n\n return (\n \n ({\n primaryText: `${item.phoneCode} (${item.countryCode})`,\n }))}\n onSelection={this.handleChange}\n errorText={errorMessage || countryCodeErrorMessage}\n selectedItemIndex={this.state.selectedItemIdx}\n />\n
\n \n );\n }\n}\n\nPhoneCountryCode.propTypes = {\n changeCountryCode: PropTypes.func.isRequired,\n errorMessage: PropTypes.string,\n guestLabels: PropTypes.object,\n label: PropTypes.string,\n supportedCountries: PropTypes.array,\n};\n\nexport default PhoneCountryCode;\n","/**\n * Guest Phone component\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { StyleSheet, css } from 'aphrodite';\nimport PhoneNumber from '../components/PhoneNumber';\nimport PhoneType from '../components/phone-type';\nimport PhoneCountryCode from '../components/phone-country-code';\nimport { getCountryInfo } from '../utility/localizer';\nimport { formatPhone, validatePhone } from '../utility/formator';\nimport _get from 'lodash/get';\nimport { trackErrorIM } from '../fpti/fpti';\n\nclass PhoneComponent extends React.Component {\n static propTypes = {\n handlePhoneInfo: PropTypes.func.isRequired,\n initialData: PropTypes.object,\n errorMessages: PropTypes.object,\n phoneNumberCountryCode: PropTypes.string,\n selectedCountry: PropTypes.string,\n isRequired: PropTypes.bool,\n examplePhoneNumbers: PropTypes.object,\n guestLabels: PropTypes.object,\n onRef: PropTypes.func,\n };\n\n constructor(props, context) {\n super(props, context);\n\n const {\n selectedCountry,\n phoneNumberCountryCode,\n phoneNumberPatternDesc = {},\n senderDetails = {},\n } = props;\n\n const { maxLength = 10 } = phoneNumberPatternDesc.NATIONAL || {};\n const { phone_number = '' } = senderDetails.phone || {};\n const showCountryCode =\n getCountryInfo(selectedCountry).showPhoneCountryCode;\n\n this.state = {\n phoneNumberCountryCode,\n maxlength: parseInt(maxLength, 10),\n examplePhoneNumber: this.getExamplePhoneNumber('Mobile'), // Default format is mobile\n errMessagePhoneNumber: '',\n errMessagePhoneType: '',\n errMessagePhoneCountryCode: '',\n phone: phone_number,\n showCountryCode,\n };\n }\n\n componentDidMount() {\n this.props.onRef(this);\n }\n\n componentWillUnmount() {\n this.props.onRef(undefined);\n }\n\n getExamplePhoneNumber = (phoneType) => {\n const generalPhoneNumber = _get(this.props.examplePhoneNumbers, 'GENERAL');\n switch (phoneType) {\n case 'Home':\n return _get(\n this.props.examplePhoneNumbers,\n 'FIXED_LINE',\n generalPhoneNumber\n );\n break;\n case 'Mobile':\n return _get(\n this.props.examplePhoneNumbers,\n 'MOBILE',\n generalPhoneNumber\n );\n break;\n case 'Work':\n return _get(\n this.props.examplePhoneNumbers,\n 'FIXED_LINE_OR_MOBILE',\n generalPhoneNumber\n );\n break;\n default:\n return generalPhoneNumber;\n }\n };\n\n /*\n * Handle phone number blur\n */\n handlePhoneBlur = (phone, phoneCountryCode) => {\n if (!phone) {\n const { REQUIRED_PHONE_NUMBER = '' } = this.props.errorMessages;\n this.setState({ errMessagePhoneNumber: REQUIRED_PHONE_NUMBER });\n trackErrorIM({\n errorCode: 'REQUIRED_PHONE_NUMBER',\n errorMessage: REQUIRED_PHONE_NUMBER,\n fieldName: 'phonenumber',\n });\n return;\n }\n\n const phoneDigits = phone;\n const isPhoneNumberValid = validatePhone(phoneCountryCode, phone);\n if (!isPhoneNumberValid) {\n const { INVALID_PHONE_NUMBER = '' } = this.props.errorMessages;\n this.setState({ errMessagePhoneNumber: INVALID_PHONE_NUMBER });\n trackErrorIM({\n errorCode: 'INVALID_PHONE_NUMBER',\n errorMessage: INVALID_PHONE_NUMBER,\n fieldName: 'phonenumber',\n });\n return;\n }\n };\n\n /*\n * Handle phone number change\n */\n handlePhoneNumber = (phoneNumber, mssg_error) => {\n this.setState({ phoneNumber: phoneNumber, [mssg_error]: '' });\n this.handlePhoneInfo(\n this.state.phoneType,\n phoneNumber,\n this.state.countryCode\n );\n };\n\n /*\n * Handle phone type change\n */\n handlePhoneType = (phoneType) => {\n this.setState({\n phoneType: phoneType,\n errMessagePhoneType: '',\n examplePhoneNumber: this.getExamplePhoneNumber(phoneType),\n });\n this.handlePhoneInfo(\n phoneType,\n this.state.phoneNumber,\n this.state.countryCode\n );\n };\n\n /*\n * Handle phone country code change\n */\n handleCountryCode = (countryCode) => {\n this.setState({ countryCode: countryCode, errMessagePhoneCountryCode: '' });\n this.handlePhoneInfo(\n this.state.phoneType,\n this.state.phoneNumber,\n countryCode\n );\n };\n\n /*\n * Handle phone information\n */\n handlePhoneInfo = (type = 'Mobile', number) => {\n const { phoneNumberCountryCode } = this.props;\n this.props.handlePhoneInfo({\n type: type,\n number: number,\n countryCode: phoneNumberCountryCode,\n });\n };\n\n /*\n * Handling required payment form fields\n */\n handleRequiredFields = (params) => {\n const { errorMessages } = this.props;\n let isValid = true;\n let errMessagePhoneType, errMessagePhoneNumber, errMessagePhoneCountryCode;\n let keysToValidate = Object.keys(params);\n\n keysToValidate.forEach((key) => {\n let value = params[key];\n\n switch (key) {\n case 'number':\n if (!value) {\n isValid = false;\n errMessagePhoneNumber = errorMessages.REQUIRED_PHONE_NUMBER;\n trackErrorIM({\n errorCode: 'REQUIRED_PHONE_NUMBER',\n errorMessage: errMessagePhoneNumber,\n fieldName: 'phonenumber',\n });\n }\n break;\n case 'countryCode':\n if (!value) {\n isValid = false;\n errMessagePhoneCountryCode =\n errorMessages.REQUIRED_PHONE_COUNTRY_CODE;\n trackErrorIM({\n errorCode: 'REQUIRED_PHONE_COUNTRY_CODE',\n errorMessage: errMessagePhoneCountryCode,\n fieldName: 'countryCode',\n });\n }\n break;\n default:\n break;\n }\n });\n\n if (!isValid) {\n this.setState({\n errMessagePhoneType,\n errMessagePhoneNumber,\n errMessagePhoneCountryCode,\n });\n }\n return isValid;\n };\n\n /*\n * Handle phone number error\n */\n handlePhoneError = (key) => {\n const { errorMessages } = this.props;\n let errMessagePhoneNumber = errorMessages[key];\n this.setState({ errMessagePhoneNumber: errMessagePhoneNumber });\n trackErrorIM({\n errorCode: key,\n errorMessage: errMessagePhoneNumber,\n fieldName: 'phonenumber',\n });\n };\n\n render() {\n const {\n guestLabels: {\n phone: phoneLabel,\n countryCode: countryCodeLabel,\n phoneType: phoneTypeLabel = '',\n } = {},\n defaultNumber = {},\n } = this.props || {};\n const { showCountryCode = false } = this.state;\n\n return (\n \n \n
\n {showCountryCode && (\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default Name;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Name from '../guest-payment-components/Name';\nimport { trackErrorIM } from '../fpti/fpti';\nimport { PAGE_SPEC } from '../fpti/fptiConstants';\n\nclass NameComponent extends React.Component {\n static propTypes = {\n changeNameInfo: PropTypes.func.isRequired,\n initialData: PropTypes.object,\n errorMessages: PropTypes.object,\n user: PropTypes.object,\n isRequired: PropTypes.bool,\n guestLabels: PropTypes.object,\n onRef: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n const { user: { firstName = '', lastName = '' } = {} } = props;\n this.state = { firstName: firstName, lastName: lastName };\n }\n\n componentDidMount() {\n this.props.onRef(this);\n }\n\n componentWillUnmount() {\n this.props.onRef(undefined);\n }\n\n /*\n * Handle firstname blur\n */\n handleBlurFirstName = (firstName) => {\n if (!firstName) {\n const { REQUIRED_FIRST_NAME = '' } = this.props.errorMessages;\n this.setState({ firstNameErrorMessage: REQUIRED_FIRST_NAME });\n trackErrorIM({\n errorCode: 'REQUIRED_FIRST_NAME',\n errorMessage: REQUIRED_FIRST_NAME,\n fieldName: 'firstName',\n });\n }\n };\n\n /*\n * Handle lastname blur\n */\n handleBlurLastName = (lastName) => {\n if (!lastName) {\n const { REQUIRED_LAST_NAME = '' } = this.props.errorMessages;\n this.setState({ lastNameErrorMessage: REQUIRED_LAST_NAME });\n trackErrorIM({\n errorCode: 'REQUIRED_LAST_NAME',\n errorMessage: REQUIRED_LAST_NAME,\n fieldName: 'lastName',\n });\n }\n };\n\n /*\n * Handle change first name\n */\n handleChangeFirstName = (firstName, mssg_error) => {\n this.setState({ firstName: firstName, [mssg_error]: '' });\n this.props.changeNameInfo(firstName, this.state.lastName);\n };\n\n /*\n * Handle change last name\n */\n handleChangeLastName = (lastName, mssg_error) => {\n this.setState({ lastName: lastName, [mssg_error]: '' });\n this.props.changeNameInfo(this.state.firstName, lastName);\n };\n\n /*\n * Handling required payment form fields\n */\n handleRequiredFields = (params) => {\n let isValid = true;\n const { errorMessages } = this.props;\n let firstNameErrorMessage, lastNameErrorMessage;\n let keysToValidate = Object.keys(params);\n\n keysToValidate.forEach((key) => {\n let value = params[key];\n switch (key) {\n case 'firstName':\n if (!value) {\n isValid = false;\n firstNameErrorMessage = errorMessages.REQUIRED_FIRST_NAME;\n trackErrorIM({\n errorCode: 'REQUIRED_FIRST_NAME',\n errorMessage: firstNameErrorMessage,\n fieldName: 'firstname',\n });\n }\n break;\n case 'lastName':\n if (!value) {\n isValid = false;\n lastNameErrorMessage = errorMessages.REQUIRED_LAST_NAME;\n trackErrorIM({\n errorCode: 'REQUIRED_LAST_NAME',\n errorMessage: lastNameErrorMessage,\n fieldName: 'lastName',\n });\n }\n break;\n default:\n break;\n }\n });\n this.setState({\n firstNameErrorMessage: firstNameErrorMessage,\n lastNameErrorMessage: lastNameErrorMessage,\n });\n return isValid;\n };\n\n /*\n * Handle first name error with any code\n */\n handleFirstNameError = (key) => {\n const { errorMessages } = this.props;\n this.setState({ firstNameErrorMessage: errorMessages[key] });\n trackErrorIM({\n errorCode: key,\n errorMessage: errorMessages[key],\n fieldName: 'firstName',\n });\n };\n\n /*\n * Handle last name error with any code\n */\n handleLastNameError = (key) => {\n const { errorMessages } = this.props;\n this.setState({ lastNameErrorMessage: errorMessages[key] });\n trackErrorIM({\n errorCode: key,\n errorMessage: errorMessages[key],\n fieldName: 'lastName',\n });\n };\n\n render() {\n return (\n \n \n this.handleChangeFirstName(\n event.target.value,\n 'firstNameErrorMessage'\n )\n }\n onBlur={(event) => this.handleBlurFirstName(event.target.value)}\n errorText={firstNameErrorMessage}\n />\n
\n \n \n this.handleChangeLastName(\n event.target.value,\n 'lastNameErrorMessage'\n )\n }\n onBlur={(event) => this.handleBlurLastName(event.target.value)}\n errorText={lastNameErrorMessage}\n />\n
\n \n
\n );\n }\n}\n\nexport default NameComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Checkbox, Tooltip } from '@paypalcorp/pp-react';\nimport { addFeature } from '../fpti/helper';\nimport { FEATURES } from '../fpti/fptiConstants';\n\nclass AddressCheckBox extends React.Component {\n constructor() {\n super();\n this.state = {\n showToolTip: false,\n };\n }\n\n componentDidMount() {\n addFeature(FEATURES.MAILING_ADDRESS);\n }\n\n handleTipClick = (event) => {\n event.preventDefault();\n let { showToolTip } = this.state;\n this.setState({ showToolTip: (showToolTip = !showToolTip) });\n this.linkWithIcon.focus();\n };\n\n handleChangeAddress = (ev) => {\n let isChecked = ev.target.checked;\n this.props.changeAddress(isChecked);\n };\n\n renderCheckboxLabel = () => (\n \n {this.props.label}\n {this.props.toolTipText && (\n \n
\n );\n }\n}\n\nAddressCheckBox.propTypes = {\n changeAddress: PropTypes.func.isRequired,\n toolTipText: PropTypes.string,\n label: PropTypes.string,\n isDisabled: PropTypes.bool,\n};\n\nexport default AddressCheckBox;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { localsMessages } from '../utility/getTemplateData';\nimport { getCountryInfo } from '../utility/localizer';\nimport { Checkbox } from '@paypalcorp/pp-react-checkbox';\nimport { CaptionText } from '@paypalcorp/pp-react';\nimport getContent from 'pp-react-l10n';\n\nconst messages = localsMessages('common/guestTerms');\n\nclass GuestTerms extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isChecked: !!this.props.isChecked,\n };\n }\n\n onChange = (event) => {\n const isChecked = event.target.checked;\n this.setState({ isChecked });\n this.props.handleRequired(isChecked);\n };\n\n render() {\n const countryInfo = getCountryInfo(this.props.country);\n const termsContent = getContent('locals')('common/guestTerms')(\n 'terms',\n null,\n { useHTML: true }\n );\n\n if (this.props.mandatory) {\n return null;\n }\n\n return (\n \n
\n \n
\n \n
\n )}\n\n {countryInfo.showGuestTermsText && termsContent && (\n \n
\n \n \n {termsContent}\n \n
\n )}\n \n {title} \n \n {msg} \n \n \n \n {button}\n \n \n
\n \n \n
\n\n
\n );\n }\n}\n\nRussiaGuestForm.propTypes = {\n supportedCountries: PropTypes.array,\n currentCountry: PropTypes.string,\n changeCountry: PropTypes.func,\n countryLabel: PropTypes.string,\n};\n\nexport default RussiaGuestForm;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { Alert, CaptionText, Dialog, Button } from '@paypalcorp/pp-react';\n\nimport * as dateUtils from '../../guest-payment-components/util/dateUtils';\nimport CountrySelection from '../../guest-payment-components/CountrySelection';\nimport Email from '../../guest-payment-components/Email';\nimport CreateAccountPre from '../../guest-payment-components/CreateAccountPre';\nimport AddressEntryField from '../../components/address-entry-field';\n\nimport PaymentComponent from '../../containers/payment-component';\nimport PhoneComponent from '../../containers/phone-component';\nimport NameComponent from '../../containers/name-component';\n\nimport AddressCheckbox from '../../components/addressCheckbox';\nimport GuestTerms from '../../components/guestTerms';\nimport GuestSubmitButton from '../../components/guest-submit-button';\n\nimport * as AppActions from '../../actions/AppActions';\nimport AppStore from '../../stores/AppStore';\nimport AppDispatcher from '../../dispatcher/AppDispatcher';\n\nimport {\n parseErrorResponse,\n parseValErrResp,\n getErrFields,\n getInitialDataInDom,\n} from '../../utility/helper';\nimport '../../utility/csrf';\n\nimport constants from '../../utility/constants';\nimport { getCountryInfo } from '../../utility/localizer';\nimport { fetcher, objectOrArrayToQueryString } from '../../utility/domUtils';\nimport TemplateData, {\n localsMessages,\n guestLocalsMessages,\n} from '../../utility/getTemplateData';\n\nimport {\n formatAmount,\n getDateFormat,\n normalizeNumber,\n} from '../../utility/formator';\n\nimport withDonate from '../../components/guest/WithDonate';\nimport ThreeDSContainer from '../../components/threeDS/ThreeDSContainer';\nimport FormSectionHeading from '../../components/common/FormSectionHeading';\n\nimport _get from 'lodash/get';\nimport _isEmpty from 'lodash/isEmpty';\nimport _keys from 'lodash/keys';\nimport _startsWith from 'lodash/startsWith';\nimport _clone from 'lodash/clone';\nimport RussiaGuestForm from './RussiaGuestForm';\nimport { startCustomCPLTrackingForConfirmationPage } from '../../utility/cpl';\nimport { scrollElementIntoView } from '../../utility/domUtils';\nimport getContent from 'pp-react-l10n';\nimport { getPersonalizedMessages } from '../../utility/personalizedMessages';\nimport { NNA_CONTENT_TOUCHPOINT } from '../../utility/constants';\nimport isNna from '../../utility/nna';\nimport withTheme from '../../components/withTheme';\nimport {\n trackErrorIM,\n trackGuestFormIM,\n trackPageIM,\n trackPaymentSubmitClick,\n trackSignupChekboxClick,\n} from '../../fpti/fpti';\nimport { FPTI_TAGS, LINK_NAME, PAGE_SPEC } from '../../fpti/fptiConstants';\nimport { updateGlobalFPTI } from '../../fpti/helper';\n\nconst errorMessages = localsMessages('errors/service');\nconst landingErrorMessages = localsMessages('errors/landingerror');\nconst initialData = getInitialDataInDom();\nconst senderDetails = initialData.senderDetails || {};\nconst pre_address = senderDetails.address || {};\n\nconst defaultCardSpec = constants.DEFAULT_CARD_SPEC;\n\nconst FORM_ERROR_ELEMENT_SELECTOR = [\n `div[class*=\"ppvx_field--error\"]`,\n '.vx_has-error-with-message',\n '.service_error_holder',\n '.ppvx_field--error',\n '#message_billing_state',\n '#message_email',\n].join();\n\nclass GuestForm extends Component {\n static propTypes = {\n password: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n this.createAccountRef = React.createRef();\n\n const savedFormData =\n this.props.getFormData() || TemplateData.formData || {};\n const hasSavedFormData = !_isEmpty(savedFormData);\n\n AppActions.changeCountry({ country: initialData.selectedCountry });\n const symbol = AppStore.getDonationSymbol() || '';\n const currency = AppStore.getDonationCode() || '';\n const amount = AppStore.getDonationAmount();\n let formattedAmount = '';\n if (amount) {\n formattedAmount = formatAmount({ currency, value: amount });\n }\n\n const formValues = this.getFormValues(savedFormData);\n\n this.state = {\n formatedAmount: formattedAmount,\n symbol: symbol,\n isRequired: true,\n isGuestFormValid: true,\n isCreateAccValid: true,\n postcodeHasError: false,\n passwordFieldsOpen: false,\n isSignUpPanel: false,\n legalCheckbox: false,\n guestAllowed: TemplateData.guestAllowed,\n memberMandatory: TemplateData.memberMandatory || false,\n recurringEnabled: TemplateData.recurringEnabled,\n validPassword: null,\n showCreateAccountPreErrors: false,\n assignedCountries: initialData.assignedCountries,\n supportedCountries: initialData.supportedCountries,\n countriesAllowed: initialData.countriesAllowed,\n DOBPattern:\n getDateFormat() ||\n getCountryInfo(initialData.selectedCountry).DOBPattern,\n cardSpecs: initialData.cardSpecs,\n initialData: initialData,\n addressLine1Error: '',\n addressCityError: '',\n addressStateError: '',\n addressZipError: '',\n card: {\n type: '',\n number: '',\n securityCode: '',\n expiration: '',\n dateOfBirth: '',\n startDate: '',\n issueNumber: '',\n },\n cardSpec: defaultCardSpec,\n consentShareAddress: false,\n donateNow: '',\n agreeAndDonate: '',\n errorMessages: errorMessages,\n errorMesages: [],\n errMessageCountry: '',\n errMessageCreditCard: '',\n errMessageExpiry: '',\n errMessageCSC: '',\n errMessageEmail: '',\n errMessagePhoneNumber: '',\n legalCheckboxErrorMsg: '',\n termsCheckBoxError: false,\n hasSavedFormData,\n isOfferTermsOpen: false,\n ...formValues,\n };\n }\n\n componentDidMount() {\n // Register for App Dispatcher Messages\n this.registerAppDispatcherMessages();\n\n if (TemplateData.senderCountryEligible === false) {\n // eslint-disable-next-line\n this.setState({\n errMessageCountry: landingErrorMessages.error.sendDonationNotAllowed,\n });\n }\n\n trackGuestFormIM();\n }\n\n componentWillUnmount() {\n AppDispatcher.unregister(this.dispatcherMessages);\n }\n\n componentDidUpdate() {\n /*\n Determines if there was a change in recurring status and updates\n New Account Information and Donate Button Text\n Used here as handleRecurring method in Guest component and password\n display in CreateAccountPre component cannot be directly connected\n */\n if (\n AppStore.getDonationRecurring() === 'checked' &&\n this.state.passwordFieldsOpen\n ) {\n this.handleCreateAccountCheckbox(false);\n this.createAccountRef.current.handleResetPasswordFields();\n }\n }\n\n registerAppDispatcherMessages() {\n this.dispatcherMessages = AppDispatcher.register((payload) => {\n if (payload.action && payload.action.actionType === 'CHANGE_AMOUNT') {\n const { action: { item: { amount } = {} } = {} } = payload;\n this.updateAmount(amount);\n }\n if (\n payload.action &&\n payload.action.actionType === 'UPDATE_SERVER_ERRORS'\n ) {\n const serverErrors = _get(payload, 'action.item.serverErrors');\n if (!_isEmpty(serverErrors)) {\n this.resetSensitiveFields();\n }\n }\n });\n }\n\n getFormValues(savedFormData) {\n let formValues;\n if (!_isEmpty(savedFormData)) {\n formValues = {\n country: savedFormData.country,\n // Auto fill form\n firstname: _get(savedFormData, 'user.firstName', ''),\n lastname: _get(savedFormData, 'user.lastName', ''),\n newAddress: {\n line1: _get(savedFormData, 'billingAddress.line1', ''),\n line2: _get(savedFormData, 'billingAddress.line2', ''),\n city: _get(savedFormData, 'billingAddress.city', ''),\n state: _get(savedFormData, 'billingAddress.state', ''),\n postcode: _get(savedFormData, 'billingAddress.postalCode', ''),\n country: _get(savedFormData, 'billingAddress.country', ''),\n },\n phone: {\n countryCode: _get(savedFormData, 'phone.countryCode', ''),\n number: _get(savedFormData, 'phone.number', ''),\n type: _get(savedFormData, 'phone.type', 'Mobile'),\n },\n user: {\n firstName: _get(savedFormData, 'user.firstName', ''),\n lastName: _get(savedFormData, 'user.lastName', ''),\n email: _get(savedFormData, 'user.email', ''),\n password: '',\n occupation: _get(savedFormData, 'user.occupation', ''),\n nationality: _get(savedFormData, 'user.nationality', ''),\n dateOfBirth: _get(savedFormData, 'user.dateOfBirth', ''),\n countryOfResidence: _get(\n savedFormData,\n 'user.countryOfResidence',\n ''\n ),\n },\n email: _get(savedFormData, 'user.email', ''),\n };\n } else if (!TemplateData.isCountryChange) {\n formValues = {\n country: initialData.selectedCountry,\n // Auto fill form\n firstname: senderDetails.first_name || '',\n lastname: senderDetails.last_name || '',\n newAddress: {\n line1: pre_address.address1 || '',\n line2: pre_address.address2 || '',\n city: pre_address.city || '',\n state: pre_address.state || '',\n postcode: pre_address.zip || '',\n country: pre_address.iso_country || '',\n },\n phone: {\n countryCode: initialData.phoneNumberCountryCode || '',\n number:\n (senderDetails.phone && senderDetails.phone.phone_number) || '',\n type: 'Mobile',\n },\n user: {\n firstName: senderDetails.first_name || '',\n lastName: senderDetails.last_name || '',\n email: senderDetails.sender_email || '',\n password: '',\n occupation: '',\n nationality: '',\n dateOfBirth: '',\n countryOfResidence: '',\n },\n email: senderDetails.sender_email || '',\n };\n } else {\n formValues = this.clearFormValues();\n }\n\n return formValues;\n }\n\n clearFormValues() {\n const formValues = {\n country: initialData.selectedCountry,\n // Auto fill form\n firstname: '',\n lastname: '',\n newAddress: {\n line1: '',\n line2: '',\n city: '',\n state: '',\n postcode: '',\n country: '',\n },\n phone: {\n countryCode: '',\n number: '',\n type: 'Mobile',\n },\n user: {\n firstName: '',\n lastName: '',\n email: '',\n password: '',\n occupation: '',\n nationality: '',\n dateOfBirth: '',\n countryOfResidence: '',\n },\n email: '',\n };\n\n return formValues;\n }\n\n updateAmount = (value) => {\n const currency = AppStore.getDonationCode() || '';\n this.setState({ formatedAmount: formatAmount({ currency, value }) });\n };\n\n /**********************\n PaymentComponent handlers\n **********************/\n // passed to component\n handleChangePaymentInfo = (card = {}) => {\n this.setState({ card: card });\n };\n\n /**********************\n NameComponent handlers\n **********************/\n // passed to component\n handleChangeNameInfo = (firstName, lastName) => {\n let { user = {} } = this.state;\n user.firstName = firstName;\n user.lastName = lastName;\n this.setState({ user: user });\n };\n\n /**********************\n AddressEntryField handlers\n **********************/\n // Handle any default value from server - Auto populate\n // passed to component\n handleAddressDefaultValue = (item) => {\n let keyName = item && item.$;\n\n switch (keyName) {\n case 'line1':\n return this.getAddressDefaultValue('line1', 'address1');\n case 'line2':\n return this.getAddressDefaultValue('line2', 'address2');\n case 'city':\n return this.getAddressDefaultValue('city', 'city');\n case 'state':\n return this.getAddressDefaultValue('state', 'state');\n case 'postcode':\n return this.getAddressDefaultValue('postcode', 'zip');\n default:\n return '';\n }\n };\n\n getAddressDefaultValue = (newAddressKey, prefillAddressKey) => {\n const newAddress = this.state.newAddress;\n return _get(newAddress, newAddressKey) || '';\n\n // if (isCountryChange) {\n // \treturn '';\n // }\n\n // if (this.state.hasSavedFormData) {\n // \treturn _get(newAddress, newAddressKey);\n // }\n\n // return _get(newAddress, newAddressKey) || '';\n };\n\n // passed to component - handle changes to billing address field\n handleChangeBillingField = (field, value) => {\n const newState = {};\n newState[`billing_error_${field}`] = '';\n this.setState(newState);\n\n let newAddress = { ...this.state.newAddress, [field]: value };\n this.setState({ newAddress: newAddress, showAddressErrors: false });\n\n // Only hiding in case for select\n if (field === 'state' && value) {\n this.setState({ billing_error_state: '' });\n }\n };\n\n /**\n * Gets all address fields which have errors\n * @return {Array} Array of address field names\n */\n getAddressFieldsWithErrors = () => {\n // fields will be an array of strings in the format `billing_error_{fieldName}`\n // Eg: [ 'billing_error_postcode', 'billing_error_city', 'billing_error_state' ]\n const fields = _keys(this.state).filter((key) => {\n return _startsWith(key, 'billing_error') && !_isEmpty(this.state[key]);\n });\n // Get field names without 'billing_error_'\n // Eg: [ 'postcode', 'city', 'state' ]\n const fieldNames = fields.map((field) => {\n return field.split('billing_error_')[1];\n });\n\n return fieldNames;\n };\n\n // passed to component - handle blur on billing address\n handleAddressBlur = (field, value) => {\n if (!value) {\n let newErrorState = {};\n const fieldName = `billing_error_${field}`,\n errorCode = `REQUIRED_BILLING_ADDRESS_${field.toUpperCase()}`,\n errorMessage = errorMessages[errorCode];\n newErrorState[fieldName] = errorMessage;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode,\n errorMessage,\n fieldName,\n });\n }\n };\n\n // passed to component - handle postal code error\n handlePostcodeHasError = (postcode) => {\n this.setState({ postcode: postcode });\n };\n\n /**********************\n AddressCheckBox handlers\n **********************/\n // passed to component - handle share address checkbox state\n handleShareAddress = (isChecked) => {\n this.setState({ consentShareAddress: isChecked });\n AppActions.updateShareAddress(isChecked);\n };\n\n /**********************\n PhoneComponent handlers\n **********************/\n // passed to component - handling phone infomation\n handlePhoneInfo = (phone = {}) => {\n this.setState({ phone: phone });\n };\n\n /**********************\n Email handlers\n **********************/\n // passed to component - handles email blur\n handleEmailBlur = (email) => {\n let errCodeEmail = '';\n if (!constants.EMAIL_REX.test(email)) {\n errCodeEmail = 'INVALID_EMAIL_ID';\n } else if (email === '') {\n errCodeEmail = 'MISSING_EMAIL_ID';\n }\n\n let errMessageEmail = errorMessages[errCodeEmail];\n trackErrorIM({\n errorCode: errCodeEmail,\n errorMessage: errMessageEmail,\n fieldName: 'email',\n });\n this.setState({ errMessageEmail: errMessageEmail });\n };\n\n // passed to component - handle email change\n handleChangeEmail = (email, mssg_error) => {\n let { user = {} } = this.state;\n user.email = email;\n this.setState({ user: user, email: email, [mssg_error]: '' });\n };\n\n /**********************\n CreateAccountPre handlers\n **********************/\n // passed to component - handle create account checkbox state\n handleCreateAccountCheckbox = (checked, id) => {\n let chkBxStatus = checked ? 'checked' : 'unchecked';\n trackSignupChekboxClick(chkBxStatus, id);\n this.setState({ passwordFieldsOpen: checked });\n };\n\n // passed to component - When the account creation form has all the valid input then save it\n handleCreateAccountAddInfo = (updateUser) => {\n let { user = {} } = this.state;\n user.dateOfBirth = updateUser.dateOfBirth;\n user.nationality = updateUser.nationality;\n user.occupation = updateUser.occupation;\n user.password = updateUser.password;\n user.legalValid = updateUser.legalValid;\n user.nationalId = {\n type: updateUser.nationalIdType,\n value: updateUser.nationalIdNumber,\n };\n user.consentCommunication = updateUser.consentCommunication;\n this.setState({ user: user });\n };\n\n // passed to component - handle reset of all saved fields from account creation form\n handleCreateAccountResetInfo = () => {\n let { user = {} } = this.state;\n user.dateOfBirth = null;\n user.nationality = null;\n user.occupation = null;\n user.password = null;\n user.legalValid = null;\n user.consentCommunication = false;\n this.setState({ user: user });\n };\n\n /**********************\n GuestTerms handlers\n **********************/\n // passed to component - handles checkbox validation state\n handleGuestTermsRequired = (isValid) => {\n this.setState({ isGuestTerms: isValid, termsCheckBoxError: !isValid });\n };\n\n /**\n * Resets sensitive fields\n * Currently only resets credit card fields\n * TODO: Reset password fields\n */\n resetSensitiveFields = () => {\n this.childPaymentInfo.resetPaymentInfo();\n };\n\n /**********************\n Error handlers and helpers\n **********************/\n // handle field level errors once donate button is pressed,\n // triggered when 'VALIDATION_ERROR' response is received.\n setFieldErrors = (response) => {\n let errorFileds = getErrFields(response);\n\n let messages = [];\n\n for (let i in errorFileds) {\n let errObj = errorFileds[i];\n let key = errorFileds[i].type;\n\n switch (key) {\n case 'INVALID_CARD_NUMBER':\n this.childPaymentInfo.handleCardNumberError('INVALID_CARD_NUMBER');\n this.handleScrollToError();\n break;\n case 'REQUIRED_CARD_NUMBER':\n this.childPaymentInfo.handleCardNumberError('REQUIRED_CARD_NUMBER');\n this.handleScrollToError();\n break;\n case 'INVALID_SECURITY_CODE':\n this.childPaymentInfo.handleSecurityCodeError(\n 'INVALID_SECURITY_CODE'\n );\n this.handleScrollToError();\n break;\n case 'REQUIRED_SECURITY_CODE':\n this.childPaymentInfo.handleSecurityCodeError(\n 'REQUIRED_SECURITY_CODE'\n );\n this.handleScrollToError();\n break;\n case 'INVALID_EXPIRY':\n this.childPaymentInfo.handleExpirationError('INVALID_EXPIRY');\n this.handleScrollToError();\n break;\n case 'REQUIRED_EXPIRY':\n this.childPaymentInfo.handleExpirationError('REQUIRED_EXPIRY');\n this.handleScrollToError();\n break;\n case 'REQUIRED_FIRST_NAME':\n this.childNameInfo.handleFirstNameError('REQUIRED_FIRST_NAME');\n this.handleScrollToError();\n break;\n case 'INVALID_FIRST_NAME':\n this.childNameInfo.handleFirstNameError('INVALID_FIRST_NAME');\n this.handleScrollToError();\n break;\n case 'REQUIRED_LAST_NAME':\n this.childNameInfo.handleLastNameError('REQUIRED_LAST_NAME');\n this.handleScrollToError();\n break;\n case 'INVALID_LAST_NAME':\n this.childNameInfo.handleLastNameError('INVALID_LAST_NAME');\n this.handleScrollToError();\n break;\n case 'INVALID_BILLING_ADDRESS_CITY_STATE_ZIP':\n this.handleAddressErrors(errObj);\n break;\n case 'INVALID_PHONE_NUMBER':\n this.childPhoneInfo.handlePhoneError('INVALID_PHONE_NUMBER');\n break;\n case 'REQUIRED_PHONE_NUMBER':\n this.childPhoneInfo.handlePhoneError('REQUIRED_PHONE_NUMBER');\n break;\n case 'ACCOUNT_ALREADY_EXISTS':\n this.handleExistEmailError('ACCOUNT_ALREADY_EXISTS');\n break;\n case 'MISSING_EMAIL_ID':\n this.handleExistEmailError('MISSING_EMAIL_ID');\n break;\n case 'INVALID_BILLING_ADDRESS_CITY':\n this.handleInvalidBillingAddressError(\n 'city',\n 'INVALID_BILLING_ADDRESS_CITY'\n );\n break;\n case 'INVALID_BILLING_ADDRESS_STATE':\n this.handleInvalidBillingAddressError(\n 'state',\n 'INVALID_BILLING_ADDRESS_STATE'\n );\n break;\n case 'INVALID_BILLING_ADDRESS_ZIP':\n this.handleInvalidBillingAddressError(\n 'postcode',\n 'INVALID_BILLING_ADDRESS_ZIP'\n );\n break;\n default: {\n let message = errorMessages[key] || errorMessages.VALIDATION_ERROR;\n if (message) {\n messages.push({ key: i, value: message });\n }\n const fieldId = JSON.stringify(errObj && errObj.fields);\n trackErrorIM({\n errorCode: key,\n errorMessage: message,\n fieldName: fieldId,\n });\n }\n }\n }\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n };\n\n // handle email error - part of setFieldErrors()\n handleExistEmailError = (key) => {\n let errMessageEmail = errorMessages[key];\n this.setState({ errMessageEmail: errMessageEmail });\n trackErrorIM({\n errorCode: key,\n errorMessage: errMessageEmail,\n fieldName: 'email',\n });\n this.handleScrollToError();\n };\n\n // handle address errors - part of setFieldErrors()\n handleAddressErrors = (errObj) => {\n let errFields = JSON.stringify(errObj.fields);\n let errorMessage = errorMessages.INVALID_BILLING_ADDRESS_CITY_STATE_ZIP;\n\n this.setState({\n showAddressErrors: true,\n addressErrorMessage: errorMessage,\n });\n trackErrorIM({\n errorCode: 'INVALID_BILLING_ADDRESS_CITY_STATE_ZIP',\n errorMessage: errorMessage,\n fieldName: errFields,\n });\n this.handleScrollToError();\n };\n\n // handle city, state, or postal code errors - part of setFieldErrors()\n handleInvalidBillingAddressError = (fieldName, errorCode) => {\n const newErrorState = {};\n const fieldId = `billing_error_${fieldName}`,\n errorMessage = errorMessages[errorCode];\n newErrorState[fieldId] = errorMessage;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode: errorCode,\n errorMessage: errorMessage,\n fieldName: fieldId,\n });\n };\n\n // handles scrolling screen to the error - part of setFieldErrors()\n handleScrollToError = () => {\n let element = document.querySelector(FORM_ERROR_ELEMENT_SELECTOR);\n\n if (!element) {\n return;\n }\n\n while (element.parentElement) {\n element = element.parentElement;\n\n const isErrorContainerElement =\n element &&\n (element.className.startsWith('ppvx_col') ||\n element.className.startsWith('col-md') ||\n element.className === 'email_holder');\n\n if (isErrorContainerElement) {\n scrollElementIntoView(element);\n return;\n }\n }\n };\n\n /**********************\n Validation helpers for Guest Submit and Guest Creation process\n **********************/\n // called in handleRequiredValues()\n handleEmailRequiredFields = (params) => {\n let isValid = true;\n let emailErr;\n let keysToValidate = Object.keys(params);\n\n keysToValidate.forEach((key) => {\n let value = params[key];\n switch (key) {\n case 'email':\n if (!value) {\n isValid = false;\n emailErr = errorMessages.MISSING_EMAIL_ID;\n trackErrorIM({\n errorCode: 'MISSING_EMAIL_ID',\n errorMessage: emailErr,\n fieldName: 'email',\n });\n }\n break;\n default:\n break;\n }\n });\n this.setState({ errMessageEmail: emailErr });\n return isValid;\n };\n\n // called in handleRequiredValues()\n handleAddressRequiredFields = (billingAddress) => {\n let {\n initialData: { addressEntryFormat = {} },\n } = this.state;\n let { allErr = [], isValid = true } = {};\n\n addressEntryFormat.layout.filter((field) => {\n if (field.required && field.$ && !billingAddress[field.$]) {\n isValid = false;\n let newErrorState = {};\n switch (field.$) {\n case 'line1':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_ADDRESS_LINE1;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode: 'REQUIRED_ADDRESS_LINE1',\n errorMessage: errorMessages.REQUIRED_ADDRESS_LINE1,\n fieldName: field.$,\n });\n break;\n case 'city':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_CITY;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode: 'REQUIRED_BILLING_ADDRESS_CITY',\n errorMessage: errorMessages.REQUIRED_BILLING_ADDRESS_CITY,\n fieldName: field.$,\n });\n break;\n case 'state':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_STATE;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode: 'REQUIRED_BILLING_ADDRESS_STATE',\n errorMessage: errorMessages.REQUIRED_BILLING_ADDRESS_STATE,\n fieldName: field.$,\n });\n break;\n case 'postcode':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_ZIP;\n this.setState(newErrorState);\n trackErrorIM({\n errorCode: 'REQUIRED_BILLING_ADDRESS_ZIP',\n errorMessage: errorMessages.REQUIRED_BILLING_ADDRESS_ZIP,\n fieldName: field.$,\n });\n break;\n default:\n break;\n }\n }\n });\n AppActions.updateServerErrors({ serverErrors: allErr });\n return isValid;\n };\n\n // called in handleRequiredValues() - handling guest terms check box if required\n validateGuestTermsCheckBox = (isGuestTerms = false) => {\n const countryInfo = getCountryInfo(this.state.country);\n const isCreateAcc =\n this.state.passwordFieldsOpen ||\n TemplateData.memberMandatory ||\n AppStore.getDonationRecurring() === 'checked';\n let isValid = true;\n\n if (countryInfo.showGuestTermsCheckBox && !isCreateAcc) {\n this.setState({ termsCheckBoxError: !isGuestTerms });\n isValid = isGuestTerms;\n }\n\n if (!isValid) {\n trackErrorIM({\n errorCode: 'GUEST_TERMS_NOT_CHECKED',\n fieldName: 'guestTerm',\n });\n }\n\n return isValid;\n };\n\n /**********************\n Guest Submit Button & Guest Creation\n Flow:\n 1. handleCreateGuest - If no errors, setGuestPaymentData\n 2. setGuestPaymentData - Handles creation of 'myData' object that is passed as 'params' to handleRequiredValues\n 3. handleRequiredValues - Checks that all required fields are valid by calling several other handlers.\n If all return 'isValid', then the 'myData'/'params' obj is passed to checkAnyFormErrors\n 4. checkAnyFormErrors - Performs final check for errors. If no errors, passes 'myData'/'params' obj to submitGuestPayment\n 5. submitGuestPayment - Sends the post request, and performs logic operations over 'result' obj.\n In the third 'else if', if the 'request.data' and 'request.data.confirmationData' are present(true),\n then the 'confirmationData' is passed to handlePaymentSuccess. The other logic checks are for errors,\n and other circumstances, that will be redirected.\n 6. handlePaymentSuccess - The payment was a success! Here, the 'response' is checked to see if the guest wants to sign up,\n and if so, the '#guestCreateAccountdialog' model is shown. In addition, some FPT analytics stuff\n is tagged. After the logic blocks, the response is passed to handleConfirmation.\n 7. handleConfirmation - The response is checked for 'isOfacPending', which will redirect the user to the pending page,\n or the confirmation page.\n **********************/\n\n handleCreateGuest = (event) => {\n event.preventDefault();\n\n let { user } = this.state;\n let isRecurring = AppStore.getDonationRecurring() === 'checked';\n\n // If the user hits submit, show errors if present\n if (\n this.state.passwordFieldsOpen ||\n TemplateData.memberMandatory ||\n isRecurring\n ) {\n this.setState({\n showCreateAccountPreErrors: true,\n });\n }\n\n if (\n (this.state.passwordFieldsOpen ||\n TemplateData.memberMandatory ||\n isRecurring) &&\n !user.password\n ) {\n this.setState({ createaccount: true, isCreateAccValid: !!user.password });\n // if (!user.password) {\n // this.setState({ isCreateAccValid: !!user.password });\n // }\n } else {\n this.setState({ isCreateAccValid: true });\n }\n\n let cusEmail = TemplateData.donationEmail;\n if (cusEmail === this.state.email) {\n this.setState({ errMessageEmail: errorMessages.CANNOT_PAY_SELF });\n }\n if (!this.props.validateDonationAmount()) {\n return;\n }\n\n const errorMessageElement = document.querySelector(\n 'div[class*=\"ppvx_field--error\"]'\n );\n if (errorMessageElement) {\n this.handleScrollToError();\n return;\n }\n\n this.setGuestPaymentData();\n };\n\n setGuestPaymentData = () => {\n let myData = AppStore.getAllData() || {};\n\n const { memberMandatory, token } = TemplateData;\n const {\n user = {},\n card = {},\n phone = {},\n newAddress = {},\n consentShareAddress,\n passwordFieldsOpen,\n DOBPattern,\n isGuestTerms,\n } = this.state;\n const { startDate: { startMonth, startYear } = {} } = card;\n const isRecurring = myData.recurring === 'checked';\n let billingAddress = {\n line1: newAddress.line1,\n city: newAddress.city,\n postalCode: newAddress.postcode,\n postcode: newAddress.postcode, // Griffin has `postcode`\n country: myData.country,\n };\n if (newAddress.line2) {\n billingAddress.line2 = newAddress.line2;\n }\n\n if (newAddress.state) {\n billingAddress.state = newAddress.state;\n }\n\n if (card.expiration) {\n let [expiryMonth = '', expiryYear = ''] = card.expiration.split('/');\n card.expiryMonth = expiryMonth;\n card.expiryYear =\n expiryYear.length === 2 ? '20' + expiryYear : expiryYear;\n }\n\n if (card.dateOfBirth && DOBPattern) {\n let dobDateCard = card.dateOfBirth.split('/');\n let patternsCard = DOBPattern.split('/');\n\n card.dobYear = dobDateCard[patternsCard.indexOf('YYYY')];\n card.dobMonth = dobDateCard[patternsCard.indexOf('MM')];\n card.dobDay = dobDateCard[patternsCard.indexOf('DD')];\n }\n\n myData.isGuestTerms = isGuestTerms;\n myData.user = user;\n myData.card = card;\n myData.phone = phone;\n myData.consentShareAddress = consentShareAddress;\n myData.billingAddress = billingAddress;\n myData.giftAidItFlag = AppStore.getGiftaidItFlagStatus() || false;\n myData.token = token;\n\n if (startMonth && startYear) {\n myData.startDate = `${startMonth}/${startYear}`;\n myData.card.startYear = startYear;\n myData.card.startMonth = startMonth;\n }\n\n if (passwordFieldsOpen || memberMandatory || isRecurring) {\n myData.marketingOptin = user.consentCommunication;\n myData.createaccount = true;\n } else {\n myData.user.password = '';\n myData.createaccount = false;\n }\n\n if (myData.user.dateOfBirth && DOBPattern) {\n var dateObj = dateUtils.parseDob(myData.user.dateOfBirth, DOBPattern);\n\n myData.user.dobYear = dateObj.year;\n myData.user.dobMonth = dateObj.month;\n myData.user.dobDay = dateObj.day;\n }\n\n this.setState({ showAddressErrors: false });\n\n // Updating app store with message = [], as attempt to clean all server errors.\n AppActions.updateServerErrors({ serverErrors: [] });\n AppActions.updateEmail({ email: this.state.email });\n AppActions.updateBillingAddress({ billingAddress: billingAddress });\n\n myData.isNna = isNna(myData.country) && myData.recurring !== 'checked';\n\n // Clone is required to prevent overriding the value of amount\n // Without this, amount will become equal to normalize(amount)\n // 1,23 will become equal to 1.23 causing UI validation error\n const dataToSubmit = _clone(myData);\n dataToSubmit.amount = normalizeNumber(myData.amount);\n\n this.handleRequiredValues(dataToSubmit);\n };\n\n handleRequiredValues = (params) => {\n let paymentStatus = this.childPaymentInfo.handleRequiredFields(params.card);\n let phoneStatus = this.childPhoneInfo.handleRequiredFields(params.phone);\n let emailStatus = this.handleEmailRequiredFields(params.user);\n let addressStatus = this.handleAddressRequiredFields(params.billingAddress);\n let termsCBStatus = this.validateGuestTermsCheckBox(params.isGuestTerms);\n let nameStatus = this.childNameInfo.handleRequiredFields(params.user);\n\n this.setState(\n {\n isGuestFormValid:\n paymentStatus &&\n phoneStatus &&\n emailStatus &&\n addressStatus &&\n termsCBStatus &&\n nameStatus,\n },\n () => {\n this.checkAnyFormErrors(params);\n }\n );\n };\n\n checkAnyFormErrors = (params) => {\n if (this.state.isGuestFormValid && this.state.isCreateAccValid) {\n this.submitGuestPayment(params);\n } else {\n this.handleScrollToError();\n }\n };\n\n isSignUp = () => {\n return (\n this.state.passwordFieldsOpen ||\n TemplateData.memberMandatory ||\n AppStore.getDonationRecurring() === 'checked'\n );\n };\n\n submitGuestPayment = (params) => {\n // Save form data\n // If user navigates back to this page from CrossBorder, then we prefill this info\n this.props.saveFormData({\n country: params.country,\n user: params.user,\n giftAidItFlag: params.giftAidItFlag,\n billingAddress: params.billingAddress,\n consentShareAddress: params.consentShareAddress,\n shareAddress: params.shareAddress,\n phone: params.phone,\n });\n\n this.props.toggleSpinner(true);\n\n trackPaymentSubmitClick({\n isSignUp: this.isSignUp(),\n isNna: isNna(this.state.country),\n link: LINK_NAME.GUEST_FORM_PAYMENT_SUBMIT_BUTTON,\n });\n\n fetcher('/donate/guest', {\n method: 'POST',\n body: JSON.stringify(params),\n })\n .then((response) => response.json())\n .then((result) => {\n console.log('Result :: ', result);\n\n // Adding special handling for WSM_PAYMENT_DENIED because the result\n // comes back with status: redirect which results in reloading of guest page\n // without any error message\n if (result.code === 'WSM_PAYMENT_DENIED') {\n trackErrorIM({\n errorCode: 'WSM_PAYMENT_DENIED',\n errorMessage: 'Payment denied',\n fieldName: 'donate',\n });\n this.props.history.push(\n `/donate/error/payment?token=${params.token}`\n );\n return;\n } else if (\n result.code === 'WSM_PAYER_LIMIT_EXCEEDED' ||\n _get(result, 'error.details[0].name') === 'WSM_PAYER_LIMIT_EXCEEDED'\n ) {\n AppActions.updatePaymentError({\n paymentError: 'WSM_PAYER_LIMIT_EXCEEDED',\n });\n trackErrorIM({\n errorCode: 'WSM_PAYER_LIMIT_EXCEEDED',\n errorMessage: 'Limit exceeded',\n fieldName: 'donate',\n });\n this.props.history.push(\n `/donate/error/payment?token=${params.token}`\n );\n return;\n } else if (result.status === 'redirect') {\n window.location.href = result.url;\n return;\n } else if (\n (result.code === 'CROSS_BORDER' || result.code === 'PAYER_FEE') &&\n result.fundingOpts\n ) {\n let fundingOpts = result.fundingOpts[0];\n // Updating store with funding options\n AppActions.updateFundingOptions({\n fundingOptions: {\n ...fundingOpts,\n currencyCode: result.data?.donationData?.currencyCode ?? 'USD',\n },\n });\n // Redirect to crossborder handler page.\n this.props.history.push('/donate/guest/crossborder');\n window.PAYPAL.analytics.startCPLTracking({\n page: 'main:donate:wps:guest:crossBorder:web::',\n action: 'crossborder_page_loaded',\n uicomp: 'crossBorder',\n uitype: 'page',\n });\n } else if (result.data && result.data.confirmationData) {\n let confirmationData = result.data.confirmationData || {};\n this.handlePaymentSuccess(confirmationData);\n } else if (\n result.code === 'WSM_TRANSACTION_FAILED_DUE_TO_INVALID_CARD_DATA' ||\n _get(result, 'error.details[0].name') ===\n 'WSM_TRANSACTION_FAILED_DUE_TO_INVALID_CARD_DATA'\n ) {\n let messages = parseErrorResponse(result.data.error, errorMessages);\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'WSM_TRANSACTION_FAILED_DUE_TO_INVALID_CARD_DATA',\n errorMessage: messages,\n fieldName: 'donate',\n });\n\n // mock fulfillment error\n // pre-populate saved form data\n const formData = result.formData;\n if (formData) {\n this.props.saveFormData({\n country: formData.country,\n user: formData.user,\n giftAidItFlag: formData.giftAidItFlag,\n billingAddress: formData.billingAddress,\n consentShareAddress: formData.consentShareAddress,\n shareAddress: formData.shareAddress,\n phone: formData.phone,\n });\n }\n } else if (result.code === 'VALIDATION_ERROR') {\n this.setFieldErrors(result);\n this.resetSensitiveFields();\n } else if (result.code === 'WSM_CANNOT_PAY_SELF') {\n let messages = parseValErrResp(\n result,\n errorMessages,\n 'WSM_CANNOT_PAY_SELF'\n );\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'WSM_CANNOT_PAY_SELF',\n errorMessage: messages,\n fieldName: 'donate',\n });\n } else if (result.message === 'CC_LINKED_TO_FULL_ACCOUNT') {\n let messages = parseValErrResp(\n result,\n errorMessages,\n 'CC_LINKED_TO_FULL_ACCOUNT'\n );\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'CC_LINKED_TO_FULL_ACCOUNT',\n errorMessage: messages,\n fieldName: 'donate',\n });\n } else if (result.code === 'ADD_CARD_CONTINGENCY') {\n let messages = parseValErrResp(\n result,\n errorMessages,\n 'ISSUER_DECLINE_ERROR'\n );\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'ADD_CARD_CONTINGENCY',\n errorMessage: messages,\n fieldName: 'donate',\n });\n } else if (result.message === 'ISSUER_DECLINE_ERROR') {\n let messages = parseValErrResp(\n result,\n errorMessages,\n 'ISSUER_DECLINE_ERROR'\n );\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'ISSUER_DECLINE_ERROR',\n errorMessage: messages,\n fieldName: 'donate',\n });\n } else if (result.message === 'RISK_DISALLOWED') {\n let messages = parseValErrResp(\n result,\n errorMessages,\n 'RISK_DISALLOWED'\n );\n // Updating store with any error messages from server.\n AppActions.updateServerErrors({ serverErrors: messages });\n trackErrorIM({\n errorCode: 'RISK_DISALLOWED',\n errorMessage: messages,\n fieldName: 'donate',\n });\n } else if (\n result.code === '3D_SECURE_DATA_COLLECTION_REQUIRED' &&\n result.fundingOpts\n ) {\n let fundingOpts = result.fundingOpts[0];\n // Updating store with funding options\n AppActions.updateFundingOptions({ fundingOptions: fundingOpts });\n this.threeDSContainer.initializeThreeDS();\n\n return;\n } else {\n // Control reaches here for contingency errors also - 'INVALID_CONTINGENCIES' and 'WSM_UNRESOLVED_CONTINGENCIES'\n // Updating store with payment error from server.\n AppActions.updatePaymentError({\n paymentError: result && result.code,\n });\n trackErrorIM({\n errorCode: result && result.code,\n errorMessage: 'Contingency Error',\n fieldName: 'donate',\n });\n this.props.history.push(\n `/donate/error/payment?token=${params.token}`\n );\n }\n })\n .catch((e) => {\n // Handle any wierd errors from service\n this.props.history.push(`/donate/error/payment?token=${params.token}`);\n })\n .finally(() => {\n this.props.toggleSpinner(false);\n });\n };\n\n handlePaymentSuccess = (response) => {\n AppActions.updateConfirmation({ confirmation: response });\n startCustomCPLTrackingForConfirmationPage();\n\n if (\n response.guestSignUp &&\n response.experiment &&\n response.experiment.treatment_name ===\n 'US_cause_guest_donation_flow_treatment'\n ) {\n trackPageIM({\n pageSpec: PAGE_SPEC.GUEST_SIGNUP_SUCCESS_PAGE,\n additionalData: {\n [FPTI_TAGS.EXPERIMENT_ID]: response.experiment.experiment_id,\n [FPTI_TAGS.TREATMENT_ID]: response.experiment.treatment_id,\n },\n });\n this.setState({ isSignUpPanel: true });\n } else if (\n response.guestSignUp &&\n response.experiment &&\n response.experiment.treatment_name ===\n 'US_cause_guest_donation_flow_control'\n ) {\n updateGlobalFPTI({\n [FPTI_TAGS.EXPERIMENT_ID]: response.experiment.experiment_id,\n [FPTI_TAGS.TREATMENT_ID]: response.experiment.treatment_id,\n });\n return this.handleConfirmation(response);\n } else {\n return this.handleConfirmation(response);\n }\n };\n\n handleConfirmation = (response) => {\n const { token } = TemplateData;\n const queryParams = objectOrArrayToQueryString({ token });\n if (response.isOfacPending) {\n this.props.history.push(`/donate/guest/pending?${queryParams}`);\n } else {\n this.props.history.push(`/donate/guest/confirmation?${queryParams}`);\n }\n };\n\n setCountryAndLocaleInLinks = (createAccountPreProps) => {\n const getGuestSignupContent = getContent('locals')('guest/guestForm');\n const getGuestnnaContent = getContent('locals')('guest/nna');\n const countryAndLocale = {\n country: TemplateData.country,\n locale: `${TemplateData.language}_${TemplateData.country}`,\n };\n createAccountPreProps.legalBlurbHTML = getCountryInfo(this.state.country)\n .termsAndConditionsWithFeeInformationDoc\n ? getGuestSignupContent(\n 'guestsignup.legalBlurbWithFeeInformationDoc',\n countryAndLocale,\n { useHTML: true }\n )\n : getGuestSignupContent('guestsignup.legalBlurbHTML', countryAndLocale, {\n useHTML: true,\n });\n createAccountPreProps.consentBlurbHTML = getGuestSignupContent(\n 'guestsignup.consentBlurbHTML',\n {\n brand: TemplateData.brand,\n locale: `${TemplateData.language}_${TemplateData.country}`,\n },\n { useHTML: true }\n );\n createAccountPreProps.legalOnlyHTML = getGuestSignupContent(\n 'guestsignup.legalOnlyHTML',\n countryAndLocale,\n { useHTML: true }\n );\n\n createAccountPreProps.legalOnlyHTMLShort = getGuestSignupContent(\n 'guestsignup.legalOnlyHTMLShort',\n countryAndLocale,\n { useHTML: true }\n );\n\n createAccountPreProps.nnaValueProps = {\n nnaValueProp1: getGuestnnaContent('nnaValueProp1', countryAndLocale, {\n useHTML: true,\n }),\n nnaValueProp2: getGuestnnaContent('nnaValueProp2', countryAndLocale, {\n useHTML: true,\n }),\n nnaValueProp3: getGuestnnaContent('nnaValueProp3', countryAndLocale, {\n useHTML: true,\n }),\n };\n createAccountPreProps.variantType =\n TemplateData?.pxp?.guestNNAValueProp?.variantType || 'CTRL';\n };\n\n handleThreeDSStepUpAuthSuccess = () => {\n this.props.toggleSpinner(true);\n this.props.doFulfilment({\n securityCode: _get(this.state, 'card.securityCode'),\n });\n };\n handleThreeDSFailure = () => {\n // Unrecoverable error !!\n this.props.history.push('/donate/error/threeDS');\n };\n handleFocusOnCreateAccountPre = () => {\n this.setState({ legalCheckboxErrorMsg: '' }); // eslint-disable-line\n };\n\n render() {\n const allGuestMessages = guestLocalsMessages();\n const signUpHeader =\n allGuestMessages.createAccountPreProps &&\n allGuestMessages.createAccountPreProps.mainTitle2;\n const { guestLabels } = allGuestMessages;\n const personalizedMessages = getPersonalizedMessages(\n NNA_CONTENT_TOUCHPOINT,\n { isHtml: true }\n );\n\n let {\n recurringEnabled,\n initialData: { addressEntryFormat = {} },\n } = this.state;\n let isRecurring = AppStore.getDonationRecurring() === 'checked';\n let showCreateAccount =\n recurringEnabled && isRecurring ? true : this.state.memberMandatory;\n let showTermsCheckbox = this.state.passwordFieldsOpen || showCreateAccount;\n let recieveMailLabel = guestLabels.recieveMail;\n let recieveMailToolTip = guestLabels.recieveMailToolTip;\n let orgName = TemplateData.donationName;\n let isNnaEnabled = isNna(this.state.country);\n let shouldShowAddressCheckbox =\n TemplateData.isShipping && TemplateData.isMailingAddressOptionEnabled;\n\n recieveMailLabel = recieveMailLabel.replace('{orgName}', orgName);\n recieveMailToolTip = recieveMailToolTip.replace('{orgName}', orgName);\n recieveMailToolTip = recieveMailToolTip.replace('{orgName}', orgName);\n\n allGuestMessages.createAccountPreProps.mainTitle =\n TemplateData.memberMandatory || (recurringEnabled && isRecurring)\n ? signUpHeader\n : '';\n\n if (TemplateData.memberMandatory || (recurringEnabled && isRecurring)) {\n allGuestMessages.createAccountPreProps.mainTitle = signUpHeader;\n } else if (isNnaEnabled) {\n allGuestMessages.createAccountPreProps.mainTitle =\n allGuestMessages.createAccountPreProps.incentive.title;\n allGuestMessages.createAccountPreProps.createAccountCheckboxContent =\n allGuestMessages.createAccountPreProps.incentive.createAccountCheckboxContent;\n } else {\n allGuestMessages.createAccountPreProps.mainTitle = '';\n }\n\n this.setCountryAndLocaleInLinks(allGuestMessages.createAccountPreProps);\n\n if (['RU'].indexOf(this.state.country) >= 0) {\n return (\n \n \n {this.state.addressErrorMessage}\n \n )}\n \n {addressEntryFormat.layout\n .filter((field) => field._ !== undefined)\n .map((field) => (\n
\n\n {shouldShowAddressCheckbox ? (\n \n
\n \n \n this.props.handleCountryChange(country)\n }\n errorMessage={this.state.errMessageCountry}\n />\n
\n \n
\n \n (this.childPaymentInfo = ref)}\n changePaymentInfo={this.handleChangePaymentInfo}\n country={this.state.country}\n {...allGuestMessages}\n errorMessages={errorMessages}\n {...this.state.initialData}\n />\n
\n \n
\n {this.state.showAddressErrors && (\n \n (this.childNameInfo = ref)}\n {...allGuestMessages}\n errorMessages={errorMessages}\n isRequired={this.state.isRequired}\n {...this.state.initialData}\n guestLabels={guestLabels}\n changeNameInfo={this.handleChangeNameInfo}\n user={this.state.user}\n />\n
\n \n
\n \n (this.childPhoneInfo = ref)}\n {...allGuestMessages}\n {...this.state.initialData}\n defaultNumber={this.state.phone}\n errorMessages={errorMessages}\n isRequired={this.state.isRequired}\n handlePhoneInfo={this.handlePhoneInfo}\n />\n
\n \n
\n \n \n {personalizedMessages.offer_end_date}{' '}\n this.setState({ isOfferTermsOpen: true })}\n >\n {allGuestMessages.createAccountPreProps.incentive.terms}\n \n \n ) : null}\n
\n \n {}}\n handleFocusOnPasswordOne={this.handleFocusOnCreateAccountPre}\n resetValidInfo={() => {}}\n handleAllValidInfo={this.handleCreateAccountAddInfo}\n resetAllValidInfo={this.handleCreateAccountResetInfo}\n showValidationErrors={this.state.showCreateAccountPreErrors}\n isNNA={isNnaEnabled ? true : false}\n ref={this.createAccountRef}\n />\n
\n {isNnaEnabled ? (\n \n
\n \n \n \n
\n )}\n \n
\n )}\n \n {this.state.isProgressive && (\n