@adyen/adyen-web 6.8.0 → 6.9.0

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as o,useRef as a,useEffect as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../../../external/classnames/index.js";import n from"./components/AchSecuredFields.js";import s from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"../../../internal/FormFields/Field/Field.js";import d from"../../../internal/LoadingWrapper/LoadingWrapper.js";import c from"./defaultProps.js";import i from"./defaultStyles.js";import{useCoreContext as u}from"../../../../core/Context/CoreProvider.js";import m from"../../../internal/StoreDetails/StoreDetails.js";import h from"../../../internal/FormFields/InputText.js";import p from"../../../internal/FormInstruction/FormInstruction.js";import N from"../../../internal/FormFields/RadioGroup/RadioGroup.js";function f(e,o=!1){return!o||!!e&&"string"==typeof e&&e.trim().length>0}function y(c){const{i18n:y}=u(),g=c.hasHolderName&&(!!c.holderName||!!c.data.holderName),[_,k]=o({}),[x,C]=o({...c.holderNameRequired&&{holderName:g}}),[j,v]=o({bankAccountType:"checking",...c.hasHolderName&&{holderName:c.holderName||c.data.holderName}}),[b,S]=o(!1),[R,q]=o(""),[A,P]=o(!1),T=e=>{const o=e.target.value;v({...j,holderName:o}),k({..._,holderName:!!c.holderNameRequired&&!f(o)}),C({...x,holderName:!c.holderNameRequired||f(o,c.holderNameRequired)})},V=e=>{const o=e.target.value;v({...j,bankAccountType:o})},w=a(null),[E,H]=o("ready"),I=a({});return Object.keys(I.current).length||c.setComponentRef?.(I.current),I.current.showValidation=()=>{w.current.showValidation(),c.holderNameRequired&&!x.holderName&&k({..._,holderName:!0})},I.current.setStatus=H,t((()=>(this.setFocusOn=w.current.setFocusOn,this.updateStyles=w.current.updateStyles,()=>{w.current.destroy()})),[]),t((()=>{const e=f(j.holderName,c.holderNameRequired),o=b&&e;c.onChange({data:j,isValid:o,storePaymentMethod:A})}),[j,x,_,A]),e("div",{className:"adyen-checkout__ach"},e(p,null),e(s,{ref:w,...F(c),styles:{...i,...c.styles},onChange:e=>{const o=e,a=o.autoCompleteName?o.autoCompleteName:j.holderName;v({...j,...o.data,holderName:a}),k({..._,...o.errors}),C({...x,...o.valid,holderName:!c.holderNameRequired||f(a,c.holderNameRequired)}),S(o.isSfpValid)},onFocus:e=>{const o=!0===e.focus;q(e.currentFocusObject),o?c.onFocus(e):c.onBlur(e)},render:({setRootNode:o,setFocusOn:a},t)=>e("div",{ref:o,className:"adyen-checkout__ach-input sf-input__wrapper"},e(d,{status:t.status},e("div",{className:r(["adyen-checkout__fieldset","adyen-checkout__fieldset--ach"])},e("div",{className:"adyen-checkout__fieldset__title"},y.get("ach.bankAccount")),e(l,{classNameModifiers:["bankAccountType","no-borders"],name:"bankAccountType",useLabelElement:!1},e(N,{name:"bankAccountType",value:j.bankAccountType,items:[{id:"checking",name:y.get("ach.checking")},{id:"savings",name:y.get("ach.savings")}],onChange:V,required:!0,style:"button"})),c.hasHolderName&&e(l,{label:y.get("ach.accountHolderNameField.title"),className:"adyen-checkout__pm__holderName",errorMessage:!!_.holderName&&y.get("ach.accountHolderNameField.invalid"),showContextualElement:c.showContextualElement,contextualText:y.get("ach.accountHolderNameField.contextualText"),isValid:!!x.holderName,name:"holderName"},e(h,{className:"adyen-checkout__pm__holderName__input adyen-checkout__input",placeholder:c?.placeholders?.holderName,value:j.holderName,required:c.holderNameRequired,onInput:T})),e(n,{focusedElement:R,onFocusField:a,errors:t.errors,valid:t.valid})),c.enableStoreDetails&&e(m,{onChange:P})))}),c.showPayButton&&c.payButton({status:E,label:y.get("confirmPurchase")}))}y.defaultProps=c;const F=e=>({autoFocus:e.autoFocus,clientKey:e.clientKey,i18n:e.i18n,keypadFix:e.keypadFix,legacyInputMode:e.legacyInputMode,loadingContext:e.loadingContext,onAllValid:e.onAllValid,onConfigSuccess:e.onConfigSuccess,onError:e.onError,onFieldValid:e.onFieldValid,onFocus:e.onFocus,onLoad:e.onLoad,showWarnings:e.showWarnings,styles:e.styles,type:e.type,forceCompat:e.forceCompat,resources:e.resources,placeholders:e.placeholders,handleKeyPress:e.handleKeyPress});export{y as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as o,useRef as a,useEffect as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../../../_virtual/index.js";import n from"./components/AchSecuredFields.js";import s from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"../../../internal/FormFields/Field/Field.js";import d from"../../../internal/LoadingWrapper/LoadingWrapper.js";import c from"./defaultProps.js";import i from"./defaultStyles.js";import{useCoreContext as u}from"../../../../core/Context/CoreProvider.js";import m from"../../../internal/StoreDetails/StoreDetails.js";import h from"../../../internal/FormFields/InputText.js";import p from"../../../internal/FormInstruction/FormInstruction.js";import N from"../../../internal/FormFields/RadioGroup/RadioGroup.js";function f(e,o=!1){return!o||!!e&&"string"==typeof e&&e.trim().length>0}function y(c){const{i18n:y}=u(),F=c.hasHolderName&&(!!c.holderName||!!c.data.holderName),[_,k]=o({}),[v,C]=o({...c.holderNameRequired&&{holderName:F}}),[j,x]=o({bankAccountType:"checking",...c.hasHolderName&&{holderName:c.holderName||c.data.holderName}}),[b,S]=o(!1),[R,q]=o(""),[A,P]=o(!1),T=e=>{const o=e.target.value;x({...j,holderName:o}),k({..._,holderName:!!c.holderNameRequired&&!f(o)}),C({...v,holderName:!c.holderNameRequired||f(o,c.holderNameRequired)})},V=e=>{const o=e.target.value;x({...j,bankAccountType:o})},w=a(null),[E,H]=o("ready"),I=a({});return Object.keys(I.current).length||c.setComponentRef?.(I.current),I.current.showValidation=()=>{w.current.showValidation(),c.holderNameRequired&&!v.holderName&&k({..._,holderName:!0})},I.current.setStatus=H,t((()=>(this.setFocusOn=w.current.setFocusOn,this.updateStyles=w.current.updateStyles,()=>{w.current.destroy()})),[]),t((()=>{const e=f(j.holderName,c.holderNameRequired),o=b&&e;c.onChange({data:j,isValid:o,storePaymentMethod:A})}),[j,v,_,A]),e("div",{className:r({"adyen-checkout__ach":!0,"adyen-checkout__ach--loading":"loading"===E})},e(p,null),e(s,{ref:w,...g(c),styles:{...i,...c.styles},onChange:e=>{const o=e,a=o.autoCompleteName?o.autoCompleteName:j.holderName;x({...j,...o.data,holderName:a}),k({..._,...o.errors}),C({...v,...o.valid,holderName:!c.holderNameRequired||f(a,c.holderNameRequired)}),S(o.isSfpValid)},onFocus:e=>{const o=!0===e.focus;q(e.currentFocusObject),o?c.onFocus(e):c.onBlur(e)},render:({setRootNode:o,setFocusOn:a},t)=>e("div",{ref:o,className:"adyen-checkout__ach-input sf-input__wrapper"},e(d,{status:t.status},e("div",{className:r(["adyen-checkout__fieldset","adyen-checkout__fieldset--ach"])},e("div",{className:"adyen-checkout__fieldset__title"},y.get("ach.bankAccount")),e(l,{classNameModifiers:["bankAccountType","no-borders"],name:"bankAccountType",useLabelElement:!1},e(N,{name:"bankAccountType",value:j.bankAccountType,items:[{id:"checking",name:y.get("ach.checking")},{id:"savings",name:y.get("ach.savings")}],onChange:V,required:!0,style:"button"})),c.hasHolderName&&e(l,{label:y.get("ach.accountHolderNameField.title"),className:"adyen-checkout__pm__holderName",errorMessage:!!_.holderName&&y.get("ach.accountHolderNameField.invalid"),showContextualElement:c.showContextualElement,contextualText:y.get("ach.accountHolderNameField.contextualText"),isValid:!!v.holderName,name:"holderName"},e(h,{className:"adyen-checkout__pm__holderName__input adyen-checkout__input",placeholder:c?.placeholders?.holderName,value:j.holderName,required:c.holderNameRequired,onInput:T})),e(n,{focusedElement:R,onFocusField:a,errors:t.errors,valid:t.valid})),c.enableStoreDetails&&e(m,{onChange:P})))}),c.showPayButton&&c.payButton({status:E,label:y.get("confirmPurchase")}))}y.defaultProps=c;const g=e=>({autoFocus:e.autoFocus,clientKey:e.clientKey,i18n:e.i18n,keypadFix:e.keypadFix,legacyInputMode:e.legacyInputMode,loadingContext:e.loadingContext,onAllValid:e.onAllValid,onConfigSuccess:e.onConfigSuccess,onError:e.onError,onFieldValid:e.onFieldValid,onFocus:e.onFocus,onLoad:e.onLoad,showWarnings:e.showWarnings,styles:e.styles,type:e.type,forceCompat:e.forceCompat,resources:e.resources,placeholders:e.placeholders,handleKeyPress:e.handleKeyPress});export{y as default};
 //# sourceMappingURL=AchInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AchInput.js","sources":["../../../../../../src/components/Ach/components/AchInput/AchInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport classNames from 'classnames';\nimport AchSecuredFields from './components/AchSecuredFields';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport Field from '../../../internal/FormFields/Field';\nimport LoadingWrapper from '../../../internal/LoadingWrapper/LoadingWrapper';\nimport defaultProps from './defaultProps';\nimport defaultStyles from './defaultStyles';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './AchInput.scss';\nimport { ACHInputDataState, ACHInputProps, ACHInputStateError, ACHInputStateValid } from './types';\nimport StoreDetails from '../../../internal/StoreDetails';\nimport InputText from '../../../internal/FormFields/InputText';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\nimport RadioGroup from '../../../internal/FormFields/RadioGroup';\n\nfunction validateHolderName(holderName, holderNameRequired = false) {\n    if (holderNameRequired) {\n        return !!holderName && typeof holderName === 'string' && holderName.trim().length > 0;\n    }\n    return true;\n}\n\nfunction AchInput(props: ACHInputProps) {\n    const { i18n } = useCoreContext();\n\n    const holderNameIsValid = props.hasHolderName && (!!props.holderName || !!props.data.holderName);\n\n    const [errors, setErrors] = useState<ACHInputStateError>({});\n    const [valid, setValid] = useState<ACHInputStateValid>({\n        ...(props.holderNameRequired && { holderName: holderNameIsValid })\n    });\n\n    const [data, setData] = useState<ACHInputDataState>({\n        bankAccountType: 'checking',\n        ...(props.hasHolderName && { holderName: props.holderName || props.data.holderName })\n    });\n\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [focusedElement, setFocusedElement] = useState('');\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n\n    const handleFocus = e => {\n        const isFocused = e.focus === true;\n\n        setFocusedElement(e.currentFocusObject);\n\n        if (isFocused) {\n            props.onFocus(e);\n        } else {\n            props.onBlur(e);\n        }\n    };\n\n    const handleHolderName = e => {\n        const holderName = e.target.value;\n\n        setData({ ...data, holderName });\n        setErrors({ ...errors, holderName: props.holderNameRequired ? !validateHolderName(holderName) : false });\n        setValid({ ...valid, holderName: props.holderNameRequired ? validateHolderName(holderName, props.holderNameRequired) : true });\n    };\n\n    const handleBankAccountType = e => {\n        const bankAccountType = e.target.value;\n\n        setData({ ...data, bankAccountType });\n    };\n\n    const handleSecuredFieldsChange = newState => {\n        const sfState = newState;\n\n        const tempHolderName = sfState.autoCompleteName ? sfState.autoCompleteName : data.holderName;\n\n        setData({ ...data, ...sfState.data, holderName: tempHolderName });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({\n            ...valid,\n            ...sfState.valid,\n            holderName: props.holderNameRequired ? validateHolderName(tempHolderName, props.holderNameRequired) : true\n        });\n\n        setIsSfpValid(sfState.isSfpValid);\n    };\n\n    // Refs\n    const sfp = useRef(null);\n\n    const [status, setStatus] = useState('ready');\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const achRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(achRef.current).length) {\n        props.setComponentRef?.(achRef.current);\n    }\n\n    achRef.current.showValidation = () => {\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName\n        if (props.holderNameRequired && !valid.holderName) {\n            setErrors({ ...errors, holderName: true });\n        }\n    };\n\n    achRef.current.setStatus = setStatus;\n\n    useEffect(() => {\n        this.setFocusOn = sfp.current.setFocusOn;\n        this.updateStyles = sfp.current.updateStyles;\n\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    // Run when state.data, -errors or -valid change\n    useEffect(() => {\n        // Validate whole component i.e holderName + securedFields\n        const holderNameValid = validateHolderName(data.holderName, props.holderNameRequired);\n        const sfpValid = isSfpValid;\n\n        const isValid = sfpValid && holderNameValid;\n\n        props.onChange({ data, isValid, storePaymentMethod });\n    }, [data, valid, errors, storePaymentMethod]);\n\n    return (\n        <div className=\"adyen-checkout__ach\">\n            <FormInstruction />\n\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...defaultStyles, ...props.styles }}\n                onChange={handleSecuredFieldsChange}\n                onFocus={handleFocus}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div ref={setRootNode} className=\"adyen-checkout__ach-input sf-input__wrapper\">\n                        <LoadingWrapper status={sfpState.status}>\n                            <div className={classNames(['adyen-checkout__fieldset', 'adyen-checkout__fieldset--ach'])}>\n                                {<div className=\"adyen-checkout__fieldset__title\">{i18n.get('ach.bankAccount')}</div>}\n\n                                <Field classNameModifiers={['bankAccountType', 'no-borders']} name={'bankAccountType'} useLabelElement={false}>\n                                    <RadioGroup\n                                        name={'bankAccountType'}\n                                        value={data.bankAccountType}\n                                        items={[\n                                            { id: 'checking', name: i18n.get('ach.checking') },\n                                            { id: 'savings', name: i18n.get('ach.savings') }\n                                        ]}\n                                        onChange={handleBankAccountType}\n                                        required={true}\n                                        style={'button'}\n                                    />\n                                </Field>\n\n                                {props.hasHolderName && (\n                                    <Field\n                                        label={i18n.get('ach.accountHolderNameField.title')}\n                                        className={'adyen-checkout__pm__holderName'}\n                                        errorMessage={!!errors.holderName && i18n.get('ach.accountHolderNameField.invalid')}\n                                        showContextualElement={props.showContextualElement}\n                                        contextualText={i18n.get('ach.accountHolderNameField.contextualText')}\n                                        isValid={!!valid.holderName}\n                                        name={'holderName'}\n                                    >\n                                        <InputText\n                                            className=\"adyen-checkout__pm__holderName__input adyen-checkout__input\"\n                                            placeholder={props?.placeholders?.holderName}\n                                            value={data.holderName}\n                                            required={props.holderNameRequired}\n                                            onInput={handleHolderName}\n                                        />\n                                    </Field>\n                                )}\n\n                                <AchSecuredFields\n                                    focusedElement={focusedElement}\n                                    onFocusField={setFocusOn}\n                                    errors={sfpState.errors}\n                                    valid={sfpState.valid}\n                                />\n                            </div>\n\n                            {props.enableStoreDetails && <StoreDetails onChange={setStorePaymentMethod} />}\n                        </LoadingWrapper>\n                    </div>\n                )}\n            />\n            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n        </div>\n    );\n}\n\nAchInput.defaultProps = defaultProps;\n\nexport default AchInput;\n\nconst extractPropsForSFP = (props: ACHInputProps) => {\n    return {\n        autoFocus: props.autoFocus,\n        clientKey: props.clientKey,\n        i18n: props.i18n,\n        keypadFix: props.keypadFix,\n        legacyInputMode: props.legacyInputMode,\n        loadingContext: props.loadingContext,\n        onAllValid: props.onAllValid,\n        onConfigSuccess: props.onConfigSuccess,\n        onError: props.onError,\n        onFieldValid: props.onFieldValid,\n        onFocus: props.onFocus,\n        onLoad: props.onLoad,\n        showWarnings: props.showWarnings,\n        styles: props.styles,\n        type: props.type,\n        forceCompat: props.forceCompat,\n        resources: props.resources,\n        placeholders: props.placeholders,\n        handleKeyPress: props.handleKeyPress\n    };\n};\n"],"names":["validateHolderName","holderName","holderNameRequired","trim","length","AchInput","props","i18n","useCoreContext","holderNameIsValid","hasHolderName","data","errors","setErrors","useState","valid","setValid","setData","bankAccountType","isSfpValid","setIsSfpValid","focusedElement","setFocusedElement","storePaymentMethod","setStorePaymentMethod","handleHolderName","e","target","value","handleBankAccountType","sfp","useRef","status","setStatus","achRef","Object","keys","current","setComponentRef","showValidation","useEffect","this","setFocusOn","updateStyles","destroy","holderNameValid","isValid","onChange","h","div","className","FormInstruction","SecuredFieldsProvider","ref","extractPropsForSFP","styles","defaultStyles","newState","sfState","tempHolderName","autoCompleteName","onFocus","isFocused","focus","currentFocusObject","onBlur","render","setRootNode","sfpState","LoadingWrapper","classNames","get","Field","classNameModifiers","name","useLabelElement","RadioGroup","items","id","required","style","label","errorMessage","showContextualElement","contextualText","InputText","placeholder","placeholders","onInput","AchSecuredFields","onFocusField","enableStoreDetails","StoreDetails","showPayButton","payButton","defaultProps","autoFocus","clientKey","keypadFix","legacyInputMode","loadingContext","onAllValid","onConfigSuccess","onError","onFieldValid","onLoad","showWarnings","type","forceCompat","resources","handleKeyPress"],"mappings":"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"}
