@adyen/adyen-web 6.39.0 → 6.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/dist/cjs/adyen.css +91 -91
  2. package/dist/cjs/adyen.css.map +1 -1
  3. package/dist/cjs/index.cjs +2 -2
  4. package/dist/cjs/index.cjs.map +1 -1
  5. package/dist/cjs/index.d.cts +9 -1
  6. package/dist/es/adyen.css +91 -91
  7. package/dist/es/adyen.css.map +1 -1
  8. package/dist/es/components/ANCV/components/ANCVInput.js +1 -1
  9. package/dist/es/components/ANCV/components/ANCVInput.js.map +1 -1
  10. package/dist/es/components/Ach/components/AchComponent.js +1 -1
  11. package/dist/es/components/Ach/components/AchComponent.js.map +1 -1
  12. package/dist/es/components/Affirm/Affirm.js +1 -1
  13. package/dist/es/components/Affirm/Affirm.js.map +1 -1
  14. package/dist/es/components/Affirm/config.js +1 -1
  15. package/dist/es/components/Affirm/config.js.map +1 -1
  16. package/dist/es/components/BacsDD/components/BacsInput.js +1 -1
  17. package/dist/es/components/BacsDD/components/BacsInput.js.map +1 -1
  18. package/dist/es/components/BankTransfer/components/BankTransferInput/BankTransferInput.js +1 -1
  19. package/dist/es/components/BankTransfer/components/BankTransferInput/BankTransferInput.js.map +1 -1
  20. package/dist/es/components/Card/components/CardInput/components/StoredCardFields.js +1 -1
  21. package/dist/es/components/Card/components/CardInput/components/StoredCardFields.js.map +1 -1
  22. package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js +1 -1
  23. package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js.map +1 -1
  24. package/dist/es/components/PayTo/components/BSBInput.js +1 -1
  25. package/dist/es/components/PayTo/components/BSBInput.js.map +1 -1
  26. package/dist/es/components/PayTo/components/PayIDInput.js +1 -1
  27. package/dist/es/components/PayTo/components/PayIDInput.js.map +1 -1
  28. package/dist/es/components/PayTo/components/PayToNameFields.js +1 -1
  29. package/dist/es/components/PayTo/components/PayToNameFields.js.map +1 -1
  30. package/dist/es/components/Pix/components/PixQRDetails.js +1 -1
  31. package/dist/es/components/Pix/components/PixQRDetails.js.map +1 -1
  32. package/dist/es/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.js +1 -1
  33. package/dist/es/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.js.map +1 -1
  34. package/dist/es/components/internal/Address/Address.js +1 -1
  35. package/dist/es/components/internal/Address/Address.js.map +1 -1
  36. package/dist/es/components/internal/Address/components/FieldContainer.js +1 -1
  37. package/dist/es/components/internal/Address/components/FieldContainer.js.map +1 -1
  38. package/dist/es/components/internal/Address/constants.js +1 -1
  39. package/dist/es/components/internal/Address/constants.js.map +1 -1
  40. package/dist/es/components/internal/Address/utils.js +1 -1
  41. package/dist/es/components/internal/Address/utils.js.map +1 -1
  42. package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js +1 -1
  43. package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js.map +1 -1
  44. package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js +1 -1
  45. package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js.map +1 -1
  46. package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js +1 -1
  47. package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js.map +1 -1
  48. package/dist/es/components/internal/CompanyDetails/CompanyDetails.js +1 -1
  49. package/dist/es/components/internal/CompanyDetails/CompanyDetails.js.map +1 -1
  50. package/dist/es/components/internal/FormFields/InputBase.js +1 -1
  51. package/dist/es/components/internal/FormFields/InputBase.js.map +1 -1
  52. package/dist/es/components/internal/FormFields/RadioGroup/RadioGroup.js +1 -1
  53. package/dist/es/components/internal/FormFields/RadioGroup/RadioGroup.js.map +1 -1
  54. package/dist/es/components/internal/IbanInput/IbanInput.js +1 -1
  55. package/dist/es/components/internal/IbanInput/IbanInput.js.map +1 -1
  56. package/dist/es/components/internal/PersonalDetails/PersonalDetails.js +1 -1
  57. package/dist/es/components/internal/PersonalDetails/PersonalDetails.js.map +1 -1
  58. package/dist/es/components/internal/PhoneInput/PhoneInputFields.js +1 -1
  59. package/dist/es/components/internal/PhoneInput/PhoneInputFields.js.map +1 -1
  60. package/dist/es/components/internal/SendCopyToEmail/SendCopyToEmail.js +1 -1
  61. package/dist/es/components/internal/SendCopyToEmail/SendCopyToEmail.js.map +1 -1
  62. package/dist/es/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js +1 -1
  63. package/dist/es/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js.map +1 -1
  64. package/dist/es/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.js +1 -1
  65. package/dist/es/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.js.map +1 -1
  66. package/dist/es/core/config.js +1 -1
  67. package/dist/es/external/preact/dist/preact.js +1 -1
  68. package/dist/es/external/preact/dist/preact.js.map +1 -1
  69. package/dist/es/index.d.ts +9 -1
  70. package/dist/es-legacy/adyen.css +91 -91
  71. package/dist/es-legacy/adyen.css.map +1 -1
  72. package/dist/es-legacy/components/ANCV/components/ANCVInput.js +1 -1
  73. package/dist/es-legacy/components/ANCV/components/ANCVInput.js.map +1 -1
  74. package/dist/es-legacy/components/Ach/components/AchComponent.js +1 -1
  75. package/dist/es-legacy/components/Ach/components/AchComponent.js.map +1 -1
  76. package/dist/es-legacy/components/Affirm/Affirm.js +1 -1
  77. package/dist/es-legacy/components/Affirm/Affirm.js.map +1 -1
  78. package/dist/es-legacy/components/Affirm/config.js +1 -1
  79. package/dist/es-legacy/components/Affirm/config.js.map +1 -1
  80. package/dist/es-legacy/components/BacsDD/components/BacsInput.js +1 -1
  81. package/dist/es-legacy/components/BacsDD/components/BacsInput.js.map +1 -1
  82. package/dist/es-legacy/components/BankTransfer/components/BankTransferInput/BankTransferInput.js +1 -1
  83. package/dist/es-legacy/components/BankTransfer/components/BankTransferInput/BankTransferInput.js.map +1 -1
  84. package/dist/es-legacy/components/Card/components/CardInput/components/StoredCardFields.js +1 -1
  85. package/dist/es-legacy/components/Card/components/CardInput/components/StoredCardFields.js.map +1 -1
  86. package/dist/es-legacy/components/Dragonpay/components/DragonpayInput/DragonpayInput.js +1 -1
  87. package/dist/es-legacy/components/Dragonpay/components/DragonpayInput/DragonpayInput.js.map +1 -1
  88. package/dist/es-legacy/components/PayTo/components/BSBInput.js +1 -1
  89. package/dist/es-legacy/components/PayTo/components/BSBInput.js.map +1 -1
  90. package/dist/es-legacy/components/PayTo/components/PayIDInput.js +1 -1
  91. package/dist/es-legacy/components/PayTo/components/PayIDInput.js.map +1 -1
  92. package/dist/es-legacy/components/PayTo/components/PayToNameFields.js +1 -1
  93. package/dist/es-legacy/components/PayTo/components/PayToNameFields.js.map +1 -1
  94. package/dist/es-legacy/components/Pix/components/PixQRDetails.js +1 -1
  95. package/dist/es-legacy/components/Pix/components/PixQRDetails.js.map +1 -1
  96. package/dist/es-legacy/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.js +1 -1
  97. package/dist/es-legacy/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.js.map +1 -1
  98. package/dist/es-legacy/components/internal/Address/Address.js +1 -1
  99. package/dist/es-legacy/components/internal/Address/Address.js.map +1 -1
  100. package/dist/es-legacy/components/internal/Address/components/FieldContainer.js +1 -1
  101. package/dist/es-legacy/components/internal/Address/components/FieldContainer.js.map +1 -1
  102. package/dist/es-legacy/components/internal/Address/constants.js +1 -1
  103. package/dist/es-legacy/components/internal/Address/constants.js.map +1 -1
  104. package/dist/es-legacy/components/internal/Address/utils.js +1 -1
  105. package/dist/es-legacy/components/internal/Address/utils.js.map +1 -1
  106. package/dist/es-legacy/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js +1 -1
  107. package/dist/es-legacy/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js.map +1 -1
  108. package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js +1 -1
  109. package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js.map +1 -1
  110. package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js +1 -1
  111. package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js.map +1 -1
  112. package/dist/es-legacy/components/internal/CompanyDetails/CompanyDetails.js +1 -1
  113. package/dist/es-legacy/components/internal/CompanyDetails/CompanyDetails.js.map +1 -1
  114. package/dist/es-legacy/components/internal/FormFields/InputBase.js +1 -1
  115. package/dist/es-legacy/components/internal/FormFields/InputBase.js.map +1 -1
  116. package/dist/es-legacy/components/internal/FormFields/RadioGroup/RadioGroup.js +1 -1
  117. package/dist/es-legacy/components/internal/FormFields/RadioGroup/RadioGroup.js.map +1 -1
  118. package/dist/es-legacy/components/internal/IbanInput/IbanInput.js +1 -1
  119. package/dist/es-legacy/components/internal/IbanInput/IbanInput.js.map +1 -1
  120. package/dist/es-legacy/components/internal/PersonalDetails/PersonalDetails.js +1 -1
  121. package/dist/es-legacy/components/internal/PersonalDetails/PersonalDetails.js.map +1 -1
  122. package/dist/es-legacy/components/internal/PhoneInput/PhoneInputFields.js +1 -1
  123. package/dist/es-legacy/components/internal/PhoneInput/PhoneInputFields.js.map +1 -1
  124. package/dist/es-legacy/components/internal/SendCopyToEmail/SendCopyToEmail.js +1 -1
  125. package/dist/es-legacy/components/internal/SendCopyToEmail/SendCopyToEmail.js.map +1 -1
  126. package/dist/es-legacy/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js +1 -1
  127. package/dist/es-legacy/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js.map +1 -1
  128. package/dist/es-legacy/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.js +1 -1
  129. package/dist/es-legacy/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.js.map +1 -1
  130. package/dist/es-legacy/core/config.js +1 -1
  131. package/dist/es-legacy/external/preact/dist/preact.js +1 -1
  132. package/dist/es-legacy/external/preact/dist/preact.js.map +1 -1
  133. package/package.json +9 -9
  134. package/styles/adyen.css +91 -91
@@ -1 +1 @@
1
- {"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport { useFormWithA11y } from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n email: string;\n phone: string;\n abn: string;\n orgid: string;\n firstName: string;\n lastName: string;\n phoneNumber?: string;\n phonePrefix?: string;\n selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: PayIdFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n id?: string;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n [PayToIdentifierEnum.email]: ['email'],\n [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n [PayToIdentifierEnum.abn]: ['abn'],\n [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<PayIDInputProps>) {\n const { i18n } = useCoreContext();\n\n const form = useFormWithA11y<PayIdFormData>({\n schema: BASE_SCHEMA,\n defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n rules: payIdValidationRules,\n formatters: phoneFormatters,\n formHolder: `#${id}`\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n // handle the changes of identifier, each identifier gets its own schema\n useEffect(() => {\n // get the correct schema for each identifier and merge it with the base\n setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n }, [data.selectedIdentifier]);\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset id={id} classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n <IdentifierSelector\n classNameModifiers={['col-40']}\n onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n selectedIdentifier={data.selectedIdentifier}\n />\n {data.selectedIdentifier === PayToIdentifierEnum.phone && <PayToPhone form={form} />}\n\n {/* TODO probably worth refactoring this into either re-usable components or builder */}\n {data.selectedIdentifier === PayToIdentifierEnum.email && (\n <Field\n label={i18n.get('shopperEmail')}\n classNameModifiers={['col-60', 'email']}\n errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n dir={'ltr'}\n name={'email'}\n i18n={i18n}\n errorLive={true}\n >\n <InputEmail\n name={'email'}\n value={data.email}\n onInput={handleChangeFor('email', 'input')}\n onBlur={handleChangeFor('email', 'blur')}\n placeholder={placeholders?.email}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n <Field\n label={i18n.get('ABN')}\n classNameModifiers={['col-60', 'abn']}\n errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n name={'ABN'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'abn'}\n value={data.abn}\n onInput={handleChangeFor('abn', 'input')}\n onBlur={handleChangeFor('abn', 'blur')}\n placeholder={placeholders?.abn}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n <Field\n label={i18n.get('payto.payid.label.orgid')}\n classNameModifiers={['col-60', 'orgid']}\n errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n name={'orgid'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'orgid'}\n value={data.orgid}\n onInput={handleChangeFor('orgid', 'input')}\n onBlur={handleChangeFor('orgid', 'blur')}\n placeholder={placeholders?.orgid}\n required={true}\n />\n </Field>\n )}\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useFormWithA11y","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","formHolder","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","errorLive","InputEmail","value","onInput","onBlur","placeholder","required","InputText","PayToNameFields"],"mappings":"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"}
1
+ {"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport { useFormWithA11y } from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n email: string;\n phone: string;\n abn: string;\n orgid: string;\n firstName: string;\n lastName: string;\n phoneNumber?: string;\n phonePrefix?: string;\n selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: PayIdFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n id?: string;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n [PayToIdentifierEnum.email]: ['email'],\n [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n [PayToIdentifierEnum.abn]: ['abn'],\n [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<PayIDInputProps>) {\n const { i18n } = useCoreContext();\n\n const form = useFormWithA11y<PayIdFormData>({\n schema: BASE_SCHEMA,\n defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n rules: payIdValidationRules,\n formatters: phoneFormatters,\n formHolder: `#${id}`\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n // handle the changes of identifier, each identifier gets its own schema\n useEffect(() => {\n // get the correct schema for each identifier and merge it with the base\n setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n }, [data.selectedIdentifier]);\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset id={id} classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n <IdentifierSelector\n classNameModifiers={['col-40']}\n onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n selectedIdentifier={data.selectedIdentifier}\n />\n {data.selectedIdentifier === PayToIdentifierEnum.phone && <PayToPhone form={form} />}\n\n {/* TODO probably worth refactoring this into either re-usable components or builder */}\n {data.selectedIdentifier === PayToIdentifierEnum.email && (\n <Field\n label={i18n.get('shopperEmail')}\n classNameModifiers={['col-60', 'email']}\n errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n dir={'ltr'}\n name={'email'}\n i18n={i18n}\n errorLive={true}\n >\n <InputEmail\n name={'email'}\n value={data.email}\n onInput={handleChangeFor('email', 'input')}\n onBlur={handleChangeFor('email', 'blur')}\n placeholder={placeholders?.email}\n required={true}\n autocomplete={'email'}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n <Field\n label={i18n.get('ABN')}\n classNameModifiers={['col-60', 'abn']}\n errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n name={'ABN'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'abn'}\n value={data.abn}\n onInput={handleChangeFor('abn', 'input')}\n onBlur={handleChangeFor('abn', 'blur')}\n placeholder={placeholders?.abn}\n required={true}\n autocomplete={undefined}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n <Field\n label={i18n.get('payto.payid.label.orgid')}\n classNameModifiers={['col-60', 'orgid']}\n errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n name={'orgid'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'orgid'}\n value={data.orgid}\n onInput={handleChangeFor('orgid', 'input')}\n onBlur={handleChangeFor('orgid', 'blur')}\n placeholder={placeholders?.orgid}\n required={true}\n autocomplete={undefined}\n />\n </Field>\n )}\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useFormWithA11y","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","formHolder","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","errorLive","InputEmail","value","onInput","onBlur","placeholder","required","autocomplete","InputText","undefined","PayToNameFields"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createElement as e,Fragment as a}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Field/Field.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import t from"../../internal/FormFields/InputText.js";function l({i18n:l,errors:i,data:m,handleChangeFor:o,placeholders:n}){return e(a,null,e(r,{label:l.get("payto.label.firstName"),classNameModifiers:["col-50","firstName"],errorMessage:s(l,i.firstName,l.get("firstName")),name:"firstName",i18n:l,errorLive:!0},e(t,{name:"firstName",value:m.firstName,classNameModifiers:["firstName"],onInput:o("firstName","input"),onBlur:o("firstName","input"),placeholder:n?.firstName,spellcheck:!1,required:!0})),e(r,{label:l.get("payto.label.lastName"),classNameModifiers:["col-50","lastName"],errorMessage:s(l,i.lastName,l.get("lastName")),name:"lastName",i18n:l,errorLive:!0},e(t,{name:"lastName",value:m.lastName,classNameModifiers:["lastName"],onInput:o("lastName","input"),onBlur:o("lastName","blur"),placeholder:n?.lastName,spellcheck:!1,required:!0})))}export{l as default};
1
+ import{createElement as e,Fragment as a}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Field/Field.js";import{getErrorMessage as t}from"../../../utils/getErrorMessage.js";import l from"../../internal/FormFields/InputText.js";function s({i18n:s,errors:m,data:i,handleChangeFor:o,placeholders:n}){return e(a,null,e(r,{label:s.get("payto.label.firstName"),classNameModifiers:["col-50","firstName"],errorMessage:t(s,m.firstName,s.get("firstName")),name:"firstName",i18n:s,errorLive:!0},e(l,{name:"firstName",value:i.firstName,classNameModifiers:["firstName"],onInput:o("firstName","input"),onBlur:o("firstName","input"),placeholder:n?.firstName,spellcheck:!1,required:!0,autocomplete:"given-name"})),e(r,{label:s.get("payto.label.lastName"),classNameModifiers:["col-50","lastName"],errorMessage:t(s,m.lastName,s.get("lastName")),name:"lastName",i18n:s,errorLive:!0},e(l,{name:"lastName",value:i.lastName,classNameModifiers:["lastName"],onInput:o("lastName","input"),onBlur:o("lastName","blur"),placeholder:n?.lastName,spellcheck:!1,required:!0,autocomplete:"family-name"})))}export{s as default};
2
2
  //# sourceMappingURL=PayToNameFields.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PayToNameFields.js","sources":["../../../../../src/components/PayTo/components/PayToNameFields.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport InputText from '../../internal/FormFields/InputText';\nimport Language from '../../../language';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface PayToNameFieldsProps {\n i18n: Language;\n errors: {\n [key: string]: ValidationRuleResult;\n };\n data: {\n firstName: string;\n lastName: string;\n };\n handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => void;\n placeholders: {\n firstName: string;\n lastName: string;\n };\n}\n\nexport default function PayToNameFields({ i18n, errors, data, handleChangeFor, placeholders }: Readonly<PayToNameFieldsProps>) {\n return (\n <Fragment>\n <Field\n label={i18n.get('payto.label.firstName')}\n classNameModifiers={['col-50', 'firstName']}\n errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n name={'firstName'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'firstName'}\n value={data.firstName}\n classNameModifiers={['firstName']}\n onInput={handleChangeFor('firstName', 'input')}\n onBlur={handleChangeFor('firstName', 'input')}\n placeholder={placeholders?.firstName}\n spellcheck={false}\n required={true}\n />\n </Field>\n <Field\n label={i18n.get('payto.label.lastName')}\n classNameModifiers={['col-50', 'lastName']}\n errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n name={'lastName'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'lastName'}\n value={data.lastName}\n classNameModifiers={['lastName']}\n onInput={handleChangeFor('lastName', 'input')}\n onBlur={handleChangeFor('lastName', 'blur')}\n placeholder={placeholders?.lastName}\n spellcheck={false}\n required={true}\n />\n </Field>\n </Fragment>\n );\n}\n"],"names":["PayToNameFields","i18n","errors","data","handleChangeFor","placeholders","h","Fragment","Field","label","get","classNameModifiers","errorMessage","getErrorMessage","firstName","name","errorLive","InputText","value","onInput","onBlur","placeholder","spellcheck","required","lastName"],"mappings":"wQAwBe,SAASA,GAAgBC,KAAEA,EAAIC,OAAEA,EAAMC,KAAEA,EAAIC,gBAAEA,EAAeC,aAAEA,IAC3E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,yBAChBC,mBAAoB,CAAC,SAAU,aAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOY,UAAWb,EAAKS,IAAI,cAC/DK,KAAM,YACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,YACNG,MAAOf,EAAKW,UACZH,mBAAoB,CAAC,aACrBQ,QAASf,EAAgB,YAAa,SACtCgB,OAAQhB,EAAgB,YAAa,SACrCiB,YAAahB,GAAcS,UAC3BQ,YAAY,EACZC,UAAU,KAGlBjB,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,wBAChBC,mBAAoB,CAAC,SAAU,YAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOsB,SAAUvB,EAAKS,IAAI,aAC9DK,KAAM,WACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,WACNG,MAAOf,EAAKqB,SACZb,mBAAoB,CAAC,YACrBQ,QAASf,EAAgB,WAAY,SACrCgB,OAAQhB,EAAgB,WAAY,QACpCiB,YAAahB,GAAcmB,SAC3BF,YAAY,EACZC,UAAU,KAK9B"}
