@adyen/adyen-web 6.36.0 → 6.38.0

package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragonpayInput.js","sources":["../../../../../../src/components/Dragonpay/components/DragonpayInput/DragonpayInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport Field from '../../../internal/FormFields/Field';\nimport getIssuerImageUrl from '../../../../utils/get-issuer-image';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { DragonpayInputData, DragonpayInputIssuerItem, DragonpayInputProps } from '../../types';\nimport InputEmail from '../../../internal/FormFields/InputEmail';\nimport Select from '../../../internal/FormFields/Select';\nimport useImage from '../../../../core/Context/useImage';\nimport { validationRules } from '../../../../utils/Validator/defaultRules';\nimport { getErrorMessage } from '../../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\n\nexport default function DragonpayInput(props: Readonly<DragonpayInputProps>) {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const isIssuerRequired = () => {\n        const typesRequiringIssuers = ['dragonpay_ebanking', 'dragonpay_otc_banking', 'dragonpay_otc_non_banking'];\n        return typesRequiringIssuers.includes(props.type);\n    };\n    const [status, setStatus] = useState('ready');\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<DragonpayInputData>({\n        schema: [...(isIssuerRequired() ? ['issuer'] : []), 'shopperEmail'],\n        rules: {\n            issuer: {\n                validate: issuer => isIssuerRequired() && !!issuer,\n                modes: ['input', 'blur']\n            },\n            shopperEmail: validationRules.emailRule\n        }\n    });\n\n    const self = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            triggerValidation();\n        }\n    });\n\n    const getIssuerIcon = getIssuerImageUrl({}, props.type, getImage);\n    const items = props.items.map(\n        (item: DragonpayInputIssuerItem): DragonpayInputIssuerItem => ({\n            ...item,\n            icon: getIssuerIcon(item.id && item.id.toLowerCase())\n        })\n    );\n\n    const getIssuerSelectFieldKey = type => {\n        if (type === 'dragonpay_otc_non_banking') {\n            return 'dragonpayVoucher.selectField.contextualText.nonBank';\n        }\n        return 'dragonpayVoucher.selectField.contextualText.bank';\n    };\n\n    useEffect(() => {\n        props.onChange({ isValid, data, valid, errors });\n    }, [isValid, data, valid, errors]);\n\n    useEffect(() => {\n        props.setComponentRef(self.current);\n    }, [props.setComponentRef]);\n\n    return (\n        <div className=\"adyen-checkout__dragonpay-input__field\">\n            <Field\n                label={i18n.get('shopperEmail')}\n                errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                name={'dragonpay-shopperEmail'}\n            >\n                <InputEmail\n                    name={'dragonpay-shopperEmail'}\n                    autoCorrect={'off'}\n                    value={data.shopperEmail}\n                    className={'adyen-checkout__input--large'}\n                    spellcheck={false}\n                    onInput={handleChangeFor('shopperEmail', 'input')}\n                    onBlur={handleChangeFor('shopperEmail', 'blur')}\n                />\n            </Field>\n\n            {isIssuerRequired() && (\n                <Field label={i18n.get(getIssuerSelectFieldKey(props.type))} errorMessage={!!errors.issuer} name={'issuer'}>\n                    <Select\n                        items={items}\n                        selectedValue={data.issuer}\n                        name={'issuer'}\n                        className={'adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown'}\n                        onChange={handleChangeFor('issuer')}\n                    />\n                </Field>\n            )}\n\n            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n        </div>\n    );\n}\n\nDragonpayInput.defaultProps = {\n    data: {},\n    items: [],\n    onChange: () => {}\n};\n"],"names":["DragonpayInput","props","i18n","useCoreContext","getImage","useImage","isIssuerRequired","includes","type","status","setStatus","useState","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","issuer","validate","modes","shopperEmail","validationRules","emailRule","self","useRef","showValidation","getIssuerIcon","getIssuerImageUrl","items","map","item","icon","id","toLowerCase","useEffect","onChange","setComponentRef","current","h","div","className","Field","label","get","errorMessage","getErrorMessage","name","InputEmail","autoCorrect","value","spellcheck","onInput","onBlur","Select","selectedValue","showPayButton","payButton","defaultProps"],"mappings":"+tBAce,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAmB,IACS,CAAC,qBAAsB,wBAAyB,6BACjDC,SAASN,EAAMO,OAEzCC,EAAQC,GAAaC,EAAS,UAE/BC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA4B,CACrGC,OAAQ,IAAKb,IAAqB,CAAC,UAAY,GAAK,gBACpDc,MAAO,CACHC,OAAQ,CACJC,SAAUD,GAAUf,OAAwBe,EAC5CE,MAAO,CAAC,QAAS,SAErBC,aAAcC,EAAgBC,aAIhCC,EAAOC,EAA4B,CACrClB,UAAWA,EACXmB,eAAgB,KACZhB,OAIFiB,EAAgBC,EAAkB,CAAA,EAAI9B,EAAMO,KAAMJ,GAClD4B,EAAQ/B,EAAM+B,MAAMC,IACrBC,QACMA,EACHC,KAAML,EAAcI,EAAKE,IAAMF,EAAKE,GAAGC,kBAmB/C,OARAC,EAAU,KACNrC,EAAMsC,SAAS,CAAEtB,UAASH,OAAMC,QAAOC,YACxC,CAACC,EAASH,EAAMC,EAAOC,IAE1BsB,EAAU,KACNrC,EAAMuC,gBAAgBb,EAAKc,UAC5B,CAACxC,EAAMuC,kBAGNE,EAACC,MAAAA,CAAIC,UAAU,0CACXF,EAACG,EAAAA,CACGC,MAAO5C,EAAK6C,IAAI,gBAChBC,aAAcC,EAAgB/C,EAAMc,EAAOQ,aAActB,EAAK6C,IAAI,iBAClEG,KAAM,0BAENR,EAACS,EAAAA,CACGD,KAAM,yBACNE,YAAa,MACbC,MAAOvC,EAAKU,aACZoB,UAAW,+BACXU,YAAY,EACZC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,WAI/CN,KACGoC,EAACG,EAAAA,CAAMC,MAAO5C,EAAK6C,KAlCCvC,EAkC2BP,EAAMO,KAjChD,8BAATA,EACO,sDAEJ,qDA8B8DwC,eAAgBhC,EAAOK,OAAQ6B,KAAM,UAC9FR,EAACe,EAAAA,CACGzB,MAAOA,EACP0B,cAAe5C,EAAKO,OACpB6B,KAAM,SACNN,UAAW,wEACXL,SAAU3B,EAAgB,aAKrCX,EAAM0D,eAAiB1D,EAAM2D,UAAU,CAAEnD,SAAQqC,MAAO5C,EAAK6C,IAAI,sBA7C1CvC,IAAAA,CAgDpC,CAEAR,EAAe6D,aAAe,CAC1B/C,KAAM,CAAA,EACNkB,MAAO,GACPO,SAAU"}
+{"version":3,"file":"DragonpayInput.js","sources":["../../../../../../src/components/Dragonpay/components/DragonpayInput/DragonpayInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport Field from '../../../internal/FormFields/Field';\nimport getIssuerImageUrl from '../../../../utils/get-issuer-image';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { DragonpayInputData, DragonpayInputIssuerItem, DragonpayInputProps } from '../../types';\nimport InputEmail from '../../../internal/FormFields/InputEmail';\nimport Select from '../../../internal/FormFields/Select';\nimport useImage from '../../../../core/Context/useImage';\nimport { validationRules } from '../../../../utils/Validator/defaultRules';\nimport { getErrorMessage } from '../../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\n\nexport default function DragonpayInput(props: Readonly<DragonpayInputProps>) {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const isIssuerRequired = () => {\n        const typesRequiringIssuers = ['dragonpay_ebanking', 'dragonpay_otc_banking', 'dragonpay_otc_non_banking'];\n        return typesRequiringIssuers.includes(props.type);\n    };\n    const [status, setStatus] = useState('ready');\n\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<DragonpayInputData>({\n        schema: [...(isIssuerRequired() ? ['issuer'] : []), 'shopperEmail'],\n        rules: {\n            issuer: {\n                validate: issuer => isIssuerRequired() && !!issuer,\n                modes: ['input', 'blur']\n            },\n            shopperEmail: validationRules.emailRule\n        }\n    });\n\n    const self = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            triggerValidation();\n        }\n    });\n\n    const getIssuerIcon = getIssuerImageUrl({}, props.type, getImage);\n    const items = props.items.map(\n        (item: DragonpayInputIssuerItem): DragonpayInputIssuerItem => ({\n            ...item,\n            icon: getIssuerIcon(item.id && item.id.toLowerCase())\n        })\n    );\n\n    const getIssuerSelectFieldKey = type => {\n        if (type === 'dragonpay_otc_non_banking') {\n            return 'dragonpayVoucher.selectField.contextualText.nonBank';\n        }\n        return 'dragonpayVoucher.selectField.contextualText.bank';\n    };\n\n    useEffect(() => {\n        props.onChange({ isValid, data, valid, errors });\n    }, [isValid, data, valid, errors]);\n\n    useEffect(() => {\n        props.setComponentRef(self.current);\n    }, [props.setComponentRef]);\n\n    return (\n        <div className=\"adyen-checkout__dragonpay-input__field\">\n            <Field\n                label={i18n.get('shopperEmail')}\n                errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                name={'dragonpay-shopperEmail'}\n            >\n                <InputEmail\n                    name={'dragonpay-shopperEmail'}\n                    autoCorrect={'off'}\n                    value={data.shopperEmail}\n                    className={'adyen-checkout__input--large'}\n                    spellcheck={false}\n                    onInput={handleChangeFor('shopperEmail', 'input')}\n                    onBlur={handleChangeFor('shopperEmail', 'blur')}\n                />\n            </Field>\n\n            {isIssuerRequired() && (\n                <Field label={i18n.get(getIssuerSelectFieldKey(props.type))} errorMessage={!!errors.issuer} name={'issuer'}>\n                    <Select\n                        items={items}\n                        selectedValue={data.issuer}\n                        name={'issuer'}\n                        className={'adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown'}\n                        onChange={handleChangeFor('issuer')}\n                    />\n                </Field>\n            )}\n\n            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n        </div>\n    );\n}\n\nDragonpayInput.defaultProps = {\n    data: {},\n    items: [],\n    onChange: () => {}\n};\n"],"names":["DragonpayInput","props","i18n","useCoreContext","getImage","useImage","isIssuerRequired","includes","type","status","setStatus","useState","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","issuer","validate","modes","shopperEmail","validationRules","emailRule","self","useRef","showValidation","getIssuerIcon","getIssuerImageUrl","items","map","item","icon","id","toLowerCase","useEffect","onChange","setComponentRef","current","h","div","className","Field","label","get","errorMessage","getErrorMessage","name","InputEmail","autoCorrect","value","spellcheck","onInput","onBlur","Select","selectedValue","showPayButton","payButton","defaultProps"],"mappings":"kyBAce,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAmB,IACS,CAAC,qBAAsB,wBAAyB,6BACjDC,SAASN,EAAMO,OAEzCC,EAAQC,GAAaC,EAAS,UAE/BC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA4B,CACrGC,OAAQ,IAAKb,IAAqB,CAAC,UAAY,GAAK,gBACpDc,MAAO,CACHC,OAAQ,CACJC,SAAUD,GAAUf,OAAwBe,EAC5CE,MAAO,CAAC,QAAS,SAErBC,aAAcC,EAAgBC,aAIhCC,EAAOC,EAA4B,CACrClB,UAAWA,EACXmB,eAAgB,KACZhB,OAIFiB,EAAgBC,EAAkB,CAAA,EAAI9B,EAAMO,KAAMJ,GAClD4B,EAAQ/B,EAAM+B,MAAMC,IACrBC,QACMA,EACHC,KAAML,EAAcI,EAAKE,IAAMF,EAAKE,GAAGC,kBAmB/C,OARAC,EAAU,KACNrC,EAAMsC,SAAS,CAAEtB,UAASH,OAAMC,QAAOC,YACxC,CAACC,EAASH,EAAMC,EAAOC,IAE1BsB,EAAU,KACNrC,EAAMuC,gBAAgBb,EAAKc,UAC5B,CAACxC,EAAMuC,kBAGNE,EAACC,MAAAA,CAAIC,UAAU,0CACXF,EAACG,EAAAA,CACGC,MAAO5C,EAAK6C,IAAI,gBAChBC,aAAcC,EAAgB/C,EAAMc,EAAOQ,aAActB,EAAK6C,IAAI,iBAClEG,KAAM,0BAENR,EAACS,EAAAA,CACGD,KAAM,yBACNE,YAAa,MACbC,MAAOvC,EAAKU,aACZoB,UAAW,+BACXU,YAAY,EACZC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,WAI/CN,KACGoC,EAACG,EAAAA,CAAMC,MAAO5C,EAAK6C,KAlCCvC,EAkC2BP,EAAMO,KAjChD,8BAATA,EACO,sDAEJ,qDA8B8DwC,eAAgBhC,EAAOK,OAAQ6B,KAAM,UAC9FR,EAACe,EAAAA,CACGzB,MAAOA,EACP0B,cAAe5C,EAAKO,OACpB6B,KAAM,SACNN,UAAW,wEACXL,SAAU3B,EAAgB,aAKrCX,EAAM0D,eAAiB1D,EAAM2D,UAAU,CAAEnD,SAAQqC,MAAO5C,EAAK6C,IAAI,sBA7C1CvC,IAAAA,CAgDpC,CAEAR,EAAe6D,aAAe,CAC1B/C,KAAM,CAAA,EACNkB,MAAO,GACPO,SAAU"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodIcon.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import n from"../../../../core/Context/useImage.js";const o=({order:o,orderStatus:r,onOrderCancel:d,brandLogoConfiguration:m})=>{const{i18n:c}=a(),u=n();return e("div",null,e("ul",{className:"adyen-checkout__order-payment-methods-list"},r?.paymentMethods?.map((a,n)=>e("li",{key:`${a.type}-${n}`,className:"adyen-checkout__order-payment-method"},e("div",{className:"adyen-checkout__order-payment-method__header"},e("div",{className:"adyen-checkout__payment-method__header__title"},e(t,{altDescription:a.name,type:a.type,src:m[a.type]||u()(a.type)}),a.label?`${a.label}`:`•••• ${a.lastFour}`),d&&e("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:()=>{d({order:o})}},c.get("storedPaymentMethod.disable.button"))),e("div",{className:"adyen-checkout__order-payment-method__details"},e("div",{className:"adyen-checkout__order-payment-method__deducted-amount"},e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__label"},c.get("deductedBalance")),e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__value"},c.amount(a.amount.value,a.amount.currency))))))),r.remainingAmount&&e("p",{className:"adyen-checkout__order-remaining-amount"},c.get("partialPayment.warning")," ",e("strong",null,c.amount(r.remainingAmount.value,r.remainingAmount.currency))))};export{o as OrderPaymentMethods,o as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodIcon.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import n from"../../../../core/Context/useImage.js";const o=({order:o,orderStatus:r,onOrderCancel:d,brandLogoConfiguration:m})=>{const{i18n:c}=a(),u=n();return e("div",null,e("ul",{className:"adyen-checkout__order-payment-methods-list"},r?.paymentMethods?.map((a,n)=>e("li",{key:`${a.type}-${n}`,className:"adyen-checkout__order-payment-method"},e("div",{className:"adyen-checkout__order-payment-method__header"},e("div",{className:"adyen-checkout__payment-method__header__title"},e(t,{alt:a.name,type:a.type,src:m[a.type]||u()(a.type)}),a.label?`${a.label}`:`•••• ${a.lastFour}`),d&&e("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:()=>{d({order:o})}},c.get("storedPaymentMethod.disable.button"))),e("div",{className:"adyen-checkout__order-payment-method__details"},e("div",{className:"adyen-checkout__order-payment-method__deducted-amount"},e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__label"},c.get("deductedBalance")),e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__value"},c.amount(a.amount.value,a.amount.currency))))))),r.remainingAmount&&e("p",{className:"adyen-checkout__order-remaining-amount"},c.get("partialPayment.warning")," ",e("strong",null,c.amount(r.remainingAmount.value,r.remainingAmount.currency))))};export{o as OrderPaymentMethods,o as default};
 //# sourceMappingURL=OrderPaymentMethods.js.map

