@adyen/adyen-web 6.18.1 → 6.20.0

package/dist/es/components/Ach/components/AchComponent.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useState as a,useRef as o,useEffect as t,useCallback as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import c from"../../internal/FormInstruction/FormInstruction.js";import{AccountTypeSelector as u}from"./AccountTypeSelector.js";import l from"../../internal/FormFields/Fieldset/Fieldset.js";import s from"../../../utils/useForm/useForm.js";import m from"../../internal/FormFields/Field/Field.js";import d from"../../internal/FormFields/InputText.js";import{achValidationRules as b,achFormatters as N}from"./validate.js";import g from"../../internal/StoreDetails/StoreDetails.js";import p from"./useSRPanelForACHErrors.js";function f({onChange:f,payButton:h,showPayButton:V,placeholders:F,hasHolderName:M,setComponentRef:y,enableStoreDetails:j}){const w=r(()=>["selectedAccountType","routingNumber","accountNumber","accountNumberVerification",...M?["ownerName"]:[]],[M]),{i18n:A}=i(),[v,S]=a("ready"),{handleChangeFor:T,triggerValidation:x,data:C,errors:k,valid:I,isValid:B}=s({schema:w,rules:b,formatters:N}),[P,q]=a(!1),D="loading"===v,E=o(!1),H=o({setStatus:S,showValidation:()=>{E.current=!0,x()}});t(()=>{y(H.current)},[y,H.current]),p({errors:k,data:C,isValidating:E}),t(()=>{f({data:C,valid:I,errors:k,isValid:B,storePaymentMethod:P})},[f,C,I,k,B,P]);const R=n(e=>{T("accountNumber","input")(e);!!k.accountNumberVerification&&x(["accountNumberVerification"])},[T,x,C.accountNumberVerification,k.accountNumberVerification]);return e("div",{className:"adyen-checkout__ach"},e(c,null),e(l,{classNameModifiers:[],label:A.get("ach.bankAccount.title")},e(u,{placeholder:F?.accountTypeSelector,onSelect:T("selectedAccountType"),selectedAccountType:C.selectedAccountType,disabled:D,errorMessage:!!k.selectedAccountType&&A.get(k.selectedAccountType.errorMessage)}),M&&e(m,{label:A.get("ach.accountHolderNameField.title"),errorMessage:!!k.ownerName&&A.get(k.ownerName.errorMessage),isValid:!!I.ownerName,name:"ownerName"},e(d,{disabled:D,name:"ownerName",placeholder:F?.ownerName,value:C.ownerName,onInput:T("ownerName","input"),onBlur:T("ownerName","blur"),required:!0})),e(m,{label:A.get("ach.routingNumber.label"),classNameModifiers:["col-60"],errorMessage:!!k.routingNumber&&A.get(k.routingNumber.errorMessage),name:"routingNumber",isValid:!!I.routingNumber},e(d,{disabled:D,name:"routingNumber",placeholder:F?.routingNumber,value:C.routingNumber,onInput:T("routingNumber","input"),onBlur:T("routingNumber","blur"),required:!0,maxlength:9})),e(m,{label:A.get("ach.bankAccountNumber.label"),classNameModifiers:["col-40"],errorMessage:!!k.accountNumber&&A.get(k.accountNumber.errorMessage),isValid:!!I.accountNumber,name:"accountNumber"},e(d,{disabled:D,name:"accountNumber",placeholder:F?.accountNumber,value:C.accountNumber,onInput:R,onBlur:T("accountNumber","blur"),required:!0,maxlength:17})),e(m,{label:A.get("ach.bankAccountNumberVerification.label"),errorMessage:!!k.accountNumberVerification&&A.get(k.accountNumberVerification.errorMessage),name:"accountNumberVerification",isValid:!!I.accountNumberVerification},e(d,{disabled:D,name:"accountNumberVerification",placeholder:F?.accountNumberVerification,value:C.accountNumberVerification,onInput:T("accountNumberVerification","input"),onBlur:T("accountNumberVerification","blur"),required:!0,maxlength:17}))),j&&e(g,{disabled:D,onChange:q}),V&&h({status:v,label:A.get("confirmPurchase")}))}export{f as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useState as o,useRef as t,useEffect as a,useCallback as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import c from"../../internal/FormInstruction/FormInstruction.js";import{AccountTypeSelector as u}from"./AccountTypeSelector.js";import s from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../../utils/useForm/useForm.js";import m from"../../internal/FormFields/Field/Field.js";import d from"../../internal/FormFields/InputText.js";import{achValidationRules as b,achFormatters as N}from"./validate.js";import p from"../../internal/StoreDetails/StoreDetails.js";import g from"./useSRPanelForACHErrors.js";import f from"../../../core/Context/useImage.js";import{PREFIX as h}from"../../internal/Icon/constants.js";function V({onChange:V,payButton:F,showPayButton:M,placeholders:j,hasHolderName:y,setComponentRef:w,enableStoreDetails:A}){const v=f(),x=r(()=>["selectedAccountType","routingNumber","accountNumber","accountNumberVerification",...y?["ownerName"]:[]],[y]),{i18n:C}=i(),[I,S]=o("ready"),{handleChangeFor:T,triggerValidation:k,data:B,errors:q,valid:P,isValid:D}=l({schema:x,rules:b,formatters:N}),[E,H]=o(!1),R="loading"===I,_=t(!1),$=t({setStatus:S,showValidation:()=>{_.current=!0,k()}});a(()=>{w($.current)},[w,$.current]),g({errors:q,data:B,isValidating:_}),a(()=>{V({data:B,valid:P,errors:q,isValid:D,storePaymentMethod:E})},[V,B,P,q,D,E]);const z=n(e=>{T("accountNumber","input")(e);!!q.accountNumberVerification&&k(["accountNumberVerification"])},[T,k,B.accountNumberVerification,q.accountNumberVerification]);return e("div",{className:"adyen-checkout__ach"},e(c,null),e(s,{classNameModifiers:[],label:C.get("ach.bankAccount.title")},e(u,{placeholder:j?.accountTypeSelector,onSelect:T("selectedAccountType"),selectedAccountType:B.selectedAccountType,disabled:R,errorMessage:!!q.selectedAccountType&&C.get(q.selectedAccountType.errorMessage)}),y&&e(m,{label:C.get("ach.accountHolderNameField.title"),errorMessage:!!q.ownerName&&C.get(q.ownerName.errorMessage),isValid:!!P.ownerName,name:"ownerName"},e(d,{disabled:R,name:"ownerName",placeholder:j?.ownerName,value:B.ownerName,onInput:T("ownerName","input"),onBlur:T("ownerName","blur"),required:!0})),e(m,{label:C.get("ach.routingNumber.label"),classNameModifiers:["col-60"],errorMessage:!!q.routingNumber&&C.get(q.routingNumber.errorMessage),name:"routingNumber",isValid:!!P.routingNumber},e(d,{disabled:R,name:"routingNumber",placeholder:j?.routingNumber,value:B.routingNumber,onInput:T("routingNumber","input"),onBlur:T("routingNumber","blur"),required:!0,maxlength:9})),e(m,{label:C.get("ach.bankAccountNumber.label"),classNameModifiers:["col-40"],errorMessage:!!q.accountNumber&&C.get(q.accountNumber.errorMessage),isValid:!!P.accountNumber,name:"accountNumber"},e(d,{disabled:R,name:"accountNumber",placeholder:j?.accountNumber,value:B.accountNumber,onInput:z,onBlur:T("accountNumber","blur"),required:!0,maxlength:17})),e(m,{label:C.get("ach.bankAccountNumberVerification.label"),errorMessage:!!q.accountNumberVerification&&C.get(q.accountNumberVerification.errorMessage),name:"accountNumberVerification",isValid:!!P.accountNumberVerification},e(d,{disabled:R,name:"accountNumberVerification",placeholder:j?.accountNumberVerification,value:B.accountNumberVerification,onInput:T("accountNumberVerification","input"),onBlur:T("accountNumberVerification","blur"),required:!0,maxlength:17}))),A&&e(p,{disabled:R,onChange:H}),M&&F({status:I,icon:v({imageFolder:"components/"})(`${h}lock`)}))}export{V as default};
 //# sourceMappingURL=AchComponent.js.map

package/dist/es/components/Ach/components/AchComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AchComponent.js","sources":["../../../../../src/components/Ach/components/AchComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { AccountTypeSelector } from './AccountTypeSelector';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { achValidationRules, achFormatters } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { AchPlaceholders } from '../types';\nimport type { AchStateErrors } from './useSRPanelForACHErrors';\nimport useSRPanelForAchErrors from './useSRPanelForACHErrors';\n\ntype AchForm = {\n    selectedAccountType: string;\n    ownerName: string;\n    routingNumber: string;\n    accountNumber: string;\n    accountNumberVerification: string;\n};\n\ninterface AchComponentProps {\n    onChange({\n        data,\n        valid,\n        errors,\n        isValid,\n        storePaymentMethod\n    }: {\n        data: AchForm;\n        valid: { [key: string]: boolean };\n        errors: { [key: string]: any };\n        isValid: boolean;\n        storePaymentMethod: boolean;\n    }): void;\n    payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    hasHolderName: boolean;\n    showPayButton: boolean;\n    enableStoreDetails: boolean;\n    placeholders?: AchPlaceholders;\n}\n\nfunction AchComponent({ onChange, payButton, showPayButton, placeholders, hasHolderName, setComponentRef, enableStoreDetails }: AchComponentProps) {\n    const schema = useMemo(\n        () => ['selectedAccountType', 'routingNumber', 'accountNumber', 'accountNumberVerification', ...(hasHolderName ? ['ownerName'] : [])],\n        [hasHolderName]\n    );\n    const { i18n } = useCoreContext();\n    const [status, setStatus] = useState('ready');\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<AchForm>({\n        schema,\n        rules: achValidationRules,\n        formatters: achFormatters\n    });\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const isFormDisabled = status === 'loading';\n\n    const isValidating = useRef(false);\n\n    const achRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            isValidating.current = true;\n            triggerValidation();\n        }\n    });\n\n    useEffect(() => {\n        setComponentRef(achRef.current);\n    }, [setComponentRef, achRef.current]);\n\n    useSRPanelForAchErrors({ errors: errors as AchStateErrors, data, isValidating });\n\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid, storePaymentMethod });\n    }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n    /**\n     * If the \"Verify account number\" field has errors, we want to trigger\n     * its validation when there is any change done to the \"Account number\" field\n     */\n    const onAccountNumberInput = useCallback(\n        (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n            handleChangeFor('accountNumber', 'input')(event);\n\n            const hasAccountVerificationError = !!errors.accountNumberVerification;\n            if (hasAccountVerificationError) {\n                triggerValidation(['accountNumberVerification']);\n            }\n        },\n        [handleChangeFor, triggerValidation, data.accountNumberVerification, errors.accountNumberVerification]\n    );\n\n    return (\n        <div className=\"adyen-checkout__ach\">\n            <FormInstruction />\n\n            <Fieldset classNameModifiers={[]} label={i18n.get('ach.bankAccount.title')}>\n                <AccountTypeSelector\n                    placeholder={placeholders?.accountTypeSelector}\n                    onSelect={handleChangeFor('selectedAccountType')}\n                    selectedAccountType={data.selectedAccountType}\n                    disabled={isFormDisabled}\n                    errorMessage={!!errors.selectedAccountType && i18n.get(errors.selectedAccountType.errorMessage)}\n                />\n\n                {hasHolderName && (\n                    <Field\n                        label={i18n.get('ach.accountHolderNameField.title')}\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                        />\n                    </Field>\n                )}\n\n                <Field\n                    label={i18n.get('ach.routingNumber.label')}\n                    classNameModifiers={['col-60']}\n                    errorMessage={!!errors.routingNumber && i18n.get(errors.routingNumber.errorMessage)}\n                    name={'routingNumber'}\n                    isValid={!!valid.routingNumber}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'routingNumber'}\n                        placeholder={placeholders?.routingNumber}\n                        value={data.routingNumber}\n                        onInput={handleChangeFor('routingNumber', 'input')}\n                        onBlur={handleChangeFor('routingNumber', 'blur')}\n                        required={true}\n                        maxlength={9}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('ach.bankAccountNumber.label')}\n                    classNameModifiers={['col-40']}\n                    errorMessage={!!errors.accountNumber && i18n.get(errors.accountNumber.errorMessage)}\n                    isValid={!!valid.accountNumber}\n                    name={'accountNumber'}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'accountNumber'}\n                        placeholder={placeholders?.accountNumber}\n                        value={data.accountNumber}\n                        onInput={onAccountNumberInput}\n                        onBlur={handleChangeFor('accountNumber', 'blur')}\n                        required={true}\n                        maxlength={17}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('ach.bankAccountNumberVerification.label')}\n                    errorMessage={!!errors.accountNumberVerification && i18n.get(errors.accountNumberVerification.errorMessage)}\n                    name={'accountNumberVerification'}\n                    isValid={!!valid.accountNumberVerification}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'accountNumberVerification'}\n                        placeholder={placeholders?.accountNumberVerification}\n                        value={data.accountNumberVerification}\n                        onInput={handleChangeFor('accountNumberVerification', 'input')}\n                        onBlur={handleChangeFor('accountNumberVerification', 'blur')}\n                        required={true}\n                        maxlength={17}\n                    />\n                </Field>\n            </Fieldset>\n\n            {enableStoreDetails && <StoreDetails disabled={isFormDisabled} onChange={setStorePaymentMethod} />}\n\n            {showPayButton && payButton({ status, label: i18n.get('confirmPurchase') })}\n        </div>\n    );\n}\n\nexport default AchComponent;\n"],"names":["AchComponent","onChange","payButton","showPayButton","placeholders","hasHolderName","setComponentRef","enableStoreDetails","schema","useMemo","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","data","errors","valid","isValid","useForm","rules","achValidationRules","formatters","achFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","isValidating","useRef","achRef","showValidation","current","useEffect","useSRPanelForAchErrors","onAccountNumberInput","useCallback","event","accountNumberVerification","h","div","className","FormInstruction","Fieldset","classNameModifiers","label","get","AccountTypeSelector","placeholder","accountTypeSelector","onSelect","selectedAccountType","disabled","errorMessage","Field","ownerName","name","InputText","value","onInput","onBlur","required","routingNumber","maxlength","accountNumber","StoreDetails"],"mappings":"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"}
+{"version":3,"file":"AchComponent.js","sources":["../../../../../src/components/Ach/components/AchComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { AccountTypeSelector } from './AccountTypeSelector';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { achValidationRules, achFormatters } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\nimport useSRPanelForAchErrors from './useSRPanelForACHErrors';\nimport useImage from '../../../core/Context/useImage';\nimport { PREFIX } from '../../internal/Icon/constants';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { AchPlaceholders } from '../types';\nimport type { AchStateErrors } from './useSRPanelForACHErrors';\n\ntype AchForm = {\n    selectedAccountType: string;\n    ownerName: string;\n    routingNumber: string;\n    accountNumber: string;\n    accountNumberVerification: string;\n};\n\ninterface AchComponentProps {\n    onChange({\n        data,\n        valid,\n        errors,\n        isValid,\n        storePaymentMethod\n    }: {\n        data: AchForm;\n        valid: { [key: string]: boolean };\n        errors: { [key: string]: any };\n        isValid: boolean;\n        storePaymentMethod: boolean;\n    }): void;\n    payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    hasHolderName: boolean;\n    showPayButton: boolean;\n    enableStoreDetails: boolean;\n    placeholders?: AchPlaceholders;\n}\n\nfunction AchComponent({ onChange, payButton, showPayButton, placeholders, hasHolderName, setComponentRef, enableStoreDetails }: AchComponentProps) {\n    const getImage = useImage();\n    const schema = useMemo(\n        () => ['selectedAccountType', 'routingNumber', 'accountNumber', 'accountNumberVerification', ...(hasHolderName ? ['ownerName'] : [])],\n        [hasHolderName]\n    );\n    const { i18n } = useCoreContext();\n    const [status, setStatus] = useState('ready');\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<AchForm>({\n        schema,\n        rules: achValidationRules,\n        formatters: achFormatters\n    });\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const isFormDisabled = status === 'loading';\n\n    const isValidating = useRef(false);\n\n    const achRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            isValidating.current = true;\n            triggerValidation();\n        }\n    });\n\n    useEffect(() => {\n        setComponentRef(achRef.current);\n    }, [setComponentRef, achRef.current]);\n\n    useSRPanelForAchErrors({ errors: errors as AchStateErrors, data, isValidating });\n\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid, storePaymentMethod });\n    }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n    /**\n     * If the \"Verify account number\" field has errors, we want to trigger\n     * its validation when there is any change done to the \"Account number\" field\n     */\n    const onAccountNumberInput = useCallback(\n        (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n            handleChangeFor('accountNumber', 'input')(event);\n\n            const hasAccountVerificationError = !!errors.accountNumberVerification;\n            if (hasAccountVerificationError) {\n                triggerValidation(['accountNumberVerification']);\n            }\n        },\n        [handleChangeFor, triggerValidation, data.accountNumberVerification, errors.accountNumberVerification]\n    );\n\n    return (\n        <div className=\"adyen-checkout__ach\">\n            <FormInstruction />\n\n            <Fieldset classNameModifiers={[]} label={i18n.get('ach.bankAccount.title')}>\n                <AccountTypeSelector\n                    placeholder={placeholders?.accountTypeSelector}\n                    onSelect={handleChangeFor('selectedAccountType')}\n                    selectedAccountType={data.selectedAccountType}\n                    disabled={isFormDisabled}\n                    errorMessage={!!errors.selectedAccountType && i18n.get(errors.selectedAccountType.errorMessage)}\n                />\n\n                {hasHolderName && (\n                    <Field\n                        label={i18n.get('ach.accountHolderNameField.title')}\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                        />\n                    </Field>\n                )}\n\n                <Field\n                    label={i18n.get('ach.routingNumber.label')}\n                    classNameModifiers={['col-60']}\n                    errorMessage={!!errors.routingNumber && i18n.get(errors.routingNumber.errorMessage)}\n                    name={'routingNumber'}\n                    isValid={!!valid.routingNumber}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'routingNumber'}\n                        placeholder={placeholders?.routingNumber}\n                        value={data.routingNumber}\n                        onInput={handleChangeFor('routingNumber', 'input')}\n                        onBlur={handleChangeFor('routingNumber', 'blur')}\n                        required={true}\n                        maxlength={9}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('ach.bankAccountNumber.label')}\n                    classNameModifiers={['col-40']}\n                    errorMessage={!!errors.accountNumber && i18n.get(errors.accountNumber.errorMessage)}\n                    isValid={!!valid.accountNumber}\n                    name={'accountNumber'}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'accountNumber'}\n                        placeholder={placeholders?.accountNumber}\n                        value={data.accountNumber}\n                        onInput={onAccountNumberInput}\n                        onBlur={handleChangeFor('accountNumber', 'blur')}\n                        required={true}\n                        maxlength={17}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('ach.bankAccountNumberVerification.label')}\n                    errorMessage={!!errors.accountNumberVerification && i18n.get(errors.accountNumberVerification.errorMessage)}\n                    name={'accountNumberVerification'}\n                    isValid={!!valid.accountNumberVerification}\n                >\n                    <InputText\n                        disabled={isFormDisabled}\n                        name={'accountNumberVerification'}\n                        placeholder={placeholders?.accountNumberVerification}\n                        value={data.accountNumberVerification}\n                        onInput={handleChangeFor('accountNumberVerification', 'input')}\n                        onBlur={handleChangeFor('accountNumberVerification', 'blur')}\n                        required={true}\n                        maxlength={17}\n                    />\n                </Field>\n            </Fieldset>\n\n            {enableStoreDetails && <StoreDetails disabled={isFormDisabled} onChange={setStorePaymentMethod} />}\n\n            {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`) })}\n        </div>\n    );\n}\n\nexport default AchComponent;\n"],"names":["AchComponent","onChange","payButton","showPayButton","placeholders","hasHolderName","setComponentRef","enableStoreDetails","getImage","useImage","schema","useMemo","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","data","errors","valid","isValid","useForm","rules","achValidationRules","formatters","achFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","isValidating","useRef","achRef","showValidation","current","useEffect","useSRPanelForAchErrors","onAccountNumberInput","useCallback","event","accountNumberVerification","h","div","className","FormInstruction","Fieldset","classNameModifiers","label","get","AccountTypeSelector","placeholder","accountTypeSelector","onSelect","selectedAccountType","disabled","errorMessage","Field","ownerName","name","InputText","value","onInput","onBlur","required","routingNumber","maxlength","accountNumber","StoreDetails","icon","imageFolder","PREFIX"],"mappings":"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"}