1
+ {"version":3,"file":"PayToNameFields.js","sources":["../../../../../src/components/PayTo/components/PayToNameFields.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport InputText from '../../internal/FormFields/InputText';\nimport Language from '../../../language';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface PayToNameFieldsProps {\n i18n: Language;\n errors: {\n [key: string]: ValidationRuleResult;\n };\n data: {\n firstName: string;\n lastName: string;\n };\n handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => void;\n placeholders: {\n firstName: string;\n lastName: string;\n };\n}\n\nexport default function PayToNameFields({ i18n, errors, data, handleChangeFor, placeholders }: Readonly<PayToNameFieldsProps>) {\n return (\n <Fragment>\n <Field\n label={i18n.get('payto.label.firstName')}\n classNameModifiers={['col-50', 'firstName']}\n errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n name={'firstName'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'firstName'}\n value={data.firstName}\n classNameModifiers={['firstName']}\n onInput={handleChangeFor('firstName', 'input')}\n onBlur={handleChangeFor('firstName', 'input')}\n placeholder={placeholders?.firstName}\n spellcheck={false}\n required={true}\n autocomplete={'given-name'}\n />\n </Field>\n <Field\n label={i18n.get('payto.label.lastName')}\n classNameModifiers={['col-50', 'lastName']}\n errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n name={'lastName'}\n i18n={i18n}\n errorLive={true}\n >\n <InputText\n name={'lastName'}\n value={data.lastName}\n classNameModifiers={['lastName']}\n onInput={handleChangeFor('lastName', 'input')}\n onBlur={handleChangeFor('lastName', 'blur')}\n placeholder={placeholders?.lastName}\n spellcheck={false}\n required={true}\n autocomplete={'family-name'}\n />\n </Field>\n </Fragment>\n );\n}\n"],"names":["PayToNameFields","i18n","errors","data","handleChangeFor","placeholders","h","Fragment","Field","label","get","classNameModifiers","errorMessage","getErrorMessage","firstName","name","errorLive","InputText","value","onInput","onBlur","placeholder","spellcheck","required","autocomplete","lastName"],"mappings":"wQAwBe,SAASA,GAAgBC,KAAEA,EAAIC,OAAEA,EAAMC,KAAEA,EAAIC,gBAAEA,EAAeC,aAAEA,IAC3E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,yBAChBC,mBAAoB,CAAC,SAAU,aAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOY,UAAWb,EAAKS,IAAI,cAC/DK,KAAM,YACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,YACNG,MAAOf,EAAKW,UACZH,mBAAoB,CAAC,aACrBQ,QAASf,EAAgB,YAAa,SACtCgB,OAAQhB,EAAgB,YAAa,SACrCiB,YAAahB,GAAcS,UAC3BQ,YAAY,EACZC,UAAU,EACVC,aAAc,gBAGtBlB,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,wBAChBC,mBAAoB,CAAC,SAAU,YAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOuB,SAAUxB,EAAKS,IAAI,aAC9DK,KAAM,WACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,WACNG,MAAOf,EAAKsB,SACZd,mBAAoB,CAAC,YACrBQ,QAASf,EAAgB,WAAY,SACrCgB,OAAQhB,EAAgB,WAAY,QACpCiB,YAAahB,GAAcoB,SAC3BH,YAAY,EACZC,UAAU,EACVC,aAAc,iBAKlC"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../external/preact/dist/preact.js";import"../../internal/QRLoader/QRLoader.js";import{QRImage as o}from"../../internal/QRLoader/components/QRImage.js";import{QRProgressbar as r}from"../../internal/QRLoader/components/QRProgressbar.js";import{QRCountdown as a}from"../../internal/QRLoader/components/QRCountdown.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import{QRCodeCopyButton as n}from"../../internal/QRLoader/components/QRCodeCopyButton.js";import{useQRLoaderDetails as i}from"../../internal/QRLoader/QRLoaderDetailsProvider.js";import d from"../../internal/FormFields/Field/Field.js";import l from"../../internal/FormFields/InputText.js";import{TxVariants as m}from"../../tx-variants.js";const p=()=>{const{i18n:p}=t(),{qrCodeData:s,qrCodeImage:c,percentage:_,timeToPay:x,onTick:L,countdownTime:Q,onQRCodeLoad:R,onTimeUp:u,handleCopy:y}=i();return e("div",{className:"adyen-checkout__qr-loader--pix__qr_details"},e(o,{type:m.pix,src:c,onLoad:R}),e("div",{className:"adyen-checkout__qr-loader--pix__qr_details__timer"},e(r,{percentage:_}),e(a,{countdownTime:Q,timeToPay:x,onTick:L,onCompleted:u})),e(d,{name:"pix-code",useLabelElement:!1},e(l,{className:"adyen-checkout__qr-loader--pix__qr_details__code",value:s,readonly:!0,"aria-label":p.get("pix.code.label")})),e(n,{text:s,copyLabel:p.get("pix.code.copy.label"),copiedLabel:p.get("pix.code.copied.label"),handleCopy:y}))};export{p as default};
1
+ import{createElement as e}from"../../../external/preact/dist/preact.js";import"../../internal/QRLoader/QRLoader.js";import{QRImage as o}from"../../internal/QRLoader/components/QRImage.js";import{QRProgressbar as r}from"../../internal/QRLoader/components/QRProgressbar.js";import{QRCountdown as t}from"../../internal/QRLoader/components/QRCountdown.js";import{useCoreContext as a}from"../../../core/Context/CoreProvider.js";import{QRCodeCopyButton as n}from"../../internal/QRLoader/components/QRCodeCopyButton.js";import{useQRLoaderDetails as i}from"../../internal/QRLoader/QRLoaderDetailsProvider.js";import d from"../../internal/FormFields/Field/Field.js";import l from"../../internal/FormFields/InputText.js";import{TxVariants as m}from"../../tx-variants.js";const p=()=>{const{i18n:p}=a(),{qrCodeData:s,qrCodeImage:c,percentage:_,timeToPay:x,onTick:u,countdownTime:L,onQRCodeLoad:Q,onTimeUp:R,handleCopy:y}=i();return e("div",{className:"adyen-checkout__qr-loader--pix__qr_details"},e(o,{type:m.pix,src:c,onLoad:Q}),e("div",{className:"adyen-checkout__qr-loader--pix__qr_details__timer"},e(r,{percentage:_}),e(t,{countdownTime:L,timeToPay:x,onTick:u,onCompleted:R})),e(d,{name:"pix-code",useLabelElement:!1},e(l,{className:"adyen-checkout__qr-loader--pix__qr_details__code",value:s,readonly:!0,"aria-label":p.get("pix.code.label"),autocomplete:void 0})),e(n,{text:s,copyLabel:p.get("pix.code.copy.label"),copiedLabel:p.get("pix.code.copied.label"),handleCopy:y}))};export{p as default};
2
2
  //# sourceMappingURL=PixQRDetails.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PixQRDetails.js","sources":["../../../../../src/components/Pix/components/PixQRDetails.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { QRImage, QRProgressbar, QRCountdown, QRCodeCopyButton, useQRLoaderDetails } from '../../internal/QRLoader';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { TxVariants } from '../../tx-variants';\n\nconst PixQRDetails = () => {\n const { i18n } = useCoreContext();\n const { qrCodeData, qrCodeImage, percentage, timeToPay, onTick, countdownTime, onQRCodeLoad, onTimeUp, handleCopy } = useQRLoaderDetails();\n\n return (\n <div className=\"adyen-checkout__qr-loader--pix__qr_details\">\n <QRImage type={TxVariants.pix} src={qrCodeImage} onLoad={onQRCodeLoad} />\n <div className=\"adyen-checkout__qr-loader--pix__qr_details__timer\">\n <QRProgressbar percentage={percentage} />\n <QRCountdown countdownTime={countdownTime} timeToPay={timeToPay} onTick={onTick} onCompleted={onTimeUp} />\n </div>\n <Field name=\"pix-code\" useLabelElement={false}>\n <InputText\n className=\"adyen-checkout__qr-loader--pix__qr_details__code\"\n value={qrCodeData}\n readonly\n aria-label={i18n.get('pix.code.label')}\n />\n </Field>\n <QRCodeCopyButton\n text={qrCodeData}\n copyLabel={i18n.get('pix.code.copy.label')}\n copiedLabel={i18n.get('pix.code.copied.label')}\n handleCopy={handleCopy}\n />\n </div>\n );\n};\n\nexport default PixQRDetails;\n"],"names":["PixQRDetails","i18n","useCoreContext","qrCodeData","qrCodeImage","percentage","timeToPay","onTick","countdownTime","onQRCodeLoad","onTimeUp","handleCopy","useQRLoaderDetails","h","div","className","QRImage","type","TxVariants","pix","src","onLoad","QRProgressbar","QRCountdown","onCompleted","Field","name","useLabelElement","InputText","value","readonly","aria-label","get","QRCodeCopyButton","text","copyLabel","copiedLabel"],"mappings":"yvBAOA,MAAMA,EAAe,KACjB,MAAMC,KAAEA,GAASC,KACXC,WAAEA,EAAUC,YAAEA,EAAWC,WAAEA,EAAUC,UAAEA,EAASC,OAAEA,EAAMC,cAAEA,EAAaC,aAAEA,EAAYC,SAAEA,EAAQC,WAAEA,GAAeC,IAEtH,OACIC,EAACC,MAAAA,CAAIC,UAAU,8CACXF,EAACG,EAAAA,CAAQC,KAAMC,EAAWC,IAAKC,IAAKhB,EAAaiB,OAAQZ,IACzDI,EAACC,MAAAA,CAAIC,UAAU,qDACXF,EAACS,EAAAA,CAAcjB,WAAYA,IAC3BQ,EAACU,EAAAA,CAAYf,cAAeA,EAAeF,UAAWA,EAAWC,OAAQA,EAAQiB,YAAad,KAElGG,EAACY,EAAAA,CAAMC,KAAK,WAAWC,iBAAiB,GACpCd,EAACe,EAAAA,CACGb,UAAU,mDACVc,MAAO1B,EACP2B,UAAAA,EACAC,aAAY9B,EAAK+B,IAAI,qBAG7BnB,EAACoB,EAAAA,CACGC,KAAM/B,EACNgC,UAAWlC,EAAK+B,IAAI,uBACpBI,YAAanC,EAAK+B,IAAI,yBACtBrB,WAAYA"}
1
+ {"version":3,"file":"PixQRDetails.js","sources":["../../../../../src/components/Pix/components/PixQRDetails.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { QRImage, QRProgressbar, QRCountdown, QRCodeCopyButton, useQRLoaderDetails } from '../../internal/QRLoader';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { TxVariants } from '../../tx-variants';\n\nconst PixQRDetails = () => {\n const { i18n } = useCoreContext();\n const { qrCodeData, qrCodeImage, percentage, timeToPay, onTick, countdownTime, onQRCodeLoad, onTimeUp, handleCopy } = useQRLoaderDetails();\n\n return (\n <div className=\"adyen-checkout__qr-loader--pix__qr_details\">\n <QRImage type={TxVariants.pix} src={qrCodeImage} onLoad={onQRCodeLoad} />\n <div className=\"adyen-checkout__qr-loader--pix__qr_details__timer\">\n <QRProgressbar percentage={percentage} />\n <QRCountdown countdownTime={countdownTime} timeToPay={timeToPay} onTick={onTick} onCompleted={onTimeUp} />\n </div>\n <Field name=\"pix-code\" useLabelElement={false}>\n <InputText\n className=\"adyen-checkout__qr-loader--pix__qr_details__code\"\n value={qrCodeData}\n readonly\n aria-label={i18n.get('pix.code.label')}\n autocomplete={undefined}\n />\n </Field>\n <QRCodeCopyButton\n text={qrCodeData}\n copyLabel={i18n.get('pix.code.copy.label')}\n copiedLabel={i18n.get('pix.code.copied.label')}\n handleCopy={handleCopy}\n />\n </div>\n );\n};\n\nexport default PixQRDetails;\n"],"names":["PixQRDetails","i18n","useCoreContext","qrCodeData","qrCodeImage","percentage","timeToPay","onTick","countdownTime","onQRCodeLoad","onTimeUp","handleCopy","useQRLoaderDetails","h","div","className","QRImage","type","TxVariants","pix","src","onLoad","QRProgressbar","QRCountdown","onCompleted","Field","name","useLabelElement","InputText","value","readonly","aria-label","get","autocomplete","undefined","QRCodeCopyButton","text","copyLabel","copiedLabel"],"mappings":"yvBAOA,MAAMA,EAAe,KACjB,MAAMC,KAAEA,GAASC,KACXC,WAAEA,EAAUC,YAAEA,EAAWC,WAAEA,EAAUC,UAAEA,EAASC,OAAEA,EAAMC,cAAEA,EAAaC,aAAEA,EAAYC,SAAEA,EAAQC,WAAEA,GAAeC,IAEtH,OACIC,EAACC,MAAAA,CAAIC,UAAU,8CACXF,EAACG,EAAAA,CAAQC,KAAMC,EAAWC,IAAKC,IAAKhB,EAAaiB,OAAQZ,IACzDI,EAACC,MAAAA,CAAIC,UAAU,qDACXF,EAACS,EAAAA,CAAcjB,WAAYA,IAC3BQ,EAACU,EAAAA,CAAYf,cAAeA,EAAeF,UAAWA,EAAWC,OAAQA,EAAQiB,YAAad,KAElGG,EAACY,EAAAA,CAAMC,KAAK,WAAWC,iBAAiB,GACpCd,EAACe,EAAAA,CACGb,UAAU,mDACVc,MAAO1B,EACP2B,UAAAA,EACAC,aAAY9B,EAAK+B,IAAI,kBACrBC,kBAAcC,KAGtBrB,EAACsB,EAAAA,CACGC,KAAMjC,EACNkC,UAAWpC,EAAK+B,IAAI,uBACpBM,YAAarC,EAAK+B,IAAI,yBACtBrB,WAAYA"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useRef as t,useEffect as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../internal/FormInstruction/FormInstruction.js";import i from"../../../utils/useForm/useForm.js";import"../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"../../internal/FormFields/Field/Field.js";import u from"../../internal/FormFields/InputText.js";import{preAuthorizedDebitCanadaValidationRules as d,preAuthorizedDebitCanadaFormatters as m}from"./validate.js";import c from"../../internal/StoreDetails/StoreDetails.js";import b from"../../../core/Context/useImage.js";import{SettlementInfo as p}from"./SettlementInfo.js";function k({onChange:k,payButton:f,showPayButton:g,placeholders:N,setComponentRef:x,enableStoreDetails:h,showContextualElement:C=!0}){const I=b(),{i18n:F}=o(),[w,j]=a("ready"),{handleChangeFor:A,triggerValidation:M,data:L,errors:v,valid:S,isValid:V}=i({schema:["ownerName","bankAccountNumber","bankCode","bankLocationId"],rules:d,formatters:m}),[T,y]=a(!1),B="loading"===w,E=t({setStatus:j,showValidation:()=>{M()}});return n(()=>{x(E.current)},[x,E.current]),n(()=>{k({data:L,valid:S,errors:v,isValid:V,storePaymentMethod:T})},[k,L,S,v,V,T]),e("div",{className:"adyen-checkout__eftpad-canada"},e(l,null),e(r,null,e(s,{label:F.get("eftpad-canada.input.accountHolderName.label"),errorMessage:!!v.ownerName&&F.get(v.ownerName.errorMessage),isValid:!!S.ownerName,name:"ownerName"},e(u,{disabled:B,name:"ownerName",placeholder:N?.ownerName,value:L.ownerName,onInput:A("ownerName","input"),onBlur:A("ownerName","blur"),required:!0,"data-testid":"owner-name"})),e(s,{label:F.get("eftpad-canada.input.accountNumber.label"),errorMessage:!!v.bankAccountNumber&&F.get(v.bankAccountNumber.errorMessage),name:"bankAccountNumber",isValid:!!S.bankAccountNumber,showContextualElement:C,contextualText:F.get("eftpad-canada.input.accountNumber.contextualText")},e(u,{disabled:B,name:"bankAccountNumber",placeholder:N?.bankAccountNumber,value:L.bankAccountNumber,onInput:A("bankAccountNumber","input"),onBlur:A("bankAccountNumber","blur"),required:!0,maxlength:12})),e(s,{label:F.get("eftpad-canada.input.institutionNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankCode&&F.get(v.bankCode.errorMessage),isValid:!!S.bankCode,name:"bankCode",showContextualElement:C,contextualText:F.get("eftpad-canada.input.institutionNumber.contextualText")},e(u,{disabled:B,name:"bankCode",placeholder:N?.bankCode,value:L.bankCode,onInput:A("bankCode","input"),onBlur:A("bankCode","blur"),required:!0,maxlength:3})),e(s,{label:F.get("eftpad-canada.input.transitNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankLocationId&&F.get(v.bankLocationId.errorMessage),name:"bankLocationId",isValid:!!S.bankLocationId,showContextualElement:C,contextualText:F.get("eftpad-canada.input.transitNumber.contextualText")},e(u,{disabled:B,name:"bankLocationId",placeholder:N?.bankLocationId,value:L.bankLocationId,onInput:A("bankLocationId","input"),onBlur:A("bankLocationId","blur"),required:!0,maxlength:5}))),h&&e(c,{className:"adyen-checkout_eftpad-canada-store-details",disabled:B,onChange:y}),e(p,null),g&&f({status:w,icon:I({imageFolder:"components/"})("bento_lock")}))}export{k as default};
1
+ import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useRef as t,useEffect as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../internal/FormInstruction/FormInstruction.js";import i from"../../../utils/useForm/useForm.js";import"../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"../../internal/FormFields/Field/Field.js";import u from"../../internal/FormFields/InputText.js";import{preAuthorizedDebitCanadaValidationRules as d,preAuthorizedDebitCanadaFormatters as m}from"./validate.js";import c from"../../internal/StoreDetails/StoreDetails.js";import b from"../../../core/Context/useImage.js";import{SettlementInfo as p}from"./SettlementInfo.js";function k({onChange:k,payButton:f,showPayButton:g,placeholders:N,setComponentRef:x,enableStoreDetails:h,showContextualElement:C=!0}){const I=b(),{i18n:F}=o(),[w,j]=a("ready"),{handleChangeFor:v,triggerValidation:A,data:M,errors:L,valid:S,isValid:V}=i({schema:["ownerName","bankAccountNumber","bankCode","bankLocationId"],rules:d,formatters:m}),[T,y]=a(!1),B="loading"===w,E=t({setStatus:j,showValidation:()=>{A()}});return n(()=>{x(E.current)},[x,E.current]),n(()=>{k({data:M,valid:S,errors:L,isValid:V,storePaymentMethod:T})},[k,M,S,L,V,T]),e("div",{className:"adyen-checkout__eftpad-canada"},e(l,null),e(r,null,e(s,{label:F.get("eftpad-canada.input.accountHolderName.label"),errorMessage:!!L.ownerName&&F.get(L.ownerName.errorMessage),isValid:!!S.ownerName,name:"ownerName"},e(u,{disabled:B,name:"ownerName",placeholder:N?.ownerName,value:M.ownerName,onInput:v("ownerName","input"),onBlur:v("ownerName","blur"),required:!0,"data-testid":"owner-name",autocomplete:"name"})),e(s,{label:F.get("eftpad-canada.input.accountNumber.label"),errorMessage:!!L.bankAccountNumber&&F.get(L.bankAccountNumber.errorMessage),name:"bankAccountNumber",isValid:!!S.bankAccountNumber,showContextualElement:C,contextualText:F.get("eftpad-canada.input.accountNumber.contextualText")},e(u,{disabled:B,name:"bankAccountNumber",placeholder:N?.bankAccountNumber,value:M.bankAccountNumber,onInput:v("bankAccountNumber","input"),onBlur:v("bankAccountNumber","blur"),required:!0,maxlength:12,autocomplete:void 0})),e(s,{label:F.get("eftpad-canada.input.institutionNumber.label"),classNameModifiers:["col-50"],errorMessage:!!L.bankCode&&F.get(L.bankCode.errorMessage),isValid:!!S.bankCode,name:"bankCode",showContextualElement:C,contextualText:F.get("eftpad-canada.input.institutionNumber.contextualText")},e(u,{disabled:B,name:"bankCode",placeholder:N?.bankCode,value:M.bankCode,onInput:v("bankCode","input"),onBlur:v("bankCode","blur"),required:!0,maxlength:3,autocomplete:void 0})),e(s,{label:F.get("eftpad-canada.input.transitNumber.label"),classNameModifiers:["col-50"],errorMessage:!!L.bankLocationId&&F.get(L.bankLocationId.errorMessage),name:"bankLocationId",isValid:!!S.bankLocationId,showContextualElement:C,contextualText:F.get("eftpad-canada.input.transitNumber.contextualText")},e(u,{disabled:B,name:"bankLocationId",placeholder:N?.bankLocationId,value:M.bankLocationId,onInput:v("bankLocationId","input"),onBlur:v("bankLocationId","blur"),required:!0,maxlength:5,autocomplete:void 0}))),h&&e(c,{className:"adyen-checkout_eftpad-canada-store-details",disabled:B,onChange:y}),e(p,null),g&&f({status:w,icon:I({imageFolder:"components/"})("bento_lock")}))}export{k as default};
2
2
  //# sourceMappingURL=PreAuthorizedDebitCanadaComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PreAuthorizedDebitCanadaComponent.js","sources":["../../../../../src/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport FormInstruction from '../../internal/FormInstruction';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { preAuthorizedDebitCanadaFormatters, preAuthorizedDebitCanadaValidationRules } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\nimport useImage from '../../../core/Context/useImage';\nimport { SettlementInfo } from './SettlementInfo';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { PreAuthorizedDebitCanadaPlaceholders } from '../types';\n\nimport './PreAuthorizedDebitCanada.scss';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\ninterface PreAuthorizedDebitCanadaForm {\n ownerName: string;\n bankAccountNumber: string;\n bankCode: string;\n bankLocationId: string;\n}\n\ninterface PreAuthorizedDebitCanadaComponentProps {\n onChange({\n data,\n valid,\n errors,\n isValid,\n storePaymentMethod\n }: {\n data: PreAuthorizedDebitCanadaForm;\n valid: { [key: string]: boolean };\n errors: { [key: string]: ValidationRuleResult };\n isValid: boolean;\n storePaymentMethod: boolean;\n }): void;\n payButton: (props: PayButtonProps) => h.JSX.Element;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n showPayButton: boolean;\n enableStoreDetails: boolean;\n showContextualElement?: boolean;\n placeholders?: PreAuthorizedDebitCanadaPlaceholders;\n}\n\nfunction PreAuthorizedDebitCanadaComponent({\n onChange,\n payButton,\n showPayButton,\n placeholders,\n setComponentRef,\n enableStoreDetails,\n showContextualElement = true\n}: Readonly<PreAuthorizedDebitCanadaComponentProps>) {\n const getImage = useImage();\n const { i18n } = useCoreContext();\n const [status, setStatus] = useState('ready');\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<PreAuthorizedDebitCanadaForm>({\n schema: ['ownerName', 'bankAccountNumber', 'bankCode', 'bankLocationId'],\n rules: preAuthorizedDebitCanadaValidationRules,\n formatters: preAuthorizedDebitCanadaFormatters\n });\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n\n const isFormDisabled = status === 'loading';\n\n const componentRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n triggerValidation();\n }\n });\n\n useEffect(() => {\n setComponentRef(componentRef.current);\n }, [setComponentRef, componentRef.current]);\n\n useEffect(() => {\n onChange({ data, valid, errors, isValid, storePaymentMethod });\n }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n return (\n <div className=\"adyen-checkout__eftpad-canada\">\n <FormInstruction />\n\n <Fieldset>\n <Field\n label={i18n.get('eftpad-canada.input.accountHolderName.label')}\n errorMessage={!!errors.ownerName && i18n.get(errors.ownerName.errorMessage)}\n isValid={!!valid.ownerName}\n name={'ownerName'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'ownerName'}\n placeholder={placeholders?.ownerName}\n value={data.ownerName}\n onInput={handleChangeFor('ownerName', 'input')}\n onBlur={handleChangeFor('ownerName', 'blur')}\n required={true}\n data-testid={'owner-name'}\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.accountNumber.label')}\n errorMessage={!!errors.bankAccountNumber && i18n.get(errors.bankAccountNumber.errorMessage)}\n name={'bankAccountNumber'}\n isValid={!!valid.bankAccountNumber}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.accountNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankAccountNumber'}\n placeholder={placeholders?.bankAccountNumber}\n value={data.bankAccountNumber}\n onInput={handleChangeFor('bankAccountNumber', 'input')}\n onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n required={true}\n maxlength={12}\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.institutionNumber.label')}\n classNameModifiers={['col-50']}\n errorMessage={!!errors.bankCode && i18n.get(errors.bankCode.errorMessage)}\n isValid={!!valid.bankCode}\n name={'bankCode'}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.institutionNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankCode'}\n placeholder={placeholders?.bankCode}\n value={data.bankCode}\n onInput={handleChangeFor('bankCode', 'input')}\n onBlur={handleChangeFor('bankCode', 'blur')}\n required={true}\n maxlength={3}\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.transitNumber.label')}\n classNameModifiers={['col-50']}\n errorMessage={!!errors.bankLocationId && i18n.get(errors.bankLocationId.errorMessage)}\n name={'bankLocationId'}\n isValid={!!valid.bankLocationId}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.transitNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankLocationId'}\n placeholder={placeholders?.bankLocationId}\n value={data.bankLocationId}\n onInput={handleChangeFor('bankLocationId', 'input')}\n onBlur={handleChangeFor('bankLocationId', 'blur')}\n required={true}\n maxlength={5}\n />\n </Field>\n </Fieldset>\n\n {enableStoreDetails && (\n <StoreDetails className={'adyen-checkout_eftpad-canada-store-details'} disabled={isFormDisabled} onChange={setStorePaymentMethod} />\n )}\n\n <SettlementInfo />\n\n {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })('bento_lock') })}\n </div>\n );\n}\n\nexport default PreAuthorizedDebitCanadaComponent;\n"],"names":["PreAuthorizedDebitCanadaComponent","onChange","payButton","showPayButton","placeholders","setComponentRef","enableStoreDetails","showContextualElement","getImage","useImage","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","data","errors","valid","isValid","useForm","schema","rules","preAuthorizedDebitCanadaValidationRules","formatters","preAuthorizedDebitCanadaFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","componentRef","useRef","showValidation","useEffect","current","h","div","className","FormInstruction","Fieldset","Field","label","get","errorMessage","ownerName","name","InputText","disabled","placeholder","value","onInput","onBlur","required","data-testid","bankAccountNumber","contextualText","maxlength","classNameModifiers","bankCode","bankLocationId","StoreDetails","SettlementInfo","icon","imageFolder"],"mappings":"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"}
1
+ {"version":3,"file":"PreAuthorizedDebitCanadaComponent.js","sources":["../../../../../src/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport FormInstruction from '../../internal/FormInstruction';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { preAuthorizedDebitCanadaFormatters, preAuthorizedDebitCanadaValidationRules } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\nimport useImage from '../../../core/Context/useImage';\nimport { SettlementInfo } from './SettlementInfo';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { PreAuthorizedDebitCanadaPlaceholders } from '../types';\n\nimport './PreAuthorizedDebitCanada.scss';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\ninterface PreAuthorizedDebitCanadaForm {\n ownerName: string;\n bankAccountNumber: string;\n bankCode: string;\n bankLocationId: string;\n}\n\ninterface PreAuthorizedDebitCanadaComponentProps {\n onChange({\n data,\n valid,\n errors,\n isValid,\n storePaymentMethod\n }: {\n data: PreAuthorizedDebitCanadaForm;\n valid: { [key: string]: boolean };\n errors: { [key: string]: ValidationRuleResult };\n isValid: boolean;\n storePaymentMethod: boolean;\n }): void;\n payButton: (props: PayButtonProps) => h.JSX.Element;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n showPayButton: boolean;\n enableStoreDetails: boolean;\n showContextualElement?: boolean;\n placeholders?: PreAuthorizedDebitCanadaPlaceholders;\n}\n\nfunction PreAuthorizedDebitCanadaComponent({\n onChange,\n payButton,\n showPayButton,\n placeholders,\n setComponentRef,\n enableStoreDetails,\n showContextualElement = true\n}: Readonly<PreAuthorizedDebitCanadaComponentProps>) {\n const getImage = useImage();\n const { i18n } = useCoreContext();\n const [status, setStatus] = useState('ready');\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<PreAuthorizedDebitCanadaForm>({\n schema: ['ownerName', 'bankAccountNumber', 'bankCode', 'bankLocationId'],\n rules: preAuthorizedDebitCanadaValidationRules,\n formatters: preAuthorizedDebitCanadaFormatters\n });\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n\n const isFormDisabled = status === 'loading';\n\n const componentRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n triggerValidation();\n }\n });\n\n useEffect(() => {\n setComponentRef(componentRef.current);\n }, [setComponentRef, componentRef.current]);\n\n useEffect(() => {\n onChange({ data, valid, errors, isValid, storePaymentMethod });\n }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n return (\n <div className=\"adyen-checkout__eftpad-canada\">\n <FormInstruction />\n\n <Fieldset>\n <Field\n label={i18n.get('eftpad-canada.input.accountHolderName.label')}\n errorMessage={!!errors.ownerName && i18n.get(errors.ownerName.errorMessage)}\n isValid={!!valid.ownerName}\n name={'ownerName'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'ownerName'}\n placeholder={placeholders?.ownerName}\n value={data.ownerName}\n onInput={handleChangeFor('ownerName', 'input')}\n onBlur={handleChangeFor('ownerName', 'blur')}\n required={true}\n data-testid={'owner-name'}\n autocomplete=\"name\"\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.accountNumber.label')}\n errorMessage={!!errors.bankAccountNumber && i18n.get(errors.bankAccountNumber.errorMessage)}\n name={'bankAccountNumber'}\n isValid={!!valid.bankAccountNumber}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.accountNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankAccountNumber'}\n placeholder={placeholders?.bankAccountNumber}\n value={data.bankAccountNumber}\n onInput={handleChangeFor('bankAccountNumber', 'input')}\n onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n required={true}\n maxlength={12}\n autocomplete={undefined}\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.institutionNumber.label')}\n classNameModifiers={['col-50']}\n errorMessage={!!errors.bankCode && i18n.get(errors.bankCode.errorMessage)}\n isValid={!!valid.bankCode}\n name={'bankCode'}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.institutionNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankCode'}\n placeholder={placeholders?.bankCode}\n value={data.bankCode}\n onInput={handleChangeFor('bankCode', 'input')}\n onBlur={handleChangeFor('bankCode', 'blur')}\n required={true}\n maxlength={3}\n autocomplete={undefined}\n />\n </Field>\n\n <Field\n label={i18n.get('eftpad-canada.input.transitNumber.label')}\n classNameModifiers={['col-50']}\n errorMessage={!!errors.bankLocationId && i18n.get(errors.bankLocationId.errorMessage)}\n name={'bankLocationId'}\n isValid={!!valid.bankLocationId}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('eftpad-canada.input.transitNumber.contextualText')}\n >\n <InputText\n disabled={isFormDisabled}\n name={'bankLocationId'}\n placeholder={placeholders?.bankLocationId}\n value={data.bankLocationId}\n onInput={handleChangeFor('bankLocationId', 'input')}\n onBlur={handleChangeFor('bankLocationId', 'blur')}\n required={true}\n maxlength={5}\n autocomplete={undefined}\n />\n </Field>\n </Fieldset>\n\n {enableStoreDetails && (\n <StoreDetails className={'adyen-checkout_eftpad-canada-store-details'} disabled={isFormDisabled} onChange={setStorePaymentMethod} />\n )}\n\n <SettlementInfo />\n\n {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })('bento_lock') })}\n </div>\n );\n}\n\nexport default PreAuthorizedDebitCanadaComponent;\n"],"names":["PreAuthorizedDebitCanadaComponent","onChange","payButton","showPayButton","placeholders","setComponentRef","enableStoreDetails","showContextualElement","getImage","useImage","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","data","errors","valid","isValid","useForm","schema","rules","preAuthorizedDebitCanadaValidationRules","formatters","preAuthorizedDebitCanadaFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","componentRef","useRef","showValidation","useEffect","current","h","div","className","FormInstruction","Fieldset","Field","label","get","errorMessage","ownerName","name","InputText","disabled","placeholder","value","onInput","onBlur","required","data-testid","autocomplete","bankAccountNumber","contextualText","maxlength","undefined","classNameModifiers","bankCode","bankLocationId","StoreDetails","SettlementInfo","icon","imageFolder"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as r,useMemo as o,useState as s,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";function A(A){const{i18n:v}=C(),{label:b="",requiredFields:j,visibility:S,iOSFocusedField:x=null,showContextualElement:k}=A,M=r({});Object.keys(M.current).length||A.setComponentRef?.(M.current);const O=o(()=>new f(A.specifications),[A.specifications]),D=O.getAddressSchemaForCountryFlat(A.countryCode).filter(e=>j.includes(e)),[w,B]=s(!1),[E,L]=s(!1),[N,P]=s(""),R=!!A.onAddressLookup,[V,H]=s(!1),q=!A.onAddressLookup||(w||E),{data:T,errors:_,valid:I,isValid:U,handleChangeFor:$,triggerValidation:z,setData:G,mergeData:J}=p({schema:D,defaultData:A.data,rules:{...d(O),...A.validationRules},formatters:c}),K=r(A.data?.country),Q=(T.country||K.current)?.toUpperCase(),W=o(()=>({...T,country:Q}),[T,Q]),X=n(e=>{const t=y.reduce((t,r)=>{const o=e[r];return null!=o&&(t[r]=String(o)),t},{});J(t),H(!0),z(),B(!0)},[B,z,G]),Y=n(()=>{L(!0)},[]);M.current.showValidation=()=>{z(),P(!R||q||U?"":v.get("address.errors.incomplete"))};const Z=D.filter(e=>!x||e===x);if(a(()=>{if(V)return void H(!1);const e=O.countryHasDataset(T.country)?"":F,t={...T,stateOrProvince:e};j.forEach(e=>{$(e,"input")(t[e]??"")}),t.postalCode&&$("postalCode","blur")(T.postalCode)},[T.country]),a(()=>{const e=j.includes("stateOrProvince"),t=T.country&&O.countryHasDataset(T.country),r=e&&t,o=T.stateOrProvince||(r?"":F);$("stateOrProvince","input")(o)},[]),a(()=>{const e=O.getOptionalFieldsForCountry(T.country),t=y.reduce((t,r)=>{const o=e.includes(r),s=j.includes(r),n=T[r],a=A.data[r],i=o&&!n||!s?s||n||!a?F:a:n;return i?.length&&(t[r]=i),t},{});!t.country&&K.current&&(t.country=K.current),A.onChange({data:t,valid:I,errors:_,isValid:U})},[T,I,_,U]),"hidden"===S)return null;if("readOnly"===S)return e(l,{data:T,label:b});const ee=(t,{classNameModifiers:r=[]})=>j.includes(t)?e(m,{key:t,allowedCountries:A.allowedCountries,classNameModifiers:[...r,t],data:W,errors:_,valid:I,fieldName:t,onInput:$(t,"input"),onBlur:$(t,"blur"),onDropdownChange:$(t,"blur"),specifications:O,maxLength:h(u,t,Q),trimOnBlur:!0,disabled:!Z.includes(t),onFieldFocusAnalytics:A.onFieldFocusAnalytics,onFieldBlurAnalytics:A.onFieldBlurAnalytics}):null,te=O.getAddressSchemaForCountry(T.country);return e(t,null,e(i,{classNameModifiers:[b,"address"],label:b,renderLabelAsSectionHeading:!0},R&&e(g,{onAddressLookup:A.onAddressLookup,onAddressSelected:A.onAddressSelected,onSelect:X,onManualAddress:Y,externalErrorMessage:N,hideManualButton:q,showContextualElement:k,contextualText:v.get("address.search.contextualText"),addressSearchDebounceMs:A.addressSearchDebounceMs}),q&&e(t,null,te.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>ee(e,{classNameModifiers:[`col-${t}`]}))):ee(t,{})))))}A.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{A as default};
1
+ import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as r,useMemo as s,useState as o,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";import{getAddressTypeFromLabel as A}from"./utils.js";function v(v){const{i18n:b}=C(),{label:j="",requiredFields:S,visibility:x,iOSFocusedField:k=null,showContextualElement:M}=v,O=A(v.addressType,j),D=r({});Object.keys(D.current).length||v.setComponentRef?.(D.current);const w=s(()=>new f(v.specifications),[v.specifications]),B=w.getAddressSchemaForCountryFlat(v.countryCode).filter(e=>S.includes(e)),[E,L]=o(!1),[N,P]=o(!1),[R,T]=o(""),V=!!v.onAddressLookup,[H,q]=o(!1),_=!v.onAddressLookup||(E||N),{data:I,errors:U,valid:$,isValid:z,handleChangeFor:G,triggerValidation:J,setData:K,mergeData:Q}=p({schema:B,defaultData:v.data,rules:{...d(w),...v.validationRules},formatters:c}),W=r(v.data?.country),X=(I.country||W.current)?.toUpperCase(),Y=s(()=>({...I,country:X}),[I,X]),Z=n(e=>{const t=y.reduce((t,r)=>{const s=e[r];return null!=s&&(t[r]=String(s)),t},{});Q(t),q(!0),J(),L(!0)},[L,J,K]),ee=n(()=>{P(!0)},[]);D.current.showValidation=()=>{J(),T(!V||_||z?"":b.get("address.errors.incomplete"))};const te=B.filter(e=>!k||e===k);if(a(()=>{if(H)return void q(!1);const e=w.countryHasDataset(I.country)?"":F,t={...I,stateOrProvince:e};S.forEach(e=>{G(e,"input")(t[e]??"")}),t.postalCode&&G("postalCode","blur")(I.postalCode)},[I.country]),a(()=>{const e=S.includes("stateOrProvince"),t=I.country&&w.countryHasDataset(I.country),r=e&&t,s=I.stateOrProvince||(r?"":F);G("stateOrProvince","input")(s)},[]),a(()=>{const e=w.getOptionalFieldsForCountry(I.country),t=y.reduce((t,r)=>{const s=e.includes(r),o=S.includes(r),n=I[r],a=v.data[r],i=s&&!n||!o?o||n||!a?F:a:n;return i?.length&&(t[r]=i),t},{});!t.country&&W.current&&(t.country=W.current),v.onChange({data:t,valid:$,errors:U,isValid:z})},[I,$,U,z]),"hidden"===x)return null;if("readOnly"===x)return e(l,{data:I,label:j});const re=(t,{classNameModifiers:r=[]})=>S.includes(t)?e(m,{key:t,allowedCountries:v.allowedCountries,classNameModifiers:[...r,t],data:Y,errors:U,valid:$,fieldName:t,onInput:G(t,"input"),onBlur:G(t,"blur"),onDropdownChange:G(t,"blur"),specifications:w,maxLength:h(u,t,X),trimOnBlur:!0,disabled:!te.includes(t),addressType:O,onFieldFocusAnalytics:v.onFieldFocusAnalytics,onFieldBlurAnalytics:v.onFieldBlurAnalytics}):null,se=w.getAddressSchemaForCountry(I.country);return e(t,null,e(i,{classNameModifiers:[j,"address"],label:j,renderLabelAsSectionHeading:!0},V&&e(g,{onAddressLookup:v.onAddressLookup,onAddressSelected:v.onAddressSelected,onSelect:Z,onManualAddress:ee,externalErrorMessage:R,hideManualButton:_,showContextualElement:M,contextualText:b.get("address.search.contextualText"),addressSearchDebounceMs:v.addressSearchDebounceMs}),_&&e(t,null,se.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>re(e,{classNameModifiers:[`col-${t}`]}))):re(t,{})))))}v.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{v as default};
2
2
  //# sourceMappingURL=Address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\n\nexport default function Address(props: Readonly<AddressProps>) {\n const { i18n } = useCoreContext();\n\n const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n\n /** An object by which to expose 'public' members to the parent UIElement */\n const addressRef = useRef<ComponentMethodsRef>({});\n // Just call once\n if (!Object.keys(addressRef.current).length) {\n props.setComponentRef?.(addressRef.current);\n }\n\n const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n const [useManualAddress, setUseManualAddress] = useState(false);\n\n const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n const showAddressSearch = !!props.onAddressLookup;\n\n const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n schema: requiredFieldsSchema,\n defaultData: props.data,\n // Ensure any passed validation rules are merged with the default ones\n rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n formatters: addressFormatters\n });\n\n // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n const setSearchData = useCallback(\n (selectedAddress: AddressData) => {\n const propsKeysToProcess = ADDRESS_SCHEMA;\n const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n // Make sure the data provided by the merchant is always strings\n const providedValue = selectedAddress[propKey];\n if (providedValue !== null && providedValue !== undefined) {\n // Cast everything to string\n acc[propKey] = String(providedValue);\n }\n return acc;\n }, {});\n mergeData(newStateData);\n setIgnoreCountryChange(true);\n triggerValidation();\n setHasSelectedAddress(true);\n },\n [setHasSelectedAddress, triggerValidation, setData]\n );\n\n const onManualAddress = useCallback(() => {\n setUseManualAddress(true);\n }, []);\n\n // Expose method expected by (parent) Address.tsx\n addressRef.current.showValidation = () => {\n triggerValidation();\n if (showAddressSearch && !showAddressFields && !isValid) {\n setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n } else {\n setSearchErrorMessage('');\n }\n };\n\n /**\n * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n */\n const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n return !iOSFocusedField ? true : item === iOSFocusedField;\n });\n\n /**\n * Effect that:\n * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n * - Applies validation on postalCode field in case it has any value\n */\n useEffect((): void => {\n // if the country was set via setSearchData we don't want to trigger this\n if (ignoreCountryChange) {\n setIgnoreCountryChange(false);\n return;\n }\n\n const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n const newData = { ...data, stateOrProvince };\n\n requiredFields.forEach(fieldName => {\n handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n });\n\n if (newData.postalCode) {\n handleChangeFor('postalCode', 'blur')(data.postalCode);\n }\n }, [data.country]);\n\n /**\n * Set the value of 'stateOrProvince' during the initial render if\n * property is provided during the creation of the payment method\n */\n useEffect((): void => {\n const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n }, []);\n\n useEffect((): void => {\n const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n const isOptional = optionalFields.includes(cur);\n const isRequired = requiredFields.includes(cur);\n const newValue = data[cur];\n const initialValue = props.data[cur];\n // recover default data values which are not requiredFields, or prefill with 'N/A'\n const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n if (value?.length) acc[cur] = value;\n return acc;\n }, {});\n\n // In partial address mode, ensure country is included in output for regionalized labels/validation.\n if (!(processedData as AddressData).country && initialCountryRef.current) {\n (processedData as AddressData).country = initialCountryRef.current;\n }\n\n props.onChange({ data: processedData, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n if (visibility === 'hidden') return null;\n if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n if (!requiredFields.includes(fieldName)) return null;\n\n return (\n <FieldContainer\n key={fieldName}\n allowedCountries={props.allowedCountries}\n classNameModifiers={[...classNameModifiers, fieldName]}\n data={dataWithCountry}\n errors={errors}\n valid={valid}\n fieldName={fieldName}\n onInput={handleChangeFor(fieldName, 'input')}\n onBlur={handleChangeFor(fieldName, 'blur')}\n onDropdownChange={handleChangeFor(fieldName, 'blur')}\n specifications={specifications}\n maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n trimOnBlur={true}\n disabled={!enabledFields.includes(fieldName)}\n onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n />\n );\n };\n\n const getWrapper = group => (\n <div className=\"adyen-checkout__field-group\">\n {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n </div>\n );\n\n const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n return (\n <Fragment>\n <Fieldset classNameModifiers={[label, 'address']} label={label} renderLabelAsSectionHeading>\n {showAddressSearch && (\n <AddressSearch\n onAddressLookup={props.onAddressLookup}\n onAddressSelected={props.onAddressSelected}\n onSelect={setSearchData}\n onManualAddress={onManualAddress}\n externalErrorMessage={searchErrorMessage}\n hideManualButton={showAddressFields}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('address.search.contextualText')}\n addressSearchDebounceMs={props.addressSearchDebounceMs}\n />\n )}\n {showAddressFields && (\n <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n )}\n </Fieldset>\n </Fragment>\n );\n}\n\nAddress.defaultProps = {\n countryCode: null,\n validationRules: null,\n data: {},\n onChange: () => {},\n visibility: 'editable',\n requiredFields: ADDRESS_SCHEMA,\n specifications: {},\n onFieldFocusAnalytics: () => {},\n onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","renderLabelAsSectionHeading","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps, AddressType } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\nimport { getAddressTypeFromLabel } from './utils';\n\nexport default function Address(props: Readonly<AddressProps>) {\n const { i18n } = useCoreContext();\n\n const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n const addressType: AddressType = getAddressTypeFromLabel(props.addressType, label);\n\n /** An object by which to expose 'public' members to the parent UIElement */\n const addressRef = useRef<ComponentMethodsRef>({});\n // Just call once\n if (!Object.keys(addressRef.current).length) {\n props.setComponentRef?.(addressRef.current);\n }\n\n const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n const [useManualAddress, setUseManualAddress] = useState(false);\n\n const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n const showAddressSearch = !!props.onAddressLookup;\n\n const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n schema: requiredFieldsSchema,\n defaultData: props.data,\n // Ensure any passed validation rules are merged with the default ones\n rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n formatters: addressFormatters\n });\n\n // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n const setSearchData = useCallback(\n (selectedAddress: AddressData) => {\n const propsKeysToProcess = ADDRESS_SCHEMA;\n const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n // Make sure the data provided by the merchant is always strings\n const providedValue = selectedAddress[propKey];\n if (providedValue !== null && providedValue !== undefined) {\n // Cast everything to string\n acc[propKey] = String(providedValue);\n }\n return acc;\n }, {});\n mergeData(newStateData);\n setIgnoreCountryChange(true);\n triggerValidation();\n setHasSelectedAddress(true);\n },\n [setHasSelectedAddress, triggerValidation, setData]\n );\n\n const onManualAddress = useCallback(() => {\n setUseManualAddress(true);\n }, []);\n\n // Expose method expected by (parent) Address.tsx\n addressRef.current.showValidation = () => {\n triggerValidation();\n if (showAddressSearch && !showAddressFields && !isValid) {\n setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n } else {\n setSearchErrorMessage('');\n }\n };\n\n /**\n * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n */\n const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n return !iOSFocusedField ? true : item === iOSFocusedField;\n });\n\n /**\n * Effect that:\n * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n * - Applies validation on postalCode field in case it has any value\n */\n useEffect((): void => {\n // if the country was set via setSearchData we don't want to trigger this\n if (ignoreCountryChange) {\n setIgnoreCountryChange(false);\n return;\n }\n\n const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n const newData = { ...data, stateOrProvince };\n\n requiredFields.forEach(fieldName => {\n handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n });\n\n if (newData.postalCode) {\n handleChangeFor('postalCode', 'blur')(data.postalCode);\n }\n }, [data.country]);\n\n /**\n * Set the value of 'stateOrProvince' during the initial render if\n * property is provided during the creation of the payment method\n */\n useEffect((): void => {\n const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n }, []);\n\n useEffect((): void => {\n const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n const isOptional = optionalFields.includes(cur);\n const isRequired = requiredFields.includes(cur);\n const newValue = data[cur];\n const initialValue = props.data[cur];\n // recover default data values which are not requiredFields, or prefill with 'N/A'\n const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n if (value?.length) acc[cur] = value;\n return acc;\n }, {});\n\n // In partial address mode, ensure country is included in output for regionalized labels/validation.\n if (!(processedData as AddressData).country && initialCountryRef.current) {\n (processedData as AddressData).country = initialCountryRef.current;\n }\n\n props.onChange({ data: processedData, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n if (visibility === 'hidden') return null;\n if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n if (!requiredFields.includes(fieldName)) return null;\n\n return (\n <FieldContainer\n key={fieldName}\n allowedCountries={props.allowedCountries}\n classNameModifiers={[...classNameModifiers, fieldName]}\n data={dataWithCountry}\n errors={errors}\n valid={valid}\n fieldName={fieldName}\n onInput={handleChangeFor(fieldName, 'input')}\n onBlur={handleChangeFor(fieldName, 'blur')}\n onDropdownChange={handleChangeFor(fieldName, 'blur')}\n specifications={specifications}\n maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n trimOnBlur={true}\n disabled={!enabledFields.includes(fieldName)}\n addressType={addressType}\n onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n />\n );\n };\n\n const getWrapper = group => (\n <div className=\"adyen-checkout__field-group\">\n {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n </div>\n );\n\n const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n return (\n <Fragment>\n <Fieldset classNameModifiers={[label, 'address']} label={label} renderLabelAsSectionHeading>\n {showAddressSearch && (\n <AddressSearch\n onAddressLookup={props.onAddressLookup}\n onAddressSelected={props.onAddressSelected}\n onSelect={setSearchData}\n onManualAddress={onManualAddress}\n externalErrorMessage={searchErrorMessage}\n hideManualButton={showAddressFields}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('address.search.contextualText')}\n addressSearchDebounceMs={props.addressSearchDebounceMs}\n />\n )}\n {showAddressFields && (\n <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n )}\n </Fieldset>\n </Fragment>\n );\n}\n\nAddress.defaultProps = {\n countryCode: null,\n validationRules: null,\n data: {},\n onChange: () => {},\n visibility: 'editable',\n requiredFields: ADDRESS_SCHEMA,\n specifications: {},\n onFieldFocusAnalytics: () => {},\n onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressType","getAddressTypeFromLabel","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","renderLabelAsSectionHeading","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../FormFields/Field/Field.js";import o from"./StateField.js";import t from"./CountryField.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import s from"../../FormFields/InputText.js";function a(a){const{i18n:n}=i(),{classNameModifiers:l=[],data:d,errors:c,valid:u,fieldName:m,onInput:f,onBlur:p,trimOnBlur:g,maxLength:F,disabled:C}=a,M=d[m],y=d.country,b=a.specifications.countryHasOptionalField(y,m),j=a.specifications.getKeyForField(m,y),w=b?` ${n.get("field.title.optional")}`:"",h=`${n.get(j)}${w}`,v=function(e,r,o,t){if("object"==typeof e[r]?.errorMessage){const{translationKey:t,translationObject:i}=e[r].errorMessage;return o.get(t,i)}return o.get(e[r]?.errorMessage,{values:{label:t.toLowerCase()}})||!!e[r]}(c,m,n,h);switch(m){case"country":return e(t,{allowedCountries:a.allowedCountries,classNameModifiers:l,label:h,errorMessage:v,onDropdownChange:a.onDropdownChange,value:M,required:!b});case"stateOrProvince":return e(o,{classNameModifiers:l,label:h,errorMessage:v,onDropdownChange:a.onDropdownChange,selectedCountry:y,specifications:a.specifications,value:M,required:!b});default:return e(r,{label:h,classNameModifiers:l,errorMessage:v,isValid:u[m],name:m,i18n:n,onFocus:e=>a.onFieldFocusAnalytics(m,e),onBlur:e=>a.onFieldBlurAnalytics(m,e)},e(s,{name:m,classNameModifiers:l,value:M,onInput:f,onBlur:p,maxlength:F,trimOnBlur:g,disabled:C,required:!b}))}}export{a as default};
1
+ import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../FormFields/Field/Field.js";import o from"./StateField.js";import s from"./CountryField.js";import{useCoreContext as t}from"../../../../core/Context/CoreProvider.js";import i from"../../FormFields/InputText.js";import{ADDRESS_FIELD_TOKEN_MAP as n}from"../constants.js";function a(e,r){const o=n[e];if(o)return"billingAddress"===r?`billing ${o}`:"deliveryAddress"===r?`shipping ${o}`:o}function l(n){const{i18n:l}=t(),{classNameModifiers:d=[],data:c,errors:u,valid:m,fieldName:p,onInput:f,onBlur:g,trimOnBlur:F,maxLength:y,disabled:C,addressType:M}=n,b=c[p],j=c.country,h=n.specifications.countryHasOptionalField(j,p),v=n.specifications.getKeyForField(p,j),w=h?` ${l.get("field.title.optional")}`:"",x=`${l.get(v)}${w}`,B=function(e,r,o,s){if("object"==typeof e[r]?.errorMessage){const{translationKey:s,translationObject:t}=e[r].errorMessage;return o.get(s,t)}return o.get(e[r]?.errorMessage,{values:{label:s.toLowerCase()}})||!!e[r]}(u,p,l,x);switch(p){case"country":return e(s,{allowedCountries:n.allowedCountries,classNameModifiers:d,label:x,errorMessage:B,onDropdownChange:n.onDropdownChange,value:b,required:!h});case"stateOrProvince":return e(o,{classNameModifiers:d,label:x,errorMessage:B,onDropdownChange:n.onDropdownChange,selectedCountry:j,specifications:n.specifications,value:b,required:!h});default:return e(r,{label:x,classNameModifiers:d,errorMessage:B,isValid:m[p],name:p,i18n:l,onFocus:e=>n.onFieldFocusAnalytics(p,e),onBlur:e=>n.onFieldBlurAnalytics(p,e)},e(i,{name:p,classNameModifiers:d,value:b,onInput:f,onBlur:g,maxlength:y,trimOnBlur:F,disabled:C,required:!h,autocomplete:a(p,M)}))}}export{l as default};
2
2
  //# sourceMappingURL=FieldContainer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FieldContainer.js","sources":["../../../../../../src/components/internal/Address/components/FieldContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../FormFields/Field';\nimport StateField from './StateField';\nimport CountryField from './CountryField';\nimport { AddressStateError, FieldContainerProps } from '../types';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Language from '../../../../language/Language';\nimport InputText from '../../FormFields/InputText';\n\nfunction getErrorMessage(errors: AddressStateError, fieldName: string, i18n: Language, label: string): string | boolean {\n if (typeof errors[fieldName]?.errorMessage === 'object') {\n const { translationKey, translationObject } = errors[fieldName].errorMessage;\n return i18n.get(translationKey, translationObject);\n }\n // Default error msg: Enter the [label name]\n const errorMsg = i18n.get(errors[fieldName]?.errorMessage, { values: { label: label.toLowerCase() } });\n return errorMsg || !!errors[fieldName];\n}\n\n/**\n * USAGE: Specifically defined as a util to provide a wrapper for fields created within the Address component\n *\n * NOT TO BE USED: if you just want to add a Country or State dropdown outside of an Address component\n * - then you should implement <CountryField> or <StateField> directly\n */\nfunction FieldContainer(props: Readonly<FieldContainerProps>) {\n const { i18n } = useCoreContext();\n const { classNameModifiers = [], data, errors, valid, fieldName, onInput, onBlur, trimOnBlur, maxLength, disabled } = props;\n\n const value: string = data[fieldName];\n const selectedCountry: string = data.country;\n const isOptional: boolean = props.specifications.countryHasOptionalField(selectedCountry, fieldName);\n const labelKey: string = props.specifications.getKeyForField(fieldName, selectedCountry);\n const optionalLabel = isOptional ? ` ${i18n.get('field.title.optional')}` : '';\n const label = `${i18n.get(labelKey)}${optionalLabel}`;\n const errorMessage = getErrorMessage(errors, fieldName, i18n, label);\n\n switch (fieldName) {\n case 'country':\n return (\n <CountryField\n allowedCountries={props.allowedCountries}\n classNameModifiers={classNameModifiers}\n label={label}\n errorMessage={errorMessage}\n onDropdownChange={props.onDropdownChange}\n value={value}\n required={!isOptional}\n />\n );\n case 'stateOrProvince':\n return (\n <StateField\n classNameModifiers={classNameModifiers}\n label={label}\n errorMessage={errorMessage}\n onDropdownChange={props.onDropdownChange}\n selectedCountry={selectedCountry}\n specifications={props.specifications}\n value={value}\n required={!isOptional}\n />\n );\n default:\n return (\n <Field\n label={label}\n classNameModifiers={classNameModifiers}\n errorMessage={errorMessage}\n isValid={valid[fieldName]}\n name={fieldName}\n i18n={i18n}\n onFocus={e => props.onFieldFocusAnalytics(fieldName, e)}\n onBlur={e => props.onFieldBlurAnalytics(fieldName, e)}\n >\n <InputText\n name={fieldName}\n classNameModifiers={classNameModifiers}\n value={value}\n onInput={onInput}\n onBlur={onBlur}\n maxlength={maxLength}\n trimOnBlur={trimOnBlur}\n disabled={disabled}\n required={!isOptional}\n />\n </Field>\n );\n }\n}\n\nexport default FieldContainer;\n"],"names":["FieldContainer","props","i18n","useCoreContext","classNameModifiers","data","errors","valid","fieldName","onInput","onBlur","trimOnBlur","maxLength","disabled","value","selectedCountry","country","isOptional","specifications","countryHasOptionalField","labelKey","getKeyForField","optionalLabel","get","label","errorMessage","translationKey","translationObject","values","toLowerCase","getErrorMessage","h","CountryField","allowedCountries","onDropdownChange","required","StateField","Field","isValid","name","onFocus","e","onFieldFocusAnalytics","onFieldBlurAnalytics","InputText","maxlength"],"mappings":"iTAyBA,SAASA,EAAeC,GACpB,MAAMC,KAAEA,GAASC,KACXC,mBAAEA,EAAqB,GAAEC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,UAAEA,EAASC,QAAEA,EAAOC,OAAEA,EAAMC,WAAEA,EAAUC,UAAEA,EAASC,SAAEA,GAAaZ,EAEhHa,EAAgBT,EAAKG,GACrBO,EAA0BV,EAAKW,QAC/BC,EAAsBhB,EAAMiB,eAAeC,wBAAwBJ,EAAiBP,GACpFY,EAAmBnB,EAAMiB,eAAeG,eAAeb,EAAWO,GAClEO,EAAgBL,EAAa,IAAIf,EAAKqB,IAAI,0BAA4B,GACtEC,EAAQ,GAAGtB,EAAKqB,IAAIH,KAAYE,IAChCG,EA1BV,SAAyBnB,EAA2BE,EAAmBN,EAAgBsB,GACnF,GAA+C,iBAApClB,EAAOE,IAAYiB,aAA2B,CACrD,MAAMC,eAAEA,EAAcC,kBAAEA,GAAsBrB,EAAOE,GAAWiB,aAChE,OAAOvB,EAAKqB,IAAIG,EAAgBC,EACpC,CAGA,OADiBzB,EAAKqB,IAAIjB,EAAOE,IAAYiB,aAAc,CAAEG,OAAQ,CAAEJ,MAAOA,EAAMK,oBAC/DvB,EAAOE,EAChC,CAkByBsB,CAAgBxB,EAAQE,EAAWN,EAAMsB,GAE9D,OAAQhB,GACJ,IAAK,UACD,OACIuB,EAACC,EAAAA,CACGC,iBAAkBhC,EAAMgC,iBACxB7B,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBpB,MAAOA,EACPqB,UAAWlB,IAGvB,IAAK,kBACD,OACIc,EAACK,EAAAA,CACGhC,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBnB,gBAAiBA,EACjBG,eAAgBjB,EAAMiB,eACtBJ,MAAOA,EACPqB,UAAWlB,IAGvB,QACI,OACIc,EAACM,EAAAA,CACGb,MAAOA,EACPpB,mBAAoBA,EACpBqB,aAAcA,EACda,QAAS/B,EAAMC,GACf+B,KAAM/B,EACNN,KAAMA,EACNsC,QAASC,GAAKxC,EAAMyC,sBAAsBlC,EAAWiC,GACrD/B,OAAQ+B,GAAKxC,EAAM0C,qBAAqBnC,EAAWiC,IAEnDV,EAACa,EAAAA,CACGL,KAAM/B,EACNJ,mBAAoBA,EACpBU,MAAOA,EACPL,QAASA,EACTC,OAAQA,EACRmC,UAAWjC,EACXD,WAAYA,EACZE,SAAUA,EACVsB,UAAWlB,KAKnC"}
1
+ {"version":3,"file":"FieldContainer.js","sources":["../../../../../../src/components/internal/Address/components/FieldContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../FormFields/Field';\nimport StateField from './StateField';\nimport CountryField from './CountryField';\nimport { AddressStateError, AddressType, FieldContainerProps } from '../types';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Language from '../../../../language/Language';\nimport InputText from '../../FormFields/InputText';\nimport { AutocompleteValue } from '../../FormFields/types';\nimport { ADDRESS_FIELD_TOKEN_MAP } from '../constants';\n\nfunction getErrorMessage(errors: AddressStateError, fieldName: string, i18n: Language, label: string): string | boolean {\n if (typeof errors[fieldName]?.errorMessage === 'object') {\n const { translationKey, translationObject } = errors[fieldName].errorMessage;\n return i18n.get(translationKey, translationObject);\n }\n // Default error msg: Enter the [label name]\n const errorMsg = i18n.get(errors[fieldName]?.errorMessage, { values: { label: label.toLowerCase() } });\n return errorMsg || !!errors[fieldName];\n}\n\n/**\n * USAGE: Specifically defined as a util to provide a wrapper for fields created within the Address component\n *\n * NOT TO BE USED: if you just want to add a Country or State dropdown outside of an Address component\n * - then you should implement <CountryField> or <StateField> directly\n */\nfunction getAddressAutocomplete(fieldName: string, addressType: AddressType): AutocompleteValue {\n const token = ADDRESS_FIELD_TOKEN_MAP[fieldName];\n if (!token) return undefined;\n if (addressType === 'billingAddress') return `billing ${token}` as AutocompleteValue;\n if (addressType === 'deliveryAddress') return `shipping ${token}` as AutocompleteValue;\n // Fallback: bare token (no prefix) when address type is unspecified\n return token as AutocompleteValue;\n}\n\nfunction FieldContainer(props: Readonly<FieldContainerProps>) {\n const { i18n } = useCoreContext();\n const { classNameModifiers = [], data, errors, valid, fieldName, onInput, onBlur, trimOnBlur, maxLength, disabled, addressType } = props;\n\n const value: string = data[fieldName];\n const selectedCountry: string = data.country;\n const isOptional: boolean = props.specifications.countryHasOptionalField(selectedCountry, fieldName);\n const labelKey: string = props.specifications.getKeyForField(fieldName, selectedCountry);\n const optionalLabel = isOptional ? ` ${i18n.get('field.title.optional')}` : '';\n const label = `${i18n.get(labelKey)}${optionalLabel}`;\n const errorMessage = getErrorMessage(errors, fieldName, i18n, label);\n\n switch (fieldName) {\n case 'country':\n return (\n <CountryField\n allowedCountries={props.allowedCountries}\n classNameModifiers={classNameModifiers}\n label={label}\n errorMessage={errorMessage}\n onDropdownChange={props.onDropdownChange}\n value={value}\n required={!isOptional}\n />\n );\n case 'stateOrProvince':\n return (\n <StateField\n classNameModifiers={classNameModifiers}\n label={label}\n errorMessage={errorMessage}\n onDropdownChange={props.onDropdownChange}\n selectedCountry={selectedCountry}\n specifications={props.specifications}\n value={value}\n required={!isOptional}\n />\n );\n default:\n return (\n <Field\n label={label}\n classNameModifiers={classNameModifiers}\n errorMessage={errorMessage}\n isValid={valid[fieldName]}\n name={fieldName}\n i18n={i18n}\n onFocus={e => props.onFieldFocusAnalytics(fieldName, e)}\n onBlur={e => props.onFieldBlurAnalytics(fieldName, e)}\n >\n <InputText\n name={fieldName}\n classNameModifiers={classNameModifiers}\n value={value}\n onInput={onInput}\n onBlur={onBlur}\n maxlength={maxLength}\n trimOnBlur={trimOnBlur}\n disabled={disabled}\n required={!isOptional}\n autocomplete={getAddressAutocomplete(fieldName, addressType)}\n />\n </Field>\n );\n }\n}\n\nexport default FieldContainer;\n"],"names":["getAddressAutocomplete","fieldName","addressType","token","ADDRESS_FIELD_TOKEN_MAP","FieldContainer","props","i18n","useCoreContext","classNameModifiers","data","errors","valid","onInput","onBlur","trimOnBlur","maxLength","disabled","value","selectedCountry","country","isOptional","specifications","countryHasOptionalField","labelKey","getKeyForField","optionalLabel","get","label","errorMessage","translationKey","translationObject","values","toLowerCase","getErrorMessage","h","CountryField","allowedCountries","onDropdownChange","required","StateField","Field","isValid","name","onFocus","e","onFieldFocusAnalytics","onFieldBlurAnalytics","InputText","maxlength","autocomplete"],"mappings":"2WA2BA,SAASA,EAAuBC,EAAmBC,GAC/C,MAAMC,EAAQC,EAAwBH,GACtC,GAAKE,EACL,MAAoB,mBAAhBD,EAAyC,WAAWC,IACpC,oBAAhBD,EAA0C,YAAYC,IAEnDA,CACX,CAEA,SAASE,EAAeC,GACpB,MAAMC,KAAEA,GAASC,KACXC,mBAAEA,EAAqB,GAAEC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKX,UAAEA,EAASY,QAAEA,EAAOC,OAAEA,EAAMC,WAAEA,EAAUC,UAAEA,EAASC,SAAEA,EAAQf,YAAEA,GAAgBI,EAE7HY,EAAgBR,EAAKT,GACrBkB,EAA0BT,EAAKU,QAC/BC,EAAsBf,EAAMgB,eAAeC,wBAAwBJ,EAAiBlB,GACpFuB,EAAmBlB,EAAMgB,eAAeG,eAAexB,EAAWkB,GAClEO,EAAgBL,EAAa,IAAId,EAAKoB,IAAI,0BAA4B,GACtEC,EAAQ,GAAGrB,EAAKoB,IAAIH,KAAYE,IAChCG,EAnCV,SAAyBlB,EAA2BV,EAAmBM,EAAgBqB,GACnF,GAA+C,iBAApCjB,EAAOV,IAAY4B,aAA2B,CACrD,MAAMC,eAAEA,EAAcC,kBAAEA,GAAsBpB,EAAOV,GAAW4B,aAChE,OAAOtB,EAAKoB,IAAIG,EAAgBC,EACpC,CAGA,OADiBxB,EAAKoB,IAAIhB,EAAOV,IAAY4B,aAAc,CAAEG,OAAQ,CAAEJ,MAAOA,EAAMK,oBAC/DtB,EAAOV,EAChC,CA2ByBiC,CAAgBvB,EAAQV,EAAWM,EAAMqB,GAE9D,OAAQ3B,GACJ,IAAK,UACD,OACIkC,EAACC,EAAAA,CACGC,iBAAkB/B,EAAM+B,iBACxB5B,mBAAoBA,EACpBmB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBhC,EAAMgC,iBACxBpB,MAAOA,EACPqB,UAAWlB,IAGvB,IAAK,kBACD,OACIc,EAACK,EAAAA,CACG/B,mBAAoBA,EACpBmB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBhC,EAAMgC,iBACxBnB,gBAAiBA,EACjBG,eAAgBhB,EAAMgB,eACtBJ,MAAOA,EACPqB,UAAWlB,IAGvB,QACI,OACIc,EAACM,EAAAA,CACGb,MAAOA,EACPnB,mBAAoBA,EACpBoB,aAAcA,EACda,QAAS9B,EAAMX,GACf0C,KAAM1C,EACNM,KAAMA,EACNqC,QAASC,GAAKvC,EAAMwC,sBAAsB7C,EAAW4C,GACrD/B,OAAQ+B,GAAKvC,EAAMyC,qBAAqB9C,EAAW4C,IAEnDV,EAACa,EAAAA,CACGL,KAAM1C,EACNQ,mBAAoBA,EACpBS,MAAOA,EACPL,QAASA,EACTC,OAAQA,EACRmC,UAAWjC,EACXD,WAAYA,EACZE,SAAUA,EACVsB,UAAWlB,EACX6B,aAAclD,EAAuBC,EAAWC,MAKxE"}
@@ -1,2 +1,2 @@
1
- const e="N/A",a=["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],[s,t,l,r,o,c]=a,i={AU:{hasDataset:!0,labels:{[t]:"apartmentSuite",[o]:"state",[s]:"address"},optionalFields:[t],placeholders:{[o]:"select.state"},schema:[c,s,t,r,[[o,50],[l,50]]]},BR:{hasDataset:!0,labels:{[o]:"state"},placeholders:{[o]:"select.state"}},CA:{hasDataset:!0,labels:{[t]:"apartmentSuite",[o]:"provinceOrTerritory",[s]:"address"},optionalFields:[t],schema:[c,s,t,[[r,70],[l,30]],o]},GB:{labels:{[r]:"cityTown"},schema:[c,[[t,30],[s,70]],[[r,70],[l,30]],o]},US:{hasDataset:!0,labels:{[l]:"zipCode",[t]:"apartmentSuite",[o]:"state",[s]:"address"},optionalFields:[t],placeholders:{[o]:"select.state"},schema:[c,s,t,r,[[o,50],[l,50]]]},default:{optionalFields:[],placeholders:{[o]:"select.provinceOrTerritory"},schema:[c,[[s,70],[t,30]],[[l,30],[r,70]],o]}},d=Object.keys(i).reduce((e,a)=>(e[a]={labels:i[a].labels,schema:[l]},e),{}),p=Object.keys(i);export{a as ADDRESS_SCHEMA,i as ADDRESS_SPECIFICATIONS,r as CITY,p as COUNTRIES_WITH_CUSTOM_SPECIFICATION,c as COUNTRY,e as FALLBACK_VALUE,t as HOUSE_NUMBER_OR_NAME,d as PARTIAL_ADDRESS_SCHEMA,l as POSTAL_CODE,o as STATE_OR_PROVINCE,s as STREET};
1
+ const e="N/A",s=["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],[a,t,l,r,o,c]=s,d={street:"address-line1",houseNumberOrName:"address-line2",postalCode:"postal-code",city:"address-level2"},i={AU:{hasDataset:!0,labels:{[t]:"apartmentSuite",[o]:"state",[a]:"address"},optionalFields:[t],placeholders:{[o]:"select.state"},schema:[c,a,t,r,[[o,50],[l,50]]]},BR:{hasDataset:!0,labels:{[o]:"state"},placeholders:{[o]:"select.state"}},CA:{hasDataset:!0,labels:{[t]:"apartmentSuite",[o]:"provinceOrTerritory",[a]:"address"},optionalFields:[t],schema:[c,a,t,[[r,70],[l,30]],o]},GB:{labels:{[r]:"cityTown"},schema:[c,[[t,30],[a,70]],[[r,70],[l,30]],o]},US:{hasDataset:!0,labels:{[l]:"zipCode",[t]:"apartmentSuite",[o]:"state",[a]:"address"},optionalFields:[t],placeholders:{[o]:"select.state"},schema:[c,a,t,r,[[o,50],[l,50]]]},default:{optionalFields:[],placeholders:{[o]:"select.provinceOrTerritory"},schema:[c,[[a,70],[t,30]],[[l,30],[r,70]],o]}},p=Object.keys(i).reduce((e,s)=>(e[s]={labels:i[s].labels,schema:[l]},e),{}),h=Object.keys(i);export{d as ADDRESS_FIELD_TOKEN_MAP,s as ADDRESS_SCHEMA,i as ADDRESS_SPECIFICATIONS,r as CITY,h as COUNTRIES_WITH_CUSTOM_SPECIFICATION,c as COUNTRY,e as FALLBACK_VALUE,t as HOUSE_NUMBER_OR_NAME,p as PARTIAL_ADDRESS_SCHEMA,l as POSTAL_CODE,o as STATE_OR_PROVINCE,a as STREET};
2
2
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../../src/components/internal/Address/constants.ts"],"sourcesContent":["import { AddressSpecifications } from './types';\n\nexport const FALLBACK_VALUE = 'N/A';\nexport const ADDRESS_SCHEMA = ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'] as const;\nexport const [STREET, HOUSE_NUMBER_OR_NAME, POSTAL_CODE, CITY, STATE_OR_PROVINCE, COUNTRY] = ADDRESS_SCHEMA;\n// prettier-ignore\nexport const ADDRESS_SPECIFICATIONS: AddressSpecifications = {\n AU: {\n hasDataset: true,\n labels: {\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'state',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, CITY, [[STATE_OR_PROVINCE, 50], [POSTAL_CODE, 50]]]\n },\n BR: {\n hasDataset: true,\n labels: {\n [STATE_OR_PROVINCE]: 'state'\n },\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n },\n CA: {\n hasDataset: true,\n labels: {\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'provinceOrTerritory',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, [[CITY, 70], [POSTAL_CODE, 30]], STATE_OR_PROVINCE]\n },\n GB: {\n labels: {\n [CITY]: 'cityTown'\n },\n schema: [COUNTRY, [[HOUSE_NUMBER_OR_NAME, 30], [STREET, 70]], [[CITY, 70], [POSTAL_CODE, 30]], STATE_OR_PROVINCE]\n },\n US: {\n hasDataset: true,\n labels: {\n [POSTAL_CODE]: 'zipCode',\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'state',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, CITY, [[STATE_OR_PROVINCE, 50], [POSTAL_CODE, 50]]]\n },\n default: {\n optionalFields: [],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.provinceOrTerritory'\n },\n schema: [COUNTRY, [[STREET, 70], [HOUSE_NUMBER_OR_NAME, 30]], [[POSTAL_CODE, 30], [CITY, 70]], STATE_OR_PROVINCE],\n }\n};\n\nexport const PARTIAL_ADDRESS_SCHEMA: AddressSpecifications = Object.keys(ADDRESS_SPECIFICATIONS).reduce((acc, countryCode) => {\n acc[countryCode] = {\n labels: ADDRESS_SPECIFICATIONS[countryCode].labels,\n schema: [POSTAL_CODE]\n };\n return acc;\n}, {} as AddressSpecifications);\n\nexport const COUNTRIES_WITH_CUSTOM_SPECIFICATION = Object.keys(ADDRESS_SPECIFICATIONS);\n"],"names":["FALLBACK_VALUE","ADDRESS_SCHEMA","STREET","HOUSE_NUMBER_OR_NAME","POSTAL_CODE","CITY","STATE_OR_PROVINCE","COUNTRY","ADDRESS_SPECIFICATIONS","AU","hasDataset","labels","optionalFields","placeholders","schema","BR","CA","GB","US","default","PARTIAL_ADDRESS_SCHEMA","Object","keys","reduce","acc","countryCode","COUNTRIES_WITH_CUSTOM_SPECIFICATION"],"mappings":"AAEO,MAAMA,EAAiB,MACjBC,EAAiB,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,YACzFC,EAAQC,EAAsBC,EAAaC,EAAMC,EAAmBC,GAAWN,EAEhFO,EAAgD,CACzDC,GAAI,CACAC,YAAY,EACZC,OAAQ,CACJR,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,QACrBJ,CAACA,GAAS,WAEdU,eAAgB,CAACT,GACjBU,aAAc,CACVP,CAACA,GAAoB,gBAEzBQ,OAAQ,CAACP,EAASL,EAAQC,EAAsBE,EAAM,CAAC,CAACC,EAAmB,IAAK,CAACF,EAAa,OAElGW,GAAI,CACAL,YAAY,EACZC,OAAQ,CACJL,CAACA,GAAoB,SAEzBO,aAAc,CACVP,CAACA,GAAoB,iBAG7BU,GAAI,CACAN,YAAY,EACZC,OAAQ,CACJR,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,sBACrBJ,CAACA,GAAS,WAEdU,eAAgB,CAACT,GACjBW,OAAQ,CAACP,EAASL,EAAQC,EAAsB,CAAC,CAACE,EAAM,IAAK,CAACD,EAAa,KAAME,IAErFW,GAAI,CACAN,OAAQ,CACJN,CAACA,GAAO,YAEZS,OAAQ,CAACP,EAAS,CAAC,CAACJ,EAAsB,IAAK,CAACD,EAAQ,KAAM,CAAC,CAACG,EAAM,IAAK,CAACD,EAAa,KAAME,IAEnGY,GAAI,CACAR,YAAY,EACZC,OAAQ,CACJP,CAACA,GAAc,UACfD,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,QACrBJ,CAACA,GAAS,WAEdU,eAAgB,CAACT,GACjBU,aAAc,CACVP,CAACA,GAAoB,gBAEzBQ,OAAQ,CAACP,EAASL,EAAQC,EAAsBE,EAAM,CAAC,CAACC,EAAmB,IAAK,CAACF,EAAa,OAElGe,QAAS,CACLP,eAAgB,GAChBC,aAAc,CACVP,CAACA,GAAoB,8BAEzBQ,OAAQ,CAACP,EAAS,CAAC,CAACL,EAAQ,IAAK,CAACC,EAAsB,KAAM,CAAC,CAACC,EAAa,IAAK,CAACC,EAAM,KAAMC,KAI1Fc,EAAgDC,OAAOC,KAAKd,GAAwBe,OAAO,CAACC,EAAKC,KAC1GD,EAAIC,GAAe,CACfd,OAAQH,EAAuBiB,GAAad,OAC5CG,OAAQ,CAACV,IAENoB,GACR,CAAA,GAEUE,EAAsCL,OAAOC,KAAKd"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../../src/components/internal/Address/constants.ts"],"sourcesContent":["import { AddressSpecifications } from './types';\n\nexport const FALLBACK_VALUE = 'N/A';\nexport const ADDRESS_SCHEMA = ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'] as const;\nexport const [STREET, HOUSE_NUMBER_OR_NAME, POSTAL_CODE, CITY, STATE_OR_PROVINCE, COUNTRY] = ADDRESS_SCHEMA;\n\n// WCAG 2.2 - Address field autocomplete tokens\nexport const ADDRESS_FIELD_TOKEN_MAP: Record<string, string> = {\n street: 'address-line1',\n houseNumberOrName: 'address-line2',\n postalCode: 'postal-code',\n city: 'address-level2'\n};\n\n// prettier-ignore\nexport const ADDRESS_SPECIFICATIONS: AddressSpecifications = {\n AU: {\n hasDataset: true,\n labels: {\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'state',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, CITY, [[STATE_OR_PROVINCE, 50], [POSTAL_CODE, 50]]]\n },\n BR: {\n hasDataset: true,\n labels: {\n [STATE_OR_PROVINCE]: 'state'\n },\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n },\n CA: {\n hasDataset: true,\n labels: {\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'provinceOrTerritory',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, [[CITY, 70], [POSTAL_CODE, 30]], STATE_OR_PROVINCE]\n },\n GB: {\n labels: {\n [CITY]: 'cityTown'\n },\n schema: [COUNTRY, [[HOUSE_NUMBER_OR_NAME, 30], [STREET, 70]], [[CITY, 70], [POSTAL_CODE, 30]], STATE_OR_PROVINCE]\n },\n US: {\n hasDataset: true,\n labels: {\n [POSTAL_CODE]: 'zipCode',\n [HOUSE_NUMBER_OR_NAME]: 'apartmentSuite',\n [STATE_OR_PROVINCE]: 'state',\n [STREET]: 'address'\n },\n optionalFields: [HOUSE_NUMBER_OR_NAME],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.state'\n },\n schema: [COUNTRY, STREET, HOUSE_NUMBER_OR_NAME, CITY, [[STATE_OR_PROVINCE, 50], [POSTAL_CODE, 50]]]\n },\n default: {\n optionalFields: [],\n placeholders: {\n [STATE_OR_PROVINCE]: 'select.provinceOrTerritory'\n },\n schema: [COUNTRY, [[STREET, 70], [HOUSE_NUMBER_OR_NAME, 30]], [[POSTAL_CODE, 30], [CITY, 70]], STATE_OR_PROVINCE],\n }\n};\n\nexport const PARTIAL_ADDRESS_SCHEMA: AddressSpecifications = Object.keys(ADDRESS_SPECIFICATIONS).reduce((acc, countryCode) => {\n acc[countryCode] = {\n labels: ADDRESS_SPECIFICATIONS[countryCode].labels,\n schema: [POSTAL_CODE]\n };\n return acc;\n}, {} as AddressSpecifications);\n\nexport const COUNTRIES_WITH_CUSTOM_SPECIFICATION = Object.keys(ADDRESS_SPECIFICATIONS);\n"],"names":["FALLBACK_VALUE","ADDRESS_SCHEMA","STREET","HOUSE_NUMBER_OR_NAME","POSTAL_CODE","CITY","STATE_OR_PROVINCE","COUNTRY","ADDRESS_FIELD_TOKEN_MAP","street","houseNumberOrName","postalCode","city","ADDRESS_SPECIFICATIONS","AU","hasDataset","labels","optionalFields","placeholders","schema","BR","CA","GB","US","default","PARTIAL_ADDRESS_SCHEMA","Object","keys","reduce","acc","countryCode","COUNTRIES_WITH_CUSTOM_SPECIFICATION"],"mappings":"AAEO,MAAMA,EAAiB,MACjBC,EAAiB,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,YACzFC,EAAQC,EAAsBC,EAAaC,EAAMC,EAAmBC,GAAWN,EAGhFO,EAAkD,CAC3DC,OAAQ,gBACRC,kBAAmB,gBACnBC,WAAY,cACZC,KAAM,kBAIGC,EAAgD,CACzDC,GAAI,CACAC,YAAY,EACZC,OAAQ,CACJb,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,QACrBJ,CAACA,GAAS,WAEde,eAAgB,CAACd,GACjBe,aAAc,CACVZ,CAACA,GAAoB,gBAEzBa,OAAQ,CAACZ,EAASL,EAAQC,EAAsBE,EAAM,CAAC,CAACC,EAAmB,IAAK,CAACF,EAAa,OAElGgB,GAAI,CACAL,YAAY,EACZC,OAAQ,CACJV,CAACA,GAAoB,SAEzBY,aAAc,CACVZ,CAACA,GAAoB,iBAG7Be,GAAI,CACAN,YAAY,EACZC,OAAQ,CACJb,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,sBACrBJ,CAACA,GAAS,WAEde,eAAgB,CAACd,GACjBgB,OAAQ,CAACZ,EAASL,EAAQC,EAAsB,CAAC,CAACE,EAAM,IAAK,CAACD,EAAa,KAAME,IAErFgB,GAAI,CACAN,OAAQ,CACJX,CAACA,GAAO,YAEZc,OAAQ,CAACZ,EAAS,CAAC,CAACJ,EAAsB,IAAK,CAACD,EAAQ,KAAM,CAAC,CAACG,EAAM,IAAK,CAACD,EAAa,KAAME,IAEnGiB,GAAI,CACAR,YAAY,EACZC,OAAQ,CACJZ,CAACA,GAAc,UACfD,CAACA,GAAuB,iBACxBG,CAACA,GAAoB,QACrBJ,CAACA,GAAS,WAEde,eAAgB,CAACd,GACjBe,aAAc,CACVZ,CAACA,GAAoB,gBAEzBa,OAAQ,CAACZ,EAASL,EAAQC,EAAsBE,EAAM,CAAC,CAACC,EAAmB,IAAK,CAACF,EAAa,OAElGoB,QAAS,CACLP,eAAgB,GAChBC,aAAc,CACVZ,CAACA,GAAoB,8BAEzBa,OAAQ,CAACZ,EAAS,CAAC,CAACL,EAAQ,IAAK,CAACC,EAAsB,KAAM,CAAC,CAACC,EAAa,IAAK,CAACC,EAAM,KAAMC,KAI1FmB,EAAgDC,OAAOC,KAAKd,GAAwBe,OAAO,CAACC,EAAKC,KAC1GD,EAAIC,GAAe,CACfd,OAAQH,EAAuBiB,GAAad,OAC5CG,OAAQ,CAACf,IAENyB,GACR,CAAA,GAEUE,EAAsCL,OAAOC,KAAKd"}
@@ -1,2 +1,2 @@
1
- import{ADDRESS_SCHEMA as t}from"./constants.js";const n=(n,o,s)=>t.includes(n)?s?.[n]?o.get(s?.[n]):o.get(n):null;export{n as mapFieldKey};
1
+ import{ADDRESS_SCHEMA as s}from"./constants.js";const e=(e,d,t)=>s.includes(e)?t?.[e]?d.get(t?.[e]):d.get(e):null,d=(s,e)=>s||("billingAddress"===e||"deliveryAddress"===e?e:void 0);export{d as getAddressTypeFromLabel,e as mapFieldKey};
2
2
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/Address/utils.ts"],"sourcesContent":["import Language from '../../../language';\nimport { ADDRESS_SCHEMA } from './constants';\nimport { AddressField } from '../../../types/global-types';\nimport { StringObject } from './types';\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to prepend the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to prepend the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n if (ADDRESS_SCHEMA.includes(key as AddressField)) {\n return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n }\n return null;\n};\n"],"names":["mapFieldKey","key","i18n","countrySpecificLabels","ADDRESS_SCHEMA","includes","get"],"mappings":"gDAUO,MAAMA,EAAc,CAACC,EAAaC,EAAgBC,IACjDC,EAAeC,SAASJ,GACjBE,IAAwBF,GAAOC,EAAKI,IAAIH,IAAwBF,IAAQC,EAAKI,IAAIL,GAErF"}
1
+ {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/Address/utils.ts"],"sourcesContent":["import Language from '../../../language';\nimport { ADDRESS_SCHEMA } from './constants';\nimport { AddressField } from '../../../types/global-types';\nimport { StringObject, AddressType } from './types';\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to prepend the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to prepend the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n if (ADDRESS_SCHEMA.includes(key as AddressField)) {\n return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n }\n return null;\n};\n\nexport const getAddressTypeFromLabel = (addressType: AddressType, label: string): AddressType => {\n if (addressType) {\n return addressType;\n }\n if (label === 'billingAddress' || label === 'deliveryAddress') {\n return label;\n }\n return undefined;\n};\n"],"names":["mapFieldKey","key","i18n","countrySpecificLabels","ADDRESS_SCHEMA","includes","get","getAddressTypeFromLabel","addressType","label"],"mappings":"gDAUO,MAAMA,EAAc,CAACC,EAAaC,EAAgBC,IACjDC,EAAeC,SAASJ,GACjBE,IAAwBF,GAAOC,EAAKI,IAAIH,IAAwBF,IAAQC,EAAKI,IAAIL,GAErF,KAGEM,EAA0B,CAACC,EAA0BC,IAC1DD,IAGU,mBAAVC,GAAwC,oBAAVA,EACvBA,OADX"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as n}from"./validate.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as p}from"../../../../../utils/setFocus.js";import l from"../../../FormFields/Field/Field.js";import u from"../../../FormFields/InputEmail.js";const d=d=>{const{i18n:m}=a(),g=r(null),{handleChangeFor:c,data:h,triggerValidation:f,valid:L,errors:F,isValid:v}=i({schema:["shopperLogin"],rules:n,formHolder:g}),j=r({validateInput:null,focusInput:null}),[I,b]=o(!1),E=s(()=>{b(!0),f()},[f]);t(()=>{g.current&&d.errorMessage&&p(g.current,"shopperLogin")},[d.errorMessage]),t(()=>{h.shopperLogin&&b(!0)},[h.shopperLogin]),t(()=>{j.current.validateInput=E,d.onSetInputHandlers(j.current)},[E,d.onSetInputHandlers]);const M=s(e=>{"Enter"===e.key&&d.onPressEnter()},[d.onPressEnter]);return t(()=>{d.onChange({data:h,valid:L,errors:F,isValid:v})},[h,L,F]),e("div",{ref:g},e(l,{name:"shopperLogin",label:m.get("ctp.login.inputLabel"),errorMessage:I?d.errorMessage||F.shopperLogin&&m.get(F.shopperLogin.errorMessage):null,classNameModifiers:["shopperLogin"],errorLive:!0},e(u,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:h.shopperLogin,disabled:d.disabled,onInput:c("shopperLogin","input"),onBlur:c("shopperLogin","blur"),onKeyPress:M})))};export{d as default};
1
+ import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as n}from"./validate.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as l}from"../../../../../utils/setFocus.js";import p from"../../../FormFields/Field/Field.js";import u from"../../../FormFields/InputEmail.js";const m=m=>{const{i18n:d}=a(),c=r(null),{handleChangeFor:g,data:h,triggerValidation:f,valid:L,errors:F,isValid:v}=i({schema:["shopperLogin"],rules:n,formHolder:c}),j=r({validateInput:null,focusInput:null}),[I,b]=o(!1),E=s(()=>{b(!0),f()},[f]);t(()=>{c.current&&m.errorMessage&&l(c.current,"shopperLogin")},[m.errorMessage]),t(()=>{h.shopperLogin&&b(!0)},[h.shopperLogin]),t(()=>{j.current.validateInput=E,m.onSetInputHandlers(j.current)},[E,m.onSetInputHandlers]);const M=s(e=>{"Enter"===e.key&&m.onPressEnter()},[m.onPressEnter]);return t(()=>{m.onChange({data:h,valid:L,errors:F,isValid:v})},[h,L,F]),e("div",{ref:c},e(p,{name:"shopperLogin",label:d.get("ctp.login.inputLabel"),errorMessage:I?m.errorMessage||F.shopperLogin&&d.get(F.shopperLogin.errorMessage):null,classNameModifiers:["shopperLogin"],errorLive:!0},e(u,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:h.shopperLogin,disabled:m.disabled,onInput:g("shopperLogin","input"),onBlur:g("shopperLogin","blur"),onKeyPress:M,autocomplete:"email"})))};export{m as default};
2
2
  //# sourceMappingURL=CtPLoginInput.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\nimport { setFocusOnField } from '../../../../../utils/setFocus';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n disabled: boolean;\n errorMessage?: string;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n validateInput(): void;\n focusInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const formSchema = ['shopperLogin'];\n const containerRef = useRef<HTMLDivElement>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useFormWithA11y<CtPLoginInputDataState>({\n schema: formSchema,\n rules: loginValidationRules,\n formHolder: containerRef\n });\n const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null, focusInput: null });\n const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsLoginInputDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n useEffect(() => {\n if (containerRef.current && props.errorMessage) {\n setFocusOnField(containerRef.current, 'shopperLogin');\n }\n }, [props.errorMessage]);\n\n useEffect(() => {\n if (data.shopperLogin) setIsLoginInputDirty(true);\n }, [data.shopperLogin]);\n\n useEffect(() => {\n loginInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(loginInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnKeyPress = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n void props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n return (\n <div ref={containerRef}>\n <Field\n name=\"shopperLogin\"\n label={i18n.get('ctp.login.inputLabel')}\n errorMessage={isLoginInputDirty ? props.errorMessage || (errors.shopperLogin && i18n.get(errors.shopperLogin.errorMessage)) : null}\n classNameModifiers={['shopperLogin']}\n errorLive={true}\n >\n <InputEmail\n name={'shopperLogin'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.shopperLogin}\n disabled={props.disabled}\n onInput={handleChangeFor('shopperLogin', 'input')}\n onBlur={handleChangeFor('shopperLogin', 'blur')}\n onKeyPress={handleOnKeyPress}\n />\n </Field>\n </div>\n );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","useFormWithA11y","schema","rules","loginValidationRules","formHolder","loginInputHandlersRef","validateInput","focusInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","current","errorMessage","setFocusOnField","shopperLogin","onSetInputHandlers","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","ref","Field","name","label","get","classNameModifiers","errorLive","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress"],"mappings":"+iBA4BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,IAEXC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAwC,CACjHC,OAHe,CAAC,gBAIhBC,MAAOC,EACPC,WAAYZ,IAEVa,EAAwBZ,EAA8B,CAAEa,cAAe,KAAMC,WAAY,QACxFC,EAAmBC,GAAwBC,GAAkB,GAE9DJ,EAAgBK,EAAY,KAC9BF,GAAqB,GACrBb,KACD,CAACA,IAEJgB,EAAU,KACFpB,EAAaqB,SAAWxB,EAAMyB,cAC9BC,EAAgBvB,EAAaqB,QAAS,iBAE3C,CAACxB,EAAMyB,eAEVF,EAAU,KACFjB,EAAKqB,cAAcP,GAAqB,IAC7C,CAACd,EAAKqB,eAETJ,EAAU,KACNP,EAAsBQ,QAAQP,cAAgBA,EAC9CjB,EAAM4B,mBAAmBZ,EAAsBQ,UAChD,CAACP,EAAejB,EAAM4B,qBAEzB,MAAMC,EAAmBP,EACpBQ,IACqB,UAAdA,EAAMC,KACD/B,EAAMgC,gBAGnB,CAAChC,EAAMgC,eAOX,OAJAT,EAAU,KACNvB,EAAMiC,SAAS,CAAE3B,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbyB,EAACC,MAAAA,CAAIC,IAAKjC,GACN+B,EAACG,EAAAA,CACGC,KAAK,eACLC,MAAOtC,EAAKuC,IAAI,wBAChBf,aAAcN,EAAoBnB,EAAMyB,cAAiBhB,EAAOkB,cAAgB1B,EAAKuC,IAAI/B,EAAOkB,aAAaF,cAAiB,KAC9HgB,mBAAoB,CAAC,gBACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOxC,EAAKqB,aACZoB,SAAU/C,EAAM+C,SAChBC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,QACxC6C,WAAYrB"}