package/dist/es/components/Dropin/components/PaymentMethod/OrderPaymentMethods.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderPaymentMethods.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx"],"sourcesContent":["import { h } from 'preact';\nimport PaymentMethodIcon from './PaymentMethodIcon';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport './OrderPaymentMethods.scss';\nimport { Order, OrderStatus } from '../../../../types';\n\ntype OrderPaymentMethodsProps = {\n    order: Order;\n    orderStatus: OrderStatus;\n    onOrderCancel: (order) => void;\n    brandLogoConfiguration: any;\n};\n\nexport const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: Readonly<OrderPaymentMethodsProps>) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    return (\n        <div>\n            <ul className={'adyen-checkout__order-payment-methods-list'}>\n                {orderStatus?.paymentMethods?.map((orderPaymentMethod, index) => (\n                    <li key={`${orderPaymentMethod.type}-${index}`} className=\"adyen-checkout__order-payment-method\">\n                        <div className=\"adyen-checkout__order-payment-method__header\">\n                            <div className=\"adyen-checkout__payment-method__header__title\">\n                                <PaymentMethodIcon\n                                    altDescription={orderPaymentMethod.name}\n                                    type={orderPaymentMethod.type}\n                                    src={brandLogoConfiguration[orderPaymentMethod.type] || getImage()(orderPaymentMethod.type)}\n                                />\n                                {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}\n                            </div>\n\n                            {onOrderCancel && (\n                                <button\n                                    type=\"button\"\n                                    className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n                                    onClick={() => {\n                                        onOrderCancel({ order });\n                                    }}\n                                >\n                                    {i18n.get('storedPaymentMethod.disable.button')}\n                                </button>\n                            )}\n                        </div>\n                        <div className=\"adyen-checkout__order-payment-method__details\">\n                            <div className=\"adyen-checkout__order-payment-method__deducted-amount\">\n                                <span className=\"adyen-checkout__order-payment-method__deducted-amount__label\">{i18n.get('deductedBalance')}</span>\n                                <span className=\"adyen-checkout__order-payment-method__deducted-amount__value\">\n                                    {i18n.amount(orderPaymentMethod.amount.value, orderPaymentMethod.amount.currency)}\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n\n            {orderStatus.remainingAmount && (\n                <p className=\"adyen-checkout__order-remaining-amount\">\n                    {i18n.get('partialPayment.warning')}{' '}\n                    <strong>{i18n.amount(orderStatus.remainingAmount.value, orderStatus.remainingAmount.currency)}</strong>\n                </p>\n            )}\n        </div>\n    );\n};\n\nexport default OrderPaymentMethods;\n"],"names":["OrderPaymentMethods","order","orderStatus","onOrderCancel","brandLogoConfiguration","i18n","useCoreContext","getImage","useImage","h","div","ul","className","paymentMethods","map","orderPaymentMethod","index","li","key","type","PaymentMethodIcon","altDescription","name","src","label","lastFour","button","onClick","get","span","amount","value","currency","remainingAmount","p","strong"],"mappings":"+OAcO,MAAMA,EAAsB,EAAGC,QAAOC,cAAaC,gBAAeC,6BACrE,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,WACGD,EAACE,KAAAA,CAAGC,UAAW,8CACVV,GAAaW,gBAAgBC,IAAI,CAACC,EAAoBC,IACnDP,EAACQ,KAAAA,CAAGC,IAAK,GAAGH,EAAmBI,QAAQH,IAASJ,UAAU,wCACtDH,EAACC,MAAAA,CAAIE,UAAU,gDACXH,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACW,EAAAA,CACGC,eAAgBN,EAAmBO,KACnCH,KAAMJ,EAAmBI,KACzBI,IAAKnB,EAAuBW,EAAmBI,OAASZ,IAAWQ,EAAmBI,QAEzFJ,EAAmBS,MAAQ,GAAGT,EAAmBS,QAAU,QAAQT,EAAmBU,YAG1FtB,GACGM,EAACiB,SAAAA,CACGP,KAAK,SACLP,UAAU,qFACVe,QAAS,KACLxB,EAAc,CAAEF,YAGnBI,EAAKuB,IAAI,wCAItBnB,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACC,MAAAA,CAAIE,UAAU,yDACXH,EAACoB,OAAAA,CAAKjB,UAAU,gEAAgEP,EAAKuB,IAAI,oBACzFnB,EAACoB,OAAAA,CAAKjB,UAAU,gEACXP,EAAKyB,OAAOf,EAAmBe,OAAOC,MAAOhB,EAAmBe,OAAOE,gBAQ/F9B,EAAY+B,iBACTxB,EAACyB,IAAAA,CAAEtB,UAAU,0CACRP,EAAKuB,IAAI,0BAA2B,IACrCnB,EAAC0B,cAAQ9B,EAAKyB,OAAO5B,EAAY+B,gBAAgBF,MAAO7B,EAAY+B,gBAAgBD"}
+{"version":3,"file":"OrderPaymentMethods.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx"],"sourcesContent":["import { h } from 'preact';\nimport PaymentMethodIcon from './PaymentMethodIcon';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport './OrderPaymentMethods.scss';\nimport { Order, OrderStatus } from '../../../../types';\n\ntype OrderPaymentMethodsProps = {\n    order: Order;\n    orderStatus: OrderStatus;\n    onOrderCancel: (order) => void;\n    brandLogoConfiguration: any;\n};\n\nexport const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: Readonly<OrderPaymentMethodsProps>) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    return (\n        <div>\n            <ul className={'adyen-checkout__order-payment-methods-list'}>\n                {orderStatus?.paymentMethods?.map((orderPaymentMethod, index) => (\n                    <li key={`${orderPaymentMethod.type}-${index}`} className=\"adyen-checkout__order-payment-method\">\n                        <div className=\"adyen-checkout__order-payment-method__header\">\n                            <div className=\"adyen-checkout__payment-method__header__title\">\n                                <PaymentMethodIcon\n                                    alt={orderPaymentMethod.name}\n                                    type={orderPaymentMethod.type}\n                                    src={brandLogoConfiguration[orderPaymentMethod.type] || getImage()(orderPaymentMethod.type)}\n                                />\n                                {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}\n                            </div>\n\n                            {onOrderCancel && (\n                                <button\n                                    type=\"button\"\n                                    className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n                                    onClick={() => {\n                                        onOrderCancel({ order });\n                                    }}\n                                >\n                                    {i18n.get('storedPaymentMethod.disable.button')}\n                                </button>\n                            )}\n                        </div>\n                        <div className=\"adyen-checkout__order-payment-method__details\">\n                            <div className=\"adyen-checkout__order-payment-method__deducted-amount\">\n                                <span className=\"adyen-checkout__order-payment-method__deducted-amount__label\">{i18n.get('deductedBalance')}</span>\n                                <span className=\"adyen-checkout__order-payment-method__deducted-amount__value\">\n                                    {i18n.amount(orderPaymentMethod.amount.value, orderPaymentMethod.amount.currency)}\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n\n            {orderStatus.remainingAmount && (\n                <p className=\"adyen-checkout__order-remaining-amount\">\n                    {i18n.get('partialPayment.warning')}{' '}\n                    <strong>{i18n.amount(orderStatus.remainingAmount.value, orderStatus.remainingAmount.currency)}</strong>\n                </p>\n            )}\n        </div>\n    );\n};\n\nexport default OrderPaymentMethods;\n"],"names":["OrderPaymentMethods","order","orderStatus","onOrderCancel","brandLogoConfiguration","i18n","useCoreContext","getImage","useImage","h","div","ul","className","paymentMethods","map","orderPaymentMethod","index","li","key","type","PaymentMethodIcon","alt","name","src","label","lastFour","button","onClick","get","span","amount","value","currency","remainingAmount","p","strong"],"mappings":"+OAcO,MAAMA,EAAsB,EAAGC,QAAOC,cAAaC,gBAAeC,6BACrE,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,WACGD,EAACE,KAAAA,CAAGC,UAAW,8CACVV,GAAaW,gBAAgBC,IAAI,CAACC,EAAoBC,IACnDP,EAACQ,KAAAA,CAAGC,IAAK,GAAGH,EAAmBI,QAAQH,IAASJ,UAAU,wCACtDH,EAACC,MAAAA,CAAIE,UAAU,gDACXH,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACW,EAAAA,CACGC,IAAKN,EAAmBO,KACxBH,KAAMJ,EAAmBI,KACzBI,IAAKnB,EAAuBW,EAAmBI,OAASZ,IAAWQ,EAAmBI,QAEzFJ,EAAmBS,MAAQ,GAAGT,EAAmBS,QAAU,QAAQT,EAAmBU,YAG1FtB,GACGM,EAACiB,SAAAA,CACGP,KAAK,SACLP,UAAU,qFACVe,QAAS,KACLxB,EAAc,CAAEF,YAGnBI,EAAKuB,IAAI,wCAItBnB,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACC,MAAAA,CAAIE,UAAU,yDACXH,EAACoB,OAAAA,CAAKjB,UAAU,gEAAgEP,EAAKuB,IAAI,oBACzFnB,EAACoB,OAAAA,CAAKjB,UAAU,gEACXP,EAAKyB,OAAOf,EAAmBe,OAAOC,MAAOhB,EAAmBe,OAAOE,gBAQ/F9B,EAAY+B,iBACTxB,EAACyB,IAAAA,CAAEtB,UAAU,0CACRP,EAAKuB,IAAI,0BAA2B,IACrCnB,EAAC0B,cAAQ9B,EAAKyB,OAAO5B,EAAY+B,gBAAgBF,MAAO7B,EAAY+B,gBAAgBD"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../PaymentMethodIcon.js";import{getFullBrandName as n}from"../../../../Card/components/CardInput/utils.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import{BrandIcons as o}from"../../../../internal/BrandIcons/BrandIcons.js";import{getMaxBrandsToShow as s}from"./utils.js";const m=({brands:m,excludedUIBrands:d=[],isPaymentMethodSelected:i,keepBrandsVisible:c=!1,showOtherInsteadOfNumber:l=!1})=>{const{i18n:p}=a();if(i&&!c)return null;const u=r(()=>m.filter(e=>!d?.includes(e.name)).map(e=>({alt:n(e.name),src:e.icon})),[m,d]);return e(o,{brandIcons:u,maxBrandsToShow:s(u),remainingBrandsLabel:l?`+ ${p.get("paymentMethodBrand.other")}`:void 0,className:"adyen-checkout__payment-method__brands",remainingBrandsLabelClassName:"adyen-checkout__payment-method__brand-number",renderBrandIcon:r=>e(t,{key:r.alt,altDescription:r.alt,type:r.alt,src:r.src})})};export{m as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../PaymentMethodIcon.js";import{getFullBrandName as a}from"../../../../Card/components/CardInput/utils.js";import{useCoreContext as n}from"../../../../../core/Context/CoreProvider.js";import{BrandIcons as o}from"../../../../internal/BrandIcons/BrandIcons.js";import{getMaxBrandsToShow as s}from"./utils.js";const m=({brands:m,excludedUIBrands:d=[],isPaymentMethodSelected:i,keepBrandsVisible:c=!1,showOtherInsteadOfNumber:l=!1})=>{const{i18n:p}=n();if(i&&!c)return null;const u=r(()=>m.filter(e=>!d?.includes(e.name)).map(e=>({alt:a(e.name),src:e.icon})),[m,d]);return e(o,{brandIcons:u,maxBrandsToShow:s(u),remainingBrandsLabel:l?`+ ${p.get("paymentMethodBrand.other")}`:void 0,className:"adyen-checkout__payment-method__brands",remainingBrandsLabelClassName:"adyen-checkout__payment-method__brand-number",renderBrandIcon:r=>e(t,{key:r.alt,as:"li",alt:r.alt,type:r.alt,src:r.src})})};export{m as default};
 //# sourceMappingURL=PaymentMethodBrands.js.map

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodBrands.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\n\nimport { BrandConfiguration } from '../../../../Card/types';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { BrandIcons } from '../../../../internal/BrandIcons/BrandIcons';\nimport { getMaxBrandsToShow } from './utils';\n\ninterface PaymentMethodBrandsProps {\n    brands: Array<BrandConfiguration>;\n    excludedUIBrands?: Array<string>;\n    isPaymentMethodSelected: boolean;\n    keepBrandsVisible?: boolean;\n    showOtherInsteadOfNumber?: boolean;\n}\n\nconst PaymentMethodBrands = ({\n    brands,\n    excludedUIBrands = [],\n    isPaymentMethodSelected,\n    keepBrandsVisible = false,\n    showOtherInsteadOfNumber = false\n}: Readonly<PaymentMethodBrandsProps>) => {\n    const { i18n } = useCoreContext();\n\n    if (isPaymentMethodSelected && !keepBrandsVisible) {\n        return null;\n    }\n\n    const allowedBrands = useMemo(\n        () => brands.filter(brand => !excludedUIBrands?.includes(brand.name)).map(brand => ({ alt: getFullBrandName(brand.name), src: brand.icon })),\n        [brands, excludedUIBrands]\n    );\n\n    return (\n        <BrandIcons\n            brandIcons={allowedBrands}\n            maxBrandsToShow={getMaxBrandsToShow(allowedBrands)}\n            remainingBrandsLabel={showOtherInsteadOfNumber ? `+ ${i18n.get('paymentMethodBrand.other')}` : undefined}\n            className=\"adyen-checkout__payment-method__brands\"\n            remainingBrandsLabelClassName=\"adyen-checkout__payment-method__brand-number\"\n            renderBrandIcon={brandIcon => (\n                <PaymentMethodIcon key={brandIcon.alt} altDescription={brandIcon.alt} type={brandIcon.alt} src={brandIcon.src} />\n            )}\n        />\n    );\n};\n\nexport default PaymentMethodBrands;\n"],"names":["PaymentMethodBrands","brands","excludedUIBrands","isPaymentMethodSelected","keepBrandsVisible","showOtherInsteadOfNumber","i18n","useCoreContext","allowedBrands","useMemo","filter","brand","includes","name","map","alt","getFullBrandName","src","icon","h","BrandIcons","brandIcons","maxBrandsToShow","getMaxBrandsToShow","remainingBrandsLabel","get","undefined","className","remainingBrandsLabelClassName","renderBrandIcon","brandIcon","PaymentMethodIcon","key","altDescription","type"],"mappings":"4dAkBA,MAAMA,EAAsB,EACxBC,SACAC,mBAAmB,GACnBC,0BACAC,qBAAoB,EACpBC,4BAA2B,MAE3B,MAAMC,KAAEA,GAASC,IAEjB,GAAIJ,IAA4BC,EAC5B,OAAO,KAGX,MAAMI,EAAgBC,EAClB,IAAMR,EAAOS,OAAOC,IAAUT,GAAkBU,SAASD,EAAME,OAAOC,IAAIH,KAAYI,IAAKC,EAAiBL,EAAME,MAAOI,IAAKN,EAAMO,QACpI,CAACjB,EAAQC,IAGb,OACIiB,EAACC,EAAAA,CACGC,WAAYb,EACZc,gBAAiBC,EAAmBf,GACpCgB,qBAAsBnB,EAA2B,KAAKC,EAAKmB,IAAI,mCAAgCC,EAC/FC,UAAU,yCACVC,8BAA8B,+CAC9BC,gBAAiBC,GACbX,EAACY,EAAAA,CAAkBC,IAAKF,EAAUf,IAAKkB,eAAgBH,EAAUf,IAAKmB,KAAMJ,EAAUf,IAAKE,IAAKa,EAAUb"}
+{"version":3,"file":"PaymentMethodBrands.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\n\nimport { BrandConfiguration } from '../../../../Card/types';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { BrandIcons } from '../../../../internal/BrandIcons/BrandIcons';\nimport { getMaxBrandsToShow } from './utils';\n\ninterface PaymentMethodBrandsProps {\n    brands: Array<BrandConfiguration>;\n    excludedUIBrands?: Array<string>;\n    isPaymentMethodSelected: boolean;\n    keepBrandsVisible?: boolean;\n    showOtherInsteadOfNumber?: boolean;\n}\n\nconst PaymentMethodBrands = ({\n    brands,\n    excludedUIBrands = [],\n    isPaymentMethodSelected,\n    keepBrandsVisible = false,\n    showOtherInsteadOfNumber = false\n}: Readonly<PaymentMethodBrandsProps>) => {\n    const { i18n } = useCoreContext();\n\n    if (isPaymentMethodSelected && !keepBrandsVisible) {\n        return null;\n    }\n\n    const allowedBrands = useMemo(\n        () => brands.filter(brand => !excludedUIBrands?.includes(brand.name)).map(brand => ({ alt: getFullBrandName(brand.name), src: brand.icon })),\n        [brands, excludedUIBrands]\n    );\n\n    return (\n        <BrandIcons\n            brandIcons={allowedBrands}\n            maxBrandsToShow={getMaxBrandsToShow(allowedBrands)}\n            remainingBrandsLabel={showOtherInsteadOfNumber ? `+ ${i18n.get('paymentMethodBrand.other')}` : undefined}\n            className=\"adyen-checkout__payment-method__brands\"\n            remainingBrandsLabelClassName=\"adyen-checkout__payment-method__brand-number\"\n            renderBrandIcon={brandIcon => (\n                <PaymentMethodIcon key={brandIcon.alt} as=\"li\" alt={brandIcon.alt} type={brandIcon.alt} src={brandIcon.src} />\n            )}\n        />\n    );\n};\n\nexport default PaymentMethodBrands;\n"],"names":["PaymentMethodBrands","brands","excludedUIBrands","isPaymentMethodSelected","keepBrandsVisible","showOtherInsteadOfNumber","i18n","useCoreContext","allowedBrands","useMemo","filter","brand","includes","name","map","alt","getFullBrandName","src","icon","h","BrandIcons","brandIcons","maxBrandsToShow","getMaxBrandsToShow","remainingBrandsLabel","get","undefined","className","remainingBrandsLabelClassName","renderBrandIcon","brandIcon","PaymentMethodIcon","key","as","type"],"mappings":"4dAkBA,MAAMA,EAAsB,EACxBC,SACAC,mBAAmB,GACnBC,0BACAC,qBAAoB,EACpBC,4BAA2B,MAE3B,MAAMC,KAAEA,GAASC,IAEjB,GAAIJ,IAA4BC,EAC5B,OAAO,KAGX,MAAMI,EAAgBC,EAClB,IAAMR,EAAOS,OAAOC,IAAUT,GAAkBU,SAASD,EAAME,OAAOC,IAAIH,KAAYI,IAAKC,EAAiBL,EAAME,MAAOI,IAAKN,EAAMO,QACpI,CAACjB,EAAQC,IAGb,OACIiB,EAACC,EAAAA,CACGC,WAAYb,EACZc,gBAAiBC,EAAmBf,GACpCgB,qBAAsBnB,EAA2B,KAAKC,EAAKmB,IAAI,mCAAgCC,EAC/FC,UAAU,yCACVC,8BAA8B,+CAC9BC,gBAAiBC,GACbX,EAACY,EAAAA,CAAkBC,IAAKF,EAAUf,IAAKkB,GAAG,KAAKlB,IAAKe,EAAUf,IAAKmB,KAAMJ,EAAUf,IAAKE,IAAKa,EAAUb"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{BrandImage as t}from"../../../internal/BrandImage/BrandImage.js";const r=["googlepay","paywithgoogle"],m=({src:m,altDescription:o,type:_})=>{const p=r.includes(_)?"adyen-checkout__payment-method__image__wrapper":a("adyen-checkout__payment-method__image__wrapper","adyen-checkout__payment-method__image__wrapper--outline");return e(t,{wrapperClassName:p,imgClassName:"adyen-checkout__payment-method__image",src:m,alt:o})};export{m as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{BrandImage as t}from"../../../internal/BrandImage/BrandImage.js";const r=new Set(["googlepay","paywithgoogle"]),m=({src:m,alt:_,type:o,as:p})=>{const n=r.has(o)?"adyen-checkout__payment-method__image__wrapper":a("adyen-checkout__payment-method__image__wrapper","adyen-checkout__payment-method__image__wrapper--outline");return e(t,{as:p,wrapperClassName:n,imgClassName:"adyen-checkout__payment-method__image",src:m,alt:_})};export{m as default};
 //# sourceMappingURL=PaymentMethodIcon.js.map

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodIcon.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { BrandImage } from '../../../internal/BrandImage';\n\ninterface PaymentMethodIconProps {\n    /** URL to the payment method icon */\n    src: string;\n\n    /** Alt description of payment method used of a11y */\n    altDescription: string;\n\n    /** Type of the payment method*/\n    type: string;\n}\n\nconst paymentMethodsWithoutBorder = ['googlepay', 'paywithgoogle'];\n\nconst PaymentMethodIcon = ({ src, altDescription, type }: Readonly<PaymentMethodIconProps>) => {\n    const classes = paymentMethodsWithoutBorder.includes(type)\n        ? 'adyen-checkout__payment-method__image__wrapper'\n        : classNames('adyen-checkout__payment-method__image__wrapper', 'adyen-checkout__payment-method__image__wrapper--outline');\n\n    return <BrandImage wrapperClassName={classes} imgClassName={'adyen-checkout__payment-method__image'} src={src} alt={altDescription} />;\n};\n\nexport default PaymentMethodIcon;\n"],"names":["paymentMethodsWithoutBorder","PaymentMethodIcon","src","altDescription","type","classes","includes","classNames","h","BrandImage","wrapperClassName","imgClassName","alt"],"mappings":"gMAeA,MAAMA,EAA8B,CAAC,YAAa,iBAE5CC,EAAoB,EAAGC,MAAKC,iBAAgBC,WAC9C,MAAMC,EAAUL,EAA4BM,SAASF,GAC/C,iDACAG,EAAW,iDAAkD,2DAEnE,OAAOC,EAACC,EAAAA,CAAWC,iBAAkBL,EAASM,aAAc,wCAAyCT,IAAKA,EAAKU,IAAKT"}
+{"version":3,"file":"PaymentMethodIcon.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { BrandImage } from '../../../internal/BrandImage';\nimport { ElementType } from 'preact/compat';\n\ninterface PaymentMethodIconProps {\n    src: string;\n    alt: string;\n    type: string;\n    as?: ElementType;\n}\n\nconst paymentMethodsWithoutBorder = new Set(['googlepay', 'paywithgoogle']);\n\nconst PaymentMethodIcon = ({ src, alt, type, as }: Readonly<PaymentMethodIconProps>) => {\n    const classes = paymentMethodsWithoutBorder.has(type)\n        ? 'adyen-checkout__payment-method__image__wrapper'\n        : classNames('adyen-checkout__payment-method__image__wrapper', 'adyen-checkout__payment-method__image__wrapper--outline');\n\n    return <BrandImage as={as} wrapperClassName={classes} imgClassName={'adyen-checkout__payment-method__image'} src={src} alt={alt} />;\n};\n\nexport default PaymentMethodIcon;\n"],"names":["paymentMethodsWithoutBorder","Set","PaymentMethodIcon","src","alt","type","as","classes","has","classNames","h","BrandImage","wrapperClassName","imgClassName"],"mappings":"gMAYA,MAAMA,EAA8B,IAAIC,IAAI,CAAC,YAAa,kBAEpDC,EAAoB,EAAGC,MAAKC,MAAKC,OAAMC,SACzC,MAAMC,EAAUP,EAA4BQ,IAAIH,GAC1C,iDACAI,EAAW,iDAAkD,2DAEnE,OAAOC,EAACC,EAAAA,CAAWL,GAAIA,EAAIM,iBAAkBL,EAASM,aAAc,wCAAyCV,IAAKA,EAAKC,IAAKA"}

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

@@ -1,2 +1,2 @@
-import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import{PaymentMethodDetails as n}from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{useCoreContext as m}from"../../../../../core/Context/CoreProvider.js";import h from"../../../../internal/ExpandButton/ExpandButton.js";import{getFullBrandName as l}from"../../../../Card/components/CardInput/utils.js";import{stopPropagationForActionKeys as p}from"../../../../internal/Button/stopPropagationForActionKeys.js";import c from"../../../../internal/Button/Button.js";function y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}class u extends e{render({paymentMethod:e,isSelected:y,isDisablingPaymentMethod:u,isLoading:_,standalone:f,showRadioButton:b}){const{i18n:C}=m();if(!e)return null;const k="card"===e.props.type||"scheme"===e.props.type,M=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...k&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":y,"adyen-checkout__payment-method--loading":_,"adyen-checkout__payment-method--disabling":u,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":f,[e._id]:!0,[this.props.className]:!0}),P=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&y,D=`remove-${e._id}`,S=`container-${e._id}`,g=`button-${e._id}`,w=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("div",{key:e._id,className:M,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(h,{className:"adyen-checkout__payment-method__header__content",buttonId:g,showRadioButton:b,isSelected:y,expandContentId:S,standalone:f},t(a,{...e.props.oneClick&&{altDescription:l(e.props.brand)},type:e.type,src:e.icon}),t("div",{className:"adyen-checkout__payment-method__header__details"},t(r,{displayName:e.displayName,isSelected:y,additionalInfo:e.additionalInfo}),w&&t(s,{showOtherInsteadOfNumber:e.props.showOtherInsteadOfNumber,keepBrandsVisible:e.props.keepBrandsVisible,brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:y}))),P&&t(c,{inline:!0,variant:"link",onClick:this.toggleDisableConfirmation,onKeyPress:p,onKeyDown:p,ariaExpanded:this.state.showDisableStoredPaymentMethodConfirmation,ariaControls:D},C.get("storedPaymentMethod.disable.button"))),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!y},t("div",{className:"adyen-checkout__payment-method__details",id:S,inert:!y||void 0},P&&t(i,{id:D,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e,isSelected:y}))))}constructor(...e){super(...e),y(this,"state",{showDisableStoredPaymentMethodConfirmation:!1}),y(this,"toggleDisableConfirmation",()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})}),y(this,"onDisableStoredPaymentMethod",()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()}),y(this,"handleOnListItemClick",()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)})}}y(u,"defaultProps",{paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1});export{u as default};
+import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import{PaymentMethodDetails as n}from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{useCoreContext as m}from"../../../../../core/Context/CoreProvider.js";import h from"../../../../internal/ExpandButton/ExpandButton.js";import{getFullBrandName as l}from"../../../../Card/components/CardInput/utils.js";import{stopPropagationForActionKeys as p}from"../../../../internal/Button/stopPropagationForActionKeys.js";import c from"../../../../internal/Button/Button.js";function y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}class u extends e{render({paymentMethod:e,isSelected:y,isDisablingPaymentMethod:u,isLoading:_,standalone:f,showRadioButton:b}){const{i18n:C}=m();if(!e)return null;const k="card"===e.props.type||"scheme"===e.props.type,M=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...k&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":y,"adyen-checkout__payment-method--loading":_,"adyen-checkout__payment-method--disabling":u,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":f,[e._id]:!0,[this.props.className]:!0}),P=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&y,S=`remove-${e._id}`,g=`container-${e._id}`,D=`button-${e._id}`,w=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("div",{key:e._id,className:M,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(h,{className:"adyen-checkout__payment-method__header__content",buttonId:D,showRadioButton:b,isSelected:y,expandContentId:g,standalone:f},t(a,{...e.props.oneClick&&{alt:l(e.props.brand)},type:e.type,src:e.icon}),t("div",{className:"adyen-checkout__payment-method__header__details"},t(r,{displayName:e.displayName,isSelected:y,additionalInfo:e.additionalInfo}),w&&t(s,{showOtherInsteadOfNumber:e.props.showOtherInsteadOfNumber,keepBrandsVisible:e.props.keepBrandsVisible,brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:y}))),P&&t(c,{inline:!0,variant:"link",onClick:this.toggleDisableConfirmation,onKeyPress:p,onKeyDown:p,ariaExpanded:this.state.showDisableStoredPaymentMethodConfirmation,ariaControls:S},C.get("storedPaymentMethod.disable.button"))),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!y},t("div",{className:"adyen-checkout__payment-method__details",id:g,inert:!y||void 0},P&&t(i,{id:S,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e,isSelected:y}))))}constructor(...e){super(...e),y(this,"state",{showDisableStoredPaymentMethodConfirmation:!1}),y(this,"toggleDisableConfirmation",()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})}),y(this,"onDisableStoredPaymentMethod",()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()}),y(this,"handleOnListItemClick",()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)})}}y(u,"defaultProps",{paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1});export{u as default};
 //# sourceMappingURL=PaymentMethodItem.js.map

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodItem.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\n\nimport { PaymentMethodDetails } from '../PaymentMethodDetails';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport DisableOneClickConfirmation from '../DisableOneClickConfirmation';\nimport UIElement from '../../../../internal/UIElement/UIElement';\nimport PaymentMethodBrands from '../PaymentMethodBrands/PaymentMethodBrands';\nimport { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../../internal/SecuredFields/lib/constants';\nimport PaymentMethodName from '../PaymentMethodName';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport ExpandButton from '../../../../internal/ExpandButton';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { stopPropagationForActionKeys } from '../../../../internal/Button/stopPropagationForActionKeys';\nimport './PaymentMethodItem.scss';\nimport Button from '../../../../internal/Button';\n\nexport interface PaymentMethodItemProps {\n    paymentMethod: UIElement;\n    isSelected?: boolean;\n    isLoading?: boolean;\n    isDisablingPaymentMethod: boolean;\n    showRemovePaymentMethodButton: boolean;\n    onDisableStoredPaymentMethod: (paymentMethod) => void;\n    onSelect: (paymentMethod: UIElement) => void;\n    standalone: boolean;\n    className?: string;\n    showRadioButton?: boolean;\n}\n\nclass PaymentMethodItem extends Component<Readonly<PaymentMethodItemProps>> {\n    public static readonly defaultProps = {\n        paymentMethod: null,\n        isSelected: false,\n        isLoaded: false,\n        isLoading: false,\n        showDisableStoredPaymentMethodConfirmation: false,\n        showRadioButton: false\n    };\n\n    public state = {\n        showDisableStoredPaymentMethodConfirmation: false\n    };\n\n    public toggleDisableConfirmation = () => {\n        this.setState({ showDisableStoredPaymentMethodConfirmation: !this.state.showDisableStoredPaymentMethodConfirmation });\n    };\n\n    public onDisableStoredPaymentMethod = () => {\n        this.props.onDisableStoredPaymentMethod(this.props.paymentMethod);\n        this.toggleDisableConfirmation();\n    };\n\n    private readonly handleOnListItemClick = (): void => {\n        const { onSelect, paymentMethod } = this.props;\n        onSelect(paymentMethod);\n    };\n\n    // @ts-ignore need to refine the type for paymentMethod\n    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoading, standalone, showRadioButton }) {\n        const { i18n } = useCoreContext();\n\n        if (!paymentMethod) {\n            return null;\n        }\n\n        const isCard = paymentMethod.props.type === 'card' || paymentMethod.props.type === 'scheme';\n\n        const paymentMethodClassnames = classNames({\n            'adyen-checkout__payment-method': true,\n            [`adyen-checkout__payment-method--${paymentMethod.props.type}`]: true,\n            ...(isCard && { [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true }),\n            'adyen-checkout__payment-method--selected': isSelected,\n            'adyen-checkout__payment-method--loading': isLoading,\n            'adyen-checkout__payment-method--disabling': isDisablingPaymentMethod,\n            'adyen-checkout__payment-method--confirming': this.state.showDisableStoredPaymentMethodConfirmation,\n            'adyen-checkout__payment-method--standalone': standalone,\n            [paymentMethod._id]: true,\n            [this.props.className]: true\n        });\n\n        const showRemovePaymentMethodButton = this.props.showRemovePaymentMethodButton && paymentMethod.props.oneClick && isSelected;\n        const disableConfirmationId = `remove-${paymentMethod._id}`;\n        const containerId = `container-${paymentMethod._id}`;\n        const buttonId = `button-${paymentMethod._id}`;\n\n        const showBrands = !paymentMethod.props.oneClick && paymentMethod.brands && paymentMethod.brands.length > 0;\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n            <div key={paymentMethod._id} className={paymentMethodClassnames} onClick={this.handleOnListItemClick}>\n                <div className=\"adyen-checkout__payment-method__header\">\n                    <ExpandButton\n                        className=\"adyen-checkout__payment-method__header__content\"\n                        buttonId={buttonId}\n                        showRadioButton={showRadioButton}\n                        isSelected={isSelected}\n                        expandContentId={containerId}\n                        standalone={standalone}\n                    >\n                        <PaymentMethodIcon\n                            // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)\n                            {...(paymentMethod.props.oneClick && { altDescription: getFullBrandName(paymentMethod.props.brand) })}\n                            type={paymentMethod.type}\n                            src={paymentMethod.icon}\n                        />\n\n                        <div className=\"adyen-checkout__payment-method__header__details\">\n                            <PaymentMethodName\n                                displayName={paymentMethod.displayName}\n                                isSelected={isSelected}\n                                additionalInfo={paymentMethod.additionalInfo}\n                            />\n                            {showBrands && (\n                                <PaymentMethodBrands\n                                    showOtherInsteadOfNumber={paymentMethod.props.showOtherInsteadOfNumber}\n                                    keepBrandsVisible={paymentMethod.props.keepBrandsVisible}\n                                    brands={paymentMethod.brands}\n                                    excludedUIBrands={BRAND_ICON_UI_EXCLUSION_LIST}\n                                    isPaymentMethodSelected={isSelected}\n                                />\n                            )}\n                        </div>\n                    </ExpandButton>\n\n                    {showRemovePaymentMethodButton && (\n                        <Button\n                            inline\n                            variant=\"link\"\n                            onClick={this.toggleDisableConfirmation}\n                            onKeyPress={stopPropagationForActionKeys}\n                            onKeyDown={stopPropagationForActionKeys}\n                            ariaExpanded={this.state.showDisableStoredPaymentMethodConfirmation}\n                            ariaControls={disableConfirmationId}\n                        >\n                            {i18n.get('storedPaymentMethod.disable.button')}\n                        </Button>\n                    )}\n                </div>\n\n                <div className=\"adyen-checkout-pm-details-wrapper\" aria-hidden={!isSelected}>\n                    <div className=\"adyen-checkout__payment-method__details\" id={containerId} inert={isSelected ? undefined : true}>\n                        {showRemovePaymentMethodButton && (\n                            <DisableOneClickConfirmation\n                                id={disableConfirmationId}\n                                open={this.state.showDisableStoredPaymentMethodConfirmation}\n                                onDisable={this.onDisableStoredPaymentMethod}\n                                onCancel={this.toggleDisableConfirmation}\n                            />\n                        )}\n\n                        <PaymentMethodDetails paymentMethodComponent={paymentMethod} isSelected={isSelected} />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default PaymentMethodItem;\n"],"names":["PaymentMethodItem","Component","render","paymentMethod","isSelected","isDisablingPaymentMethod","isLoading","standalone","showRadioButton","i18n","useCoreContext","isCard","props","type","paymentMethodClassnames","classNames","fundingSource","this","state","showDisableStoredPaymentMethodConfirmation","_id","className","showRemovePaymentMethodButton","oneClick","disableConfirmationId","containerId","buttonId","showBrands","brands","length","h","div","key","onClick","handleOnListItemClick","ExpandButton","expandContentId","PaymentMethodIcon","altDescription","getFullBrandName","brand","src","icon","PaymentMethodName","displayName","additionalInfo","PaymentMethodBrands","showOtherInsteadOfNumber","keepBrandsVisible","excludedUIBrands","BRAND_ICON_UI_EXCLUSION_LIST","isPaymentMethodSelected","Button","inline","variant","toggleDisableConfirmation","onKeyPress","stopPropagationForActionKeys","onKeyDown","ariaExpanded","ariaControls","get","aria-hidden","id","inert","undefined","DisableOneClickConfirmation","open","onDisable","onDisableStoredPaymentMethod","onCancel","PaymentMethodDetails","paymentMethodComponent","super","args","_define_property","setState","onSelect","defaultProps","isLoaded"],"mappings":"s+BA8BA,MAAMA,UAA0BC,EA6B5BC,MAAAA,EAAOC,cAAEA,EAAaC,WAAEA,EAAUC,yBAAEA,EAAwBC,UAAEA,EAASC,WAAEA,EAAUC,gBAAEA,IACjF,MAAMC,KAAEA,GAASC,IAEjB,IAAKP,EACD,OAAO,KAGX,MAAMQ,EAAsC,SAA7BR,EAAcS,MAAMC,MAAgD,WAA7BV,EAAcS,MAAMC,KAEpEC,EAA0BC,EAAW,CACvC,kCAAkC,EAClC,CAAC,mCAAmCZ,EAAcS,MAAMC,SAAS,KAC7DF,GAAU,CAAE,CAAC,mCAAmCR,EAAcS,MAAMI,eAAiB,aAAa,GACtG,2CAA4CZ,EAC5C,0CAA2CE,EAC3C,4CAA6CD,EAC7C,6CAA8CY,KAAKC,MAAMC,2CACzD,6CAA8CZ,EAC9C,CAACJ,EAAciB,MAAM,EACrB,CAACH,KAAKL,MAAMS,YAAY,IAGtBC,EAAgCL,KAAKL,MAAMU,+BAAiCnB,EAAcS,MAAMW,UAAYnB,EAC5GoB,EAAwB,UAAUrB,EAAciB,MAChDK,EAAc,aAAatB,EAAciB,MACzCM,EAAW,UAAUvB,EAAciB,MAEnCO,GAAcxB,EAAcS,MAAMW,UAAYpB,EAAcyB,QAAUzB,EAAcyB,OAAOC,OAAS,EAE1G,OAEIC,EAACC,MAAAA,CAAIC,IAAK7B,EAAciB,IAAKC,UAAWP,EAAyBmB,QAAShB,KAAKiB,uBAC3EJ,EAACC,MAAAA,CAAIV,UAAU,0CACXS,EAACK,EAAAA,CACGd,UAAU,kDACVK,SAAUA,EACVlB,gBAAiBA,EACjBJ,WAAYA,EACZgC,gBAAiBX,EACjBlB,WAAYA,GAEZuB,EAACO,EAAAA,IAEQlC,EAAcS,MAAMW,UAAY,CAAEe,eAAgBC,EAAiBpC,EAAcS,MAAM4B,QAC5F3B,KAAMV,EAAcU,KACpB4B,IAAKtC,EAAcuC,OAGvBZ,EAACC,MAAAA,CAAIV,UAAU,mDACXS,EAACa,EAAAA,CACGC,YAAazC,EAAcyC,YAC3BxC,WAAYA,EACZyC,eAAgB1C,EAAc0C,iBAEjClB,GACGG,EAACgB,EAAAA,CACGC,yBAA0B5C,EAAcS,MAAMmC,yBAC9CC,kBAAmB7C,EAAcS,MAAMoC,kBACvCpB,OAAQzB,EAAcyB,OACtBqB,iBAAkBC,EAClBC,wBAAyB/C,MAMxCkB,GACGQ,EAACsB,EAAAA,CACGC,QAAAA,EACAC,QAAQ,OACRrB,QAAShB,KAAKsC,0BACdC,WAAYC,EACZC,UAAWD,EACXE,aAAc1C,KAAKC,MAAMC,2CACzByC,aAAcpC,GAEbf,EAAKoD,IAAI,wCAKtB/B,EAACC,MAAAA,CAAIV,UAAU,oCAAoCyC,eAAc1D,GAC7D0B,EAACC,MAAAA,CAAIV,UAAU,0CAA0C0C,GAAItC,EAAauC,OAAO5D,QAAa6D,GACzF3C,GACGQ,EAACoC,EAAAA,CACGH,GAAIvC,EACJ2C,KAAMlD,KAAKC,MAAMC,2CACjBiD,UAAWnD,KAAKoD,6BAChBC,SAAUrD,KAAKsC,4BAIvBzB,EAACyC,EAAAA,CAAqBC,uBAAwBrE,EAAeC,WAAYA,MAK7F,mBA9HJqE,SAAAC,GAUIC,OAAOzD,QAAQ,CACXC,4CAA4C,IAGhDwD,OAAOpB,4BAA4B,KAC/BtC,KAAK2D,SAAS,CAAEzD,4CAA6CF,KAAKC,MAAMC,+CAG5EwD,OAAON,+BAA+B,KAClCpD,KAAKL,MAAMyD,6BAA6BpD,KAAKL,MAAMT,eACnDc,KAAKsC,8BAGToB,OAAiBzC,wBAAwB,KACrC,MAAM2C,SAAEA,EAAQ1E,cAAEA,GAAkBc,KAAKL,MACzCiE,EAAS1E,MAxBbwE,EADE3E,EACqB8E,eAAe,CAClC3E,cAAe,KACfC,YAAY,EACZ2E,UAAU,EACVzE,WAAW,EACXa,4CAA4C,EAC5CX,iBAAiB"}
+{"version":3,"file":"PaymentMethodItem.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\n\nimport { PaymentMethodDetails } from '../PaymentMethodDetails';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport DisableOneClickConfirmation from '../DisableOneClickConfirmation';\nimport UIElement from '../../../../internal/UIElement/UIElement';\nimport PaymentMethodBrands from '../PaymentMethodBrands/PaymentMethodBrands';\nimport { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../../internal/SecuredFields/lib/constants';\nimport PaymentMethodName from '../PaymentMethodName';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport ExpandButton from '../../../../internal/ExpandButton';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { stopPropagationForActionKeys } from '../../../../internal/Button/stopPropagationForActionKeys';\nimport './PaymentMethodItem.scss';\nimport Button from '../../../../internal/Button';\n\nexport interface PaymentMethodItemProps {\n    paymentMethod: UIElement;\n    isSelected?: boolean;\n    isLoading?: boolean;\n    isDisablingPaymentMethod: boolean;\n    showRemovePaymentMethodButton: boolean;\n    onDisableStoredPaymentMethod: (paymentMethod) => void;\n    onSelect: (paymentMethod: UIElement) => void;\n    standalone: boolean;\n    className?: string;\n    showRadioButton?: boolean;\n}\n\nclass PaymentMethodItem extends Component<Readonly<PaymentMethodItemProps>> {\n    public static readonly defaultProps = {\n        paymentMethod: null,\n        isSelected: false,\n        isLoaded: false,\n        isLoading: false,\n        showDisableStoredPaymentMethodConfirmation: false,\n        showRadioButton: false\n    };\n\n    public state = {\n        showDisableStoredPaymentMethodConfirmation: false\n    };\n\n    public toggleDisableConfirmation = () => {\n        this.setState({ showDisableStoredPaymentMethodConfirmation: !this.state.showDisableStoredPaymentMethodConfirmation });\n    };\n\n    public onDisableStoredPaymentMethod = () => {\n        this.props.onDisableStoredPaymentMethod(this.props.paymentMethod);\n        this.toggleDisableConfirmation();\n    };\n\n    private readonly handleOnListItemClick = (): void => {\n        const { onSelect, paymentMethod } = this.props;\n        onSelect(paymentMethod);\n    };\n\n    // @ts-ignore need to refine the type for paymentMethod\n    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoading, standalone, showRadioButton }) {\n        const { i18n } = useCoreContext();\n\n        if (!paymentMethod) {\n            return null;\n        }\n\n        const isCard = paymentMethod.props.type === 'card' || paymentMethod.props.type === 'scheme';\n\n        const paymentMethodClassnames = classNames({\n            'adyen-checkout__payment-method': true,\n            [`adyen-checkout__payment-method--${paymentMethod.props.type}`]: true,\n            ...(isCard && { [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true }),\n            'adyen-checkout__payment-method--selected': isSelected,\n            'adyen-checkout__payment-method--loading': isLoading,\n            'adyen-checkout__payment-method--disabling': isDisablingPaymentMethod,\n            'adyen-checkout__payment-method--confirming': this.state.showDisableStoredPaymentMethodConfirmation,\n            'adyen-checkout__payment-method--standalone': standalone,\n            [paymentMethod._id]: true,\n            [this.props.className]: true\n        });\n\n        const showRemovePaymentMethodButton = this.props.showRemovePaymentMethodButton && paymentMethod.props.oneClick && isSelected;\n        const disableConfirmationId = `remove-${paymentMethod._id}`;\n        const containerId = `container-${paymentMethod._id}`;\n        const buttonId = `button-${paymentMethod._id}`;\n\n        const showBrands = !paymentMethod.props.oneClick && paymentMethod.brands && paymentMethod.brands.length > 0;\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n            <div key={paymentMethod._id} className={paymentMethodClassnames} onClick={this.handleOnListItemClick}>\n                <div className=\"adyen-checkout__payment-method__header\">\n                    <ExpandButton\n                        className=\"adyen-checkout__payment-method__header__content\"\n                        buttonId={buttonId}\n                        showRadioButton={showRadioButton}\n                        isSelected={isSelected}\n                        expandContentId={containerId}\n                        standalone={standalone}\n                    >\n                        <PaymentMethodIcon\n                            // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)\n                            {...(paymentMethod.props.oneClick && { alt: getFullBrandName(paymentMethod.props.brand) })}\n                            type={paymentMethod.type}\n                            src={paymentMethod.icon}\n                        />\n\n                        <div className=\"adyen-checkout__payment-method__header__details\">\n                            <PaymentMethodName\n                                displayName={paymentMethod.displayName}\n                                isSelected={isSelected}\n                                additionalInfo={paymentMethod.additionalInfo}\n                            />\n                            {showBrands && (\n                                <PaymentMethodBrands\n                                    showOtherInsteadOfNumber={paymentMethod.props.showOtherInsteadOfNumber}\n                                    keepBrandsVisible={paymentMethod.props.keepBrandsVisible}\n                                    brands={paymentMethod.brands}\n                                    excludedUIBrands={BRAND_ICON_UI_EXCLUSION_LIST}\n                                    isPaymentMethodSelected={isSelected}\n                                />\n                            )}\n                        </div>\n                    </ExpandButton>\n\n                    {showRemovePaymentMethodButton && (\n                        <Button\n                            inline\n                            variant=\"link\"\n                            onClick={this.toggleDisableConfirmation}\n                            onKeyPress={stopPropagationForActionKeys}\n                            onKeyDown={stopPropagationForActionKeys}\n                            ariaExpanded={this.state.showDisableStoredPaymentMethodConfirmation}\n                            ariaControls={disableConfirmationId}\n                        >\n                            {i18n.get('storedPaymentMethod.disable.button')}\n                        </Button>\n                    )}\n                </div>\n\n                <div className=\"adyen-checkout-pm-details-wrapper\" aria-hidden={!isSelected}>\n                    <div className=\"adyen-checkout__payment-method__details\" id={containerId} inert={isSelected ? undefined : true}>\n                        {showRemovePaymentMethodButton && (\n                            <DisableOneClickConfirmation\n                                id={disableConfirmationId}\n                                open={this.state.showDisableStoredPaymentMethodConfirmation}\n                                onDisable={this.onDisableStoredPaymentMethod}\n                                onCancel={this.toggleDisableConfirmation}\n                            />\n                        )}\n\n                        <PaymentMethodDetails paymentMethodComponent={paymentMethod} isSelected={isSelected} />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default PaymentMethodItem;\n"],"names":["PaymentMethodItem","Component","render","paymentMethod","isSelected","isDisablingPaymentMethod","isLoading","standalone","showRadioButton","i18n","useCoreContext","isCard","props","type","paymentMethodClassnames","classNames","fundingSource","this","state","showDisableStoredPaymentMethodConfirmation","_id","className","showRemovePaymentMethodButton","oneClick","disableConfirmationId","containerId","buttonId","showBrands","brands","length","h","div","key","onClick","handleOnListItemClick","ExpandButton","expandContentId","PaymentMethodIcon","alt","getFullBrandName","brand","src","icon","PaymentMethodName","displayName","additionalInfo","PaymentMethodBrands","showOtherInsteadOfNumber","keepBrandsVisible","excludedUIBrands","BRAND_ICON_UI_EXCLUSION_LIST","isPaymentMethodSelected","Button","inline","variant","toggleDisableConfirmation","onKeyPress","stopPropagationForActionKeys","onKeyDown","ariaExpanded","ariaControls","get","aria-hidden","id","inert","undefined","DisableOneClickConfirmation","open","onDisable","onDisableStoredPaymentMethod","onCancel","PaymentMethodDetails","paymentMethodComponent","super","args","_define_property","setState","onSelect","defaultProps","isLoaded"],"mappings":"s+BA8BA,MAAMA,UAA0BC,EA6B5BC,MAAAA,EAAOC,cAAEA,EAAaC,WAAEA,EAAUC,yBAAEA,EAAwBC,UAAEA,EAASC,WAAEA,EAAUC,gBAAEA,IACjF,MAAMC,KAAEA,GAASC,IAEjB,IAAKP,EACD,OAAO,KAGX,MAAMQ,EAAsC,SAA7BR,EAAcS,MAAMC,MAAgD,WAA7BV,EAAcS,MAAMC,KAEpEC,EAA0BC,EAAW,CACvC,kCAAkC,EAClC,CAAC,mCAAmCZ,EAAcS,MAAMC,SAAS,KAC7DF,GAAU,CAAE,CAAC,mCAAmCR,EAAcS,MAAMI,eAAiB,aAAa,GACtG,2CAA4CZ,EAC5C,0CAA2CE,EAC3C,4CAA6CD,EAC7C,6CAA8CY,KAAKC,MAAMC,2CACzD,6CAA8CZ,EAC9C,CAACJ,EAAciB,MAAM,EACrB,CAACH,KAAKL,MAAMS,YAAY,IAGtBC,EAAgCL,KAAKL,MAAMU,+BAAiCnB,EAAcS,MAAMW,UAAYnB,EAC5GoB,EAAwB,UAAUrB,EAAciB,MAChDK,EAAc,aAAatB,EAAciB,MACzCM,EAAW,UAAUvB,EAAciB,MAEnCO,GAAcxB,EAAcS,MAAMW,UAAYpB,EAAcyB,QAAUzB,EAAcyB,OAAOC,OAAS,EAE1G,OAEIC,EAACC,MAAAA,CAAIC,IAAK7B,EAAciB,IAAKC,UAAWP,EAAyBmB,QAAShB,KAAKiB,uBAC3EJ,EAACC,MAAAA,CAAIV,UAAU,0CACXS,EAACK,EAAAA,CACGd,UAAU,kDACVK,SAAUA,EACVlB,gBAAiBA,EACjBJ,WAAYA,EACZgC,gBAAiBX,EACjBlB,WAAYA,GAEZuB,EAACO,EAAAA,IAEQlC,EAAcS,MAAMW,UAAY,CAAEe,IAAKC,EAAiBpC,EAAcS,MAAM4B,QACjF3B,KAAMV,EAAcU,KACpB4B,IAAKtC,EAAcuC,OAGvBZ,EAACC,MAAAA,CAAIV,UAAU,mDACXS,EAACa,EAAAA,CACGC,YAAazC,EAAcyC,YAC3BxC,WAAYA,EACZyC,eAAgB1C,EAAc0C,iBAEjClB,GACGG,EAACgB,EAAAA,CACGC,yBAA0B5C,EAAcS,MAAMmC,yBAC9CC,kBAAmB7C,EAAcS,MAAMoC,kBACvCpB,OAAQzB,EAAcyB,OACtBqB,iBAAkBC,EAClBC,wBAAyB/C,MAMxCkB,GACGQ,EAACsB,EAAAA,CACGC,QAAAA,EACAC,QAAQ,OACRrB,QAAShB,KAAKsC,0BACdC,WAAYC,EACZC,UAAWD,EACXE,aAAc1C,KAAKC,MAAMC,2CACzByC,aAAcpC,GAEbf,EAAKoD,IAAI,wCAKtB/B,EAACC,MAAAA,CAAIV,UAAU,oCAAoCyC,eAAc1D,GAC7D0B,EAACC,MAAAA,CAAIV,UAAU,0CAA0C0C,GAAItC,EAAauC,OAAO5D,QAAa6D,GACzF3C,GACGQ,EAACoC,EAAAA,CACGH,GAAIvC,EACJ2C,KAAMlD,KAAKC,MAAMC,2CACjBiD,UAAWnD,KAAKoD,6BAChBC,SAAUrD,KAAKsC,4BAIvBzB,EAACyC,EAAAA,CAAqBC,uBAAwBrE,EAAeC,WAAYA,MAK7F,mBA9HJqE,SAAAC,GAUIC,OAAOzD,QAAQ,CACXC,4CAA4C,IAGhDwD,OAAOpB,4BAA4B,KAC/BtC,KAAK2D,SAAS,CAAEzD,4CAA6CF,KAAKC,MAAMC,+CAG5EwD,OAAON,+BAA+B,KAClCpD,KAAKL,MAAMyD,6BAA6BpD,KAAKL,MAAMT,eACnDc,KAAKsC,8BAGToB,OAAiBzC,wBAAwB,KACrC,MAAM2C,SAAEA,EAAQ1E,cAAEA,GAAkBc,KAAKL,MACzCiE,EAAS1E,MAxBbwE,EADE3E,EACqB8E,eAAe,CAClC3E,cAAe,KACfC,YAAY,EACZ2E,UAAU,EACVzE,WAAW,EACXa,4CAA4C,EAC5CX,iBAAiB"}