+{"version":3,"file":"AchInput.js","sources":["../../../../../../src/components/Ach/components/AchInput/AchInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport classNames from 'classnames';\nimport AchSecuredFields from './components/AchSecuredFields';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport Field from '../../../internal/FormFields/Field';\nimport LoadingWrapper from '../../../internal/LoadingWrapper/LoadingWrapper';\nimport defaultProps from './defaultProps';\nimport defaultStyles from './defaultStyles';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './AchInput.scss';\nimport { ACHInputDataState, ACHInputProps, ACHInputStateError, ACHInputStateValid } from './types';\nimport StoreDetails from '../../../internal/StoreDetails';\nimport InputText from '../../../internal/FormFields/InputText';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\nimport RadioGroup from '../../../internal/FormFields/RadioGroup';\n\nfunction validateHolderName(holderName, holderNameRequired = false) {\n    if (holderNameRequired) {\n        return !!holderName && typeof holderName === 'string' && holderName.trim().length > 0;\n    }\n    return true;\n}\n\nfunction AchInput(props: ACHInputProps) {\n    const { i18n } = useCoreContext();\n\n    const holderNameIsValid = props.hasHolderName && (!!props.holderName || !!props.data.holderName);\n\n    const [errors, setErrors] = useState<ACHInputStateError>({});\n    const [valid, setValid] = useState<ACHInputStateValid>({\n        ...(props.holderNameRequired && { holderName: holderNameIsValid })\n    });\n\n    const [data, setData] = useState<ACHInputDataState>({\n        bankAccountType: 'checking',\n        ...(props.hasHolderName && { holderName: props.holderName || props.data.holderName })\n    });\n\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [focusedElement, setFocusedElement] = useState('');\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n\n    const handleFocus = e => {\n        const isFocused = e.focus === true;\n\n        setFocusedElement(e.currentFocusObject);\n\n        if (isFocused) {\n            props.onFocus(e);\n        } else {\n            props.onBlur(e);\n        }\n    };\n\n    const handleHolderName = e => {\n        const holderName = e.target.value;\n\n        setData({ ...data, holderName });\n        setErrors({ ...errors, holderName: props.holderNameRequired ? !validateHolderName(holderName) : false });\n        setValid({ ...valid, holderName: props.holderNameRequired ? validateHolderName(holderName, props.holderNameRequired) : true });\n    };\n\n    const handleBankAccountType = e => {\n        const bankAccountType = e.target.value;\n\n        setData({ ...data, bankAccountType });\n    };\n\n    const handleSecuredFieldsChange = newState => {\n        const sfState = newState;\n\n        const tempHolderName = sfState.autoCompleteName ? sfState.autoCompleteName : data.holderName;\n\n        setData({ ...data, ...sfState.data, holderName: tempHolderName });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({\n            ...valid,\n            ...sfState.valid,\n            holderName: props.holderNameRequired ? validateHolderName(tempHolderName, props.holderNameRequired) : true\n        });\n\n        setIsSfpValid(sfState.isSfpValid);\n    };\n\n    // Refs\n    const sfp = useRef(null);\n\n    const [status, setStatus] = useState('ready');\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const achRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(achRef.current).length) {\n        props.setComponentRef?.(achRef.current);\n    }\n\n    achRef.current.showValidation = () => {\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName\n        if (props.holderNameRequired && !valid.holderName) {\n            setErrors({ ...errors, holderName: true });\n        }\n    };\n\n    achRef.current.setStatus = setStatus;\n\n    useEffect(() => {\n        this.setFocusOn = sfp.current.setFocusOn;\n        this.updateStyles = sfp.current.updateStyles;\n\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    // Run when state.data, -errors or -valid change\n    useEffect(() => {\n        // Validate whole component i.e holderName + securedFields\n        const holderNameValid = validateHolderName(data.holderName, props.holderNameRequired);\n        const sfpValid = isSfpValid;\n\n        const isValid = sfpValid && holderNameValid;\n\n        props.onChange({ data, isValid, storePaymentMethod });\n    }, [data, valid, errors, storePaymentMethod]);\n\n    return (\n        <div\n            className={classNames({\n                'adyen-checkout__ach': true,\n                'adyen-checkout__ach--loading': status === 'loading'\n            })}\n        >\n            <FormInstruction />\n\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...defaultStyles, ...props.styles }}\n                onChange={handleSecuredFieldsChange}\n                onFocus={handleFocus}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div ref={setRootNode} className=\"adyen-checkout__ach-input sf-input__wrapper\">\n                        <LoadingWrapper status={sfpState.status}>\n                            <div className={classNames(['adyen-checkout__fieldset', 'adyen-checkout__fieldset--ach'])}>\n                                {<div className=\"adyen-checkout__fieldset__title\">{i18n.get('ach.bankAccount')}</div>}\n\n                                <Field classNameModifiers={['bankAccountType', 'no-borders']} name={'bankAccountType'} useLabelElement={false}>\n                                    <RadioGroup\n                                        name={'bankAccountType'}\n                                        value={data.bankAccountType}\n                                        items={[\n                                            { id: 'checking', name: i18n.get('ach.checking') },\n                                            { id: 'savings', name: i18n.get('ach.savings') }\n                                        ]}\n                                        onChange={handleBankAccountType}\n                                        required={true}\n                                        style={'button'}\n                                    />\n                                </Field>\n\n                                {props.hasHolderName && (\n                                    <Field\n                                        label={i18n.get('ach.accountHolderNameField.title')}\n                                        className={'adyen-checkout__pm__holderName'}\n                                        errorMessage={!!errors.holderName && i18n.get('ach.accountHolderNameField.invalid')}\n                                        showContextualElement={props.showContextualElement}\n                                        contextualText={i18n.get('ach.accountHolderNameField.contextualText')}\n                                        isValid={!!valid.holderName}\n                                        name={'holderName'}\n                                    >\n                                        <InputText\n                                            className=\"adyen-checkout__pm__holderName__input adyen-checkout__input\"\n                                            placeholder={props?.placeholders?.holderName}\n                                            value={data.holderName}\n                                            required={props.holderNameRequired}\n                                            onInput={handleHolderName}\n                                        />\n                                    </Field>\n                                )}\n\n                                <AchSecuredFields\n                                    focusedElement={focusedElement}\n                                    onFocusField={setFocusOn}\n                                    errors={sfpState.errors}\n                                    valid={sfpState.valid}\n                                />\n                            </div>\n\n                            {props.enableStoreDetails && <StoreDetails onChange={setStorePaymentMethod} />}\n                        </LoadingWrapper>\n                    </div>\n                )}\n            />\n            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n        </div>\n    );\n}\n\nAchInput.defaultProps = defaultProps;\n\nexport default AchInput;\n\nconst extractPropsForSFP = (props: ACHInputProps) => {\n    return {\n        autoFocus: props.autoFocus,\n        clientKey: props.clientKey,\n        i18n: props.i18n,\n        keypadFix: props.keypadFix,\n        legacyInputMode: props.legacyInputMode,\n        loadingContext: props.loadingContext,\n        onAllValid: props.onAllValid,\n        onConfigSuccess: props.onConfigSuccess,\n        onError: props.onError,\n        onFieldValid: props.onFieldValid,\n        onFocus: props.onFocus,\n        onLoad: props.onLoad,\n        showWarnings: props.showWarnings,\n        styles: props.styles,\n        type: props.type,\n        forceCompat: props.forceCompat,\n        resources: props.resources,\n        placeholders: props.placeholders,\n        handleKeyPress: props.handleKeyPress\n    };\n};\n"],"names":["validateHolderName","holderName","holderNameRequired","trim","length","AchInput","props","i18n","useCoreContext","holderNameIsValid","hasHolderName","data","errors","setErrors","useState","valid","setValid","setData","bankAccountType","isSfpValid","setIsSfpValid","focusedElement","setFocusedElement","storePaymentMethod","setStorePaymentMethod","handleHolderName","e","target","value","handleBankAccountType","sfp","useRef","status","setStatus","achRef","Object","keys","current","setComponentRef","showValidation","useEffect","this","setFocusOn","updateStyles","destroy","holderNameValid","isValid","onChange","h","div","className","classNames","FormInstruction","SecuredFieldsProvider","ref","extractPropsForSFP","styles","defaultStyles","newState","sfState","tempHolderName","autoCompleteName","onFocus","isFocused","focus","currentFocusObject","onBlur","render","setRootNode","sfpState","LoadingWrapper","get","Field","classNameModifiers","name","useLabelElement","RadioGroup","items","id","required","style","label","errorMessage","showContextualElement","contextualText","InputText","placeholder","placeholders","onInput","AchSecuredFields","onFocusField","enableStoreDetails","StoreDetails","showPayButton","payButton","defaultProps","autoFocus","clientKey","keypadFix","legacyInputMode","loadingContext","onAllValid","onConfigSuccess","onError","onFieldValid","onLoad","showWarnings","type","forceCompat","resources","handleKeyPress"],"mappings":"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"}

package/dist/es/components/Ach/components/AchInput/components/AchSFInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import r from"../../../../Card/components/CardInput/components/DataSfSpan.js";import{alternativeLabelContent as n}from"../../../../Card/components/CardInput/components/FieldLabelAlternative.js";import{capitalizeFirstLetter as o}from"../../../../../utils/textUtils.js";const s=({id:s,dataInfo:i,className:l="",label:d,focused:c,filled:m,errorMessage:p="",isValid:u=!1,onFocusField:f,dir:F})=>{const _=`encrypted${o(s)}`;return e(a,{label:d,focused:c,filled:m,classNameModifiers:[s],onFocusField:()=>f(_),errorMessage:p,isValid:u,className:l,dir:F,name:s,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:n},e(r,{encryptedFieldType:_,"data-info":i,className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":p.length,"adyen-checkout__input--focus":c,"adyen-checkout__input--valid":u})}))};export{s as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import r from"../../../../Card/components/CardInput/components/DataSfSpan.js";import{alternativeLabelContent as o}from"../../../../Card/components/CardInput/components/FieldLabelAlternative.js";import{capitalizeFirstLetter as n}from"../../../../../utils/textUtils.js";const i=({id:i,dataInfo:s,className:l="",label:d,focused:c,filled:m,errorMessage:p="",isValid:u=!1,onFocusField:f,dir:_})=>{const F=`encrypted${n(i)}`;return e(a,{label:d,focused:c,filled:m,classNameModifiers:[i],onFocusField:()=>f(F),errorMessage:p,isValid:u,className:l,dir:_,name:i,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:o},e(r,{encryptedFieldType:F,"data-info":s,className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":p.length,"adyen-checkout__input--focus":c,"adyen-checkout__input--valid":u})}))};export{i as default};
 //# sourceMappingURL=AchSFInput.js.map