1
+ {"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\nimport { setFocusOnField } from '../../../../../utils/setFocus';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n disabled: boolean;\n errorMessage?: string;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n validateInput(): void;\n focusInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const formSchema = ['shopperLogin'];\n const containerRef = useRef<HTMLDivElement>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useFormWithA11y<CtPLoginInputDataState>({\n schema: formSchema,\n rules: loginValidationRules,\n formHolder: containerRef\n });\n const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null, focusInput: null });\n const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsLoginInputDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n useEffect(() => {\n if (containerRef.current && props.errorMessage) {\n setFocusOnField(containerRef.current, 'shopperLogin');\n }\n }, [props.errorMessage]);\n\n useEffect(() => {\n if (data.shopperLogin) setIsLoginInputDirty(true);\n }, [data.shopperLogin]);\n\n useEffect(() => {\n loginInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(loginInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnKeyPress = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n void props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n return (\n <div ref={containerRef}>\n <Field\n name=\"shopperLogin\"\n label={i18n.get('ctp.login.inputLabel')}\n errorMessage={isLoginInputDirty ? props.errorMessage || (errors.shopperLogin && i18n.get(errors.shopperLogin.errorMessage)) : null}\n classNameModifiers={['shopperLogin']}\n errorLive={true}\n >\n <InputEmail\n name={'shopperLogin'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.shopperLogin}\n disabled={props.disabled}\n onInput={handleChangeFor('shopperLogin', 'input')}\n onBlur={handleChangeFor('shopperLogin', 'blur')}\n onKeyPress={handleOnKeyPress}\n autocomplete={'email'}\n />\n </Field>\n </div>\n );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","useFormWithA11y","schema","rules","loginValidationRules","formHolder","loginInputHandlersRef","validateInput","focusInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","current","errorMessage","setFocusOnField","shopperLogin","onSetInputHandlers","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","ref","Field","name","label","get","classNameModifiers","errorLive","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","autocomplete"],"mappings":"+iBA4BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,IAEXC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAwC,CACjHC,OAHe,CAAC,gBAIhBC,MAAOC,EACPC,WAAYZ,IAEVa,EAAwBZ,EAA8B,CAAEa,cAAe,KAAMC,WAAY,QACxFC,EAAmBC,GAAwBC,GAAkB,GAE9DJ,EAAgBK,EAAY,KAC9BF,GAAqB,GACrBb,KACD,CAACA,IAEJgB,EAAU,KACFpB,EAAaqB,SAAWxB,EAAMyB,cAC9BC,EAAgBvB,EAAaqB,QAAS,iBAE3C,CAACxB,EAAMyB,eAEVF,EAAU,KACFjB,EAAKqB,cAAcP,GAAqB,IAC7C,CAACd,EAAKqB,eAETJ,EAAU,KACNP,EAAsBQ,QAAQP,cAAgBA,EAC9CjB,EAAM4B,mBAAmBZ,EAAsBQ,UAChD,CAACP,EAAejB,EAAM4B,qBAEzB,MAAMC,EAAmBP,EACpBQ,IACqB,UAAdA,EAAMC,KACD/B,EAAMgC,gBAGnB,CAAChC,EAAMgC,eAOX,OAJAT,EAAU,KACNvB,EAAMiC,SAAS,CAAE3B,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbyB,EAACC,MAAAA,CAAIC,IAAKjC,GACN+B,EAACG,EAAAA,CACGC,KAAK,eACLC,MAAOtC,EAAKuC,IAAI,wBAChBf,aAAcN,EAAoBnB,EAAMyB,cAAiBhB,EAAOkB,cAAgB1B,EAAKuC,IAAI/B,EAAOkB,aAAaF,cAAiB,KAC9HgB,mBAAoB,CAAC,gBACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOxC,EAAKqB,aACZoB,SAAU/C,EAAM+C,SAChBC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,QACxC6C,WAAYrB,EACZsB,aAAc"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as r,useRef as t,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import p from"../../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as d}from"../../../../../../utils/setFocus.js";import u from"../../../../FormFields/Field/Field.js";import c from"../../../../FormFields/InputText.js";import{getErrorMessage as m}from"../../../../../../utils/getErrorMessage.js";const f=f=>{const{i18n:g}=i(),{configuration:{disableOtpAutoFocus:j}}=l(),[C,F]=r(null),h=t(null),{handleChangeFor:v,data:b,triggerValidation:k,valid:x,errors:E,isValid:M,setData:P}=p({schema:["otp"],rules:a,formHolder:h}),y=t({validateInput:null}),I=t(null),[R,L]=r(!1),V=o(()=>{L(!0),k()},[k]);s(()=>{b.otp&&L(!0)},[b.otp]),s(()=>{!j&&I.current&&I.current.focus()},[I.current,j]),s(()=>{h.current&&f.errorMessage&&d(h.current,"otp")},[f.errorMessage]),s(()=>{y.current.validateInput=V,f.onSetInputHandlers(y.current)},[V,f.onSetInputHandlers]);const _=o(()=>{P("otp",""),F(null),j||I.current.focus(),f.onResendCode()},[f.onResendCode,I.current,j]),w=o(e=>{const r=g.get(`ctp.errors.${e}`);r&&F(r)},[g]),H=o(e=>{"Enter"===e.key&&f.onPressEnter()},[f.onPressEnter]);s(()=>{f.onChange({data:b,valid:x,errors:E,isValid:M})},[b,x,E]);const N=o(()=>R?C||f.errorMessage||m(g,E.otp,g.get("ctp.otp.fieldLabel")):null,[R,C,f.errorMessage,E.otp,g]);return e("div",{ref:h,className:"adyen-checkout-ctp__otp-field-wrapper"},e(u,{name:"oneTimePassword",label:g.get("ctp.otp.fieldLabel"),errorMessage:N(),classNameModifiers:["otp"],errorLive:!0},e(c,{name:"otp",autocorrect:"off",spellcheck:!1,value:b.otp,disabled:f.disabled,onInput:v("otp","input"),onBlur:v("otp","blur"),onKeyPress:H,setRef:e=>{I.current=e}})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:f.isValidatingOtp,onError:w,onResendCode:_})))};export{f as default};
1
+ import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as r,useRef as t,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import p from"../../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as u}from"../../../../../../utils/setFocus.js";import c from"../../../../FormFields/Field/Field.js";import d from"../../../../FormFields/InputText.js";import{getErrorMessage as m}from"../../../../../../utils/getErrorMessage.js";const f=f=>{const{i18n:g}=i(),{configuration:{disableOtpAutoFocus:j}}=l(),[C,F]=r(null),h=t(null),{handleChangeFor:v,data:b,triggerValidation:k,valid:x,errors:E,isValid:M,setData:P}=p({schema:["otp"],rules:a,formHolder:h}),y=t({validateInput:null}),I=t(null),[R,L]=r(!1),V=o(()=>{L(!0),k()},[k]);s(()=>{b.otp&&L(!0)},[b.otp]),s(()=>{!j&&I.current&&I.current.focus()},[I.current,j]),s(()=>{h.current&&f.errorMessage&&u(h.current,"otp")},[f.errorMessage]),s(()=>{y.current.validateInput=V,f.onSetInputHandlers(y.current)},[V,f.onSetInputHandlers]);const _=o(()=>{P("otp",""),F(null),j||I.current.focus(),f.onResendCode()},[f.onResendCode,I.current,j]),w=o(e=>{const r=g.get(`ctp.errors.${e}`);r&&F(r)},[g]),H=o(e=>{"Enter"===e.key&&f.onPressEnter()},[f.onPressEnter]);s(()=>{f.onChange({data:b,valid:x,errors:E,isValid:M})},[b,x,E]);const N=o(()=>R?C||f.errorMessage||m(g,E.otp,g.get("ctp.otp.fieldLabel")):null,[R,C,f.errorMessage,E.otp,g]);return e("div",{ref:h,className:"adyen-checkout-ctp__otp-field-wrapper"},e(c,{name:"oneTimePassword",label:g.get("ctp.otp.fieldLabel"),errorMessage:N(),classNameModifiers:["otp"],errorLive:!0},e(d,{name:"otp",autocorrect:"off",spellcheck:!1,value:b.otp,disabled:f.disabled,onInput:v("otp","input"),onBlur:v("otp","blur"),onKeyPress:H,setRef:e=>{I.current=e},autocomplete:"off"})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:f.isValidatingOtp,onError:w,onResendCode:_})))};export{f as default};
2
2
  //# sourceMappingURL=CtPOneTimePasswordInput.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../../utils/useForm';\nimport { setFocusOnField } from '../../../../../../utils/setFocus';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\nimport { getErrorMessage } from '../../../../../../utils/getErrorMessage';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n hideResendOtpButton: boolean;\n disabled: boolean;\n isValidatingOtp: boolean;\n errorMessage?: string;\n onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: Readonly<CtPOneTimePasswordInputProps>): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const {\n configuration: { disableOtpAutoFocus }\n } = useClickToPayContext();\n\n const formSchema = ['otp'];\n const [resendOtpError, setResendOtpError] = useState<string>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useFormWithA11y<CtPOneTimePasswordInputDataState>({\n schema: formSchema,\n rules: otpValidationRules,\n formHolder: containerRef\n });\n const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsOtpFieldDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n /**\n * If shopper changes the value of the OTP fields, input becomes dirty\n */\n useEffect(() => {\n if (data.otp) setIsOtpFieldDirty(true);\n }, [data.otp]);\n\n useEffect(() => {\n if (!disableOtpAutoFocus && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current, disableOtpAutoFocus]);\n\n useEffect(() => {\n if (containerRef.current && props.errorMessage) {\n setFocusOnField(containerRef.current, 'otp');\n }\n }, [props.errorMessage]);\n\n useEffect(() => {\n otpInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(otpInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnResendOtp = useCallback(() => {\n setData('otp', '');\n setResendOtpError(null);\n if (!disableOtpAutoFocus) {\n inputRef.current.focus();\n }\n props.onResendCode();\n }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n const handleOnResendOtpError = useCallback(\n (errorCode: string) => {\n const message = i18n.get(`ctp.errors.${errorCode}`);\n if (message) setResendOtpError(message);\n },\n [i18n]\n );\n\n const handleOnKeyPress = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n void props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n const getOtpErrorMessage = useCallback(() => {\n if (!isOtpFielDirty) return null;\n\n return resendOtpError || props.errorMessage || getErrorMessage(i18n, errors.otp, i18n.get('ctp.otp.fieldLabel'));\n }, [isOtpFielDirty, resendOtpError, props.errorMessage, errors.otp, i18n]);\n\n return (\n <div ref={containerRef} className={'adyen-checkout-ctp__otp-field-wrapper'}>\n <Field\n name=\"oneTimePassword\"\n label={i18n.get('ctp.otp.fieldLabel')}\n errorMessage={getOtpErrorMessage()}\n classNameModifiers={['otp']}\n errorLive={true}\n >\n <InputText\n name={'otp'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.otp}\n disabled={props.disabled}\n onInput={handleChangeFor('otp', 'input')}\n onBlur={handleChangeFor('otp', 'blur')}\n onKeyPress={handleOnKeyPress}\n setRef={(ref: HTMLInputElement) => {\n inputRef.current = ref;\n }}\n />\n </Field>\n <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n </div>\n </div>\n );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useFormWithA11y","schema","rules","otpValidationRules","formHolder","otpInputHandlersRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","errorMessage","setFocusOnField","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","getOtpErrorMessage","getErrorMessage","h","div","ref","className","Field","name","label","classNameModifiers","errorLive","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"2uBAkCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,MACvDC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAAkD,CACpIC,OAJe,CAAC,OAKhBC,MAAOC,EACPC,WAAYb,IAEVc,EAAsBb,EAAwC,CAAEc,cAAe,OAC/EC,EAAWf,EAAyB,OACnCgB,EAAgBC,GAAsBnB,GAAkB,GAEzDgB,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDzB,GAAuBqB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAAS3B,IAEtByB,EAAU,KACFpB,EAAasB,SAAW/B,EAAMiC,cAC9BC,EAAgBzB,EAAasB,QAAS,QAE3C,CAAC/B,EAAMiC,eAEVJ,EAAU,KACNN,EAAoBQ,QAAQP,cAAgBA,EAC5CxB,EAAMmC,mBAAmBZ,EAAoBQ,UAC9C,CAACP,EAAexB,EAAMmC,qBAEzB,MAAMC,EAAoBR,EAAY,KAClCX,EAAQ,MAAO,IACfV,EAAkB,MACbH,GACDqB,EAASM,QAAQC,QAErBhC,EAAMqC,gBACP,CAACrC,EAAMqC,aAAcZ,EAASM,QAAS3B,IAEpCkC,EAAyBV,EAC1BW,IACG,MAAMC,EAAUvC,EAAKwC,IAAI,cAAcF,KACnCC,GAASjC,EAAkBiC,IAEnC,CAACvC,IAGCyC,EAAmBd,EACpBe,IACqB,UAAdA,EAAMC,KACD5C,EAAM6C,gBAGnB,CAAC7C,EAAM6C,eAGXhB,EAAU,KACN7B,EAAM8C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAEjB,MAAMgC,EAAqBnB,EAAY,IAC9BF,EAEEpB,GAAkBN,EAAMiC,cAAgBe,EAAgB/C,EAAMc,EAAOe,IAAK7B,EAAKwC,IAAI,uBAF9D,KAG7B,CAACf,EAAgBpB,EAAgBN,EAAMiC,aAAclB,EAAOe,IAAK7B,IAEpE,OACIgD,EAACC,MAAAA,CAAIC,IAAK1C,EAAc2C,UAAW,yCAC/BH,EAACI,EAAAA,CACGC,KAAK,kBACLC,MAAOtD,EAAKwC,IAAI,sBAChBR,aAAcc,IACdS,mBAAoB,CAAC,OACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAOjD,EAAKkB,IACZgC,SAAU9D,EAAM8D,SAChBC,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,WAAYvB,EACZwB,OAASf,IACL1B,EAASM,QAAUoB,MAI/BF,EAACC,MAAAA,CAAIE,UAAW,+CACZH,EAACkB,EAAAA,CAAiBL,SAAU9D,EAAMoE,gBAAiBC,QAAS/B,EAAwBD,aAAcD"}