package/dist/es/components/PayTo/components/BSBInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import{useEffect as a,useRef as t}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../utils/useForm/useForm.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import n from"../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import l from"../../internal/FormFields/InputText.js";import{bsbValidationRules as b}from"./validate.js";import{phoneFormatters as m}from"../../internal/PhoneInput/validate.js";import u from"./PayToNameFields.js";const c=["bankAccountNumber","bsb","firstName","lastName"];function d({setComponentRef:d,defaultData:p,placeholders:f,onChange:N,setStatus:h,id:k}){const{i18n:F}=i(),g=o({schema:c,defaultData:p,rules:b,formatters:m}),{handleChangeFor:j,triggerValidation:A,data:B,errors:v,valid:C,isValid:M}=g;a(()=>{N({data:B,valid:C,errors:v,isValid:M})},[B,C,v,M]);const x=t({setStatus:h,showValidation:A});return a(()=>{d(x.current)},[d]),e(r,{id:k,classNameModifiers:["payto__bsb_input"],label:"BSB",description:"payto.bsb.description"},e(n,{label:F.get("payto.bsb.label.bankAccountNumber"),classNameModifiers:["col-60","bankAccountNumber"],errorMessage:s(F,v.bankAccountNumber,F.get("payto.bsb.label.bankAccountNumber")),name:"bankAccountNumber",i18n:F},e(l,{name:"bankAccountNumber",value:B.bankAccountNumber,onInput:j("bankAccountNumber","input"),onBlur:j("bankAccountNumber","blur"),placeholder:f?.bankAccountNumber,required:!0})),e(n,{label:F.get("Bank State Branch"),classNameModifiers:["col-40","bsb"],errorMessage:s(F,v.bsb,F.get("Bank State Branch")),name:"bsb",i18n:F},e(l,{name:"bsb",value:B.bsb,onInput:j("bsb","input"),onBlur:j("bsb","blur"),placeholder:f?.bsb,required:!0})),e(u,{i18n:F,data:B,handleChangeFor:j,errors:v,placeholders:f}))}export{d as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import{useEffect as t,useRef as a}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../utils/useForm/useFormWithA11y.js";import"../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import n from"../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import l from"../../internal/FormFields/InputText.js";import{bsbValidationRules as b}from"./validate.js";import{phoneFormatters as u}from"../../internal/PhoneInput/validate.js";import m from"./PayToNameFields.js";const c=["bankAccountNumber","bsb","firstName","lastName"];function d({setComponentRef:d,defaultData:p,placeholders:f,onChange:h,setStatus:F,id:N}){const{i18n:k}=i(),g=o({schema:c,defaultData:p,rules:b,formatters:u,formHolder:`#${N}`}),{handleChangeFor:A,triggerValidation:j,data:v,errors:B,valid:C,isValid:S}=g;t(()=>{h({data:v,valid:C,errors:B,isValid:S})},[v,C,B,S]);const y=a({setStatus:F,showValidation:j});return t(()=>{d(y.current)},[d]),e(r,{id:N,classNameModifiers:["payto__bsb_input"],label:"BSB",description:"payto.bsb.description"},e(n,{label:k.get("payto.bsb.label.bankAccountNumber"),classNameModifiers:["col-60","bankAccountNumber"],errorMessage:s(k,B.bankAccountNumber,k.get("payto.bsb.label.bankAccountNumber")),name:"bankAccountNumber",i18n:k,errorLive:!0},e(l,{name:"bankAccountNumber",value:v.bankAccountNumber,onInput:A("bankAccountNumber","input"),onBlur:A("bankAccountNumber","blur"),placeholder:f?.bankAccountNumber,required:!0})),e(n,{label:k.get("Bank State Branch"),classNameModifiers:["col-40","bsb"],errorMessage:s(k,B.bsb,k.get("Bank State Branch")),name:"bsb",i18n:k,errorLive:!0},e(l,{name:"bsb",value:v.bsb,onInput:A("bsb","input"),onBlur:A("bsb","blur"),placeholder:f?.bsb,required:!0})),e(m,{i18n:k,data:v,handleChangeFor:A,errors:B,placeholders:f}))}export{d as default};
 //# sourceMappingURL=BSBInput.js.map

