\n {errorMessages.map((message, index) => {\n return (\n
\n );\n })}\n \n );\n }\n}\n\nServerErrors.propTypes = {\n errorMessages: PropTypes.array,\n};\n\nexport default ServerErrors;\n","const dobSeparators = ['-', '.', '/'];\n// Cache values for current locale\n// Must be unset on init\nlet dobSeparator;\nlet dateFormat;\n\n/**\n * All supported date separators\n */\nexport function getDateSeparators() {\n return dobSeparators;\n}\n\n/**\n * Returns date separator for the specified format\n * Eg: Returns \"-\" for DD-MM-YYYY, \"/\" dor DD/MM/YYYY\n * @param {String} dobFormat Date format as specified by griffin\n * @return {String} Date separator\n */\nexport function getDOBSeparator(dobFormat) {\n // If we have cached the dobSeparator, return it\n if (dobSeparator) {\n\t return dobSeparator;\n }\n\n let separator = '';\n getDateSeparators().forEach(function (ele, iter) {\n if (dobFormat.indexOf(ele) !== -1) { // eslint-disable-line consumerweb/no-indexof\n separator = ele;\n }\n });\n if (separator) {\n dobSeparator = separator;\n }\n return separator;\n}\n\n/**\n * Formats the date based on the specified pattern\n * @param {String} dob DOB to format\n * @param {String} dobPattern Date Pattern as specified by griffin\n * @return {String} Formatted DOB\n */\nexport function getFormattedDob(dob, dobPattern) {\n let dobFormat = getDateFormat(dobPattern);\n let dateSeparator = getDOBSeparator(dobPattern);\n let dateDigitsOnly = dob.replace(/\\D+/g, '').slice(0, 8);\n let formattedDate = '';\n\n // Did user manually enter the separator?\n let lastCharIsSeparator = false;\n if (dob[dob.length - 1] === dateSeparator) {\n lastCharIsSeparator = true;\n }\n\n if (dobFormat === 'DMY' || dobFormat === 'MDY') {\n // If '/' is the dateSeparator,\n // Format as [2digits]/[2digits]/[4digits]\n // Eg: DD/MM/YYYY or MM/DD/YYYY\n\n let dd = dateDigitsOnly.slice(0, 2);\n let mm = dateDigitsOnly.slice(2, 4);\n let yy = dateDigitsOnly.slice(4);\n\n // Theres probably a better way to do this\n if (dd) {\n formattedDate = dd;\n if (dateDigitsOnly.length > 2 || (dateDigitsOnly.length === 2 && lastCharIsSeparator)) {\n formattedDate += dateSeparator;\n }\n }\n if (mm) {\n formattedDate += mm;\n if (dateDigitsOnly.length > 4 || (dateDigitsOnly.length === 4 && lastCharIsSeparator)) {\n formattedDate += dateSeparator;\n }\n }\n if (yy) {\n formattedDate += yy;\n }\n\n } else {\n // Format as YYYY/DD/MM\n let yy = dateDigitsOnly.slice(0, 4);\n let mm = dateDigitsOnly.slice(4, 6);\n let dd = dateDigitsOnly.slice(6);\n if (yy) {\n formattedDate = yy;\n if (dateDigitsOnly.length > 4 || (dateDigitsOnly.length === 4 && lastCharIsSeparator)) {\n formattedDate += dateSeparator;\n }\n }\n if (mm) {\n formattedDate += mm;\n if (dateDigitsOnly.length > 6 || (dateDigitsOnly.length === 6 && lastCharIsSeparator)) {\n formattedDate += dateSeparator;\n }\n }\n if (dd) {\n formattedDate += dd;\n }\n }\n\n return formattedDate;\n}\n\nexport function isOfLegalAge(dob, dobPattern) {\n let dateObject = parseDob(dob, dobPattern);\n if (isDateStringValid(dateObject)) {\n let { year, month, day } = dateObject;\n let birthDate = new Date(year, month - 1, day);\n // user should be of exact 18 years of age or older\n let tempDate = new Date(birthDate.getFullYear() + 18, birthDate.getMonth(), birthDate.getDate());\n\n return tempDate <= new Date().setHours(0, 0, 0, 0);\n }\n\n return false;\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 let dateObject = parseDob(dob, dobPattern);\n if (isDateStringValid(dateObject)) {\n let { year, month, day } = dateObject;\n return isDateValid(year, month - 1, day);\n }\n\n return false;\n}\n\nfunction isDateValid(year, month, day) {\n // dates like 02/31 33/33 should return false\n let date = new Date(year, month, day);\n\n let fullYear = date.getFullYear();\n let dateMonth = date.getMonth();\n let dateDay = date.getDate();\n\n // If birth year is in the future or before 1900, dob is invalid\n let now = new Date();\n if (fullYear > now.getFullYear() || fullYear < 1900) {\n return false;\n }\n\n if (fullYear === parseInt(year, 10) && dateMonth === parseInt(month, 10) && dateDay === parseInt(day, 10)) {\n return true;\n }\n return false;\n}\n\n/**\n * Parses the date string to return an object in the following format\n * {\n * \tday,\n * \tmonth,\n * \tyear\n * }\n * Eg: If input is \"11/12/2017\", returns\n * {\n * \tday: 11,\n * \tmonth: 12,\n * \tyear: 2017\n * }\n */\nexport function parseDob(inputVal, dobPattern) {\n let day;\n let month;\n let year;\n let sep = getDOBSeparator(dobPattern);\n let partsArr = inputVal.split(sep);\n let first = partsArr[0];\n let sec = partsArr[1];\n let third = partsArr[2];\n\n if (getDateFormat(dobPattern) === 'DMY') {\n day = first;\n month = sec;\n year = third;\n } else if (getDateFormat(dobPattern) === 'YMD') {\n year = first;\n month = sec;\n day = third;\n } else {\n month = first;\n day = sec;\n year = third;\n }\n\n return {\n day,\n month,\n year\n };\n\n}\n\n/**\n * Checks whether the date string is a valid date\n */\nexport function isDateStringValid({ day, month, year }) {\n // Validate only on entering the last digit of the dob\n let dayLen = ('' + day).length;\n let monLen = ('' + month).length;\n let yrLen = ('' + year).length;\n let validDay = dayLen === 1 || dayLen === 2;\n let validMon = monLen === 1 || monLen === 2;\n let validYr = yrLen === 4;\n return validDay && validMon && validYr;\n\n}\n\n/**\n * Returns the date format as a 3 letter string\n * Returns\n * \t1. 'DMY' for DDMMYYYY format\n * \t2. 'MDY' for MMDDYYYY format\n * \t3. 'YMD' for YYYYMMDD format\n * @param {String} dobFormat Format of Date of Birth\n * @return {String} Date Format\n */\nexport function getDateFormat(dobFormat) {\n // cache date format value\n if (dateFormat) {\n return dateFormat;\n }\n\n let dateFormatComponents = dobFormat.split(getDOBSeparator(dobFormat));\n\n // Its can be 'D' or 'DD'\n let dIdx = dateFormatComponents.indexOf('D') !== -1 ? dateFormatComponents.indexOf('D') : dateFormatComponents.indexOf('DD'), // eslint-disable-line consumerweb/no-indexof\n mIdx = dateFormatComponents.indexOf('MM'); // eslint-disable-line consumerweb/no-indexof\n\n let formatComponentMap = getFormatComponentIdxMappings();\n if (formatComponentMap.DMY.day === dIdx && formatComponentMap.DMY.month === mIdx) {\n dateFormat = 'DMY';\n return dateFormat;\n } else if (formatComponentMap.MDY.day === dIdx && formatComponentMap.MDY.month === mIdx) {\n dateFormat = 'MDY';\n return dateFormat;\n }\n\n // Neither DMY nor MDY\n dateFormat = 'YMD';\n return dateFormat;\n}\n\nfunction getFormatComponentIdxMappings() {\n return {\n DMY: {\n day: 0,\n month: 1,\n year: 2\n },\n MDY: {\n day: 1,\n month: 0,\n year: 2\n },\n YMD: {\n day: 2,\n month: 1,\n year: 0\n }\n };\n}\n\nexport function isValidDate(year, month, day) {\n // dates like 02/31 33/33 should return false\n let date = new Date(year, month, day);\n\n let fullYear = date.getFullYear();\n let dateMonth = date.getMonth();\n let dateDay = date.getDate();\n\n // If birth year is in the future or before 1900, dob is invalid\n let now = new Date();\n if (fullYear > now.getFullYear() || fullYear < 1900) {\n return false;\n }\n\n if (fullYear === parseInt(year, 10) && dateMonth === parseInt(month, 10) && dateDay === parseInt(day, 10)) {\n return true;\n }\n return false;\n}\n\n/**\n * Resets the cached variables. Required mostly for unit tests\n */\nexport function reset() {\n dobSeparator = null;\n dateFormat = null;\n}\n","/**\n * Select Country of Nationality\n * - user's country used to determine add card and add address formats\n */\n\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { DropdownMenu } from '@paypalcorp/pp-react';\n\nclass CountrySelection extends React.Component {\n static propTypes = {\n supportedCountries: (props, propName, componentName) => {\n const supportedCountries = props[propName];\n\n // if we don't get the array of states we're expecting from Griffin, return an error\n if (\n !Array.isArray(supportedCountries) ||\n (supportedCountries.length && !supportedCountries[0].countryCode)\n ) {\n return new Error(\n `Invalid prop \\`${propName}\\` supplied to \\`${componentName}\\`. Please supply the array you get back from griffin.metadata.allSupportedCountries(), but map each supported country to an object: \\`{ countryCode, countryName }.\\``\n );\n }\n return null;\n },\n defaultValue: PropTypes.string,\n label: PropTypes.string,\n changeCountry: PropTypes.func.isRequired,\n errorMessage: PropTypes.string,\n };\n\n static defaultProps = {\n supportedCountries: [],\n changeCountry: () => {},\n };\n\n /**\n * Set initial state to the first country in the list\n */\n state = {\n selectedIndex: this.props.supportedCountries.findIndex((c) => c.countryCode === (this.props.defaultValue || this.props.supportedCountries[0].countryCode)),\n };\n\n /**\n * Select the first country in the list\n */\n componentDidMount() {\n if(this.state.selectedIndex >= 0) {\n this.props.changeCountry(this.props.supportedCountries[this.state.selectedIndex].countryCode);\n }\n }\n\n /**\n * Handle changing the selected country\n * - set the state\n * - call parent's changeCountry() with the selected country\n */\n handleChangeCountry = (index) => {\n this.setState({ selectedIndex: index });\n let selectedCountry = this.props.supportedCountries[index].countryCode;\n this.props.changeCountry(selectedCountry);\n };\n\n render() {\n // don't render anything if we don't get the correctly formatted list of countries\n if (!this.props.supportedCountries[0].countryCode) {\n return null;\n }\n\n const countries = this.props.supportedCountries.map(\n country => ({\n primaryText: country.countryName\n })\n );\n\n return (\n \n
\n \n\t\t\t\t this.handleChangeEmail(event.target.value, 'errMessageEmail')}\n\t\t\t\t\tonBlur={(event) => this.handleBlur(event.target.value)}\n\t\t\t\t/>\n\t\t\t
\n\t\t);\n\t}\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\tlet warningCodes = [];\n\n\t// check empty\n\tif (!password || !password.trim()) {\n\t\twarningCodes.push('_IS_NULL');\n\t}\n\t// length check\n\tconst minLength = 8;\n\tif (password.length < minLength) {\n\t\twarningCodes.push('_TOO_SHORT');\n\t}\n\tconst maxLength = 20;\n\tif (password.length > maxLength) {\n\t\twarningCodes.push('_TOO_LONG');\n\t}\n\t// repeated sequence\n\tconst disallowedRepetition = /(.)\\1{3}/g;\n\tif (password.match(disallowedRepetition)) {\n\t\twarningCodes.push('_CONTAINS_REPEATED_CHARACTERS');\n\t}\n\t// consecutive Number\n\tconst disallowedNumberPatterns = /0123|1234|2345|3456|4567|5678|6789|7890|8901|9012/g;\n\tif (password.match(disallowedNumberPatterns)) {\n\t\twarningCodes.push('_CONTAINS_NUMBER_SEQUENCE');\n\t}\n\t// sequence Character\n\tconst disallowedSequences = /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\tif (password.match(disallowedSequences)) {\n\t\twarningCodes.push('_CONTAINS_LETTER_SEQUENCE');\n\t}\n\t// sequence Special Characters\n\tconst disallowedCharacters = /\\`123|890-|90-=|iop[|op[]|p\\[\\]\\\\|jkl\\;|kl\\;'|bnm,|nm,.|m,.\\/|~!@\\#|!@\\#$|@#\\$%|#\\$%\\^|\\$%\\^&|\\%\\^&\\*|\\^&\\*\\(|&\\*\\(\\)|\\*\\(\\)\\_|\\(\\)\\_\\+|iop\\[|op\\[\\]|p\\[\\]\\\\|BNM<|NM<>|M<>\\?|IOP{}|OP{}|P{}\\|/g;\n\tif (password.match(disallowedCharacters)) {\n\t\twarningCodes.push('_CONTAINS_NUMBER_LETTER_SEQUENCE');\n\t}\n\t// blacklisted password\n\tconst blacklisted_passwords = ['password', 'access14', 'americanidol', 'baseball', 'baseball1', 'bigdaddy', 'blink182', 'butthead', 'cocacola', 'computer', 'corvette', 'cowboys', 'danielle', 'dolphins', 'einstein', 'firebird', 'football', 'football1', 'iloveyou', 'iloveyou1', 'internet', 'jennifer', 'jordan23', 'liverpool', 'liverpool1', 'marlboro', 'maverick', 'melanie', 'michelle', 'midnight', 'mistress', 'mountain', 'myspace1', 'password', 'password1', 'princess1', 'qwertyui', 'redwings', 'rush2112', 'samantha', 'scorpion', 'slipknot1', 'srinivas', 'startrek', 'starwars', 'sunshine', 'superman', 'superman1', 'swimming', 'trustno1', 'victoria', 'whatever', 'passwort', 'passwort1', 'frankfurt', 'fussball'];\n\tif (blacklisted_passwords.includes(password.toLowerCase())) {\n\t\twarningCodes.push('_IS_BLACKLISTED');\n\t}\n\t// contains spaces\n\tif ((/\\s/).test(password)) {\n\t\twarningCodes.push('_CONTAINS_SPACES');\n\t}\n\t// has illegal chars & allow only 7-bit printable chars\n\tif (password.split('').some(char => (char.charCodeAt(0) < 32 || char.charCodeAt(0) > 126))) {\n\t\twarningCodes.push('_HAS_ILLEGAL_CHARACTERS');\n\t}\n\n\treturn 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\tUS: {\n\t\tshowDOB: false,\n\t\tshowOccupation: false,\n\t\tshowNationality: false,\n\t\tshowLegalCheckBox: false,\n\t\tshowLegalTextOnly: true,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: false,\n\t\tconsentCheckBoxEnabled: false,\n\t\tDOBPattern: 'MM/DD/YYYY', // DOBPattern can also be passed as props to component\n\t\toccupations: [],\n\t\tshowGuestTermsText: true,\n\t\tshowGuestTermsCheckBox: false,\n\t\tshowGuestCPF: false,\n\t},\n\tCA: {\n\t\tshowDOB: true,\n\t\tshowOccupation: true,\n\t\tshowNationality: false,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: true,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'MM/DD/YYYY',\n\t\tshowGuestTermsText: true,\n\t\tshowGuestTermsCheckBox: false,\n\t\tshowPhoneCountryCode: false,\n\t\toccupations: [ // occupations can also be passed as props to component\n\t\t\t{ label: 'Accounting', value: 'Accounting' },\n\t\t\t{ label: 'Administration', value: 'Administration' },\n\t\t\t{ label: 'Arts, Culture', value: 'Arts, Culture' },\n\t\t\t{ label: 'Business', value: 'Business' },\n\t\t\t{ label: 'Communications', value: 'Communications' },\n\t\t\t{ label: 'Customer Service', value: 'Customer Service' },\n\t\t\t{ label: 'Education', value: 'Education' },\n\t\t\t{ label: 'Energy, Utilities', value: 'Energy, Utilities' },\n\t\t\t{ label: 'Engineering', value: 'Engineering' },\n\t\t\t{ label: 'Finance', value: 'Finance' },\n\t\t\t{ label: 'Financial Services', value: 'Financial Services' },\n\t\t\t{ label: 'Government', value: 'Government' },\n\t\t\t{ label: 'Health', value: 'Health' },\n\t\t\t{ label: 'Hospitality', value: 'Hospitality' },\n\t\t\t{ label: 'Human Resources', value: 'Human Resources' },\n\t\t\t{ label: 'Internet', value: 'Internet' },\n\t\t\t{ label: 'Legal', value: 'Legal' },\n\t\t\t{ label: 'Manufacturing', value: 'Manufacturing' },\n\t\t\t{ label: 'Marketing', value: 'Marketing' },\n\t\t\t{ label: 'Non-profit', value: 'Non-profit' },\n\t\t\t{ label: 'Recreation', value: 'Recreation' },\n\t\t\t{ label: 'Religion', value: 'Religion' },\n\t\t\t{ label: 'Research', value: 'Research' },\n\t\t\t{ label: 'Sales', value: 'Sales' },\n\t\t\t{ label: 'Sports, Fitness', value: 'Sports, Fitness' },\n\t\t\t{ label: 'Student', value: 'Student' },\n\t\t\t{ label: 'Technology', value: 'Technology' },\n\t\t\t{ label: 'Trade', value: 'Trade' },\n\t\t\t{ label: 'Transportation', value: 'Transportation' },\n\t\t\t{ label: 'Travel', value: 'Travel' },\n\t\t],\n\t\tshowGuestCPF: false\n\t},\n\tGB: {\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: true,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tAU: {\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: false,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: true,\n\t\tshowPasswordHint: true,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: false,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tFR: { // FRANCE\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tIT: { // ITALY\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tIL: { // ISRAEL\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: false,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: false,\n\t\tconsentCheckBoxEnabled: false,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowGuestCPF: false\n\t},\n\tES: { // SPAIN\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tIE: { // IRELAND\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: false,\n\t\tshowPhoneCountryCode: false,\n\t\tshowGuestCPF: false\n\t},\n\tNL: { // NETHERLANDS\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: true,\n\t\tshowGuestCPF: false\n\t},\n\tAT: { // AUSTRIA\n\t\tshowDOB: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD.MM.YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: true,\n\t\tshowGuestCPF: false\n\t},\n\tCH: { // SWITZERLAND\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: true,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: true,\n\t\tconsentCheckBoxEnabled: true,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: true,\n\t\tshowNationalId: true,\n\t\tnationalIds: [ // nationalIds can also be passed as props to component\n\t\t\t{ label: 'Identity card', value: 'NATIONAL_ID' },\n\t\t\t{ label: 'Passport', value: 'PASSPORT_NUMBER' },\n\t\t\t{ label: 'Driver licence', value: 'DRIVERS_LICENSE' }\n\t\t],\n\t\tshowGuestCPF: false\n\t},\n\tBR: { // BRAZIL\n\t\tshowDOB: true,\n\t\tshowDOBHelp: true,\n\t\tshowDOBMust18: true,\n\t\tshowOccupation: false,\n\t\tshowNationality: false,\n\t\tshowLegalCheckBox: true,\n\t\tshowLegalTextOnly: false,\n\t\tshowPasswordHint: false,\n\t\tshowConsentCheckBox: false,\n\t\tconsentCheckBoxEnabled: false,\n\t\tDOBPattern: 'DD/MM/YYYY',\n\t\toccupations: [],\n\t\tshowGuestTermsText: false,\n\t\tshowGuestTermsCheckBox: true,\n\t\tshowPhoneCountryCode: true,\n\t\tshowGuestCPF: true\n\t}\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\treturn 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\treturn 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\treturn dateUtils.validateDob(dob, DOBPattern);\n}\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\treturn 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\ttypeWrapper: {\n\t\tmargin: '10px 0 0',\n\t\tposition: 'relative',\n\t},\n\terrorMessage: {\n\t\ttransition: 'all 0.25s ease-in-out'\n\t},\n\tdropdown: {\n\t\tpadding: 0,\n\t\ttextIndent: 12,\n\t\tboxSizing: 'content-box',\n\t\tappearance: 'none'\n\t},\n\tarrow: {\n\t\tposition: 'absolute',\n\t\tright: 10,\n\t\ttop: '50%',\n\t\tcursor: 'default',\n\t\tpointerEvents: 'none'\n\t},\n\tarrowError: {\n\t\tmarginTop: -17\n\t},\n\terrorStyles: {\n\t\theight: '100%'\n\t}\n});\n\nclass NationalId extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tconst nationalIds = !_isEmpty(this.props.nationalIds) ? this.props.nationalIds : getCountryInfo(this.props.country).nationalIds;\n\t\tthis.state = {\n\t\t\tnationalIdTypeIdx: nationalIds.findIndex(item => item.value === this.props.defaultIdType),\n\t\t};\n\t }\n static propTypes = {\n\t\tcountry: PropTypes.string,\n\t\tlabelNationalIdType: PropTypes.string,\n\t\tlabelNationalIdNumber: PropTypes.string,\n\t\thelpText: PropTypes.string,\n\t\tshowErrorMessages: PropTypes.bool,\n\t\tvalue: PropTypes.string,\n\t\terrorMessageType: PropTypes.string,\n\t\terrorMessageNumber: PropTypes.string,\n\t\tdefaultIdType: PropTypes.string,\n\t\tnationalIds: PropTypes.array,\n\t\tchangeEmail: PropTypes.func,\n\t\thandleFocus: PropTypes.func,\n\t\thandleBlur: PropTypes.func,\n\t\tresetNationalId: PropTypes.func,\n\t\tvalidNationalIdType: PropTypes.func,\n\t\tvalidNationalIdNumber: PropTypes.func,\n\t};\n\n static defaultProps = {\n showErrorMessages: true,\n handleFocus: () => {},\n handleBlur: () => {},\n resetNationalId: () => {},\n validNationalIdType: () => {},\n validNationalIdNumber: () => {},\n };\n\n /**\n\t * Call parent's handleFocus\n\t * @param {String} nationalIdNumber - national ID number\n\t */\n handleFocus = (nationalIdNumber) => {\n\t\tthis.props.handleFocus(nationalIdNumber);\n\t};\n\n /**\n\t * Call parent's handleBlur\n\t * @param {String} nationalIdNumber - national ID number\n\t */\n handleBlur = (nationalIdNumber) => {\n\t\tthis.props.handleBlur(nationalIdNumber);\n\t};\n\tgetNationalIds = () => {\n\t\tconst countryInfo = getCountryInfo(this.props.country);\n\t\t// Getting natiponal id's from props or from localizer\n\t\treturn !_isEmpty(this.props.nationalIds) ? this.props.nationalIds : countryInfo.nationalIds;\n\t}\n\tgetNationalIdOptions = () => {\n\t\tconst nationalIds = this.getNationalIds();\n\t\treturn nationalIds.map((item) => {\n\t\t\treturn {\n\t\t\t\tprimaryText: item.label,\n\t\t\t}\n\t\t})\n\t}\n\n /**\n\t * handleChangeNationalIdType\n\t * @param {Number} index - national ID type index\n\t */\n handleChangeNationalIdType = index => {\n\t\tthis.setState({ nationalIdTypeIdx: index });\n\t\tconst nationalIds = this.getNationalIds();\n\t\tlet nationalIdType = nationalIds[index].value;\n\n\t\tif (nationalIdType) {\n\t\t\tthis.props.validNationalIdType(nationalIdType);\n\t\t} else {\n\t\t\tthis.props.resetNationalId();\n\t\t}\n\t};\n\n /**\n\t * Call parent's handleFocus\n\t * @param {String} nationalIdNumber - national ID number\n\t */\n handleChangeNationalNumber = (nationalIdNumber) => {\n\t\tthis.setState({ nationalIdNumber });\n\t\tif (nationalIdNumber) {\n\t\t\tthis.props.validNationalIdNumber(nationalIdNumber);\n\t\t} else {\n\t\t\tthis.props.resetNationalId();\n\t\t}\n\t\treturn nationalIdNumber;\n\t};\n\n render() {\n\t\tconst countryInfo = getCountryInfo(this.props.country);\n\t\tconst { value: initialValue, errorMessageType, errorMessageNumber, showErrorMessages } = this.props;\n\n\t\tlet typeWrapperClassNames = classNames(css(STYLES.typeWrapper), {\n 'vx_has-error-with-message ppvx_field--error': errorMessageType,\n });\n\n\t\t// define the wrapper classNames, which handle showing error messages\n\t\tlet numberWrapperClassNames = classNames(css(STYLES.typeWrapper), {\n 'vx_has-error-with-message ppvx_field--error': errorMessageNumber\n });\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{countryInfo.showNationalId &&
\n\t\t);\n\t}\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 { TextInput, Checkbox, HeadingText, CaptionText, DropdownMenu } from '@paypalcorp/pp-react';\nimport NationalId from './NationalId';\nimport { getCountryInfo, getFormattedDob, validateDob, validateDobIs18 } from './util/localizer';\nimport * as FPT from '../utility/fpt';\nimport isEmpty from 'lodash/isEmpty';\n\nconst styles = StyleSheet.create({\n\tmainTitle: {\n\t\tmarginBottom: '10px'\n\t},\n\tmainBlurb: {\n\t\tmarginBottom: '15px'\n\t},\n\titsFreeLine: {\n\t\tmargin: '30px 0 15px 0',\n\t},\n\tshiftRight: {\n\t\tmarginLeft: '40px',\n\t},\n\thide: {\n\t\tdisplay: 'none',\n\t},\n\tcreateAccountCheckboxWrapper: {\n\t\tposition: 'absolute',\n\t\twidth: 'inherit',\n\t\tdisplay: 'inline',\n\t},\n\tcreateAccountCheckbox: {\n\t\t':before': {\n\t\t\toverflow: 'hidden',\n\t\t\tborder: '1px solid #9b9b9b',\n\t\t}\n\t},\n\tcreateAccountLine: {\n\t\tmarginLeft: '40px'\n\t},\n\tpasswordWarningWrapper: {\n\t\tbackground: '#fff7f7',\n\t\tpadding: '10px 10px 5px',\n\t\tborderRadius: 5,\n\t\tborder: '1px solid #c72e2e',\n\t\tmarginTop: 15,\n\t},\n\tpasswordHintWrapper: {\n\t\tbackground: '#eef1f6',\n\t\tpadding: 5,\n\t\tpaddingLeft: 40,\n\t\tborderRadius: 5,\n\t\tmarginTop: 5,\n\t\tfontSize: 12,\n\t},\n\tpasswordWarningItem: {\n\t\tmargin: 0,\n\t\tpaddingBottom: 5,\n\t},\n\tlegalCheckboxWrapper: {\n\t\tposition: 'absolute',\n\t\twidth: 'inherit',\n\t\tdisplay: 'inline',\n\t},\n\tlegalCheckbox: {\n\t\t':before': {\n\t\t\toverflow: 'hidden',\n\t\t\tborder: '1px solid #9b9b9b',\n\t\t}\n\t},\n\tredBorder: {\n\t\t':before': {\n\t\t\tbackground: '#fff7f7',\n\t\t\tborder: '1px solid #c72e2e',\n\t\t}\n\t},\n\tlegalBlurb: {\n\t\tlineHeight: '18px',\n\t\tmarginLeft: '40px'\n\t},\n\tlegalTextOnly: {\n\t\tlineHeight: '18px'\n\t},\n\tbutton: {\n\t\tdisplay: 'block',\n\t\tmargin: '40px auto 0'\n\t},\n\tpasswordWrapper: {\n\t\tmarginBottom: '10px'\n\t},\n\tdobWrapper: {\n\t\tmarginBottom: '10px'\n\t},\n\tdobHelpText: {\n\t\tborder: 'solid 1px #0093e0',\n\t\tbackground: '#f2fafe',\n\t\tcolor: 'black',\n\t\tborderTop: 'none',\n\t},\n\tdropdown: {\n\t\tpadding: 0,\n\t\ttextIndent: 12,\n\t\tboxSizing: 'content-box',\n\t\tappearance: 'none'\n\t},\n\tnoHelperText: {\n\t\tmarginTop: '.9375rem'\n\t}\n});\n\nclass CreateAccountPre extends React.Component {\n\tstatic propTypes = {\n\t\tmainTitle: PropTypes.string.isRequired,\n\t\tmainBlurb: PropTypes.string.isRequired,\n\t\tlegalBlurbHTML: PropTypes.object.isRequired,\n\t\tcreateAccountCheckboxContent: PropTypes.string.isRequired,\n\t\thandleValidInfo: PropTypes.func.isRequired,\n\t\tresetValidInfo: PropTypes.func.isRequired,\n\n\t\thandleAllValidInfo: PropTypes.func,\n\t\tresetAllValidInfo: PropTypes.func,\n\n\t\tlegalOnlyHTML: PropTypes.object,\n\t\tlabelnationality: PropTypes.string,\n\t\tconsentBlurbHTML: PropTypes.object,\n\t\tsupportedCountries: PropTypes.array,\n\t\toccupations: PropTypes.array,\n\n\t\tshowValidationErrors: PropTypes.bool.isRequired,\n\t\titsFreeLine: PropTypes.string,\n\t\tcreateAccountHelp1: PropTypes.string,\n\t\tcreateAccountHelp2: PropTypes.string,\n\t\tlabeldob: PropTypes.string,\n\t\thelpdob: PropTypes.string,\n\t\tdobPattern: PropTypes.string,\n\t\tdobHelp: PropTypes.string,\n\t\toccupationError: PropTypes.bool,\n\t\tnationalityError: PropTypes.bool,\n\t\tdefaultIdType: PropTypes.string,\n\t\tisNNA: PropTypes.bool,\n\n\t\tlabel1: PropTypes.string,\n\t\thandleFocusOnPasswordOne: PropTypes.func,\n\t\tlabel2: PropTypes.string,\n\t\thandleCreateAccountCheckbox: PropTypes.func,\n\t\tshowCreateAccountFields: PropTypes.bool,\n\t\tmandatory: PropTypes.bool,\n\t\tcountry: PropTypes.string,\n\t\tlabelocc: PropTypes.string,\n\t\tpasswordWarnings: PropTypes.shape({\n\t\t\t_MISMATCH: PropTypes.string.isRequired,\n\t\t\t_IS_NULL: PropTypes.string.isRequired,\n\t\t\t_TOO_SHORT: PropTypes.string.isRequired,\n\t\t\t_TOO_LONG: PropTypes.string.isRequired,\n\t\t\t_CONTAINS_REPEATED_CHARACTERS: PropTypes.string.isRequired,\n\t\t\t_CONTAINS_NUMBER_SEQUENCE: PropTypes.string.isRequired,\n\t\t\t_CONTAINS_LETTER_SEQUENCE: PropTypes.string.isRequired,\n\t\t\t_CONTAINS_NUMBER_LETTER_SEQUENCE: PropTypes.string.isRequired,\n\t\t\t_IS_BLACKLISTED: PropTypes.string.isRequired,\n\t\t\t_CONTAINS_SPACES: PropTypes.string.isRequired,\n\t\t\t_HAS_ILLEGAL_CHARACTERS: PropTypes.string.isRequired,\n\t\t\t_LEGAL_CHECKBOX: PropTypes.string.isRequired,\n\t\t\t_INVALID_DOB: PropTypes.string,\n\t\t\t_REQUIRED_DOB: PropTypes.string,\n\t\t\t_HELP_DOB: PropTypes.string,\n\t\t\t_MUST_18_DOB: PropTypes.string,\n\t\t\t_OCCUPATION: PropTypes.string,\n\t\t\t_NATIONALITY: PropTypes.string,\n\t\t\t_NATIONAL_ID_TYPE: PropTypes.string,\n\t\t\t_NATIONAL_ID_NUMBER: PropTypes.string,\n\t\t\t_HINT1: PropTypes.string,\n\t\t\t_HINT2: PropTypes.string,\n\t\t\t_HINT3: PropTypes.string,\n\t\t}).isRequired,\n\t\tincentive: PropTypes.object,\n\t};\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tconst { country = 'US', defaultIdType } = props;\n\t\tconst countryInfo = getCountryInfo(country);\n\n\t\tthis.state = {\n\t\t\tshowCreateAccountFields: false,\n\t\t\tpassword1: '',\n\t\t\tpassword2: '',\n\t\t\tdateOfBirth: '', // For cross-border\n\t\t\toccupationIdx: -1, // For cross-border\n\t\t\tnationalityIdx: -1,\n\t\t\tnationalIdNumber: '',\n\t\t\tnationalIdType: defaultIdType || '',\n\t\t\tacceptedLegal: false, // For cross-border\n\t\t\tconsentCommunication: countryInfo.consentCheckBoxEnabled || false, // For cross-border\n\t\t\tshowPasswordHint: false, // For cross-border\n\t\t\tshowDateOfBirthHelp: false, // For Date of Birth\n\t\t\tpasswordErrors: [],\n\t\t\toptional: false\n\t\t};\n\t}\n\n\t// every time the component updates, should check for valid info to fire to parent\n\tcomponentDidUpdate(prevProps, prevState) {\n\t\t// If someone where calling setState (or anything prompting rerender) within this.props.handleValidInfo or this.props.resetValidInfo\n\t\t// it would cause an infinite loop (component would rerender, passwords would still be valid, etc.).\n\t\t// This outer `if` statement checks that the password or checkbox has changed before calling the parent method.\n\t\tif (prevState.password1 !== this.state.password1 ||\n\t\t\tprevState.password2 !== this.state.password2 ||\n\t\t\tprevState.acceptedLegal !== this.state.acceptedLegal) {\n\t\t\tconst passwordErrors = passwordValidator(this.state.password1);\n\t\t\t// if the passwords match, have no error, and the user has accepted the legal agreement...\n\t\t\tif (this.doPasswordsMatch() && !passwordErrors.length && this.state.acceptedLegal) {\n\t\t\t\t// call the prop function that signifies to the parent that everything is ready to go!\n\t\t\t\tthis.props.handleValidInfo(this.state.password1);\n\t\t\t} else {\n\t\t\t\t// This covers the scenario where a user has valid information, but goes back and changes things to be invalid later\n\t\t\t\t// consumers need to know to clear the initial valid information from their stores.\n\t\t\t\tthis.props.resetValidInfo();\n\t\t\t}\n\t\t}\n\n\t\t// 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\t\tif (prevState.password1 !== this.state.password1 ||\n\t\t\tprevState.password2 !== this.state.password2 ||\n\t\t\tprevState.acceptedLegal !== this.state.acceptedLegal ||\n\t\t\tprevState.dateOfBirth !== this.state.dateOfBirth ||\n\t\t\tprevState.occupationIdx !== this.state.occupationIdx ||\n\t\t\tprevState.nationalityIdx !== this.state.nationalityIdx ||\n\t\t\tprevState.nationalIdType !== this.state.nationalIdType ||\n\t\t\tprevState.nationalIdNumber !== this.state.nationalIdNumber ||\n\t\t\tprevState.consentCommunication !== this.state.consentCommunication) {\n\n\t\t\tlet { passwordValid = true, dobValid = true, occValid = true, legalValid = true, natValid = true, naIdTypeValid = true, naIdNoValid = true, } = {};\n\n\t\t\tconst { country = 'US' } = this.props;\n\t\t\tconst { password1, acceptedLegal, dateOfBirth, occupationIdx, nationalityIdx, nationalIdType, nationalIdNumber, consentCommunication, } = this.state;\n\t\t\tconst passwordErrors = passwordValidator(password1);\n\t\t\tconst countryInfo = getCountryInfo(country);\n\n\t\t\tlet userData = { password: password1 };\n\t\t\tpasswordValid = this.doPasswordsMatch() && !passwordErrors.length;\n\n\t\t\tif (countryInfo.showLegalCheckBox) {\n\t\t\t\tuserData.legalValid = acceptedLegal;\n\t\t\t\tlegalValid = !!acceptedLegal;\n\t\t\t}\n\n\t\t\tif (countryInfo.showDOB) {\n\t\t\t\tuserData.dateOfBirth = dateOfBirth;\n\t\t\t\tuserData.dateOfBirthPattern = this.getDobPattern();\n\t\t\t\tdobValid = validateDob(dateOfBirth, userData.dateOfBirthPattern);\n\t\t\t}\n\n\t\t\tif (countryInfo.showOccupation) {\n\t\t\t\tconst occupations = this.props.occupations || countryInfo.occupations;\n\t\t\t\tlet occupation = occupationIdx === -1 ? '' : occupations[occupationIdx].value;\n\t\t\t\tuserData.occupation = occupation;\n\t\t\t\toccValid = !!occupation;\n\t\t\t}\n\n\t\t\tif (countryInfo.showNationality) {\n\t\t\t\tlet nationality = nationalityIdx !== -1 ? this.props.supportedCountries[nationalityIdx].countryCode : '';\n\t\t\t\tuserData.nationality = nationality;\n\t\t\t\tnatValid = !!nationality;\n\t\t\t}\n\n\t\t\tif (countryInfo.showNationalId) {\n\t\t\t\tuserData.nationalIdType = nationalIdType;\n\t\t\t\tnaIdTypeValid = !!nationalIdType;\n\t\t\t}\n\n\t\t\tif (countryInfo.showNationalId) {\n\t\t\t\tuserData.nationalIdNumber = nationalIdNumber;\n\t\t\t\tnaIdNoValid = !!nationalIdNumber;\n\t\t\t}\n\n\t\t\tif (countryInfo.showConsentCheckBox) {\n\t\t\t\tuserData.consentCommunication = consentCommunication;\n\t\t\t}\n\n\t\t\tif (passwordValid && legalValid && dobValid && occValid && natValid && naIdTypeValid && naIdNoValid) {\n\t\t\t\t// If passwords are identical, have no errors, and legal has\n\t\t\t\t// been accepted. Call the prop function that signifies to the\n\t\t\t\t// parent that everything is ready to go!\n\t\t\t\tif (this.props.handleAllValidInfo) {\n\t\t\t\t\tthis.props.handleAllValidInfo(userData);\n\t\t\t\t}\n\t\t\t} else if (this.props.resetAllValidInfo) {\n\t\t\t\t// This covers the scenario where a user has valid information,\n\t\t\t\t// but goes back and changes things to be invalid later\n\t\t\t\t// consumers need to know to clear the initial valid information\n\t\t\t\t// from their stores.\n\t\t\t\tthis.props.resetAllValidInfo(userData);\n\t\t\t}\n\t\t}\n\n\t\tif (prevProps.showValidationErrors !== this.props.showValidationErrors &&\n\t\t\tthis.props.showValidationErrors &&\n\t\t\t!isEmpty(this.state.passwordErrors)) {\n\t\t\tFPT.trackFieldError(\n\t\t\t\t'password',\n\t\t\t\t'PASSWORD_VALIDATION_ERROR',\n\t\t\t\tthis.state.passwordErrors.join(',')\n\t\t\t);\n\t\t}\n\t}\n\n\tUNSAFE_componentWillReceiveProps(nextProps) {\n\t\t// in the case that the user fills nothing out after ticking the create account box\n\t\t// we need to show password validation errors for empty password fields\n\t\tthis.setState({\n\t\t\tpasswordErrors: passwordValidator(this.state.password1)\n\t\t});\n\n\t\t// Set optional to false when its not mandatory\n\t\t// This is required for re-setting \"optional\" when it changes\n\t\t// to mandatory from optional\n\t\tif (this.props.mandatory) {\n\t\t\tthis.setState({\n\t\t\t\toptional: false\n\t\t\t});\n\t\t}\n\t}\n\n\thandleCreateAccountCheckbox = (event) => {\n\t\tthis.props.handleCreateAccountCheckbox(event.target.checked);\n\t\tthis.setState({\n\t\t\toptional: event.target.checked,\n\t\t\tshowCreateAccountFields: event.target.checked\n\t\t});\n\t};\n\n\thandleUpdatePasswords = (password, whichInput, hasPasswordHint) => {\n\n\t\tlet newState = {\n\t\t\t[whichInput]: password,\n\t\t\tshowPasswordHint: hasPasswordHint, // we only show password hint for password1 if is enabled\n\t\t\t// we only base the password validation on 'input1', otherwise things get really confusing\n\t\t\tpasswordErrors: (whichInput === 'password1') ? passwordValidator(password) : this.state.passwordErrors,\n\t\t};\n\t\tthis.setState(newState);\n\t\treturn password; // returning for TextInput https://github.paypal.com/react/react-text-input\n\t};\n\n\thidePasswordHint = (isHint) => {\n\t\tif (isHint) {\n\t\t\tthis.setState({ showPasswordHint: false });\n\t\t}\n\t};\n\n\thandleLegalCheckbox = (event) => {\n\t\tthis.setState({\n\t\t\tacceptedLegal: event.target.checked\n\t\t});\n\t};\n\n\thandleConsentCheckbox = (event) => {\n\t\tthis.setState({\n\t\t\tconsentCommunication: event.target.checked\n\t\t});\n\t};\n\n\thandleResetPasswordFields = () => {\n\t\tthis.setState({\n\t\t\toptional: false,\n\t\t\tacceptedLegal: false,\n\t\t\tshowCreateAccountFields: false,\n\t\t});\n\t\tthis.handleUpdatePasswords('', 'password1');\n\t\tthis.handleUpdatePasswords('', 'password2');\n\t}\n\n\t/**\n * check that the two passwords within state are matching\n * @return {boolean}\n */\n\tdoPasswordsMatch = () => {\n\t\treturn this.state.password1 === this.state.password2;\n\t};\n\n\t/**\n * Return dobPattern from specified props or get it from countryInfo\n */\n\tgetDobPattern = () => {\n\t\tif (this.props.dobPattern) {\n\t\t\treturn this.props.dobPattern;\n\t\t}\n\n\t\tconst { country = 'US' } = this.props;\n\t\tconst countryInfo = getCountryInfo(country);\n\n\t\treturn countryInfo.DOBPattern;\n\n\t};\n\n\t/**\n * check if date of birth is valid\n * @return {string}\n */\n\thandleChangeDob = (date) => {\n\t\tlet dateOfBirth = getFormattedDob(date, this.getDobPattern());\n\n\t\tthis.setState({\n\t\t\tdateOfBirth: dateOfBirth,\n\t\t\tdobReqErrors: date === '',\n\t\t\tdobErrors: date !== '' && !validateDob(dateOfBirth, this.getDobPattern())\n\t\t});\n\t\treturn dateOfBirth;\n\t};\n\n\tvalidateDobIs18 = (date) => {\n\t\tthis.setState({\n\t\t\tdobIs18Errors: !validateDobIs18(date, this.getDobPattern())\n\t\t});\n\t};\n\n\thandleDobBlur = (date) => {\n\t\tthis.setState({ dobReqErrors: date === '', showDateOfBirthHelp: false });\n\t\tthis.validateDobIs18(date);\n\t};\n\n\thandleDobFocus = (date) => {\n\t\tthis.setState({ dobReqErrors: false, showDateOfBirthHelp: true });\n\t};\n\n\thandleChangeOccupation = (index) => {\n\t\tthis.setState({ occupationError: index === -1, occupationIdx: index });\n\t};\n\n\thandleChangeNationality = (index) => {\n\t\tthis.setState({ nationalityError: index === -1, nationalityIdx: index });\n\t};\n\n\trenderPasswordErrors = () => {\n\t\treturn (\n\t\t\t\n\t\t\t\t{/* password mismatch content */}\n\t\t\t\t{!this.doPasswordsMatch() && \n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t this.handleChangeNationalNumber(event.target.value)}\n\t\t\t\t\t\t\tonFocus={(event) => this.handleFocus(event.target.value)}\n\t\t\t\t\t\t\tonBlur={(event) => this.handleBlur(event.target.value)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t{this.props.passwordWarnings._MISMATCH}
}\n\t\t\t\t{/* password formatting content */}\n\t\t\t\t{this.state.passwordErrors.map(code => {\n\t\t\t\t\tconst warningMessage = this.props.passwordWarnings[code];\n\t\t\t\t\treturn (\n\t\t\t\t\t\t{warningMessage}
\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\n\t\t);\n\t};\n\n\thandleNationalIdType = (nationalIdType) => {\n\t\tthis.setState({ nationalIdType });\n\t};\n\n\thandleNationalIdNumber = (nationalIdNumber) => {\n\t\tthis.setState({ nationalIdNumber });\n\t};\n\n\tresetNationalId = () => {\n\t\tthis.setState({ nationalIdType: null, nationalIdNumber: null });\n\t};\n\n\tgetOccupationOptions = (occupations) => {\n\t\treturn occupations.map((item) => {\n\t\t\treturn {\n\t\t\t\tprimaryText: item.label,\n\t\t\t}\n\t\t})\n\t}\n\n\tgetNationalityOptions = (supportedCountries) => {\n\t\treturn supportedCountries.map((country) => {\n\t\t\treturn {\n\t\t\t\tprimaryText: country.countryName,\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\tconst { acceptedLegal, passwordErrors, dateOfBirth, occupationIdx, nationalityIdx, nationalIdType, nationalIdNumber, dobReqErrors, dobErrors, dobIs18Errors, occupationError, nationalityError, showPasswordHint, showDateOfBirthHelp } = this.state;\n\t\tconst { showValidationErrors, country = 'US', supportedCountries, defaultIdType = '' } = this.props;\n\t\tconst countryInfo = getCountryInfo(country);\n\t\tconst dateOfBirthHelp = showDateOfBirthHelp && countryInfo.showDOBHelp;\n\t\tconst legalCheckBoxErrorsExist = countryInfo.showLegalCheckBox && !acceptedLegal;\n\t\tconst passwordErrorsExist = !this.doPasswordsMatch() || !!passwordErrors.length;\n\t\tconst occupationErrorsExist = showValidationErrors && countryInfo.showOccupation && (occupationError || occupationIdx === -1);\n\t\tconst nationalityErrorsExist = showValidationErrors && countryInfo.showNationality && (nationalityError || nationalityIdx === -1);\n\t\tconst dateOfBirthErrorsExist = showValidationErrors && countryInfo.showDOB && !dateOfBirthHelp && (dobErrors || dobReqErrors || !dateOfBirth);\n\t\tconst dateOfBirthIs18ErrorsExist = showValidationErrors && countryInfo.showDOBMust18 && dobIs18Errors && !dateOfBirthHelp;\n\t\tconst nationalIdTypeErrorsExist = showValidationErrors && countryInfo.showNationalId && !nationalIdType;\n\t\tconst nationalIdNoErrorsExist = showValidationErrors && countryInfo.showNationalId && !nationalIdNumber;\n\t\tconst shouldShowErrorMessages = showValidationErrors && (passwordErrorsExist || legalCheckBoxErrorsExist || occupationErrorsExist || nationalityErrorsExist || dateOfBirthErrorsExist || dateOfBirthIs18ErrorsExist || nationalIdTypeErrorsExist || nationalIdNoErrorsExist);\n\t\tconst occupations = this.props.occupations || countryInfo.occupations;\n\t\tconst isCountryUS = country === 'US';\n\t\tconst createAccountCheckboxContent = isCountryUS ? this.props.incentive?.createAccountCheckboxContent : this.props.createAccountCheckboxContent;\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{this.props.isNNA ? (\n\t\t\t\t\t{this.props.mainTitle} \n\t\t\t\t\t\t{this.props.mainBlurb} \n\t\t\t\t\t\n\t\t\t\t)}\n\n\n\t\t\t\t{!this.props.mandatory && // if the password is optional — show the optional checkbox\n\t\t\t\t\t\n\t\t\t\t\t\t{!this.props.isNNA ? (\n\t\t\t\t\t\t\t
\n\t\t);\n\t}\n}\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 \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{this.props.mainTitle}\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{this.props.itsFreeLine}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t}\n\n\t\t\t\t\n\t\t\t\t\t{!this.props.mandatory && !this.props.isNNA && !isCountryUS &&\n\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t{this.props.createAccountHelp1 &&
\n\t\t\t\t\t}\n\t\t\t\t\t{this.props.createAccountHelp1}
}\n\t\t\t\t\t\t\t{this.props.createAccountHelp2 &&{this.props.createAccountHelp2}
}\n\t\t\t\t\t\t\n\t\t\t\t\t\t this.hidePasswordHint(countryInfo.showPasswordHint)}\n\t\t\t\t\t\t\tonBlur={() => this.hidePasswordHint(countryInfo.showPasswordHint)}\n\t\t\t\t\t\t\tonChange={(event) => this.handleUpdatePasswords(event.target.value, 'password1', countryInfo.showPasswordHint)}\n\t\t\t\t\t\t\tonFocus={this.props.handleFocusOnPasswordOne}\n\t\t\t\t\t\t\tvalue={this.state.password1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tshowPasswordHint && countryInfo.showPasswordHint &&\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t{this.props.passwordWarnings._HINT1 &&
\n\t\t\t\t\t\t}\n\t\t\t\t\t{this.props.passwordWarnings._HINT1}
}\n\t\t\t\t\t\t\t\t{this.props.passwordWarnings._HINT2 && {this.props.passwordWarnings._HINT2}
}\n\t\t\t\t\t\t\t\t{this.props.passwordWarnings._HINT3 && {this.props.passwordWarnings._HINT3}
}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t this.handleUpdatePasswords(event.target.value, 'password2')}\n\t\t\t\t\t\t\tvalue={this.state.password2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\t{\n\t\t\t\t\t\tcountryInfo.showDOB &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t this.handleChangeDob(event.target.value)}\n\t\t\t\t\t\t\t\tonFocus={(event) => this.handleDobFocus(event.target.value)}\n\t\t\t\t\t\t\t\tonBlur={(event) => this.handleDobBlur(event.target.value)}\n\t\t\t\t\t\t\t\thelperText={dateOfBirthHelp && this.props.passwordWarnings._HELP_DOB}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t{\n\t\t\t\t\t\tcountryInfo.showOccupation &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t{\n\t\t\t\t\t\tcountryInfo.showNationality &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t{\n\t\t\t\t\t\tcountryInfo.showNationalId &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t{\n\t\t\t\t\t\tshouldShowErrorMessages &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{showValidationErrors && passwordErrorsExist && this.renderPasswordErrors()}\n\t\t\t\t\t\t\t{showValidationErrors && countryInfo.showDOB && dobErrors && !dateOfBirthHelp &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{showValidationErrors && countryInfo.showDOB && (dobReqErrors || !dateOfBirth) && !dateOfBirthHelp &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{dateOfBirthIs18ErrorsExist &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{occupationErrorsExist &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{nationalityErrorsExist &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{nationalIdTypeErrorsExist &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{nationalIdNoErrorsExist &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{showValidationErrors && countryInfo.showLegalCheckBox && !acceptedLegal &&\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\n\t\t\t\t\t{countryInfo.showConsentCheckBox &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._INVALID_DOB}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._REQUIRED_DOB}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._MUST_18_DOB}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._OCCUPATION}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._NATIONALITY}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._NATIONAL_ID_TYPE}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._NATIONAL_ID_NUMBER}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{this.props.passwordWarnings._LEGAL_CHECKBOX}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t}\n\n\t\t\t\t\t{countryInfo.showLegalCheckBox && \n\t\t\t\t\t\t
}\n\n\t\t\t\t\t{countryInfo.showLegalTextOnly &&\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{this.props.legalOnlyHTML} \n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t 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 { DropdownMenu, TextInput } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport { stateListPropType } from 'prop-validators';\nimport _map from 'lodash/map';\nimport * as FPT from '../utility/fpt';\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 selectedIndex: this.props.stateList.findIndex(\n (state) => state.$id === this.props.value\n ),\n };\n\n handleChangeOption = (index) => {\n this.setState({ selectedIndex: index });\n let value = this.props.stateList[index].$id;\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 };\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 FPT.trackFieldError(\n 'postcode',\n 'INVALID_BILLING_ADDRESS_POSTCODE',\n this.props.labels.validationError\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 { cardSpecsPropType, cardSpecPropType } from 'prop-validators';\nimport { defaultCardSpec, getSpecificCardSpec } 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 cardTypeIndex: Object.keys(this.props.cardSpecs.cardTypes)\n .map((type) => this.props.cardSpecs.cardTypes[type])\n .findIndex((card) => card.type === 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 = (index) => {\n const {\n cardSpecs: { cardTypes = {} },\n } = this.props;\n let cardType = this.formatCardTypes(cardTypes)[index];\n this.setState({ cardTypeIndex: index });\n this.props.changeCardType(cardType);\n };\n\n getCardTypeOptions = (cardTypes) => {\n return this.formatCardTypes(cardTypes).map((item) => {\n return {\n primaryText: item.name,\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: '10px 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 selectedIdx: 0,\n phoneTypeErrorMessage: '',\n showIsRequiredError: false,\n };\n }\n\n handleChange = (index) => {\n this.setState({ selectedIdx: index });\n const phoneTypes = [\n { value: 'Mobile' },\n { value: 'Home' },\n { value: 'Work' },\n ];\n let value = phoneTypes[index].value;\n this.props.changePhoneType(value);\n };\n\n getPhoneTypeOptions = () => {\n return [\n { primaryText: this.props.guestLabels.phoneTypeMobile },\n { primaryText: this.props.guestLabels.phoneTypeHome },\n { primaryText: this.props.guestLabels.phoneTypeWork },\n ];\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 * as FPT from '../utility/fpt';\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';\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 FPT.trackFieldError(\n 'phonenumber',\n 'REQUIRED_PHONE_NUMBER',\n REQUIRED_PHONE_NUMBER\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 FPT.trackFieldError(\n 'phonenumber',\n 'INVALID_PHONE_NUMBER',\n INVALID_PHONE_NUMBER\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 FPT.trackFieldError(\n 'phonenumber',\n 'REQUIRED_PHONE_NUMBER',\n errMessagePhoneNumber\n );\n }\n break;\n case 'countryCode':\n if (!value) {\n isValid = false;\n errMessagePhoneCountryCode =\n errorMessages.REQUIRED_PHONE_COUNTRY_CODE;\n FPT.trackFieldError(\n 'countryCode',\n 'REQUIRED_PHONE_COUNTRY_CODE',\n errMessagePhoneCountryCode\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 FPT.trackFieldError('phonenumber', key, errMessagePhoneNumber);\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\t\t\t\t
\n );\n\t}\n}\n\nexport default Name;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as FPT from '../utility/fpt';\nimport Name from '../guest-payment-components/Name';\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 FPT.trackFieldError(\n 'firstName',\n 'REQUIRED_FIRST_NAME',\n REQUIRED_FIRST_NAME\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 FPT.trackFieldError('lastName', 'REQUIRED_LAST_NAME', REQUIRED_LAST_NAME);\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 FPT.trackFieldError(\n 'firstname',\n 'REQUIRED_FIRST_NAME',\n firstNameErrorMessage\n );\n }\n break;\n case 'lastName':\n if (!value) {\n isValid = false;\n lastNameErrorMessage = errorMessages.REQUIRED_LAST_NAME;\n FPT.trackFieldError(\n 'lastname',\n 'REQUIRED_LAST_NAME',\n lastNameErrorMessage\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 FPT.trackFieldError('firstName', key, errorMessages[key]);\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 FPT.trackFieldError('lastName', key, errorMessages[key]);\n };\n\n render() {\n return (\n \n\t\t\t\t\t this.handleChangeFirstName(event.target.value, 'firstNameErrorMessage')}\n\t\t\t\t\t\tonBlur={(event) => this.handleBlurFirstName(event.target.value)}\n\t\t\t\t\t\terrorText={firstNameErrorMessage}\n\t\t\t\t\t/>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t this.handleChangeLastName(event.target.value, ('lastNameErrorMessage'))}\n\t\t\t\t\t\tonBlur={(event) => this.handleBlurLastName(event.target.value)}\n\t\t\t\t\t\terrorText={lastNameErrorMessage}\n\t\t\t\t\t/>\n\t\t\t\t
\n\t\t\t\n
\n );\n }\n}\n\nexport default NameComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { StyleSheet, css } from 'aphrodite';\nimport * as FPT from '../utility/fpt';\nimport { Checkbox, Icon, Link } from '@paypalcorp/pp-react';\n\nconst styles = StyleSheet.create({\n toolWrapper: {\n marginTop: '20px',\n position: 'relative',\n },\n toolCheckboxWrapper: {\n position: 'absolute',\n width: 'inherit',\n display: 'inline',\n },\n toolCheckbox: {\n ':before': {\n overflow: 'hidden',\n },\n },\n toolBlurb: {\n fontSize: '15px',\n lineHeight: '20px',\n marginLeft: '40px',\n fontFamily: 'pp-sans-small-regular',\n },\n toolTip: {\n position: 'relative',\n // display: 'none',\n maxWidth: '430px',\n margin: '7.5px auto 5px',\n },\n tipIcon: {\n color: '#005EA6',\n cursor: 'pointer',\n textDecoration: 'none',\n },\n toolTipTxt: {\n backgroundColor: '#e1e7eb',\n fontSize: '12px',\n lineHeight: '1.8',\n textAlign: 'left',\n borderRadius: '6px',\n padding: '5px 7px',\n display: 'block',\n },\n});\n\nclass AddressCheckBox extends React.Component {\n constructor() {\n super();\n this.state = {\n showToolTip: false,\n };\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 let chkBxStatus = isChecked ? 'checked' : 'unchecked';\n FPT.trackLinkClickWithData('shareAddress', { checkbox: chkBxStatus });\n\n this.props.changeAddress(isChecked);\n };\n\n createLabel = (label) => {\n return (\n <>\n {label}\n \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 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 {this.state.showToolTip && (\n \n \n {this.props.toolTipText}\n \n
\n )}\n \n
\n )}\n {countryInfo.showGuestTermsCheckBox && !this.props.isSignUp && (\n {GuestTerms}
\n \n
\n )}\n\n {countryInfo.showGuestTermsText && (\n \n
\n \n
\n )}\n \n {termsContent}\n
\n \n {title} \n \n {msg} \n \n \n \n {button}\n \n \n
\n \n );\n }\n}\n\nexport default CreateAccountTile;\n","var _defs, _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgIllusCreateAccount(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"illus_createAccount_svg__Layer_1\",\n \"data-name\": \"Layer 1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 95.97 121.5\"\n }, props), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"style\", null, \".illus_createAccount_svg__cls-1{fill:#0070ba}.illus_createAccount_svg__cls-2{fill:#fff;fill-rule:evenodd}\"))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M64.76 106.65a.75.75 0 010-1.5l.89-.05a.75.75 0 11.11 1.49l-.92.06zm-4.53-.05h-.06l-.91-.08a.75.75 0 01-.68-.82.74.74 0 01.82-.67l.89.08a.75.75 0 01-.06 1.49zm9.91-.63a.75.75 0 01-.73-.6.76.76 0 01.58-.89l.87-.19a.75.75 0 01.9.57.76.76 0 01-.56.9l-.91.19zm-15.28-.16h-.16q-.45-.09-.9-.21a.75.75 0 01.36-1.46l.86.21a.75.75 0 01-.16 1.48zm20.51-1.32a.75.75 0 01-.26-1.45l.83-.32a.75.75 0 01.55 1.4l-.87.33a.73.73 0 01-.25.04zm4.95-2.23a.74.74 0 01-.66-.39.76.76 0 01.3-1c.26-.14.52-.28.77-.43a.75.75 0 11.75 1.3q-.39.24-.81.45a.73.73 0 01-.35.07zm-37.51-1.52a.75.75 0 01-.41-.12c-.26-.17-.52-.34-.77-.52a.75.75 0 11.85-1.23c.24.17.49.33.74.49a.75.75 0 01-.41 1.38zm42.07-1.41a.75.75 0 01-.45-1.33c.24-.17.47-.35.7-.53a.76.76 0 011.06.11.77.77 0 01-.12 1.06l-.74.56a.68.68 0 01-.45.13zM38.5 97.44a.73.73 0 01-.5-.19l-.68-.62a.75.75 0 111-1.09l.65.59a.76.76 0 01.07 1.06.75.75 0 01-.54.25zM89 95.77a.79.79 0 01-.53-.22.75.75 0 010-1.06c.2-.21.41-.42.61-.64a.75.75 0 011.06 0 .75.75 0 010 1.06c-.21.22-.42.45-.64.66a.75.75 0 01-.5.2zm-54.28-2.22a.72.72 0 01-.57-.27l-.59-.72a.75.75 0 01.12-1 .76.76 0 011.06.12c.18.23.37.46.56.68a.76.76 0 01-.1 1.06.74.74 0 01-.48.13zm57.76-1.91a.73.73 0 01-.44-.15.74.74 0 01-.16-1l.51-.73a.75.75 0 111.23.86l-.53.75a.77.77 0 01-.61.27zm-60.92-2.5a.75.75 0 01-.64-.36c-.16-.26-.32-.53-.47-.8a.74.74 0 01.27-1 .76.76 0 011 .27c.14.26.3.52.45.77A.75.75 0 0132 89a.79.79 0 01-.44.14zM95.34 87a.72.72 0 01-.34-.09.75.75 0 01-.32-1c.14-.26.27-.52.4-.79a.75.75 0 011.35.66l-.42.83a.76.76 0 01-.67.39zm-66.26-2.69a.75.75 0 01-.69-.46c-.12-.28-.24-.56-.35-.85a.76.76 0 01.42-1 .75.75 0 011 .43c.11.27.22.55.34.82a.75.75 0 01-.4 1 .72.72 0 01-.32.06zm68.41-2.26a1 1 0 01-.24 0 .76.76 0 01-.47-1c.1-.28.19-.56.28-.84a.76.76 0 01.94-.49.75.75 0 01.49.94c-.09.3-.19.59-.29.88a.76.76 0 01-.71.51zm-70.15-2.88a.75.75 0 01-.73-.56c-.08-.3-.15-.6-.22-.9a.75.75 0 01.56-.9.75.75 0 01.9.56l.21.86a.75.75 0 01-.54.92zm71.55-2.37h-.15a.75.75 0 01-.59-.88l.15-.92a.75.75 0 111.48.24c0 .3-.1.61-.16.91a.75.75 0 01-.73.65zm-72.52-3a.75.75 0 01-.74-.67l-.09-.92a.75.75 0 011.5-.12c0 .29.05.59.08.88a.77.77 0 01-.67.83zm73.13-2.39a.75.75 0 01-.72-.78v-.88a.74.74 0 01.76-.75.75.75 0 01.74.76v.93a.76.76 0 01-.78.72zm-73.29-3a.76.76 0 01-.72-.78l.06-.92a.75.75 0 111.49.1c0 .3 0 .59-.05.89a.75.75 0 01-.78.7zM99.3 66a.75.75 0 01-.74-.67c0-.3-.07-.59-.11-.88a.75.75 0 111.49-.21c0 .31.08.62.11.92a.75.75 0 01-.66.83zm-72.44-3h-.14a.75.75 0 01-.6-.88c.06-.3.13-.6.19-.9a.75.75 0 011.47.32q-.11.43-.18.87a.75.75 0 01-.74.59zm71.44-2.35a.74.74 0 01-.72-.56l-.24-.86a.75.75 0 01.51-.93.76.76 0 01.93.51c.09.3.17.6.25.9a.74.74 0 01-.53.91.69.69 0 01-.2.03zm-70-2.87a1.09 1.09 0 01-.25 0 .75.75 0 01-.46-1c.1-.29.21-.58.32-.87a.75.75 0 011.4.54c-.1.27-.21.55-.3.83a.75.75 0 01-.72.5zm68.24-2.26a.75.75 0 01-.69-.45l-.36-.81a.75.75 0 111.36-.63l.38.84a.76.76 0 01-.39 1 .8.8 0 01-.31.05zm-66.07-2.71a.75.75 0 01-.66-1.1c.14-.27.29-.54.44-.81a.75.75 0 011.31.73c-.15.26-.29.52-.43.78a.73.73 0 01-.66.4zM94 50.71a.75.75 0 01-.64-.36l-.48-.74a.75.75 0 01.22-1 .76.76 0 011 .21c.17.26.33.52.49.78a.76.76 0 01-.24 1 .79.79 0 01-.35.11zm-60.64-2.49a.73.73 0 01-.44-.15.74.74 0 01-.16-1l.56-.73a.75.75 0 111.18.92c-.18.24-.36.47-.53.71a.76.76 0 01-.61.25zm57.47-1.9a.74.74 0 01-.58-.27l-.58-.66a.76.76 0 01.06-1.06.75.75 0 011.06.06c.21.23.41.46.61.7a.75.75 0 01-.57 1.23zM36.9 44.11a.74.74 0 01-.53-.22.75.75 0 010-1.06l.66-.64a.75.75 0 011 1.09l-.64.61a.73.73 0 01-.49.22zM87 42.45a.73.73 0 01-.5-.19l-.67-.57a.75.75 0 01-.09-1.06.74.74 0 011-.09c.24.19.47.39.7.6a.74.74 0 01.07 1 .76.76 0 01-.51.31zm-46-1.88a.74.74 0 01-.6-.3.75.75 0 01.15-1.05l.75-.54a.75.75 0 011 .18.76.76 0 01-.18 1l-.72.52a.75.75 0 01-.4.19zm41.7-1.38a.78.78 0 01-.41-.12l-.75-.48a.75.75 0 01.78-1.28l.79.49a.77.77 0 01.22 1 .75.75 0 01-.63.39zm-37.1-1.52a.74.74 0 01-.66-.39.75.75 0 01.3-1l.82-.42a.75.75 0 11.68 1.34c-.27.13-.53.27-.79.41a.72.72 0 01-.35.06zm32.33-1.07a.7.7 0 01-.31-.07l-.81-.35a.75.75 0 01-.4-1 .74.74 0 011-.4l.85.36a.75.75 0 01-.31 1.44zm-27.37-1.12a.75.75 0 01-.25-1.48l.87-.3a.75.75 0 01.47 1.43l-.84.29a1.09 1.09 0 01-.25.06zm22.27-.73a.64.64 0 01-.2 0l-.86-.23a.76.76 0 01-.54-.92.75.75 0 01.91-.54l.89.24a.76.76 0 01.52.93.75.75 0 01-.72.52zm-17-.71a.75.75 0 01-.14-1.49l.91-.17a.75.75 0 01.86.62.74.74 0 01-.61.86l-.87.16zm11.73-.38h-.1l-.88-.1a.75.75 0 01.15-1.5l.92.11a.75.75 0 01-.09 1.5zm-6.34-.27a.75.75 0 010-1.5h.93a.76.76 0 01.76.74.75.75 0 01-.73.76h-.89z\",\n transform: \"translate(-20 -3.25)\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-2\",\n d: \"M104 69.73l-.23 14.6c-6 .24-10.63 4.2-10.63 10.29v.46H60.59V69.73z\",\n transform: \"translate(-20 -3.25)\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M95.79 88.89a.72.72 0 01-.48-.17l-6.4-5.37a.75.75 0 01-.1-1 .76.76 0 011.06-.1l6.4 5.37a.75.75 0 01-.48 1.32zM61.13 95.63a.72.72 0 01-.57-.27.75.75 0 01.09-1.06l14.58-12.1a.75.75 0 011 .1.74.74 0 01-.1 1L61.61 95.46a.72.72 0 01-.48.17zM104.25 84.48a.76.76 0 01-.75-.75v-13.8a.75.75 0 011.5 0v13.8a.76.76 0 01-.75.75zM103.79 98.86a.75.75 0 01-.58-.27l-3-3.68a.75.75 0 111.16-1l2.42 3 8-9.85a.75.75 0 011.17 1l-8.57 10.56a.74.74 0 01-.58.28z\",\n transform: \"translate(-20 -3.25)\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M89 95.81H60.84a.76.76 0 01-.75-.75V69.93a.76.76 0 01.75-.75h43.3a.73.73 0 01.7.5.74.74 0 01-.22.83L87.22 85c-4.06 3.53-5.1 3.54-9.22.09L63.55 73.35a.76.76 0 01-.11-1.06.75.75 0 011-.11L79 83.89c3.54 3 3.81 3 7.3-.09l15.81-13.12H61.59v23.63H89a.75.75 0 010 1.5zM104.4 106.49a11.44 11.44 0 01-8.2-3.44 11.83 11.83 0 010-16.58 11.46 11.46 0 018.06-3.47.75.75 0 01.75.74.74.74 0 01-.74.76 10 10 0 00-7 3 10.33 10.33 0 000 14.47 10 10 0 0014.28 0 10.4 10.4 0 00.59-13.83.74.74 0 01.09-1 .75.75 0 011.06.09 11.9 11.9 0 01-.68 15.84 11.44 11.44 0 01-8.21 3.42z\",\n transform: \"translate(-20 -3.25)\"\n })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-2\",\n d: \"M43.26 63.47a3.27 3.27 0 013.26 3.29v42.32a3.36 3.36 0 01-2.52 3.28h-.23l-1-9.54a2.33 2.33 0 00-2.22-2.13h-.15a2.31 2.31 0 00-2.24 2.24 67.66 67.66 0 01-.82 7.41c-.12.75-.27 1.54-.44 2.35H24a3.27 3.27 0 01-3.26-3.29V66.76A3.27 3.27 0 0124 63.47z\",\n transform: \"translate(-20 -3.25)\"\n })), _path6 || (_path6 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M36.17 113.48H24a4 4 0 01-4-4V66.76a4 4 0 014-4h19.26a4 4 0 014 4v42.32a4.08 4.08 0 01-3.16 4 .76.76 0 01-.9-.56.75.75 0 01.56-.9 2.6 2.6 0 002-2.55V66.75a2.53 2.53 0 00-2.51-2.54H24a2.53 2.53 0 00-2.51 2.54v42.68A2.53 2.53 0 0024 112h12.17a.75.75 0 010 1.5z\",\n transform: \"translate(-20 -3.25)\"\n })), _path7 || (_path7 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M33.47 109a2.42 2.42 0 112.41-2.41 2.41 2.41 0 01-2.41 2.41zm0-3.33a.92.92 0 10.91.92.91.91 0 00-.91-.96zM36.5 68.24h-5.29a.75.75 0 110-1.5h5.29a.75.75 0 010 1.5zM34 124.75a.75.75 0 01-.72-1 136.17 136.17 0 003.29-13.56 64 64 0 00.81-7.33 3.06 3.06 0 016.1-.15l1.2 11.65a.75.75 0 01-1.49.15L42 102.9a1.56 1.56 0 00-1.6-1.45 1.58 1.58 0 00-1.49 1.55 65 65 0 01-.82 7.5 138.79 138.79 0 01-3.33 13.74.75.75 0 01-.76.51zM49.87 124.75a.74.74 0 01-.45-.15.75.75 0 01-.15-1c0-.06 4.13-5.59 3.87-15-.19-7.13-7-13.27-7-13.33a.76.76 0 01-.06-1.06.75.75 0 011.06-.06c.3.27 7.31 6.64 7.52 14.41.27 9.92-4 15.65-4.17 15.89a.74.74 0 01-.62.3z\",\n transform: \"translate(-20 -3.25)\"\n })), _path8 || (_path8 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-2\",\n d: \"M51.06 27.77l-2.64-1.54a1.36 1.36 0 01-.61-1.8l11.3-19.85A1.33 1.33 0 0161 4.22l32.47 19a1.36 1.36 0 01.62 1.8l-9.41 16.47\",\n transform: \"translate(-20 -3.25)\"\n })), _path9 || (_path9 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M84.68 42.24a.74.74 0 01-.37-.1.75.75 0 01-.28-1l9.36-16.45a.62.62 0 00-.34-.79l-32.47-19a.78.78 0 00-.58-.13.39.39 0 00-.25.18L48.46 24.8a.63.63 0 00.34.78l2.64 1.55a.75.75 0 01-.76 1.29l-2.63-1.54a2.12 2.12 0 01-.89-2.83l11.3-19.84a1.87 1.87 0 011.16-.89 2.25 2.25 0 011.71.25l32.48 19a2.12 2.12 0 01.89 2.82l-9.37 16.47a.72.72 0 01-.65.38z\",\n transform: \"translate(-20 -3.25)\"\n })), _path10 || (_path10 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-2\",\n d: \"M82.11 56.91H45.76a1.42 1.42 0 01-1.42-1.43V29.21a1.43 1.43 0 011.42-1.44h37.5a1.43 1.43 0 011.42 1.44v27.7z\",\n transform: \"translate(-20 -3.25)\"\n })), _path11 || (_path11 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M84.68 57.66H45.76a2.18 2.18 0 01-2.17-2.18V29.21A2.18 2.18 0 0145.76 27h37.5a2.18 2.18 0 012.17 2.19v27.7a.74.74 0 01-.75.77zM45.76 28.52a.68.68 0 00-.67.69v26.27a.68.68 0 00.67.68h38.17V29.21a.68.68 0 00-.67-.69z\",\n transform: \"translate(-20 -3.25)\"\n })), _path12 || (_path12 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M63.29 47.74a.74.74 0 01-.75-.75V32.24H48.76v14h11.66a.75.75 0 010 1.5H48a.74.74 0 01-.75-.75v-15.5a.75.75 0 01.75-.75h15.29a.76.76 0 01.75.75V47a.75.75 0 01-.75.74z\",\n transform: \"translate(-20 -3.25)\"\n })), _path13 || (_path13 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M56 40.92a3.85 3.85 0 113.81-3.85A3.82 3.82 0 0156 40.92zm0-6.2a2.35 2.35 0 102.31 2.35A2.33 2.33 0 0056 34.72zM63.29 47.74a.74.74 0 01-.74-.63c-.35-2.23-2.36-4.33-4.15-4.33a.75.75 0 010-1.5c2.54 0 5.17 2.62 5.63 5.6a.75.75 0 01-.63.85z\",\n transform: \"translate(-20 -3.25)\"\n })), _path14 || (_path14 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"illus_createAccount_svg__cls-1\",\n d: \"M49.84 45.88a.64.64 0 01-.2 0 .74.74 0 01-.52-.92 4.67 4.67 0 014.44-3.65h4.92a.75.75 0 11-.06 1.5h-4.81a3.19 3.19 0 00-3 2.56.74.74 0 01-.77.51zM48.62 53.94a.73.73 0 01-.57-.26.74.74 0 01.08-1l3.57-3.1a.75.75 0 01.75-.14.73.73 0 01.48.59 7.66 7.66 0 01.07 1.3l.65-.36a1 1 0 011.46.64s.15.2.81.25a31.76 31.76 0 003.65 0 .74.74 0 01.78.71.75.75 0 01-.72.79 32.5 32.5 0 01-3.82-.06 2.45 2.45 0 01-1.9-.81l-1.47.79a.73.73 0 01-.8-.06.75.75 0 01-.29-.76 7.76 7.76 0 00.13-.82l-2.39 2.07a.76.76 0 01-.47.23zM81 53.32h-5.5a.75.75 0 010-1.5H81a.75.75 0 010 1.5zM81 50.84h-5.5a.75.75 0 010-1.5H81a.75.75 0 110 1.5zM73.07 53.32h-5.5a.75.75 0 010-1.5h5.5a.75.75 0 010 1.5zM73.07 50.84h-5.5a.75.75 0 010-1.5h5.5a.75.75 0 010 1.5zM75.51 40.92h-7.94a.75.75 0 010-1.5h7.94a.75.75 0 010 1.5zM79.18 36.58H67.57a.75.75 0 010-1.5h11.61a.75.75 0 010 1.5zM74.29 32.86h-6.72a.75.75 0 010-1.5h6.72a.75.75 0 010 1.5zM88.06 27.84a.74.74 0 01-.37-.1L56.45 9.82a.75.75 0 11.74-1.3l31.25 17.92a.75.75 0 01.27 1 .73.73 0 01-.65.4z\",\n transform: \"translate(-20 -3.25)\"\n })));\n}\n\nexport default \"data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NS45NyAxMjEuNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDcwYmE7fS5jbHMtMntmaWxsOiNmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5pbGx1c19jcmVhdGVBY2NvdW50PC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02NC43NiwxMDYuNjVhLjc1Ljc1LDAsMCwxLDAtMS41bC44OS0uMDVhLjc1Ljc1LDAsMSwxLC4xMSwxLjQ5bC0uOTIuMDZabS00LjUzLS4wNWgtLjA2bC0uOTEtLjA4YS43NS43NSwwLDAsMS0uNjgtLjgyLjc0Ljc0LDAsMCwxLC44Mi0uNjdsLjg5LjA4YS43NS43NSwwLDAsMS0uMDYsMS40OVptOS45MS0uNjNhLjc1Ljc1LDAsMCwxLS43My0uNi43Ni43NiwwLDAsMSwuNTgtLjg5bC44Ny0uMTlhLjc1Ljc1LDAsMCwxLC45LjU3Ljc2Ljc2LDAsMCwxLS41Ni45bC0uOTEuMTlabS0xNS4yOC0uMTYtLjE2LDBxLS40NS0uMDktLjktLjIxYS43NS43NSwwLDAsMSwuMzYtMS40NmwuODYuMjFhLjc1Ljc1LDAsMCwxLS4xNiwxLjQ4Wm0yMC41MS0xLjMyYS43NS43NSwwLDAsMS0uMjYtMS40NWwuODMtLjMyYS43NS43NSwwLDAsMSwuNTUsMS40bC0uODcuMzNBLjczLjczLDAsMCwxLDc1LjM3LDEwNC40OVptNC45NS0yLjIzYS43NC43NCwwLDAsMS0uNjYtLjM5Ljc2Ljc2LDAsMCwxLC4zLTFjLjI2LS4xNC41Mi0uMjguNzctLjQzYS43NS43NSwwLDEsMSwuNzUsMS4zcS0uMzkuMjQtLjgxLjQ1QS43My43MywwLDAsMSw4MC4zMiwxMDIuMjZabS0zNy41MS0xLjUyYS43NS43NSwwLDAsMS0uNDEtLjEyYy0uMjYtLjE3LS41Mi0uMzQtLjc3LS41MmEuNzUuNzUsMCwxLDEsLjg1LTEuMjNjLjI0LjE3LjQ5LjMzLjc0LjQ5YS43NS43NSwwLDAsMS0uNDEsMS4zOFptNDIuMDctMS40MUEuNzUuNzUsMCwwLDEsODQuNDMsOThjLjI0LS4xNy40Ny0uMzUuNy0uNTNhLjc2Ljc2LDAsMCwxLDEuMDYuMTEuNzcuNzcsMCwwLDEtLjEyLDEuMDZsLS43NC41NkEuNjguNjgsMCwwLDEsODQuODgsOTkuMzNaTTM4LjUsOTcuNDRhLjczLjczLDAsMCwxLS41LS4xOWwtLjY4LS42MmEuNzUuNzUsMCwxLDEsMS0xLjA5bC42NS41OWEuNzYuNzYsMCwwLDEsLjA3LDEuMDZBLjc1Ljc1LDAsMCwxLDM4LjUsOTcuNDRaTTg5LDk1Ljc3YS43OS43OSwwLDAsMS0uNTMtLjIyLjc1Ljc1LDAsMCwxLDAtMS4wNmMuMi0uMjEuNDEtLjQyLjYxLS42NGEuNzUuNzUsMCwwLDEsMS4wNiwwLC43NS43NSwwLDAsMSwwLDEuMDZjLS4yMS4yMi0uNDIuNDUtLjY0LjY2QS43NS43NSwwLDAsMSw4OSw5NS43N1pNMzQuNzIsOTMuNTVhLjcyLjcyLDAsMCwxLS41Ny0uMjdsLS41OS0uNzJhLjc1Ljc1LDAsMCwxLC4xMi0xLC43Ni43NiwwLDAsMSwxLjA2LjEyYy4xOC4yMy4zNy40Ni41Ni42OGEuNzYuNzYsMCwwLDEtLjEsMS4wNkEuNzQuNzQsMCwwLDEsMzQuNzIsOTMuNTVabTU3Ljc2LTEuOTFhLjczLjczLDAsMCwxLS40NC0uMTUuNzQuNzQsMCwwLDEtLjE2LTFsLjUxLS43M2EuNzUuNzUsMCwxLDEsMS4yMy44NmwtLjUzLjc1QS43Ny43NywwLDAsMSw5Mi40OCw5MS42NFptLTYwLjkyLTIuNWEuNzUuNzUsMCwwLDEtLjY0LS4zNmMtLjE2LS4yNi0uMzItLjUzLS40Ny0uOGEuNzQuNzQsMCwwLDEsLjI3LTEsLjc2Ljc2LDAsMCwxLDEsLjI3Yy4xNC4yNi4zLjUyLjQ1Ljc3QS43NS43NSwwLDAsMSwzMiw4OSwuNzkuNzksMCwwLDEsMzEuNTYsODkuMTRaTTk1LjM0LDg3YS43Mi43MiwwLDAsMS0uMzQtLjA5Ljc1Ljc1LDAsMCwxLS4zMi0xYy4xNC0uMjYuMjctLjUyLjQtLjc5YS43NS43NSwwLDAsMSwxLjM1LjY2bC0uNDIuODNBLjc2Ljc2LDAsMCwxLDk1LjM0LDg3Wk0yOS4wOCw4NC4zMWEuNzUuNzUsMCwwLDEtLjY5LS40NmMtLjEyLS4yOC0uMjQtLjU2LS4zNS0uODVhLjc2Ljc2LDAsMCwxLC40Mi0xLC43NS43NSwwLDAsMSwxLC40M2MuMTEuMjcuMjIuNTUuMzQuODJhLjc1Ljc1LDAsMCwxLS40LDFBLjcyLjcyLDAsMCwxLDI5LjA4LDg0LjMxWm02OC40MS0yLjI2YTEsMSwwLDAsMS0uMjQsMCwuNzYuNzYsMCwwLDEtLjQ3LTFjLjEtLjI4LjE5LS41Ni4yOC0uODRhLjc2Ljc2LDAsMCwxLC45NC0uNDkuNzUuNzUsMCwwLDEsLjQ5Ljk0Yy0uMDkuMy0uMTkuNTktLjI5Ljg4QS43Ni43NiwwLDAsMSw5Ny40OSw4Mi4wNVpNMjcuMzQsNzkuMTdhLjc1Ljc1LDAsMCwxLS43My0uNTZjLS4wOC0uMy0uMTUtLjYtLjIyLS45YS43NS43NSwwLDAsMSwuNTYtLjkuNzUuNzUsMCwwLDEsLjkuNTZsLjIxLjg2YS43NS43NSwwLDAsMS0uNTQuOTJaTTk4Ljg5LDc2LjhoLS4xNWEuNzUuNzUsMCwwLDEtLjU5LS44OEw5OC4zLDc1YS43NS43NSwwLDEsMSwxLjQ4LjI0YzAsLjMtLjEuNjEtLjE2LjkxQS43NS43NSwwLDAsMSw5OC44OSw3Ni44Wm0tNzIuNTItM2EuNzUuNzUsMCwwLDEtLjc0LS42N2wtLjA5LS45MmEuNzUuNzUsMCwwLDEsMS41LS4xMmMwLC4yOS4wNS41OS4wOC44OGEuNzcuNzcsMCwwLDEtLjY3LjgzWk05OS41LDcxLjQxaDBhLjc1Ljc1LDAsMCwxLS43Mi0uNzhjMC0uMjksMC0uNTksMC0uODhhLjc0Ljc0LDAsMCwxLC43Ni0uNzUuNzUuNzUsMCwwLDEsLjc0Ljc2YzAsLjMxLDAsLjYyLDAsLjkzQS43Ni43NiwwLDAsMSw5OS41LDcxLjQxWm0tNzMuMjktM2gwYS43Ni43NiwwLDAsMS0uNzItLjc4bC4wNi0uOTJhLjc1Ljc1LDAsMSwxLDEuNDkuMWMwLC4zLDAsLjU5LS4wNS44OUEuNzUuNzUsMCwwLDEsMjYuMjEsNjguNFpNOTkuMyw2NmEuNzUuNzUsMCwwLDEtLjc0LS42N2MwLS4zLS4wNy0uNTktLjExLS44OGEuNzUuNzUsMCwxLDEsMS40OS0uMjFjMCwuMzEuMDguNjIuMTEuOTJhLjc1Ljc1LDAsMCwxLS42Ni44M1pNMjYuODYsNjNoLS4xNGEuNzUuNzUsMCwwLDEtLjYtLjg4Yy4wNi0uMy4xMy0uNi4xOS0uOWEuNzUuNzUsMCwwLDEsMS40Ny4zMnEtLjExLjQzLS4xOC44N0EuNzUuNzUsMCwwLDEsMjYuODYsNjNaTTk4LjMsNjAuNjVhLjc0Ljc0LDAsMCwxLS43Mi0uNTZsLS4yNC0uODZhLjc1Ljc1LDAsMCwxLC41MS0uOTMuNzYuNzYsMCwwLDEsLjkzLjUxYy4wOS4zLjE3LjYuMjUuOWEuNzQuNzQsMCwwLDEtLjUzLjkxQS42OS42OSwwLDAsMSw5OC4zLDYwLjY1Wm0tNzAtMi44N2ExLjA5LDEuMDksMCwwLDEtLjI1LDAsLjc1Ljc1LDAsMCwxLS40Ni0xYy4xLS4yOS4yMS0uNTguMzItLjg3YS43NS43NSwwLDAsMSwxLjQuNTRjLS4xLjI3LS4yMS41NS0uMy44M0EuNzUuNzUsMCwwLDEsMjguMjksNTcuNzhabTY4LjI0LTIuMjZhLjc1Ljc1LDAsMCwxLS42OS0uNDVsLS4zNi0uODFhLjc1Ljc1LDAsMSwxLDEuMzYtLjYzbC4zOC44NGEuNzYuNzYsMCwwLDEtLjM5LDFBLjguOCwwLDAsMSw5Ni41Myw1NS41MlpNMzAuNDcsNTIuODFhLjc1Ljc1LDAsMCwxLS42Ni0xLjFjLjE0LS4yNy4yOS0uNTQuNDQtLjgxYS43NS43NSwwLDAsMSwxLjMxLjczYy0uMTUuMjYtLjI5LjUyLS40My43OEEuNzMuNzMsMCwwLDEsMzAuNDcsNTIuODFaTTk0LDUwLjcxYS43NS43NSwwLDAsMS0uNjQtLjM2bC0uNDgtLjc0YS43NS43NSwwLDAsMSwuMjItMSwuNzYuNzYsMCwwLDEsMSwuMjFjLjE3LjI2LjMzLjUyLjQ5Ljc4YS43Ni43NiwwLDAsMS0uMjQsMUEuNzkuNzksMCwwLDEsOTQsNTAuNzFaTTMzLjM2LDQ4LjIyYS43My43MywwLDAsMS0uNDQtLjE1Ljc0Ljc0LDAsMCwxLS4xNi0xbC41Ni0uNzNhLjc1Ljc1LDAsMSwxLDEuMTguOTJjLS4xOC4yNC0uMzYuNDctLjUzLjcxQS43Ni43NiwwLDAsMSwzMy4zNiw0OC4yMlptNTcuNDctMS45YS43NC43NCwwLDAsMS0uNTgtLjI3bC0uNTgtLjY2YS43Ni43NiwwLDAsMSwuMDYtMS4wNi43NS43NSwwLDAsMSwxLjA2LjA2Yy4yMS4yMy40MS40Ni42MS43YS43NS43NSwwLDAsMS0uNTcsMS4yM1pNMzYuOSw0NC4xMWEuNzQuNzQsMCwwLDEtLjUzLS4yMi43NS43NSwwLDAsMSwwLTEuMDZsLjY2LS42NGEuNzUuNzUsMCwwLDEsMSwxLjA5bC0uNjQuNjFBLjczLjczLDAsMCwxLDM2LjksNDQuMTFaTTg3LDQyLjQ1YS43My43MywwLDAsMS0uNS0uMTlsLS42Ny0uNTdhLjc1Ljc1LDAsMCwxLS4wOS0xLjA2Ljc0Ljc0LDAsMCwxLDEtLjA5Yy4yNC4xOS40Ny4zOS43LjZhLjc0Ljc0LDAsMCwxLC4wNywxQS43Ni43NiwwLDAsMSw4Nyw0Mi40NVpNNDEsNDAuNTdhLjc0Ljc0LDAsMCwxLS42LS4zLjc1Ljc1LDAsMCwxLC4xNS0xLjA1bC43NS0uNTRhLjc1Ljc1LDAsMCwxLDEsLjE4Ljc2Ljc2LDAsMCwxLS4xOCwxbC0uNzIuNTJBLjc1Ljc1LDAsMCwxLDQxLDQwLjU3Wk04Mi43LDM5LjE5YS43OC43OCwwLDAsMS0uNDEtLjEybC0uNzUtLjQ4YS43NS43NSwwLDAsMSwuNzgtMS4yOGwuNzkuNDlhLjc3Ljc3LDAsMCwxLC4yMiwxQS43NS43NSwwLDAsMSw4Mi43LDM5LjE5Wk00NS42LDM3LjY3YS43NC43NCwwLDAsMS0uNjYtLjM5Ljc1Ljc1LDAsMCwxLC4zLTFsLjgyLS40MmEuNzUuNzUsMCwxLDEsLjY4LDEuMzRjLS4yNy4xMy0uNTMuMjctLjc5LjQxQS43Mi43MiwwLDAsMSw0NS42LDM3LjY3Wk03Ny45MywzNi42YS43LjcsMCwwLDEtLjMxLS4wN2wtLjgxLS4zNWEuNzUuNzUsMCwwLDEtLjQtMSwuNzQuNzQsMCwwLDEsMS0uNGwuODUuMzZhLjc1Ljc1LDAsMCwxLS4zMSwxLjQ0Wk01MC41NiwzNS40OEEuNzUuNzUsMCwwLDEsNTAuMzEsMzRsLjg3LS4zYS43NS43NSwwLDAsMSwuNDcsMS40M2wtLjg0LjI5QTEuMDksMS4wOSwwLDAsMSw1MC41NiwzNS40OFptMjIuMjctLjczYS42NC42NCwwLDAsMS0uMiwwbC0uODYtLjIzYS43Ni43NiwwLDAsMS0uNTQtLjkyLjc1Ljc1LDAsMCwxLC45MS0uNTRsLjg5LjI0YS43Ni43NiwwLDAsMSwuNTIuOTNBLjc1Ljc1LDAsMCwxLDcyLjgzLDM0Ljc1Wm0tMTctLjcxYS43NS43NSwwLDAsMS0uMTQtMS40OWwuOTEtLjE3YS43NS43NSwwLDAsMSwuODYuNjIuNzQuNzQsMCwwLDEtLjYxLjg2bC0uODcuMTZabTExLjczLS4zOGgtLjFsLS44OC0uMWEuNzUuNzUsMCwwLDEsLjE1LTEuNWwuOTIuMTFhLjc1Ljc1LDAsMCwxLS4wOSwxLjVabS02LjM0LS4yN2EuNzUuNzUsMCwwLDEsMC0xLjVsLjkzLDBhLjc2Ljc2LDAsMCwxLC43Ni43NC43NS43NSwwLDAsMS0uNzMuNzZsLS44OSwwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwNCw2OS43M2wtLjIzLDE0LjZjLTYsLjI0LTEwLjYzLDQuMi0xMC42MywxMC4yOSwwLC4xNiwwLC4zMSwwLC40Nkg2MC41OVY2OS43M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05NS43OSw4OC44OWEuNzIuNzIsMCwwLDEtLjQ4LS4xN2wtNi40LTUuMzdhLjc1Ljc1LDAsMCwxLS4xLTEsLjc2Ljc2LDAsMCwxLDEuMDYtLjFsNi40LDUuMzdhLjc1Ljc1LDAsMCwxLS40OCwxLjMyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTYxLjEzLDk1LjYzYS43Mi43MiwwLDAsMS0uNTctLjI3Ljc1Ljc1LDAsMCwxLC4wOS0xLjA2TDc1LjIzLDgyLjJhLjc1Ljc1LDAsMCwxLDEsLjEuNzQuNzQsMCwwLDEtLjEsMUw2MS42MSw5NS40NkEuNzIuNzIsMCwwLDEsNjEuMTMsOTUuNjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTA0LjI1LDg0LjQ4YS43Ni43NiwwLDAsMS0uNzUtLjc1VjY5LjkzYS43NS43NSwwLDAsMSwxLjUsMHYxMy44QS43Ni43NiwwLDAsMSwxMDQuMjUsODQuNDhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAzLjc5LDk4Ljg2YS43NS43NSwwLDAsMS0uNTgtLjI3bC0zLTMuNjhhLjc1Ljc1LDAsMSwxLDEuMTYtMWwyLjQyLDMsOC05Ljg1YS43NS43NSwwLDAsMSwxLjE3LDFsLTguNTcsMTAuNTZhLjc0Ljc0LDAsMCwxLS41OC4yOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04OSw5NS44MUg2MC44NGEuNzYuNzYsMCwwLDEtLjc1LS43NVY2OS45M2EuNzYuNzYsMCwwLDEsLjc1LS43NWg0My4zYS43My43MywwLDAsMSwuNy41Ljc0Ljc0LDAsMCwxLS4yMi44M0w4Ny4yMiw4NWMtNC4wNiwzLjUzLTUuMSwzLjU0LTkuMjIuMDlMNjMuNTUsNzMuMzVhLjc2Ljc2LDAsMCwxLS4xMS0xLjA2Ljc1Ljc1LDAsMCwxLDEtLjExTDc5LDgzLjg5YzMuNTQsMywzLjgxLDMsNy4zLS4wOWwxNS44MS0xMy4xMkg2MS41OVY5NC4zMUg4OWEuNzUuNzUsMCwwLDEsMCwxLjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTA0LjQsMTA2LjQ5YTExLjQ0LDExLjQ0LDAsMCwxLTguMi0zLjQ0LDExLjgzLDExLjgzLDAsMCwxLDAtMTYuNThBMTEuNDYsMTEuNDYsMCwwLDEsMTA0LjI2LDgzaDBhLjc1Ljc1LDAsMCwxLC43NS43NC43NC43NCwwLDAsMS0uNzQuNzYsMTAsMTAsMCwwLDAtNywzLDEwLjMzLDEwLjMzLDAsMCwwLDAsMTQuNDcsMTAsMTAsMCwwLDAsMTQuMjgsMCwxMC40LDEwLjQsMCwwLDAsLjU5LTEzLjgzLjc0Ljc0LDAsMCwxLC4wOS0xLC43NS43NSwwLDAsMSwxLjA2LjA5LDExLjksMTEuOSwwLDAsMS0uNjgsMTUuODRBMTEuNDQsMTEuNDQsMCwwLDEsMTA0LjQsMTA2LjQ5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQzLjI2LDYzLjQ3YTMuMjcsMy4yNywwLDAsMSwzLjI2LDMuMjlsMCw0Mi4zMkEzLjM2LDMuMzYsMCwwLDEsNDQsMTEyLjM2aC0uMjNsLTEtOS41NGEyLjMzLDIuMzMsMCwwLDAtMi4yMi0yLjEzaC0uMTVhMi4zMSwyLjMxLDAsMCwwLTIuMjQsMi4yNCw2Ny42Niw2Ny42NiwwLDAsMS0uODIsNy40MWMtLjEyLjc1LS4yNywxLjU0LS40NCwyLjM1bC0uNzQsMEgyNGEzLjI3LDMuMjcsMCwwLDEtMy4yNi0zLjI5VjY2Ljc2QTMuMjcsMy4yNywwLDAsMSwyNCw2My40N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zNi4xNywxMTMuNDhIMjRhNCw0LDAsMCwxLTQtNFY2Ni43NmE0LDQsMCwwLDEsNC00SDQzLjI2YTQsNCwwLDAsMSw0LDRsMCw0Mi4zMmE0LjA4LDQuMDgsMCwwLDEtMy4xNiw0LC43Ni43NiwwLDAsMS0uOS0uNTYuNzUuNzUsMCwwLDEsLjU2LS45LDIuNiwyLjYsMCwwLDAsMi0yLjU1bDAtNDIuMzJhMi41MywyLjUzLDAsMCwwLTIuNTEtMi41NEgyNGEyLjUzLDIuNTMsMCwwLDAtMi41MSwyLjU0djQyLjY4QTIuNTMsMi41MywwLDAsMCwyNCwxMTJIMzYuMTdhLjc1Ljc1LDAsMCwxLDAsMS41WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMzLjQ3LDEwOWEyLjQyLDIuNDIsMCwxLDEsMi40MS0yLjQxQTIuNDEsMi40MSwwLDAsMSwzMy40NywxMDlabTAtMy4zM2EuOTIuOTIsMCwxLDAsLjkxLjkyQS45MS45MSwwLDAsMCwzMy40NywxMDUuNjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzYuNSw2OC4yNEgzMS4yMWEuNzUuNzUsMCwxLDEsMC0xLjVIMzYuNWEuNzUuNzUsMCwwLDEsMCwxLjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzQsMTI0Ljc1YS43NS43NSwwLDAsMS0uNzItMSwxMzYuMTcsMTM2LjE3LDAsMCwwLDMuMjktMTMuNTYsNjQsNjQsMCwwLDAsLjgxLTcuMzMsMy4wNiwzLjA2LDAsMCwxLDYuMS0uMTVsMS4yLDExLjY1YS43NS43NSwwLDAsMS0xLjQ5LjE1TDQyLDEwMi45YTEuNTYsMS41NiwwLDAsMC0xLjYtMS40NUExLjU4LDEuNTgsMCwwLDAsMzguOTEsMTAzYTY1LDY1LDAsMCwxLS44Miw3LjUsMTM4Ljc5LDEzOC43OSwwLDAsMS0zLjMzLDEzLjc0QS43NS43NSwwLDAsMSwzNCwxMjQuNzVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuODcsMTI0Ljc1YS43NC43NCwwLDAsMS0uNDUtLjE1Ljc1Ljc1LDAsMCwxLS4xNS0xYzAtLjA2LDQuMTMtNS41OSwzLjg3LTE1LS4xOS03LjEzLTctMTMuMjctNy0xMy4zM2EuNzYuNzYsMCwwLDEtLjA2LTEuMDYuNzUuNzUsMCwwLDEsMS4wNi0uMDZjLjMuMjcsNy4zMSw2LjY0LDcuNTIsMTQuNDEuMjcsOS45Mi00LDE1LjY1LTQuMTcsMTUuODlBLjc0Ljc0LDAsMCwxLDQ5Ljg3LDEyNC43NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik01MS4wNiwyNy43N2wtMi42NC0xLjU0YTEuMzYsMS4zNiwwLDAsMS0uNjEtMS44TDU5LjExLDQuNThBMS4zMywxLjMzLDAsMCwxLDYxLDQuMjJsMzIuNDcsMTlhMS4zNiwxLjM2LDAsMCwxLC42MiwxLjhMODQuNjgsNDEuNDkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04NC42OCw0Mi4yNGEuNzQuNzQsMCwwLDEtLjM3LS4xLjc1Ljc1LDAsMCwxLS4yOC0xbDkuMzYtMTYuNDVhLjYyLjYyLDAsMCwwLS4zNC0uNzlsLTMyLjQ3LTE5QS43OC43OCwwLDAsMCw2MCw0Ljc3YS4zOS4zOSwwLDAsMC0uMjUuMThMNDguNDYsMjQuOGEuNjMuNjMsMCwwLDAsLjM0Ljc4bDIuNjQsMS41NWEuNzUuNzUsMCwwLDEtLjc2LDEuMjlsLTIuNjMtMS41NGEyLjEyLDIuMTIsMCwwLDEtLjg5LTIuODNMNTguNDYsNC4yMWExLjg3LDEuODcsMCwwLDEsMS4xNi0uODksMi4yNSwyLjI1LDAsMCwxLDEuNzEuMjVsMzIuNDgsMTlhMi4xMiwyLjEyLDAsMCwxLC44OSwyLjgyTDg1LjMzLDQxLjg2QS43Mi43MiwwLDAsMSw4NC42OCw0Mi4yNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04Mi4xMSw1Ni45MUg0NS43NmExLjQyLDEuNDIsMCwwLDEtMS40Mi0xLjQzVjI5LjIxYTEuNDMsMS40MywwLDAsMSwxLjQyLTEuNDRoMzcuNWExLjQzLDEuNDMsMCwwLDEsMS40MiwxLjQ0djI3LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODQuNjgsNTcuNjZINDUuNzZhMi4xOCwyLjE4LDAsMCwxLTIuMTctMi4xOFYyOS4yMUEyLjE4LDIuMTgsMCwwLDEsNDUuNzYsMjdoMzcuNWEyLjE4LDIuMTgsMCwwLDEsMi4xNywyLjE5djI3LjdBLjc0Ljc0LDAsMCwxLDg0LjY4LDU3LjY2Wk00NS43NiwyOC41MmEuNjguNjgsMCwwLDAtLjY3LjY5VjU1LjQ4YS42OC42OCwwLDAsMCwuNjcuNjhIODMuOTNWMjkuMjFhLjY4LjY4LDAsMCwwLS42Ny0uNjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjMuMjksNDcuNzRhLjc0Ljc0LDAsMCwxLS43NS0uNzVWMzIuMjRINDguNzZ2MTRINjAuNDJhLjc1Ljc1LDAsMCwxLDAsMS41SDQ4YS43NC43NCwwLDAsMS0uNzUtLjc1VjMxLjQ5YS43NS43NSwwLDAsMSwuNzUtLjc1SDYzLjI5YS43Ni43NiwwLDAsMSwuNzUuNzVWNDdBLjc1Ljc1LDAsMCwxLDYzLjI5LDQ3Ljc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU2LDQwLjkyYTMuODUsMy44NSwwLDEsMSwzLjgxLTMuODVBMy44MiwzLjgyLDAsMCwxLDU2LDQwLjkyWm0wLTYuMmEyLjM1LDIuMzUsMCwxLDAsMi4zMSwyLjM1QTIuMzMsMi4zMywwLDAsMCw1NiwzNC43MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02My4yOSw0Ny43NGEuNzQuNzQsMCwwLDEtLjc0LS42M2MtLjM1LTIuMjMtMi4zNi00LjMzLTQuMTUtNC4zM2EuNzUuNzUsMCwwLDEsMC0xLjVjMi41NCwwLDUuMTcsMi42Miw1LjYzLDUuNmEuNzUuNzUsMCwwLDEtLjYzLjg1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ5Ljg0LDQ1Ljg4YS42NC42NCwwLDAsMS0uMiwwLC43NC43NCwwLDAsMS0uNTItLjkyLDQuNjcsNC42NywwLDAsMSw0LjQ0LTMuNjVoLjkyYzEuNzQsMCwzLjQ4LDAsNCwwYS43NS43NSwwLDEsMS0uMDYsMS41Yy0uNDgsMC0yLjYxLDAtMy44OCwwaC0uOTNhMy4xOSwzLjE5LDAsMCwwLTMsMi41NkEuNzQuNzQsMCwwLDEsNDkuODQsNDUuODhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDguNjIsNTMuOTRhLjczLjczLDAsMCwxLS41Ny0uMjYuNzQuNzQsMCwwLDEsLjA4LTFsMy41Ny0zLjFhLjc1Ljc1LDAsMCwxLC43NS0uMTQuNzMuNzMsMCwwLDEsLjQ4LjU5QTcuNjYsNy42NiwwLDAsMSw1Myw1MS4zM2wuNjUtLjM2YTEsMSwwLDAsMSwxLjQ2LjY0cy4xNS4yLjgxLjI1YTMxLjc2LDMxLjc2LDAsMCwwLDMuNjUsMCwuNzQuNzQsMCwwLDEsLjc4LjcxLjc1Ljc1LDAsMCwxLS43Mi43OSwzMi41LDMyLjUsMCwwLDEtMy44Mi0uMDYsMi40NSwyLjQ1LDAsMCwxLTEuOS0uODFsLTEuNDcuNzlhLjczLjczLDAsMCwxLS44LS4wNi43NS43NSwwLDAsMS0uMjktLjc2LDcuNzYsNy43NiwwLDAsMCwuMTMtLjgybC0yLjM5LDIuMDdBLjc2Ljc2LDAsMCwxLDQ4LjYyLDUzLjk0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgxLDUzLjMyaC01LjVhLjc1Ljc1LDAsMCwxLDAtMS41SDgxYS43NS43NSwwLDAsMSwwLDEuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04MSw1MC44NGgtNS41YS43NS43NSwwLDAsMSwwLTEuNUg4MWEuNzUuNzUsMCwxLDEsMCwxLjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAgLTMuMjUpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzMuMDcsNTMuMzJoLTUuNWEuNzUuNzUsMCwwLDEsMC0xLjVoNS41YS43NS43NSwwLDAsMSwwLDEuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03My4wNyw1MC44NGgtNS41YS43NS43NSwwLDAsMSwwLTEuNWg1LjVhLjc1Ljc1LDAsMCwxLDAsMS41WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc1LjUxLDQwLjkySDY3LjU3YS43NS43NSwwLDAsMSwwLTEuNWg3Ljk0YS43NS43NSwwLDAsMSwwLDEuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03OS4xOCwzNi41OEg2Ny41N2EuNzUuNzUsMCwwLDEsMC0xLjVINzkuMThhLjc1Ljc1LDAsMCwxLDAsMS41WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwIC0zLjI1KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc0LjI5LDMyLjg2SDY3LjU3YS43NS43NSwwLDAsMSwwLTEuNWg2LjcyYS43NS43NSwwLDAsMSwwLDEuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04OC4wNiwyNy44NGEuNzQuNzQsMCwwLDEtLjM3LS4xTDU2LjQ1LDkuODJhLjc1Ljc1LDAsMSwxLC43NC0xLjNMODguNDQsMjYuNDRhLjc1Ljc1LDAsMCwxLC4yNywxQS43My43MywwLDAsMSw4OC4wNiwyNy44NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCAtMy4yNSkiLz48L3N2Zz4=\";\nexport { SvgIllusCreateAccount as ReactComponent };","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport CountrySelection from '../../guest-payment-components/CountrySelection';\nimport CreateAccountTile from './createAccountTile';\n\nclass RussiaGuestForm extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\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 * as FPT from '../../utility/fpt';\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';\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 { isExternalFlow } from '../../utility/externalIntegrationUtils';\nimport { EVENT_NAME } from '../../utility/constants';\nimport { getPersonalizedMessages } from '../../utility/personalizedMessages';\nimport { NNA_CONTENT_TOUCHPOINT } from '../../utility/constants';\nimport isNna from '../../utility/nna';\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 if (isExternalFlow()) {\n FPT.trackEventName(EVENT_NAME.DW_GIVING_GUEST_FORM_SCREEN_SHOWN);\n }\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 FPT.trackFieldError(fieldName, errorCode, errorMessage);\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 let emailRex = constants.EMAIL_REX;\n let cusEmail = TemplateData.donationEmail;\n if (emailRex.test(email)) {\n if (cusEmail.toUpperCase() === email.toUpperCase()) {\n errCodeEmail = 'CANNOT_PAY_SELF';\n }\n } else if (email === '') {\n errCodeEmail = 'MISSING_EMAIL_ID';\n } else {\n errCodeEmail = 'INVALID_EMAIL_ID';\n }\n\n let errMessageEmail = errorMessages[errCodeEmail];\n FPT.trackFieldError('email', errCodeEmail, errMessageEmail);\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) => {\n let chkBxStatus = checked ? 'checked' : 'unchecked';\n FPT.trackLinkClickWithData('createAccount', { checkbox: chkBxStatus });\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 FPT.trackFieldError(fieldId, key, message);\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 FPT.trackFieldError('email', key, errMessageEmail);\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 FPT.trackFieldError(\n errFields,\n 'INVALID_BILLING_ADDRESS_CITY_STATE_ZIP',\n errorMessage\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 FPT.trackFieldError(fieldId, errorCode, errorMessage);\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 FPT.trackFieldError('email', 'MISSING_EMAIL_ID', emailErr);\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 FPT.trackFieldError(\n `billing_error_${field.$}`,\n 'REQUIRED_ADDRESS_LINE1',\n errorMessages.REQUIRED_ADDRESS_LINE1\n );\n break;\n case 'city':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_CITY;\n this.setState(newErrorState);\n FPT.trackFieldError(\n `billing_error_${field.$}`,\n 'REQUIRED_BILLING_ADDRESS_CITY',\n errorMessages.REQUIRED_BILLING_ADDRESS_CITY\n );\n break;\n case 'state':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_STATE;\n this.setState(newErrorState);\n FPT.trackFieldError(\n `billing_error_${field.$}`,\n 'REQUIRED_BILLING_ADDRESS_STATE',\n errorMessages.REQUIRED_BILLING_ADDRESS_STATE\n );\n break;\n case 'postcode':\n newErrorState[`billing_error_${field.$}`] =\n errorMessages.REQUIRED_BILLING_ADDRESS_ZIP;\n this.setState(newErrorState);\n FPT.trackFieldError(\n `billing_error_${field.$}`,\n 'REQUIRED_BILLING_ADDRESS_ZIP',\n errorMessages.REQUIRED_BILLING_ADDRESS_ZIP\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 FPT.trackFieldError('guestTerm', 'GUEST_TERMS_NOT_CHECKED');\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 } = 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\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 FPT.addDonationAmount(\n dataToSubmit.amount,\n window.fpti.pgrp,\n window.fpti.page\n );\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 if (this.state.consentShareAddress) {\n FPT.trackLinkClickWithData('consentShareAddress', {\n consentShareAddress: 'true',\n });\n }\n\n const isSignUp = this.isSignUp() ? 'Y' : 'N';\n FPT.trackSignupOption(isSignUp);\n FPT.trackDonationAmount();\n if (isNna(this.state.country)) {\n FPT.trackOfferType('nna');\n } else if (FPT.getOfferType() === 'nna') {\n FPT.trackOfferType(undefined);\n }\n if (isExternalFlow()) {\n FPT.trackLinkClickWithData('donate', {\n event_name: EVENT_NAME.DW_GIVING_GUEST_FORM_DONATE_PRESSED,\n });\n } else {\n FPT.trackLinkClick('donate');\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 this.props.history.push('/donate/error/payment');\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 this.props.history.push('/donate/error/payment');\n return;\n } else if (result.status === 'redirect') {\n window.location.href = result.url;\n return;\n } else if (result.code === 'CROSS_BORDER' && result.fundingOpts) {\n let fundingOpts = result.fundingOpts[0];\n // Updating store with funding options\n AppActions.updateFundingOptions({ fundingOptions: fundingOpts });\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\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 } 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 } 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 } 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 } 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 } 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\n FPT.addFi(\n fundingOpts,\n 'main:donate:wps:guest:3DS-challenge',\n 'main:donate:wps:guest:3DS-challenge:::'\n );\n FPT.add3DSInitData(\n fundingOpts,\n 'main:donate:wps:guest:3DS-challenge',\n 'main:donate:wps:guest:3DS-challenge:::'\n );\n\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 this.props.history.push('/donate/error/payment');\n }\n })\n .catch((e) => {\n // Handle any wierd errors from service\n this.props.history.push('/donate/error/payment');\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 FPT.trackPageWithData(\n 'main:donate:wps:guest:upgrade',\n 'main:donate:wps:guest:upgrade:web::',\n {\n xe: response.experiment.experiment_id,\n xt: 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 FPT.addPxpTags({\n xe: response.experiment.experiment_id,\n xt: 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 countryAndLocale = {\n country: TemplateData.country,\n locale: `${TemplateData.language}_${TemplateData.country}`,\n };\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\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\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\n \n
\n \n \n {this.state.addressErrorMessage}\n \n )}\n\n (this.threeDSContainer = ref)}\n />\n
\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\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 {addressEntryFormat.layout\n .filter((field) => field._ !== undefined)\n .map((field) => (\n
\n\n {TemplateData.isShipping && (\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 {}}\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\nDebitOrCredit.propTypes = {\n label: PropTypes.string,\n};\n\nexport default DebitOrCredit;\n","// eslint-disable-next-line no-unused-vars\nimport React, { useEffect } from 'react';\nimport { showSpinnerOverlay } from '../../utility/helper';\n\nexport default function FallbackSpinner() {\n useEffect(() => {\n showSpinnerOverlay();\n }, []);\n\n return <>;\n}\n","// Overhead\nimport React, { Suspense } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport _get from 'lodash/get';\n\n// Components\nimport LinnerDiv from '../../components/lineDiv';\nimport Note from '../../components/note';\nimport ServerErrors from '../../components/ServerErrors';\nimport AmountWrapper from '../../components/amountWrapper';\nimport GuestForm from '../guest/guestForm';\nimport PayCreditOrDebit from '../../components/payCreditOrDebit';\nimport RecurringCheckBox from '../../components/recurring-checkbox/recurring-checkbox';\nimport DonateHeader from '../../components/common/DonateHeader';\nimport CloseButton from '../../components/CloseButton';\nimport { Divider } from '@paypalcorp/pp-react-divider';\nimport { Alert } from '@paypalcorp/pp-react-alert';\n\n// App Store/Flux\nimport AppStore from '../../stores/AppStore';\nimport AppDispatcher from '../../dispatcher/AppDispatcher';\nimport * as DonateAppActions from '../../actions/AppActions';\nimport * as AppConstants from '../../utility/constants';\n// Utility\nimport '../../utility/csrf';\nimport * as amountUtils from '../../components/amount/amountUtils';\nimport {\n handleLogIn,\n handleTokenReuse,\n addShake,\n updateDonation,\n observeUntilEventObserved,\n getInitialDataInDom,\n} from '../../utility/helper';\nimport * as FPT from '../../utility/fpt';\nimport templateData, { localsMessages } from '../../utility/getTemplateData';\nimport {\n formatAmount,\n normalizeNumber,\n formatCurrency,\n} from '../../utility/formator';\nimport DonateGiftAid from '../../guest-payment-components/DonateGiftAid';\nimport withDonate from '../../components/guest/WithDonate';\n// import TeslaFormContainer from './teslaFormContainer';\nimport * as cpl from '../../utility/cpl';\n\nimport CancelAndReturn from '../../components/cancelAndReturn';\nimport Disclaimer from '../../components/Disclaimer';\nimport { PPGF_DISCLAIMER_TOUCHPOINT } from '../../utility/constants';\nimport {\n getPersonalizedMessages,\n hasPersonalizedMessages,\n} from '../../utility/personalizedMessages';\nimport {\n scrollElementIntoView,\n objectOrArrayToQueryString,\n} from '../../utility/domUtils';\nimport getContent from 'pp-react-l10n';\nimport { isExternalFlow } from '../../utility/externalIntegrationUtils';\nimport {\n isInContext,\n isMobileOrInContext,\n} from '../../utility/inContextDonation';\nimport BackButton from '../../components/BackButton';\nimport isNna from '../../utility/nna';\nimport { reactLazyPreload } from '../../utility/lazyLoader';\nimport FallbackSpinner from '../common/FallbackSpinner';\nimport { getParameterByName } from '../../utility/queryStringHelper';\nimport { isCrsAborted } from '../../utility/crsUtils';\n\nconst messages = localsMessages('common/amount');\nconst auCrsMessages = localsMessages('guest/guestForm');\n\nlet initialData = getInitialDataInDom();\n\nlet giftAidText = localsMessages('common/giftAidIt');\nlet giftAidTextObj = (giftAidText && giftAidText.giftAidIt) || {};\nconst donateGiftPercentage = AppStore.getGiftAidItExtraAmount();\n\nconst TeslaFormContainer = reactLazyPreload(() =>\n import(/* webpackChunkName: \"TeslaFormContainer\" */ './teslaFormContainer')\n);\n\nclass Guest extends React.Component {\n constructor(props) {\n super(props);\n\n this.props.showErrorOnLoad();\n\n this.state = {\n formattedAmount: this.getFormattedAmount(),\n hasLogo: templateData.hasLogo,\n subHeaderLabel: templateData.donationName,\n orgName: templateData.charityName,\n donationId: templateData.donationId,\n guestRedirectUrl: templateData.guestRedirectUrl,\n donateDisabled: false,\n showServiceErrors: false,\n errorMessages: [],\n recurringEnabled: templateData.recurringEnabled,\n recurringStatus: false,\n country: initialData.selectedCountry,\n selectedCountry: initialData.selectedCountry,\n memberMandatory: templateData.memberMandatory || false,\n accountCreationTriggered: false,\n\n recurringHelpText: '',\n recurringLabel: 'Make this a monthly donation',\n isProgressive:\n (templateData.onboardingEnabled &&\n initialData.selectedCountry !== 'RU') ||\n false,\n isDonating: false,\n isShipping: templateData.isShipping || false,\n shareAddress: {},\n progressiveComponentLoaded: false,\n paymentProcessing: false,\n programNames: templateData.donateContext.program_names,\n hasDisclaimer: hasPersonalizedMessages(PPGF_DISCLAIMER_TOUCHPOINT),\n showAuCrsBanner: false,\n };\n }\n\n getFormattedAmount = () => {\n const currency = AppStore.getDonationCode() || '';\n const amount = AppStore.getDonationAmount();\n let formattedAmount = '';\n if (amount) {\n formattedAmount = formatAmount({ currency, value: amount });\n }\n return formattedAmount;\n };\n\n logCPLData = (logData) => {\n const spinnerOverlay = document.getElementById('spinnerOverlay');\n\n if (spinnerOverlay.style.display === 'none') {\n logData();\n } else {\n observeUntilEventObserved(\n spinnerOverlay,\n { attributes: true },\n (observer) => {\n logData();\n observer.disconnect();\n return;\n }\n );\n }\n };\n\n endCustomCPLTracking = () => {\n const page = this.state.isProgressive\n ? 'main:onbrd:signup:donate:guestFormComponent'\n : 'main:donate:wps:guest:guestform:guestFormComponent:web:',\n action = this.state.isProgressive\n ? 'tesla_form_loaded'\n : 'guest_form_loaded',\n uicomp = this.state.isProgressive ? 'teslaForm' : 'guestForm';\n\n if (\n document.referrer.includes('token=') ||\n performance.navigation.type === performance.navigation.TYPE_RELOAD\n ) {\n // on page refresh or country change\n window.onload = () => {\n setTimeout(() => {\n // Without these, loadEventStart and loadEventEnd would be 0\n // and thus tt would be a negative value\n // We need this because componentDidMount runs before\n // the page has completely loaded all content\n this.logCPLData(() => {\n cpl.logPerformance({\n page,\n action,\n uicomp,\n uitype: 'page',\n });\n });\n }, 0);\n };\n } else {\n this.logCPLData(() => {\n window.PAYPAL.analytics.endCPLTracking({\n page,\n action,\n uicomp,\n uitype: 'component',\n });\n });\n }\n };\n\n componentDidMount() {\n this.props.toggleSpinner(this.state.isProgressive, this.state.isDonating);\n this.setShouldShowAuCrsBanner();\n\n // Only adding page name, if \"fptPageName=landing\", in other cases track event will be triggered when template is loaded.\n if (templateData.fptPageName.toLowerCase().includes('landing')) {\n FPT.trackPageWithData(\n 'main:donate:wps:guest:guestform',\n 'main:donate:wps:guest:guestform:web::',\n {\n ...(isNna(this.state.country) ? { offer_type: 'nna' } : {}),\n }\n );\n }\n\n // Checking for recurring status\n if (AppStore.getDonationRecurring() === 'checked') {\n this.setState({ recurringStatus: true }); // eslint-disable-line\n }\n\n // Checking token status\n handleTokenReuse();\n\n // Register for App Dispatcher Messages\n this.registerAppDispatcherMessages();\n\n // Show language selector in the footer\n DonateAppActions.showLanguageSelector(true);\n\n // startCPLTracking is initiated in landing page\n this.endCustomCPLTracking();\n }\n\n registerAppDispatcherMessages = () => {\n this.dispatcherMessages = AppDispatcher.register((payload) => {\n const actionType = _get(payload, 'action.actionType');\n\n if (actionType === 'CHANGE_AMOUNT') {\n const amount = _get(payload, 'action.item.amount', 0);\n this.updateAmount(amount);\n }\n if (actionType === AppConstants.CHANGE_RECURRING) {\n const recurringStatus =\n _get(payload, 'action.item.recurring', '') === 'checked';\n this.setState({ recurringStatus: recurringStatus });\n }\n });\n };\n\n getGiftAidExtraAmount(amount) {\n const value = (donateGiftPercentage * normalizeNumber(amount)).toFixed(2);\n const currency = AppStore.getDonationCode();\n return formatCurrency({ value, currency });\n }\n\n updateGiftAidComponent = (state) => {\n const currency = AppStore.getDonationSymbol();\n const amount = AppStore.getDonationAmount() || 0;\n const extraCostText = getContent('locals')('common/giftAidIt')(\n 'giftAidIt.extraCost',\n {\n currency,\n amount,\n extraAmount: this.getGiftAidExtraAmount(amount),\n },\n {\n useHTML: true,\n }\n );\n\n let modalp1 = (giftAidTextObj && giftAidTextObj.modalp1) || '',\n modalp2 = (giftAidTextObj && giftAidTextObj.modalp2) || '',\n applyGiftAid = (giftAidTextObj && giftAidTextObj.applyGiftAid) || '';\n\n modalp1 = modalp1 && modalp1.replace('{orgName}', state.subHeaderLabel);\n modalp2 = modalp2 && modalp2.replace('{orgName}', state.subHeaderLabel);\n applyGiftAid =\n applyGiftAid && applyGiftAid.replace('{orgName}', state.subHeaderLabel);\n\n giftAidTextObj.extraCost = extraCostText;\n giftAidTextObj.modalp1 = modalp1;\n giftAidTextObj.modalp2 = modalp2;\n giftAidTextObj.applyGiftAid = applyGiftAid;\n };\n\n componentWillUnmount() {\n AppDispatcher.unregister(this.dispatcherMessages);\n }\n\n getFPTDATA = () => {\n return {\n amount: AppStore.getDonationAmount(),\n code: AppStore.getDonationCode(),\n symbol: AppStore.getDonationSymbol(),\n };\n };\n\n updateConversionStatus = (status = false) => {\n this.setState({ donateDisabled: status });\n };\n\n handleLogIn = (event) => {\n event.preventDefault();\n\n if (AppStore.getDonationAmount()) {\n FPT.trackLinkClickWithData('guestLogIn', {\n amount: AppStore.getDonationAmount(),\n code: AppStore.getDonationCode(),\n symbol: AppStore.getDonationSymbol(),\n });\n }\n\n // Proceed to Login only if the donation amount is valid\n if (this.validateDonationAmount()) {\n handleLogIn();\n }\n };\n\n /**\n * Display validation error\n */\n displayValidationError = () => {\n const errorMessage = amountUtils.getMinimumDonationErrorMessage(messages);\n this.setState({\n showValidationError: true,\n validationErrorMessage: errorMessage,\n });\n addShake();\n };\n\n hideValidationError = () => {\n this.setState({ showValidationError: false });\n };\n\n /**\n * Validates donation amount and displays the validation error if any\n */\n validateDonationAmount = () => {\n let validationResult = amountUtils.validateMinimumDonationAmount(messages);\n if (validationResult?.showValidationError) {\n this.setState(validationResult);\n addShake();\n scrollElementIntoView('.money_input');\n return false;\n }\n\n validationResult = amountUtils.validateMaximumDonationAmount();\n if (validationResult?.showValidationError) {\n this.setState(validationResult);\n addShake();\n scrollElementIntoView('.money_input');\n return false;\n }\n\n this.setState(validationResult);\n return true;\n };\n\n handleRecurringChange = (status = false) => {\n DonateAppActions.changeRecurring({\n recurring: status ? 'checked' : 'unchecked',\n });\n };\n\n /**\n * Clear the validation error onFocus\n */\n handleAmountFocus = () => {\n if (this.state.showValidationError) {\n this.hideValidationError();\n }\n };\n\n /*\n * handlePaymentSuccess\n */\n handlePaymentSuccess = (response) => {\n const { token } = templateData;\n const queryParams = objectOrArrayToQueryString({ token });\n if (response.isOfacPending) {\n return this.props.history.push(`/donate/guest/pending?${queryParams}`);\n }\n return this.props.history.push(`/donate/guest/confirmation?${queryParams}`);\n };\n\n /*\n * handlePaymentFailure\n */\n handlePaymentFailure = () => {\n this.props.toggleSpinner(false);\n return this.props.history.push('/donate/error/payment');\n };\n\n /*\n * handleMemberFailure\n * Redirect all member failure to donate/member\n * Known case\n * Case 1 :- WSM_PAYER_FUNDING_INSTRUMENTS_UNAVAILABLE\n * Case 2 :- WSM_VALIDATION_ERROR\n */\n handleMemberFailure = () => {\n updateDonation(`/donate/member?token=${templateData.token}`);\n };\n\n updateAmount(amount) {\n const currency = AppStore.getDonationCode() || '';\n this.setState({\n formattedAmount: formatAmount({ currency, value: amount }),\n });\n }\n\n handleGiftAidOption(giftAidState) {\n DonateAppActions.updateGiftaidItFlag({ giftAidItFlag: giftAidState });\n }\n\n /**\n * Should show note when charityNote is enabled and recurring is disabled for non-client flows\n * @return {Boolean} true to show note field\n */\n shouldShowNote = () => {\n return (\n templateData.charityNoteEnabled &&\n !this.state.recurringStatus &&\n !isExternalFlow()\n );\n };\n\n createMarkup = (str) => {\n return {\n __html: str,\n };\n };\n\n getPersonalizedContent = () => {\n return getPersonalizedMessages(PPGF_DISCLAIMER_TOUCHPOINT, { merge: true });\n };\n\n setShouldShowAuCrsBanner = () => {\n const status = getParameterByName('status'),\n statusCode = getParameterByName('statusCode');\n\n const { auTax: { abortedBanner = '' } = {} } = auCrsMessages;\n\n if (isCrsAborted(status, statusCode)) {\n this.setState({\n showAuCrsBanner: true,\n auCrsBannerMsg: abortedBanner,\n });\n FPT.trackAuCrs(status, statusCode);\n }\n };\n\n render() {\n const recurringStatus = AppStore.getDonationRecurring() === 'checked';\n\n if (templateData.isGiftaiditEnabled) {\n this.updateGiftAidComponent(this.state);\n }\n\n return (\n <>\n \n \n {payCreditOrDebit}\n \n
\n \n \n
\n \n \n
\n )}\n \n {this.state.isProgressive && (\n