package/dist/es/components/Ach/components/useSRPanelForACHErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSRPanelForACHErrors.js","sources":["../../../../../src/components/Ach/components/useSRPanelForACHErrors.ts"],"sourcesContent":["import { useEffect, useState, MutableRef } from 'preact/hooks';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface AchStateErrors {\n    selectedAccountType: ValidationRuleResult;\n    ownerName: ValidationRuleResult;\n    routingNumber: ValidationRuleResult;\n    accountNumber: ValidationRuleResult;\n    accountNumberVerification: ValidationRuleResult;\n}\n\ninterface UseSRPanelForErrorsProps {\n    errors: AchStateErrors;\n    data: AchStateData;\n    isValidating: MutableRef<boolean>;\n}\n\ninterface AchStateData {\n    selectedAccountType: string;\n    ownerName: string;\n    routingNumber: string;\n    accountNumber: string;\n    accountNumberVerification: string;\n}\n\nconst useSRPanelForACHErrors = ({ errors, data, isValidating }: UseSRPanelForErrorsProps) => {\n    // Relates to onBlur errors\n    const [sortedErrorList, setSortedErrorList] = useState(null);\n    // Get the previous value (Relates to onBlur errors)\n    const previousSortedErrors = usePrevious(sortedErrorList);\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    // Fixed layout for the ACH comp\n    const layout = ['selectedAccountType', 'ownerName', 'routingNumber', 'accountNumber', 'accountNumberVerification'];\n\n    useEffect(() => {\n        try {\n            const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: isValidating.current, layout });\n\n            // Relates to onBlur errors\n            const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n            // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n            setSortedErrorList(currentErrorsSortedByLayout);\n\n            /**\n             * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n             */\n            switch (srPanelResp?.action) {\n                // A call to focus the first field in error will always follow the call to validate the whole form\n                case ERROR_ACTION_FOCUS_FIELD:\n                    // Focus field in error, if required\n                    if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__ach', srPanelResp.fieldToFocus);\n                    // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                    setTimeout(() => {\n                        isValidating.current = false;\n                    }, 300);\n                    break;\n\n                /**\n                 * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n                 */\n                case ERROR_ACTION_BLUR_SCENARIO: {\n                    const difference = getArrayDifferences(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                    const latestErrorMsg = difference?.[0];\n\n                    if (latestErrorMsg) {\n                        // Is error actually a blur based one - depends on the specific fields in a component as to whether they validate on blur\n                        // In the case of the ACH form currently all the fields validate on blur\n                        const isBlurBasedError = true;\n\n                        // Only add blur based errors to the error panel - doing this step prevents the non-blur based errors from being read out twice\n                        const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                        setSRMessagesFromStrings(latestSRError);\n                    } else {\n                        // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                        clearSRPanel();\n                    }\n                    break;\n                }\n                default:\n                    break;\n            }\n        } catch (_) {\n            // We don't handle the error related to the sr panel, let it fail silently.\n        }\n    }, [errors, data]);\n};\n\nexport default useSRPanelForACHErrors;\n"],"names":["useSRPanelForACHErrors","errors","data","isValidating","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","layout","useEffect","srPanelResp","current","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorMessage","_"],"mappings":"ubAgCA,MAAMA,EAAyB,EAAGC,SAAQC,OAAMC,mBAE5C,MAAOC,EAAiBC,GAAsBC,EAAS,MAEjDC,EAAuBC,EAAYJ,IACnCK,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAC1FC,EAAuCL,IAA2B,IAGlEM,EAAS,CAAC,sBAAuB,YAAa,gBAAiB,gBAAiB,6BAEtFC,EAAU,KACN,IACI,MAAMC,EAAyCH,IAAgB,CAAEb,SAAQE,aAAcA,EAAae,QAASH,WAGvGI,EAA8BF,GAAaE,4BAOjD,OALAd,EAAmBc,GAKXF,GAAaG,QAEjB,KAAKC,EAEGT,GAAmBU,EAAgB,uBAAwBL,EAAYM,cAE3EC,WAAW,KACPrB,EAAae,SAAU,GACxB,KACH,MAKJ,KAAKO,EAA4B,CAC7B,MAAMC,EAAaC,EAAoBR,EAA6BZ,EAAsB,SAEpFqB,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAGhB,MAGMC,GAHmB,EAGgBD,EAAeE,aAAe,KACvEpB,EAAyBmB,QAGzBlB,IAEJ,KACJ,EAIR,CAAE,MAAOoB,GAET,GACD,CAAC9B,EAAQC"}
+{"version":3,"file":"useSRPanelForACHErrors.js","sources":["../../../../../src/components/Ach/components/useSRPanelForACHErrors.ts"],"sourcesContent":["import { useEffect, useState, MutableRef } from 'preact/hooks';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface AchStateErrors {\n    selectedAccountType: ValidationRuleResult;\n    ownerName: ValidationRuleResult;\n    routingNumber: ValidationRuleResult;\n    accountNumber: ValidationRuleResult;\n    accountNumberVerification: ValidationRuleResult;\n}\n\ninterface UseSRPanelForErrorsProps {\n    errors: AchStateErrors;\n    data: AchStateData;\n    isValidating: MutableRef<boolean>;\n}\n\ninterface AchStateData {\n    selectedAccountType: string;\n    ownerName: string;\n    routingNumber: string;\n    accountNumber: string;\n    accountNumberVerification: string;\n}\n\nconst useSRPanelForACHErrors = ({ errors, data, isValidating }: UseSRPanelForErrorsProps) => {\n    // Relates to onBlur errors\n    const [sortedErrorList, setSortedErrorList] = useState(null);\n    // Get the previous value (Relates to onBlur errors)\n    const previousSortedErrors = usePrevious(sortedErrorList);\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    // Fixed layout for the ACH comp\n    const layout = ['selectedAccountType', 'ownerName', 'routingNumber', 'accountNumber', 'accountNumberVerification'];\n\n    useEffect(() => {\n        try {\n            const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: isValidating.current, layout });\n\n            // Relates to onBlur errors\n            const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n            // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n            setSortedErrorList(currentErrorsSortedByLayout);\n\n            /**\n             * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n             */\n            switch (srPanelResp?.action) {\n                // A call to focus the first field in error will always follow the call to validate the whole form\n                case ERROR_ACTION_FOCUS_FIELD:\n                    // Focus field in error, if required\n                    if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__ach', srPanelResp.fieldToFocus);\n                    // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                    setTimeout(() => {\n                        isValidating.current = false;\n                    }, 300);\n                    break;\n\n                /**\n                 * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n                 */\n                case ERROR_ACTION_BLUR_SCENARIO: {\n                    const difference = getArrayDifferences(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                    const latestErrorMsg = difference?.[0];\n\n                    if (latestErrorMsg) {\n                        // Is error actually a blur based one - depends on the specific fields in a component as to whether they validate on blur\n                        // In the case of the ACH form currently all the fields validate on blur\n                        const isBlurBasedError = true;\n\n                        // Only add blur based errors to the error panel - doing this step prevents the non-blur based errors from being read out twice\n                        const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                        setSRMessagesFromStrings(latestSRError);\n                    } else {\n                        // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                        clearSRPanel();\n                    }\n                    break;\n                }\n                default:\n                    break;\n            }\n        } catch (_) {\n            // We don't handle the error related to the sr panel, let it fail silently.\n        }\n    }, [errors, data]);\n};\n\nexport default useSRPanelForACHErrors;\n"],"names":["useSRPanelForACHErrors","errors","data","isValidating","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","layout","useEffect","srPanelResp","current","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorMessage","_"],"mappings":"ubAgCA,MAAMA,EAAyB,EAAGC,SAAQC,OAAMC,mBAE5C,MAAOC,EAAiBC,GAAsBC,EAAS,MAEjDC,EAAuBC,EAAYJ,IACnCK,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAC1FC,EAAuCL,IAA2B,IAGlEM,EAAS,CAAC,sBAAuB,YAAa,gBAAiB,gBAAiB,6BAEtFC,EAAU,KACN,IACI,MAAMC,EAAyCH,IAAgB,CAAEb,SAAQE,aAAcA,EAAae,QAASH,WAGvGI,EAA8BF,GAAaE,4BAOjD,OALAd,EAAmBc,GAKXF,GAAaG,QAEjB,KAAKC,EAEGT,GAAmBU,EAAgB,uBAAwBL,EAAYM,cAE3EC,WAAW,KACPrB,EAAae,SAAU,GACxB,KACH,MAKJ,KAAKO,EAA4B,CAC7B,MAAMC,EAAaC,EAAoBR,EAA6BZ,EAAsB,SAEpFqB,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAGhB,MAGMC,GAHmB,EAGgBD,EAAeE,aAAe,KACvEpB,EAAyBmB,EAC7B,MAEIlB,IAEJ,KACJ,EAIR,CAAE,MAAOoB,GAET,GACD,CAAC9B,EAAQC"}

package/dist/es/components/BankTransfer/BankTransfer.js

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import{CoreProvider as r}from"../../core/Context/CoreProvider.js";import s from"../internal/RedirectButton/RedirectButton.js";import n from"./components/BankTransferResult/BankTransferResult.js";import a from"./components/BankTransferInput/BankTransferInput.js";import{TxVariants as o}from"../tx-variants.js";function i(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}class p extends e{get isValid(){return!!this.state.isValid}formatData(){const{shopperEmail:t}=this.state.data,e=this.type!==o.bankTransfer_IBAN?{subtype:"embedded"}:{};return{paymentMethod:{type:this.type,...e},...t&&{shopperEmail:t}}}render(){return this.props.reference?t(r,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(n,{ref:this.handleRef,...this.props,onActionHandled:this.onActionHandled})):t(r,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},this.props.showEmailAddress&&t(a,{ref:this.handleRef,...this.props,onChange:this.setState}),t(s,{...this.props,showPayButton:this.props.showPayButton,name:this.displayName,onSubmit:this.submit,payButton:this.payButton}))}constructor(...t){super(...t),i(this,"state",{isValid:!this.props.showEmailAddress,data:{}}),i(this,"handleRef",t=>{this.componentRef=t})}}i(p,"type",o.bankTransfer_IBAN),i(p,"txVariants",[o.bankTransfer_IBAN,o.bankTransfer_BE,o.bankTransfer_NL,o.bankTransfer_PL,o.bankTransfer_FR,o.bankTransfer_CH,o.bankTransfer_IE,o.bankTransfer_GB,o.bankTransfer_DE]),i(p,"defaultProps",{showEmailAddress:!0});export{p as BankTransferElement,p as default};
+import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import{CoreProvider as s}from"../../core/Context/CoreProvider.js";import r from"../internal/RedirectButton/RedirectButton.js";import n from"./components/BankTransferResult/BankTransferResult.js";import a from"./components/BankTransferInput/BankTransferInput.js";import{TxVariants as o}from"../tx-variants.js";function i(t,e,s){return e in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}class p extends e{get isValid(){return!!this.state.isValid}formatData(){const{shopperEmail:t}=this.state.data,e=this.type!==o.bankTransfer_IBAN?{subtype:"embedded"}:{};return{paymentMethod:{type:this.type,...e},...t&&{shopperEmail:t}}}render(){return this.props.reference?t(s,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(n,{...this.props,onActionHandled:this.onActionHandled})):t(s,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},this.props.showEmailAddress&&t(a,{setComponentRef:this.setComponentRef,...this.props,onChange:this.setState}),t(r,{...this.props,showPayButton:this.props.showPayButton,name:this.displayName,onSubmit:this.submit,payButton:this.payButton}))}constructor(...t){super(...t),i(this,"state",{isValid:!this.props.showEmailAddress,data:{}})}}i(p,"type",o.bankTransfer_IBAN),i(p,"txVariants",[o.bankTransfer_IBAN,o.bankTransfer_BE,o.bankTransfer_NL,o.bankTransfer_PL,o.bankTransfer_FR,o.bankTransfer_CH,o.bankTransfer_IE,o.bankTransfer_GB,o.bankTransfer_DE]),i(p,"defaultProps",{showEmailAddress:!0,showContextualElement:!0,data:{shopperEmail:""}});export{p as BankTransferElement,p as default};
 //# sourceMappingURL=BankTransfer.js.map