package/dist/es/components/PayTo/components/BSBInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BSBInput.js","sources":["../../../../../src/components/PayTo/components/BSBInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { bsbValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface BSBFormData {\n    bsb: string;\n    bankAccountNumber: string;\n    firstName: string;\n    lastName: string;\n}\n\nexport interface BSBInputProps {\n    status: UIElementStatus;\n    setStatus: (status: UIElementStatus) => void;\n    defaultData: BSBFormData;\n    placeholders: PayToPlaceholdersType;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    id?: string;\n}\n\nconst BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];\n\nexport default function BSBInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<BSBInputProps>) {\n    const { i18n } = useCoreContext();\n\n    const form = useForm<BSBFormData>({\n        schema: BASE_SCHEMA,\n        defaultData: defaultData,\n        rules: bsbValidationRules,\n        formatters: phoneFormatters\n    });\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form;\n\n    // standard onChange propagate to parent state\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    const payToRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: triggerValidation\n    });\n\n    useEffect(() => {\n        setComponentRef(payToRef.current);\n    }, [setComponentRef]);\n\n    return (\n        <Fieldset id={id} classNameModifiers={['payto__bsb_input']} label={'BSB'} description={'payto.bsb.description'}>\n            <Field\n                label={i18n.get('payto.bsb.label.bankAccountNumber')}\n                classNameModifiers={['col-60', 'bankAccountNumber']}\n                errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))}\n                name={'bankAccountNumber'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'bankAccountNumber'}\n                    value={data.bankAccountNumber}\n                    onInput={handleChangeFor('bankAccountNumber', 'input')}\n                    onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n                    placeholder={placeholders?.bankAccountNumber}\n                    required={true}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('Bank State Branch')}\n                classNameModifiers={['col-40', 'bsb']}\n                errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('Bank State Branch'))}\n                name={'bsb'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'bsb'}\n                    value={data.bsb}\n                    onInput={handleChangeFor('bsb', 'input')}\n                    onBlur={handleChangeFor('bsb', 'blur')}\n                    placeholder={placeholders?.bsb}\n                    required={true}\n                />\n            </Field>\n\n            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n        </Fieldset>\n    );\n}\n"],"names":["BASE_SCHEMA","BSBInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useForm","schema","rules","bsbValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","Field","get","errorMessage","getErrorMessage","bankAccountNumber","name","InputText","value","onInput","onBlur","placeholder","required","bsb","PayToNameFields"],"mappings":"oqBAgCA,MAAMA,EAAc,CAAC,oBAAqB,MAAO,YAAa,YAE/C,SAASC,GAASC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAChG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAqB,CAC9BC,OAAQZ,EACRG,YAAaA,EACbU,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,GAAYZ,EAG7Ea,EAAU,KACNlB,EAAS,CAAEc,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAME,EAAWC,EAA4B,CACzCnB,UAAWA,EACXoB,eAAgBR,IAOpB,OAJAK,EAAU,KACNrB,EAAgBsB,EAASG,UAC1B,CAACzB,IAGA0B,EAACC,EAAAA,CAAStB,GAAIA,EAAIuB,mBAAoB,CAAC,oBAAqBC,MAAO,MAAOC,YAAa,yBACnFJ,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qCAChBJ,mBAAoB,CAAC,SAAU,qBAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOiB,kBAAmB7B,EAAK0B,IAAI,sCACvEI,KAAM,oBACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,oBACNE,MAAOrB,EAAKkB,kBACZI,QAASxB,EAAgB,oBAAqB,SAC9CyB,OAAQzB,EAAgB,oBAAqB,QAC7C0B,YAAavC,GAAciC,kBAC3BO,UAAU,KAIlBhB,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qBAChBJ,mBAAoB,CAAC,SAAU,OAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOyB,IAAKrC,EAAK0B,IAAI,sBACzDI,KAAM,MACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,MACNE,MAAOrB,EAAK0B,IACZJ,QAASxB,EAAgB,MAAO,SAChCyB,OAAQzB,EAAgB,MAAO,QAC/B0B,YAAavC,GAAcyC,IAC3BD,UAAU,KAIlBhB,EAACkB,EAAAA,CAAgBtC,KAAMA,EAAMW,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQhB,aAAcA,IAGrH"}
+{"version":3,"file":"BSBInput.js","sources":["../../../../../src/components/PayTo/components/BSBInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport { useEffect, useRef } from 'preact/hooks';\nimport { useFormWithA11y } from '../../../utils/useForm';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { bsbValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface BSBFormData {\n    bsb: string;\n    bankAccountNumber: string;\n    firstName: string;\n    lastName: string;\n}\n\nexport interface BSBInputProps {\n    status: UIElementStatus;\n    setStatus: (status: UIElementStatus) => void;\n    defaultData: BSBFormData;\n    placeholders: PayToPlaceholdersType;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    id?: string;\n}\n\nconst BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];\n\nexport default function BSBInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<BSBInputProps>) {\n    const { i18n } = useCoreContext();\n\n    const form = useFormWithA11y<BSBFormData>({\n        schema: BASE_SCHEMA,\n        defaultData: defaultData,\n        rules: bsbValidationRules,\n        formatters: phoneFormatters,\n        formHolder: `#${id}`\n    });\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form;\n\n    // standard onChange propagate to parent state\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    const payToRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: triggerValidation\n    });\n\n    useEffect(() => {\n        setComponentRef(payToRef.current);\n    }, [setComponentRef]);\n\n    return (\n        <Fieldset id={id} classNameModifiers={['payto__bsb_input']} label={'BSB'} description={'payto.bsb.description'}>\n            <Field\n                label={i18n.get('payto.bsb.label.bankAccountNumber')}\n                classNameModifiers={['col-60', 'bankAccountNumber']}\n                errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))}\n                name={'bankAccountNumber'}\n                i18n={i18n}\n                errorLive={true}\n            >\n                <InputText\n                    name={'bankAccountNumber'}\n                    value={data.bankAccountNumber}\n                    onInput={handleChangeFor('bankAccountNumber', 'input')}\n                    onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n                    placeholder={placeholders?.bankAccountNumber}\n                    required={true}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('Bank State Branch')}\n                classNameModifiers={['col-40', 'bsb']}\n                errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('Bank State Branch'))}\n                name={'bsb'}\n                i18n={i18n}\n                errorLive={true}\n            >\n                <InputText\n                    name={'bsb'}\n                    value={data.bsb}\n                    onInput={handleChangeFor('bsb', 'input')}\n                    onBlur={handleChangeFor('bsb', 'blur')}\n                    placeholder={placeholders?.bsb}\n                    required={true}\n                />\n            </Field>\n\n            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n        </Fieldset>\n    );\n}\n"],"names":["BASE_SCHEMA","BSBInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useFormWithA11y","schema","rules","bsbValidationRules","formatters","phoneFormatters","formHolder","handleChangeFor","triggerValidation","data","errors","valid","isValid","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","Field","get","errorMessage","getErrorMessage","bankAccountNumber","name","errorLive","InputText","value","onInput","onBlur","placeholder","required","bsb","PayToNameFields"],"mappings":"4uBAgCA,MAAMA,EAAc,CAAC,oBAAqB,MAAO,YAAa,YAE/C,SAASC,GAASC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAChG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAA6B,CACtCC,OAAQZ,EACRG,YAAaA,EACbU,MAAOC,EACPC,WAAYC,EACZC,WAAY,IAAIV,OAEdW,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,GAAYb,EAG7Ec,EAAU,KACNnB,EAAS,CAAEe,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAME,EAAWC,EAA4B,CACzCpB,UAAWA,EACXqB,eAAgBR,IAOpB,OAJAK,EAAU,KACNtB,EAAgBuB,EAASG,UAC1B,CAAC1B,IAGA2B,EAACC,EAAAA,CAASvB,GAAIA,EAAIwB,mBAAoB,CAAC,oBAAqBC,MAAO,MAAOC,YAAa,yBACnFJ,EAACK,EAAAA,CACGF,MAAOxB,EAAK2B,IAAI,qCAChBJ,mBAAoB,CAAC,SAAU,qBAC/BK,aAAcC,EAAgB7B,EAAMa,EAAOiB,kBAAmB9B,EAAK2B,IAAI,sCACvEI,KAAM,oBACN/B,KAAMA,EACNgC,WAAW,GAEXX,EAACY,EAAAA,CACGF,KAAM,oBACNG,MAAOtB,EAAKkB,kBACZK,QAASzB,EAAgB,oBAAqB,SAC9C0B,OAAQ1B,EAAgB,oBAAqB,QAC7C2B,YAAazC,GAAckC,kBAC3BQ,UAAU,KAIlBjB,EAACK,EAAAA,CACGF,MAAOxB,EAAK2B,IAAI,qBAChBJ,mBAAoB,CAAC,SAAU,OAC/BK,aAAcC,EAAgB7B,EAAMa,EAAO0B,IAAKvC,EAAK2B,IAAI,sBACzDI,KAAM,MACN/B,KAAMA,EACNgC,WAAW,GAEXX,EAACY,EAAAA,CACGF,KAAM,MACNG,MAAOtB,EAAK2B,IACZJ,QAASzB,EAAgB,MAAO,SAChC0B,OAAQ1B,EAAgB,MAAO,QAC/B2B,YAAazC,GAAc2C,IAC3BD,UAAU,KAIlBjB,EAACmB,EAAAA,CAAgBxC,KAAMA,EAAMY,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQjB,aAAcA,IAGrH"}

package/dist/es/components/PayTo/components/PayIDInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import i,{PayToIdentifierEnum as a}from"./IdentifierSelector.js";import{useEffect as t,useRef as o}from"../../../external/preact/hooks/dist/hooks.js";import l from"../../../utils/useForm/useForm.js";import s from"./PayToPhone.js";import n from"../../internal/FormFields/InputEmail.js";import{getErrorMessage as d}from"../../../utils/getErrorMessage.js";import m from"../../internal/FormFields/Field/Field.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import f from"../../internal/FormFields/InputText.js";import{payIdValidationRules as c}from"./validate.js";import{phoneFormatters as u}from"../../internal/PhoneInput/validate.js";import g from"./PayToNameFields.js";const h=["selectedIdentifier","firstName","lastName"],b={[a.email]:["email"],[a.phone]:["phoneNumber","phonePrefix"],[a.abn]:["abn"],[a.orgid]:["orgid"]};function I({setComponentRef:I,defaultData:F,placeholders:j,onChange:N,setStatus:y,id:M}){const{i18n:v}=p(),P=l({schema:h,defaultData:{selectedIdentifier:a.phone,...F},rules:c,formatters:u}),{handleChangeFor:x,triggerValidation:B,data:C,errors:E,valid:S,isValid:V,setSchema:q}=P;t(()=>{q([...b[C.selectedIdentifier],...h])},[C.selectedIdentifier]),t(()=>{N({data:C,valid:S,errors:E,isValid:V})},[C,S,E,V]);const A=o({setStatus:y,showValidation:B});return t(()=>{I(A.current)},[I]),e(r,{id:M,classNameModifiers:["payto__payid_input"],label:"PayID",description:"payto.payid.description"},e(i,{classNameModifiers:["col-40"],onSelectedIdentifier:x("selectedIdentifier"),selectedIdentifier:C.selectedIdentifier}),C.selectedIdentifier===a.phone&&e(s,{form:P}),C.selectedIdentifier===a.email&&e(m,{label:v.get("shopperEmail"),classNameModifiers:["col-60","email"],errorMessage:d(v,E.email,v.get("shopperEmail")),dir:"ltr",name:"email",i18n:v},e(n,{name:"email",value:C.email,onInput:x("email","input"),onBlur:x("email","blur"),placeholder:j?.email,required:!0})),C.selectedIdentifier===a.abn&&e(m,{label:v.get("ABN"),classNameModifiers:["col-60","abn"],errorMessage:d(v,E.abn,v.get("ABN")),name:"ABN",i18n:v},e(f,{name:"abn",value:C.abn,onInput:x("abn","input"),onBlur:x("abn","blur"),placeholder:j?.abn,required:!0})),C.selectedIdentifier===a.orgid&&e(m,{label:v.get("payto.payid.label.orgid"),classNameModifiers:["col-60","orgid"],errorMessage:d(v,E.orgid,v.get("payto.payid.label.orgid")),name:"orgid",i18n:v},e(f,{name:"orgid",value:C.orgid,onInput:x("orgid","input"),onBlur:x("orgid","blur"),placeholder:j?.orgid,required:!0})),e(g,{i18n:v,data:C,handleChangeFor:x,errors:E,placeholders:j}))}export{I as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import i,{PayToIdentifierEnum as a}from"./IdentifierSelector.js";import{useEffect as t,useRef as o}from"../../../external/preact/hooks/dist/hooks.js";import l from"../../../utils/useForm/useFormWithA11y.js";import"../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"./PayToPhone.js";import n from"../../internal/FormFields/InputEmail.js";import{getErrorMessage as d}from"../../../utils/getErrorMessage.js";import m from"../../internal/FormFields/Field/Field.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import f from"../../internal/FormFields/InputText.js";import{payIdValidationRules as c}from"./validate.js";import{phoneFormatters as u}from"../../internal/PhoneInput/validate.js";import g from"./PayToNameFields.js";const h=["selectedIdentifier","firstName","lastName"],b={[a.email]:["email"],[a.phone]:["phoneNumber","phonePrefix"],[a.abn]:["abn"],[a.orgid]:["orgid"]};function I({setComponentRef:I,defaultData:F,placeholders:j,onChange:y,setStatus:N,id:v}){const{i18n:M}=p(),C=l({schema:h,defaultData:{selectedIdentifier:a.phone,...F},rules:c,formatters:u,formHolder:`#${v}`}),{handleChangeFor:P,triggerValidation:S,data:x,errors:B,valid:E,isValid:A,setSchema:V}=C;t(()=>{V([...b[x.selectedIdentifier],...h])},[x.selectedIdentifier]),t(()=>{y({data:x,valid:E,errors:B,isValid:A})},[x,E,B,A]);const q=o({setStatus:N,showValidation:S});return t(()=>{I(q.current)},[I]),e(r,{id:v,classNameModifiers:["payto__payid_input"],label:"PayID",description:"payto.payid.description"},e(i,{classNameModifiers:["col-40"],onSelectedIdentifier:P("selectedIdentifier"),selectedIdentifier:x.selectedIdentifier}),x.selectedIdentifier===a.phone&&e(s,{form:C}),x.selectedIdentifier===a.email&&e(m,{label:M.get("shopperEmail"),classNameModifiers:["col-60","email"],errorMessage:d(M,B.email,M.get("shopperEmail")),dir:"ltr",name:"email",i18n:M,errorLive:!0},e(n,{name:"email",value:x.email,onInput:P("email","input"),onBlur:P("email","blur"),placeholder:j?.email,required:!0})),x.selectedIdentifier===a.abn&&e(m,{label:M.get("ABN"),classNameModifiers:["col-60","abn"],errorMessage:d(M,B.abn,M.get("ABN")),name:"ABN",i18n:M,errorLive:!0},e(f,{name:"abn",value:x.abn,onInput:P("abn","input"),onBlur:P("abn","blur"),placeholder:j?.abn,required:!0})),x.selectedIdentifier===a.orgid&&e(m,{label:M.get("payto.payid.label.orgid"),classNameModifiers:["col-60","orgid"],errorMessage:d(M,B.orgid,M.get("payto.payid.label.orgid")),name:"orgid",i18n:M,errorLive:!0},e(f,{name:"orgid",value:x.orgid,onInput:P("orgid","input"),onBlur:P("orgid","blur"),placeholder:j?.orgid,required:!0})),e(g,{i18n:M,data:x,handleChangeFor:P,errors:B,placeholders:j}))}export{I as default};
 //# sourceMappingURL=PayIDInput.js.map

package/dist/es/components/PayTo/components/PayIDInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n    email: string;\n    phone: string;\n    abn: string;\n    orgid: string;\n    firstName: string;\n    lastName: string;\n    phoneNumber?: string;\n    phonePrefix?: string;\n    selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n    status: UIElementStatus;\n    setStatus: (status: UIElementStatus) => void;\n    defaultData: PayIdFormData;\n    placeholders: PayToPlaceholdersType;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    id?: string;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n    [PayToIdentifierEnum.email]: ['email'],\n    [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n    [PayToIdentifierEnum.abn]: ['abn'],\n    [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<PayIDInputProps>) {\n    const { i18n } = useCoreContext();\n\n    const form = useForm<PayIdFormData>({\n        schema: BASE_SCHEMA,\n        defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n        rules: payIdValidationRules,\n        formatters: phoneFormatters\n    });\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n    // handle the changes of identifier, each identifier gets its own schema\n    useEffect(() => {\n        // get the correct schema for each identifier and merge it with the base\n        setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n    }, [data.selectedIdentifier]);\n\n    // standard onChange propagate to parent state\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    const payToRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: triggerValidation\n    });\n\n    useEffect(() => {\n        setComponentRef(payToRef.current);\n    }, [setComponentRef]);\n\n    return (\n        <Fieldset id={id} classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n            <IdentifierSelector\n                classNameModifiers={['col-40']}\n                onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n                selectedIdentifier={data.selectedIdentifier}\n            />\n            {data.selectedIdentifier === PayToIdentifierEnum.phone && <PayToPhone form={form} />}\n\n            {/* TODO probably worth refactoring this into  either re-usable components or builder */}\n            {data.selectedIdentifier === PayToIdentifierEnum.email && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['col-60', 'email']}\n                    errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n                    dir={'ltr'}\n                    name={'email'}\n                    i18n={i18n}\n                >\n                    <InputEmail\n                        name={'email'}\n                        value={data.email}\n                        onInput={handleChangeFor('email', 'input')}\n                        onBlur={handleChangeFor('email', 'blur')}\n                        placeholder={placeholders?.email}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n                <Field\n                    label={i18n.get('ABN')}\n                    classNameModifiers={['col-60', 'abn']}\n                    errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n                    name={'ABN'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={'abn'}\n                        value={data.abn}\n                        onInput={handleChangeFor('abn', 'input')}\n                        onBlur={handleChangeFor('abn', 'blur')}\n                        placeholder={placeholders?.abn}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n                <Field\n                    label={i18n.get('payto.payid.label.orgid')}\n                    classNameModifiers={['col-60', 'orgid']}\n                    errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n                    name={'orgid'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={'orgid'}\n                        value={data.orgid}\n                        onInput={handleChangeFor('orgid', 'input')}\n                        onBlur={handleChangeFor('orgid', 'blur')}\n                        placeholder={placeholders?.orgid}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n        </Fieldset>\n    );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useForm","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","InputEmail","value","onInput","onBlur","placeholder","required","InputText","PayToNameFields"],"mappings":"6zBAwCA,MAAMA,EAAc,CAAC,qBAAsB,YAAa,YAElDC,EAAoB,CACtB,CAACC,EAAoBC,OAAQ,CAAC,SAC9B,CAACD,EAAoBE,OAAQ,CAAC,cAAe,eAC7C,CAACF,EAAoBG,KAAM,CAAC,OAC5B,CAACH,EAAoBI,OAAQ,CAAC,UAGnB,SAASC,GAAWC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAClG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAuB,CAChCC,OAAQlB,EACRS,YAAa,CAAEU,mBAAoBjB,EAAoBE,SAAUK,GACjEW,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,UAAEA,GAAcd,EAGxFe,EAAU,KAEND,EAAU,IAAI7B,EAAkByB,EAAKP,uBAAwBnB,KAC9D,CAAC0B,EAAKP,qBAGTY,EAAU,KACNpB,EAAS,CAAEe,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAMG,EAAWC,EAA4B,CACzCrB,UAAWA,EACXsB,eAAgBT,IAOpB,OAJAM,EAAU,KACNvB,EAAgBwB,EAASG,UAC1B,CAAC3B,IAGA4B,EAACC,EAAAA,CAASxB,GAAIA,EAAIyB,mBAAoB,CAAC,sBAAuBC,MAAO,QAASC,YAAa,2BACvFJ,EAACK,EAAAA,CACGH,mBAAoB,CAAC,UACrBI,qBAAsBlB,EAAgB,sBACtCL,mBAAoBO,EAAKP,qBAE5BO,EAAKP,qBAAuBjB,EAAoBE,OAASgC,EAACO,EAAAA,CAAW3B,KAAMA,IAG3EU,EAAKP,qBAAuBjB,EAAoBC,OAC7CiC,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,gBAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOxB,MAAOW,EAAK+B,IAAI,iBAC3DG,IAAK,MACLC,KAAM,QACNnC,KAAMA,GAENsB,EAACc,EAAAA,CACGD,KAAM,QACNE,MAAOzB,EAAKvB,MACZiD,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,YAAa5C,GAAcP,MAC3BoD,UAAU,KAKrB7B,EAAKP,qBAAuBjB,EAAoBG,KAC7C+B,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,OAChBP,mBAAoB,CAAC,SAAU,OAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOtB,IAAKS,EAAK+B,IAAI,QACzDI,KAAM,MACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,MACNE,MAAOzB,EAAKrB,IACZ+C,QAAS5B,EAAgB,MAAO,SAChC6B,OAAQ7B,EAAgB,MAAO,QAC/B8B,YAAa5C,GAAcL,IAC3BkD,UAAU,KAKrB7B,EAAKP,qBAAuBjB,EAAoBI,OAC7C8B,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,2BAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOrB,MAAOQ,EAAK+B,IAAI,4BAC3DI,KAAM,QACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,QACNE,MAAOzB,EAAKpB,MACZ8C,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,YAAa5C,GAAcJ,MAC3BiD,UAAU,KAKtBnB,EAACqB,EAAAA,CAAgB3C,KAAMA,EAAMY,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQjB,aAAcA,IAGrH"}
+{"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport { useFormWithA11y } from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n    email: string;\n    phone: string;\n    abn: string;\n    orgid: string;\n    firstName: string;\n    lastName: string;\n    phoneNumber?: string;\n    phonePrefix?: string;\n    selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n    status: UIElementStatus;\n    setStatus: (status: UIElementStatus) => void;\n    defaultData: PayIdFormData;\n    placeholders: PayToPlaceholdersType;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    id?: string;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n    [PayToIdentifierEnum.email]: ['email'],\n    [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n    [PayToIdentifierEnum.abn]: ['abn'],\n    [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: Readonly<PayIDInputProps>) {\n    const { i18n } = useCoreContext();\n\n    const form = useFormWithA11y<PayIdFormData>({\n        schema: BASE_SCHEMA,\n        defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n        rules: payIdValidationRules,\n        formatters: phoneFormatters,\n        formHolder: `#${id}`\n    });\n    const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n    // handle the changes of identifier, each identifier gets its own schema\n    useEffect(() => {\n        // get the correct schema for each identifier and merge it with the base\n        setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n    }, [data.selectedIdentifier]);\n\n    // standard onChange propagate to parent state\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    const payToRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: triggerValidation\n    });\n\n    useEffect(() => {\n        setComponentRef(payToRef.current);\n    }, [setComponentRef]);\n\n    return (\n        <Fieldset id={id} classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n            <IdentifierSelector\n                classNameModifiers={['col-40']}\n                onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n                selectedIdentifier={data.selectedIdentifier}\n            />\n            {data.selectedIdentifier === PayToIdentifierEnum.phone && <PayToPhone form={form} />}\n\n            {/* TODO probably worth refactoring this into  either re-usable components or builder */}\n            {data.selectedIdentifier === PayToIdentifierEnum.email && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['col-60', 'email']}\n                    errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n                    dir={'ltr'}\n                    name={'email'}\n                    i18n={i18n}\n                    errorLive={true}\n                >\n                    <InputEmail\n                        name={'email'}\n                        value={data.email}\n                        onInput={handleChangeFor('email', 'input')}\n                        onBlur={handleChangeFor('email', 'blur')}\n                        placeholder={placeholders?.email}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n                <Field\n                    label={i18n.get('ABN')}\n                    classNameModifiers={['col-60', 'abn']}\n                    errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n                    name={'ABN'}\n                    i18n={i18n}\n                    errorLive={true}\n                >\n                    <InputText\n                        name={'abn'}\n                        value={data.abn}\n                        onInput={handleChangeFor('abn', 'input')}\n                        onBlur={handleChangeFor('abn', 'blur')}\n                        placeholder={placeholders?.abn}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n                <Field\n                    label={i18n.get('payto.payid.label.orgid')}\n                    classNameModifiers={['col-60', 'orgid']}\n                    errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n                    name={'orgid'}\n                    i18n={i18n}\n                    errorLive={true}\n                >\n                    <InputText\n                        name={'orgid'}\n                        value={data.orgid}\n                        onInput={handleChangeFor('orgid', 'input')}\n                        onBlur={handleChangeFor('orgid', 'blur')}\n                        placeholder={placeholders?.orgid}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n        </Fieldset>\n    );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useFormWithA11y","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","formHolder","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","errorLive","InputEmail","value","onInput","onBlur","placeholder","required","InputText","PayToNameFields"],"mappings":"q4BAwCA,MAAMA,EAAc,CAAC,qBAAsB,YAAa,YAElDC,EAAoB,CACtB,CAACC,EAAoBC,OAAQ,CAAC,SAC9B,CAACD,EAAoBE,OAAQ,CAAC,cAAe,eAC7C,CAACF,EAAoBG,KAAM,CAAC,OAC5B,CAACH,EAAoBI,OAAQ,CAAC,UAGnB,SAASC,GAAWC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAClG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAA+B,CACxCC,OAAQlB,EACRS,YAAa,CAAEU,mBAAoBjB,EAAoBE,SAAUK,GACjEW,MAAOC,EACPC,WAAYC,EACZC,WAAY,IAAIX,OAEdY,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,UAAEA,GAAcf,EAGxFgB,EAAU,KAEND,EAAU,IAAI9B,EAAkB0B,EAAKR,uBAAwBnB,KAC9D,CAAC2B,EAAKR,qBAGTa,EAAU,KACNrB,EAAS,CAAEgB,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAMG,EAAWC,EAA4B,CACzCtB,UAAWA,EACXuB,eAAgBT,IAOpB,OAJAM,EAAU,KACNxB,EAAgByB,EAASG,UAC1B,CAAC5B,IAGA6B,EAACC,EAAAA,CAASzB,GAAIA,EAAI0B,mBAAoB,CAAC,sBAAuBC,MAAO,QAASC,YAAa,2BACvFJ,EAACK,EAAAA,CACGH,mBAAoB,CAAC,UACrBI,qBAAsBlB,EAAgB,sBACtCN,mBAAoBQ,EAAKR,qBAE5BQ,EAAKR,qBAAuBjB,EAAoBE,OAASiC,EAACO,EAAAA,CAAW5B,KAAMA,IAG3EW,EAAKR,qBAAuBjB,EAAoBC,OAC7CkC,EAACQ,EAAAA,CACGL,MAAO1B,EAAKgC,IAAI,gBAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBlC,EAAMc,EAAOzB,MAAOW,EAAKgC,IAAI,iBAC3DG,IAAK,MACLC,KAAM,QACNpC,KAAMA,EACNqC,WAAW,GAEXd,EAACe,EAAAA,CACGF,KAAM,QACNG,MAAO1B,EAAKxB,MACZmD,QAAS7B,EAAgB,QAAS,SAClC8B,OAAQ9B,EAAgB,QAAS,QACjC+B,YAAa9C,GAAcP,MAC3BsD,UAAU,KAKrB9B,EAAKR,qBAAuBjB,EAAoBG,KAC7CgC,EAACQ,EAAAA,CACGL,MAAO1B,EAAKgC,IAAI,OAChBP,mBAAoB,CAAC,SAAU,OAC/BQ,aAAcC,EAAgBlC,EAAMc,EAAOvB,IAAKS,EAAKgC,IAAI,QACzDI,KAAM,MACNpC,KAAMA,EACNqC,WAAW,GAEXd,EAACqB,EAAAA,CACGR,KAAM,MACNG,MAAO1B,EAAKtB,IACZiD,QAAS7B,EAAgB,MAAO,SAChC8B,OAAQ9B,EAAgB,MAAO,QAC/B+B,YAAa9C,GAAcL,IAC3BoD,UAAU,KAKrB9B,EAAKR,qBAAuBjB,EAAoBI,OAC7C+B,EAACQ,EAAAA,CACGL,MAAO1B,EAAKgC,IAAI,2BAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBlC,EAAMc,EAAOtB,MAAOQ,EAAKgC,IAAI,4BAC3DI,KAAM,QACNpC,KAAMA,EACNqC,WAAW,GAEXd,EAACqB,EAAAA,CACGR,KAAM,QACNG,MAAO1B,EAAKrB,MACZgD,QAAS7B,EAAgB,QAAS,SAClC8B,OAAQ9B,EAAgB,QAAS,QACjC+B,YAAa9C,GAAcJ,MAC3BmD,UAAU,KAKtBpB,EAACsB,EAAAA,CAAgB7C,KAAMA,EAAMa,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQlB,aAAcA,IAGrH"}

package/dist/es/components/PayTo/components/PayToComponent.js

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import{SegmentedControl as e}from"../../internal/SegmentedControl/SegmentedControl.js";import{useState as o,useMemo as a}from"../../../external/preact/hooks/dist/hooks.js";import n from"./PayIDInput.js";import s from"./BSBInput.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import i from"../../../_virtual/index.js";import{getUniqueId as p}from"../../../utils/idGenerator.js";function l(l){const{i18n:d}=r(),[u,m]=o("ready"),c=a(()=>p("payid-input"),[]),f=a(()=>p("bsb-input"),[]),b=a(()=>[{value:"payid-option",label:"PayID",id:"payid-option",controls:c},{value:"bsb-option",label:d.get("payto.bsb.option.label"),id:"bsb-option",controls:f}],[d,c,f]),y=b[0].value,[h,C]=o(y),g=({data:t,valid:e,errors:o,isValid:a})=>{l.onChange({data:{selectedInput:h,...t},valid:e,errors:o,isValid:a})};return t("div",{className:i({"adyen-checkout__payto-component":!0,"adyen-checkout__payto-component--loading":"loading"===u})},t(e,{selectedValue:h,options:b,onChange:C}),"payid-option"===h&&t(n,{id:c,status:u,setStatus:m,setComponentRef:l.setComponentRef,onChange:g,defaultData:l.data,placeholders:l.placeholders}),"bsb-option"===h&&t(s,{id:f,status:u,setStatus:m,setComponentRef:l.setComponentRef,onChange:g,defaultData:l.data,placeholders:l.placeholders}),l.showPayButton&&l.payButton({status:u,label:d.get("continue")}))}export{l as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{SegmentedControl as t}from"../../internal/SegmentedControl/SegmentedControl.js";import{SegmentedControlRegion as o}from"../../internal/SegmentedControl/SegmentedControlRegion.js";import{useState as a,useMemo as n}from"../../../external/preact/hooks/dist/hooks.js";import s from"./PayIDInput.js";import i from"./BSBInput.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import l from"../../../_virtual/index.js";import{getUniqueId as p}from"../../../utils/idGenerator.js";function d(d){const{i18n:m}=r(),[u,c]=a("ready"),b=n(()=>p("payid-panel"),[]),y=n(()=>p("bsb-panel"),[]),f=n(()=>p("payid-input"),[]),C=n(()=>p("bsb-input"),[]),g=n(()=>[{value:"payid-option",label:"PayID",id:"payid-option",controls:b},{value:"bsb-option",label:m.get("payto.bsb.option.label"),id:"bsb-option",controls:y}],[m,b,y]),h=g[0].value,[j,v]=a(h),S=({data:e,valid:t,errors:o,isValid:a})=>{d.onChange({data:{selectedInput:j,...e},valid:t,errors:o,isValid:a})};return e("div",{className:l({"adyen-checkout__payto-component":!0,"adyen-checkout__payto-component--loading":"loading"===u})},e(t,{selectedValue:j,options:g,onChange:v}),"payid-option"===j&&e(o,{id:b,ariaLabelledBy:"payid-option"},e(s,{id:f,status:u,setStatus:c,setComponentRef:d.setComponentRef,onChange:S,defaultData:d.data,placeholders:d.placeholders})),"bsb-option"===j&&e(o,{id:y,ariaLabelledBy:"bsb-option"},e(i,{id:C,status:u,setStatus:c,setComponentRef:d.setComponentRef,onChange:S,defaultData:d.data,placeholders:d.placeholders})),d.showPayButton&&d.payButton({status:u,label:m.get("continue")}))}export{d as default};
 //# sourceMappingURL=PayToComponent.js.map

package/dist/es/components/PayTo/components/PayToComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayToComponent.js","sources":["../../../../../src/components/PayTo/components/PayToComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { SegmentedControl } from '../../internal/SegmentedControl';\nimport { useMemo, useState } from 'preact/hooks';\nimport { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';\nimport PayIDInput from './PayIDInput';\nimport BSBInput from './BSBInput';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport { PayToData, PayToPlaceholdersType } from '../types';\nimport { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport classNames from 'classnames';\nimport { getUniqueId } from '../../../utils/idGenerator';\nimport './PayToComponent.scss';\n\nexport type PayToInputOption = 'payid-option' | 'bsb-option';\n\nexport type PayToComponentData = { selectedInput: PayToInputOption };\n\nexport interface PayToComponentProps {\n    showPayButton: boolean;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    data: PayToData;\n    placeholders: PayToPlaceholdersType;\n    payButton: (props: PayButtonProps) => h.JSX.Element;\n}\n\nexport default function PayToComponent(props: Readonly<PayToComponentProps>) {\n    const { i18n } = useCoreContext();\n\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n\n    // Generate unique IDs for the input sections\n    const payidInputId = useMemo(() => getUniqueId('payid-input'), []);\n    const bsbInputId = useMemo(() => getUniqueId('bsb-input'), []);\n\n    const inputOptions: SegmentedControlOptions<PayToInputOption> = useMemo(\n        () => [\n            {\n                value: 'payid-option',\n                label: 'PayID',\n                id: 'payid-option',\n                controls: payidInputId\n            },\n            {\n                value: 'bsb-option',\n                label: i18n.get('payto.bsb.option.label'),\n                id: 'bsb-option',\n                controls: bsbInputId\n            }\n        ],\n        [i18n, payidInputId, bsbInputId]\n    );\n\n    const defaultOption = inputOptions[0].value;\n    const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);\n\n    const onChange = ({ data, valid, errors, isValid }) => {\n        // merge selected input to as data, this keep the input layers untouched\n        props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid });\n    };\n\n    return (\n        <div\n            className={classNames({\n                'adyen-checkout__payto-component': true,\n                'adyen-checkout__payto-component--loading': status === 'loading'\n            })}\n        >\n            <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />\n            {selectedInput === 'payid-option' && (\n                <PayIDInput\n                    id={payidInputId}\n                    status={status}\n                    setStatus={setStatus}\n                    setComponentRef={props.setComponentRef}\n                    onChange={onChange}\n                    defaultData={props.data}\n                    placeholders={props.placeholders}\n                />\n            )}\n            {selectedInput === 'bsb-option' && (\n                <BSBInput\n                    id={bsbInputId}\n                    status={status}\n                    setStatus={setStatus}\n                    setComponentRef={props.setComponentRef}\n                    onChange={onChange}\n                    defaultData={props.data}\n                    placeholders={props.placeholders}\n                />\n            )}\n\n            {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}\n        </div>\n    );\n}\n"],"names":["PayToComponent","props","i18n","useCoreContext","status","setStatus","useState","payidInputId","useMemo","getUniqueId","bsbInputId","inputOptions","value","label","id","controls","get","defaultOption","selectedInput","setSelectedInput","onChange","data","valid","errors","isValid","h","div","className","classNames","SegmentedControl","selectedValue","options","PayIDInput","setComponentRef","defaultData","placeholders","BSBInput","showPayButton","payButton"],"mappings":"6dA2Be,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,KAEVC,EAAQC,GAAaC,EAA0B,SAGhDC,EAAeC,EAAQ,IAAMC,EAAY,eAAgB,IACzDC,EAAaF,EAAQ,IAAMC,EAAY,aAAc,IAErDE,EAA0DH,EAC5D,IAAM,CACF,CACII,MAAO,eACPC,MAAO,QACPC,GAAI,eACJC,SAAUR,GAEd,CACIK,MAAO,aACPC,MAAOX,EAAKc,IAAI,0BAChBF,GAAI,aACJC,SAAUL,IAGlB,CAACR,EAAMK,EAAcG,IAGnBO,EAAgBN,EAAa,GAAGC,OAC/BM,EAAeC,GAAoBb,EAA2BW,GAE/DG,EAAW,EAAGC,OAAMC,QAAOC,SAAQC,cAErCvB,EAAMmB,SAAS,CAAEC,KAAM,CAAEH,cAAeA,KAAkBG,GAAQC,QAAOC,SAAQC,aAGrF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,CAClB,mCAAmC,EACnC,2CAAuD,YAAXxB,KAGhDqB,EAACI,EAAAA,CAAiBC,cAAeZ,EAAea,QAASpB,EAAcS,SAAUD,IAC9D,iBAAlBD,GACGO,EAACO,EAAAA,CACGlB,GAAIP,EACJH,OAAQA,EACRC,UAAWA,EACX4B,gBAAiBhC,EAAMgC,gBACvBb,SAAUA,EACVc,YAAajC,EAAMoB,KACnBc,aAAclC,EAAMkC,eAGT,eAAlBjB,GACGO,EAACW,EAAAA,CACGtB,GAAIJ,EACJN,OAAQA,EACRC,UAAWA,EACX4B,gBAAiBhC,EAAMgC,gBACvBb,SAAUA,EACVc,YAAajC,EAAMoB,KACnBc,aAAclC,EAAMkC,eAI3BlC,EAAMoC,eAAiBpC,EAAMqC,UAAU,CAAElC,SAAQS,MAAOX,EAAKc,IAAI,cAG9E"}
+{"version":3,"file":"PayToComponent.js","sources":["../../../../../src/components/PayTo/components/PayToComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { SegmentedControl, SegmentedControlRegion } from '../../internal/SegmentedControl';\nimport { useMemo, useState } from 'preact/hooks';\nimport { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';\nimport PayIDInput from './PayIDInput';\nimport BSBInput from './BSBInput';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport { PayToData, PayToPlaceholdersType } from '../types';\nimport { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport classNames from 'classnames';\nimport { getUniqueId } from '../../../utils/idGenerator';\nimport './PayToComponent.scss';\n\nexport type PayToInputOption = 'payid-option' | 'bsb-option';\n\nexport type PayToComponentData = { selectedInput: PayToInputOption };\n\nexport interface PayToComponentProps {\n    showPayButton: boolean;\n    onChange: (e) => void;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    data: PayToData;\n    placeholders: PayToPlaceholdersType;\n    payButton: (props: PayButtonProps) => h.JSX.Element;\n}\n\nexport default function PayToComponent(props: Readonly<PayToComponentProps>) {\n    const { i18n } = useCoreContext();\n\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n\n    // Generate unique IDs for the tab panels and input sections\n    const payidPanelId = useMemo(() => getUniqueId('payid-panel'), []);\n    const bsbPanelId = useMemo(() => getUniqueId('bsb-panel'), []);\n    const payidInputId = useMemo(() => getUniqueId('payid-input'), []);\n    const bsbInputId = useMemo(() => getUniqueId('bsb-input'), []);\n\n    const inputOptions: SegmentedControlOptions<PayToInputOption> = useMemo(\n        () => [\n            {\n                value: 'payid-option',\n                label: 'PayID',\n                id: 'payid-option',\n                controls: payidPanelId\n            },\n            {\n                value: 'bsb-option',\n                label: i18n.get('payto.bsb.option.label'),\n                id: 'bsb-option',\n                controls: bsbPanelId\n            }\n        ],\n        [i18n, payidPanelId, bsbPanelId]\n    );\n\n    const defaultOption = inputOptions[0].value;\n    const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);\n\n    const onChange = ({ data, valid, errors, isValid }) => {\n        // merge selected input to as data, this keep the input layers untouched\n        props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid });\n    };\n\n    return (\n        <div\n            className={classNames({\n                'adyen-checkout__payto-component': true,\n                'adyen-checkout__payto-component--loading': status === 'loading'\n            })}\n        >\n            <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />\n            {selectedInput === 'payid-option' && (\n                <SegmentedControlRegion id={payidPanelId} ariaLabelledBy=\"payid-option\">\n                    <PayIDInput\n                        id={payidInputId}\n                        status={status}\n                        setStatus={setStatus}\n                        setComponentRef={props.setComponentRef}\n                        onChange={onChange}\n                        defaultData={props.data}\n                        placeholders={props.placeholders}\n                    />\n                </SegmentedControlRegion>\n            )}\n            {selectedInput === 'bsb-option' && (\n                <SegmentedControlRegion id={bsbPanelId} ariaLabelledBy=\"bsb-option\">\n                    <BSBInput\n                        id={bsbInputId}\n                        status={status}\n                        setStatus={setStatus}\n                        setComponentRef={props.setComponentRef}\n                        onChange={onChange}\n                        defaultData={props.data}\n                        placeholders={props.placeholders}\n                    />\n                </SegmentedControlRegion>\n            )}\n\n            {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}\n        </div>\n    );\n}\n"],"names":["PayToComponent","props","i18n","useCoreContext","status","setStatus","useState","payidPanelId","useMemo","getUniqueId","bsbPanelId","payidInputId","bsbInputId","inputOptions","value","label","id","controls","get","defaultOption","selectedInput","setSelectedInput","onChange","data","valid","errors","isValid","h","div","className","classNames","SegmentedControl","selectedValue","options","SegmentedControlRegion","ariaLabelledBy","PayIDInput","setComponentRef","defaultData","placeholders","BSBInput","showPayButton","payButton"],"mappings":"gkBA2Be,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,KAEVC,EAAQC,GAAaC,EAA0B,SAGhDC,EAAeC,EAAQ,IAAMC,EAAY,eAAgB,IACzDC,EAAaF,EAAQ,IAAMC,EAAY,aAAc,IACrDE,EAAeH,EAAQ,IAAMC,EAAY,eAAgB,IACzDG,EAAaJ,EAAQ,IAAMC,EAAY,aAAc,IAErDI,EAA0DL,EAC5D,IAAM,CACF,CACIM,MAAO,eACPC,MAAO,QACPC,GAAI,eACJC,SAAUV,GAEd,CACIO,MAAO,aACPC,MAAOb,EAAKgB,IAAI,0BAChBF,GAAI,aACJC,SAAUP,IAGlB,CAACR,EAAMK,EAAcG,IAGnBS,EAAgBN,EAAa,GAAGC,OAC/BM,EAAeC,GAAoBf,EAA2Ba,GAE/DG,EAAW,EAAGC,OAAMC,QAAOC,SAAQC,cAErCzB,EAAMqB,SAAS,CAAEC,KAAM,CAAEH,cAAeA,KAAkBG,GAAQC,QAAOC,SAAQC,aAGrF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,CAClB,mCAAmC,EACnC,2CAAuD,YAAX1B,KAGhDuB,EAACI,EAAAA,CAAiBC,cAAeZ,EAAea,QAASpB,EAAcS,SAAUD,IAC9D,iBAAlBD,GACGO,EAACO,EAAAA,CAAuBlB,GAAIT,EAAc4B,eAAe,gBACrDR,EAACS,EAAAA,CACGpB,GAAIL,EACJP,OAAQA,EACRC,UAAWA,EACXgC,gBAAiBpC,EAAMoC,gBACvBf,SAAUA,EACVgB,YAAarC,EAAMsB,KACnBgB,aAActC,EAAMsC,gBAIb,eAAlBnB,GACGO,EAACO,EAAAA,CAAuBlB,GAAIN,EAAYyB,eAAe,cACnDR,EAACa,EAAAA,CACGxB,GAAIJ,EACJR,OAAQA,EACRC,UAAWA,EACXgC,gBAAiBpC,EAAMoC,gBACvBf,SAAUA,EACVgB,YAAarC,EAAMsB,KACnBgB,aAActC,EAAMsC,gBAK/BtC,EAAMwC,eAAiBxC,EAAMyC,UAAU,CAAEtC,SAAQW,MAAOb,EAAKgB,IAAI,cAG9E"}

package/dist/es/components/PayTo/components/PayToNameFields.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as a}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Field/Field.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import t from"../../internal/FormFields/InputText.js";function l({i18n:l,errors:m,data:i,handleChangeFor:o,placeholders:n}){return e(a,null,e(r,{label:l.get("payto.label.firstName"),classNameModifiers:["col-50","firstName"],errorMessage:s(l,m.firstName,l.get("firstName")),name:"firstName",i18n:l},e(t,{name:"firstName",value:i.firstName,classNameModifiers:["firstName"],onInput:o("firstName","input"),onBlur:o("firstName","input"),placeholder:n?.firstName,spellcheck:!1,required:!0})),e(r,{label:l.get("payto.label.lastName"),classNameModifiers:["col-50","lastName"],errorMessage:s(l,m.lastName,l.get("lastName")),name:"lastName",i18n:l},e(t,{name:"lastName",value:i.lastName,classNameModifiers:["lastName"],onInput:o("lastName","input"),onBlur:o("lastName","blur"),placeholder:n?.lastName,spellcheck:!1,required:!0})))}export{l as default};
+import{createElement as e,Fragment as a}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Field/Field.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import t from"../../internal/FormFields/InputText.js";function l({i18n:l,errors:i,data:m,handleChangeFor:o,placeholders:n}){return e(a,null,e(r,{label:l.get("payto.label.firstName"),classNameModifiers:["col-50","firstName"],errorMessage:s(l,i.firstName,l.get("firstName")),name:"firstName",i18n:l,errorLive:!0},e(t,{name:"firstName",value:m.firstName,classNameModifiers:["firstName"],onInput:o("firstName","input"),onBlur:o("firstName","input"),placeholder:n?.firstName,spellcheck:!1,required:!0})),e(r,{label:l.get("payto.label.lastName"),classNameModifiers:["col-50","lastName"],errorMessage:s(l,i.lastName,l.get("lastName")),name:"lastName",i18n:l,errorLive:!0},e(t,{name:"lastName",value:m.lastName,classNameModifiers:["lastName"],onInput:o("lastName","input"),onBlur:o("lastName","blur"),placeholder:n?.lastName,spellcheck:!1,required:!0})))}export{l as default};
 //# sourceMappingURL=PayToNameFields.js.map

package/dist/es/components/PayTo/components/PayToNameFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayToNameFields.js","sources":["../../../../../src/components/PayTo/components/PayToNameFields.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport InputText from '../../internal/FormFields/InputText';\nimport Language from '../../../language';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface PayToNameFieldsProps {\n    i18n: Language;\n    errors: {\n        [key: string]: ValidationRuleResult;\n    };\n    data: {\n        firstName: string;\n        lastName: string;\n    };\n    handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => void;\n    placeholders: {\n        firstName: string;\n        lastName: string;\n    };\n}\n\nexport default function PayToNameFields({ i18n, errors, data, handleChangeFor, placeholders }: Readonly<PayToNameFieldsProps>) {\n    return (\n        <Fragment>\n            <Field\n                label={i18n.get('payto.label.firstName')}\n                classNameModifiers={['col-50', 'firstName']}\n                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                name={'firstName'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'firstName'}\n                    value={data.firstName}\n                    classNameModifiers={['firstName']}\n                    onInput={handleChangeFor('firstName', 'input')}\n                    onBlur={handleChangeFor('firstName', 'input')}\n                    placeholder={placeholders?.firstName}\n                    spellcheck={false}\n                    required={true}\n                />\n            </Field>\n            <Field\n                label={i18n.get('payto.label.lastName')}\n                classNameModifiers={['col-50', 'lastName']}\n                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                name={'lastName'}\n                i18n={i18n}\n            >\n                <InputText\n                    name={'lastName'}\n                    value={data.lastName}\n                    classNameModifiers={['lastName']}\n                    onInput={handleChangeFor('lastName', 'input')}\n                    onBlur={handleChangeFor('lastName', 'blur')}\n                    placeholder={placeholders?.lastName}\n                    spellcheck={false}\n                    required={true}\n                />\n            </Field>\n        </Fragment>\n    );\n}\n"],"names":["PayToNameFields","i18n","errors","data","handleChangeFor","placeholders","h","Fragment","Field","label","get","classNameModifiers","errorMessage","getErrorMessage","firstName","name","InputText","value","onInput","onBlur","placeholder","spellcheck","required","lastName"],"mappings":"wQAwBe,SAASA,GAAgBC,KAAEA,EAAIC,OAAEA,EAAMC,KAAEA,EAAIC,gBAAEA,EAAeC,aAAEA,IAC3E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,yBAChBC,mBAAoB,CAAC,SAAU,aAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOY,UAAWb,EAAKS,IAAI,cAC/DK,KAAM,YACNd,KAAMA,GAENK,EAACU,EAAAA,CACGD,KAAM,YACNE,MAAOd,EAAKW,UACZH,mBAAoB,CAAC,aACrBO,QAASd,EAAgB,YAAa,SACtCe,OAAQf,EAAgB,YAAa,SACrCgB,YAAaf,GAAcS,UAC3BO,YAAY,EACZC,UAAU,KAGlBhB,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,wBAChBC,mBAAoB,CAAC,SAAU,YAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOqB,SAAUtB,EAAKS,IAAI,aAC9DK,KAAM,WACNd,KAAMA,GAENK,EAACU,EAAAA,CACGD,KAAM,WACNE,MAAOd,EAAKoB,SACZZ,mBAAoB,CAAC,YACrBO,QAASd,EAAgB,WAAY,SACrCe,OAAQf,EAAgB,WAAY,QACpCgB,YAAaf,GAAckB,SAC3BF,YAAY,EACZC,UAAU,KAK9B"}
+{"version":3,"file":"PayToNameFields.js","sources":["../../../../../src/components/PayTo/components/PayToNameFields.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport InputText from '../../internal/FormFields/InputText';\nimport Language from '../../../language';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface PayToNameFieldsProps {\n    i18n: Language;\n    errors: {\n        [key: string]: ValidationRuleResult;\n    };\n    data: {\n        firstName: string;\n        lastName: string;\n    };\n    handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => void;\n    placeholders: {\n        firstName: string;\n        lastName: string;\n    };\n}\n\nexport default function PayToNameFields({ i18n, errors, data, handleChangeFor, placeholders }: Readonly<PayToNameFieldsProps>) {\n    return (\n        <Fragment>\n            <Field\n                label={i18n.get('payto.label.firstName')}\n                classNameModifiers={['col-50', 'firstName']}\n                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                name={'firstName'}\n                i18n={i18n}\n                errorLive={true}\n            >\n                <InputText\n                    name={'firstName'}\n                    value={data.firstName}\n                    classNameModifiers={['firstName']}\n                    onInput={handleChangeFor('firstName', 'input')}\n                    onBlur={handleChangeFor('firstName', 'input')}\n                    placeholder={placeholders?.firstName}\n                    spellcheck={false}\n                    required={true}\n                />\n            </Field>\n            <Field\n                label={i18n.get('payto.label.lastName')}\n                classNameModifiers={['col-50', 'lastName']}\n                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                name={'lastName'}\n                i18n={i18n}\n                errorLive={true}\n            >\n                <InputText\n                    name={'lastName'}\n                    value={data.lastName}\n                    classNameModifiers={['lastName']}\n                    onInput={handleChangeFor('lastName', 'input')}\n                    onBlur={handleChangeFor('lastName', 'blur')}\n                    placeholder={placeholders?.lastName}\n                    spellcheck={false}\n                    required={true}\n                />\n            </Field>\n        </Fragment>\n    );\n}\n"],"names":["PayToNameFields","i18n","errors","data","handleChangeFor","placeholders","h","Fragment","Field","label","get","classNameModifiers","errorMessage","getErrorMessage","firstName","name","errorLive","InputText","value","onInput","onBlur","placeholder","spellcheck","required","lastName"],"mappings":"wQAwBe,SAASA,GAAgBC,KAAEA,EAAIC,OAAEA,EAAMC,KAAEA,EAAIC,gBAAEA,EAAeC,aAAEA,IAC3E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,yBAChBC,mBAAoB,CAAC,SAAU,aAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOY,UAAWb,EAAKS,IAAI,cAC/DK,KAAM,YACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,YACNG,MAAOf,EAAKW,UACZH,mBAAoB,CAAC,aACrBQ,QAASf,EAAgB,YAAa,SACtCgB,OAAQhB,EAAgB,YAAa,SACrCiB,YAAahB,GAAcS,UAC3BQ,YAAY,EACZC,UAAU,KAGlBjB,EAACE,EAAAA,CACGC,MAAOR,EAAKS,IAAI,wBAChBC,mBAAoB,CAAC,SAAU,YAC/BC,aAAcC,EAAgBZ,EAAMC,EAAOsB,SAAUvB,EAAKS,IAAI,aAC9DK,KAAM,WACNd,KAAMA,EACNe,WAAW,GAEXV,EAACW,EAAAA,CACGF,KAAM,WACNG,MAAOf,EAAKqB,SACZb,mBAAoB,CAAC,YACrBQ,QAASf,EAAgB,WAAY,SACrCgB,OAAQhB,EAAgB,WAAY,QACpCiB,YAAahB,GAAcmB,SAC3BF,YAAY,EACZC,UAAU,KAK9B"}

package/dist/es/components/PayTo/components/PayToPhone.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import o from"../../internal/PhoneInput/PhoneInputFields.js";import{getErrorMessage as t}from"../../../utils/getErrorMessage.js";import{useCallback as s}from"../../../external/preact/hooks/dist/hooks.js";const m=[{id:"+61",name:"+61 (AU)",selectedOptionName:"+61"}];function n({form:n}){const{i18n:i}=r(),a=s(e=>t(i,n.errors[e]),[i,n]);return e(o,{phoneNumberKey:"mobileNumber",getError:a,items:m,canSelectPrefix:!1,showNumber:!0,showPrefix:!0,form:n})}export{n as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import o from"../../internal/PhoneInput/PhoneInputFields.js";import{getErrorMessage as t}from"../../../utils/getErrorMessage.js";import{useCallback as s}from"../../../external/preact/hooks/dist/hooks.js";const i=[{id:"+61",name:"+61 (AU)",selectedOptionName:"+61"}];function m({form:m}){const{i18n:n}=r(),a=s(e=>t(n,m.errors[e]),[n,m]);return e(o,{phoneNumberKey:"mobileNumber",getError:a,items:i,canSelectPrefix:!1,showNumber:!0,showPrefix:!0,form:m,errorLive:!0})}export{m as default};
 //# sourceMappingURL=PayToPhone.js.map

package/dist/es/components/PayTo/components/PayToPhone.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayToPhone.js","sources":["../../../../../src/components/PayTo/components/PayToPhone.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport PhoneInputFields from '../../internal/PhoneInput/PhoneInputFields';\nimport { Form } from '../../../utils/useForm/types';\nimport { PayIdFormData } from './PayIDInput';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { useCallback } from 'preact/hooks';\n\ninterface PayToPhoneProps {\n    form: Form<PayIdFormData>;\n}\n\n// we have decided to hardcode phone prefix as it's going to be always +61 for now\nconst AUSTRALIAN_PHONE_PREFIXES = [\n    {\n        id: '+61',\n        name: '+61 (AU)',\n        selectedOptionName: '+61'\n    }\n];\n\nexport default function PayToPhone({ form }: Readonly<PayToPhoneProps>) {\n    const { i18n } = useCoreContext();\n\n    const getError = useCallback((field: string) => getErrorMessage(i18n, form.errors[field]), [i18n, form]);\n\n    return (\n        <PhoneInputFields\n            phoneNumberKey={'mobileNumber'}\n            getError={getError}\n            items={AUSTRALIAN_PHONE_PREFIXES}\n            canSelectPrefix={false}\n            showNumber={true}\n            showPrefix={true}\n            form={form}\n        />\n    );\n}\n"],"names":["AUSTRALIAN_PHONE_PREFIXES","id","name","selectedOptionName","PayToPhone","form","i18n","useCoreContext","getError","useCallback","field","getErrorMessage","errors","h","PhoneInputFields","phoneNumberKey","items","canSelectPrefix","showNumber","showPrefix"],"mappings":"2VAaA,MAAMA,EAA4B,CAC9B,CACIC,GAAI,MACJC,KAAM,WACNC,mBAAoB,QAIb,SAASC,GAAWC,KAAEA,IACjC,MAAMC,KAAEA,GAASC,IAEXC,EAAWC,EAAaC,GAAkBC,EAAgBL,EAAMD,EAAKO,OAAOF,IAAS,CAACJ,EAAMD,IAElG,OACIQ,EAACC,EAAAA,CACGC,eAAgB,eAChBP,SAAUA,EACVQ,MAAOhB,EACPiB,iBAAiB,EACjBC,YAAY,EACZC,YAAY,EACZd,KAAMA,GAGlB"}
+{"version":3,"file":"PayToPhone.js","sources":["../../../../../src/components/PayTo/components/PayToPhone.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport PhoneInputFields from '../../internal/PhoneInput/PhoneInputFields';\nimport { Form } from '../../../utils/useForm/types';\nimport { PayIdFormData } from './PayIDInput';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { useCallback } from 'preact/hooks';\n\ninterface PayToPhoneProps {\n    form: Form<PayIdFormData>;\n}\n\n// we have decided to hardcode phone prefix as it's going to be always +61 for now\nconst AUSTRALIAN_PHONE_PREFIXES = [\n    {\n        id: '+61',\n        name: '+61 (AU)',\n        selectedOptionName: '+61'\n    }\n];\n\nexport default function PayToPhone({ form }: Readonly<PayToPhoneProps>) {\n    const { i18n } = useCoreContext();\n\n    const getError = useCallback((field: string) => getErrorMessage(i18n, form.errors[field]), [i18n, form]);\n\n    return (\n        <PhoneInputFields\n            phoneNumberKey={'mobileNumber'}\n            getError={getError}\n            items={AUSTRALIAN_PHONE_PREFIXES}\n            canSelectPrefix={false}\n            showNumber={true}\n            showPrefix={true}\n            form={form}\n            errorLive={true}\n        />\n    );\n}\n"],"names":["AUSTRALIAN_PHONE_PREFIXES","id","name","selectedOptionName","PayToPhone","form","i18n","useCoreContext","getError","useCallback","field","getErrorMessage","errors","h","PhoneInputFields","phoneNumberKey","items","canSelectPrefix","showNumber","showPrefix","errorLive"],"mappings":"2VAaA,MAAMA,EAA4B,CAC9B,CACIC,GAAI,MACJC,KAAM,WACNC,mBAAoB,QAIb,SAASC,GAAWC,KAAEA,IACjC,MAAMC,KAAEA,GAASC,IAEXC,EAAWC,EAAaC,GAAkBC,EAAgBL,EAAMD,EAAKO,OAAOF,IAAS,CAACJ,EAAMD,IAElG,OACIQ,EAACC,EAAAA,CACGC,eAAgB,eAChBP,SAAUA,EACVQ,MAAOhB,EACPiB,iBAAiB,EACjBC,YAAY,EACZC,YAAY,EACZd,KAAMA,EACNe,WAAW,GAGvB"}

package/dist/es/components/Pix/components/PixInput/PixInput.js

@@ -1,2 +1,2 @@
-import{createElement as a}from"../../../../external/preact/dist/preact.js";import{useEffect as e,useState as t}from"../../../../external/preact/hooks/dist/hooks.js";import{pixValidationRules as r}from"./validate.js";import{pixFormatters as s}from"./utils.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";import i from"../../../../utils/useForm/useForm.js";import{BrazilPersonalDetail as l}from"../../../internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js";function n({name:n,data:d,personalDetailsRequired:m,showPayButton:u,onChange:c,payButton:f}){const{i18n:p}=o(),h=["firstName","lastName","socialSecurityNumber"],{handleChangeFor:y,triggerValidation:j,setSchema:g,data:v,valid:N,errors:S,isValid:x}=i({schema:h,defaultData:d,rules:r,formatters:s});e(()=>{const a=m?[...h]:[];g(a)},[m]);const[C,B]=t("ready");this.setStatus=B,this.showValidation=()=>{j()},e(()=>{c({data:v,valid:N,errors:S,isValid:x})},[c,v,N,S]);const F=m?[]:["standalone"];return a("div",{className:"adyen-checkout__pix-input__field",style:u||m?null:{display:"none"}},m&&a(l,{i18n:p,data:v,handleChangeFor:y,errors:S,valid:N}),u&&f({status:C,label:`${p.get("continueTo")} ${n}`,classNameModifiers:F}))}export{n as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useEffect as t,useState as a}from"../../../../external/preact/hooks/dist/hooks.js";import{pixValidationRules as r}from"./validate.js";import{pixFormatters as s}from"./utils.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import o from"../../../../utils/useForm/useForm.js";import"../../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import{BrazilPersonalDetail as l}from"../../../internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js";function n({name:n,data:d,personalDetailsRequired:m,showPayButton:u,onChange:c,payButton:p}){const{i18n:f}=i(),h=["firstName","lastName","socialSecurityNumber"],{handleChangeFor:j,triggerValidation:y,setSchema:S,data:g,valid:v,errors:C,isValid:F}=o({schema:h,defaultData:d,rules:r,formatters:s});t(()=>{const e=m?[...h]:[];S(e)},[m]);const[N,x]=a("ready");this.setStatus=x,this.showValidation=()=>{y()},t(()=>{c({data:g,valid:v,errors:C,isValid:F})},[c,g,v,C]);const b=m?[]:["standalone"];return e("div",{className:"adyen-checkout__pix-input__field",style:u||m?null:{display:"none"}},m&&e(l,{i18n:f,data:g,handleChangeFor:j,errors:C,valid:v}),u&&p({status:N,label:`${f.get("continueTo")} ${n}`,classNameModifiers:b}))}export{n as default};
 //# sourceMappingURL=PixInput.js.map

package/dist/es/components/Pix/components/PixInput/PixInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PixInput.js","sources":["../../../../../../src/components/Pix/components/PixInput/PixInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useState } from 'preact/hooks';\nimport { pixValidationRules } from './validate';\nimport { pixFormatters } from './utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useForm from '../../../../utils/useForm';\nimport { BrazilPersonalDetail } from '../../../internal/SocialSecurityNumberBrazil/BrazilPersonalDetail';\nimport { PixInputDataState, PixInputProps } from './types';\n\nfunction PixInput({ name, data: dataProps, personalDetailsRequired, showPayButton, onChange, payButton }: Readonly<PixInputProps>) {\n    const { i18n } = useCoreContext();\n    const formSchema = ['firstName', 'lastName', 'socialSecurityNumber'];\n\n    const { handleChangeFor, triggerValidation, setSchema, data, valid, errors, isValid } = useForm<PixInputDataState>({\n        schema: formSchema,\n        defaultData: dataProps,\n        rules: pixValidationRules,\n        formatters: pixFormatters\n    });\n\n    // Handle form schema updates\n    useEffect(() => {\n        const newSchema = personalDetailsRequired ? [...formSchema] : [];\n        setSchema(newSchema);\n    }, [personalDetailsRequired]);\n\n    const [status, setStatus] = useState('ready');\n    this.setStatus = setStatus;\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [onChange, data, valid, errors]);\n\n    const buttonModifiers = !personalDetailsRequired ? ['standalone'] : [];\n\n    return (\n        <div className=\"adyen-checkout__pix-input__field\" style={!showPayButton && !personalDetailsRequired ? { display: 'none' } : null}>\n            {personalDetailsRequired && (\n                <BrazilPersonalDetail i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} valid={valid} />\n            )}\n\n            {showPayButton &&\n                payButton({\n                    status,\n                    label: `${i18n.get('continueTo')} ${name}`,\n                    classNameModifiers: buttonModifiers\n                })}\n        </div>\n    );\n}\n\nexport default PixInput;\n"],"names":["PixInput","name","data","dataProps","personalDetailsRequired","showPayButton","onChange","payButton","i18n","useCoreContext","formSchema","handleChangeFor","triggerValidation","setSchema","valid","errors","isValid","useForm","schema","defaultData","rules","pixValidationRules","formatters","pixFormatters","useEffect","newSchema","status","setStatus","useState","this","showValidation","buttonModifiers","h","div","className","style","display","BrazilPersonalDetail","label","get","classNameModifiers"],"mappings":"6eASA,SAASA,GAASC,KAAEA,EAAMC,KAAMC,EAASC,wBAAEA,EAAuBC,cAAEA,EAAaC,SAAEA,EAAQC,UAAEA,IACzF,MAAMC,KAAEA,GAASC,IACXC,EAAa,CAAC,YAAa,WAAY,yBAEvCC,gBAAEA,EAAeC,kBAAEA,EAAiBC,UAAEA,EAASX,KAAEA,EAAIY,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA2B,CAC/GC,OAAQR,EACRS,YAAahB,EACbiB,MAAOC,EACPC,WAAYC,IAIhBC,EAAU,KACN,MAAMC,EAAYrB,EAA0B,IAAIM,GAAc,GAC9DG,EAAUY,IACX,CAACrB,IAEJ,MAAOsB,EAAQC,GAAaC,EAAS,SACrCC,KAAKF,UAAYA,EAEjBE,KAAKC,eAAiB,KAClBlB,KAGJY,EAAU,KACNlB,EAAS,CAAEJ,OAAMY,QAAOC,SAAQC,aACjC,CAACV,EAAUJ,EAAMY,EAAOC,IAE3B,MAAMgB,EAAmB3B,EAA2C,GAAjB,CAAC,cAEpD,OACI4B,EAACC,MAAAA,CAAIC,UAAU,mCAAmCC,MAAQ9B,GAAkBD,EAAgD,KAAtB,CAAEgC,QAAS,SAC5GhC,GACG4B,EAACK,EAAAA,CAAqB7B,KAAMA,EAAMN,KAAMA,EAAMS,gBAAiBA,EAAiBI,OAAQA,EAAQD,MAAOA,IAG1GT,GACGE,EAAU,CACNmB,SACAY,MAAO,GAAG9B,EAAK+B,IAAI,iBAAiBtC,IACpCuC,mBAAoBT,IAIxC"}
+{"version":3,"file":"PixInput.js","sources":["../../../../../../src/components/Pix/components/PixInput/PixInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useState } from 'preact/hooks';\nimport { pixValidationRules } from './validate';\nimport { pixFormatters } from './utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useForm from '../../../../utils/useForm';\nimport { BrazilPersonalDetail } from '../../../internal/SocialSecurityNumberBrazil/BrazilPersonalDetail';\nimport { PixInputDataState, PixInputProps } from './types';\n\nfunction PixInput({ name, data: dataProps, personalDetailsRequired, showPayButton, onChange, payButton }: Readonly<PixInputProps>) {\n    const { i18n } = useCoreContext();\n    const formSchema = ['firstName', 'lastName', 'socialSecurityNumber'];\n\n    const { handleChangeFor, triggerValidation, setSchema, data, valid, errors, isValid } = useForm<PixInputDataState>({\n        schema: formSchema,\n        defaultData: dataProps,\n        rules: pixValidationRules,\n        formatters: pixFormatters\n    });\n\n    // Handle form schema updates\n    useEffect(() => {\n        const newSchema = personalDetailsRequired ? [...formSchema] : [];\n        setSchema(newSchema);\n    }, [personalDetailsRequired]);\n\n    const [status, setStatus] = useState('ready');\n    this.setStatus = setStatus;\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    useEffect(() => {\n        onChange({ data, valid, errors, isValid });\n    }, [onChange, data, valid, errors]);\n\n    const buttonModifiers = !personalDetailsRequired ? ['standalone'] : [];\n\n    return (\n        <div className=\"adyen-checkout__pix-input__field\" style={!showPayButton && !personalDetailsRequired ? { display: 'none' } : null}>\n            {personalDetailsRequired && (\n                <BrazilPersonalDetail i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} valid={valid} />\n            )}\n\n            {showPayButton &&\n                payButton({\n                    status,\n                    label: `${i18n.get('continueTo')} ${name}`,\n                    classNameModifiers: buttonModifiers\n                })}\n        </div>\n    );\n}\n\nexport default PixInput;\n"],"names":["PixInput","name","data","dataProps","personalDetailsRequired","showPayButton","onChange","payButton","i18n","useCoreContext","formSchema","handleChangeFor","triggerValidation","setSchema","valid","errors","isValid","useForm","schema","defaultData","rules","pixValidationRules","formatters","pixFormatters","useEffect","newSchema","status","setStatus","useState","this","showValidation","buttonModifiers","h","div","className","style","display","BrazilPersonalDetail","label","get","classNameModifiers"],"mappings":"gjBASA,SAASA,GAASC,KAAEA,EAAMC,KAAMC,EAASC,wBAAEA,EAAuBC,cAAEA,EAAaC,SAAEA,EAAQC,UAAEA,IACzF,MAAMC,KAAEA,GAASC,IACXC,EAAa,CAAC,YAAa,WAAY,yBAEvCC,gBAAEA,EAAeC,kBAAEA,EAAiBC,UAAEA,EAASX,KAAEA,EAAIY,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA2B,CAC/GC,OAAQR,EACRS,YAAahB,EACbiB,MAAOC,EACPC,WAAYC,IAIhBC,EAAU,KACN,MAAMC,EAAYrB,EAA0B,IAAIM,GAAc,GAC9DG,EAAUY,IACX,CAACrB,IAEJ,MAAOsB,EAAQC,GAAaC,EAAS,SACrCC,KAAKF,UAAYA,EAEjBE,KAAKC,eAAiB,KAClBlB,KAGJY,EAAU,KACNlB,EAAS,CAAEJ,OAAMY,QAAOC,SAAQC,aACjC,CAACV,EAAUJ,EAAMY,EAAOC,IAE3B,MAAMgB,EAAmB3B,EAA2C,GAAjB,CAAC,cAEpD,OACI4B,EAACC,MAAAA,CAAIC,UAAU,mCAAmCC,MAAQ9B,GAAkBD,EAAgD,KAAtB,CAAEgC,QAAS,SAC5GhC,GACG4B,EAACK,EAAAA,CAAqB7B,KAAMA,EAAMN,KAAMA,EAAMS,gBAAiBA,EAAiBI,OAAQA,EAAQD,MAAOA,IAG1GT,GACGE,EAAU,CACNmB,SACAY,MAAO,GAAG9B,EAAK+B,IAAI,iBAAiBtC,IACpCuC,mBAAoBT,IAIxC"}

package/dist/es/components/PreAuthorizedDebitCanada/components/PreAuthorizedDebitCanadaComponent.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useRef as t,useEffect as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../internal/FormInstruction/FormInstruction.js";import i from"../../../utils/useForm/useForm.js";import s from"../../internal/FormFields/Field/Field.js";import u from"../../internal/FormFields/InputText.js";import{preAuthorizedDebitCanadaValidationRules as d,preAuthorizedDebitCanadaFormatters as m}from"./validate.js";import c from"../../internal/StoreDetails/StoreDetails.js";import b from"../../../core/Context/useImage.js";import{SettlementInfo as p}from"./SettlementInfo.js";function k({onChange:k,payButton:f,showPayButton:N,placeholders:g,setComponentRef:x,enableStoreDetails:h,showContextualElement:C=!0}){const I=b(),{i18n:w}=o(),[F,j]=a("ready"),{handleChangeFor:M,triggerValidation:A,data:L,errors:v,valid:V,isValid:T}=i({schema:["ownerName","bankAccountNumber","bankCode","bankLocationId"],rules:d,formatters:m}),[y,B]=a(!1),E="loading"===F,S=t({setStatus:j,showValidation:()=>{A()}});return n(()=>{x(S.current)},[x,S.current]),n(()=>{k({data:L,valid:V,errors:v,isValid:T,storePaymentMethod:y})},[k,L,V,v,T,y]),e("div",{className:"adyen-checkout__eftpad-canada"},e(l,null),e(r,null,e(s,{label:w.get("eftpad-canada.input.accountHolderName.label"),errorMessage:!!v.ownerName&&w.get(v.ownerName.errorMessage),isValid:!!V.ownerName,name:"ownerName"},e(u,{disabled:E,name:"ownerName",placeholder:g?.ownerName,value:L.ownerName,onInput:M("ownerName","input"),onBlur:M("ownerName","blur"),required:!0,"data-testid":"owner-name"})),e(s,{label:w.get("eftpad-canada.input.accountNumber.label"),errorMessage:!!v.bankAccountNumber&&w.get(v.bankAccountNumber.errorMessage),name:"bankAccountNumber",isValid:!!V.bankAccountNumber,showContextualElement:C,contextualText:w.get("eftpad-canada.input.accountNumber.contextualText")},e(u,{disabled:E,name:"bankAccountNumber",placeholder:g?.bankAccountNumber,value:L.bankAccountNumber,onInput:M("bankAccountNumber","input"),onBlur:M("bankAccountNumber","blur"),required:!0,maxlength:12})),e(s,{label:w.get("eftpad-canada.input.institutionNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankCode&&w.get(v.bankCode.errorMessage),isValid:!!V.bankCode,name:"bankCode",showContextualElement:C,contextualText:w.get("eftpad-canada.input.institutionNumber.contextualText")},e(u,{disabled:E,name:"bankCode",placeholder:g?.bankCode,value:L.bankCode,onInput:M("bankCode","input"),onBlur:M("bankCode","blur"),required:!0,maxlength:3})),e(s,{label:w.get("eftpad-canada.input.transitNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankLocationId&&w.get(v.bankLocationId.errorMessage),name:"bankLocationId",isValid:!!V.bankLocationId,showContextualElement:C,contextualText:w.get("eftpad-canada.input.transitNumber.contextualText")},e(u,{disabled:E,name:"bankLocationId",placeholder:g?.bankLocationId,value:L.bankLocationId,onInput:M("bankLocationId","input"),onBlur:M("bankLocationId","blur"),required:!0,maxlength:5}))),h&&e(c,{className:"adyen-checkout_eftpad-canada-store-details",disabled:E,onChange:B}),e(p,null),N&&f({status:F,icon:I({imageFolder:"components/"})("bento_lock")}))}export{k as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useRef as t,useEffect as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../internal/FormInstruction/FormInstruction.js";import i from"../../../utils/useForm/useForm.js";import"../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"../../internal/FormFields/Field/Field.js";import u from"../../internal/FormFields/InputText.js";import{preAuthorizedDebitCanadaValidationRules as d,preAuthorizedDebitCanadaFormatters as m}from"./validate.js";import c from"../../internal/StoreDetails/StoreDetails.js";import b from"../../../core/Context/useImage.js";import{SettlementInfo as p}from"./SettlementInfo.js";function k({onChange:k,payButton:f,showPayButton:g,placeholders:N,setComponentRef:x,enableStoreDetails:h,showContextualElement:C=!0}){const I=b(),{i18n:F}=o(),[w,j]=a("ready"),{handleChangeFor:A,triggerValidation:M,data:L,errors:v,valid:S,isValid:V}=i({schema:["ownerName","bankAccountNumber","bankCode","bankLocationId"],rules:d,formatters:m}),[T,y]=a(!1),B="loading"===w,E=t({setStatus:j,showValidation:()=>{M()}});return n(()=>{x(E.current)},[x,E.current]),n(()=>{k({data:L,valid:S,errors:v,isValid:V,storePaymentMethod:T})},[k,L,S,v,V,T]),e("div",{className:"adyen-checkout__eftpad-canada"},e(l,null),e(r,null,e(s,{label:F.get("eftpad-canada.input.accountHolderName.label"),errorMessage:!!v.ownerName&&F.get(v.ownerName.errorMessage),isValid:!!S.ownerName,name:"ownerName"},e(u,{disabled:B,name:"ownerName",placeholder:N?.ownerName,value:L.ownerName,onInput:A("ownerName","input"),onBlur:A("ownerName","blur"),required:!0,"data-testid":"owner-name"})),e(s,{label:F.get("eftpad-canada.input.accountNumber.label"),errorMessage:!!v.bankAccountNumber&&F.get(v.bankAccountNumber.errorMessage),name:"bankAccountNumber",isValid:!!S.bankAccountNumber,showContextualElement:C,contextualText:F.get("eftpad-canada.input.accountNumber.contextualText")},e(u,{disabled:B,name:"bankAccountNumber",placeholder:N?.bankAccountNumber,value:L.bankAccountNumber,onInput:A("bankAccountNumber","input"),onBlur:A("bankAccountNumber","blur"),required:!0,maxlength:12})),e(s,{label:F.get("eftpad-canada.input.institutionNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankCode&&F.get(v.bankCode.errorMessage),isValid:!!S.bankCode,name:"bankCode",showContextualElement:C,contextualText:F.get("eftpad-canada.input.institutionNumber.contextualText")},e(u,{disabled:B,name:"bankCode",placeholder:N?.bankCode,value:L.bankCode,onInput:A("bankCode","input"),onBlur:A("bankCode","blur"),required:!0,maxlength:3})),e(s,{label:F.get("eftpad-canada.input.transitNumber.label"),classNameModifiers:["col-50"],errorMessage:!!v.bankLocationId&&F.get(v.bankLocationId.errorMessage),name:"bankLocationId",isValid:!!S.bankLocationId,showContextualElement:C,contextualText:F.get("eftpad-canada.input.transitNumber.contextualText")},e(u,{disabled:B,name:"bankLocationId",placeholder:N?.bankLocationId,value:L.bankLocationId,onInput:A("bankLocationId","input"),onBlur:A("bankLocationId","blur"),required:!0,maxlength:5}))),h&&e(c,{className:"adyen-checkout_eftpad-canada-store-details",disabled:B,onChange:y}),e(p,null),g&&f({status:w,icon:I({imageFolder:"components/"})("bento_lock")}))}export{k as default};
 //# sourceMappingURL=PreAuthorizedDebitCanadaComponent.js.map