1
+ {"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../../utils/useForm';\nimport { setFocusOnField } from '../../../../../../utils/setFocus';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\nimport { getErrorMessage } from '../../../../../../utils/getErrorMessage';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n hideResendOtpButton: boolean;\n disabled: boolean;\n isValidatingOtp: boolean;\n errorMessage?: string;\n onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: Readonly<CtPOneTimePasswordInputProps>): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const {\n configuration: { disableOtpAutoFocus }\n } = useClickToPayContext();\n\n const formSchema = ['otp'];\n const [resendOtpError, setResendOtpError] = useState<string>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useFormWithA11y<CtPOneTimePasswordInputDataState>({\n schema: formSchema,\n rules: otpValidationRules,\n formHolder: containerRef\n });\n const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsOtpFieldDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n /**\n * If shopper changes the value of the OTP fields, input becomes dirty\n */\n useEffect(() => {\n if (data.otp) setIsOtpFieldDirty(true);\n }, [data.otp]);\n\n useEffect(() => {\n if (!disableOtpAutoFocus && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current, disableOtpAutoFocus]);\n\n useEffect(() => {\n if (containerRef.current && props.errorMessage) {\n setFocusOnField(containerRef.current, 'otp');\n }\n }, [props.errorMessage]);\n\n useEffect(() => {\n otpInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(otpInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnResendOtp = useCallback(() => {\n setData('otp', '');\n setResendOtpError(null);\n if (!disableOtpAutoFocus) {\n inputRef.current.focus();\n }\n props.onResendCode();\n }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n const handleOnResendOtpError = useCallback(\n (errorCode: string) => {\n const message = i18n.get(`ctp.errors.${errorCode}`);\n if (message) setResendOtpError(message);\n },\n [i18n]\n );\n\n const handleOnKeyPress = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n void props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n const getOtpErrorMessage = useCallback(() => {\n if (!isOtpFielDirty) return null;\n\n return resendOtpError || props.errorMessage || getErrorMessage(i18n, errors.otp, i18n.get('ctp.otp.fieldLabel'));\n }, [isOtpFielDirty, resendOtpError, props.errorMessage, errors.otp, i18n]);\n\n return (\n <div ref={containerRef} className={'adyen-checkout-ctp__otp-field-wrapper'}>\n <Field\n name=\"oneTimePassword\"\n label={i18n.get('ctp.otp.fieldLabel')}\n errorMessage={getOtpErrorMessage()}\n classNameModifiers={['otp']}\n errorLive={true}\n >\n <InputText\n name={'otp'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.otp}\n disabled={props.disabled}\n onInput={handleChangeFor('otp', 'input')}\n onBlur={handleChangeFor('otp', 'blur')}\n onKeyPress={handleOnKeyPress}\n setRef={(ref: HTMLInputElement) => {\n inputRef.current = ref;\n }}\n autocomplete={'off'}\n />\n </Field>\n <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n </div>\n </div>\n );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useFormWithA11y","schema","rules","otpValidationRules","formHolder","otpInputHandlersRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","errorMessage","setFocusOnField","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","getOtpErrorMessage","getErrorMessage","h","div","ref","className","Field","name","label","classNameModifiers","errorLive","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","autocomplete","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"2uBAkCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,MACvDC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAAkD,CACpIC,OAJe,CAAC,OAKhBC,MAAOC,EACPC,WAAYb,IAEVc,EAAsBb,EAAwC,CAAEc,cAAe,OAC/EC,EAAWf,EAAyB,OACnCgB,EAAgBC,GAAsBnB,GAAkB,GAEzDgB,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDzB,GAAuBqB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAAS3B,IAEtByB,EAAU,KACFpB,EAAasB,SAAW/B,EAAMiC,cAC9BC,EAAgBzB,EAAasB,QAAS,QAE3C,CAAC/B,EAAMiC,eAEVJ,EAAU,KACNN,EAAoBQ,QAAQP,cAAgBA,EAC5CxB,EAAMmC,mBAAmBZ,EAAoBQ,UAC9C,CAACP,EAAexB,EAAMmC,qBAEzB,MAAMC,EAAoBR,EAAY,KAClCX,EAAQ,MAAO,IACfV,EAAkB,MACbH,GACDqB,EAASM,QAAQC,QAErBhC,EAAMqC,gBACP,CAACrC,EAAMqC,aAAcZ,EAASM,QAAS3B,IAEpCkC,EAAyBV,EAC1BW,IACG,MAAMC,EAAUvC,EAAKwC,IAAI,cAAcF,KACnCC,GAASjC,EAAkBiC,IAEnC,CAACvC,IAGCyC,EAAmBd,EACpBe,IACqB,UAAdA,EAAMC,KACD5C,EAAM6C,gBAGnB,CAAC7C,EAAM6C,eAGXhB,EAAU,KACN7B,EAAM8C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAEjB,MAAMgC,EAAqBnB,EAAY,IAC9BF,EAEEpB,GAAkBN,EAAMiC,cAAgBe,EAAgB/C,EAAMc,EAAOe,IAAK7B,EAAKwC,IAAI,uBAF9D,KAG7B,CAACf,EAAgBpB,EAAgBN,EAAMiC,aAAclB,EAAOe,IAAK7B,IAEpE,OACIgD,EAACC,MAAAA,CAAIC,IAAK1C,EAAc2C,UAAW,yCAC/BH,EAACI,EAAAA,CACGC,KAAK,kBACLC,MAAOtD,EAAKwC,IAAI,sBAChBR,aAAcc,IACdS,mBAAoB,CAAC,OACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAOjD,EAAKkB,IACZgC,SAAU9D,EAAM8D,SAChBC,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,WAAYvB,EACZwB,OAASf,IACL1B,EAASM,QAAUoB,GAEvBgB,aAAc,SAGtBlB,EAACC,MAAAA,CAAIE,UAAW,+CACZH,EAACmB,EAAAA,CAAiBN,SAAU9D,EAAMqE,gBAAiBC,QAAShC,EAAwBD,aAAcD"}