package/dist/es/components/Ach/components/AchInput/components/AchSFInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AchSFInput.js","sources":["../../../../../../../src/components/Ach/components/AchInput/components/AchSFInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport DataSfSpan from '../../../../Card/components/CardInput/components/DataSfSpan';\nimport { alternativeLabelContent } from '../../../../Card/components/CardInput/components/FieldLabelAlternative';\nimport { capitalizeFirstLetter } from '../../../../../utils/textUtils';\n\nconst AchSFInput = ({ id, dataInfo, className = '', label, focused, filled, errorMessage = '', isValid = false, onFocusField, dir }) => {\n    const capitalisedId = capitalizeFirstLetter(id);\n    const encryptedIdStr = `encrypted${capitalisedId}`;\n\n    return (\n        <Field\n            label={label}\n            focused={focused}\n            filled={filled}\n            classNameModifiers={[id]}\n            onFocusField={() => onFocusField(encryptedIdStr)}\n            errorMessage={errorMessage}\n            isValid={isValid}\n            className={className}\n            dir={dir}\n            name={id}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n        >\n            <DataSfSpan\n                encryptedFieldType={encryptedIdStr}\n                data-info={dataInfo}\n                className={classNames({\n                    'adyen-checkout__input': true,\n                    'adyen-checkout__input--large': true,\n                    'adyen-checkout__input--error': errorMessage.length,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n        </Field>\n    );\n};\n\nexport default AchSFInput;\n"],"names":["AchSFInput","id","dataInfo","className","label","focused","filled","errorMessage","isValid","onFocusField","dir","encryptedIdStr","capitalizeFirstLetter","h","Field","classNameModifiers","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","data-info","classNames","length"],"mappings":"mdAOMA,MAAAA,EAAa,EAAGC,KAAIC,WAAUC,YAAY,GAAIC,QAAOC,UAASC,SAAQC,eAAe,GAAIC,WAAU,EAAOC,eAAcC,UAC1H,MACMC,EAAiB,YADDC,EAAsBX,KAG5C,OACIY,EAACC,EAAAA,CACGV,MAAOA,EACPC,QAASA,EACTC,OAAQA,EACRS,mBAAoB,CAACd,GACrBQ,aAAc,IAAMA,EAAaE,GACjCJ,aAAcA,EACdC,QAASA,EACTL,UAAWA,EACXO,IAAKA,EACLM,KAAMf,EACNgB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1BP,EAACQ,EAAAA,CACGC,mBAAoBX,EACpBY,YAAWrB,EACXC,UAAWqB,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgCjB,EAAakB,OAC7C,+BAAgCpB,EAChC,+BAAgCG"}
+{"version":3,"file":"AchSFInput.js","sources":["../../../../../../../src/components/Ach/components/AchInput/components/AchSFInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport DataSfSpan from '../../../../Card/components/CardInput/components/DataSfSpan';\nimport { alternativeLabelContent } from '../../../../Card/components/CardInput/components/FieldLabelAlternative';\nimport { capitalizeFirstLetter } from '../../../../../utils/textUtils';\n\nconst AchSFInput = ({ id, dataInfo, className = '', label, focused, filled, errorMessage = '', isValid = false, onFocusField, dir }) => {\n    const capitalisedId = capitalizeFirstLetter(id);\n    const encryptedIdStr = `encrypted${capitalisedId}`;\n\n    return (\n        <Field\n            label={label}\n            focused={focused}\n            filled={filled}\n            classNameModifiers={[id]}\n            onFocusField={() => onFocusField(encryptedIdStr)}\n            errorMessage={errorMessage}\n            isValid={isValid}\n            className={className}\n            dir={dir}\n            name={id}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n        >\n            <DataSfSpan\n                encryptedFieldType={encryptedIdStr}\n                data-info={dataInfo}\n                className={classNames({\n                    'adyen-checkout__input': true,\n                    'adyen-checkout__input--large': true,\n                    'adyen-checkout__input--error': errorMessage.length,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n        </Field>\n    );\n};\n\nexport default AchSFInput;\n"],"names":["AchSFInput","id","dataInfo","className","label","focused","filled","errorMessage","isValid","onFocusField","dir","encryptedIdStr","capitalizeFirstLetter","h","Field","classNameModifiers","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","data-info","classNames","length"],"mappings":"wcAOMA,MAAAA,EAAa,EAAGC,KAAIC,WAAUC,YAAY,GAAIC,QAAOC,UAASC,SAAQC,eAAe,GAAIC,WAAU,EAAOC,eAAcC,UAC1H,MACMC,EAAiB,YADDC,EAAsBX,KAG5C,OACIY,EAACC,EAAAA,CACGV,MAAOA,EACPC,QAASA,EACTC,OAAQA,EACRS,mBAAoB,CAACd,GACrBQ,aAAc,IAAMA,EAAaE,GACjCJ,aAAcA,EACdC,QAASA,EACTL,UAAWA,EACXO,IAAKA,EACLM,KAAMf,EACNgB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1BP,EAACQ,EAAAA,CACGC,mBAAoBX,EACpBY,YAAWrB,EACXC,UAAWqB,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgCjB,EAAakB,OAC7C,+BAAgCpB,EAChC,+BAAgCG"}

package/dist/es/components/ApplePay/components/ApplePayButton.js

@@ -1,2 +1,2 @@
-import{Component as e,createElement as t}from"../../../external/preact/dist/preact.js";import a from"../../../external/classnames/index.js";class p extends e{render({buttonColor:e,buttonType:p}){return t("button",{type:"button","aria-label":this.props.i18n.get("payButton"),lang:this.props.i18n.languageCode,className:a("adyen-checkout__applepay__button",`adyen-checkout__applepay__button--${e}`,`adyen-checkout__applepay__button--${p}`,"apple-pay","apple-pay-button",`apple-pay-button-${e}`,`apple-pay-button--type-${p}`),onClick:this.props.onClick})}}var n,o,l;l={onClick:()=>{},buttonColor:"black",buttonType:"plain"},(o="defaultProps")in(n=p)?Object.defineProperty(n,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):n[o]=l;export{p as default};
+import{Component as t,createElement as e}from"../../../external/preact/dist/preact.js";import a from"../../../_virtual/index.js";class p extends t{render({buttonColor:t,buttonType:p}){return e("button",{type:"button","aria-label":this.props.i18n.get("payButton"),lang:this.props.i18n.languageCode,className:a("adyen-checkout__applepay__button",`adyen-checkout__applepay__button--${t}`,`adyen-checkout__applepay__button--${p}`,"apple-pay","apple-pay-button",`apple-pay-button-${t}`,`apple-pay-button--type-${p}`),onClick:this.props.onClick})}}var o,n,l;l={onClick:()=>{},buttonColor:"black",buttonType:"plain"},(n="defaultProps")in(o=p)?Object.defineProperty(o,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):o[n]=l;export{p as default};
 //# sourceMappingURL=ApplePayButton.js.map

package/dist/es/components/ApplePay/components/ApplePayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplePayButton.js","sources":["../../../../../src/components/ApplePay/components/ApplePayButton.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport cx from 'classnames';\nimport './ApplePayButton.scss';\nimport Language from '../../../language/Language';\nimport { ApplePayButtonType } from '../types';\n\ninterface ApplePayButtonProps {\n    i18n: Language;\n    buttonColor: 'black' | 'white' | 'white-with-line';\n    buttonType: ApplePayButtonType;\n    onClick: (event) => void;\n}\n\nclass ApplePayButton extends Component<ApplePayButtonProps> {\n    public static defaultProps = {\n        onClick: () => {},\n        buttonColor: 'black',\n        buttonType: 'plain'\n    };\n\n    render({ buttonColor, buttonType }) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={this.props.i18n.get('payButton')}\n                lang={this.props.i18n.languageCode}\n                className={cx(\n                    'adyen-checkout__applepay__button',\n                    `adyen-checkout__applepay__button--${buttonColor}`,\n                    `adyen-checkout__applepay__button--${buttonType}`,\n                    'apple-pay',\n                    'apple-pay-button',\n                    `apple-pay-button-${buttonColor}`,\n                    `apple-pay-button--type-${buttonType}`\n                )}\n                onClick={this.props.onClick}\n            />\n        );\n    }\n}\n\nexport default ApplePayButton;\n"],"names":["ApplePayButton","Component","render","buttonColor","buttonType","h","button","type","aria-label","this","props","i18n","get","lang","languageCode","className","cx","onClick","defaultProps"],"mappings":"4IAaA,MAAMA,UAAuBC,EAOzBC,MAAAA,EAAOC,YAAEA,EAAWC,WAAEA,IAClB,OACIC,EAACC,SAAAA,CACGC,KAAK,SACLC,aAAYC,KAAKC,MAAMC,KAAKC,IAAI,aAChCC,KAAMJ,KAAKC,MAAMC,KAAKG,aACtBC,UAAWC,EACP,mCACA,qCAAqCb,IACrC,qCAAqCC,IACrC,YACA,mBACA,oBAAoBD,IACpB,0BAA0BC,KAE9Ba,QAASR,KAAKC,MAAMO,SAGhC,cAxB6B,CACzBA,QAAS,OACTd,YAAa,QACbC,WAAY,YAHFc,oBADZlB"}
+{"version":3,"file":"ApplePayButton.js","sources":["../../../../../src/components/ApplePay/components/ApplePayButton.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport cx from 'classnames';\nimport './ApplePayButton.scss';\nimport Language from '../../../language/Language';\nimport { ApplePayButtonType } from '../types';\n\ninterface ApplePayButtonProps {\n    i18n: Language;\n    buttonColor: 'black' | 'white' | 'white-with-line';\n    buttonType: ApplePayButtonType;\n    onClick: (event) => void;\n}\n\nclass ApplePayButton extends Component<ApplePayButtonProps> {\n    public static defaultProps = {\n        onClick: () => {},\n        buttonColor: 'black',\n        buttonType: 'plain'\n    };\n\n    render({ buttonColor, buttonType }) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={this.props.i18n.get('payButton')}\n                lang={this.props.i18n.languageCode}\n                className={cx(\n                    'adyen-checkout__applepay__button',\n                    `adyen-checkout__applepay__button--${buttonColor}`,\n                    `adyen-checkout__applepay__button--${buttonType}`,\n                    'apple-pay',\n                    'apple-pay-button',\n                    `apple-pay-button-${buttonColor}`,\n                    `apple-pay-button--type-${buttonType}`\n                )}\n                onClick={this.props.onClick}\n            />\n        );\n    }\n}\n\nexport default ApplePayButton;\n"],"names":["ApplePayButton","Component","render","buttonColor","buttonType","h","button","type","aria-label","this","props","i18n","get","lang","languageCode","className","cx","onClick","defaultProps"],"mappings":"iIAaA,MAAMA,UAAuBC,EAOzBC,MAAAA,EAAOC,YAAEA,EAAWC,WAAEA,IAClB,OACIC,EAACC,SAAAA,CACGC,KAAK,SACLC,aAAYC,KAAKC,MAAMC,KAAKC,IAAI,aAChCC,KAAMJ,KAAKC,MAAMC,KAAKG,aACtBC,UAAWC,EACP,mCACA,qCAAqCb,IACrC,qCAAqCC,IACrC,YACA,mBACA,oBAAoBD,IACpB,0BAA0BC,KAE9Ba,QAASR,KAAKC,MAAMO,SAGhC,cAxB6B,CACzBA,QAAS,OACTd,YAAa,QACbC,WAAY,YAHFc,oBADZlB"}

package/dist/es/components/BacsDD/components/BacsInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../external/classnames/index.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import c from"../../internal/FormFields/Field/Field.js";import r from"../../internal/FormFields/ConsentCheckbox/ConsentCheckbox.js";import{bacsFormatters as i,bacsValidationRules as s}from"./validate.js";import l from"../../../utils/useForm/useForm.js";import d from"../../../core/Context/useImage.js";import u from"../../internal/FormFields/InputText.js";import m from"../../internal/FormFields/InputEmail.js";import b from"../../internal/FormInstruction/FormInstruction.js";import{getErrorMessage as h}from"../../../utils/getErrorMessage.js";import{PREFIX as p}from"../../internal/Icon/constants.js";const k="enter-data",g="confirm-data";function f(f){const{i18n:N}=t(),_=d(),{handleChangeFor:C,triggerValidation:y,data:v,valid:I,errors:x,isValid:E}=l({schema:["holderName","bankAccountNumber","bankLocationId","shopperEmail","amountConsentCheckbox","accountConsentCheckbox"],defaultData:f.data,formatters:i,rules:s}),[F,j]=a(k);this.setStatus=j,this.showValidation=y;return o((()=>{f.onChange({data:v,valid:I,errors:x,isValid:E})}),[v,I,x,E]),e("div",{className:n({"adyen-checkout__bacs":!0,"adyen-checkout__bacs--confirm":F===g||"loading"===F})},e(b,null),F==g&&e("div",{className:n({"adyen-checkout__bacs--edit":!0,"adyen-checkout__bacs--edit-dropin":f.isDropin})},e(u,{name:"bacsEdit",className:"adyen-checkout__bacs--edit-button",value:N.get("edit"),"aria-label":N.get("edit"),readonly:!0,onClick:()=>this.setStatus(k)})),e(c,{className:n({"adyen-checkout__bacs--holder-name":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),label:N.get("bacs.accountHolderName"),errorMessage:!!x.holderName&&N.get("bacs.accountHolderName.invalid"),isValid:I.holderName,name:"accountHolderName",i18n:N},e(u,{name:"bacs.accountHolderName",className:"adyen-checkout__bacs-input--holder-name",placeholder:f.placeholders.holderName,value:v.holderName,"aria-invalid":!I.holderName,"aria-label":N.get("bacs.accountHolderName"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("holderName","blur"),onInput:C("holderName","input")})),e("div",{className:"adyen-checkout__bacs__num-id adyen-checkout__field-wrapper"},e(c,{errorMessage:!!x.bankAccountNumber&&N.get("bacs.accountNumber.invalid"),label:N.get("bacs.accountNumber"),className:n({"adyen-checkout__bacs--bank-account-number":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),classNameModifiers:["col-70"],isValid:I.bankAccountNumber,name:"bankAccountNumber",i18n:N},e(u,{value:v.bankAccountNumber,className:"adyen-checkout__bacs-input--bank-account-number",placeholder:f.placeholders.bankAccountNumber,"aria-invalid":!I.bankAccountNumber,"aria-label":N.get("bacs.accountNumber"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("bankAccountNumber","blur"),onInput:C("bankAccountNumber","input")})),e(c,{errorMessage:!!x.bankLocationId&&N.get("bacs.bankLocationId.invalid"),label:N.get("bacs.bankLocationId"),className:n({"adyen-checkout__bacs--bank-location-id":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),classNameModifiers:["col-30"],isValid:I.bankLocationId,name:"bankLocationId",i18n:N},e(u,{value:v.bankLocationId,className:"adyen-checkout__bacs-input--bank-location-id",placeholder:f.placeholders.bankLocationId,"aria-invalid":!I.bankLocationId,"aria-label":N.get("bacs.bankLocationId"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("bankLocationId","blur"),onInput:C("bankLocationId","input")}))),e(c,{errorMessage:h(N,x.shopperEmail,N.get("shopperEmail")),label:N.get("shopperEmail"),className:n({"adyen-checkout__bacs--shopper-email":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),isValid:I.shopperEmail,name:"emailAddress",i18n:N},e(m,{value:v.shopperEmail,name:"shopperEmail",className:"adyen-checkout__bacs-input--shopper-email",classNameModifiers:["large"],placeholder:f.placeholders.shopperEmail,spellcheck:!1,"aria-invalid":!I.shopperEmail,"aria-label":N.get("shopperEmail"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onInput:C("shopperEmail","input"),onBlur:C("shopperEmail","blur")})),F===k&&e(r,{classNameModifiers:["amountConsentCheckbox"],errorMessage:!!x.amountConsentCheckbox,label:N.get("bacs.consent.amount"),onChange:C("amountConsentCheckbox"),checked:!!v.amountConsentCheckbox,i18n:N}),F===k&&e(r,{classNameModifiers:["accountConsentCheckbox"],errorMessage:!!x.accountConsentCheckbox,label:N.get("bacs.consent.account"),onChange:C("accountConsentCheckbox"),checked:!!v.accountConsentCheckbox,i18n:N}),f.showPayButton&&f.payButton({status:F,label:F===k?N.get("continue"):`${N.get("bacs.confirm")} ${f.amount?.value&&f.amount?.currency?N.amount(f.amount.value,f.amount.currency):""}`,icon:_({imageFolder:"components/"})(`${p}lock`),onClick:()=>E?F===k?this.setStatus(g):F===g?f.onSubmit():void 0:this.showValidation()}))}f.defaultProps={data:{},placeholders:{}};export{f as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../_virtual/index.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import r from"../../internal/FormFields/Field/Field.js";import c from"../../internal/FormFields/ConsentCheckbox/ConsentCheckbox.js";import{bacsFormatters as i,bacsValidationRules as s}from"./validate.js";import l from"../../../utils/useForm/useForm.js";import d from"../../../core/Context/useImage.js";import u from"../../internal/FormFields/InputText.js";import m from"../../internal/FormFields/InputEmail.js";import b from"../../internal/FormInstruction/FormInstruction.js";import{getErrorMessage as h}from"../../../utils/getErrorMessage.js";import{PREFIX as p}from"../../internal/Icon/constants.js";const k="enter-data",g="confirm-data";function f(f){const{i18n:N}=t(),_=d(),{handleChangeFor:C,triggerValidation:y,data:v,valid:I,errors:x,isValid:E}=l({schema:["holderName","bankAccountNumber","bankLocationId","shopperEmail","amountConsentCheckbox","accountConsentCheckbox"],defaultData:f.data,formatters:i,rules:s}),[F,j]=a(k);this.setStatus=j,this.showValidation=y;return o((()=>{f.onChange({data:v,valid:I,errors:x,isValid:E})}),[v,I,x,E]),e("div",{className:n({"adyen-checkout__bacs":!0,"adyen-checkout__bacs--confirm":F===g||"loading"===F})},e(b,null),F==g&&e("div",{className:n({"adyen-checkout__bacs--edit":!0,"adyen-checkout__bacs--edit-dropin":f.isDropin})},e(u,{name:"bacsEdit",className:"adyen-checkout__bacs--edit-button",value:N.get("edit"),"aria-label":N.get("edit"),readonly:!0,onClick:()=>this.setStatus(k)})),e(r,{className:n({"adyen-checkout__bacs--holder-name":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),label:N.get("bacs.accountHolderName"),errorMessage:!!x.holderName&&N.get("bacs.accountHolderName.invalid"),isValid:I.holderName,name:"accountHolderName",i18n:N},e(u,{name:"bacs.accountHolderName",className:"adyen-checkout__bacs-input--holder-name",placeholder:f.placeholders.holderName,value:v.holderName,"aria-invalid":!I.holderName,"aria-label":N.get("bacs.accountHolderName"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("holderName","blur"),onInput:C("holderName","input")})),e("div",{className:"adyen-checkout__bacs__num-id adyen-checkout__field-wrapper"},e(r,{errorMessage:!!x.bankAccountNumber&&N.get("bacs.accountNumber.invalid"),label:N.get("bacs.accountNumber"),className:n({"adyen-checkout__bacs--bank-account-number":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),classNameModifiers:["col-70"],isValid:I.bankAccountNumber,name:"bankAccountNumber",i18n:N},e(u,{value:v.bankAccountNumber,className:"adyen-checkout__bacs-input--bank-account-number",placeholder:f.placeholders.bankAccountNumber,"aria-invalid":!I.bankAccountNumber,"aria-label":N.get("bacs.accountNumber"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("bankAccountNumber","blur"),onInput:C("bankAccountNumber","input")})),e(r,{errorMessage:!!x.bankLocationId&&N.get("bacs.bankLocationId.invalid"),label:N.get("bacs.bankLocationId"),className:n({"adyen-checkout__bacs--bank-location-id":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),classNameModifiers:["col-30"],isValid:I.bankLocationId,name:"bankLocationId",i18n:N},e(u,{value:v.bankLocationId,className:"adyen-checkout__bacs-input--bank-location-id",placeholder:f.placeholders.bankLocationId,"aria-invalid":!I.bankLocationId,"aria-label":N.get("bacs.bankLocationId"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onBlur:C("bankLocationId","blur"),onInput:C("bankLocationId","input")}))),e(r,{errorMessage:h(N,x.shopperEmail,N.get("shopperEmail")),label:N.get("shopperEmail"),className:n({"adyen-checkout__bacs--shopper-email":!0,"adyen-checkout__field--inactive":F===g||"loading"===F}),isValid:I.shopperEmail,name:"emailAddress",i18n:N},e(m,{value:v.shopperEmail,name:"shopperEmail",className:"adyen-checkout__bacs-input--shopper-email",classNameModifiers:["large"],placeholder:f.placeholders.shopperEmail,spellcheck:!1,"aria-invalid":!I.shopperEmail,"aria-label":N.get("shopperEmail"),"aria-required":"true",required:!0,readonly:F===g||"loading"===F,autocorrect:"off",onInput:C("shopperEmail","input"),onBlur:C("shopperEmail","blur")})),F===k&&e(c,{classNameModifiers:["amountConsentCheckbox"],errorMessage:!!x.amountConsentCheckbox,label:N.get("bacs.consent.amount"),onChange:C("amountConsentCheckbox"),checked:!!v.amountConsentCheckbox,i18n:N}),F===k&&e(c,{classNameModifiers:["accountConsentCheckbox"],errorMessage:!!x.accountConsentCheckbox,label:N.get("bacs.consent.account"),onChange:C("accountConsentCheckbox"),checked:!!v.accountConsentCheckbox,i18n:N}),f.showPayButton&&f.payButton({status:F,label:F===k?N.get("continue"):`${N.get("bacs.confirm")} ${f.amount?.value&&f.amount?.currency?N.amount(f.amount.value,f.amount.currency):""}`,icon:_({imageFolder:"components/"})(`${p}lock`),onClick:()=>E?F===k?this.setStatus(g):F===g?f.onSubmit():void 0:this.showValidation()}))}f.defaultProps={data:{},placeholders:{}};export{f as default};
 //# sourceMappingURL=BacsInput.js.map

package/dist/es/components/BacsDD/components/BacsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BacsInput.js","sources":["../../../../../src/components/BacsDD/components/BacsInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../../internal/FormFields/Field';\nimport ConsentCheckbox from '../../internal/FormFields/ConsentCheckbox';\nimport { bacsValidationRules, bacsFormatters } from './validate';\nimport { BacsDataState, BacsInputProps } from './types';\nimport './BacsInput.scss';\n\nimport useForm from '../../../utils/useForm';\nimport useImage from '../../../core/Context/useImage';\nimport InputText from '../../internal/FormFields/InputText';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { PREFIX } from '../../internal/Icon/constants';\n\nconst ENTER_STATE = 'enter-data';\nconst CONFIRM_STATE = 'confirm-data';\n\nfunction BacsInput(props: BacsInputProps) {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<BacsDataState>({\n        schema: ['holderName', 'bankAccountNumber', 'bankLocationId', 'shopperEmail', 'amountConsentCheckbox', 'accountConsentCheckbox'],\n        defaultData: props.data,\n        formatters: bacsFormatters,\n        rules: bacsValidationRules\n    });\n\n    const [status, setStatus] = useState(ENTER_STATE);\n    this.setStatus = setStatus;\n    this.showValidation = triggerValidation;\n\n    const handlePayButton = () => {\n        if (!isValid) return this.showValidation();\n\n        if (status === ENTER_STATE) {\n            return this.setStatus(CONFIRM_STATE);\n        } else if (status === CONFIRM_STATE) {\n            return props.onSubmit();\n        }\n    };\n\n    const handleEdit = () => {\n        return this.setStatus(ENTER_STATE);\n    };\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    return (\n        <div\n            className={classNames({\n                'adyen-checkout__bacs': true,\n                'adyen-checkout__bacs--confirm': status === CONFIRM_STATE || status === 'loading'\n            })}\n        >\n            <FormInstruction />\n\n            {status == CONFIRM_STATE && (\n                <div\n                    className={classNames({\n                        'adyen-checkout__bacs--edit': true,\n                        'adyen-checkout__bacs--edit-dropin': props.isDropin\n                    })}\n                >\n                    <InputText\n                        name={'bacsEdit'}\n                        className={'adyen-checkout__bacs--edit-button'}\n                        value={i18n.get('edit')}\n                        aria-label={i18n.get('edit')}\n                        readonly={true}\n                        onClick={handleEdit}\n                    />\n                </div>\n            )}\n\n            <Field\n                className={classNames({\n                    'adyen-checkout__bacs--holder-name': true,\n                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                })}\n                label={i18n.get('bacs.accountHolderName')}\n                errorMessage={errors.holderName ? i18n.get('bacs.accountHolderName.invalid') : false}\n                isValid={valid.holderName}\n                name={'accountHolderName'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'bacs.accountHolderName'}\n                    className={'adyen-checkout__bacs-input--holder-name'}\n                    placeholder={props.placeholders.holderName}\n                    value={data.holderName}\n                    aria-invalid={!valid.holderName}\n                    aria-label={i18n.get('bacs.accountHolderName')}\n                    aria-required={'true'}\n                    required={true}\n                    readonly={status === CONFIRM_STATE || status === 'loading'}\n                    autocorrect={'off'}\n                    onBlur={handleChangeFor('holderName', 'blur')}\n                    onInput={handleChangeFor('holderName', 'input')}\n                />\n            </Field>\n\n            <div className=\"adyen-checkout__bacs__num-id adyen-checkout__field-wrapper\">\n                <Field\n                    errorMessage={!!errors.bankAccountNumber && i18n.get('bacs.accountNumber.invalid')}\n                    label={i18n.get('bacs.accountNumber')}\n                    className={classNames({\n                        'adyen-checkout__bacs--bank-account-number': true,\n                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                    })}\n                    classNameModifiers={['col-70']}\n                    isValid={valid.bankAccountNumber}\n                    name={'bankAccountNumber'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        value={data.bankAccountNumber}\n                        className={'adyen-checkout__bacs-input--bank-account-number'}\n                        placeholder={props.placeholders.bankAccountNumber}\n                        aria-invalid={!valid.bankAccountNumber}\n                        aria-label={i18n.get('bacs.accountNumber')}\n                        aria-required={'true'}\n                        required={true}\n                        readonly={status === CONFIRM_STATE || status === 'loading'}\n                        autocorrect={'off'}\n                        onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n                        onInput={handleChangeFor('bankAccountNumber', 'input')}\n                    />\n                </Field>\n\n                <Field\n                    errorMessage={!!errors.bankLocationId && i18n.get('bacs.bankLocationId.invalid')}\n                    label={i18n.get('bacs.bankLocationId')}\n                    className={classNames({\n                        'adyen-checkout__bacs--bank-location-id': true,\n                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                    })}\n                    classNameModifiers={['col-30']}\n                    isValid={valid.bankLocationId}\n                    name={'bankLocationId'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        value={data.bankLocationId}\n                        className={'adyen-checkout__bacs-input--bank-location-id'}\n                        placeholder={props.placeholders.bankLocationId}\n                        aria-invalid={!valid.bankLocationId}\n                        aria-label={i18n.get('bacs.bankLocationId')}\n                        aria-required={'true'}\n                        required={true}\n                        readonly={status === CONFIRM_STATE || status === 'loading'}\n                        autocorrect={'off'}\n                        onBlur={handleChangeFor('bankLocationId', 'blur')}\n                        onInput={handleChangeFor('bankLocationId', 'input')}\n                    />\n                </Field>\n            </div>\n\n            <Field\n                errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                label={i18n.get('shopperEmail')}\n                className={classNames({\n                    'adyen-checkout__bacs--shopper-email': true,\n                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                })}\n                isValid={valid.shopperEmail}\n                name={'emailAddress'}\n                i18n={i18n}\n            >\n                <InputEmail\n                    value={data.shopperEmail}\n                    name={'shopperEmail'}\n                    className={'adyen-checkout__bacs-input--shopper-email'}\n                    classNameModifiers={['large']}\n                    placeholder={props.placeholders.shopperEmail}\n                    spellcheck={false}\n                    aria-invalid={!valid.shopperEmail}\n                    aria-label={i18n.get('shopperEmail')}\n                    aria-required={'true'}\n                    required={true}\n                    readonly={status === CONFIRM_STATE || status === 'loading'}\n                    autocorrect={'off'}\n                    onInput={handleChangeFor('shopperEmail', 'input')}\n                    onBlur={handleChangeFor('shopperEmail', 'blur')}\n                />\n            </Field>\n\n            {status === ENTER_STATE && (\n                <ConsentCheckbox\n                    classNameModifiers={['amountConsentCheckbox']}\n                    errorMessage={!!errors.amountConsentCheckbox}\n                    label={i18n.get('bacs.consent.amount')}\n                    onChange={handleChangeFor('amountConsentCheckbox')}\n                    checked={!!data.amountConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {status === ENTER_STATE && (\n                <ConsentCheckbox\n                    classNameModifiers={['accountConsentCheckbox']}\n                    errorMessage={!!errors.accountConsentCheckbox}\n                    label={i18n.get('bacs.consent.account')}\n                    onChange={handleChangeFor('accountConsentCheckbox')}\n                    checked={!!data.accountConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label:\n                        status === ENTER_STATE\n                            ? i18n.get('continue')\n                            : `${i18n.get('bacs.confirm')} ${\n                                  !!props.amount?.value && !!props.amount?.currency ? i18n.amount(props.amount.value, props.amount.currency) : ''\n                              }`,\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`),\n                    onClick: handlePayButton\n                })}\n        </div>\n    );\n}\n\nBacsInput.defaultProps = {\n    data: {},\n    placeholders: {}\n};\n\nexport default BacsInput;\n"],"names":["ENTER_STATE","CONFIRM_STATE","BacsInput","props","i18n","useCoreContext","getImage","useImage","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","defaultData","formatters","bacsFormatters","rules","bacsValidationRules","status","setStatus","useState","this","showValidation","useEffect","onChange","h","div","className","classNames","FormInstruction","isDropin","InputText","name","value","get","aria-label","readonly","onClick","Field","label","errorMessage","holderName","placeholder","placeholders","aria-invalid","aria-required","required","autocorrect","onBlur","onInput","bankAccountNumber","classNameModifiers","bankLocationId","getErrorMessage","shopperEmail","InputEmail","spellcheck","ConsentCheckbox","amountConsentCheckbox","checked","accountConsentCheckbox","showPayButton","payButton","amount","currency","icon","imageFolder","PREFIX","onSubmit","defaultProps"],"mappings":"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"}
+{"version":3,"file":"BacsInput.js","sources":["../../../../../src/components/BacsDD/components/BacsInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../../internal/FormFields/Field';\nimport ConsentCheckbox from '../../internal/FormFields/ConsentCheckbox';\nimport { bacsValidationRules, bacsFormatters } from './validate';\nimport { BacsDataState, BacsInputProps } from './types';\nimport './BacsInput.scss';\n\nimport useForm from '../../../utils/useForm';\nimport useImage from '../../../core/Context/useImage';\nimport InputText from '../../internal/FormFields/InputText';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { PREFIX } from '../../internal/Icon/constants';\n\nconst ENTER_STATE = 'enter-data';\nconst CONFIRM_STATE = 'confirm-data';\n\nfunction BacsInput(props: BacsInputProps) {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<BacsDataState>({\n        schema: ['holderName', 'bankAccountNumber', 'bankLocationId', 'shopperEmail', 'amountConsentCheckbox', 'accountConsentCheckbox'],\n        defaultData: props.data,\n        formatters: bacsFormatters,\n        rules: bacsValidationRules\n    });\n\n    const [status, setStatus] = useState(ENTER_STATE);\n    this.setStatus = setStatus;\n    this.showValidation = triggerValidation;\n\n    const handlePayButton = () => {\n        if (!isValid) return this.showValidation();\n\n        if (status === ENTER_STATE) {\n            return this.setStatus(CONFIRM_STATE);\n        } else if (status === CONFIRM_STATE) {\n            return props.onSubmit();\n        }\n    };\n\n    const handleEdit = () => {\n        return this.setStatus(ENTER_STATE);\n    };\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    return (\n        <div\n            className={classNames({\n                'adyen-checkout__bacs': true,\n                'adyen-checkout__bacs--confirm': status === CONFIRM_STATE || status === 'loading'\n            })}\n        >\n            <FormInstruction />\n\n            {status == CONFIRM_STATE && (\n                <div\n                    className={classNames({\n                        'adyen-checkout__bacs--edit': true,\n                        'adyen-checkout__bacs--edit-dropin': props.isDropin\n                    })}\n                >\n                    <InputText\n                        name={'bacsEdit'}\n                        className={'adyen-checkout__bacs--edit-button'}\n                        value={i18n.get('edit')}\n                        aria-label={i18n.get('edit')}\n                        readonly={true}\n                        onClick={handleEdit}\n                    />\n                </div>\n            )}\n\n            <Field\n                className={classNames({\n                    'adyen-checkout__bacs--holder-name': true,\n                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                })}\n                label={i18n.get('bacs.accountHolderName')}\n                errorMessage={errors.holderName ? i18n.get('bacs.accountHolderName.invalid') : false}\n                isValid={valid.holderName}\n                name={'accountHolderName'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'bacs.accountHolderName'}\n                    className={'adyen-checkout__bacs-input--holder-name'}\n                    placeholder={props.placeholders.holderName}\n                    value={data.holderName}\n                    aria-invalid={!valid.holderName}\n                    aria-label={i18n.get('bacs.accountHolderName')}\n                    aria-required={'true'}\n                    required={true}\n                    readonly={status === CONFIRM_STATE || status === 'loading'}\n                    autocorrect={'off'}\n                    onBlur={handleChangeFor('holderName', 'blur')}\n                    onInput={handleChangeFor('holderName', 'input')}\n                />\n            </Field>\n\n            <div className=\"adyen-checkout__bacs__num-id adyen-checkout__field-wrapper\">\n                <Field\n                    errorMessage={!!errors.bankAccountNumber && i18n.get('bacs.accountNumber.invalid')}\n                    label={i18n.get('bacs.accountNumber')}\n                    className={classNames({\n                        'adyen-checkout__bacs--bank-account-number': true,\n                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                    })}\n                    classNameModifiers={['col-70']}\n                    isValid={valid.bankAccountNumber}\n                    name={'bankAccountNumber'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        value={data.bankAccountNumber}\n                        className={'adyen-checkout__bacs-input--bank-account-number'}\n                        placeholder={props.placeholders.bankAccountNumber}\n                        aria-invalid={!valid.bankAccountNumber}\n                        aria-label={i18n.get('bacs.accountNumber')}\n                        aria-required={'true'}\n                        required={true}\n                        readonly={status === CONFIRM_STATE || status === 'loading'}\n                        autocorrect={'off'}\n                        onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n                        onInput={handleChangeFor('bankAccountNumber', 'input')}\n                    />\n                </Field>\n\n                <Field\n                    errorMessage={!!errors.bankLocationId && i18n.get('bacs.bankLocationId.invalid')}\n                    label={i18n.get('bacs.bankLocationId')}\n                    className={classNames({\n                        'adyen-checkout__bacs--bank-location-id': true,\n                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                    })}\n                    classNameModifiers={['col-30']}\n                    isValid={valid.bankLocationId}\n                    name={'bankLocationId'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        value={data.bankLocationId}\n                        className={'adyen-checkout__bacs-input--bank-location-id'}\n                        placeholder={props.placeholders.bankLocationId}\n                        aria-invalid={!valid.bankLocationId}\n                        aria-label={i18n.get('bacs.bankLocationId')}\n                        aria-required={'true'}\n                        required={true}\n                        readonly={status === CONFIRM_STATE || status === 'loading'}\n                        autocorrect={'off'}\n                        onBlur={handleChangeFor('bankLocationId', 'blur')}\n                        onInput={handleChangeFor('bankLocationId', 'input')}\n                    />\n                </Field>\n            </div>\n\n            <Field\n                errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                label={i18n.get('shopperEmail')}\n                className={classNames({\n                    'adyen-checkout__bacs--shopper-email': true,\n                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'\n                })}\n                isValid={valid.shopperEmail}\n                name={'emailAddress'}\n                i18n={i18n}\n            >\n                <InputEmail\n                    value={data.shopperEmail}\n                    name={'shopperEmail'}\n                    className={'adyen-checkout__bacs-input--shopper-email'}\n                    classNameModifiers={['large']}\n                    placeholder={props.placeholders.shopperEmail}\n                    spellcheck={false}\n                    aria-invalid={!valid.shopperEmail}\n                    aria-label={i18n.get('shopperEmail')}\n                    aria-required={'true'}\n                    required={true}\n                    readonly={status === CONFIRM_STATE || status === 'loading'}\n                    autocorrect={'off'}\n                    onInput={handleChangeFor('shopperEmail', 'input')}\n                    onBlur={handleChangeFor('shopperEmail', 'blur')}\n                />\n            </Field>\n\n            {status === ENTER_STATE && (\n                <ConsentCheckbox\n                    classNameModifiers={['amountConsentCheckbox']}\n                    errorMessage={!!errors.amountConsentCheckbox}\n                    label={i18n.get('bacs.consent.amount')}\n                    onChange={handleChangeFor('amountConsentCheckbox')}\n                    checked={!!data.amountConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {status === ENTER_STATE && (\n                <ConsentCheckbox\n                    classNameModifiers={['accountConsentCheckbox']}\n                    errorMessage={!!errors.accountConsentCheckbox}\n                    label={i18n.get('bacs.consent.account')}\n                    onChange={handleChangeFor('accountConsentCheckbox')}\n                    checked={!!data.accountConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label:\n                        status === ENTER_STATE\n                            ? i18n.get('continue')\n                            : `${i18n.get('bacs.confirm')} ${\n                                  !!props.amount?.value && !!props.amount?.currency ? i18n.amount(props.amount.value, props.amount.currency) : ''\n                              }`,\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`),\n                    onClick: handlePayButton\n                })}\n        </div>\n    );\n}\n\nBacsInput.defaultProps = {\n    data: {},\n    placeholders: {}\n};\n\nexport default BacsInput;\n"],"names":["ENTER_STATE","CONFIRM_STATE","BacsInput","props","i18n","useCoreContext","getImage","useImage","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","defaultData","formatters","bacsFormatters","rules","bacsValidationRules","status","setStatus","useState","this","showValidation","useEffect","onChange","h","div","className","classNames","FormInstruction","isDropin","InputText","name","value","get","aria-label","readonly","onClick","Field","label","errorMessage","holderName","placeholder","placeholders","aria-invalid","aria-required","required","autocorrect","onBlur","onInput","bankAccountNumber","classNameModifiers","bankLocationId","getErrorMessage","shopperEmail","InputEmail","spellcheck","ConsentCheckbox","amountConsentCheckbox","checked","accountConsentCheckbox","showPayButton","payButton","amount","currency","icon","imageFolder","PREFIX","onSubmit","defaultProps"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Boleto.js","sources":["../../../../src/components/Boleto/Boleto.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport BoletoInput from './components/BoletoInput';\nimport { cleanCPFCNPJ } from '../internal/SocialSecurityNumberBrazil/utils';\nimport BoletoVoucherResult from './components/BoletoVoucherResult';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport { TxVariants } from '../tx-variants';\nimport { VoucherConfiguration } from '../internal/Voucher/types';\n\nexport class BoletoElement extends UIElement<VoucherConfiguration> {\n    public static type = TxVariants.boletobancario;\n\n    public static txVariants = [\n        TxVariants.boletobancario,\n        TxVariants.boletobancario_itau,\n        TxVariants.boletobancario_santander,\n        TxVariants.primeiropay_boleto\n    ];\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const { data = {} } = this.state;\n        const { billingAddress, shopperEmail, firstName, lastName, socialSecurityNumber = '' } = data;\n\n        return {\n            paymentMethod: {\n                type: this.type\n            },\n            ...(billingAddress && { billingAddress }),\n            ...(shopperEmail && { shopperEmail }),\n            ...(firstName && lastName && { shopperName: { firstName, lastName } }),\n            ...(socialSecurityNumber && { socialSecurityNumber: cleanCPFCNPJ(socialSecurityNumber) })\n        };\n    }\n\n    private handleRef = ref => {\n        this.componentRef = ref;\n    };\n\n    render() {\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                {this.props.reference ? (\n                    <BoletoVoucherResult ref={this.handleRef} icon={this.icon} {...this.props} onActionHandled={this.onActionHandled} />\n                ) : (\n                    <BoletoInput\n                        setComponentRef={this.handleRef}\n                        {...this.props}\n                        onChange={this.setState}\n                        onSubmit={this.submit}\n                        payButton={this.payButton}\n                    />\n                )}\n            </CoreProvider>\n        );\n    }\n}\n\nexport default BoletoElement;\n"],"names":["BoletoElement","UIElement","isValid","this","state","formatData","data","billingAddress","shopperEmail","firstName","lastName","socialSecurityNumber","paymentMethod","type","shopperName","cleanCPFCNPJ","render","h","CoreProvider","i18n","props","loadingContext","resources","reference","BoletoVoucherResult","ref","handleRef","icon","onActionHandled","BoletoInput","setComponentRef","onChange","setState","onSubmit","submit","payButton","super","args","_define_property","componentRef","TxVariants","boletobancario","txVariants","boletobancario_itau","boletobancario_santander","primeiropay_boleto"],"mappings":"0jBASO,MAAMA,UAAsBC,EAU/B,WAAIC,GACA,QAASC,KAAKC,MAAMF,OACxB,CAKAG,UAAAA,GACI,MAAMC,KAAEA,EAAO,IAAOH,KAAKC,OACrBG,eAAEA,EAAcC,aAAEA,EAAYC,UAAEA,EAASC,SAAEA,EAAQC,qBAAEA,EAAuB,IAAOL,EAEzF,MAAO,CACHM,cAAe,CACXC,KAAMV,KAAKU,SAEXN,GAAkB,CAAEA,qBACpBC,GAAgB,CAAEA,mBAClBC,GAAaC,GAAY,CAAEI,YAAa,CAAEL,YAAWC,gBACrDC,GAAwB,CAAEA,qBAAsBI,EAAaJ,IAEzE,CAMAK,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaC,KAAMhB,KAAKiB,MAAMD,KAAME,eAAgBlB,KAAKiB,MAAMC,eAAgBC,UAAWnB,KAAKmB,WAC3FnB,KAAKiB,MAAMG,UACRN,EAACO,EAAAA,CAAoBC,IAAKtB,KAAKuB,UAAWC,KAAMxB,KAAKwB,QAAUxB,KAAKiB,MAAOQ,gBAAiBzB,KAAKyB,kBAEjGX,EAACY,EAAAA,CACGC,gBAAiB3B,KAAKuB,aAClBvB,KAAKiB,MACTW,SAAU5B,KAAK6B,SACfC,SAAU9B,KAAK+B,OACfC,UAAWhC,KAAKgC,YAKpC,mBApDGC,SAgCHC,GAAAC,EAAAnC,KAAQuB,aAAYD,IAChBtB,KAAKoC,aAAed,CAAAA,KAhCxBa,EADStC,EACKa,OAAO2B,EAAWC,gBAEhCH,EAHStC,EAGK0C,aAAa,CACvBF,EAAWC,eACXD,EAAWG,oBACXH,EAAWI,yBACXJ,EAAWK"}
+{"version":3,"file":"Boleto.js","sources":["../../../../src/components/Boleto/Boleto.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport BoletoInput from './components/BoletoInput';\nimport { cleanCPFCNPJ } from '../internal/SocialSecurityNumberBrazil/utils';\nimport BoletoVoucherResult from './components/BoletoVoucherResult';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport { TxVariants } from '../tx-variants';\n\nimport type { BoletoConfiguration } from './types';\n\nexport class BoletoElement extends UIElement<BoletoConfiguration> {\n    public static type = TxVariants.boletobancario;\n\n    public static txVariants = [\n        TxVariants.boletobancario,\n        TxVariants.boletobancario_itau,\n        TxVariants.boletobancario_santander,\n        TxVariants.primeiropay_boleto\n    ];\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const { data = {} } = this.state;\n        const { billingAddress, shopperEmail, firstName, lastName, socialSecurityNumber = '' } = data;\n\n        return {\n            paymentMethod: {\n                type: this.type\n            },\n            ...(billingAddress && { billingAddress }),\n            ...(shopperEmail && { shopperEmail }),\n            ...(firstName && lastName && { shopperName: { firstName, lastName } }),\n            ...(socialSecurityNumber && { socialSecurityNumber: cleanCPFCNPJ(socialSecurityNumber) })\n        };\n    }\n\n    private handleRef = ref => {\n        this.componentRef = ref;\n    };\n\n    render() {\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                {this.props.reference ? (\n                    <BoletoVoucherResult ref={this.handleRef} icon={this.icon} {...this.props} onActionHandled={this.onActionHandled} />\n                ) : (\n                    <BoletoInput\n                        setComponentRef={this.handleRef}\n                        {...this.props}\n                        onChange={this.setState}\n                        onSubmit={this.submit}\n                        payButton={this.payButton}\n                    />\n                )}\n            </CoreProvider>\n        );\n    }\n}\n\nexport default BoletoElement;\n"],"names":["BoletoElement","UIElement","isValid","this","state","formatData","data","billingAddress","shopperEmail","firstName","lastName","socialSecurityNumber","paymentMethod","type","shopperName","cleanCPFCNPJ","render","h","CoreProvider","i18n","props","loadingContext","resources","reference","BoletoVoucherResult","ref","handleRef","icon","onActionHandled","BoletoInput","setComponentRef","onChange","setState","onSubmit","submit","payButton","super","args","_define_property","componentRef","TxVariants","boletobancario","txVariants","boletobancario_itau","boletobancario_santander","primeiropay_boleto"],"mappings":"0jBAUO,MAAMA,UAAsBC,EAU/B,WAAIC,GACA,QAASC,KAAKC,MAAMF,OACxB,CAKAG,UAAAA,GACI,MAAMC,KAAEA,EAAO,IAAOH,KAAKC,OACrBG,eAAEA,EAAcC,aAAEA,EAAYC,UAAEA,EAASC,SAAEA,EAAQC,qBAAEA,EAAuB,IAAOL,EAEzF,MAAO,CACHM,cAAe,CACXC,KAAMV,KAAKU,SAEXN,GAAkB,CAAEA,qBACpBC,GAAgB,CAAEA,mBAClBC,GAAaC,GAAY,CAAEI,YAAa,CAAEL,YAAWC,gBACrDC,GAAwB,CAAEA,qBAAsBI,EAAaJ,IAEzE,CAMAK,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaC,KAAMhB,KAAKiB,MAAMD,KAAME,eAAgBlB,KAAKiB,MAAMC,eAAgBC,UAAWnB,KAAKmB,WAC3FnB,KAAKiB,MAAMG,UACRN,EAACO,EAAAA,CAAoBC,IAAKtB,KAAKuB,UAAWC,KAAMxB,KAAKwB,QAAUxB,KAAKiB,MAAOQ,gBAAiBzB,KAAKyB,kBAEjGX,EAACY,EAAAA,CACGC,gBAAiB3B,KAAKuB,aAClBvB,KAAKiB,MACTW,SAAU5B,KAAK6B,SACfC,SAAU9B,KAAK+B,OACfC,UAAWhC,KAAKgC,YAKpC,mBApDGC,SAgCHC,GAAAC,EAAAnC,KAAQuB,aAAYD,IAChBtB,KAAKoC,aAAed,CAAAA,KAhCxBa,EADStC,EACKa,OAAO2B,EAAWC,gBAEhCH,EAHStC,EAGK0C,aAAa,CACvBF,EAAWC,eACXD,EAAWG,oBACXH,EAAWI,yBACXJ,EAAWK"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as r}from"../../../../external/preact/dist/preact.js";import{useRef as s,useMemo as t,useState as o,useCallback as n,useEffect as a}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"./defaultProps.js";import{AddressModeOptions as d}from"./types.js";import{ENCRYPTED_CARD_NUMBER as u,DATE_POLICY_REQUIRED as c,CVC_POLICY_REQUIRED as m}from"../../../internal/SecuredFields/lib/constants.js";import{cardInputFormatters as p,cardInputValidationRules as h,getRuleByNameAndMode as b}from"./validate.js";import f from"../../../internal/SecuredFields/binLookup/extensions.js";import y from"../../../../utils/useForm/useForm.js";import{handlePartialAddressMode as N,extractPropsForSFP as S,extractPropsForCardFields as g,getLayout as A}from"./utils.js";import F from"../../../internal/Address/Specifications.js";import{StoredCardFieldsWrapper as C}from"./components/StoredCardFieldsWrapper.js";import{CardFieldsWrapper as j}from"./components/CardFieldsWrapper.js";import{getAutoJumpHandler as k,getFocusHandler as x,getAddressHandler as R}from"./handlers.js";import P from"../../../../external/classnames/index.js";import{getPartialAddressValidationRules as v}from"../../../internal/Address/validate.js";import w from"../../../../core/Context/useImage.js";import{getArrayDifferences as I}from"../../../../utils/arrayUtils.js";import B from"../../../internal/FormInstruction/FormInstruction.js";import{PREFIX as V}from"../../../internal/Icon/constants.js";import E from"./useSRPanelForCardInputErrors.js";const O=l=>{const O=s(null),q=s(!1),M=w(),D=s(null),_=e=>{D.current=e},L=s({});Object.keys(L.current).length||l.setComponentRef(L.current);const T=s(0),K=s(!1),H=t((()=>new F(l.specifications)),[l.specifications]);L.current.sfp=O;const[U,z]=o("ready"),[W,$]=o({}),[G,J]=o({...l.holderNameRequired&&{holderName:!1}}),[Q,X]=o({...l.hasHolderName&&{holderName:l.data.holderName??""}}),[Y,Z]=o(""),[ee,re]=o(!1),[se,te]=o(c),[oe,ne]=o(m),[ae,ie]=o(null),[le,de]=o([]),[ue,ce]=o(l.storedPaymentMethodId?l.brand:""),me=l.billingAddressMode!==d.none&&l.billingAddressRequired,pe=N(l.billingAddressMode),he=s(pe&&l.data?.billingAddress?.country),[be,fe]=o(!1),[ye,Ne]=o(me?l.data.billingAddress:null),[Se,ge]=o(!1),[Ae,Fe]=o(""),[Ce,je]=o({value:null}),[ke,xe]=o(null),[Re,Pe]=o("card"),{handleChangeFor:ve,triggerValidation:we,data:Ie,valid:Be,errors:Ve,setSchema:Ee,setData:Oe,setValid:qe,setErrors:Me}=y({schema:[],defaultData:l.data,formatters:p,rules:h}),De=!!Object.keys(l.installmentOptions).length&&"debit"!==l.fundingSource,_e=l.showInstallmentAmounts??!0,Le="kr"===(ae??l.countryCode),Te=l.configuration.koreanAuthenticationRequired&&Le,Ke=Se&&"auto"===l.configuration.socialSecurityNumberMode||"show"===l.configuration.socialSecurityNumberMode,He=(e,r)=>{l.onFocus({fieldType:e,event:r})},Ue=(e,r)=>{l.onBlur({fieldType:e,event:r})},ze=n((e=>{Pe(e.brand),l.onBrand(e)}),[]),We=x(Z,He,Ue),$e=()=>A({props:l,showKCP:Te,showBrazilianSSN:Ke,...l.billingAddressRequired&&{countrySpecificSchemas:H.getAddressSchemaForCountry(ye?.country),billingAddressRequiredFields:l.billingAddressRequiredFields}}),Ge=n((e=>{const r="webInternalElement"!==e.fieldType?e.fieldType:e.name;xe(r)}),[]),Je=R(Oe,qe,Me),Qe=k(K,O,$e()),Xe=t((()=>f(l,{sfp:O},{dualBrandSelectElements:le,setDualBrandSelectElements:de,setSelectedBrandValue:ce,issuingCountryCode:ae,setIssuingCountryCode:ie},T)),[le,ae]);L.current.showValidation=()=>{q.current=!0,er?.(),O.current.showValidation(),we(["holderName","socialSecurityNumber","taxNumber"]),D?.current&&D.current.showValidation()},L.current.processBinLookupResponse=(e,r)=>{Xe.processBinLookup(e,r)},L.current.setStatus=z,a((()=>(L.current.setFocusOn=O.current.setFocusOn,L.current.updateStyles=O.current.updateStyles,L.current.handleUnsupportedCard=O.current.handleUnsupportedCard,()=>{O.current.destroy()})),[]),a((()=>{const e=[...l.hasHolderName?["holderName"]:[],...Ke?["socialSecurityNumber"]:[],...Te?["taxNumber"]:[],...me?["billingAddress"]:[]];Ee(e)}),[l.hasHolderName,Ke,Te]),a((()=>{X({...Q,holderName:Ie.holderName??"",taxNumber:Ie.taxNumber}),Fe(Ie.socialSecurityNumber),me&&Ne({...Ie.billingAddress}),J({...G,holderName:!l.holderNameRequired||Be.holderName,socialSecurityNumber:!!Be.socialSecurityNumber&&Be.socialSecurityNumber,taxNumber:!!Be.taxNumber&&Be.taxNumber,billingAddress:!!Be.billingAddress&&Be.billingAddress});const e=!!Ve.billingAddress&&Object.entries(Ve.billingAddress).reduce(((e,[,r])=>e||null!=r),!1);$({...W,holderName:l.holderNameRequired&&Ve.holderName?Ve.holderName:null,socialSecurityNumber:Ke&&Ve.socialSecurityNumber?Ve.socialSecurityNumber:null,taxNumber:Te&&Ve.taxNumber?Ve.taxNumber:null,billingAddress:me&&e?Ve.billingAddress:null})}),[Ie,Be,Ve]);const{sortedErrorList:Ye,previousSortedErrors:Ze,clearSRPanel:er}=E({errors:W,props:l,isValidating:q,retrieveLayout:$e,specifications:H,billingAddress:ye,sfp:O});if(Ye){const e=I(Ye,Ze,"field");e?.forEach((e=>{const r={fieldType:e.field,errorCode:e.errorCode};l.onValidationErrorAnalytics(r)}))}a((()=>{const e=G.holderName,r=ee,s=!me||G.billingAddress,t=!Te||!!G.taxNumber&&!!G.encryptedPassword,o=!Ke||!!G.socialSecurityNumber,n=r&&e&&s&&t&&o,a=O.current.mapErrorsToValidationRuleResult(),i={...W,...a};l.onChange({data:Q,valid:G,errors:i,isValid:n,billingAddress:ye,selectedBrandValue:ue,storePaymentMethod:be,socialSecurityNumber:Ae,installments:Ce})}),[Q,G,W,ue,be,Ce]);const rr=l.storedPaymentMethodId?C:j;return e(r,null,e(i,{ref:O,...S(l),styles:{...l.styles},koreanAuthenticationRequired:l.configuration.koreanAuthenticationRequired,hasKoreanFields:!(!l.configuration.koreanAuthenticationRequired||"kr"!==l.countryCode),onChange:(e,r)=>{if(e.autoCompleteName){if(!l.hasHolderName)return;const r=b("holderName","blur")(e.autoCompleteName)?e.autoCompleteName:null;r&&(Oe("holderName",r),qe("holderName",!0),Me("holderName",null))}else l.autoFocus&&T.current>0&&"handleOnFieldValid"===r?.event&&r?.fieldType===u&&e.valid.encryptedCardNumber&&Qe(),X({...Q,...e.data}),$({...W,...e.errors}),J({...G,...e.valid}),re(e.isSfpValid),ne(e.cvcPolicy),ge(e.showSocialSecurityNumber),te(e.expiryDatePolicy)},onBrand:ze,onFocus:We,type:l.brand,disableIOSArrowKeys:l.disableIOSArrowKeys?Ge:null,render:({setRootNode:r,setFocusOn:s},t)=>e("div",{ref:r,className:P({"adyen-checkout__card-input":!0,"adyen-checkout-card-input__wrapper":!0,[`adyen-checkout__card-input--${l.fundingSource??"credit"}`]:!0,"adyen-checkout__card-input--loading":"loading"===U}),role:"form"},e(B,null),e(rr,{...g(l),data:Q,valid:G,errors:W,handleChangeFor:ve,focusedElement:Y,setFocusOn:s,sfpState:t,cvcPolicy:oe,hasInstallments:De,showAmountsInInstallments:_e,handleInstallments:je,brandsIcons:l.brandsIcons,formData:Ie,formErrors:Ve,formValid:Be,expiryDatePolicy:se,dualBrandSelectElements:le,extensions:Xe,selectedBrandValue:ue,showKCP:Te,showBrazilianSSN:Ke,socialSecurityNumber:Ae,handleOnStoreDetails:fe,setAddressRef:_,billingAddress:ye,billingAddressValidationRules:pe&&v(he.current),partialAddressSchema:pe,handleAddress:Je,onAddressLookup:l.onAddressLookup,onAddressSelected:l.onAddressSelected,addressSearchDebounceMs:l.addressSearchDebounceMs,iOSFocusedField:ke,onFieldFocusAnalytics:He,onFieldBlurAnalytics:Ue}))}),l.showPayButton&&l.payButton({status:U,variant:l.isPayButtonPrimaryVariant?"primary":"secondary",icon:M({imageFolder:"components/"})(`${V}lock`)}))};O.defaultProps=l;export{O as default};
+import{createElement as e,Fragment as r}from"../../../../external/preact/dist/preact.js";import{useRef as s,useMemo as t,useState as o,useCallback as n,useEffect as a}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"./defaultProps.js";import{AddressModeOptions as d}from"./types.js";import{ENCRYPTED_CARD_NUMBER as u,DATE_POLICY_REQUIRED as c,CVC_POLICY_REQUIRED as m}from"../../../internal/SecuredFields/lib/constants.js";import{cardInputFormatters as p,cardInputValidationRules as h,getRuleByNameAndMode as b}from"./validate.js";import f from"../../../internal/SecuredFields/binLookup/extensions.js";import y from"../../../../utils/useForm/useForm.js";import{handlePartialAddressMode as N,extractPropsForSFP as S,extractPropsForCardFields as g,getLayout as A}from"./utils.js";import F from"../../../internal/Address/Specifications.js";import{StoredCardFieldsWrapper as C}from"./components/StoredCardFieldsWrapper.js";import{CardFieldsWrapper as j}from"./components/CardFieldsWrapper.js";import{getAutoJumpHandler as k,getFocusHandler as R,getAddressHandler as x}from"./handlers.js";import v from"../../../../_virtual/index.js";import{getPartialAddressValidationRules as P}from"../../../internal/Address/validate.js";import w from"../../../../core/Context/useImage.js";import{getArrayDifferences as I}from"../../../../utils/arrayUtils.js";import B from"../../../internal/FormInstruction/FormInstruction.js";import{PREFIX as V}from"../../../internal/Icon/constants.js";import E from"./useSRPanelForCardInputErrors.js";const O=l=>{const O=s(null),q=s(!1),M=w(),D=s(null),_=e=>{D.current=e},L=s({});Object.keys(L.current).length||l.setComponentRef(L.current);const T=s(0),K=s(!1),H=t((()=>new F(l.specifications)),[l.specifications]);L.current.sfp=O;const[U,z]=o("ready"),[W,$]=o({}),[G,J]=o({...l.holderNameRequired&&{holderName:!1}}),[Q,X]=o({...l.hasHolderName&&{holderName:l.data.holderName??""}}),[Y,Z]=o(""),[ee,re]=o(!1),[se,te]=o(c),[oe,ne]=o(m),[ae,ie]=o(null),[le,de]=o([]),[ue,ce]=o(l.storedPaymentMethodId?l.brand:""),me=l.billingAddressMode!==d.none&&l.billingAddressRequired,pe=N(l.billingAddressMode),he=s(pe&&l.data?.billingAddress?.country),[be,fe]=o(!1),[ye,Ne]=o(me?l.data.billingAddress:null),[Se,ge]=o(!1),[Ae,Fe]=o(""),[Ce,je]=o({value:null}),[ke,Re]=o(null),[xe,ve]=o("card"),{handleChangeFor:Pe,triggerValidation:we,data:Ie,valid:Be,errors:Ve,setSchema:Ee,setData:Oe,setValid:qe,setErrors:Me}=y({schema:[],defaultData:l.data,formatters:p,rules:h}),De=!!Object.keys(l.installmentOptions).length&&"debit"!==l.fundingSource,_e=l.showInstallmentAmounts??!0,Le="kr"===(ae??l.countryCode),Te=l.configuration.koreanAuthenticationRequired&&Le,Ke=Se&&"auto"===l.configuration.socialSecurityNumberMode||"show"===l.configuration.socialSecurityNumberMode,He=(e,r)=>{l.onFocus({fieldType:e,event:r})},Ue=(e,r)=>{l.onBlur({fieldType:e,event:r})},ze=n((e=>{ve(e.brand),l.onBrand(e)}),[]),We=R(Z,He,Ue),$e=()=>A({props:l,showKCP:Te,showBrazilianSSN:Ke,...l.billingAddressRequired&&{countrySpecificSchemas:H.getAddressSchemaForCountry(ye?.country),billingAddressRequiredFields:l.billingAddressRequiredFields}}),Ge=n((e=>{const r="webInternalElement"!==e.fieldType?e.fieldType:e.name;Re(r)}),[]),Je=x(Oe,qe,Me),Qe=k(K,O,$e()),Xe=t((()=>f(l,{sfp:O},{dualBrandSelectElements:le,setDualBrandSelectElements:de,setSelectedBrandValue:ce,issuingCountryCode:ae,setIssuingCountryCode:ie},T)),[le,ae]);L.current.showValidation=()=>{q.current=!0,er?.(),O.current.showValidation(),we(["holderName","socialSecurityNumber","taxNumber"]),D?.current&&D.current.showValidation()},L.current.processBinLookupResponse=(e,r)=>{Xe.processBinLookup(e,r)},L.current.setStatus=z,a((()=>(L.current.setFocusOn=O.current.setFocusOn,L.current.updateStyles=O.current.updateStyles,L.current.handleUnsupportedCard=O.current.handleUnsupportedCard,()=>{O.current.destroy()})),[]),a((()=>{const e=[...l.hasHolderName?["holderName"]:[],...Ke?["socialSecurityNumber"]:[],...Te?["taxNumber"]:[],...me?["billingAddress"]:[]];Ee(e)}),[l.hasHolderName,Ke,Te]),a((()=>{X({...Q,holderName:Ie.holderName??"",taxNumber:Ie.taxNumber}),Fe(Ie.socialSecurityNumber),me&&Ne({...Ie.billingAddress}),J({...G,holderName:!l.holderNameRequired||Be.holderName,socialSecurityNumber:!!Be.socialSecurityNumber&&Be.socialSecurityNumber,taxNumber:!!Be.taxNumber&&Be.taxNumber,billingAddress:!!Be.billingAddress&&Be.billingAddress});const e=!!Ve.billingAddress&&Object.entries(Ve.billingAddress).reduce(((e,[,r])=>e||null!=r),!1);$({...W,holderName:l.holderNameRequired&&Ve.holderName?Ve.holderName:null,socialSecurityNumber:Ke&&Ve.socialSecurityNumber?Ve.socialSecurityNumber:null,taxNumber:Te&&Ve.taxNumber?Ve.taxNumber:null,billingAddress:me&&e?Ve.billingAddress:null})}),[Ie,Be,Ve]);const{sortedErrorList:Ye,previousSortedErrors:Ze,clearSRPanel:er}=E({errors:W,props:l,isValidating:q,retrieveLayout:$e,specifications:H,billingAddress:ye,sfp:O});if(Ye){const e=I(Ye,Ze,"field");e?.forEach((e=>{const r={fieldType:e.field,errorCode:e.errorCode};l.onValidationErrorAnalytics(r)}))}a((()=>{const e=G.holderName,r=ee,s=!me||G.billingAddress,t=!Te||!!G.taxNumber&&!!G.encryptedPassword,o=!Ke||!!G.socialSecurityNumber,n=r&&e&&s&&t&&o,a=O.current.mapErrorsToValidationRuleResult(),i={...W,...a};l.onChange({data:Q,valid:G,errors:i,isValid:n,billingAddress:ye,selectedBrandValue:ue,storePaymentMethod:be,socialSecurityNumber:Ae,installments:Ce})}),[Q,G,W,ue,be,Ce]);const rr=l.storedPaymentMethodId?C:j;return e(r,null,e(i,{ref:O,...S(l),styles:{...l.styles},koreanAuthenticationRequired:l.configuration.koreanAuthenticationRequired,hasKoreanFields:!(!l.configuration.koreanAuthenticationRequired||"kr"!==l.countryCode),onChange:(e,r)=>{if(e.autoCompleteName){if(!l.hasHolderName)return;const r=b("holderName","blur")(e.autoCompleteName)?e.autoCompleteName:null;r&&(Oe("holderName",r),qe("holderName",!0),Me("holderName",null))}else l.autoFocus&&T.current>0&&"handleOnFieldValid"===r?.event&&r?.fieldType===u&&e.valid.encryptedCardNumber&&Qe(),X({...Q,...e.data}),$({...W,...e.errors}),J({...G,...e.valid}),re(e.isSfpValid),ne(e.cvcPolicy),ge(e.showSocialSecurityNumber),te(e.expiryDatePolicy)},onBrand:ze,onFocus:We,type:l.brand,disableIOSArrowKeys:l.disableIOSArrowKeys?Ge:null,render:({setRootNode:r,setFocusOn:s},t)=>e("div",{ref:r,className:v({"adyen-checkout__card-input":!0,"adyen-checkout-card-input__wrapper":!0,[`adyen-checkout__card-input--${l.fundingSource??"credit"}`]:!0,"adyen-checkout__card-input--loading":"loading"===U}),role:"form"},e(B,null),e(rr,{...g(l),data:Q,valid:G,errors:W,handleChangeFor:Pe,focusedElement:Y,setFocusOn:s,sfpState:t,cvcPolicy:oe,hasInstallments:De,showAmountsInInstallments:_e,handleInstallments:je,brandsIcons:l.brandsIcons,formData:Ie,formErrors:Ve,formValid:Be,expiryDatePolicy:se,dualBrandSelectElements:le,extensions:Xe,selectedBrandValue:ue,showKCP:Te,showBrazilianSSN:Ke,socialSecurityNumber:Ae,handleOnStoreDetails:fe,setAddressRef:_,billingAddress:ye,billingAddressValidationRules:pe&&P(he.current),partialAddressSchema:pe,handleAddress:Je,onAddressLookup:l.onAddressLookup,onAddressSelected:l.onAddressSelected,addressSearchDebounceMs:l.addressSearchDebounceMs,iOSFocusedField:ke,onFieldFocusAnalytics:He,onFieldBlurAnalytics:Ue}))}),l.showPayButton&&l.payButton({status:U,variant:l.isPayButtonPrimaryVariant?"primary":"secondary",icon:M({imageFolder:"components/"})(`${V}lock`)}))};O.defaultProps=l;export{O as default};
 //# sourceMappingURL=CardInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout } from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\n\nconst CardInput = (props: CardInputProps) => {\n    const sfp = useRef(null);\n    const isValidating = useRef(false);\n    const getImage = useImage();\n\n    const billingAddressRef = useRef(null);\n    const setAddressRef = ref => {\n        billingAddressRef.current = ref;\n    };\n\n    const cardInputRef = useRef<CardInputRef>({});\n    // Just call once to create the object by which we expose the members expected by the parent Card comp\n    if (!Object.keys(cardInputRef.current).length) {\n        props.setComponentRef(cardInputRef.current);\n    }\n\n    const hasPanLengthRef = useRef(0);\n    const isAutoJumping = useRef(false);\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    // Store ref to sfp (useful for 'deep' debugging)\n    cardInputRef.current.sfp = sfp;\n\n    /**\n     * STATE HOOKS\n     */\n    const [status, setStatus] = useState('ready');\n\n    const [errors, setErrors] = useState<CardInputErrorState>({});\n    const [valid, setValid] = useState<CardInputValidState>({\n        ...(props.holderNameRequired && { holderName: false })\n    });\n    const [data, setData] = useState<CardInputDataState>({\n        ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n    });\n\n    const [focusedElement, setFocusedElement] = useState('');\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n    const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n    const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n    const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n    const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n    const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n    // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n    const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n    // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n    // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n    // or else the name of an internal, Adyen-web, element (like 'holderName')\n    const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n    /**\n     * This stores the brand as detected by the internal regEx.\n     * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n     * if the PAN length drops below the /binLookup digit threshold.\n     * Default value, 'card', indicates no brand detected\n     */\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n    /**\n     * LOCAL VARS\n     */\n    const {\n        handleChangeFor,\n        triggerValidation,\n        data: formData,\n        valid: formValid,\n        errors: formErrors,\n        setSchema,\n        setData: setFormData,\n        setValid: setFormValid,\n        setErrors: setFormErrors\n    } = useForm<CardInputDataState>({\n        schema: [],\n        defaultData: props.data,\n        formatters: cardInputFormatters,\n        rules: cardInputValidationRules\n    });\n\n    const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n    const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n    const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n    const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n    const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n    const showBrazilianSSN: boolean =\n        (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') ||\n        props.configuration.socialSecurityNumberMode === 'show';\n\n    /**\n     * HANDLERS\n     */\n    // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n    const onFieldFocusAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    const onBrand = useCallback((obj: CardBrandData) => {\n        setInternallyDetectedBrand(obj.brand);\n        props.onBrand(obj);\n    }, []);\n\n    // Make SecuredFields aware of the focus & blur handlers\n    const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n    const retrieveLayout = (): string[] => {\n        return getLayout({\n            props,\n            showKCP,\n            showBrazilianSSN,\n            ...(props.billingAddressRequired && {\n                countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n                billingAddressRequiredFields: props.billingAddressRequiredFields\n            })\n        });\n    };\n\n    /**\n     * re. Disabling arrow keys in iOS:\n     * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n     *\n     * NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n     *\n     * @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n     * - in which case we should disable all non-SF fields\n     * or,\n     * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n     */\n    const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n        const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n        setIOSFocusedField(elementType);\n    }, []);\n\n    const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n    const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n    const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n        /**\n         * Handling auto complete value for holderName (but only if the component is using a holderName field)\n         */\n        if (sfState.autoCompleteName) {\n            if (!props.hasHolderName) return;\n            const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n            const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n            if (acHolderName) {\n                setFormData('holderName', acHolderName);\n                setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n                setFormErrors('holderName', null);\n            }\n            return;\n        }\n\n        /**\n         * Decide if we can shift focus to the expiryDate field.\n         *\n         * We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n         * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n         */\n        if (\n            props.autoFocus &&\n            hasPanLengthRef.current > 0 &&\n            eventDetails?.event === 'handleOnFieldValid' &&\n            eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n            sfState.valid.encryptedCardNumber\n        ) {\n            doPanAutoJump();\n        }\n\n        /**\n         * Process SFP state\n         */\n        setData({ ...data, ...sfState.data });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({ ...valid, ...sfState.valid });\n\n        setIsSfpValid(sfState.isSfpValid);\n\n        // Values relating to /binLookup response\n        setCvcPolicy(sfState.cvcPolicy);\n        setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n        setExpiryDatePolicy(sfState.expiryDatePolicy);\n    };\n\n    // Farm the handlers for binLookup related functionality out to another 'extensions' file\n    const extensions = useMemo(\n        () =>\n            CIExtensions(\n                props,\n                { sfp },\n                {\n                    dualBrandSelectElements,\n                    setDualBrandSelectElements,\n                    setSelectedBrandValue,\n                    issuingCountryCode,\n                    setIssuingCountryCode\n                },\n                hasPanLengthRef\n            ),\n        [dualBrandSelectElements, issuingCountryCode]\n    );\n\n    /**\n     * EXPOSE METHODS expected by Card.tsx\n     */\n    cardInputRef.current.showValidation = () => {\n        // set flag\n        isValidating.current = true;\n\n        /**\n         * Clear errors prior to validating so that the screenreader will read them *all* again, and in the right order\n         * - only using aria-atomic on the error panel will read them in the wrong order\n         */\n        clearSRPanel?.(); // TODO - recheck if this is still true\n\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName & SSN & KCP (taxNumber) but *not* billingAddress\n        triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n        // Validate Address\n        if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n    };\n\n    cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n        extensions.processBinLookup(binLookupResponse, isReset);\n    };\n\n    cardInputRef.current.setStatus = setStatus;\n\n    /**\n     * EFFECT HOOKS\n     */\n    useEffect(() => {\n        // componentDidMount - expose more methods expected by Card.tsx\n        cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n        cardInputRef.current.updateStyles = sfp.current.updateStyles;\n        cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n        // componentWillUnmount\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    /**\n     * Handle form schema updates\n     */\n    useEffect(() => {\n        const newSchema = [\n            ...(props.hasHolderName ? ['holderName'] : []),\n            ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n            ...(showKCP ? ['taxNumber'] : []),\n            ...(showBillingAddress ? ['billingAddress'] : [])\n        ];\n        setSchema(newSchema);\n    }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n    /**\n     * Handle updates from useForm\n     */\n    useEffect(() => {\n        setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n        setSocialSecurityNumber(formData.socialSecurityNumber);\n\n        if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n        setValid({\n            ...valid,\n            holderName: props.holderNameRequired ? formValid.holderName : true,\n            // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n            // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n            socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n            taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n            billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n        });\n\n        // Check if billingAddress errors object has any properties that aren't null or undefined\n        const addressHasErrors = formErrors.billingAddress\n            ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc || error != null, false)\n            : false;\n\n        // Errors\n        setErrors({\n            ...errors,\n            holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n            socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n            taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n            billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n        });\n    }, [formData, formValid, formErrors]);\n\n    // Use the custom hook to set (or clear) errors in the SRPanel\n    const {\n        sortedErrorList: currentErrorsSortedByLayout,\n        previousSortedErrors,\n        clearSRPanel\n    } = useSRPanelForCardInputErrors({\n        errors,\n        props,\n        isValidating,\n        retrieveLayout,\n        specifications,\n        billingAddress,\n        sfp\n    });\n\n    // Analytics: ValidationErrors\n    if (currentErrorsSortedByLayout) {\n        const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n        newErrors?.forEach(errorItem => {\n            const aObj: FieldErrorAnalyticsObject = {\n                fieldType: errorItem.field,\n                errorCode: errorItem.errorCode\n            };\n\n            props.onValidationErrorAnalytics(aObj);\n        });\n    }\n\n    /**\n     * Main 'componentDidUpdate' handler\n     */\n    useEffect(() => {\n        const holderNameValid: boolean = valid.holderName;\n\n        const sfpValid: boolean = isSfpValid;\n        const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n        const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n        const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n        const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n        const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n        const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n        props.onChange({\n            data,\n            valid,\n            errors: mergedErrors,\n            isValid,\n            billingAddress,\n            selectedBrandValue,\n            storePaymentMethod,\n            socialSecurityNumber,\n            installments\n        });\n    }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n    /**\n     * RENDER\n     */\n    const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n    return (\n        <Fragment>\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...props.styles }}\n                koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n                hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n                onChange={handleSecuredFieldsChange}\n                onBrand={onBrand}\n                onFocus={handleFocus}\n                type={props.brand}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div\n                        ref={setRootNode}\n                        className={classNames({\n                            'adyen-checkout__card-input': true,\n                            'adyen-checkout-card-input__wrapper': true,\n                            [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n                            'adyen-checkout__card-input--loading': status === 'loading'\n                        })}\n                        role={'form'}\n                    >\n                        <FormInstruction />\n\n                        <FieldToRender\n                            // Extract exact props that we need to pass down\n                            {...extractPropsForCardFields(props)}\n                            // Pass on vars created in CardInput:\n                            // Base (shared w. StoredCard)\n                            data={data}\n                            valid={valid}\n                            errors={errors}\n                            handleChangeFor={handleChangeFor}\n                            focusedElement={focusedElement}\n                            setFocusOn={setFocusOn}\n                            sfpState={sfpState}\n                            cvcPolicy={cvcPolicy}\n                            hasInstallments={hasInstallments}\n                            showAmountsInInstallments={showAmountsInInstallments}\n                            handleInstallments={setInstallments}\n                            // For Card\n                            brandsIcons={props.brandsIcons}\n                            formData={formData}\n                            formErrors={formErrors}\n                            formValid={formValid}\n                            expiryDatePolicy={expiryDatePolicy}\n                            dualBrandSelectElements={dualBrandSelectElements}\n                            extensions={extensions}\n                            selectedBrandValue={selectedBrandValue}\n                            // For KCP\n                            showKCP={showKCP}\n                            // For SSN\n                            showBrazilianSSN={showBrazilianSSN}\n                            socialSecurityNumber={socialSecurityNumber}\n                            // For Store details\n                            handleOnStoreDetails={setStorePaymentMethod}\n                            // For Address\n                            setAddressRef={setAddressRef}\n                            billingAddress={billingAddress}\n                            billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n                            partialAddressSchema={partialAddressSchema}\n                            handleAddress={handleAddress}\n                            onAddressLookup={props.onAddressLookup}\n                            onAddressSelected={props.onAddressSelected}\n                            addressSearchDebounceMs={props.addressSearchDebounceMs}\n                            //\n                            iOSFocusedField={iOSFocusedField}\n                            //\n                            onFieldFocusAnalytics={onFieldFocusAnalytics}\n                            onFieldBlurAnalytics={onFieldBlurAnalytics}\n                        />\n                    </div>\n                )}\n            />\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n                })}\n        </Fragment>\n    );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","internallyDetectedBrand","setInternallyDetectedBrand","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","newErrors","getArrayDifferences","forEach","errorItem","aObj","field","errorCode","onValidationErrorAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}
+{"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout } from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\n\nconst CardInput = (props: CardInputProps) => {\n    const sfp = useRef(null);\n    const isValidating = useRef(false);\n    const getImage = useImage();\n\n    const billingAddressRef = useRef(null);\n    const setAddressRef = ref => {\n        billingAddressRef.current = ref;\n    };\n\n    const cardInputRef = useRef<CardInputRef>({});\n    // Just call once to create the object by which we expose the members expected by the parent Card comp\n    if (!Object.keys(cardInputRef.current).length) {\n        props.setComponentRef(cardInputRef.current);\n    }\n\n    const hasPanLengthRef = useRef(0);\n    const isAutoJumping = useRef(false);\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    // Store ref to sfp (useful for 'deep' debugging)\n    cardInputRef.current.sfp = sfp;\n\n    /**\n     * STATE HOOKS\n     */\n    const [status, setStatus] = useState('ready');\n\n    const [errors, setErrors] = useState<CardInputErrorState>({});\n    const [valid, setValid] = useState<CardInputValidState>({\n        ...(props.holderNameRequired && { holderName: false })\n    });\n    const [data, setData] = useState<CardInputDataState>({\n        ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n    });\n\n    const [focusedElement, setFocusedElement] = useState('');\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n    const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n    const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n    const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n    const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n    const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n    // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n    const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n    // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n    // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n    // or else the name of an internal, Adyen-web, element (like 'holderName')\n    const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n    /**\n     * This stores the brand as detected by the internal regEx.\n     * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n     * if the PAN length drops below the /binLookup digit threshold.\n     * Default value, 'card', indicates no brand detected\n     */\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n    /**\n     * LOCAL VARS\n     */\n    const {\n        handleChangeFor,\n        triggerValidation,\n        data: formData,\n        valid: formValid,\n        errors: formErrors,\n        setSchema,\n        setData: setFormData,\n        setValid: setFormValid,\n        setErrors: setFormErrors\n    } = useForm<CardInputDataState>({\n        schema: [],\n        defaultData: props.data,\n        formatters: cardInputFormatters,\n        rules: cardInputValidationRules\n    });\n\n    const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n    const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n    const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n    const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n    const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n    const showBrazilianSSN: boolean =\n        (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') ||\n        props.configuration.socialSecurityNumberMode === 'show';\n\n    /**\n     * HANDLERS\n     */\n    // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n    const onFieldFocusAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    const onBrand = useCallback((obj: CardBrandData) => {\n        setInternallyDetectedBrand(obj.brand);\n        props.onBrand(obj);\n    }, []);\n\n    // Make SecuredFields aware of the focus & blur handlers\n    const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n    const retrieveLayout = (): string[] => {\n        return getLayout({\n            props,\n            showKCP,\n            showBrazilianSSN,\n            ...(props.billingAddressRequired && {\n                countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n                billingAddressRequiredFields: props.billingAddressRequiredFields\n            })\n        });\n    };\n\n    /**\n     * re. Disabling arrow keys in iOS:\n     * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n     *\n     * NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n     *\n     * @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n     * - in which case we should disable all non-SF fields\n     * or,\n     * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n     */\n    const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n        const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n        setIOSFocusedField(elementType);\n    }, []);\n\n    const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n    const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n    const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n        /**\n         * Handling auto complete value for holderName (but only if the component is using a holderName field)\n         */\n        if (sfState.autoCompleteName) {\n            if (!props.hasHolderName) return;\n            const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n            const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n            if (acHolderName) {\n                setFormData('holderName', acHolderName);\n                setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n                setFormErrors('holderName', null);\n            }\n            return;\n        }\n\n        /**\n         * Decide if we can shift focus to the expiryDate field.\n         *\n         * We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n         * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n         */\n        if (\n            props.autoFocus &&\n            hasPanLengthRef.current > 0 &&\n            eventDetails?.event === 'handleOnFieldValid' &&\n            eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n            sfState.valid.encryptedCardNumber\n        ) {\n            doPanAutoJump();\n        }\n\n        /**\n         * Process SFP state\n         */\n        setData({ ...data, ...sfState.data });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({ ...valid, ...sfState.valid });\n\n        setIsSfpValid(sfState.isSfpValid);\n\n        // Values relating to /binLookup response\n        setCvcPolicy(sfState.cvcPolicy);\n        setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n        setExpiryDatePolicy(sfState.expiryDatePolicy);\n    };\n\n    // Farm the handlers for binLookup related functionality out to another 'extensions' file\n    const extensions = useMemo(\n        () =>\n            CIExtensions(\n                props,\n                { sfp },\n                {\n                    dualBrandSelectElements,\n                    setDualBrandSelectElements,\n                    setSelectedBrandValue,\n                    issuingCountryCode,\n                    setIssuingCountryCode\n                },\n                hasPanLengthRef\n            ),\n        [dualBrandSelectElements, issuingCountryCode]\n    );\n\n    /**\n     * EXPOSE METHODS expected by Card.tsx\n     */\n    cardInputRef.current.showValidation = () => {\n        // set flag\n        isValidating.current = true;\n\n        /**\n         * Clear errors prior to validating so that the screenreader will read them *all* again, and in the right order\n         * - only using aria-atomic on the error panel will read them in the wrong order\n         */\n        clearSRPanel?.(); // TODO - recheck if this is still true\n\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName & SSN & KCP (taxNumber) but *not* billingAddress\n        triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n        // Validate Address\n        if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n    };\n\n    cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n        extensions.processBinLookup(binLookupResponse, isReset);\n    };\n\n    cardInputRef.current.setStatus = setStatus;\n\n    /**\n     * EFFECT HOOKS\n     */\n    useEffect(() => {\n        // componentDidMount - expose more methods expected by Card.tsx\n        cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n        cardInputRef.current.updateStyles = sfp.current.updateStyles;\n        cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n        // componentWillUnmount\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    /**\n     * Handle form schema updates\n     */\n    useEffect(() => {\n        const newSchema = [\n            ...(props.hasHolderName ? ['holderName'] : []),\n            ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n            ...(showKCP ? ['taxNumber'] : []),\n            ...(showBillingAddress ? ['billingAddress'] : [])\n        ];\n        setSchema(newSchema);\n    }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n    /**\n     * Handle updates from useForm\n     */\n    useEffect(() => {\n        setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n        setSocialSecurityNumber(formData.socialSecurityNumber);\n\n        if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n        setValid({\n            ...valid,\n            holderName: props.holderNameRequired ? formValid.holderName : true,\n            // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n            // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n            socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n            taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n            billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n        });\n\n        // Check if billingAddress errors object has any properties that aren't null or undefined\n        const addressHasErrors = formErrors.billingAddress\n            ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc || error != null, false)\n            : false;\n\n        // Errors\n        setErrors({\n            ...errors,\n            holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n            socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n            taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n            billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n        });\n    }, [formData, formValid, formErrors]);\n\n    // Use the custom hook to set (or clear) errors in the SRPanel\n    const {\n        sortedErrorList: currentErrorsSortedByLayout,\n        previousSortedErrors,\n        clearSRPanel\n    } = useSRPanelForCardInputErrors({\n        errors,\n        props,\n        isValidating,\n        retrieveLayout,\n        specifications,\n        billingAddress,\n        sfp\n    });\n\n    // Analytics: ValidationErrors\n    if (currentErrorsSortedByLayout) {\n        const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n        newErrors?.forEach(errorItem => {\n            const aObj: FieldErrorAnalyticsObject = {\n                fieldType: errorItem.field,\n                errorCode: errorItem.errorCode\n            };\n\n            props.onValidationErrorAnalytics(aObj);\n        });\n    }\n\n    /**\n     * Main 'componentDidUpdate' handler\n     */\n    useEffect(() => {\n        const holderNameValid: boolean = valid.holderName;\n\n        const sfpValid: boolean = isSfpValid;\n        const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n        const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n        const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n        const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n        const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n        const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n        props.onChange({\n            data,\n            valid,\n            errors: mergedErrors,\n            isValid,\n            billingAddress,\n            selectedBrandValue,\n            storePaymentMethod,\n            socialSecurityNumber,\n            installments\n        });\n    }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n    /**\n     * RENDER\n     */\n    const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n    return (\n        <Fragment>\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...props.styles }}\n                koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n                hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n                onChange={handleSecuredFieldsChange}\n                onBrand={onBrand}\n                onFocus={handleFocus}\n                type={props.brand}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div\n                        ref={setRootNode}\n                        className={classNames({\n                            'adyen-checkout__card-input': true,\n                            'adyen-checkout-card-input__wrapper': true,\n                            [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n                            'adyen-checkout__card-input--loading': status === 'loading'\n                        })}\n                        role={'form'}\n                    >\n                        <FormInstruction />\n\n                        <FieldToRender\n                            // Extract exact props that we need to pass down\n                            {...extractPropsForCardFields(props)}\n                            // Pass on vars created in CardInput:\n                            // Base (shared w. StoredCard)\n                            data={data}\n                            valid={valid}\n                            errors={errors}\n                            handleChangeFor={handleChangeFor}\n                            focusedElement={focusedElement}\n                            setFocusOn={setFocusOn}\n                            sfpState={sfpState}\n                            cvcPolicy={cvcPolicy}\n                            hasInstallments={hasInstallments}\n                            showAmountsInInstallments={showAmountsInInstallments}\n                            handleInstallments={setInstallments}\n                            // For Card\n                            brandsIcons={props.brandsIcons}\n                            formData={formData}\n                            formErrors={formErrors}\n                            formValid={formValid}\n                            expiryDatePolicy={expiryDatePolicy}\n                            dualBrandSelectElements={dualBrandSelectElements}\n                            extensions={extensions}\n                            selectedBrandValue={selectedBrandValue}\n                            // For KCP\n                            showKCP={showKCP}\n                            // For SSN\n                            showBrazilianSSN={showBrazilianSSN}\n                            socialSecurityNumber={socialSecurityNumber}\n                            // For Store details\n                            handleOnStoreDetails={setStorePaymentMethod}\n                            // For Address\n                            setAddressRef={setAddressRef}\n                            billingAddress={billingAddress}\n                            billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n                            partialAddressSchema={partialAddressSchema}\n                            handleAddress={handleAddress}\n                            onAddressLookup={props.onAddressLookup}\n                            onAddressSelected={props.onAddressSelected}\n                            addressSearchDebounceMs={props.addressSearchDebounceMs}\n                            //\n                            iOSFocusedField={iOSFocusedField}\n                            //\n                            onFieldFocusAnalytics={onFieldFocusAnalytics}\n                            onFieldBlurAnalytics={onFieldBlurAnalytics}\n                        />\n                    </div>\n                )}\n            />\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n                })}\n        </Fragment>\n    );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","internallyDetectedBrand","setInternallyDetectedBrand","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","newErrors","getArrayDifferences","forEach","errorItem","aObj","field","errorCode","onValidationErrorAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as a}from"../../../../../../external/preact/dist/preact.js";import r from"../../../../../../external/classnames/index.js";import e from"../../../../../internal/Img/Img.js";import{getFullBrandName as n}from"../../utils.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;return a("span",{className:r("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":"card"!==s})},t.map((({name:r,icon:t})=>a("span",{key:r,className:"adyen-checkout__card__brands__brand-wrapper"},a(e,{src:t,alt:n(r)})))))};export{t as default};
+import{createElement as a}from"../../../../../../external/preact/dist/preact.js";import r from"../../../../../../_virtual/index.js";import e from"../../../../../internal/Img/Img.js";import{getFullBrandName as n}from"../../utils.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;return a("span",{className:r("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":"card"!==s})},t.map((({name:r,icon:t})=>a("span",{key:r,className:"adyen-checkout__card__brands__brand-wrapper"},a(e,{src:t,alt:n(r)})))))};export{t as default};
 //# sourceMappingURL=AvailableBrands.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Img from '../../../../../internal/Img';\nimport './AvailableBrands.scss';\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n    brands: AvailableBrands;\n    activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: PaymentMethodBrandsProps) => {\n    if (!brands?.length) {\n        return null;\n    }\n\n    const isValidBrand = activeBrand !== 'card';\n    return (\n        <span\n            className={classNames('adyen-checkout__card__brands', {\n                'adyen-checkout__card__brands--hidden': isValidBrand\n            })}\n        >\n            {brands.map(({ name, icon }) => (\n                <span key={name} className=\"adyen-checkout__card__brands__brand-wrapper\">\n                    <Img src={icon} alt={getFullBrandName(name)} />\n                </span>\n            ))}\n        </span>\n    );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","h","span","className","classNames","map","name","icon","key","Img","src","alt","getFullBrandName"],"mappings":"mPAcA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAIX,OACIC,EAACC,OAAAA,CACGC,UAAWC,EAAW,+BAAgC,CAClD,uCAJyB,SAAhBL,KAOZD,EAAOO,KAAI,EAAGC,OAAMC,UACjBN,EAACC,OAAAA,CAAKM,IAAKF,EAAMH,UAAU,+CACvBF,EAACQ,EAAAA,CAAIC,IAAKH,EAAMI,IAAKC,EAAiBN"}
+{"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Img from '../../../../../internal/Img';\nimport './AvailableBrands.scss';\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n    brands: AvailableBrands;\n    activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: PaymentMethodBrandsProps) => {\n    if (!brands?.length) {\n        return null;\n    }\n\n    const isValidBrand = activeBrand !== 'card';\n    return (\n        <span\n            className={classNames('adyen-checkout__card__brands', {\n                'adyen-checkout__card__brands--hidden': isValidBrand\n            })}\n        >\n            {brands.map(({ name, icon }) => (\n                <span key={name} className=\"adyen-checkout__card__brands__brand-wrapper\">\n                    <Img src={icon} alt={getFullBrandName(name)} />\n                </span>\n            ))}\n        </span>\n    );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","h","span","className","classNames","map","name","icon","key","Img","src","alt","getFullBrandName"],"mappings":"wOAcA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAIX,OACIC,EAACC,OAAAA,CACGC,UAAWC,EAAW,+BAAgC,CAClD,uCAJyB,SAAhBL,KAOZD,EAAOO,KAAI,EAAGC,OAAMC,UACjBN,EAACC,OAAAA,CAAKM,IAAKF,EAAMH,UAAU,+CACvBF,EAACQ,EAAAA,CAAIC,IAAKH,EAAMI,IAAKC,EAAiBN"}

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

@@ -1,2 +1,2 @@
-import{createElement as r}from"../../../../../external/preact/dist/preact.js";import{getCardImageUrl as e,getFullBrandName as o}from"../utils.js";import a from"../../../../../core/Context/useImage.js";import{useState as t}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../external/classnames/index.js";function c({brand:c,brandsConfiguration:s={}}){const d=a(),i="card"===c?"nocard":c,m=s[c]?.icon??e(i,d),[u,p]=t(!1),_=n({"adyen-checkout-card-input__icon":!0,"adyen-checkout__card__cardNumber__brandIcon":!0,"adyen-checkout-card-input__icon--hidden":!u});return r("img",{className:_,onLoad:()=>{p(!0)},onError:()=>{p(!1)},alt:o(c),src:m})}export{c as default};
+import{createElement as r}from"../../../../../external/preact/dist/preact.js";import{getCardImageUrl as o,getFullBrandName as t}from"../utils.js";import a from"../../../../../core/Context/useImage.js";import{useState as e}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../_virtual/index.js";function c({brand:c,brandsConfiguration:i={}}){const s=a(),d="card"===c?"nocard":c,m=i[c]?.icon??o(d,s),[u,p]=e(!1),_=n({"adyen-checkout-card-input__icon":!0,"adyen-checkout__card__cardNumber__brandIcon":!0,"adyen-checkout-card-input__icon--hidden":!u});return r("img",{className:_,onLoad:()=>{p(!0)},onError:()=>{p(!1)},alt:t(c),src:m})}export{c as default};
 //# sourceMappingURL=BrandIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BrandIcon.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/BrandIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../utils';\nimport { BrandIconProps } from './types';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useState } from 'preact/hooks';\nimport classNames from 'classnames';\n\nexport default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) {\n    const getImage = useImage();\n    const imageName = brand === 'card' ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n    const [hasLoaded, setHasLoaded] = useState(false);\n\n    const handleError = () => {\n        setHasLoaded(false);\n    };\n\n    const handleLoad = () => {\n        setHasLoaded(true);\n    };\n\n    const fieldClassnames = classNames({\n        'adyen-checkout-card-input__icon': true,\n        'adyen-checkout__card__cardNumber__brandIcon': true,\n        'adyen-checkout-card-input__icon--hidden': !hasLoaded\n    });\n\n    return <img className={fieldClassnames} onLoad={handleLoad} onError={handleError} alt={getFullBrandName(brand)} src={imageUrl} />;\n}\n"],"names":["BrandIcon","brand","brandsConfiguration","getImage","useImage","imageName","imageUrl","icon","getCardImageUrl","hasLoaded","setHasLoaded","useState","fieldClassnames","classNames","h","img","className","onLoad","onError","alt","getFullBrandName","src"],"mappings":"kVAOe,SAASA,GAAUC,MAAEA,EAAKC,oBAAEA,EAAsB,CAAE,IAC/D,MAAMC,EAAWC,IACXC,EAAsB,SAAVJ,EAAmB,SAAWA,EAC1CK,EAAWJ,EAAoBD,IAAQM,MAAQC,EAAgBH,EAAWF,IAEzEM,EAAWC,GAAgBC,GAAS,GAUrCC,EAAkBC,EAAW,CAC/B,mCAAmC,EACnC,+CAA+C,EAC/C,2CAA4CJ,IAGhD,OAAOK,EAACC,MAAAA,CAAIC,UAAWJ,EAAiBK,OAVrB,KACfP,GAAa,EAAA,EAS2CQ,QAdxC,KAChBR,GAAa,EAAA,EAaiES,IAAKC,EAAiBnB,GAAQoB,IAAKf,GACzH"}
+{"version":3,"file":"BrandIcon.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/BrandIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../utils';\nimport { BrandIconProps } from './types';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useState } from 'preact/hooks';\nimport classNames from 'classnames';\n\nexport default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) {\n    const getImage = useImage();\n    const imageName = brand === 'card' ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n    const [hasLoaded, setHasLoaded] = useState(false);\n\n    const handleError = () => {\n        setHasLoaded(false);\n    };\n\n    const handleLoad = () => {\n        setHasLoaded(true);\n    };\n\n    const fieldClassnames = classNames({\n        'adyen-checkout-card-input__icon': true,\n        'adyen-checkout__card__cardNumber__brandIcon': true,\n        'adyen-checkout-card-input__icon--hidden': !hasLoaded\n    });\n\n    return <img className={fieldClassnames} onLoad={handleLoad} onError={handleError} alt={getFullBrandName(brand)} src={imageUrl} />;\n}\n"],"names":["BrandIcon","brand","brandsConfiguration","getImage","useImage","imageName","imageUrl","icon","getCardImageUrl","hasLoaded","setHasLoaded","useState","fieldClassnames","classNames","h","img","className","onLoad","onError","alt","getFullBrandName","src"],"mappings":"uUAOe,SAASA,GAAUC,MAAEA,EAAKC,oBAAEA,EAAsB,CAAE,IAC/D,MAAMC,EAAWC,IACXC,EAAsB,SAAVJ,EAAmB,SAAWA,EAC1CK,EAAWJ,EAAoBD,IAAQM,MAAQC,EAAgBH,EAAWF,IAEzEM,EAAWC,GAAgBC,GAAS,GAUrCC,EAAkBC,EAAW,CAC/B,mCAAmC,EACnC,+CAA+C,EAC/C,2CAA4CJ,IAGhD,OAAOK,EAACC,MAAAA,CAAIC,UAAWJ,EAAiBK,OAVrB,KACfP,GAAa,EAAA,EAS2CQ,QAdxC,KAChBR,GAAa,EAAA,EAaiES,IAAKC,EAAiBnB,GAAQoB,IAAKf,GACzH"}