package/dist/es/components/BankTransfer/BankTransfer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankTransfer.js","sources":["../../../../src/components/BankTransfer/BankTransfer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport RedirectButton from '../internal/RedirectButton';\nimport { BankTransferConfiguration, BankTransferState } from './types';\nimport BankTransferResult from './components/BankTransferResult';\nimport BankTransferInput from './components/BankTransferInput';\nimport { TxVariants } from '../tx-variants';\n\nexport class BankTransferElement extends UIElement<BankTransferConfiguration> {\n    public static type = TxVariants.bankTransfer_IBAN;\n    public static txVariants = [\n        TxVariants.bankTransfer_IBAN,\n        TxVariants.bankTransfer_BE,\n        TxVariants.bankTransfer_NL,\n        TxVariants.bankTransfer_PL,\n        TxVariants.bankTransfer_FR,\n        TxVariants.bankTransfer_CH,\n        TxVariants.bankTransfer_IE,\n        TxVariants.bankTransfer_GB,\n        TxVariants.bankTransfer_DE\n    ];\n\n    public static defaultProps = {\n        showEmailAddress: true\n    };\n\n    // @ts-ignore Double check why state extends all props\n    public state: BankTransferState = {\n        isValid: !this.props.showEmailAddress,\n        data: {}\n    };\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const { shopperEmail } = this.state.data;\n        const subtype = this.type !== (TxVariants.bankTransfer_IBAN as string) ? { subtype: 'embedded' } : {};\n\n        return {\n            paymentMethod: {\n                type: this.type,\n                ...subtype\n            },\n            ...(shopperEmail && { shopperEmail })\n        };\n    }\n\n    private handleRef = ref => {\n        this.componentRef = ref;\n    };\n\n    render() {\n        if (this.props.reference) {\n            return (\n                <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                    <BankTransferResult ref={this.handleRef} {...this.props} onActionHandled={this.onActionHandled} />\n                </CoreProvider>\n            );\n        }\n\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                {this.props.showEmailAddress && <BankTransferInput ref={this.handleRef} {...this.props} onChange={this.setState} />}\n                <RedirectButton\n                    {...this.props}\n                    showPayButton={this.props.showPayButton}\n                    name={this.displayName}\n                    onSubmit={this.submit}\n                    payButton={this.payButton}\n                />\n            </CoreProvider>\n        );\n    }\n}\n\nexport default BankTransferElement;\n"],"names":["BankTransferElement","UIElement","isValid","this","state","formatData","shopperEmail","data","subtype","type","TxVariants","bankTransfer_IBAN","paymentMethod","render","props","reference","h","CoreProvider","i18n","loadingContext","resources","BankTransferResult","ref","handleRef","onActionHandled","showEmailAddress","BankTransferInput","onChange","setState","RedirectButton","showPayButton","name","displayName","onSubmit","submit","payButton","super","args","_define_property","componentRef","txVariants","bankTransfer_BE","bankTransfer_NL","bankTransfer_PL","bankTransfer_FR","bankTransfer_CH","bankTransfer_IE","bankTransfer_GB","bankTransfer_DE","defaultProps"],"mappings":"ijBASO,MAAMA,UAA4BC,EAwBrC,WAAIC,GACA,QAASC,KAAKC,MAAMF,OACxB,CAKAG,UAAAA,GACI,MAAMC,aAAEA,GAAiBH,KAAKC,MAAMG,KAC9BC,EAAUL,KAAKM,OAAUC,EAAWC,kBAA+B,CAAEH,QAAS,YAAe,CAAA,EAEnG,MAAO,CACHI,cAAe,CACXH,KAAMN,KAAKM,QACRD,MAEHF,GAAgB,CAAEA,gBAE9B,CAMAO,MAAAA,GACI,OAAIV,KAAKW,MAAMC,UAEPC,EAACC,EAAAA,CAAaC,KAAMf,KAAKW,MAAMI,KAAMC,eAAgBhB,KAAKW,MAAMK,eAAgBC,UAAWjB,KAAKiB,WAC5FJ,EAACK,EAAAA,CAAmBC,IAAKnB,KAAKoB,aAAepB,KAAKW,MAAOU,gBAAiBrB,KAAKqB,mBAMvFR,EAACC,EAAAA,CAAaC,KAAMf,KAAKW,MAAMI,KAAMC,eAAgBhB,KAAKW,MAAMK,eAAgBC,UAAWjB,KAAKiB,WAC3FjB,KAAKW,MAAMW,kBAAoBT,EAACU,EAAAA,CAAkBJ,IAAKnB,KAAKoB,aAAepB,KAAKW,MAAOa,SAAUxB,KAAKyB,WACvGZ,EAACa,EAAAA,IACO1B,KAAKW,MACTgB,cAAe3B,KAAKW,MAAMgB,cAC1BC,KAAM5B,KAAK6B,YACXC,SAAU9B,KAAK+B,OACfC,UAAWhC,KAAKgC,YAIhC,mBArEGC,SAAAC,GAmBHC,EAAAnC,KAAOC,QAA2B,CAC9BF,SAAUC,KAAKW,MAAMW,iBACrBlB,KAAM,CAAA,IAuBV+B,EAAAnC,KAAQoB,YAAYD,IAChBnB,KAAKoC,aAAejB,KA5CxBgB,EADStC,EACKS,OAAOC,EAAWC,mBAChC2B,EAFStC,EAEKwC,aAAa,CACvB9B,EAAWC,kBACXD,EAAW+B,gBACX/B,EAAWgC,gBACXhC,EAAWiC,gBACXjC,EAAWkC,gBACXlC,EAAWmC,gBACXnC,EAAWoC,gBACXpC,EAAWqC,gBACXrC,EAAWsC,kBAGfV,EAdStC,EAcKiD,eAAe,CACzBxB,kBAAkB"}
+{"version":3,"file":"BankTransfer.js","sources":["../../../../src/components/BankTransfer/BankTransfer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport RedirectButton from '../internal/RedirectButton';\nimport { BankTransferConfiguration, BankTransferState } from './types';\nimport BankTransferResult from './components/BankTransferResult';\nimport BankTransferInput from './components/BankTransferInput';\nimport { TxVariants } from '../tx-variants';\n\nexport class BankTransferElement extends UIElement<BankTransferConfiguration> {\n    public static type = TxVariants.bankTransfer_IBAN;\n    public static txVariants = [\n        TxVariants.bankTransfer_IBAN,\n        TxVariants.bankTransfer_BE,\n        TxVariants.bankTransfer_NL,\n        TxVariants.bankTransfer_PL,\n        TxVariants.bankTransfer_FR,\n        TxVariants.bankTransfer_CH,\n        TxVariants.bankTransfer_IE,\n        TxVariants.bankTransfer_GB,\n        TxVariants.bankTransfer_DE\n    ];\n\n    public static defaultProps = {\n        showEmailAddress: true,\n        showContextualElement: true,\n        data: { shopperEmail: '' }\n    };\n\n    // @ts-ignore Double check why state extends all props\n    public state: BankTransferState = {\n        isValid: !this.props.showEmailAddress,\n        data: {}\n    };\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const { shopperEmail } = this.state.data;\n        const subtype = this.type !== (TxVariants.bankTransfer_IBAN as string) ? { subtype: 'embedded' } : {};\n\n        return {\n            paymentMethod: {\n                type: this.type,\n                ...subtype\n            },\n            ...(shopperEmail && { shopperEmail })\n        };\n    }\n\n    render() {\n        if (this.props.reference) {\n            return (\n                <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                    <BankTransferResult {...this.props} onActionHandled={this.onActionHandled} />\n                </CoreProvider>\n            );\n        }\n\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                {this.props.showEmailAddress && <BankTransferInput setComponentRef={this.setComponentRef} {...this.props} onChange={this.setState} />}\n                <RedirectButton\n                    {...this.props}\n                    showPayButton={this.props.showPayButton}\n                    name={this.displayName}\n                    onSubmit={this.submit}\n                    payButton={this.payButton}\n                />\n            </CoreProvider>\n        );\n    }\n}\n\nexport default BankTransferElement;\n"],"names":["BankTransferElement","UIElement","isValid","this","state","formatData","shopperEmail","data","subtype","type","TxVariants","bankTransfer_IBAN","paymentMethod","render","props","reference","h","CoreProvider","i18n","loadingContext","resources","BankTransferResult","onActionHandled","showEmailAddress","BankTransferInput","setComponentRef","onChange","setState","RedirectButton","showPayButton","name","displayName","onSubmit","submit","payButton","super","args","_define_property","txVariants","bankTransfer_BE","bankTransfer_NL","bankTransfer_PL","bankTransfer_FR","bankTransfer_CH","bankTransfer_IE","bankTransfer_GB","bankTransfer_DE","defaultProps","showContextualElement"],"mappings":"ijBASO,MAAMA,UAA4BC,EA0BrC,WAAIC,GACA,QAASC,KAAKC,MAAMF,OACxB,CAKAG,UAAAA,GACI,MAAMC,aAAEA,GAAiBH,KAAKC,MAAMG,KAC9BC,EAAUL,KAAKM,OAAUC,EAAWC,kBAA+B,CAAEH,QAAS,YAAe,CAAA,EAEnG,MAAO,CACHI,cAAe,CACXH,KAAMN,KAAKM,QACRD,MAEHF,GAAgB,CAAEA,gBAE9B,CAEAO,MAAAA,GACI,OAAIV,KAAKW,MAAMC,UAEPC,EAACC,EAAAA,CAAaC,KAAMf,KAAKW,MAAMI,KAAMC,eAAgBhB,KAAKW,MAAMK,eAAgBC,UAAWjB,KAAKiB,WAC5FJ,EAACK,EAAAA,IAAuBlB,KAAKW,MAAOQ,gBAAiBnB,KAAKmB,mBAMlEN,EAACC,EAAAA,CAAaC,KAAMf,KAAKW,MAAMI,KAAMC,eAAgBhB,KAAKW,MAAMK,eAAgBC,UAAWjB,KAAKiB,WAC3FjB,KAAKW,MAAMS,kBAAoBP,EAACQ,EAAAA,CAAkBC,gBAAiBtB,KAAKsB,mBAAqBtB,KAAKW,MAAOY,SAAUvB,KAAKwB,WACzHX,EAACY,EAAAA,IACOzB,KAAKW,MACTe,cAAe1B,KAAKW,MAAMe,cAC1BC,KAAM3B,KAAK4B,YACXC,SAAU7B,KAAK8B,OACfC,UAAW/B,KAAK+B,YAIhC,mBAnEGC,SAAAC,GAqBHC,EAAAlC,KAAOC,QAA2B,CAC9BF,SAAUC,KAAKW,MAAMS,iBACrBhB,KAAM,CAAA,KAtBV8B,EADSrC,EACKS,OAAOC,EAAWC,mBAChC0B,EAFSrC,EAEKsC,aAAa,CACvB5B,EAAWC,kBACXD,EAAW6B,gBACX7B,EAAW8B,gBACX9B,EAAW+B,gBACX/B,EAAWgC,gBACXhC,EAAWiC,gBACXjC,EAAWkC,gBACXlC,EAAWmC,gBACXnC,EAAWoC,kBAGfT,EAdSrC,EAcK+C,eAAe,CACzBxB,kBAAkB,EAClByB,uBAAuB,EACvBzC,KAAM,CAAED,aAAc"}

package/dist/es/components/BankTransfer/components/BankTransferInput/BankTransferInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import r from"../../../internal/SendCopyToEmail/SendCopyToEmail.js";import{useState as o,useEffect as t}from"../../../../external/preact/hooks/dist/hooks.js";import s from"../../../../utils/useForm/useForm.js";import{validationRules as i}from"../../../../utils/Validator/defaultRules.js";function n(n){const{i18n:l}=a(),[m,p]=o(!1),{handleChangeFor:d,triggerValidation:u,data:c,valid:h,errors:f,isValid:E,setSchema:_}=s({schema:[],defaultData:n.data,rules:{shopperEmail:i.emailRule}});return t(()=>{_(m?["shopperEmail"]:[])},[m]),this.showValidation=u,t(()=>{n.onChange({data:c,errors:f,valid:h,isValid:E})},[c,h,f,m,E]),e("div",{className:"adyen-checkout__bankTransfer"},e("p",{className:"adyen-checkout__bankTransfer__introduction"},l.get("bankTransfer.introduction")),e(r,{classNames:"adyen-checkout__bankTransfer__emailField",value:c.shopperEmail,errors:f.shopperEmail,onToggle:()=>p(!m),onInput:d("shopperEmail","input"),onBlur:d("shopperEmail","blur")}))}export{n as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import{useRef as r,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../utils/useForm/useForm.js";import{getErrorMessage as s}from"../../../../utils/getErrorMessage.js";import i from"../../../internal/FormFields/InputEmail.js";import l from"../../../internal/FormFields/Field/Field.js";import{optionalEmailValidationRule as n}from"./validationRule.js";function m(m){const{i18n:p}=a(),d=`${p.get("shopperEmail")} ${p.get("field.title.optional")}`,{handleChangeFor:u,triggerValidation:c,data:h,valid:f,errors:E,isValid:_}=t({schema:["shopperEmail"],defaultData:m.data,rules:{shopperEmail:n}}),k=r({showValidation:()=>{c()}});return o(()=>{m.onChange({data:h,errors:E,valid:f,isValid:_})},[h,f,E,_]),o(()=>{m.setComponentRef(k.current)},[m.setComponentRef]),e("div",{className:"adyen-checkout__bankTransfer"},e("p",{className:"adyen-checkout__bankTransfer__introduction"},p.get("bankTransfer.introduction")),e("div",{className:"adyen-checkout__fieldset adyen-checkout__fieldset--sendCopyToEmail adyen-checkout__bankTransfer__emailField"},e(l,{label:d,classNameModifiers:["shopperEmail"],errorMessage:!!E.shopperEmail&&s(p,E.shopperEmail,p.get("shopperEmail")),isValid:f.shopperEmail,name:"shopperEmail",showContextualElement:m.showContextualElement,contextualText:p.get("bankTransfer.shopperEmail.contextualText")},e(i,{name:"shopperEmail",autoCorrect:"off",spellCheck:!1,required:!1,value:h.shopperEmail,onInput:u("shopperEmail","input"),onBlur:u("shopperEmail","blur")}))))}export{m as default};
 //# sourceMappingURL=BankTransferInput.js.map

package/dist/es/components/BankTransfer/components/BankTransferInput/BankTransferInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankTransferInput.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferInput/BankTransferInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './BankTransferInput.scss';\nimport SendCopyToEmail from '../../../internal/SendCopyToEmail/SendCopyToEmail';\nimport { useEffect, useState } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport { BankTransferSchema } from '../../types';\nimport { validationRules } from '../../../../utils/Validator/defaultRules';\n\nfunction BankTransferInput(props) {\n    const { i18n } = useCoreContext();\n    const [showingEmail, setShowingEmail] = useState(false);\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid, setSchema } = useForm<BankTransferSchema>({\n        schema: [],\n        defaultData: props.data,\n        rules: {\n            shopperEmail: validationRules.emailRule\n        }\n    });\n\n    const toggleEmailField = () => setShowingEmail(!showingEmail);\n\n    useEffect(() => {\n        const newSchema = showingEmail ? ['shopperEmail'] : [];\n        setSchema(newSchema);\n    }, [showingEmail]);\n\n    this.showValidation = triggerValidation;\n\n    useEffect(() => {\n        props.onChange({ data, errors, valid, isValid });\n    }, [data, valid, errors, showingEmail, isValid]);\n\n    return (\n        <div className=\"adyen-checkout__bankTransfer\">\n            <p className=\"adyen-checkout__bankTransfer__introduction\">{i18n.get('bankTransfer.introduction')}</p>\n            <SendCopyToEmail\n                classNames={'adyen-checkout__bankTransfer__emailField'}\n                value={data.shopperEmail}\n                errors={errors.shopperEmail}\n                onToggle={toggleEmailField}\n                onInput={handleChangeFor('shopperEmail', 'input')}\n                onBlur={handleChangeFor('shopperEmail', 'blur')}\n            />\n        </div>\n    );\n}\n\nexport default BankTransferInput;\n"],"names":["BankTransferInput","props","i18n","useCoreContext","showingEmail","setShowingEmail","useState","handleChangeFor","triggerValidation","data","valid","errors","isValid","setSchema","useForm","schema","defaultData","rules","shopperEmail","validationRules","emailRule","useEffect","this","showValidation","onChange","h","div","className","p","get","SendCopyToEmail","classNames","value","onToggle","onInput","onBlur"],"mappings":"qbASA,SAASA,EAAkBC,GACvB,MAAMC,KAAEA,GAASC,KACVC,EAAcC,GAAmBC,GAAS,IAE3CC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,GAAcC,EAA4B,CAChHC,OAAQ,GACRC,YAAaf,EAAMQ,KACnBQ,MAAO,CACHC,aAAcC,EAAgBC,aAiBtC,OAXAC,EAAU,KAENR,EADkBT,EAAe,CAAC,gBAAkB,KAErD,CAACA,IAEJkB,KAAKC,eAAiBf,EAEtBa,EAAU,KACNpB,EAAMuB,SAAS,CAAEf,OAAME,SAAQD,QAAOE,aACvC,CAACH,EAAMC,EAAOC,EAAQP,EAAcQ,IAGnCa,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,IAAAA,CAAED,UAAU,8CAA8CzB,EAAK2B,IAAI,8BACpEJ,EAACK,EAAAA,CACGC,WAAY,2CACZC,MAAOvB,EAAKS,aACZP,OAAQA,EAAOO,aACfe,SApBa,IAAM5B,GAAiBD,GAqBpC8B,QAAS3B,EAAgB,eAAgB,SACzC4B,OAAQ5B,EAAgB,eAAgB,UAIxD"}
+{"version":3,"file":"BankTransferInput.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferInput/BankTransferInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './BankTransferInput.scss';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport { BankTransferSchema } from '../../types';\nimport { getErrorMessage } from '../../../../utils/getErrorMessage';\nimport InputEmail from '../../../internal/FormFields/InputEmail';\nimport Field from '../../../internal/FormFields/Field';\nimport { optionalEmailValidationRule } from './validationRule';\nimport { BankTransferInputProps } from './types';\n\nfunction BankTransferInput(props: Readonly<BankTransferInputProps>) {\n    const { i18n } = useCoreContext();\n    const emailOptionalLabel = `${i18n.get('shopperEmail')} ${i18n.get('field.title.optional')}`;\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<BankTransferSchema>({\n        schema: ['shopperEmail'],\n        defaultData: props.data,\n        rules: {\n            shopperEmail: optionalEmailValidationRule\n        }\n    });\n\n    const self = useRef({\n        showValidation: () => {\n            triggerValidation();\n        }\n    });\n\n    useEffect(() => {\n        props.onChange({ data, errors, valid, isValid });\n    }, [data, valid, errors, isValid]);\n\n    useEffect(() => {\n        props.setComponentRef(self.current);\n    }, [props.setComponentRef]);\n\n    return (\n        <div className=\"adyen-checkout__bankTransfer\">\n            <p className=\"adyen-checkout__bankTransfer__introduction\">{i18n.get('bankTransfer.introduction')}</p>\n            <div className=\"adyen-checkout__fieldset adyen-checkout__fieldset--sendCopyToEmail adyen-checkout__bankTransfer__emailField\">\n                <Field\n                    label={emailOptionalLabel}\n                    classNameModifiers={['shopperEmail']}\n                    errorMessage={!!errors.shopperEmail && getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                    isValid={valid.shopperEmail}\n                    name={'shopperEmail'}\n                    showContextualElement={props.showContextualElement}\n                    contextualText={i18n.get('bankTransfer.shopperEmail.contextualText')}\n                >\n                    <InputEmail\n                        name={'shopperEmail'}\n                        autoCorrect={'off'}\n                        spellCheck={false}\n                        required={false}\n                        value={data.shopperEmail}\n                        onInput={handleChangeFor('shopperEmail', 'input')}\n                        onBlur={handleChangeFor('shopperEmail', 'blur')}\n                    />\n                </Field>\n            </div>\n        </div>\n    );\n}\n\nexport default BankTransferInput;\n"],"names":["BankTransferInput","props","i18n","useCoreContext","emailOptionalLabel","get","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","defaultData","rules","shopperEmail","optionalEmailValidationRule","self","useRef","showValidation","useEffect","onChange","setComponentRef","current","h","div","className","p","Field","label","classNameModifiers","errorMessage","getErrorMessage","name","showContextualElement","contextualText","InputEmail","autoCorrect","spellCheck","required","value","onInput","onBlur"],"mappings":"+hBAYA,SAASA,EAAkBC,GACvB,MAAMC,KAAEA,GAASC,IACXC,EAAqB,GAAGF,EAAKG,IAAI,mBAAmBH,EAAKG,IAAI,2BAE7DC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA4B,CACrGC,OAAQ,CAAC,gBACTC,YAAab,EAAMO,KACnBO,MAAO,CACHC,aAAcC,KAIhBC,EAAOC,EAAO,CAChBC,eAAgB,KACZb,OAYR,OARAc,EAAU,KACNpB,EAAMqB,SAAS,CAAEd,OAAME,SAAQD,QAAOE,aACvC,CAACH,EAAMC,EAAOC,EAAQC,IAEzBU,EAAU,KACNpB,EAAMsB,gBAAgBL,EAAKM,UAC5B,CAACvB,EAAMsB,kBAGNE,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,IAAAA,CAAED,UAAU,8CAA8CzB,EAAKG,IAAI,8BACpEoB,EAACC,MAAAA,CAAIC,UAAU,+GACXF,EAACI,EAAAA,CACGC,MAAO1B,EACP2B,mBAAoB,CAAC,gBACrBC,eAAgBtB,EAAOM,cAAgBiB,EAAgB/B,EAAMQ,EAAOM,aAAcd,EAAKG,IAAI,iBAC3FM,QAASF,EAAMO,aACfkB,KAAM,eACNC,sBAAuBlC,EAAMkC,sBAC7BC,eAAgBlC,EAAKG,IAAI,6CAEzBoB,EAACY,EAAAA,CACGH,KAAM,eACNI,YAAa,MACbC,YAAY,EACZC,UAAU,EACVC,MAAOjC,EAAKQ,aACZ0B,QAASpC,EAAgB,eAAgB,SACzCqC,OAAQrC,EAAgB,eAAgB,YAMhE"}

package/dist/es/components/BankTransfer/components/BankTransferInput/validationRule.js

@@ -0,0 +1,2 @@
+import{isEmpty as r}from"../../../../utils/validator-utils.js";import{email as t}from"../../../../utils/regex.js";import{ERROR_FIELD_INVALID as o}from"../../../../core/Errors/constants.js";const s={validate:o=>!!r(o)||o.length>=6&&o.length<=320&&t.test(o),errorMessage:o,modes:["blur"]};export{s as optionalEmailValidationRule};
+//# sourceMappingURL=validationRule.js.map

package/dist/es/components/BankTransfer/components/BankTransferInput/validationRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validationRule.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferInput/validationRule.ts"],"sourcesContent":["import { ValidatorRule } from '../../../../utils/Validator/types';\nimport { isEmpty } from '../../../../utils/validator-utils';\nimport { email } from '../../../../utils/regex';\nimport { ERROR_FIELD_INVALID } from '../../../../core/Errors/constants';\n\nexport const optionalEmailValidationRule: ValidatorRule = {\n    validate: value => {\n        if (isEmpty(value)) {\n            return true;\n        }\n        return value.length >= 6 && value.length <= 320 && email.test(value);\n    },\n    errorMessage: ERROR_FIELD_INVALID,\n    modes: ['blur']\n};\n"],"names":["optionalEmailValidationRule","validate","value","isEmpty","length","email","test","errorMessage","ERROR_FIELD_INVALID","modes"],"mappings":"mMAKaA,EAA6C,CACtDC,SAAUC,KACFC,EAAQD,IAGLA,EAAME,QAAU,GAAKF,EAAME,QAAU,KAAOC,EAAMC,KAAKJ,GAElEK,aAAcC,EACdC,MAAO,CAAC"}

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferResult.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../../internal/Voucher/Voucher.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import n from"../../../../core/Context/useImage.js";import{extractCommonPropsForVoucher as t}from"../../../internal/Voucher/utils.js";function o(o){const{reference:i}=o,{i18n:s}=a(),c=n();return e(r,{...t({props:o,i18n:s,introKey:"bankTransfer.instructions",getImage:c()}),reference:"",voucherDetails:[{label:s.get("bankTransfer.beneficiary"),value:o.beneficiary},{label:s.get("bankTransfer.iban"),value:o.iban},{label:s.get("bankTransfer.bic"),value:o.bic},{label:s.get("bankTransfer.reference"),value:i}]})}export{o as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import r from"../../../../core/Context/useImage.js";import t from"../../../internal/DetailsTable/DetailsTable.js";import{BankTransferResultInstructions as n}from"./BankTransferResultInstructions.js";import o from"./BankTransferVoucher.js";function l(l){const{i18n:u}=a(),s=r();return e(o,{paymentMethodType:l.paymentMethodType,imageUrl:s()(l.paymentMethodType),onActionHandled:l.onActionHandled,amount:u.amount(l.totalAmount.value,l.totalAmount.currency),instructions:e(n,null),voucherDetails:e(t,{shouldShowCopyButton:!0,tableFields:[{label:u.get("bankTransfer.beneficiary"),value:l.beneficiary},{label:u.get("bankTransfer.accountNumber"),value:l.accountNumber},{label:u.get("bankTransfer.sortCode"),value:l.sortCode},{label:u.get("bankTransfer.routingNumber"),value:l.routingNumber},{label:u.get("bankTransfer.iban"),value:l.iban},{label:u.get("bankTransfer.bic"),value:l.bic},{label:u.get("bankTransfer.reference"),value:l.reference}]})})}export{l as default};
 //# sourceMappingURL=BankTransferResult.js.map

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankTransferResult.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferResult/BankTransferResult.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Voucher from '../../../internal/Voucher';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport { extractCommonPropsForVoucher } from '../../../internal/Voucher/utils';\nimport type { ActionHandledReturnObject } from '../../../../types/global-types';\n\nexport interface BankTransferResultProps {\n    ref?: (ref: any) => void;\n    paymentMethodType?: string;\n    reference?: string;\n    totalAmount?: { value: number; currency: string };\n    beneficiary?: string;\n    iban?: string;\n    bic?: string;\n    onActionHandled?: (actionHandledObj: ActionHandledReturnObject) => void;\n}\n\nexport default function BankTransferResult(props: BankTransferResultProps) {\n    const { reference } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    return (\n        <Voucher\n            {...extractCommonPropsForVoucher({ props, i18n, introKey: 'bankTransfer.instructions', getImage: getImage() })}\n            reference={''} // Overwrite the passed reference, so it is not displayed in its own section (since it is already part of the voucherDetails)\n            voucherDetails={[\n                { label: i18n.get('bankTransfer.beneficiary'), value: props.beneficiary },\n                { label: i18n.get('bankTransfer.iban'), value: props.iban },\n                { label: i18n.get('bankTransfer.bic'), value: props.bic },\n                { label: i18n.get('bankTransfer.reference'), value: reference }\n            ]}\n        />\n    );\n}\n"],"names":["BankTransferResult","props","reference","i18n","useCoreContext","getImage","useImage","h","Voucher","extractCommonPropsForVoucher","introKey","voucherDetails","label","get","value","beneficiary","iban","bic"],"mappings":"+UAkBe,SAASA,EAAmBC,GACvC,MAAMC,UAAEA,GAAcD,GAChBE,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,EAAAA,IACOC,EAA6B,CAAER,QAAOE,OAAMO,SAAU,4BAA6BL,SAAUA,MACjGH,UAAW,GACXS,eAAgB,CACZ,CAAEC,MAAOT,EAAKU,IAAI,4BAA6BC,MAAOb,EAAMc,aAC5D,CAAEH,MAAOT,EAAKU,IAAI,qBAAsBC,MAAOb,EAAMe,MACrD,CAAEJ,MAAOT,EAAKU,IAAI,oBAAqBC,MAAOb,EAAMgB,KACpD,CAAEL,MAAOT,EAAKU,IAAI,0BAA2BC,MAAOZ,KAIpE"}
+{"version":3,"file":"BankTransferResult.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferResult/BankTransferResult.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport DetailsTable from '../../../internal/DetailsTable';\nimport { BankTransferResultInstructions } from './BankTransferResultInstructions';\nimport BankTransferVoucher from './BankTransferVoucher';\nimport type { ActionHandledReturnObject } from '../../../../types/global-types';\n\nexport interface BankTransferResultProps {\n    paymentMethodType?: string;\n    reference?: string;\n    totalAmount?: { value: number; currency: string };\n    beneficiary?: string;\n    iban?: string;\n    bic?: string;\n    accountNumber?: string;\n    sortCode?: string;\n    routingNumber?: string;\n    onActionHandled?: (actionHandledObj: ActionHandledReturnObject) => void;\n}\n\nexport default function BankTransferResult(props: BankTransferResultProps) {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    return (\n        <BankTransferVoucher\n            paymentMethodType={props.paymentMethodType}\n            imageUrl={getImage()(props.paymentMethodType)}\n            onActionHandled={props.onActionHandled}\n            amount={i18n.amount(props.totalAmount.value, props.totalAmount.currency)}\n            instructions={<BankTransferResultInstructions />}\n            voucherDetails={\n                <DetailsTable\n                    shouldShowCopyButton\n                    tableFields={[\n                        { label: i18n.get('bankTransfer.beneficiary'), value: props.beneficiary },\n                        { label: i18n.get('bankTransfer.accountNumber'), value: props.accountNumber },\n                        { label: i18n.get('bankTransfer.sortCode'), value: props.sortCode },\n                        { label: i18n.get('bankTransfer.routingNumber'), value: props.routingNumber },\n                        { label: i18n.get('bankTransfer.iban'), value: props.iban },\n                        { label: i18n.get('bankTransfer.bic'), value: props.bic },\n                        { label: i18n.get('bankTransfer.reference'), value: props.reference }\n                    ]}\n                />\n            }\n        />\n    );\n}\n"],"names":["BankTransferResult","props","i18n","useCoreContext","getImage","useImage","h","BankTransferVoucher","paymentMethodType","imageUrl","onActionHandled","amount","totalAmount","value","currency","instructions","BankTransferResultInstructions","voucherDetails","DetailsTable","shouldShowCopyButton","tableFields","label","get","beneficiary","accountNumber","sortCode","routingNumber","iban","bic","reference"],"mappings":"oYAqBe,SAASA,EAAmBC,GACvC,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,EAAAA,CACGC,kBAAmBP,EAAMO,kBACzBC,SAAUL,IAAWH,EAAMO,mBAC3BE,gBAAiBT,EAAMS,gBACvBC,OAAQT,EAAKS,OAAOV,EAAMW,YAAYC,MAAOZ,EAAMW,YAAYE,UAC/DC,aAAcT,EAACU,EAAAA,MACfC,eACIX,EAACY,EAAAA,CACGC,sBAAAA,EACAC,YAAa,CACT,CAAEC,MAAOnB,EAAKoB,IAAI,4BAA6BT,MAAOZ,EAAMsB,aAC5D,CAAEF,MAAOnB,EAAKoB,IAAI,8BAA+BT,MAAOZ,EAAMuB,eAC9D,CAAEH,MAAOnB,EAAKoB,IAAI,yBAA0BT,MAAOZ,EAAMwB,UACzD,CAAEJ,MAAOnB,EAAKoB,IAAI,8BAA+BT,MAAOZ,EAAMyB,eAC9D,CAAEL,MAAOnB,EAAKoB,IAAI,qBAAsBT,MAAOZ,EAAM0B,MACrD,CAAEN,MAAOnB,EAAKoB,IAAI,oBAAqBT,MAAOZ,EAAM2B,KACpD,CAAEP,MAAOnB,EAAKoB,IAAI,0BAA2BT,MAAOZ,EAAM4B,eAMlF"}

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferResultInstructions.js

@@ -0,0 +1,2 @@
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCoreContext as r}from"../../../../core/Context/CoreProvider.js";import{TimelineWrapper as t}from"../../../internal/Timeline/TimelineWrapper.js";import{Timeline as n}from"../../../internal/Timeline/Timeline.js";const i=()=>{const{i18n:i}=r();return e(t,null,e(n,{instructions:[i.get("bankTransfer.instruction.step1"),i.get("bankTransfer.instruction.step2"),i.get("bankTransfer.instruction.step3"),i.get("bankTransfer.instruction.step4")]}))};export{i as BankTransferResultInstructions};
+//# sourceMappingURL=BankTransferResultInstructions.js.map

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferResultInstructions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BankTransferResultInstructions.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferResult/BankTransferResultInstructions.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { Timeline, TimelineWrapper } from '../../../internal/Timeline';\n\nconst BankTransferResultInstructions = () => {\n    const { i18n } = useCoreContext();\n\n    return (\n        <TimelineWrapper>\n            <Timeline\n                instructions={[\n                    i18n.get('bankTransfer.instruction.step1'),\n                    i18n.get('bankTransfer.instruction.step2'),\n                    i18n.get('bankTransfer.instruction.step3'),\n                    i18n.get('bankTransfer.instruction.step4')\n                ]}\n            />\n        </TimelineWrapper>\n    );\n};\n\nexport { BankTransferResultInstructions };\n"],"names":["BankTransferResultInstructions","i18n","useCoreContext","h","TimelineWrapper","Timeline","instructions","get"],"mappings":"uSAIA,MAAMA,EAAiC,KACnC,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,aAAc,CACVL,EAAKM,IAAI,kCACTN,EAAKM,IAAI,kCACTN,EAAKM,IAAI,kCACTN,EAAKM,IAAI"}

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferVoucher.js

@@ -0,0 +1,2 @@
+import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{useCoreContext as r}from"../../../../core/Context/CoreProvider.js";function c({voucherDetails:c,className:o="",...s}){const{i18n:n}=r();return s.onActionHandled?.({componentType:s.paymentMethodType,actionDescription:"voucher-presented"}),e("div",{className:a("adyen-checkout__voucher-result","adyen-checkout__voucher-result--bankTransfer",`adyen-checkout__voucher-result--${s.paymentMethodType}`,o)},e("div",{className:"adyen-checkout__voucher-result__top"},e("div",{className:"adyen-checkout__voucher-result__image"},!!s.imageUrl&&e("span",{className:"adyen-checkout__voucher-result__image__wrapper"},e("img",{alt:s.paymentMethodType,className:"adyen-checkout__voucher-result__image__brand",src:s.imageUrl}))),s.amount&&e("div",{className:"adyen-checkout__voucher-result__amount"},s.amount),s.instructions&&e(t,null,e("div",{className:"adyen-checkout__voucher-result-title"},n.get("bankTransfer.instruction.title")),s.instructions)),e("div",{className:"adyen-checkout__voucher-result__bottom"},c&&e(t,null,e("div",{className:"adyen-checkout__voucher-result-title"},n.get("bankTransfer.details.title")),c)))}export{c as default};
+//# sourceMappingURL=BankTransferVoucher.js.map

package/dist/es/components/BankTransfer/components/BankTransferResult/BankTransferVoucher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BankTransferVoucher.js","sources":["../../../../../../src/components/BankTransfer/components/BankTransferResult/BankTransferVoucher.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport classNames from 'classnames';\nimport { BankTransferVoucherProps } from './types';\nimport './BankTransferVoucher.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function BankTransferVoucher({ voucherDetails, className = '', ...props }: Readonly<BankTransferVoucherProps>) {\n    const { i18n } = useCoreContext();\n    props.onActionHandled?.({ componentType: props.paymentMethodType, actionDescription: 'voucher-presented' });\n\n    return (\n        <div\n            className={classNames(\n                'adyen-checkout__voucher-result',\n                'adyen-checkout__voucher-result--bankTransfer',\n                `adyen-checkout__voucher-result--${props.paymentMethodType}`,\n                className\n            )}\n        >\n            <div className=\"adyen-checkout__voucher-result__top\">\n                <div className=\"adyen-checkout__voucher-result__image\">\n                    {!!props.imageUrl && (\n                        <span className=\"adyen-checkout__voucher-result__image__wrapper\">\n                            <img alt={props.paymentMethodType} className=\"adyen-checkout__voucher-result__image__brand\" src={props.imageUrl} />\n                        </span>\n                    )}\n                </div>\n                {props.amount && <div className=\"adyen-checkout__voucher-result__amount\">{props.amount}</div>}\n                {props.instructions && (\n                    <Fragment>\n                        <div className=\"adyen-checkout__voucher-result-title\">{i18n.get('bankTransfer.instruction.title')}</div>\n                        {props.instructions}\n                    </Fragment>\n                )}\n            </div>\n\n            <div className=\"adyen-checkout__voucher-result__bottom\">\n                {voucherDetails && (\n                    <Fragment>\n                        <div className=\"adyen-checkout__voucher-result-title\">{i18n.get('bankTransfer.details.title')}</div>\n                        {voucherDetails}\n                    </Fragment>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"names":["BankTransferVoucher","voucherDetails","className","props","i18n","useCoreContext","onActionHandled","componentType","paymentMethodType","actionDescription","h","div","classNames","imageUrl","span","img","alt","src","amount","instructions","Fragment","get"],"mappings":"gNAMe,SAASA,GAAoBC,eAAEA,EAAcC,UAAEA,EAAY,MAAOC,IAC7E,MAAMC,KAAEA,GAASC,IAGjB,OAFAF,EAAMG,kBAAkB,CAAEC,cAAeJ,EAAMK,kBAAmBC,kBAAmB,sBAGjFC,EAACC,MAAAA,CACGT,UAAWU,EACP,iCACA,+CACA,mCAAmCT,EAAMK,oBACzCN,IAGJQ,EAACC,MAAAA,CAAIT,UAAU,uCACXQ,EAACC,MAAAA,CAAIT,UAAU,2CACRC,EAAMU,UACLH,EAACI,OAAAA,CAAKZ,UAAU,kDACZQ,EAACK,MAAAA,CAAIC,IAAKb,EAAMK,kBAAmBN,UAAU,+CAA+Ce,IAAKd,EAAMU,aAIlHV,EAAMe,QAAUR,EAACC,MAAAA,CAAIT,UAAU,0CAA0CC,EAAMe,QAC/Ef,EAAMgB,cACHT,EAACU,OACGV,EAACC,MAAAA,CAAIT,UAAU,wCAAwCE,EAAKiB,IAAI,mCAC/DlB,EAAMgB,eAKnBT,EAACC,MAAAA,CAAIT,UAAU,0CACVD,GACGS,EAACU,OACGV,EAACC,MAAAA,CAAIT,UAAU,wCAAwCE,EAAKiB,IAAI,+BAC/DpB,IAMzB"}

package/dist/es/components/Card/components/CardInput/components/CardFieldsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFieldsWrapper.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx"],"sourcesContent":["import { h } from 'preact';\nimport LoadingWrapper from '../../../../internal/LoadingWrapper';\nimport CardFields from './CardFields';\nimport KCPAuthentication from './KCPAuthentication';\nimport SocialSecurityNumberBrazil from '../../../../internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil';\nimport StoreDetails from '../../../../internal/StoreDetails';\nimport Address from '../../../../internal/Address';\nimport CardHolderName from './CardHolderName';\nimport Installments from './Installments';\nimport DisclaimerMessage from '../../../../internal/DisclaimerMessage';\nimport RadioGroupExtended from '../../../../internal/FormFields/RadioGroupExtended';\nimport { mapDualBrandButtons } from '../utils';\nimport Fieldset from '../../../../internal/FormFields/Fieldset';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\n\nexport const CardFieldsWrapper = ({\n    // vars created in CardInput:\n    // base (shared)\n    data,\n    valid,\n    errors,\n    handleChangeFor,\n    sfpState,\n    setFocusOn,\n    cvcPolicy,\n    focusedElement,\n    hasInstallments,\n    handleInstallments,\n    showAmountsInInstallments,\n    // Card\n    brandsIcons,\n    formData,\n    formErrors,\n    formValid,\n    expiryDatePolicy,\n    dualBrandSelectElements,\n    extensions,\n    selectedBrandValue,\n    // KCP\n    showKCP,\n    // SSN\n    showBrazilianSSN,\n    socialSecurityNumber,\n    // Store details\n    handleOnStoreDetails,\n    // Address\n    billingAddress,\n    handleAddress,\n    setAddressRef,\n    partialAddressSchema,\n    onAddressLookup,\n    onAddressSelected,\n    addressSearchDebounceMs,\n    // For this comp (props passed through from CardInput)\n    amount,\n    billingAddressRequired,\n    billingAddressRequiredFields,\n    billingAddressAllowedCountries,\n    billingAddressValidationRules = null,\n    brandsConfiguration,\n    showStoreDetailsCheckbox,\n    hasCVC,\n    hasHolderName,\n    holderNameRequired,\n    installmentOptions,\n    placeholders,\n    positionHolderNameOnTop,\n    // For CardFields > CardNumber\n    showBrandIcon,\n    showContextualElement,\n    //\n    iOSFocusedField,\n    disclaimerMessage,\n    //\n    onFieldFocusAnalytics,\n    onFieldBlurAnalytics\n}) => {\n    const { i18n } = useCoreContext();\n\n    const cardHolderField = (\n        <CardHolderName\n            required={holderNameRequired}\n            placeholder={placeholders.holderName}\n            value={formData.holderName}\n            error={!!formErrors.holderName && holderNameRequired}\n            isValid={!!formValid.holderName}\n            onBlur={handleChangeFor('holderName', 'blur')}\n            onInput={handleChangeFor('holderName', 'input')}\n            disabled={iOSFocusedField && iOSFocusedField !== 'holderName'}\n            onFieldFocusAnalytics={onFieldFocusAnalytics}\n            onFieldBlurAnalytics={onFieldBlurAnalytics}\n        />\n    );\n\n    // Only if these brands are present in the binLookup response shguld we show the UI to choose between brands\n    const dualBrandsThatNeedSelectionMechanism = ['cartebancaire', 'bcmc', 'dankort'];\n    // If the filter array contains anything - then we need to show the choice UI\n    const showDualBrandSelectElements = !!dualBrandSelectElements.filter(item => dualBrandsThatNeedSelectionMechanism.includes(item.id)).length;\n\n    return (\n        <LoadingWrapper status={sfpState.status}>\n            {hasHolderName && positionHolderNameOnTop && cardHolderField}\n\n            <CardFields\n                showBrandIcon={showBrandIcon}\n                showContextualElement={showContextualElement}\n                brand={sfpState.brand}\n                brandsIcons={brandsIcons}\n                brandsConfiguration={brandsConfiguration}\n                focusedElement={focusedElement}\n                onFocusField={setFocusOn}\n                hasCVC={hasCVC}\n                cvcPolicy={cvcPolicy}\n                expiryDatePolicy={expiryDatePolicy}\n                errors={sfpState.errors}\n                valid={sfpState.valid}\n                dualBrandingElements={dualBrandSelectElements.length > 0 && dualBrandSelectElements}\n            />\n\n            {hasHolderName && !positionHolderNameOnTop && cardHolderField}\n\n            {showDualBrandSelectElements && dualBrandSelectElements.length > 0 && dualBrandSelectElements && (\n                <Fieldset classNameModifiers={['dual-brand-switcher']} label={i18n.get('creditCard.dualBrand.title')}>\n                    <p className={'adyen-checkout-form-instruction'}>{i18n.get('creditCard.dualBrand.description')}</p>\n                    <RadioGroupExtended\n                        name={'dualBrandSwitcher'}\n                        value={selectedBrandValue} // Set which button is in a selected (checked) state\n                        items={mapDualBrandButtons(dualBrandSelectElements, brandsConfiguration)}\n                        onChange={extensions.handleDualBrandSelection}\n                        required={true}\n                        showSelectedTick={true}\n                    />\n                </Fieldset>\n            )}\n\n            {showKCP && (\n                <KCPAuthentication\n                    onFocusField={setFocusOn}\n                    focusedElement={focusedElement}\n                    encryptedPasswordState={{\n                        data: sfpState.encryptedPassword,\n                        valid: sfpState.valid ? sfpState.valid.encryptedPassword : false,\n                        errors: sfpState.errors ? sfpState.errors.encryptedPassword : false\n                    }}\n                    value={data.taxNumber}\n                    error={!!errors.taxNumber}\n                    isValid={!!valid.taxNumber}\n                    onBlur={handleChangeFor('taxNumber', 'blur')}\n                    onInput={handleChangeFor('taxNumber', 'input')}\n                    disabled={iOSFocusedField && iOSFocusedField !== 'kcpTaxNumberOrDOB'}\n                    placeholder={placeholders.taxNumber}\n                    onFieldFocusAnalytics={onFieldFocusAnalytics}\n                    onFieldBlurAnalytics={onFieldBlurAnalytics}\n                />\n            )}\n\n            {showBrazilianSSN && (\n                <div className=\"adyen-checkout__card__socialSecurityNumber\">\n                    <SocialSecurityNumberBrazil\n                        onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n                        onInput={handleChangeFor('socialSecurityNumber', 'input')}\n                        error={errors?.socialSecurityNumber}\n                        valid={valid?.socialSecurityNumber}\n                        data={socialSecurityNumber}\n                        required={true}\n                        disabled={iOSFocusedField && iOSFocusedField !== 'socialSecurityNumber'}\n                        onFieldFocusAnalytics={onFieldFocusAnalytics}\n                        onFieldBlurAnalytics={onFieldBlurAnalytics}\n                    />\n                </div>\n            )}\n\n            {showStoreDetailsCheckbox && <StoreDetails onChange={handleOnStoreDetails} />}\n\n            {hasInstallments && (\n                <Installments\n                    amount={amount}\n                    brand={sfpState.brand}\n                    installmentOptions={installmentOptions}\n                    onChange={handleInstallments}\n                    type={showAmountsInInstallments ? 'amount' : 'months'}\n                />\n            )}\n\n            {billingAddressRequired && (\n                <Address\n                    label=\"billingAddress\"\n                    data={billingAddress}\n                    onChange={handleAddress}\n                    allowedCountries={billingAddressAllowedCountries}\n                    requiredFields={billingAddressRequiredFields}\n                    setComponentRef={setAddressRef}\n                    validationRules={billingAddressValidationRules}\n                    specifications={partialAddressSchema}\n                    iOSFocusedField={iOSFocusedField}\n                    onAddressLookup={onAddressLookup}\n                    showContextualElement={showContextualElement}\n                    onAddressSelected={onAddressSelected}\n                    addressSearchDebounceMs={addressSearchDebounceMs}\n                    onFieldFocusAnalytics={onFieldFocusAnalytics}\n                    onFieldBlurAnalytics={onFieldBlurAnalytics}\n                />\n            )}\n\n            {disclaimerMessage && (\n                <DisclaimerMessage\n                    message={disclaimerMessage.message.replace('%{linkText}', `%#${disclaimerMessage.linkText}%#`)}\n                    urls={[disclaimerMessage.link]}\n                />\n            )}\n        </LoadingWrapper>\n    );\n};\n"],"names":["CardFieldsWrapper","data","valid","errors","handleChangeFor","sfpState","setFocusOn","cvcPolicy","focusedElement","hasInstallments","handleInstallments","showAmountsInInstallments","brandsIcons","formData","formErrors","formValid","expiryDatePolicy","dualBrandSelectElements","extensions","selectedBrandValue","showKCP","showBrazilianSSN","socialSecurityNumber","handleOnStoreDetails","billingAddress","handleAddress","setAddressRef","partialAddressSchema","onAddressLookup","onAddressSelected","addressSearchDebounceMs","amount","billingAddressRequired","billingAddressRequiredFields","billingAddressAllowedCountries","billingAddressValidationRules","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","hasHolderName","holderNameRequired","installmentOptions","placeholders","positionHolderNameOnTop","showBrandIcon","showContextualElement","iOSFocusedField","disclaimerMessage","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","cardHolderField","h","CardHolderName","required","placeholder","holderName","value","error","isValid","onBlur","onInput","disabled","dualBrandsThatNeedSelectionMechanism","showDualBrandSelectElements","filter","item","includes","id","length","LoadingWrapper","status","CardFields","brand","onFocusField","dualBrandingElements","Fieldset","classNameModifiers","label","get","p","className","RadioGroupExtended","name","items","mapDualBrandButtons","onChange","handleDualBrandSelection","showSelectedTick","KCPAuthentication","encryptedPasswordState","encryptedPassword","taxNumber","div","SocialSecurityNumberBrazil","StoreDetails","Installments","type","Address","allowedCountries","requiredFields","setComponentRef","validationRules","specifications","DisclaimerMessage","message","replace","linkText","urls","link"],"mappings":"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"}
+{"version":3,"file":"CardFieldsWrapper.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx"],"sourcesContent":["import { h } from 'preact';\nimport LoadingWrapper from '../../../../internal/LoadingWrapper';\nimport CardFields from './CardFields';\nimport KCPAuthentication from './KCPAuthentication';\nimport SocialSecurityNumberBrazil from '../../../../internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil';\nimport StoreDetails from '../../../../internal/StoreDetails';\nimport Address from '../../../../internal/Address';\nimport CardHolderName from './CardHolderName';\nimport Installments from './Installments';\nimport DisclaimerMessage from '../../../../internal/DisclaimerMessage';\nimport RadioGroupExtended from '../../../../internal/FormFields/RadioGroupExtended';\nimport { mapDualBrandButtons } from '../utils';\nimport Fieldset from '../../../../internal/FormFields/Fieldset';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\n\nexport const CardFieldsWrapper = ({\n    // vars created in CardInput:\n    // base (shared)\n    data,\n    valid,\n    errors,\n    handleChangeFor,\n    sfpState,\n    setFocusOn,\n    cvcPolicy,\n    focusedElement,\n    hasInstallments,\n    handleInstallments,\n    showAmountsInInstallments,\n    // Card\n    brandsIcons,\n    formData,\n    formErrors,\n    formValid,\n    expiryDatePolicy,\n    dualBrandSelectElements,\n    extensions,\n    selectedBrandValue,\n    // KCP\n    showKCP,\n    // SSN\n    showBrazilianSSN,\n    socialSecurityNumber,\n    // Store details\n    handleOnStoreDetails,\n    // Address\n    billingAddress,\n    handleAddress,\n    setAddressRef,\n    partialAddressSchema,\n    onAddressLookup,\n    onAddressSelected,\n    addressSearchDebounceMs,\n    // For this comp (props passed through from CardInput)\n    amount,\n    billingAddressRequired,\n    billingAddressRequiredFields,\n    billingAddressAllowedCountries,\n    billingAddressValidationRules = null,\n    brandsConfiguration,\n    showStoreDetailsCheckbox,\n    hasCVC,\n    hasHolderName,\n    holderNameRequired,\n    installmentOptions,\n    placeholders,\n    positionHolderNameOnTop,\n    // For CardFields > CardNumber\n    showBrandIcon,\n    showContextualElement,\n    //\n    iOSFocusedField,\n    disclaimerMessage,\n    //\n    onFieldFocusAnalytics,\n    onFieldBlurAnalytics\n}) => {\n    const { i18n } = useCoreContext();\n\n    const cardHolderField = (\n        <CardHolderName\n            required={holderNameRequired}\n            placeholder={placeholders.holderName}\n            value={formData.holderName}\n            error={!!formErrors.holderName && holderNameRequired}\n            isValid={!!formValid.holderName}\n            onBlur={handleChangeFor('holderName', 'blur')}\n            onInput={handleChangeFor('holderName', 'input')}\n            disabled={iOSFocusedField && iOSFocusedField !== 'holderName'}\n            onFieldFocusAnalytics={onFieldFocusAnalytics}\n            onFieldBlurAnalytics={onFieldBlurAnalytics}\n        />\n    );\n\n    // Only if these brands are present in the binLookup response should we show the UI to choose between brands\n    const dualBrandsThatNeedSelectionMechanism = ['cartebancaire', 'bcmc', 'dankort'];\n    // If the filter array contains anything - then we need to show the choice UI\n    const showDualBrandSelectElements = !!dualBrandSelectElements.filter(item => dualBrandsThatNeedSelectionMechanism.includes(item.id)).length;\n\n    return (\n        <LoadingWrapper status={sfpState.status}>\n            {hasHolderName && positionHolderNameOnTop && cardHolderField}\n\n            <CardFields\n                showBrandIcon={showBrandIcon}\n                showContextualElement={showContextualElement}\n                brand={sfpState.brand}\n                brandsIcons={brandsIcons}\n                brandsConfiguration={brandsConfiguration}\n                focusedElement={focusedElement}\n                onFocusField={setFocusOn}\n                hasCVC={hasCVC}\n                cvcPolicy={cvcPolicy}\n                expiryDatePolicy={expiryDatePolicy}\n                errors={sfpState.errors}\n                valid={sfpState.valid}\n                dualBrandingElements={dualBrandSelectElements.length > 0 && dualBrandSelectElements}\n            />\n\n            {hasHolderName && !positionHolderNameOnTop && cardHolderField}\n\n            {showDualBrandSelectElements && dualBrandSelectElements.length > 0 && dualBrandSelectElements && (\n                <Fieldset classNameModifiers={['dual-brand-switcher']} label={i18n.get('creditCard.dualBrand.title')}>\n                    <p className={'adyen-checkout-form-instruction'}>{i18n.get('creditCard.dualBrand.description')}</p>\n                    <RadioGroupExtended\n                        name={'dualBrandSwitcher'}\n                        value={selectedBrandValue} // Set which button is in a selected (checked) state\n                        items={mapDualBrandButtons(dualBrandSelectElements, brandsConfiguration)}\n                        onChange={extensions.handleDualBrandSelection}\n                        required={true}\n                        showSelectedTick={true}\n                    />\n                </Fieldset>\n            )}\n\n            {showKCP && (\n                <KCPAuthentication\n                    onFocusField={setFocusOn}\n                    focusedElement={focusedElement}\n                    encryptedPasswordState={{\n                        data: sfpState.encryptedPassword,\n                        valid: sfpState.valid ? sfpState.valid.encryptedPassword : false,\n                        errors: sfpState.errors ? sfpState.errors.encryptedPassword : false\n                    }}\n                    value={data.taxNumber}\n                    error={!!errors.taxNumber}\n                    isValid={!!valid.taxNumber}\n                    onBlur={handleChangeFor('taxNumber', 'blur')}\n                    onInput={handleChangeFor('taxNumber', 'input')}\n                    disabled={iOSFocusedField && iOSFocusedField !== 'kcpTaxNumberOrDOB'}\n                    placeholder={placeholders.taxNumber}\n                    onFieldFocusAnalytics={onFieldFocusAnalytics}\n                    onFieldBlurAnalytics={onFieldBlurAnalytics}\n                />\n            )}\n\n            {showBrazilianSSN && (\n                <div className=\"adyen-checkout__card__socialSecurityNumber\">\n                    <SocialSecurityNumberBrazil\n                        onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n                        onInput={handleChangeFor('socialSecurityNumber', 'input')}\n                        error={errors?.socialSecurityNumber}\n                        valid={valid?.socialSecurityNumber}\n                        data={socialSecurityNumber}\n                        required={true}\n                        disabled={iOSFocusedField && iOSFocusedField !== 'socialSecurityNumber'}\n                        onFieldFocusAnalytics={onFieldFocusAnalytics}\n                        onFieldBlurAnalytics={onFieldBlurAnalytics}\n                    />\n                </div>\n            )}\n\n            {showStoreDetailsCheckbox && <StoreDetails onChange={handleOnStoreDetails} />}\n\n            {hasInstallments && (\n                <Installments\n                    amount={amount}\n                    brand={sfpState.brand}\n                    installmentOptions={installmentOptions}\n                    onChange={handleInstallments}\n                    type={showAmountsInInstallments ? 'amount' : 'months'}\n                />\n            )}\n\n            {billingAddressRequired && (\n                <Address\n                    label=\"billingAddress\"\n                    data={billingAddress}\n                    onChange={handleAddress}\n                    allowedCountries={billingAddressAllowedCountries}\n                    requiredFields={billingAddressRequiredFields}\n                    setComponentRef={setAddressRef}\n                    validationRules={billingAddressValidationRules}\n                    specifications={partialAddressSchema}\n                    iOSFocusedField={iOSFocusedField}\n                    onAddressLookup={onAddressLookup}\n                    showContextualElement={showContextualElement}\n                    onAddressSelected={onAddressSelected}\n                    addressSearchDebounceMs={addressSearchDebounceMs}\n                    onFieldFocusAnalytics={onFieldFocusAnalytics}\n                    onFieldBlurAnalytics={onFieldBlurAnalytics}\n                />\n            )}\n\n            {disclaimerMessage && (\n                <DisclaimerMessage\n                    message={disclaimerMessage.message.replace('%{linkText}', `%#${disclaimerMessage.linkText}%#`)}\n                    urls={[disclaimerMessage.link]}\n                />\n            )}\n        </LoadingWrapper>\n    );\n};\n"],"names":["CardFieldsWrapper","data","valid","errors","handleChangeFor","sfpState","setFocusOn","cvcPolicy","focusedElement","hasInstallments","handleInstallments","showAmountsInInstallments","brandsIcons","formData","formErrors","formValid","expiryDatePolicy","dualBrandSelectElements","extensions","selectedBrandValue","showKCP","showBrazilianSSN","socialSecurityNumber","handleOnStoreDetails","billingAddress","handleAddress","setAddressRef","partialAddressSchema","onAddressLookup","onAddressSelected","addressSearchDebounceMs","amount","billingAddressRequired","billingAddressRequiredFields","billingAddressAllowedCountries","billingAddressValidationRules","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","hasHolderName","holderNameRequired","installmentOptions","placeholders","positionHolderNameOnTop","showBrandIcon","showContextualElement","iOSFocusedField","disclaimerMessage","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","cardHolderField","h","CardHolderName","required","placeholder","holderName","value","error","isValid","onBlur","onInput","disabled","dualBrandsThatNeedSelectionMechanism","showDualBrandSelectElements","filter","item","includes","id","length","LoadingWrapper","status","CardFields","brand","onFocusField","dualBrandingElements","Fieldset","classNameModifiers","label","get","p","className","RadioGroupExtended","name","items","mapDualBrandButtons","onChange","handleDualBrandSelection","showSelectedTick","KCPAuthentication","encryptedPasswordState","encryptedPassword","taxNumber","div","SocialSecurityNumberBrazil","StoreDetails","Installments","type","Address","allowedCountries","requiredFields","setComponentRef","validationRules","specifications","DisclaimerMessage","message","replace","linkText","urls","link"],"mappings":"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"}

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as t}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";import{alternativeLabelContent as m}from"../FieldLabelAlternative.js";function r(r){const{i18n:u}=a(),{amount:d,brand:v,onChange:c,type:p}=r,g=r.installmentOptions[v]||r.installmentOptions.card,f=1===g?.values?.length,[b,h]=l(g?.preselectedValue||g?.values[0]),[F,C]=l("onetime"),j=g?.plans?.includes("revolving"),x=e=>{const l=e.target.value;h(Number(l))},E=e=>{const l=e.currentTarget.getAttribute("value");C(l)},N=e=>{let l,t;var n;return"amount"===p?(l="installmentOption",t={count:e,values:{times:e,partialValue:(n=e,u.amount(d.value/n,d.currency))}}):(l="installmentOptionMonths",t={count:e,values:{times:e}}),{id:e,name:d.value?u.get(l,t):`${e}`}};return t(()=>{g?.values?.includes(b)||h(g?.preselectedValue??g?.values[0])},[v]),t(()=>{const e={value:b,...j&&"revolving"===F&&{plan:F,value:1},...j&&"onetime"===F&&{value:1}};c(g?e:{value:null})},[b,g,F]),g?0===d.value?null:e("div",{className:"adyen-checkout__installments"},j?e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installmentsPseudoLabel",useLabelElement:!1,showContextualElement:!1,renderAlternativeToLabel:m},e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:E,value:F,ariaLabel:u.get("installments")}),e(n,{className:"installments"!==F?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(N),selectedValue:b,onChange:x,name:"installments",disabled:"installments"!==F})))):e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installments",showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(N),selectedValue:b,onChange:x,name:"installments",readonly:f,allowIdOnButton:!0}))):null}r.defaultProps={brand:"",amount:{},onChange:()=>{}};export{r as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as t}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";import{alternativeLabelContent as m}from"../FieldLabelAlternative.js";function r(r){const{i18n:u}=a(),{amount:d,brand:v,onChange:c,type:p}=r,g=r.installmentOptions[v]||r.installmentOptions.card,f=1===g?.values?.length,[b,h]=l(g?.preselectedValue||g?.values[0]),[F,C]=l("onetime"),j=g?.plans?.includes("revolving"),N=e=>{const l=e.target.value;h(Number(l))},_=e=>{const l=e.currentTarget.getAttribute("value");C(l)},x=e=>{let l,t;var n;return"amount"===p?(l="installmentOption",t={count:e,values:{times:e,partialValue:(n=e,u.amount(d.value/n,d.currency))}}):(l="installmentOptionMonths",t={count:e,values:{times:e}}),{id:e,name:d.value?u.get(l,t):`${e}`}};return t(()=>{g?.values?.includes(b)||h(g?.preselectedValue??g?.values[0])},[v]),t(()=>{const e={value:b,...j&&"revolving"===F&&{plan:F,value:1},...j&&"onetime"===F&&{value:1}};c(g?e:{value:null})},[b,g,F]),g?0===d.value?null:j?e("div",{className:"adyen-checkout__installments adyen-checkout__installments--revolving-plan"},e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installmentsPseudoLabel",useLabelElement:!1,showContextualElement:!1,renderAlternativeToLabel:m},e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:_,value:F,ariaLabel:u.get("installments")}),e(n,{className:"installments"!==F?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(x),selectedValue:b,onChange:N,name:"installments",disabled:"installments"!==F}))))):e("div",{className:"adyen-checkout__installments"},e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installments",showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(x),selectedValue:b,onChange:N,name:"installments",readonly:f,allowIdOnButton:!0}))):null}r.defaultProps={brand:"",amount:{},onChange:()=>{}};export{r as default};
 //# sourceMappingURL=Installments.js.map

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map

@@ -1 +1 @@
-{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\nimport { alternativeLabelContent } from '../FieldLabelAlternative';\nimport './Installments.scss';\n\nexport interface InstallmentsObj {\n    value: number;\n    plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n    const { i18n } = useCoreContext();\n    const { amount, brand, onChange, type } = props;\n    const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n    const readOnly = installmentOptions?.values?.length === 1;\n    const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n    const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n    // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n    const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n    const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n    const onSelectInstallment = e => {\n        const selectedInstallments = e.target.value;\n        setInstallmentAmount(Number(selectedInstallments));\n    };\n\n    const onRadioSelect = e => {\n        const selectedBtn = e.currentTarget.getAttribute('value');\n        setRadioBtnValue(selectedBtn);\n    };\n\n    const installmentItemsMapper = (value: number): InstallmentsItem => {\n        let translationKey;\n        let translationObj;\n\n        if (type === 'amount') {\n            translationKey = 'installmentOption';\n            translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n        } else {\n            translationKey = `installmentOptionMonths`;\n            translationObj = { count: value, values: { times: value } };\n        }\n\n        return {\n            id: value,\n            name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n        };\n    };\n\n    useEffect(() => {\n        if (installmentOptions?.values?.includes(installmentAmount)) {\n            return;\n        }\n\n        setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n    }, [brand]);\n\n    useEffect(() => {\n        const stateObj: InstallmentsObj = {\n            value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n            ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n            ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n        };\n\n        onChange(installmentOptions ? stateObj : { value: null });\n    }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n    if (!installmentOptions) return null;\n    if (amount.value === 0) return null;\n\n    // Alternate interface for installments with the possibility of a \"revolving\" plan\n    if (hasRadioButtonUI) {\n        return (\n            <div className=\"adyen-checkout__installments\">\n                <Field\n                    label={i18n.get('installments')}\n                    classNameModifiers={['installments']}\n                    name={'installmentsPseudoLabel'}\n                    useLabelElement={false}\n                    showContextualElement={false}\n                    renderAlternativeToLabel={alternativeLabelContent}\n                >\n                    <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n                        <RadioGroup\n                            items={[\n                                { id: 'onetime', name: 'installments.oneTime' },\n                                { id: 'installments', name: 'installments.installments' },\n                                { id: 'revolving', name: 'installments.revolving' }\n                            ]}\n                            onChange={onRadioSelect}\n                            value={radioBtnValue}\n                            ariaLabel={i18n.get('installments')}\n                        />\n\n                        <Field\n                            className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n                            classNameModifiers={['revolving-plan-installments']}\n                            name={''}\n                            useLabelElement={false}\n                            showContextualElement={false}\n                        >\n                            <Select\n                                filterable={false}\n                                items={installmentOptions.values.map(installmentItemsMapper)}\n                                selectedValue={installmentAmount}\n                                onChange={onSelectInstallment}\n                                name={'installments'}\n                                disabled={radioBtnValue !== 'installments'}\n                            />\n                        </Field>\n                    </Fieldset>\n                </Field>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__installments\">\n            <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} showContextualElement={false}>\n                <Select\n                    filterable={false}\n                    items={installmentOptions.values.map(installmentItemsMapper)}\n                    selectedValue={installmentAmount}\n                    onChange={onSelectInstallment}\n                    name={'installments'}\n                    readonly={readOnly}\n                    allowIdOnButton={true}\n                />\n            </Field>\n        </div>\n    );\n}\n\nInstallments.defaultProps = {\n    brand: '',\n    amount: {},\n    onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Field","label","classNameModifiers","useLabelElement","showContextualElement","renderAlternativeToLabel","alternativeLabelContent","Fieldset","RadioGroup","items","ariaLabel","Select","filterable","map","selectedValue","disabled","readonly","allowIdOnButton","defaultProps"],"mappings":"6lBAmBA,SAASA,EAAaC,GAClB,MAAMC,KAAEA,GAASC,KACXC,OAAEA,EAAMC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASN,EACpCO,EAAqBP,EAAMO,mBAAmBH,IAAUJ,EAAMO,mBAAmBC,KACjFC,EAAkD,IAAvCF,GAAoBG,QAAQC,QACtCC,EAAmBC,GAAwBC,EAASP,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACvHM,EAAeC,GAAoBH,EAAS,WAG7CI,EAAmBX,GAAoBY,OAAOC,SAAS,aAGvDC,EAAsBC,IACxB,MAAMC,EAAuBD,EAAEE,OAAOC,MACtCZ,EAAqBa,OAAOH,KAG1BI,EAAgBL,IAClB,MAAMM,EAAcN,EAAEO,cAAcC,aAAa,SACjDb,EAAiBW,IAGfG,EAA0BN,IAC5B,IAAIO,EACAC,EAdiB,IAACC,EAwBtB,MARa,WAAT5B,GACA0B,EAAiB,oBACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,EAAOY,cAlBvCH,EAkBsET,EAlB1CxB,EAAKE,OAAOA,EAAOsB,MAAQS,EAAS/B,EAAOmC,eAoBzFN,EAAiB,0BACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,KAG/C,CACHc,GAAId,EACJe,KAAMrC,EAAOsB,MAAQxB,EAAKwC,IAAIT,EAAgBC,GAAkB,GAAGR,MAsB3E,OAlBAiB,EAAU,KACFnC,GAAoBG,QAAQU,SAASR,IAIzCC,EAAqBN,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACzF,CAACN,IAEJsC,EAAU,KACN,MAAMC,EAA4B,CAC9BlB,MAAOb,KACHM,GAAsC,cAAlBF,GAAiC,CAAE4B,KAAM5B,EAAeS,MAAO,MACnFP,GAAsC,YAAlBF,GAA+B,CAAES,MAAO,IAGpEpB,EAASE,EAAqBoC,EAAW,CAAElB,MAAO,QACnD,CAACb,EAAmBL,EAAoBS,IAEtCT,EACgB,IAAjBJ,EAAOsB,MAAoB,KAKvBoB,EAACC,MAAAA,CAAIC,UAAU,gCAFnB7B,EAGQ2B,EAACG,EAAAA,CACGC,MAAOhD,EAAKwC,IAAI,gBAChBS,mBAAoB,CAAC,gBACrBV,KAAM,0BACNW,iBAAiB,EACjBC,uBAAuB,EACvBC,yBAA0BC,GAE1BT,EAACU,EAAAA,CAASL,mBAAoB,CAAC,kBAAmBD,MAAO,IACrDJ,EAACW,EAAAA,CACGC,MAAO,CACH,CAAElB,GAAI,UAAWC,KAAM,wBACvB,CAAED,GAAI,eAAgBC,KAAM,6BAC5B,CAAED,GAAI,YAAaC,KAAM,2BAE7BnC,SAAUsB,EACVF,MAAOT,EACP0C,UAAWzD,EAAKwC,IAAI,kBAGxBI,EAACG,EAAAA,CACGD,UAA6B,iBAAlB/B,EAAmC,wCAA0C,8BACxFkC,mBAAoB,CAAC,+BACrBV,KAAM,GACNW,iBAAiB,EACjBC,uBAAuB,GAEvBP,EAACc,EAAAA,CACGC,YAAY,EACZH,MAAOlD,EAAmBG,OAAOmD,IAAI9B,GACrC+B,cAAelD,EACfP,SAAUgB,EACVmB,KAAM,eACNuB,SAA4B,iBAAlB/C,OAW9B6B,EAACG,EAAAA,CAAMC,MAAOhD,EAAKwC,IAAI,gBAAiBS,mBAAoB,CAAC,gBAAiBV,KAAM,eAAgBY,uBAAuB,GACvHP,EAACc,EAAAA,CACGC,YAAY,EACZH,MAAOlD,EAAmBG,OAAOmD,IAAI9B,GACrC+B,cAAelD,EACfP,SAAUgB,EACVmB,KAAM,eACNwB,SAAUvD,EACVwD,iBAAiB,MA3DD,IAgEpC,CAEAlE,EAAamE,aAAe,CACxB9D,MAAO,GACPD,OAAQ,CAAA,EACRE,SAAU"}
+{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\nimport { alternativeLabelContent } from '../FieldLabelAlternative';\nimport './Installments.scss';\n\nexport interface InstallmentsObj {\n    value: number;\n    plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n    const { i18n } = useCoreContext();\n    const { amount, brand, onChange, type } = props;\n    const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n    const readOnly = installmentOptions?.values?.length === 1;\n    const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n    const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n    // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n    const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n    const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n    const onSelectInstallment = e => {\n        const selectedInstallments = e.target.value;\n        setInstallmentAmount(Number(selectedInstallments));\n    };\n\n    const onRadioSelect = e => {\n        const selectedBtn = e.currentTarget.getAttribute('value');\n        setRadioBtnValue(selectedBtn);\n    };\n\n    const installmentItemsMapper = (value: number): InstallmentsItem => {\n        let translationKey;\n        let translationObj;\n\n        if (type === 'amount') {\n            translationKey = 'installmentOption';\n            translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n        } else {\n            translationKey = `installmentOptionMonths`;\n            translationObj = { count: value, values: { times: value } };\n        }\n\n        return {\n            id: value,\n            name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n        };\n    };\n\n    useEffect(() => {\n        if (installmentOptions?.values?.includes(installmentAmount)) {\n            return;\n        }\n\n        setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n    }, [brand]);\n\n    useEffect(() => {\n        const stateObj: InstallmentsObj = {\n            value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n            ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n            ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n        };\n\n        onChange(installmentOptions ? stateObj : { value: null });\n    }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n    if (!installmentOptions) return null;\n    if (amount.value === 0) return null;\n\n    // Alternate interface for installments with the possibility of a \"revolving\" plan\n    if (hasRadioButtonUI) {\n        return (\n            <div className=\"adyen-checkout__installments adyen-checkout__installments--revolving-plan\">\n                <Field\n                    label={i18n.get('installments')}\n                    classNameModifiers={['installments']}\n                    name={'installmentsPseudoLabel'}\n                    useLabelElement={false}\n                    showContextualElement={false}\n                    renderAlternativeToLabel={alternativeLabelContent}\n                >\n                    <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n                        <RadioGroup\n                            items={[\n                                { id: 'onetime', name: 'installments.oneTime' },\n                                { id: 'installments', name: 'installments.installments' },\n                                { id: 'revolving', name: 'installments.revolving' }\n                            ]}\n                            onChange={onRadioSelect}\n                            value={radioBtnValue}\n                            ariaLabel={i18n.get('installments')}\n                        />\n\n                        <Field\n                            className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n                            classNameModifiers={['revolving-plan-installments']}\n                            name={''}\n                            useLabelElement={false}\n                            showContextualElement={false}\n                        >\n                            <Select\n                                filterable={false}\n                                items={installmentOptions.values.map(installmentItemsMapper)}\n                                selectedValue={installmentAmount}\n                                onChange={onSelectInstallment}\n                                name={'installments'}\n                                disabled={radioBtnValue !== 'installments'}\n                            />\n                        </Field>\n                    </Fieldset>\n                </Field>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__installments\">\n            <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} showContextualElement={false}>\n                <Select\n                    filterable={false}\n                    items={installmentOptions.values.map(installmentItemsMapper)}\n                    selectedValue={installmentAmount}\n                    onChange={onSelectInstallment}\n                    name={'installments'}\n                    readonly={readOnly}\n                    allowIdOnButton={true}\n                />\n            </Field>\n        </div>\n    );\n}\n\nInstallments.defaultProps = {\n    brand: '',\n    amount: {},\n    onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Field","label","classNameModifiers","useLabelElement","showContextualElement","renderAlternativeToLabel","alternativeLabelContent","Fieldset","RadioGroup","items","ariaLabel","Select","filterable","map","selectedValue","disabled","readonly","allowIdOnButton","defaultProps"],"mappings":"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"}

package/dist/es/components/Card/components/CardInput/handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"handlers.js","sources":["../../../../../../src/components/Card/components/CardInput/handlers.ts"],"sourcesContent":["import { ENCRYPTED_CARD_NUMBER, CREDIT_CARD_SF_FIELDS } from '../../../internal/SecuredFields/lib/constants';\nimport { selectOne } from '../../../internal/SecuredFields/lib/utilities/dom';\nimport { CardFocusData } from '../../../internal/SecuredFields/lib/types';\n\n/**\n * Helper for CardInput - gets a field name and sets focus on it\n */\nexport const setFocusOnFirstField = (isValidating, sfp, fieldToFocus) => {\n    if (isValidating) {\n        // If not a cardInput related securedField - find field and set focus on it\n        if (!CREDIT_CARD_SF_FIELDS.includes(fieldToFocus)) {\n            setFocusOnNonSF(fieldToFocus, sfp);\n        } else {\n            // Is a securedField - so it has its own focus procedures\n            sfp.current.setFocusOn(fieldToFocus);\n        }\n    }\n};\n\nexport const getAddressHandler = (setFormData, setFormValid, setFormErrors) => {\n    // Return Handler fn:\n    return address => {\n        setFormData('billingAddress', address.data);\n        setFormValid('billingAddress', address.isValid);\n        setFormErrors('billingAddress', address.errors);\n    };\n};\n\nexport const getFocusHandler = (setFocusedElement, onFocus, onBlur) => {\n    // Return Handler fn:\n    return (e: CardFocusData) => {\n        setFocusedElement(e.currentFocusObject);\n        e.focus === true ? onFocus(e.fieldType, e) : onBlur(e.fieldType, e);\n    };\n};\n\nexport const getAutoJumpHandler = (isAutoJumping, sfp, layout) => {\n    return () => {\n        if (!isAutoJumping.current) {\n            isAutoJumping.current = true;\n\n            // CardInput can call this more than once in quick succession\n            // e.g. if field was in error (error + fieldValid) or other SFs are optional (fieldValid + allValid) etc\n            // - so make async to avoid double setFocus call\n            void Promise.resolve().then(() => {\n                const panIndex = layout.findIndex(elem => elem === ENCRYPTED_CARD_NUMBER);\n                const subsequentFields = layout.slice(panIndex + 1);\n\n                /**\n                 * Investigate subsequent fields to see if they can/should accept focus\n                 */\n                for (const field of subsequentFields) {\n                    // Is the next field a credit card related securedField?\n                    if (CREDIT_CARD_SF_FIELDS.includes(field)) {\n                        const isOptionalOrHidden = sfp.current.sfIsOptionalOrHidden(field);\n                        if (!isOptionalOrHidden) {\n                            sfp.current.setFocusOn(field);\n                            break;\n                        }\n                    } else {\n                        // If it isn't an SF - shift focus to it (we're currently not concerned with whether the field is optional)\n\n                        setFocusOnNonSF(field, sfp);\n                        break;\n                    }\n                }\n\n                isAutoJumping.current = false;\n            });\n        }\n    };\n};\n\nconst setFocusOnNonSF = (field, sfp) => {\n    let nameVal: string = field;\n\n    // We have an exception with the kcp taxNumber where the name of the field ('kcpTaxNumberOrDOB') doesn't match\n    // the value by which the field is referred to internally ('taxNumber')\n    if (nameVal === 'taxNumber') nameVal = 'kcpTaxNumberOrDOB';\n\n    if (nameVal === 'country' || nameVal === 'stateOrProvince') {\n        // Set focus on dropdown\n        const field: HTMLElement = selectOne(sfp.current.rootNode, `.adyen-checkout__field--${nameVal} .adyen-checkout__filter-input`);\n        field?.focus();\n    } else {\n        // Set focus on input\n        const field: HTMLElement = selectOne(sfp.current.rootNode, `[name=\"${nameVal}\"]`);\n        field?.focus();\n    }\n};\n"],"names":["setFocusOnFirstField","isValidating","sfp","fieldToFocus","CREDIT_CARD_SF_FIELDS","includes","current","setFocusOn","setFocusOnNonSF","getAddressHandler","setFormData","setFormValid","setFormErrors","address","data","isValid","errors","getFocusHandler","setFocusedElement","onFocus","onBlur","e","currentFocusObject","focus","fieldType","getAutoJumpHandler","isAutoJumping","layout","Promise","resolve","then","panIndex","findIndex","elem","ENCRYPTED_CARD_NUMBER","subsequentFields","slice","field","sfIsOptionalOrHidden","nameVal","selectOne","rootNode"],"mappings":"qMAOO,MAAMA,EAAuB,CAACC,EAAcC,EAAKC,KAChDF,IAEKG,EAAsBC,SAASF,GAIhCD,EAAII,QAAQC,WAAWJ,GAHvBK,EAAgBL,EAAcD,KAQ7BO,EAAoB,CAACC,EAAaC,EAAcC,IAElDC,IACHH,EAAY,iBAAkBG,EAAQC,MACtCH,EAAa,iBAAkBE,EAAQE,SACvCH,EAAc,iBAAkBC,EAAQG,SAInCC,EAAkB,CAACC,EAAmBC,EAASC,IAEhDC,IACJH,EAAkBG,EAAEC,qBACR,IAAZD,EAAEE,MAAiBJ,EAAQE,EAAEG,UAAWH,GAAKD,EAAOC,EAAEG,UAAWH,IAI5DI,EAAqB,CAACC,EAAexB,EAAKyB,IAC5C,KACED,EAAcpB,UACfoB,EAAcpB,SAAU,EAKnBsB,QAAQC,UAAUC,KAAK,KACxB,MAAMC,EAAWJ,EAAOK,UAAUC,GAAQA,IAASC,GAC7CC,EAAmBR,EAAOS,MAAML,EAAW,GAKjD,IAAK,MAAMM,KAASF,EAAkB,CAElC,IAAI/B,EAAsBC,SAASgC,GAM5B,CAGH7B,EAAgB6B,EAAOnC,GACvB,KACJ,CATI,IAD2BA,EAAII,QAAQgC,qBAAqBD,GACnC,CACrBnC,EAAII,QAAQC,WAAW8B,GACvB,KACJ,CAOR,CAEAX,EAAcpB,SAAU,MAMlCE,EAAkB,CAAC6B,EAAOnC,KAC5B,IAAIqC,EAAkBF,EAMtB,GAFgB,cAAZE,IAAyBA,EAAU,qBAEvB,YAAZA,GAAqC,oBAAZA,EAA+B,CAExD,MAAMF,EAAqBG,EAAUtC,EAAII,QAAQmC,SAAU,2BAA2BF,mCACtFF,GAAOd,YACJ,CAEH,MAAMc,EAAqBG,EAAUtC,EAAII,QAAQmC,SAAU,UAAUF,OACrEF,GAAOd,OACX"}
+{"version":3,"file":"handlers.js","sources":["../../../../../../src/components/Card/components/CardInput/handlers.ts"],"sourcesContent":["import { ENCRYPTED_CARD_NUMBER, CREDIT_CARD_SF_FIELDS } from '../../../internal/SecuredFields/lib/constants';\nimport { selectOne } from '../../../internal/SecuredFields/lib/utilities/dom';\nimport { CardFocusData } from '../../../internal/SecuredFields/lib/types';\n\n/**\n * Helper for CardInput - gets a field name and sets focus on it\n */\nexport const setFocusOnFirstField = (isValidating, sfp, fieldToFocus) => {\n    if (isValidating) {\n        // If not a cardInput related securedField - find field and set focus on it\n        if (!CREDIT_CARD_SF_FIELDS.includes(fieldToFocus)) {\n            setFocusOnNonSF(fieldToFocus, sfp);\n        } else {\n            // Is a securedField - so it has its own focus procedures\n            sfp.current.setFocusOn(fieldToFocus);\n        }\n    }\n};\n\nexport const getAddressHandler = (setFormData, setFormValid, setFormErrors) => {\n    // Return Handler fn:\n    return address => {\n        setFormData('billingAddress', address.data);\n        setFormValid('billingAddress', address.isValid);\n        setFormErrors('billingAddress', address.errors);\n    };\n};\n\nexport const getFocusHandler = (setFocusedElement, onFocus, onBlur) => {\n    // Return Handler fn:\n    return (e: CardFocusData) => {\n        setFocusedElement(e.currentFocusObject);\n        e.focus === true ? onFocus(e.fieldType, e) : onBlur(e.fieldType, e);\n    };\n};\n\nexport const getAutoJumpHandler = (isAutoJumping, sfp, layout) => {\n    return () => {\n        if (!isAutoJumping.current) {\n            isAutoJumping.current = true;\n\n            // CardInput can call this more than once in quick succession\n            // e.g. if field was in error (error + fieldValid) or other SFs are optional (fieldValid + allValid) etc\n            // - so make async to avoid double setFocus call\n            void Promise.resolve().then(() => {\n                const panIndex = layout.findIndex(elem => elem === ENCRYPTED_CARD_NUMBER);\n                const subsequentFields = layout.slice(panIndex + 1);\n\n                /**\n                 * Investigate subsequent fields to see if they can/should accept focus\n                 */\n                for (const field of subsequentFields) {\n                    // Is the next field a credit card related securedField?\n                    if (CREDIT_CARD_SF_FIELDS.includes(field)) {\n                        const isOptionalOrHidden = sfp.current.sfIsOptionalOrHidden(field);\n                        if (!isOptionalOrHidden) {\n                            sfp.current.setFocusOn(field);\n                            break;\n                        }\n                    } else {\n                        // If it isn't an SF - shift focus to it (we're currently not concerned with whether the field is optional)\n\n                        setFocusOnNonSF(field, sfp);\n                        break;\n                    }\n                }\n\n                isAutoJumping.current = false;\n            });\n        }\n    };\n};\n\nconst setFocusOnNonSF = (field, sfp) => {\n    let nameVal: string = field;\n\n    // We have an exception with the kcp taxNumber where the name of the field ('kcpTaxNumberOrDOB') doesn't match\n    // the value by which the field is referred to internally ('taxNumber')\n    if (nameVal === 'taxNumber') nameVal = 'kcpTaxNumberOrDOB';\n\n    if (nameVal === 'country' || nameVal === 'stateOrProvince') {\n        // Set focus on dropdown\n        const field: HTMLElement = selectOne(sfp.current.rootNode, `.adyen-checkout__field--${nameVal} .adyen-checkout__filter-input`);\n        field?.focus();\n    } else {\n        // Set focus on input\n        const field: HTMLElement = selectOne(sfp.current.rootNode, `[name=\"${nameVal}\"]`);\n        field?.focus();\n    }\n};\n"],"names":["setFocusOnFirstField","isValidating","sfp","fieldToFocus","CREDIT_CARD_SF_FIELDS","includes","current","setFocusOn","setFocusOnNonSF","getAddressHandler","setFormData","setFormValid","setFormErrors","address","data","isValid","errors","getFocusHandler","setFocusedElement","onFocus","onBlur","e","currentFocusObject","focus","fieldType","getAutoJumpHandler","isAutoJumping","layout","Promise","resolve","then","panIndex","findIndex","elem","ENCRYPTED_CARD_NUMBER","subsequentFields","slice","field","sfIsOptionalOrHidden","nameVal","selectOne","rootNode"],"mappings":"qMAOO,MAAMA,EAAuB,CAACC,EAAcC,EAAKC,KAChDF,IAEKG,EAAsBC,SAASF,GAIhCD,EAAII,QAAQC,WAAWJ,GAHvBK,EAAgBL,EAAcD,KAQ7BO,EAAoB,CAACC,EAAaC,EAAcC,IAElDC,IACHH,EAAY,iBAAkBG,EAAQC,MACtCH,EAAa,iBAAkBE,EAAQE,SACvCH,EAAc,iBAAkBC,EAAQG,SAInCC,EAAkB,CAACC,EAAmBC,EAASC,IAEhDC,IACJH,EAAkBG,EAAEC,qBACR,IAAZD,EAAEE,MAAiBJ,EAAQE,EAAEG,UAAWH,GAAKD,EAAOC,EAAEG,UAAWH,IAI5DI,EAAqB,CAACC,EAAexB,EAAKyB,IAC5C,KACED,EAAcpB,UACfoB,EAAcpB,SAAU,EAKnBsB,QAAQC,UAAUC,KAAK,KACxB,MAAMC,EAAWJ,EAAOK,UAAUC,GAAQA,IAASC,GAC7CC,EAAmBR,EAAOS,MAAML,EAAW,GAKjD,IAAK,MAAMM,KAASF,EAAkB,CAElC,IAAI/B,EAAsBC,SAASgC,GAM5B,CAGH7B,EAAgB6B,EAAOnC,GACvB,KACJ,CATI,IAD2BA,EAAII,QAAQgC,qBAAqBD,GACnC,CACrBnC,EAAII,QAAQC,WAAW8B,GACvB,KACJ,CAOR,CAEAX,EAAcpB,SAAU,MAMlCE,EAAkB,CAAC6B,EAAOnC,KAC5B,IAAIqC,EAAkBF,EAMtB,GAFgB,cAAZE,IAAyBA,EAAU,qBAEvB,YAAZA,GAAqC,oBAAZA,EAA+B,CAExD,MAAMF,EAAqBG,EAAUtC,EAAII,QAAQmC,SAAU,2BAA2BF,mCACtFF,GAAOd,OACX,KAAO,CAEH,MAAMc,EAAqBG,EAAUtC,EAAII,QAAQmC,SAAU,UAAUF,OACrEF,GAAOd,OACX"}

package/dist/es/components/Card/components/CardInput/useSRPanelForCardInputErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSRPanelForCardInputErrors.js","sources":["../../../../../../src/components/Card/components/CardInput/useSRPanelForCardInputErrors.ts"],"sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport useSRPanelContext from '../../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider';\nimport { handlePartialAddressMode, lookupBlurBasedErrors, mapFieldKey } from './utils';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../../core/Errors/constants';\nimport { setFocusOnFirstField } from './handlers';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\n\nconst useSRPanelForCardInputErrors = ({ errors, props, isValidating, retrieveLayout, specifications, billingAddress, sfp }) => {\n    // Extract fns from context\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n    // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n        fieldTypeMappingFn: mapFieldKey\n    });\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n\n    const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n    // Get the previous list of errors\n    const previousSortedErrors = usePrevious(sortedErrorList);\n\n    const sfStateErrorsObj = sfp.current?.mapErrorsToValidationRuleResult();\n    const mergedErrors = { ...errors, ...sfStateErrorsObj };\n\n    useEffect(() => {\n        try {\n            // Extract and then flatten billingAddress errors into a new object with *all* the field errors at top level\n            const { billingAddress: extractedAddressErrors, ...errorsWithoutAddress } = mergedErrors;\n\n            const errorsForPanel = { ...errorsWithoutAddress, ...extractedAddressErrors };\n\n            // Pass dynamic props (errors, layout etc) to SRPanel via partial\n            const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n                errors: errorsForPanel,\n                isValidating: isValidating.current,\n                layout: retrieveLayout(),\n                // If we don't have country specific address labels, we might have a label related to a partialAddressSchema (i.e. zipCode)\n                countrySpecificLabels: specifications.getAddressLabelsForCountry(billingAddress?.country) ?? partialAddressSchema?.default?.labels\n            });\n\n            // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n            const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n            setSortedErrorList(currentErrorsSortedByLayout);\n\n            /**\n             * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n             */\n            switch (srPanelResp?.action) {\n                // A call to focus the first field in error will always follow the call to validate the whole form\n                case ERROR_ACTION_FOCUS_FIELD:\n                    if (shouldMoveFocusSR) setFocusOnFirstField(isValidating.current, sfp, srPanelResp?.fieldToFocus);\n                    // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                    setTimeout(() => {\n                        isValidating.current = false;\n                    }, 300);\n                    break;\n\n                /**\n                 * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n                 */\n                case ERROR_ACTION_BLUR_SCENARIO: {\n                    const difference = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                    const latestErrorMsg = difference?.[0];\n\n                    if (latestErrorMsg) {\n                        // Use the error code to look up whether error is actually a blur based one (most are but some SF ones aren't)\n                        const isBlurBasedError = lookupBlurBasedErrors(latestErrorMsg.errorCode);\n\n                        /**\n                         *  ONLY ADD BLUR BASED ERRORS TO THE ERROR PANEL - doing this step prevents the non-blur based errors from being read out twice\n                         *  (once from the aria-live, error panel & once from the aria-describedby element)\n                         */\n                        const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                        // console.log('### CardInput2::componentDidUpdate:: #2 (not validating) single error:: latestSRError', latestSRError);\n                        setSRMessagesFromStrings(latestSRError);\n                    } else {\n                        // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                        // console.log('### CardInput2::componentDidUpdate:: #3(not validating) clearing errors:: NO latestErrorMsg');\n                        clearSRPanel();\n                    }\n                    break;\n                }\n                default:\n                    break;\n            }\n        } catch (_) {\n            // We don't handle the error related to the sr panel, let it fail silently.\n        }\n    }, [errors]);\n\n    return { sortedErrorList, previousSortedErrors, clearSRPanel };\n};\n\nexport default useSRPanelForCardInputErrors;\n"],"names":["useSRPanelForCardInputErrors","errors","props","isValidating","retrieveLayout","specifications","billingAddress","sfp","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","partialAddressSchema","handlePartialAddressMode","billingAddressMode","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","sfStateErrorsObj","current","mapErrorsToValidationRuleResult","mergedErrors","useEffect","extractedAddressErrors","errorsWithoutAddress","errorsForPanel","srPanelResp","layout","countrySpecificLabels","getAddressLabelsForCountry","country","default","labels","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnFirstField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","lookupBlurBasedErrors","errorCode","errorMessage","_"],"mappings":"giBAUA,MAAMA,EAA+B,EAAGC,SAAQC,QAAOC,eAAcC,iBAAgBC,iBAAgBC,iBAAgBC,UAEjH,MAAMC,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAG1FC,EAAuCL,IAA2B,CACpEM,mBAAoBC,IAGlBC,EAAuBC,EAAyBf,EAAMgB,qBAErDC,EAAiBC,GAAsBC,EAA8B,MAGtEC,EAAuBC,EAAYJ,GAEnCK,EAAmBjB,EAAIkB,SAASC,kCAChCC,EAAe,IAAK1B,KAAWuB,GAqErC,OAnEAI,EAAU,KACN,IAEI,MAAQtB,eAAgBuB,KAA2BC,GAAyBH,EAEtEI,EAAiB,IAAKD,KAAyBD,GAG/CG,EAAyCnB,IAAgB,CAC3DZ,OAAQ8B,EACR5B,aAAcA,EAAasB,QAC3BQ,OAAQ7B,IAER8B,sBAAuB7B,EAAe8B,2BAA2B7B,GAAgB8B,UAAYpB,GAAsBqB,SAASC,SAI1HC,EAA8BP,GAAaO,4BAMjD,OALAnB,EAAmBmB,GAKXP,GAAaQ,QAEjB,KAAKC,EACG9B,GAAmB+B,EAAqBvC,EAAasB,QAASlB,EAAKyB,GAAaW,cAEpFC,WAAW,KACPzC,EAAasB,SAAU,GACxB,KACH,MAKJ,KAAKoB,EAA4B,CAC7B,MAAMC,EAAaC,EAA+CR,EAA6BjB,EAAsB,SAE/G0B,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAEhB,MAMMC,EANmBC,EAAsBF,EAAeG,WAMrBH,EAAeI,aAAe,KAEvE3C,EAAyBwC,QAIzBvC,IAEJ,KACJ,EAIR,CAAE,MAAO2C,GAET,GACD,CAACpD,IAEG,CAAEkB,kBAAiBG,uBAAsBZ"}
+{"version":3,"file":"useSRPanelForCardInputErrors.js","sources":["../../../../../../src/components/Card/components/CardInput/useSRPanelForCardInputErrors.ts"],"sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport useSRPanelContext from '../../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider';\nimport { handlePartialAddressMode, lookupBlurBasedErrors, mapFieldKey } from './utils';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../../core/Errors/constants';\nimport { setFocusOnFirstField } from './handlers';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\n\nconst useSRPanelForCardInputErrors = ({ errors, props, isValidating, retrieveLayout, specifications, billingAddress, sfp }) => {\n    // Extract fns from context\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n    // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n        fieldTypeMappingFn: mapFieldKey\n    });\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n\n    const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n    // Get the previous list of errors\n    const previousSortedErrors = usePrevious(sortedErrorList);\n\n    const sfStateErrorsObj = sfp.current?.mapErrorsToValidationRuleResult();\n    const mergedErrors = { ...errors, ...sfStateErrorsObj };\n\n    useEffect(() => {\n        try {\n            // Extract and then flatten billingAddress errors into a new object with *all* the field errors at top level\n            const { billingAddress: extractedAddressErrors, ...errorsWithoutAddress } = mergedErrors;\n\n            const errorsForPanel = { ...errorsWithoutAddress, ...extractedAddressErrors };\n\n            // Pass dynamic props (errors, layout etc) to SRPanel via partial\n            const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n                errors: errorsForPanel,\n                isValidating: isValidating.current,\n                layout: retrieveLayout(),\n                // If we don't have country specific address labels, we might have a label related to a partialAddressSchema (i.e. zipCode)\n                countrySpecificLabels: specifications.getAddressLabelsForCountry(billingAddress?.country) ?? partialAddressSchema?.default?.labels\n            });\n\n            // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n            const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n            setSortedErrorList(currentErrorsSortedByLayout);\n\n            /**\n             * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n             */\n            switch (srPanelResp?.action) {\n                // A call to focus the first field in error will always follow the call to validate the whole form\n                case ERROR_ACTION_FOCUS_FIELD:\n                    if (shouldMoveFocusSR) setFocusOnFirstField(isValidating.current, sfp, srPanelResp?.fieldToFocus);\n                    // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                    setTimeout(() => {\n                        isValidating.current = false;\n                    }, 300);\n                    break;\n\n                /**\n                 * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n                 */\n                case ERROR_ACTION_BLUR_SCENARIO: {\n                    const difference = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                    const latestErrorMsg = difference?.[0];\n\n                    if (latestErrorMsg) {\n                        // Use the error code to look up whether error is actually a blur based one (most are but some SF ones aren't)\n                        const isBlurBasedError = lookupBlurBasedErrors(latestErrorMsg.errorCode);\n\n                        /**\n                         *  ONLY ADD BLUR BASED ERRORS TO THE ERROR PANEL - doing this step prevents the non-blur based errors from being read out twice\n                         *  (once from the aria-live, error panel & once from the aria-describedby element)\n                         */\n                        const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                        // console.log('### CardInput2::componentDidUpdate:: #2 (not validating) single error:: latestSRError', latestSRError);\n                        setSRMessagesFromStrings(latestSRError);\n                    } else {\n                        // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                        // console.log('### CardInput2::componentDidUpdate:: #3(not validating) clearing errors:: NO latestErrorMsg');\n                        clearSRPanel();\n                    }\n                    break;\n                }\n                default:\n                    break;\n            }\n        } catch (_) {\n            // We don't handle the error related to the sr panel, let it fail silently.\n        }\n    }, [errors]);\n\n    return { sortedErrorList, previousSortedErrors, clearSRPanel };\n};\n\nexport default useSRPanelForCardInputErrors;\n"],"names":["useSRPanelForCardInputErrors","errors","props","isValidating","retrieveLayout","specifications","billingAddress","sfp","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","partialAddressSchema","handlePartialAddressMode","billingAddressMode","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","sfStateErrorsObj","current","mapErrorsToValidationRuleResult","mergedErrors","useEffect","extractedAddressErrors","errorsWithoutAddress","errorsForPanel","srPanelResp","layout","countrySpecificLabels","getAddressLabelsForCountry","country","default","labels","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnFirstField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","lookupBlurBasedErrors","errorCode","errorMessage","_"],"mappings":"giBAUA,MAAMA,EAA+B,EAAGC,SAAQC,QAAOC,eAAcC,iBAAgBC,iBAAgBC,iBAAgBC,UAEjH,MAAMC,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAG1FC,EAAuCL,IAA2B,CACpEM,mBAAoBC,IAGlBC,EAAuBC,EAAyBf,EAAMgB,qBAErDC,EAAiBC,GAAsBC,EAA8B,MAGtEC,EAAuBC,EAAYJ,GAEnCK,EAAmBjB,EAAIkB,SAASC,kCAChCC,EAAe,IAAK1B,KAAWuB,GAqErC,OAnEAI,EAAU,KACN,IAEI,MAAQtB,eAAgBuB,KAA2BC,GAAyBH,EAEtEI,EAAiB,IAAKD,KAAyBD,GAG/CG,EAAyCnB,IAAgB,CAC3DZ,OAAQ8B,EACR5B,aAAcA,EAAasB,QAC3BQ,OAAQ7B,IAER8B,sBAAuB7B,EAAe8B,2BAA2B7B,GAAgB8B,UAAYpB,GAAsBqB,SAASC,SAI1HC,EAA8BP,GAAaO,4BAMjD,OALAnB,EAAmBmB,GAKXP,GAAaQ,QAEjB,KAAKC,EACG9B,GAAmB+B,EAAqBvC,EAAasB,QAASlB,EAAKyB,GAAaW,cAEpFC,WAAW,KACPzC,EAAasB,SAAU,GACxB,KACH,MAKJ,KAAKoB,EAA4B,CAC7B,MAAMC,EAAaC,EAA+CR,EAA6BjB,EAAsB,SAE/G0B,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAEhB,MAMMC,EANmBC,EAAsBF,EAAeG,WAMrBH,EAAeI,aAAe,KAEvE3C,EAAyBwC,EAC7B,MAGIvC,IAEJ,KACJ,EAIR,CAAE,MAAO2C,GAET,GACD,CAACpD,IAEG,CAAEkB,kBAAiBG,uBAAsBZ"}

package/dist/es/components/Dropin/Dropin.js

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import o from"./defaultProps.js";import{DropinComponent as i}from"./components/DropinComponent.js";import{CoreProvider as n}from"../../core/Context/CoreProvider.js";import{getCommonProps as s}from"./components/utils.js";import r from"./elements/createElements.js";import a from"./elements/createStoredElements.js";import h from"./elements/createInstantPaymentElements.js";import{hasOwnProperty as d}from"../../utils/hasOwnProperty.js";import m from"../../core/Errors/SRPanelProvider.js";import p from"./elements/splitPaymentMethods.js";import{TxVariants as l}from"../tx-variants.js";function c(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const y=["paywithgoogle","googlepay","applepay"];class f extends e{storeElementRefOnCore(){this.core.storeElementReference(this)}formatProps(t){return{type:"dropin",...super.formatProps(t),instantPaymentTypes:Array.from(new Set(t.instantPaymentTypes)).filter(t=>y.includes(t))}}get isValid(){return!!this.dropinRef&&!!this.dropinRef.state.activePaymentMethod&&!!this.dropinRef.state.activePaymentMethod.isValid}showValidation(){return this.dropinRef.state.activePaymentMethod&&this.dropinRef.state.activePaymentMethod.showValidation(),this}setStatus(t,e={}){return this.dropinRef?.setStatus(t,e),this}get activePaymentMethod(){return this.dropinRef?.state||this.dropinRef?.state.activePaymentMethod?this.dropinRef.state.activePaymentMethod:null}get data(){return this.activePaymentMethod?this.dropinRef.state.activePaymentMethod.data:null}displayFinalAnimation(t){this.props.disableFinalAnimation||this.dropinRef.setStatus(t)}submit(){if(!this.activePaymentMethod)throw new Error("No active payment method.");this.activePaymentMethod.isValid||this.activePaymentMethod.showValidation(),this.activePaymentMethod.isInstantPayment&&this.closeActivePaymentMethod(),this.activePaymentMethod.submit()}handleAction(t,e={}){if(!t||!t.type){if(d(t,"action")&&d(t,"resultCode"))throw new Error('handleAction::Invalid Action - the passed action object itself has an "action" property and a "resultCode": have you passed in the whole response object by mistake?');throw new Error('handleAction::Invalid Action - the passed action object does not have a "type" property')}if("redirect"!==t.type&&this.activePaymentMethod?.updateWithAction)return this.activePaymentMethod.updateWithAction(t);this.elementRef instanceof f&&(e={...this.elementRef.activePaymentMethod?.props,...e});const o=this.core.createFromAction(t,{...e,elementRef:this.elementRef,onAdditionalDetails:this.handleAdditionalDetails,isDropin:!0});return o?(this.setStatus(o.props.statusType,{component:o}),this.componentFromAction=o,this):null}closeActivePaymentMethod(){this.dropinRef.closeActivePaymentMethod()}handleKeyPress(t){if("Enter"===t.key||"Enter"===t.code){if("radio"===document?.activeElement?.getAttribute("role"))return;super.handleKeyPress(t)}}onEnterKeyPressed(t,e){const o=this.activePaymentMethod??e;this.activePaymentMethod?.onEnterKeyPressed(t,o)}render(){return t(n,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(m,{srPanel:this.props.modules.srPanel},t(i,{...this.props,core:this.core,elementRef:this.elementRef,onCreateElements:this.handleCreate,ref:t=>{this.dropinRef=t}})))}constructor(t,e){super(t,e),c(this,"dropinRef",null),c(this,"paymentMethodsConfiguration",void 0),c(this,"componentFromAction",void 0),c(this,"handleCreate",()=>{const{paymentMethodsConfiguration:t,showStoredPaymentMethods:e,showPaymentMethods:o,instantPaymentTypes:i}=this.props,{paymentMethods:n,storedPaymentMethods:d,instantPaymentMethods:m,fastlanePaymentMethod:l}=p(this.core.paymentMethodsResponse,i),c=s({...this.props,elementRef:this.elementRef}),y=o?r(n,t,c,this.core):[],f=h(m,t,c,this.core);return[e?a(this.props.filterStoredPaymentMethods?.(d)??d,t,c,this.core):[],y,f,l?r([l],t,c,this.core):[]]}),c(this,"handleOrder",({order:t})=>{this.updateParent({order:t})}),this.submit=this.submit.bind(this),this.handleAction=this.handleAction.bind(this),this.props.paymentMethodComponents.forEach(t=>this.core.register(t)),this.paymentMethodsConfiguration=this.props.paymentMethodsConfiguration||{}}}c(f,"type",l.dropin),c(f,"defaultProps",o);export{f as default};
+import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import o from"./defaultProps.js";import{DropinComponent as i}from"./components/DropinComponent.js";import{CoreProvider as n}from"../../core/Context/CoreProvider.js";import{getCommonProps as s}from"./components/utils.js";import r from"./elements/createElements.js";import a from"./elements/createStoredElements.js";import h from"./elements/createInstantPaymentElements.js";import{hasOwnProperty as d}from"../../utils/hasOwnProperty.js";import m from"../../core/Errors/SRPanelProvider.js";import p from"./elements/splitPaymentMethods.js";import{TxVariants as l}from"../tx-variants.js";function c(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const y=["paywithgoogle","googlepay","applepay"];class f extends e{storeElementRefOnCore(){this.core.storeElementReference(this)}formatProps(t){return{type:"dropin",...super.formatProps(t),instantPaymentTypes:Array.from(new Set(t.instantPaymentTypes)).filter(t=>y.includes(t))}}get isValid(){return!!this.dropinRef&&!!this.dropinRef.state.activePaymentMethod&&!!this.dropinRef.state.activePaymentMethod.isValid}showValidation(){return this.dropinRef.state.activePaymentMethod&&this.dropinRef.state.activePaymentMethod.showValidation(),this}setStatus(t,e={}){return this.dropinRef?.setStatus(t,e),this}get activePaymentMethod(){return this.dropinRef?.state||this.dropinRef?.state.activePaymentMethod?this.dropinRef.state.activePaymentMethod:null}get data(){return this.activePaymentMethod?this.dropinRef.state.activePaymentMethod.data:null}displayFinalAnimation(t){this.props.disableFinalAnimation||this.dropinRef?.setStatus(t)}submit(){if(!this.activePaymentMethod)throw new Error("No active payment method.");this.activePaymentMethod.isValid||this.activePaymentMethod.showValidation(),this.activePaymentMethod.isInstantPayment&&this.closeActivePaymentMethod(),this.activePaymentMethod.submit()}handleAction(t,e={}){if(!t||!t.type){if(d(t,"action")&&d(t,"resultCode"))throw new Error('handleAction::Invalid Action - the passed action object itself has an "action" property and a "resultCode": have you passed in the whole response object by mistake?');throw new Error('handleAction::Invalid Action - the passed action object does not have a "type" property')}if("redirect"!==t.type&&this.activePaymentMethod?.updateWithAction)return this.activePaymentMethod.updateWithAction(t);this.elementRef instanceof f&&(e={...this.elementRef.activePaymentMethod?.props,...e});const o=this.core.createFromAction(t,{...e,elementRef:this.elementRef,onAdditionalDetails:this.handleAdditionalDetails,isDropin:!0});return o?(this.setStatus(o.props.statusType,{component:o}),this.componentFromAction=o,this):null}closeActivePaymentMethod(){this.dropinRef.closeActivePaymentMethod()}handleKeyPress(t){if("Enter"===t.key||"Enter"===t.code){if("radio"===document?.activeElement?.getAttribute("role"))return;super.handleKeyPress(t)}}onEnterKeyPressed(t,e){const o=this.activePaymentMethod??e;this.activePaymentMethod?.onEnterKeyPressed(t,o)}render(){return t(n,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(m,{srPanel:this.props.modules.srPanel},t(i,{...this.props,core:this.core,elementRef:this.elementRef,onCreateElements:this.handleCreate,ref:t=>{this.dropinRef=t}})))}constructor(t,e){super(t,e),c(this,"dropinRef",null),c(this,"paymentMethodsConfiguration",void 0),c(this,"componentFromAction",void 0),c(this,"handleCreate",()=>{const{paymentMethodsConfiguration:t,showStoredPaymentMethods:e,showPaymentMethods:o,instantPaymentTypes:i}=this.props,{paymentMethods:n,storedPaymentMethods:d,instantPaymentMethods:m,fastlanePaymentMethod:l}=p(this.core.paymentMethodsResponse,i),c=s({...this.props,elementRef:this.elementRef}),y=o?r(n,t,c,this.core):[],f=h(m,t,c,this.core);return[e?a(this.props.filterStoredPaymentMethods?.(d)??d,t,c,this.core):[],y,f,l?r([l],t,c,this.core):[]]}),c(this,"handleOrder",({order:t})=>{this.updateParent({order:t})}),this.submit=this.submit.bind(this),this.handleAction=this.handleAction.bind(this),this.props.paymentMethodComponents.forEach(t=>this.core.register(t)),this.paymentMethodsConfiguration=this.props.paymentMethodsConfiguration||{}}}c(f,"type",l.dropin),c(f,"defaultProps",o);export{f as default};
 //# sourceMappingURL=Dropin.js.map