@adyen/adyen-web 6.36.0 → 6.38.0

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

@@ -1 +1 @@
-{"version":3,"file":"UPI.js","sources":["../../../../src/components/UPI/UPI.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport UPIComponent from './components/UPIComponent';\nimport { Await } from '../internal/Await';\nimport { QRLoader } from '../internal/QRLoader';\nimport { UPIAppList, UPIConfiguration, UpiMode, UpiPaymentData, UpiType } from './types';\nimport { TxVariants } from '../tx-variants';\nimport isMobile from '../../utils/isMobile';\nimport { UPI_COUNTDOWN_TIME, UPI_MODE } from './constants';\nimport { PaymentMethodBrand } from '../../types/global-types';\nimport { ICore } from '../../types';\n\n/**\n * For mobile:\n * We should show upi_intent depending on if `apps` are returned in /paymentMethods response.\n *\n * For non-mobile:\n * We should never show the upi_intent (ignore `apps` in /paymentMethods response)\n * Show upi_qr as default\n */\n\nclass UPI extends UIElement<UPIConfiguration> {\n    public static readonly type = TxVariants.upi;\n    public static readonly txVariants = [TxVariants.upi, TxVariants.upi_qr, TxVariants.upi_intent];\n    private readonly mode: UpiMode;\n    private readonly appsList: UPIAppList;\n\n    protected static readonly defaultProps = {\n        showPaymentMethodItemImages: true,\n        countdownTime: UPI_COUNTDOWN_TIME\n    };\n\n    constructor(checkout: ICore, props: UPIConfiguration) {\n        super(checkout, props);\n        const { apps = [] } = this.props;\n        const hasIntentApps = apps.length > 0;\n\n        this.mode = isMobile() && hasIntentApps ? UPI_MODE.INTENT : UPI_MODE.QR_CODE;\n\n        this.appsList = apps.map(app => {\n            const imageName = `upi/${app.id.toLowerCase()}`;\n            const brandIcon = this.core.modules.resources?.getImage()(imageName);\n            return { id: app.id, name: app.name, icon: brandIcon };\n        });\n    }\n\n    protected formatProps(props: UPIConfiguration): UPIConfiguration {\n        return {\n            showOtherInsteadOfNumber: !isMobile(),\n            ...props\n        };\n    }\n\n    public get isValid(): boolean {\n        return this.state.isValid;\n    }\n\n    public formatData(): UpiPaymentData {\n        const { app } = this.state.data || {};\n\n        return {\n            paymentMethod: {\n                type: this.paymentType,\n                ...(this.paymentType === TxVariants.upi_intent && app?.id && { appId: app.id })\n            }\n        };\n    }\n\n    get brands(): PaymentMethodBrand[] {\n        const { showPaymentMethodItemImages } = this.props;\n\n        if (!showPaymentMethodItemImages) {\n            return [];\n        }\n\n        return this.appsList.map(app => ({ icon: app.icon, name: app.name }));\n    }\n\n    get paymentType(): UpiType {\n        if (this.mode === UPI_MODE.QR_CODE) {\n            return TxVariants.upi_qr;\n        }\n        return TxVariants.upi_intent;\n    }\n\n    protected override componentToRender(): h.JSX.Element {\n        const { type, url, paymentMethodType } = this.props;\n\n        const isAutoPay = !!this.props.mandate;\n\n        switch (type) {\n            case 'qrCode':\n                return (\n                    <QRLoader\n                        {...this.props}\n                        qrCodeData={this.props.qrCodeData ? encodeURIComponent(this.props.qrCodeData) : null}\n                        type={TxVariants.upi_qr}\n                        brandLogo={this.props.brandLogo || this.icon}\n                        onComplete={this.onComplete}\n                        introduction={this.props.i18n.get('upi.qrCodeWaitingMessage')}\n                        countdownTime={this.props.countdownTime}\n                        onActionHandled={this.onActionHandled}\n                        showAmount={!isAutoPay}\n                    />\n                );\n            case 'await':\n                return (\n                    <Await\n                        url={url}\n                        type={paymentMethodType}\n                        showCountdownTimer\n                        shouldRedirectAutomatically\n                        showAmount={!isAutoPay}\n                        countdownTime={this.props.countdownTime}\n                        clientKey={this.props.clientKey}\n                        paymentData={this.props.paymentData}\n                        onActionHandled={this.onActionHandled}\n                        onError={this.props.onError}\n                        messageText={this.props.i18n.get('upi.vpaWaitingMessage')}\n                        awaitText={this.props.i18n.get('await.waitForConfirmation')}\n                        onComplete={this.onComplete}\n                        brandLogo={this.icon}\n                    />\n                );\n            default:\n                return (\n                    <UPIComponent\n                        setComponentRef={this.setComponentRef}\n                        payButton={this.payButton}\n                        onChange={this.setState}\n                        appsList={this.appsList}\n                        mode={this.mode}\n                        showPayButton={this.props.showPayButton}\n                        mandate={this.props.mandate}\n                    />\n                );\n        }\n    }\n}\n\nexport default UPI;\n"],"names":["UPI","UIElement","formatProps","props","showOtherInsteadOfNumber","isMobile","isValid","this","state","formatData","app","data","paymentMethod","type","paymentType","TxVariants","upi_intent","id","appId","brands","showPaymentMethodItemImages","appsList","map","icon","name","mode","UPI_MODE","QR_CODE","upi_qr","componentToRender","url","paymentMethodType","isAutoPay","mandate","h","QRLoader","qrCodeData","encodeURIComponent","brandLogo","onComplete","introduction","i18n","get","countdownTime","onActionHandled","showAmount","Await","showCountdownTimer","shouldRedirectAutomatically","clientKey","paymentData","onError","messageText","awaitText","UPIComponent","setComponentRef","payButton","onChange","setState","showPayButton","constructor","checkout","super","_define_property","apps","hasIntentApps","length","INTENT","imageName","toLowerCase","brandIcon","core","modules","resources","getImage","upi","txVariants","defaultProps","UPI_COUNTDOWN_TIME"],"mappings":"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"}
+{"version":3,"file":"UPI.js","sources":["../../../../src/components/UPI/UPI.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport UPIComponent from './components/UPIComponent';\nimport { Await } from '../internal/Await';\nimport { QRLoader } from '../internal/QRLoader';\nimport { UPIAppList, UPIConfiguration, UpiMode, UpiPaymentData, UpiType } from './types';\nimport { TxVariants } from '../tx-variants';\nimport isMobile from '../../utils/isMobile';\nimport { UPI_COUNTDOWN_TIME, UPI_MODE } from './constants';\nimport { PaymentMethodBrand } from '../../types/global-types';\nimport { ICore } from '../../types';\n\n/**\n * For mobile:\n * We should show upi_intent depending on if `apps` are returned in /paymentMethods response.\n *\n * For non-mobile:\n * We should never show the upi_intent (ignore `apps` in /paymentMethods response)\n * Show upi_qr as default\n */\n\nclass UPI extends UIElement<UPIConfiguration> {\n    public static readonly type = TxVariants.upi;\n    public static readonly txVariants = [TxVariants.upi, TxVariants.upi_qr, TxVariants.upi_intent];\n    private readonly mode: UpiMode;\n    private readonly appsList: UPIAppList;\n\n    protected static readonly defaultProps = {\n        showPaymentMethodItemImages: true,\n        countdownTime: UPI_COUNTDOWN_TIME\n    };\n\n    constructor(checkout: ICore, props: UPIConfiguration) {\n        super(checkout, props);\n        const { apps = [] } = this.props;\n        const hasIntentApps = apps.length > 0;\n\n        this.mode = isMobile() && hasIntentApps ? UPI_MODE.INTENT : UPI_MODE.QR_CODE;\n\n        this.appsList = apps.map(app => {\n            const imageName = `upi/${app.id.toLowerCase()}`;\n            const brandIcon = this.core.modules.resources?.getImage()(imageName) ?? '';\n            return { id: app.id, name: app.name, icon: brandIcon };\n        });\n    }\n\n    protected formatProps(props: UPIConfiguration): UPIConfiguration {\n        return {\n            showOtherInsteadOfNumber: !isMobile(),\n            ...props\n        };\n    }\n\n    public get isValid(): boolean {\n        return this.state.isValid;\n    }\n\n    public formatData(): UpiPaymentData {\n        const { app } = this.state.data || {};\n\n        return {\n            paymentMethod: {\n                type: this.paymentType,\n                ...(this.paymentType === TxVariants.upi_intent && app?.id && { appId: app.id })\n            }\n        };\n    }\n\n    get brands(): PaymentMethodBrand[] {\n        const { showPaymentMethodItemImages } = this.props;\n\n        if (!showPaymentMethodItemImages) {\n            return [];\n        }\n\n        return this.appsList.map(app => ({ icon: app.icon, name: app.name }));\n    }\n\n    get paymentType(): UpiType {\n        if (this.mode === UPI_MODE.QR_CODE) {\n            return TxVariants.upi_qr;\n        }\n        return TxVariants.upi_intent;\n    }\n\n    protected override componentToRender(): h.JSX.Element {\n        const { type, url, paymentMethodType } = this.props;\n\n        const isAutoPay = !!this.props.mandate;\n\n        switch (type) {\n            case 'qrCode':\n                return (\n                    <QRLoader\n                        {...this.props}\n                        qrCodeData={this.props.qrCodeData ? encodeURIComponent(this.props.qrCodeData) : undefined}\n                        type={TxVariants.upi_qr}\n                        brandLogo={this.props.brandLogo || this.icon}\n                        onComplete={this.onComplete}\n                        introduction={this.props.i18n?.get('upi.qrCodeWaitingMessage') ?? ''}\n                        countdownTime={this.props.countdownTime}\n                        onActionHandled={this.onActionHandled}\n                        showAmount={!isAutoPay}\n                    />\n                );\n            case 'await':\n                return (\n                    <Await\n                        url={url}\n                        type={paymentMethodType ?? ''}\n                        showCountdownTimer\n                        shouldRedirectAutomatically\n                        showAmount={!isAutoPay}\n                        countdownTime={this.props.countdownTime}\n                        clientKey={this.props.clientKey ?? ''}\n                        paymentData={this.props.paymentData}\n                        onActionHandled={this.onActionHandled}\n                        onError={this.props.onError}\n                        messageText={this.props.i18n?.get('upi.vpaWaitingMessage') ?? ''}\n                        awaitText={this.props.i18n?.get('await.waitForConfirmation') ?? ''}\n                        onComplete={this.onComplete}\n                        brandLogo={this.icon}\n                    />\n                );\n            default:\n                return (\n                    <UPIComponent\n                        setComponentRef={this.setComponentRef}\n                        payButton={this.payButton}\n                        onChange={this.setState}\n                        appsList={this.appsList}\n                        mode={this.mode}\n                        showPayButton={this.props.showPayButton ?? true}\n                        mandate={this.props.mandate}\n                        onSubmitAnalytics={this.submitAnalytics}\n                    />\n                );\n        }\n    }\n}\n\nexport default UPI;\n"],"names":["UPI","UIElement","formatProps","props","showOtherInsteadOfNumber","isMobile","isValid","this","state","formatData","app","data","paymentMethod","type","paymentType","TxVariants","upi_intent","id","appId","brands","showPaymentMethodItemImages","appsList","map","icon","name","mode","UPI_MODE","QR_CODE","upi_qr","componentToRender","url","paymentMethodType","isAutoPay","mandate","h","QRLoader","qrCodeData","encodeURIComponent","undefined","brandLogo","onComplete","introduction","i18n","get","countdownTime","onActionHandled","showAmount","Await","showCountdownTimer","shouldRedirectAutomatically","clientKey","paymentData","onError","messageText","awaitText","UPIComponent","setComponentRef","payButton","onChange","setState","showPayButton","onSubmitAnalytics","submitAnalytics","constructor","checkout","super","_define_property","apps","hasIntentApps","length","INTENT","imageName","toLowerCase","brandIcon","core","modules","resources","getImage","upi","txVariants","defaultProps","UPI_COUNTDOWN_TIME"],"mappings":"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"}

package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as o,useEffect as n,useCallback as r,useMemo as s}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../../core/Context/useImage.js";import{UPI_MODE as d,A11Y as c}from"../../constants.js";import"../../../../_virtual/index.js";import{SegmentedControlRegion as l}from"../../../internal/SegmentedControl/SegmentedControlRegion.js";import m from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";import u from"../../../internal/Alert/Alert.js";import I from"../UPIMandate/UPIMandate.js";import{useAmount as f}from"../../../../core/Context/AmountProvider.js";import{BrandIcons as g}from"../../../internal/BrandIcons/BrandIcons.js";function C({mode:C,onChange:h,payButton:y,setComponentRef:N,showPayButton:j,mandate:b,appsList:A}){const{i18n:B}=p(),E=i(),[R,k]=a("ready"),[T,x]=a(null),{amount:L}=f(),[P,Q]=a(C===d.QR_CODE),S=b&&e(I,{mandate:b,amount:L}),v=o({setStatus:k,showValidation:()=>{C===d.INTENT&&O()}});n(()=>{N(v.current)},[N]);const M=r(e=>{e?.id!==T?.id&&(x(e),Q(!0),k("ready"))},[T]),O=r(()=>{T?(k("ready"),Q(!0)):(k("error"),Q(!1))},[T]),U=s(()=>A.map(e=>({src:e.icon,alt:e.name})),[A]);return n(()=>{C!==d.QR_CODE?h({data:{...T&&{app:T}},isValid:P}):h({data:{},valid:{},errors:{},isValid:!0})},[T,P,C,h]),e(t,null,C===d.INTENT&&e(l,{id:c.AreaId.INTENT,ariaLabelledBy:c.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent"},e("span",{className:"adyen-checkout-upi-instruction-label"},B.get("upi.intent.instruction")),"error"===R&&e(u,{icon:"cross"},B.get("upi.error.noAppSelected")),e(m,{disabled:"loading"===R,appsList:A,selectedAppId:T?.id,onAppSelect:M}),S,j&&y({label:B.get("continue"),status:R})),C===d.QR_CODE&&e(l,{id:c.AreaId.QR,ariaLabelledBy:c.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code"},e("span",{className:"adyen-checkout-upi-instruction-label"},B.get("upi.qrCode.instruction")),e(g,{className:"adyen-checkout-upi-brands",brandIcons:U,showIconOnError:!0,smallIcons:!0,remainingBrandsLabel:`+ ${B.get("paymentMethodBrand.other")}`}),S,j&&y({label:B.get("generateQRCode"),icon:E({imageFolder:"components/"})("qr"),status:R})))}export{C as default};
+import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as n,useRef as a,useMemo as o,useEffect as s,useCallback as i}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../../../core/Context/useImage.js";import{MAX_PRIMARY_APPS as p,UPI_MODE as l,A11Y as d}from"../../constants.js";import"../../../../_virtual/index.js";import{SegmentedControlRegion as c}from"../../../internal/SegmentedControl/SegmentedControlRegion.js";import m from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as u}from"../../../../core/Context/CoreProvider.js";import g from"../../../internal/Alert/Alert.js";import f from"../UPIMandate/UPIMandate.js";import{useAmount as y}from"../../../../core/Context/AmountProvider.js";import{BrandIcons as I}from"../../../internal/BrandIcons/BrandIcons.js";import h from"../../../internal/ContentSeparator/ContentSeparator.js";import N from"../../../internal/FormFields/Field/Field.js";import j from"../../../internal/FormFields/Select/Select.js";import{AnalyticsInfoEvent as C,InfoEventType as b,UiTarget as A}from"../../../../core/Analytics/events/AnalyticsInfoEvent.js";import{ANALYTICS_SEARCH_DEBOUNCE_TIME as S}from"../../../../core/Analytics/constants.js";import{debounce as E}from"../../../../utils/debounce.js";function T({mode:T,onChange:k,payButton:_,setComponentRef:B,showPayButton:w,mandate:L,appsList:R,onSubmitAnalytics:v}){const{i18n:x}=u(),F=r(),[P,Q]=n("ready"),[M,V]=n(null),{amount:O}=y(),[U,q]=n(T===l.QR_CODE),D=L&&e(f,{mandate:L,amount:O}),$=a({setStatus:Q,showValidation:()=>{T===l.INTENT&&Z()}}),z=o(()=>R.slice(0,p),[R]),G=o(()=>R.slice(p),[R]);s(()=>{B($.current)},[B]);const H=i((e,t)=>{e&&e.id!==M?.id&&(V(e),q(!0),Q("ready"),v(new C({component:"upi_intent",type:b.selected,target:t,issuer:e.name})))},[M,v]),J=i(e=>H(e,A.list),[H]),K=i(e=>{const t=G.find(t=>t.id===e.target.value);H(t,A.listSearch)},[G,H]),W=i(e=>{e&&v(new C({component:"upi_intent",type:b.displayed,target:A.list}))},[v]),X=a(E(v,S)),Y=i(()=>{X.current({type:b.input,target:A.listSearch})},[]),Z=i(()=>{M?(Q("ready"),q(!0)):(Q("error"),q(!1))},[M]),ee=o(()=>R.map(e=>({src:e.icon,alt:e.name})),[R]);return s(()=>{T!==l.QR_CODE?k({data:{...M&&{app:M}},isValid:U}):k({data:{},valid:{},errors:{},isValid:!0})},[M,U,T,k]),s(()=>{T===l.INTENT&&0!==z.length&&v(new C({component:"upi_intent",type:b.displayed,target:A.list,presentedValues:z.map(e=>e.id)}))},[]),e(t,null,T===l.INTENT&&e(c,{id:d.AreaId.INTENT,ariaLabelledBy:d.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent"},e("span",{className:"adyen-checkout-upi-instruction-label"},x.get("upi.intent.instruction")),e("span",{className:"adyen-checkout-upi-instruction-title"},x.get("upi.intent.apps.title")),"error"===P&&e(g,{icon:"cross"},x.get("upi.error.noAppSelected")),e(m,{disabled:"loading"===P,appsList:z,selectedAppId:M?.id,onAppSelect:J}),G.length>0&&e(t,null,e(h,{classNames:["adyen-checkout-upi-instruction-separator"],label:"issuerList.separatorText"}),e(N,{label:x.get("upi.intent.apps.dropdown.label"),classNameModifiers:["upi-app-list"],name:"upi-app-list"},e(j,{items:G,selectedValue:G.some(e=>e.id===M?.id)?M?.id:void 0,placeholder:x.get("upi.intent.apps.dropdown.placeholder"),name:"upi-app-list",className:"adyen-checkout__upi-app-list__dropdown",onChange:K,onInput:Y,onListToggle:W}))),D,w&&_({label:x.get("continue"),status:P})),T===l.QR_CODE&&e(c,{id:d.AreaId.QR,ariaLabelledBy:d.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code"},e("span",{className:"adyen-checkout-upi-instruction-label-caption"},x.get("upi.qrCode.instruction")),e(I,{className:"adyen-checkout-upi-brands",brandIcons:ee,showIconOnError:!0,smallIcons:!0,remainingBrandsLabel:`+ ${x.get("paymentMethodBrand.other")}`}),D,w&&_({label:x.get("generateQRCode"),icon:F({imageFolder:"components/"})("qr"),status:P})))}export{T as default};
 //# sourceMappingURL=UPIComponent.js.map

package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { ComponentMethodsRef, UIElementStatus } from '../../../types';\nimport { App, UPIAppList, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y, UPI_MODE } from '../../constants';\nimport { SegmentedControlRegion } from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport UPIMandate, { Mandate } from '../UPIMandate/UPIMandate';\nimport { PayButtonProps } from '../../../internal/PayButton/PayButton';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { BrandIcon } from '../../../internal/BrandIcons/types';\nimport { BrandIcons } from '../../../internal/BrandIcons/BrandIcons';\nimport { ValidationRuleResult } from '../../../../utils/Validator/ValidationRuleResult';\nimport './UPIComponent.scss';\n\ntype UpiData = { app?: App };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: ValidationRuleResult }; isValid: boolean };\ninterface UPIComponentProps {\n    mode: UpiMode;\n    showPayButton: boolean;\n    appsList: UPIAppList;\n    mandate?: Mandate;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    payButton(props: PayButtonProps): h.JSX.Element;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n}\n\nexport default function UPIComponent({\n    mode,\n    onChange,\n    payButton,\n    setComponentRef,\n    showPayButton,\n    mandate,\n    appsList\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n    const [selectedApp, setSelectedApp] = useState<App>(null);\n    const { amount } = useAmount();\n    const [isValid, setIsValid] = useState<boolean>(mode === UPI_MODE.QR_CODE);\n    const mandateComponent = mandate && <UPIMandate mandate={mandate} amount={amount} />;\n\n    const upiRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            if (mode === UPI_MODE.INTENT) {\n                validateIntentApp();\n            }\n        }\n    });\n\n    useEffect(() => {\n        setComponentRef(upiRef.current);\n    }, [setComponentRef]);\n\n    const handleAppSelect = useCallback(\n        (app: App) => {\n            if (app?.id === selectedApp?.id) return;\n\n            setSelectedApp(app);\n            setIsValid(true);\n            setStatus('ready');\n        },\n        [selectedApp]\n    );\n\n    const validateIntentApp = useCallback(() => {\n        if (selectedApp) {\n            setStatus('ready');\n            setIsValid(true);\n        } else {\n            setStatus('error');\n            setIsValid(false);\n        }\n    }, [selectedApp]);\n\n    const brandIcons: BrandIcon[] = useMemo(\n        () =>\n            appsList.map(app => ({\n                src: app.icon,\n                alt: app.name\n            })),\n        [appsList]\n    );\n\n    useEffect(() => {\n        if (mode === UPI_MODE.QR_CODE) {\n            /**\n             * When selecting QR code mode, we need to clear the state data and trigger 'onChange'.\n             */\n            onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n            return;\n        }\n        onChange({\n            data: { ...(selectedApp && { app: selectedApp }) },\n            isValid\n        });\n    }, [selectedApp, isValid, mode, onChange]);\n\n    return (\n        <Fragment>\n            {mode === UPI_MODE.INTENT && (\n                <SegmentedControlRegion id={A11Y.AreaId.INTENT} ariaLabelledBy={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n                    {status === 'error' && <Alert icon=\"cross\">{i18n.get('upi.error.noAppSelected')}</Alert>}\n                    <UPIIntentAppList\n                        disabled={status === 'loading'}\n                        appsList={appsList}\n                        selectedAppId={selectedApp?.id}\n                        onAppSelect={handleAppSelect}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('continue'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n            {mode === UPI_MODE.QR_CODE && (\n                <SegmentedControlRegion id={A11Y.AreaId.QR} ariaLabelledBy={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.qrCode.instruction')}</span>\n                    <BrandIcons\n                        className=\"adyen-checkout-upi-brands\"\n                        brandIcons={brandIcons}\n                        showIconOnError\n                        smallIcons\n                        remainingBrandsLabel={`+ ${i18n.get('paymentMethodBrand.other')}`}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('generateQRCode'),\n                            icon: getImage({ imageFolder: 'components/' })('qr'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["UPIComponent","mode","onChange","payButton","setComponentRef","showPayButton","mandate","appsList","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","selectedApp","setSelectedApp","amount","useAmount","isValid","setIsValid","UPI_MODE","QR_CODE","mandateComponent","h","UPIMandate","upiRef","useRef","showValidation","INTENT","validateIntentApp","useEffect","current","handleAppSelect","useCallback","app","id","brandIcons","useMemo","map","src","icon","alt","name","data","valid","errors","Fragment","SegmentedControlRegion","A11Y","AreaId","ariaLabelledBy","ButtonId","className","span","get","Alert","UPIIntentAppList","disabled","selectedAppId","onAppSelect","label","QR","BrandIcons","showIconOnError","smallIcons","remainingBrandsLabel","imageFolder"],"mappings":"g0BA+Be,SAASA,GAAaC,KACjCA,EAAIC,SACJA,EAAQC,UACRA,EAASC,gBACTA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,SACPA,IAEA,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACVC,EAAQC,GAAaC,EAA0B,UAC/CC,EAAaC,GAAkBF,EAAc,OAC9CG,OAAEA,GAAWC,KACZC,EAASC,GAAcN,EAAkBb,IAASoB,EAASC,SAC5DC,EAAmBjB,GAAWkB,EAACC,EAAAA,CAAWnB,QAASA,EAASW,OAAQA,IAEpES,EAASC,EAA4B,CACvCd,UAAWA,EACXe,eAAgB,KACR3B,IAASoB,EAASQ,QAClBC,OAKZC,EAAU,KACN3B,EAAgBsB,EAAOM,UACxB,CAAC5B,IAEJ,MAAM6B,EAAkBC,EACnBC,IACOA,GAAKC,KAAOrB,GAAaqB,KAE7BpB,EAAemB,GACff,GAAW,GACXP,EAAU,WAEd,CAACE,IAGCe,EAAoBI,EAAY,KAC9BnB,GACAF,EAAU,SACVO,GAAW,KAEXP,EAAU,SACVO,GAAW,KAEhB,CAACL,IAEEsB,EAA0BC,EAC5B,IACI/B,EAASgC,IAAIJ,KACTK,IAAKL,EAAIM,KACTC,IAAKP,EAAIQ,QAEjB,CAACpC,IAiBL,OAdAwB,EAAU,KACF9B,IAASoB,EAASC,QAOtBpB,EAAS,CACL0C,KAAM,IAAM7B,GAAe,CAAEoB,IAAKpB,IAClCI,YALAjB,EAAS,CAAE0C,KAAM,CAAA,EAAIC,MAAO,CAAA,EAAIC,OAAQ,CAAA,EAAI3B,SAAS,KAO1D,CAACJ,EAAaI,EAASlB,EAAMC,IAG5BsB,EAACuB,EAAAA,KACI9C,IAASoB,EAASQ,QACfL,EAACwB,EAAAA,CAAuBZ,GAAIa,EAAKC,OAAOrB,OAAQsB,eAAgBF,EAAKG,SAASvB,OAAQwB,UAAU,kCAC5F7B,EAAC8B,OAAAA,CAAKD,UAAU,wCAAwC7C,EAAK+C,IAAI,2BACrD,UAAX3C,GAAsBY,EAACgC,EAAAA,CAAMf,KAAK,SAASjC,EAAK+C,IAAI,4BACrD/B,EAACiC,EAAAA,CACGC,SAAqB,YAAX9C,EACVL,SAAUA,EACVoD,cAAe5C,GAAaqB,GAC5BwB,YAAa3B,IAEhBV,EACAlB,GACGF,EAAU,CACN0D,MAAOrD,EAAK+C,IAAI,YAChB3C,YAIfX,IAASoB,EAASC,SACfE,EAACwB,EAAAA,CAAuBZ,GAAIa,EAAKC,OAAOY,GAAIX,eAAgBF,EAAKG,SAASU,GAAIT,UAAU,mCACpF7B,EAAC8B,OAAAA,CAAKD,UAAU,wCAAwC7C,EAAK+C,IAAI,2BACjE/B,EAACuC,EAAAA,CACGV,UAAU,4BACVhB,WAAYA,EACZ2B,iBAAAA,EACAC,YAAAA,EACAC,qBAAsB,KAAK1D,EAAK+C,IAAI,gCAEvChC,EACAlB,GACGF,EAAU,CACN0D,MAAOrD,EAAK+C,IAAI,kBAChBd,KAAM/B,EAAS,CAAEyD,YAAa,eAAxBzD,CAAyC,MAC/CE,YAM5B"}
+{"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { ComponentMethodsRef, UIElementStatus } from '../../../types';\nimport { App, UPIAppList, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y, MAX_PRIMARY_APPS, UPI_MODE } from '../../constants';\nimport { SegmentedControlRegion } from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport UPIMandate, { Mandate } from '../UPIMandate/UPIMandate';\nimport { PayButtonProps } from '../../../internal/PayButton/PayButton';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { BrandIcon } from '../../../internal/BrandIcons/types';\nimport { BrandIcons } from '../../../internal/BrandIcons/BrandIcons';\nimport { ValidationRuleResult } from '../../../../utils/Validator/ValidationRuleResult';\nimport './UPIComponent.scss';\nimport ContentSeparator from '../../../internal/ContentSeparator';\nimport Field from '../../../internal/FormFields/Field';\nimport Select from '../../../internal/FormFields/Select';\nimport { SelectTargetObject } from '../../../internal/FormFields/Select/types';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { AbstractAnalyticsEvent } from '../../../../core/Analytics/events/AbstractAnalyticsEvent';\nimport { ANALYTICS_SEARCH_DEBOUNCE_TIME } from '../../../../core/Analytics/constants';\nimport { debounce } from '../../../../utils/debounce';\n\ntype UpiData = { app?: App };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: ValidationRuleResult }; isValid: boolean };\ninterface UPIComponentProps {\n    mode: UpiMode;\n    showPayButton: boolean;\n    appsList: UPIAppList;\n    mandate?: Mandate;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    payButton(props: PayButtonProps): h.JSX.Element;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSubmitAnalytics(event: AbstractAnalyticsEvent): void;\n}\n\nexport default function UPIComponent({\n    mode,\n    onChange,\n    payButton,\n    setComponentRef,\n    showPayButton,\n    mandate,\n    appsList,\n    onSubmitAnalytics\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n    const [selectedApp, setSelectedApp] = useState<App | null>(null);\n    const { amount } = useAmount();\n    const [isValid, setIsValid] = useState<boolean>(mode === UPI_MODE.QR_CODE);\n    const mandateComponent = mandate && <UPIMandate mandate={mandate} amount={amount} />;\n\n    const upiRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            if (mode === UPI_MODE.INTENT) {\n                validateIntentApp();\n            }\n        }\n    });\n\n    const priorityApps = useMemo(() => appsList.slice(0, MAX_PRIMARY_APPS), [appsList]);\n    const lowPriorityApps = useMemo(() => appsList.slice(MAX_PRIMARY_APPS), [appsList]);\n\n    useEffect(() => {\n        setComponentRef(upiRef.current);\n    }, [setComponentRef]);\n\n    const selectApp = useCallback(\n        (app: App | undefined, target: UiTarget) => {\n            if (!app || app.id === selectedApp?.id) return;\n\n            setSelectedApp(app);\n            setIsValid(true);\n            setStatus('ready');\n\n            onSubmitAnalytics(\n                new AnalyticsInfoEvent({\n                    component: 'upi_intent',\n                    type: InfoEventType.selected,\n                    target,\n                    issuer: app.name\n                })\n            );\n        },\n        [selectedApp, onSubmitAnalytics]\n    );\n\n    const handleAppSelect = useCallback((app: App) => selectApp(app, UiTarget.list), [selectApp]);\n\n    const handleDropdownSelect = useCallback(\n        (event: { target: SelectTargetObject }) => {\n            const app = lowPriorityApps.find(a => a.id === event.target.value);\n            selectApp(app, UiTarget.listSearch);\n        },\n        [lowPriorityApps, selectApp]\n    );\n\n    const handleListToggle = useCallback(\n        (isOpen: boolean) => {\n            if (isOpen) {\n                onSubmitAnalytics(\n                    new AnalyticsInfoEvent({\n                        component: 'upi_intent',\n                        type: InfoEventType.displayed,\n                        target: UiTarget.list\n                    })\n                );\n            }\n        },\n        [onSubmitAnalytics]\n    );\n\n    const debounceSearchAnalytics = useRef(debounce(onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: InfoEventType.input, target: UiTarget.listSearch });\n    }, []);\n\n    const validateIntentApp = useCallback(() => {\n        if (selectedApp) {\n            setStatus('ready');\n            setIsValid(true);\n        } else {\n            setStatus('error');\n            setIsValid(false);\n        }\n    }, [selectedApp]);\n\n    const brandIcons: BrandIcon[] = useMemo(\n        () =>\n            appsList.map(app => ({\n                src: app.icon,\n                alt: app.name\n            })),\n        [appsList]\n    );\n\n    useEffect(() => {\n        if (mode === UPI_MODE.QR_CODE) {\n            /**\n             * When selecting QR code mode, we need to clear the state data and trigger 'onChange'.\n             */\n            onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n            return;\n        }\n        onChange({\n            data: { ...(selectedApp && { app: selectedApp }) },\n            isValid\n        });\n    }, [selectedApp, isValid, mode, onChange]);\n\n    useEffect(() => {\n        if (mode !== UPI_MODE.INTENT || priorityApps.length === 0) return;\n\n        onSubmitAnalytics(\n            new AnalyticsInfoEvent({\n                component: 'upi_intent',\n                type: InfoEventType.displayed,\n                target: UiTarget.list,\n                presentedValues: priorityApps.map(a => a.id)\n            })\n        );\n    }, []);\n\n    return (\n        <Fragment>\n            {mode === UPI_MODE.INTENT && (\n                <SegmentedControlRegion id={A11Y.AreaId.INTENT} ariaLabelledBy={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n                    <span className=\"adyen-checkout-upi-instruction-title\">{i18n.get('upi.intent.apps.title')}</span>\n                    {status === 'error' && <Alert icon={'cross'}>{i18n.get('upi.error.noAppSelected')}</Alert>}\n                    <UPIIntentAppList\n                        disabled={status === 'loading'}\n                        appsList={priorityApps}\n                        selectedAppId={selectedApp?.id}\n                        onAppSelect={handleAppSelect}\n                    />\n                    {lowPriorityApps.length > 0 && (\n                        <Fragment>\n                            <ContentSeparator classNames={['adyen-checkout-upi-instruction-separator']} label=\"issuerList.separatorText\" />\n                            <Field label={i18n.get('upi.intent.apps.dropdown.label')} classNameModifiers={['upi-app-list']} name={'upi-app-list'}>\n                                <Select\n                                    items={lowPriorityApps}\n                                    selectedValue={lowPriorityApps.some(a => a.id === selectedApp?.id) ? selectedApp?.id : undefined}\n                                    placeholder={i18n.get('upi.intent.apps.dropdown.placeholder')}\n                                    name={'upi-app-list'}\n                                    className={'adyen-checkout__upi-app-list__dropdown'}\n                                    onChange={handleDropdownSelect}\n                                    onInput={handleSearch}\n                                    onListToggle={handleListToggle}\n                                />\n                            </Field>\n                        </Fragment>\n                    )}\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('continue'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n            {mode === UPI_MODE.QR_CODE && (\n                <SegmentedControlRegion id={A11Y.AreaId.QR} ariaLabelledBy={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\">\n                    <span className=\"adyen-checkout-upi-instruction-label-caption\">{i18n.get('upi.qrCode.instruction')}</span>\n                    <BrandIcons\n                        className=\"adyen-checkout-upi-brands\"\n                        brandIcons={brandIcons}\n                        showIconOnError\n                        smallIcons\n                        remainingBrandsLabel={`+ ${i18n.get('paymentMethodBrand.other')}`}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('generateQRCode'),\n                            icon: getImage({ imageFolder: 'components/' })('qr'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["UPIComponent","mode","onChange","payButton","setComponentRef","showPayButton","mandate","appsList","onSubmitAnalytics","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","selectedApp","setSelectedApp","amount","useAmount","isValid","setIsValid","UPI_MODE","QR_CODE","mandateComponent","h","UPIMandate","upiRef","useRef","showValidation","INTENT","validateIntentApp","priorityApps","useMemo","slice","MAX_PRIMARY_APPS","lowPriorityApps","useEffect","current","selectApp","useCallback","app","target","id","AnalyticsInfoEvent","component","type","InfoEventType","selected","issuer","name","handleAppSelect","UiTarget","list","handleDropdownSelect","event","find","a","value","listSearch","handleListToggle","isOpen","displayed","debounceSearchAnalytics","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","input","brandIcons","map","src","icon","alt","data","valid","errors","length","presentedValues","Fragment","SegmentedControlRegion","A11Y","AreaId","ariaLabelledBy","ButtonId","className","span","get","Alert","UPIIntentAppList","disabled","selectedAppId","onAppSelect","ContentSeparator","classNames","label","Field","classNameModifiers","Select","items","selectedValue","some","undefined","placeholder","onInput","onListToggle","QR","BrandIcons","showIconOnError","smallIcons","remainingBrandsLabel","imageFolder"],"mappings":"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"}

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import a from"../../../../Dropin/components/PaymentMethod/PaymentMethodIcon.js";import p from"../../../../internal/ExpandButton/ExpandButton.js";const i=({app:i,imgSrc:c,isSelected:n,onSelect:o})=>{const m=`adyen-checkout-upi-app-item-button-${i.id}`,s=`adyen-checkout-upi-app-${i.id}`;return e("li",{className:t({"adyen-checkout-upi-app-item":!0,"adyen-checkout-upi-app-item--selected":n}),onClick:()=>(e=>{o(e)})(i)},e("div",{className:"adyen-checkout-upi-app-item-header"},e(p,{classNameModifiers:["upi-app-item"],buttonId:m,isSelected:n,expandContentId:s},e(a,{src:c,altDescription:i.name,type:i.id}),e("label",{className:"adyen-checkout-upi-app-item__label",htmlFor:m},i.name))),n&&e("span",{className:"adyen-checkout-upi-app-item__checkmark"}))};export{i as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import a from"../../../../Dropin/components/PaymentMethod/PaymentMethodIcon.js";import p from"../../../../internal/ExpandButton/ExpandButton.js";const c=({app:c,imgSrc:i,isSelected:n,onSelect:o})=>{const m=`adyen-checkout-upi-app-item-button-${c.id}`,d=`adyen-checkout-upi-app-${c.id}`;return e("li",{className:t({"adyen-checkout-upi-app-item":!0,"adyen-checkout-upi-app-item--selected":n}),onClick:()=>(e=>{o(e)})(c)},e("div",{className:"adyen-checkout-upi-app-item-header"},e(p,{classNameModifiers:["upi-app-item"],buttonId:m,isSelected:n,expandContentId:d},e(a,{src:i,alt:c.name,type:c.id}),e("label",{className:"adyen-checkout-upi-app-item__label",htmlFor:m},c.name))),n&&e("span",{className:"adyen-checkout-upi-app-item__checkmark"}))};export{c as default};
 //# sourceMappingURL=UPIIntentAppItem.js.map

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UPIIntentAppItem.js","sources":["../../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { App } from '../../../types';\nimport PaymentMethodIcon from '../../../../Dropin/components/PaymentMethod/PaymentMethodIcon';\nimport ExpandButton from '../../../../internal/ExpandButton';\nimport './UPIIntentAppItem.scss';\n\ninterface UPIIntentAppItemProps {\n    app: App;\n    imgSrc: string;\n    isSelected: boolean;\n    onSelect: (app: App) => void;\n}\n\nconst UPIIntentAppItem = ({ app, imgSrc, isSelected, onSelect }: Readonly<UPIIntentAppItemProps>): h.JSX.Element => {\n    const buttonId = `adyen-checkout-upi-app-item-button-${app.id}`;\n    const containerId = `adyen-checkout-upi-app-${app.id}`;\n    const handleAppSelected = (app: App) => {\n        onSelect(app);\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <li\n            className={cx({\n                'adyen-checkout-upi-app-item': true,\n                'adyen-checkout-upi-app-item--selected': isSelected\n            })}\n            onClick={() => handleAppSelected(app)}\n        >\n            <div className=\"adyen-checkout-upi-app-item-header\">\n                <ExpandButton classNameModifiers={['upi-app-item']} buttonId={buttonId} isSelected={isSelected} expandContentId={containerId}>\n                    <PaymentMethodIcon src={imgSrc} altDescription={app.name} type={app.id}></PaymentMethodIcon>\n                    <label className=\"adyen-checkout-upi-app-item__label\" htmlFor={buttonId}>\n                        {app.name}\n                    </label>\n                </ExpandButton>\n            </div>\n            {isSelected && <span className=\"adyen-checkout-upi-app-item__checkmark\" />}\n        </li>\n    );\n};\n\nexport default UPIIntentAppItem;\n"],"names":["UPIIntentAppItem","app","imgSrc","isSelected","onSelect","buttonId","id","containerId","h","li","className","cx","onClick","handleAppSelected","div","ExpandButton","classNameModifiers","expandContentId","PaymentMethodIcon","src","altDescription","name","type","label","htmlFor","span"],"mappings":"+QAcA,MAAMA,EAAmB,EAAGC,MAAKC,SAAQC,aAAYC,eACjD,MAAMC,EAAW,sCAAsCJ,EAAIK,KACrDC,EAAc,0BAA0BN,EAAIK,KAKlD,OAEIE,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,+BAA+B,EAC/B,wCAAyCR,IAE7CS,QAAS,IAXS,CAACX,IACvBG,EAASH,IAUUY,CAAkBZ,IAEjCO,EAACM,MAAAA,CAAIJ,UAAU,sCACXF,EAACO,EAAAA,CAAaC,mBAAoB,CAAC,gBAAiBX,SAAUA,EAAUF,WAAYA,EAAYc,gBAAiBV,GAC7GC,EAACU,EAAAA,CAAkBC,IAAKjB,EAAQkB,eAAgBnB,EAAIoB,KAAMC,KAAMrB,EAAIK,KACpEE,EAACe,QAAAA,CAAMb,UAAU,qCAAqCc,QAASnB,GAC1DJ,EAAIoB,QAIhBlB,GAAcK,EAACiB,OAAAA,CAAKf,UAAU"}
+{"version":3,"file":"UPIIntentAppItem.js","sources":["../../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { App } from '../../../types';\nimport PaymentMethodIcon from '../../../../Dropin/components/PaymentMethod/PaymentMethodIcon';\nimport ExpandButton from '../../../../internal/ExpandButton';\nimport './UPIIntentAppItem.scss';\n\ninterface UPIIntentAppItemProps {\n    app: App;\n    imgSrc: string;\n    isSelected: boolean;\n    onSelect: (app: App) => void;\n}\n\nconst UPIIntentAppItem = ({ app, imgSrc, isSelected, onSelect }: Readonly<UPIIntentAppItemProps>): h.JSX.Element => {\n    const buttonId = `adyen-checkout-upi-app-item-button-${app.id}`;\n    const containerId = `adyen-checkout-upi-app-${app.id}`;\n    const handleAppSelected = (app: App) => {\n        onSelect(app);\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <li\n            className={cx({\n                'adyen-checkout-upi-app-item': true,\n                'adyen-checkout-upi-app-item--selected': isSelected\n            })}\n            onClick={() => handleAppSelected(app)}\n        >\n            <div className=\"adyen-checkout-upi-app-item-header\">\n                <ExpandButton classNameModifiers={['upi-app-item']} buttonId={buttonId} isSelected={isSelected} expandContentId={containerId}>\n                    <PaymentMethodIcon src={imgSrc} alt={app.name} type={app.id}></PaymentMethodIcon>\n                    <label className=\"adyen-checkout-upi-app-item__label\" htmlFor={buttonId}>\n                        {app.name}\n                    </label>\n                </ExpandButton>\n            </div>\n            {isSelected && <span className=\"adyen-checkout-upi-app-item__checkmark\" />}\n        </li>\n    );\n};\n\nexport default UPIIntentAppItem;\n"],"names":["UPIIntentAppItem","app","imgSrc","isSelected","onSelect","buttonId","id","containerId","h","li","className","cx","onClick","handleAppSelected","div","ExpandButton","classNameModifiers","expandContentId","PaymentMethodIcon","src","alt","name","type","label","htmlFor","span"],"mappings":"+QAcA,MAAMA,EAAmB,EAAGC,MAAKC,SAAQC,aAAYC,eACjD,MAAMC,EAAW,sCAAsCJ,EAAIK,KACrDC,EAAc,0BAA0BN,EAAIK,KAKlD,OAEIE,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,+BAA+B,EAC/B,wCAAyCR,IAE7CS,QAAS,IAXS,CAACX,IACvBG,EAASH,IAUUY,CAAkBZ,IAEjCO,EAACM,MAAAA,CAAIJ,UAAU,sCACXF,EAACO,EAAAA,CAAaC,mBAAoB,CAAC,gBAAiBX,SAAUA,EAAUF,WAAYA,EAAYc,gBAAiBV,GAC7GC,EAACU,EAAAA,CAAkBC,IAAKjB,EAAQkB,IAAKnB,EAAIoB,KAAMC,KAAMrB,EAAIK,KACzDE,EAACe,QAAAA,CAAMb,UAAU,qCAAqCc,QAASnB,GAC1DJ,EAAIoB,QAIhBlB,GAAcK,EAACiB,OAAAA,CAAKf,UAAU"}

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import a from"./UPIIntentAppItem/UPIIntentAppItem.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";const i=({appsList:i,selectedAppId:r,disabled:o,onAppSelect:n})=>{const{i18n:s}=p();return e("ul",{className:t({"adyen-checkout-upi-app-list":!0,"adyen-checkout-upi-app-list--loading":o}),role:"radiogroup","aria-label":s.get("paymentMethodsList.aria.label")},i.map(t=>{const p=`adyen-checkout-upi-app-item-${t.id}`,i=r===t.id;return e(a,{key:p,app:{id:t.id,name:t.name},imgSrc:t.icon,isSelected:i,onSelect:n})}))};export{i as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import p from"./UPIIntentAppItem/UPIIntentAppItem.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";const r=({appsList:r,selectedAppId:i,disabled:o,onAppSelect:n})=>{const{i18n:s}=a();return e("ul",{className:t({"adyen-checkout-upi-app-list":!0,"adyen-checkout-upi-app-list--loading":o}),role:"radiogroup","aria-label":s.get("paymentMethodsList.aria.label")},r.map(t=>{const a=`adyen-checkout-upi-app-item-${t.id}`,r=i===t.id;return e(p,{key:a,app:t,imgSrc:t.icon,isSelected:r,onSelect:n})}))};export{r as default};
 //# sourceMappingURL=UPIIntentAppList.js.map

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UPIIntentAppList.js","sources":["../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { App, UPIAppList } from '../../types';\nimport UPIIntentAppItem from './UPIIntentAppItem';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './UPIIntentAppList.scss';\n\ninterface UPIIntentAppListProps {\n    appsList: UPIAppList;\n    selectedAppId?: string;\n    disabled?: boolean;\n    onAppSelect: (app: App) => void;\n}\n\nconst UPIIntentAppList = ({ appsList, selectedAppId, disabled, onAppSelect }: Readonly<UPIIntentAppListProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n        <ul\n            className={classNames({\n                'adyen-checkout-upi-app-list': true,\n                'adyen-checkout-upi-app-list--loading': disabled\n            })}\n            role=\"radiogroup\"\n            aria-label={i18n.get('paymentMethodsList.aria.label')}\n        >\n            {appsList.map(app => {\n                const key = `adyen-checkout-upi-app-item-${app.id}`;\n                const isSelected = selectedAppId === app.id;\n                return (\n                    <UPIIntentAppItem\n                        key={key}\n                        app={{ id: app.id, name: app.name }}\n                        imgSrc={app.icon}\n                        isSelected={isSelected}\n                        onSelect={onAppSelect}\n                    />\n                );\n            })}\n        </ul>\n    );\n};\n\nexport default UPIIntentAppList;\n"],"names":["UPIIntentAppList","appsList","selectedAppId","disabled","onAppSelect","i18n","useCoreContext","h","ul","className","classNames","role","aria-label","get","map","app","key","id","isSelected","UPIIntentAppItem","name","imgSrc","icon","onSelect"],"mappings":"wPAcA,MAAMA,EAAmB,EAAGC,WAAUC,gBAAeC,WAAUC,kBAC3D,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAW,CAClB,+BAA+B,EAC/B,uCAAwCP,IAE5CQ,KAAK,aACLC,aAAYP,EAAKQ,IAAI,kCAEpBZ,EAASa,IAAIC,IACV,MAAMC,EAAM,+BAA+BD,EAAIE,KACzCC,EAAahB,IAAkBa,EAAIE,GACzC,OACIV,EAACY,EAAAA,CACGH,IAAKA,EACLD,IAAK,CAAEE,GAAIF,EAAIE,GAAIG,KAAML,EAAIK,MAC7BC,OAAQN,EAAIO,KACZJ,WAAYA,EACZK,SAAUnB"}
+{"version":3,"file":"UPIIntentAppList.js","sources":["../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { App, UPIAppList } from '../../types';\nimport UPIIntentAppItem from './UPIIntentAppItem';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './UPIIntentAppList.scss';\n\ninterface UPIIntentAppListProps {\n    appsList: UPIAppList;\n    selectedAppId?: string;\n    disabled?: boolean;\n    onAppSelect: (app: App) => void;\n}\n\nconst UPIIntentAppList = ({ appsList, selectedAppId, disabled, onAppSelect }: Readonly<UPIIntentAppListProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n        <ul\n            className={classNames({\n                'adyen-checkout-upi-app-list': true,\n                'adyen-checkout-upi-app-list--loading': disabled\n            })}\n            role=\"radiogroup\"\n            aria-label={i18n.get('paymentMethodsList.aria.label')}\n        >\n            {appsList.map(app => {\n                const key = `adyen-checkout-upi-app-item-${app.id}`;\n                const isSelected = selectedAppId === app.id;\n                return <UPIIntentAppItem key={key} app={app} imgSrc={app.icon} isSelected={isSelected} onSelect={onAppSelect} />;\n            })}\n        </ul>\n    );\n};\n\nexport default UPIIntentAppList;\n"],"names":["UPIIntentAppList","appsList","selectedAppId","disabled","onAppSelect","i18n","useCoreContext","h","ul","className","classNames","role","aria-label","get","map","app","key","id","isSelected","UPIIntentAppItem","imgSrc","icon","onSelect"],"mappings":"wPAcA,MAAMA,EAAmB,EAAGC,WAAUC,gBAAeC,WAAUC,kBAC3D,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAW,CAClB,+BAA+B,EAC/B,uCAAwCP,IAE5CQ,KAAK,aACLC,aAAYP,EAAKQ,IAAI,kCAEpBZ,EAASa,IAAIC,IACV,MAAMC,EAAM,+BAA+BD,EAAIE,KACzCC,EAAahB,IAAkBa,EAAIE,GACzC,OAAOV,EAACY,EAAAA,CAAiBH,IAAKA,EAAKD,IAAKA,EAAKK,OAAQL,EAAIM,KAAMH,WAAYA,EAAYI,SAAUlB"}

package/dist/es/components/UPI/constants.js

@@ -1,2 +1,2 @@
-const t={QR_CODE:"qrCode",INTENT:"intent"},e={ButtonId:{QR:"upi-button-qrCode",INTENT:"upi-button-intent"},AreaId:{QR:"upi-area-qrCode",INTENT:"upi-area-intent"}},n=5;export{e as A11Y,n as UPI_COUNTDOWN_TIME,t as UPI_MODE};
+const t={QR_CODE:"qrCode",INTENT:"intent"},e=4,n={ButtonId:{QR:"upi-button-qrCode",INTENT:"upi-button-intent"},AreaId:{QR:"upi-area-qrCode",INTENT:"upi-area-intent"}},o=5;export{n as A11Y,e as MAX_PRIMARY_APPS,o as UPI_COUNTDOWN_TIME,t as UPI_MODE};
 //# sourceMappingURL=constants.js.map

package/dist/es/components/UPI/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/UPI/constants.ts"],"sourcesContent":["import { UpiMode } from './types';\n\nexport const UPI_MODE = {\n    QR_CODE: 'qrCode' as UpiMode,\n    INTENT: 'intent' as UpiMode\n} as const;\n\nexport const A11Y = {\n    ButtonId: {\n        QR: 'upi-button-qrCode',\n        INTENT: 'upi-button-intent'\n    },\n    AreaId: {\n        QR: 'upi-area-qrCode',\n        INTENT: 'upi-area-intent'\n    }\n};\n\nexport const UPI_COUNTDOWN_TIME = 5;\n"],"names":["UPI_MODE","QR_CODE","INTENT","A11Y","ButtonId","QR","AreaId","UPI_COUNTDOWN_TIME"],"mappings":"MAEaA,EAAW,CACpBC,QAAS,SACTC,OAAQ,UAGCC,EAAO,CAChBC,SAAU,CACNC,GAAI,oBACJH,OAAQ,qBAEZI,OAAQ,CACJD,GAAI,kBACJH,OAAQ,oBAIHK,EAAqB"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/UPI/constants.ts"],"sourcesContent":["import { UpiMode } from './types';\n\nexport const UPI_MODE = {\n    QR_CODE: 'qrCode' as UpiMode,\n    INTENT: 'intent' as UpiMode\n} as const;\n\nexport const MAX_PRIMARY_APPS = 4;\n\nexport const A11Y = {\n    ButtonId: {\n        QR: 'upi-button-qrCode',\n        INTENT: 'upi-button-intent'\n    },\n    AreaId: {\n        QR: 'upi-area-qrCode',\n        INTENT: 'upi-area-intent'\n    }\n};\n\nexport const UPI_COUNTDOWN_TIME = 5;\n"],"names":["UPI_MODE","QR_CODE","INTENT","MAX_PRIMARY_APPS","A11Y","ButtonId","QR","AreaId","UPI_COUNTDOWN_TIME"],"mappings":"MAEaA,EAAW,CACpBC,QAAS,SACTC,OAAQ,UAGCC,EAAmB,EAEnBC,EAAO,CAChBC,SAAU,CACNC,GAAI,oBACJJ,OAAQ,qBAEZK,OAAQ,CACJD,GAAI,kBACJJ,OAAQ,oBAIHM,EAAqB"}

package/dist/es/components/internal/Address/Address.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as r,useMemo as o,useState as s,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";function A(A){const{i18n:v}=C(),{label:b="",requiredFields:j,visibility:S,iOSFocusedField:x=null,showContextualElement:k}=A,M=r({});Object.keys(M.current).length||A.setComponentRef?.(M.current);const O=o(()=>new f(A.specifications),[A.specifications]),D=O.getAddressSchemaForCountryFlat(A.countryCode).filter(e=>j.includes(e)),[w,B]=s(!1),[E,L]=s(!1),[N,P]=s(""),R=!!A.onAddressLookup,[V,H]=s(!1),q=!A.onAddressLookup||(w||E),{data:T,errors:_,valid:I,isValid:U,handleChangeFor:$,triggerValidation:z,setData:G,mergeData:J}=p({schema:D,defaultData:A.data,rules:{...d(O),...A.validationRules},formatters:c}),K=r(A.data?.country),Q=(T.country||K.current)?.toUpperCase(),W=o(()=>({...T,country:Q}),[T,Q]),X=n(e=>{const t=y.reduce((t,r)=>{const o=e[r];return null!=o&&(t[r]=String(o)),t},{});J(t),H(!0),z(),B(!0)},[B,z,G]),Y=n(()=>{L(!0)},[]);M.current.showValidation=()=>{z(),P(!R||q||U?"":v.get("address.errors.incomplete"))};const Z=D.filter(e=>!x||e===x);if(a(()=>{if(V)return void H(!1);const e=O.countryHasDataset(T.country)?"":F,t={...T,stateOrProvince:e};j.forEach(e=>{$(e,"input")(t[e]??"")}),t.postalCode&&$("postalCode","blur")(T.postalCode)},[T.country]),a(()=>{const e=j.includes("stateOrProvince"),t=T.country&&O.countryHasDataset(T.country),r=e&&t,o=T.stateOrProvince||(r?"":F);$("stateOrProvince","input")(o)},[]),a(()=>{const e=O.getOptionalFieldsForCountry(T.country),t=y.reduce((t,r)=>{const o=e.includes(r),s=j.includes(r),n=T[r],a=A.data[r],i=o&&!n||!s?s||n||!a?F:a:n;return i?.length&&(t[r]=i),t},{});!t.country&&K.current&&(t.country=K.current),A.onChange({data:t,valid:I,errors:_,isValid:U})},[T,I,_,U]),"hidden"===S)return null;if("readOnly"===S)return e(l,{data:T,label:b});const ee=(t,{classNameModifiers:r=[]})=>j.includes(t)?e(m,{key:t,allowedCountries:A.allowedCountries,classNameModifiers:[...r,t],data:W,errors:_,valid:I,fieldName:t,onInput:$(t,"input"),onBlur:$(t,"blur"),onDropdownChange:$(t,"blur"),specifications:O,maxLength:h(u,t,Q),trimOnBlur:!0,disabled:!Z.includes(t),onFieldFocusAnalytics:A.onFieldFocusAnalytics,onFieldBlurAnalytics:A.onFieldBlurAnalytics}):null,te=O.getAddressSchemaForCountry(T.country);return e(t,null,e(i,{classNameModifiers:[b,"address"],label:b,renderLabelAsSectionHeading:!0},R&&e(g,{onAddressLookup:A.onAddressLookup,onAddressSelected:A.onAddressSelected,onSelect:X,onManualAddress:Y,externalErrorMessage:N,hideManualButton:q,showContextualElement:k,contextualText:v.get("address.search.contextualText"),addressSearchDebounceMs:A.addressSearchDebounceMs}),q&&e(t,null,te.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>ee(e,{classNameModifiers:[`col-${t}`]}))):ee(t,{})))))}A.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{A as default};
+import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as r,useMemo as o,useState as s,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";function A(A){const{i18n:v}=C(),{label:b="",requiredFields:j,visibility:S,iOSFocusedField:x=null,showContextualElement:k}=A,M=r({});Object.keys(M.current).length||A.setComponentRef?.(M.current);const O=o(()=>new f(A.specifications),[A.specifications]),D=O.getAddressSchemaForCountryFlat(A.countryCode).filter(e=>j.includes(e)),[w,B]=s(!1),[E,L]=s(!1),[N,P]=s(""),R=!!A.onAddressLookup,[V,H]=s(!1),q=!A.onAddressLookup||(w||E),{data:T,errors:_,valid:I,isValid:U,handleChangeFor:$,triggerValidation:z,setData:G,mergeData:J}=p({schema:D,defaultData:A.data,rules:{...d(O),...A.validationRules},formatters:c}),K=r(A.data?.country),Q=(T.country||K.current)?.toUpperCase(),W=o(()=>({...T,country:Q}),[T,Q]),X=n(e=>{const t=y.reduce((t,r)=>{const o=e[r];return null!=o&&(t[r]=String(o)),t},{});J(t),H(!0),z(),B(!0)},[B,z,G]),Y=n(()=>{L(!0)},[]);M.current.showValidation=()=>{z(),P(!R||q||U?"":v.get("address.errors.incomplete"))};const Z=D.filter(e=>!x||e===x);if(a(()=>{if(V)return void H(!1);const e=O.countryHasDataset(T.country)?"":F,t={...T,stateOrProvince:e};j.forEach(e=>{$(e,"input")(t[e]??"")}),t.postalCode&&$("postalCode","blur")(T.postalCode)},[T.country]),a(()=>{const e=j.includes("stateOrProvince"),t=T.country&&O.countryHasDataset(T.country),r=e&&t,o=T.stateOrProvince||(r?"":F);$("stateOrProvince","input")(o)},[]),a(()=>{const e=O.getOptionalFieldsForCountry(T.country),t=y.reduce((t,r)=>{const o=e.includes(r),s=j.includes(r),n=T[r],a=A.data[r],i=o&&!n||!s?s||n||!a?F:a:n;return i?.length&&(t[r]=i),t},{});!t.country&&K.current&&(t.country=K.current),A.onChange({data:t,valid:I,errors:_,isValid:U})},[T,I,_,U]),"hidden"===S)return null;if("readOnly"===S)return e(l,{data:T,label:b});const ee=(t,{classNameModifiers:r=[]})=>j.includes(t)?e(m,{key:t,allowedCountries:A.allowedCountries,classNameModifiers:[...r,t],data:W,errors:_,valid:I,fieldName:t,onInput:$(t,"input"),onBlur:$(t,"blur"),onDropdownChange:$(t,"blur"),specifications:O,maxLength:h(u,t,Q),trimOnBlur:!0,disabled:!Z.includes(t),onFieldFocusAnalytics:A.onFieldFocusAnalytics,onFieldBlurAnalytics:A.onFieldBlurAnalytics}):null,te=O.getAddressSchemaForCountry(T.country);return e(t,null,e(i,{classNameModifiers:[b,"address"],label:b,renderLabelAsSectionHeading:!0},R&&e(g,{onAddressLookup:A.onAddressLookup,onAddressSelected:A.onAddressSelected,onSelect:X,onManualAddress:Y,externalErrorMessage:N,hideManualButton:q,showContextualElement:k,contextualText:v.get("address.search.contextualText"),addressSearchDebounceMs:A.addressSearchDebounceMs}),q&&e(t,null,te.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>ee(e,{classNameModifiers:[`col-${t}`]}))):ee(t,{})))))}A.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{A as default};
 //# sourceMappingURL=Address.js.map

package/dist/es/components/internal/Address/Address.js.map

@@ -1 +1 @@
-{"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\n\nexport default function Address(props: Readonly<AddressProps>) {\n    const { i18n } = useCoreContext();\n\n    const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const addressRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(addressRef.current).length) {\n        props.setComponentRef?.(addressRef.current);\n    }\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n    const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n    const [useManualAddress, setUseManualAddress] = useState(false);\n\n    const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n    const showAddressSearch = !!props.onAddressLookup;\n\n    const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n    const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n    const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n        schema: requiredFieldsSchema,\n        defaultData: props.data,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n        formatters: addressFormatters\n    });\n\n    // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n    // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n    const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n    const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n    const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n    const setSearchData = useCallback(\n        (selectedAddress: AddressData) => {\n            const propsKeysToProcess = ADDRESS_SCHEMA;\n            const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n                // Make sure the data provided by the merchant is always strings\n                const providedValue = selectedAddress[propKey];\n                if (providedValue !== null && providedValue !== undefined) {\n                    // Cast everything to string\n                    acc[propKey] = String(providedValue);\n                }\n                return acc;\n            }, {});\n            mergeData(newStateData);\n            setIgnoreCountryChange(true);\n            triggerValidation();\n            setHasSelectedAddress(true);\n        },\n        [setHasSelectedAddress, triggerValidation, setData]\n    );\n\n    const onManualAddress = useCallback(() => {\n        setUseManualAddress(true);\n    }, []);\n\n    // Expose method expected by (parent) Address.tsx\n    addressRef.current.showValidation = () => {\n        triggerValidation();\n        if (showAddressSearch && !showAddressFields && !isValid) {\n            setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n        } else {\n            setSearchErrorMessage('');\n        }\n    };\n\n    /**\n     * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n     * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n     */\n    const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n        return !iOSFocusedField ? true : item === iOSFocusedField;\n    });\n\n    /**\n     * Effect that:\n     * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n     * - Applies validation on postalCode field in case it has any value\n     */\n    useEffect((): void => {\n        // if the country was set via setSearchData we don't want to trigger this\n        if (ignoreCountryChange) {\n            setIgnoreCountryChange(false);\n            return;\n        }\n\n        const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n        const newData = { ...data, stateOrProvince };\n\n        requiredFields.forEach(fieldName => {\n            handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n        });\n\n        if (newData.postalCode) {\n            handleChangeFor('postalCode', 'blur')(data.postalCode);\n        }\n    }, [data.country]);\n\n    /**\n     * Set the value of 'stateOrProvince' during the initial render if\n     * property is provided during the creation of the payment method\n     */\n    useEffect((): void => {\n        const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n        const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n        const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n        const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n        handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n    }, []);\n\n    useEffect((): void => {\n        const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n        const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n            const isOptional = optionalFields.includes(cur);\n            const isRequired = requiredFields.includes(cur);\n            const newValue = data[cur];\n            const initialValue = props.data[cur];\n            // recover default data values which are not requiredFields, or prefill with 'N/A'\n            const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n            const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n            if (value?.length) acc[cur] = value;\n            return acc;\n        }, {});\n\n        // In partial address mode, ensure country is included in output for regionalized labels/validation.\n        if (!(processedData as AddressData).country && initialCountryRef.current) {\n            (processedData as AddressData).country = initialCountryRef.current;\n        }\n\n        props.onChange({ data: processedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n    const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n        if (!requiredFields.includes(fieldName)) return null;\n\n        return (\n            <FieldContainer\n                key={fieldName}\n                allowedCountries={props.allowedCountries}\n                classNameModifiers={[...classNameModifiers, fieldName]}\n                data={dataWithCountry}\n                errors={errors}\n                valid={valid}\n                fieldName={fieldName}\n                onInput={handleChangeFor(fieldName, 'input')}\n                onBlur={handleChangeFor(fieldName, 'blur')}\n                onDropdownChange={handleChangeFor(fieldName, 'blur')}\n                specifications={specifications}\n                maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n                trimOnBlur={true}\n                disabled={!enabledFields.includes(fieldName)}\n                onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n                onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n            />\n        );\n    };\n\n    const getWrapper = group => (\n        <div className=\"adyen-checkout__field-group\">\n            {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n        </div>\n    );\n\n    const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={[label, 'address']} label={label} renderLabelAsSectionHeading>\n                {showAddressSearch && (\n                    <AddressSearch\n                        onAddressLookup={props.onAddressLookup}\n                        onAddressSelected={props.onAddressSelected}\n                        onSelect={setSearchData}\n                        onManualAddress={onManualAddress}\n                        externalErrorMessage={searchErrorMessage}\n                        hideManualButton={showAddressFields}\n                        showContextualElement={showContextualElement}\n                        contextualText={i18n.get('address.search.contextualText')}\n                        addressSearchDebounceMs={props.addressSearchDebounceMs}\n                    />\n                )}\n                {showAddressFields && (\n                    <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nAddress.defaultProps = {\n    countryCode: null,\n    validationRules: null,\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: ADDRESS_SCHEMA,\n    specifications: {},\n    onFieldFocusAnalytics: () => {},\n    onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","renderLabelAsSectionHeading","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\n\nexport default function Address(props: Readonly<AddressProps>) {\n    const { i18n } = useCoreContext();\n\n    const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const addressRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(addressRef.current).length) {\n        props.setComponentRef?.(addressRef.current);\n    }\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n    const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n    const [useManualAddress, setUseManualAddress] = useState(false);\n\n    const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n    const showAddressSearch = !!props.onAddressLookup;\n\n    const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n    const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n    const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n        schema: requiredFieldsSchema,\n        defaultData: props.data,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n        formatters: addressFormatters\n    });\n\n    // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n    // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n    const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n    const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n    const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n    const setSearchData = useCallback(\n        (selectedAddress: AddressData) => {\n            const propsKeysToProcess = ADDRESS_SCHEMA;\n            const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n                // Make sure the data provided by the merchant is always strings\n                const providedValue = selectedAddress[propKey];\n                if (providedValue !== null && providedValue !== undefined) {\n                    // Cast everything to string\n                    acc[propKey] = String(providedValue);\n                }\n                return acc;\n            }, {});\n            mergeData(newStateData);\n            setIgnoreCountryChange(true);\n            triggerValidation();\n            setHasSelectedAddress(true);\n        },\n        [setHasSelectedAddress, triggerValidation, setData]\n    );\n\n    const onManualAddress = useCallback(() => {\n        setUseManualAddress(true);\n    }, []);\n\n    // Expose method expected by (parent) Address.tsx\n    addressRef.current.showValidation = () => {\n        triggerValidation();\n        if (showAddressSearch && !showAddressFields && !isValid) {\n            setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n        } else {\n            setSearchErrorMessage('');\n        }\n    };\n\n    /**\n     * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n     * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n     */\n    const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n        return !iOSFocusedField ? true : item === iOSFocusedField;\n    });\n\n    /**\n     * Effect that:\n     * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n     * - Applies validation on postalCode field in case it has any value\n     */\n    useEffect((): void => {\n        // if the country was set via setSearchData we don't want to trigger this\n        if (ignoreCountryChange) {\n            setIgnoreCountryChange(false);\n            return;\n        }\n\n        const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n        const newData = { ...data, stateOrProvince };\n\n        requiredFields.forEach(fieldName => {\n            handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n        });\n\n        if (newData.postalCode) {\n            handleChangeFor('postalCode', 'blur')(data.postalCode);\n        }\n    }, [data.country]);\n\n    /**\n     * Set the value of 'stateOrProvince' during the initial render if\n     * property is provided during the creation of the payment method\n     */\n    useEffect((): void => {\n        const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n        const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n        const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n        const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n        handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n    }, []);\n\n    useEffect((): void => {\n        const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n        const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n            const isOptional = optionalFields.includes(cur);\n            const isRequired = requiredFields.includes(cur);\n            const newValue = data[cur];\n            const initialValue = props.data[cur];\n            // recover default data values which are not requiredFields, or prefill with 'N/A'\n            const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n            const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n            if (value?.length) acc[cur] = value;\n            return acc;\n        }, {});\n\n        // In partial address mode, ensure country is included in output for regionalized labels/validation.\n        if (!(processedData as AddressData).country && initialCountryRef.current) {\n            (processedData as AddressData).country = initialCountryRef.current;\n        }\n\n        props.onChange({ data: processedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n    const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n        if (!requiredFields.includes(fieldName)) return null;\n\n        return (\n            <FieldContainer\n                key={fieldName}\n                allowedCountries={props.allowedCountries}\n                classNameModifiers={[...classNameModifiers, fieldName]}\n                data={dataWithCountry}\n                errors={errors}\n                valid={valid}\n                fieldName={fieldName}\n                onInput={handleChangeFor(fieldName, 'input')}\n                onBlur={handleChangeFor(fieldName, 'blur')}\n                onDropdownChange={handleChangeFor(fieldName, 'blur')}\n                specifications={specifications}\n                maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n                trimOnBlur={true}\n                disabled={!enabledFields.includes(fieldName)}\n                onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n                onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n            />\n        );\n    };\n\n    const getWrapper = group => (\n        <div className=\"adyen-checkout__field-group\">\n            {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n        </div>\n    );\n\n    const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={[label, 'address']} label={label} renderLabelAsSectionHeading>\n                {showAddressSearch && (\n                    <AddressSearch\n                        onAddressLookup={props.onAddressLookup}\n                        onAddressSelected={props.onAddressSelected}\n                        onSelect={setSearchData}\n                        onManualAddress={onManualAddress}\n                        externalErrorMessage={searchErrorMessage}\n                        hideManualButton={showAddressFields}\n                        showContextualElement={showContextualElement}\n                        contextualText={i18n.get('address.search.contextualText')}\n                        addressSearchDebounceMs={props.addressSearchDebounceMs}\n                    />\n                )}\n                {showAddressFields && (\n                    <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nAddress.defaultProps = {\n    countryCode: null,\n    validationRules: null,\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: ADDRESS_SCHEMA,\n    specifications: {},\n    onFieldFocusAnalytics: () => {},\n    onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","renderLabelAsSectionHeading","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/Await/Await.js

@@ -1,2 +1,2 @@
-import t from"../../../_virtual/index.js";import{createElement as e}from"../../../external/preact/dist/preact.js";import{useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import{usePaymentStatusTimer as n}from"../../../hooks/usePaymentStatusTimer/usePaymentStatusTimer.js";import{DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS as i,DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS as r,DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS as s,DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN as c}from"../../../hooks/usePaymentStatusTimer/constants.js";import l from"../Spinner/Spinner.js";import m from"../Button/Button.js";import d from"../ContentSeparator/ContentSeparator.js";import u from"../Countdown/index.js";import{AwaitFinalState as _}from"./components/AwaitFinalState.js";import{redirectToApp as p}from"../../../utils/urls.js";import{useAmount as y}from"../../../core/Context/AmountProvider.js";function h(i){const{i18n:r,loadingContext:s}=o(),{state:c,actions:h}=n({loadingContext:s,paymentData:i.paymentData,clientKey:i.clientKey,delay:i.delay,throttleTime:i.throttleTime,throttleInterval:i.throttleInterval,type:i.type,onError:i.onError,onComplete:i.onComplete,pollStatus:i.pollStatus,onActionHandled:i.onActionHandled}),{completed:w,expired:g,loading:k,percentage:f}=c,{onTick:v,onTimeUp:N}=h,{amount:C}=y();if(a(()=>{i.shouldRedirectAutomatically&&i.url&&p(i.url)},[i.shouldRedirectAutomatically,i.url]),g)return e(_,{image:"error",message:r.get("error.subtitle.payment")});if(w)return e(_,{image:"success",message:r.get("creditCard.success")});if(k)return e("div",{className:"adyen-checkout__await"},i.brandLogo&&e("img",{src:i.brandLogo,alt:i.type,className:"adyen-checkout__await__brand-logo"}),e(l,{inline:!1,size:"large"}));const T=r.get("wechatpay.timetopay").split("%@");return e("div",{className:t("adyen-checkout__await",`adyen-checkout__await--${i.type}`,i.classNameModifiers.map(t=>`adyen-checkout__await--${t}`))},i.brandLogo&&e("img",{src:i.brandLogo,alt:i.type,className:"adyen-checkout__await__brand-logo"}),!(!i.showAmount||null===C?.value||!C?.currency)&&e("div",{className:"adyen-checkout__await__amount"},r.amount(C.value,C.currency)),null!=i.messageText&&e("div",{className:"adyen-checkout__await__subtitle"},i.messageText),e("div",{className:"adyen-checkout__await__indicator-holder"},e("div",{className:"adyen-checkout__await__indicator-spinner"},e(l,{inline:!1,size:"medium"})),e("div",{className:"adyen-checkout__await__indicator-text"},i.awaitText)),i.showCountdownTimer&&e("div",{className:"adyen-checkout__await__countdown-holder"},e("div",{className:"adyen-checkout__await__progress"},e("span",{className:"adyen-checkout__await__percentage",style:{width:`${f}%`}})),e("div",{className:"adyen-checkout__await__countdown"},T[0]," ",e(u,{minutesFromNow:i.countdownTime,onTick:v,onCompleted:N})," ",T[1])),i.url&&!i.shouldRedirectAutomatically&&e("div",{className:"adyen-checkout__await__app-link"},e(d,null),e(m,{classNameModifiers:["await"],onClick:()=>p(i.url),label:r.get("openApp")})),i.instructions&&e("div",{className:"adyen-checkout__await__instructions"},"string"==typeof i.instructions?r.get(i.instructions):i.instructions?.()),i.endSlot&&e("div",{className:"adyen-checkout__await__end-slot"},i.endSlot()))}h.defaultProps={countdownTime:c,delay:s,throttleTime:r,throttleInterval:i,onError:()=>{},onComplete:()=>{},showCountdownTimer:!0,classNameModifiers:[],url:null};export{h as Await};
+import t from"../../../_virtual/index.js";import{createElement as e}from"../../../external/preact/dist/preact.js";import{useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import{usePaymentStatusTimer as n}from"../../../hooks/usePaymentStatusTimer/usePaymentStatusTimer.js";import{DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS as r,DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS as i,DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS as s,DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN as c}from"../../../hooks/usePaymentStatusTimer/constants.js";import l from"../Spinner/Spinner.js";import m from"../Button/Button.js";import d from"../ContentSeparator/ContentSeparator.js";import u from"../Countdown/index.js";import{AwaitFinalState as _}from"./components/AwaitFinalState.js";import{redirectToApp as p}from"../../../utils/urls.js";import{useAmount as y}from"../../../core/Context/AmountProvider.js";import{useA11yReporter as h}from"../../../core/Errors/useA11yReporter.js";function w(r){const{i18n:i,loadingContext:s}=o();h(r.awaitText);const{state:c,actions:w}=n({loadingContext:s,paymentData:r.paymentData,clientKey:r.clientKey,delay:r.delay,throttleTime:r.throttleTime,throttleInterval:r.throttleInterval,type:r.type,onError:r.onError,onComplete:r.onComplete,pollStatus:r.pollStatus,onActionHandled:r.onActionHandled}),{completed:g,expired:k,loading:f,percentage:v}=c,{onTick:N,onTimeUp:T}=w,{amount:C}=y();if(a(()=>{r.shouldRedirectAutomatically&&r.url&&p(r.url)},[r.shouldRedirectAutomatically,r.url]),k)return e(_,{image:"error",message:i.get("error.subtitle.payment")});if(g)return e(_,{image:"success",message:i.get("creditCard.success")});if(f)return e("div",{className:"adyen-checkout__await"},r.brandLogo&&e("img",{src:r.brandLogo,alt:r.type,className:"adyen-checkout__await__brand-logo"}),e(l,{inline:!1,size:"large"}));const x=i.get("wechatpay.timetopay").split("%@");return e("div",{className:t("adyen-checkout__await",`adyen-checkout__await--${r.type}`,r.classNameModifiers.map(t=>`adyen-checkout__await--${t}`))},r.brandLogo&&e("img",{src:r.brandLogo,alt:r.type,className:"adyen-checkout__await__brand-logo"}),!(!r.showAmount||null===C?.value||!C?.currency)&&e("div",{className:"adyen-checkout__await__amount"},i.amount(C.value,C.currency)),null!=r.messageText&&e("div",{className:"adyen-checkout__await__subtitle"},r.messageText),e("div",{className:"adyen-checkout__await__indicator-holder"},e("div",{className:"adyen-checkout__await__indicator-spinner"},e(l,{inline:!1,size:"medium"})),e("div",{className:"adyen-checkout__await__indicator-text"},r.awaitText)),r.showCountdownTimer&&e("div",{className:"adyen-checkout__await__countdown-holder"},e("div",{className:"adyen-checkout__await__progress"},e("span",{className:"adyen-checkout__await__percentage",style:{width:`${v}%`}})),e("div",{className:"adyen-checkout__await__countdown"},x[0]," ",e(u,{minutesFromNow:r.countdownTime,onTick:N,onCompleted:T})," ",x[1])),r.url&&!r.shouldRedirectAutomatically&&e("div",{className:"adyen-checkout__await__app-link"},e(d,null),e(m,{classNameModifiers:["await"],onClick:()=>p(r.url),label:i.get("openApp")})),r.instructions&&e("div",{className:"adyen-checkout__await__instructions"},"string"==typeof r.instructions?i.get(r.instructions):r.instructions?.()),r.endSlot&&e("div",{className:"adyen-checkout__await__end-slot"},r.endSlot()))}w.defaultProps={countdownTime:c,delay:s,throttleTime:i,throttleInterval:r,onError:()=>{},onComplete:()=>{},showCountdownTimer:!0,classNameModifiers:[],url:null};export{w as Await};
 //# sourceMappingURL=Await.js.map

package/dist/es/components/internal/Await/Await.js.map

@@ -1 +1 @@
-{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n    usePaymentStatusTimer,\n    DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n    DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n    DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n    DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport Spinner from '../../internal/Spinner';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport Countdown from '../Countdown';\nimport { AwaitFinalState } from './components/AwaitFinalState';\nimport { AwaitComponentProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './Await.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\n\nexport function Await(props: Readonly<AwaitComponentProps>) {\n    const { i18n, loadingContext } = useCoreContext();\n\n    const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n        loadingContext,\n        paymentData: props.paymentData,\n        clientKey: props.clientKey,\n        delay: props.delay,\n        throttleTime: props.throttleTime,\n        throttleInterval: props.throttleInterval,\n        type: props.type,\n        onError: props.onError,\n        onComplete: props.onComplete,\n        pollStatus: props.pollStatus,\n        onActionHandled: props.onActionHandled\n    });\n\n    const { completed, expired, loading, percentage } = timerState;\n    const { onTick, onTimeUp } = timerActions;\n    const { amount } = useAmount();\n\n    useEffect(() => {\n        if (props.shouldRedirectAutomatically && props.url) {\n            redirectToApp(props.url);\n        }\n    }, [props.shouldRedirectAutomatically, props.url]);\n\n    if (expired) {\n        return <AwaitFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n    }\n\n    if (completed) {\n        return <AwaitFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            {/* Everything is wrapped in !! so we evaluate the result as boolean,\n             otherwise we might just print the value or object as mistake */}\n            {!!(props.showAmount && amount?.value !== null && amount?.currency) && (\n                <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n            )}\n\n            {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && !props.shouldRedirectAutomatically && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n\n            {props.instructions && (\n                <div className=\"adyen-checkout__await__instructions\">\n                    {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n                </div>\n            )}\n\n            {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n    delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n    throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n    throttleInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n    onError: () => {},\n    onComplete: () => {},\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","type","onError","onComplete","pollStatus","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","amount","useAmount","useEffect","shouldRedirectAutomatically","url","redirectToApp","h","AwaitFinalState","image","message","get","div","className","brandLogo","img","src","alt","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"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"}
+{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n    usePaymentStatusTimer,\n    DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n    DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n    DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n    DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport Spinner from '../../internal/Spinner';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport Countdown from '../Countdown';\nimport { AwaitFinalState } from './components/AwaitFinalState';\nimport { AwaitComponentProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './Await.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\nimport { useA11yReporter } from '../../../core/Errors/useA11yReporter';\n\nexport function Await(props: Readonly<AwaitComponentProps>) {\n    const { i18n, loadingContext } = useCoreContext();\n    useA11yReporter(props.awaitText);\n\n    const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n        loadingContext,\n        paymentData: props.paymentData,\n        clientKey: props.clientKey,\n        delay: props.delay,\n        throttleTime: props.throttleTime,\n        throttleInterval: props.throttleInterval,\n        type: props.type,\n        onError: props.onError,\n        onComplete: props.onComplete,\n        pollStatus: props.pollStatus,\n        onActionHandled: props.onActionHandled\n    });\n\n    const { completed, expired, loading, percentage } = timerState;\n    const { onTick, onTimeUp } = timerActions;\n    const { amount } = useAmount();\n\n    useEffect(() => {\n        if (props.shouldRedirectAutomatically && props.url) {\n            redirectToApp(props.url);\n        }\n    }, [props.shouldRedirectAutomatically, props.url]);\n\n    if (expired) {\n        return <AwaitFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n    }\n\n    if (completed) {\n        return <AwaitFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            {/* Everything is wrapped in !! so we evaluate the result as boolean,\n             otherwise we might just print the value or object as mistake */}\n            {!!(props.showAmount && amount?.value !== null && amount?.currency) && (\n                <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n            )}\n\n            {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && !props.shouldRedirectAutomatically && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n\n            {props.instructions && (\n                <div className=\"adyen-checkout__await__instructions\">\n                    {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n                </div>\n            )}\n\n            {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n    delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n    throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n    throttleInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n    onError: () => {},\n    onComplete: () => {},\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","useA11yReporter","awaitText","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","type","onError","onComplete","pollStatus","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","amount","useAmount","useEffect","shouldRedirectAutomatically","url","redirectToApp","h","AwaitFinalState","image","message","get","div","className","brandLogo","img","src","alt","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"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"}

package/dist/es/components/internal/BrandIcons/BrandIcons.js

@@ -1,2 +1,2 @@
-import{createElement as a}from"../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../external/preact/hooks/dist/hooks.js";import e from"../../../_virtual/index.js";import{BrandImage as s}from"../BrandImage/BrandImage.js";import n from"./BrandIcons.module.scss.js";const m=({brandIcons:m,maxBrandsToShow:o=m.length,remainingBrandsLabel:l,className:t,containerType:i="flex",remainingBrandsLabelClassName:c,brandImageClassName:d,brandImageWrapperClassName:g,showIconOnError:p,smallIcons:I,renderBrandIcon:B})=>{const h=r(()=>m.slice(0,o),[m,o]),N=r(()=>m.slice(o),[m,o]),b=Boolean(l)||N.length>0;return a("div",{className:e(n.container,{[n.grid]:"grid"===i,[n.smallImgGrid]:I&&"grid"===i},t)},h.map(r=>B?B(r):a(s,{key:r.alt,src:r.src,alt:r.alt,wrapperClassName:g,imgClassName:e(n.img,{[n.smallImg]:I},d),showOnError:p})),b&&a("span",{className:e(n.remainingBrandsLabel,c)},l||`+ ${N.length}`))};export{m as BrandIcons};
+import{createElement as a}from"../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../external/preact/hooks/dist/hooks.js";import e from"../../../_virtual/index.js";import{BrandImage as s}from"../BrandImage/BrandImage.js";import n from"./BrandIcons.module.scss.js";const m=({brandIcons:m,maxBrandsToShow:l=m.length,remainingBrandsLabel:o,className:i,containerType:t="flex",remainingBrandsLabelClassName:d,brandImageClassName:c,brandImageWrapperClassName:g,showIconOnError:p,smallIcons:I,renderBrandIcon:h,ariaHidden:B})=>{const N=r(()=>m.slice(0,l),[m,l]),b=r(()=>m.slice(l),[m,l]),f=Boolean(o)||b.length>0;return a("ul",{className:e(n.container,{[n.grid]:"grid"===t,[n.smallImgGrid]:I&&"grid"===t},i),"aria-hidden":B},N.map(r=>h?h(r):a(s,{as:"li",key:r.alt,src:r.src,alt:r.alt,wrapperClassName:g,imgClassName:e(n.img,{[n.smallImg]:I},c),showOnError:p})),f&&a("li",{className:e(n.remainingBrandsLabel,d)},o||`+ ${b.length}`))};export{m as BrandIcons};
 //# sourceMappingURL=BrandIcons.js.map

package/dist/es/components/internal/BrandIcons/BrandIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandIcons.js","sources":["../../../../../src/components/internal/BrandIcons/BrandIcons.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandIcon } from './types';\nimport { BrandImage } from '../BrandImage';\n\nimport styles from './BrandIcons.module.scss';\n\nexport type BrandIconsProp = {\n    brandIcons: BrandIcon[];\n    suffix?: string;\n    maxBrandsToShow?: number;\n    remainingBrandsLabel?: string;\n    className?: string;\n    containerType?: 'flex' | 'grid';\n    remainingBrandsLabelClassName?: string;\n    brandImageWrapperClassName?: string;\n    brandImageClassName?: string;\n    showIconOnError?: boolean;\n    smallIcons?: boolean;\n    renderBrandIcon?: (brandIcon: BrandIcon) => h.JSX.Element;\n};\n\nexport const BrandIcons = ({\n    brandIcons,\n    maxBrandsToShow = brandIcons.length,\n    remainingBrandsLabel,\n    className,\n    containerType = 'flex',\n    remainingBrandsLabelClassName,\n    brandImageClassName,\n    brandImageWrapperClassName,\n    showIconOnError,\n    smallIcons,\n    renderBrandIcon\n}: Readonly<BrandIconsProp>) => {\n    const visibleBrands = useMemo(() => brandIcons.slice(0, maxBrandsToShow), [brandIcons, maxBrandsToShow]);\n    const remainingBrands = useMemo(() => brandIcons.slice(maxBrandsToShow), [brandIcons, maxBrandsToShow]);\n\n    const hasRemainingBrands = Boolean(remainingBrandsLabel) || remainingBrands.length > 0;\n\n    return (\n        <div\n            className={cn(\n                styles.container,\n                { [styles.grid]: containerType === 'grid', [styles.smallImgGrid]: smallIcons && containerType === 'grid' },\n                className\n            )}\n        >\n            {visibleBrands.map(brandIcon =>\n                renderBrandIcon ? (\n                    renderBrandIcon(brandIcon)\n                ) : (\n                    <BrandImage\n                        key={brandIcon.alt}\n                        src={brandIcon.src}\n                        alt={brandIcon.alt}\n                        wrapperClassName={brandImageWrapperClassName}\n                        imgClassName={cn(styles.img, { [styles.smallImg]: smallIcons }, brandImageClassName)}\n                        showOnError={showIconOnError}\n                    />\n                )\n            )}\n            {hasRemainingBrands && (\n                <span className={cn(styles.remainingBrandsLabel, remainingBrandsLabelClassName)}>\n                    {remainingBrandsLabel || `+ ${remainingBrands.length}`}\n                </span>\n            )}\n        </div>\n    );\n};\n"],"names":["BrandIcons","brandIcons","maxBrandsToShow","length","remainingBrandsLabel","className","containerType","remainingBrandsLabelClassName","brandImageClassName","brandImageWrapperClassName","showIconOnError","smallIcons","renderBrandIcon","visibleBrands","useMemo","slice","remainingBrands","hasRemainingBrands","Boolean","h","div","cn","styles","container","grid","smallImgGrid","map","brandIcon","BrandImage","key","alt","src","wrapperClassName","imgClassName","img","smallImg","showOnError","span"],"mappings":"6RAwBO,MAAMA,EAAa,EACtBC,aACAC,kBAAkBD,EAAWE,OAC7BC,uBACAC,YACAC,gBAAgB,OAChBC,gCACAC,sBACAC,6BACAC,kBACAC,aACAC,sBAEA,MAAMC,EAAgBC,EAAQ,IAAMb,EAAWc,MAAM,EAAGb,GAAkB,CAACD,EAAYC,IACjFc,EAAkBF,EAAQ,IAAMb,EAAWc,MAAMb,GAAkB,CAACD,EAAYC,IAEhFe,EAAqBC,QAAQd,IAAyBY,EAAgBb,OAAS,EAErF,OACIgB,EAACC,MAAAA,CACGf,UAAWgB,EACPC,EAAOC,UACP,CAAE,CAACD,EAAOE,MAAyB,SAAlBlB,EAA0B,CAACgB,EAAOG,cAAed,GAAgC,SAAlBL,GAChFD,IAGHQ,EAAca,IAAIC,GACff,EACIA,EAAgBe,GAEhBR,EAACS,EAAAA,CACGC,IAAKF,EAAUG,IACfC,IAAKJ,EAAUI,IACfD,IAAKH,EAAUG,IACfE,iBAAkBvB,EAClBwB,aAAcZ,EAAGC,EAAOY,IAAK,CAAE,CAACZ,EAAOa,UAAWxB,GAAcH,GAChE4B,YAAa1B,KAIxBO,GACGE,EAACkB,OAAAA,CAAKhC,UAAWgB,EAAGC,EAAOlB,qBAAsBG,IAC5CH,GAAwB,KAAKY,EAAgBb"}
+{"version":3,"file":"BrandIcons.js","sources":["../../../../../src/components/internal/BrandIcons/BrandIcons.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandIcon } from './types';\nimport { BrandImage } from '../BrandImage';\n\nimport styles from './BrandIcons.module.scss';\n\nexport type BrandIconsProp = {\n    brandIcons: BrandIcon[];\n    suffix?: string;\n    maxBrandsToShow?: number;\n    remainingBrandsLabel?: string;\n    className?: string;\n    containerType?: 'flex' | 'grid';\n    remainingBrandsLabelClassName?: string;\n    brandImageWrapperClassName?: string;\n    brandImageClassName?: string;\n    showIconOnError?: boolean;\n    smallIcons?: boolean;\n    ariaHidden?: boolean;\n    renderBrandIcon?: (brandIcon: BrandIcon) => h.JSX.Element;\n};\n\nexport const BrandIcons = ({\n    brandIcons,\n    maxBrandsToShow = brandIcons.length,\n    remainingBrandsLabel,\n    className,\n    containerType = 'flex',\n    remainingBrandsLabelClassName,\n    brandImageClassName,\n    brandImageWrapperClassName,\n    showIconOnError,\n    smallIcons,\n    renderBrandIcon,\n    ariaHidden\n}: Readonly<BrandIconsProp>) => {\n    const visibleBrands = useMemo(() => brandIcons.slice(0, maxBrandsToShow), [brandIcons, maxBrandsToShow]);\n    const remainingBrands = useMemo(() => brandIcons.slice(maxBrandsToShow), [brandIcons, maxBrandsToShow]);\n\n    const hasRemainingBrands = Boolean(remainingBrandsLabel) || remainingBrands.length > 0;\n\n    return (\n        <ul\n            className={cn(\n                styles.container,\n                { [styles.grid]: containerType === 'grid', [styles.smallImgGrid]: smallIcons && containerType === 'grid' },\n                className\n            )}\n            aria-hidden={ariaHidden}\n        >\n            {visibleBrands.map(brandIcon =>\n                renderBrandIcon ? (\n                    renderBrandIcon(brandIcon)\n                ) : (\n                    <BrandImage\n                        as=\"li\"\n                        key={brandIcon.alt}\n                        src={brandIcon.src}\n                        alt={brandIcon.alt}\n                        wrapperClassName={brandImageWrapperClassName}\n                        imgClassName={cn(styles.img, { [styles.smallImg]: smallIcons }, brandImageClassName)}\n                        showOnError={showIconOnError}\n                    />\n                )\n            )}\n            {hasRemainingBrands && (\n                <li className={cn(styles.remainingBrandsLabel, remainingBrandsLabelClassName)}>\n                    {remainingBrandsLabel || `+ ${remainingBrands.length}`}\n                </li>\n            )}\n        </ul>\n    );\n};\n"],"names":["BrandIcons","brandIcons","maxBrandsToShow","length","remainingBrandsLabel","className","containerType","remainingBrandsLabelClassName","brandImageClassName","brandImageWrapperClassName","showIconOnError","smallIcons","renderBrandIcon","ariaHidden","visibleBrands","useMemo","slice","remainingBrands","hasRemainingBrands","Boolean","h","ul","cn","styles","container","grid","smallImgGrid","aria-hidden","map","brandIcon","BrandImage","as","key","alt","src","wrapperClassName","imgClassName","img","smallImg","showOnError","li"],"mappings":"6RAyBO,MAAMA,EAAa,EACtBC,aACAC,kBAAkBD,EAAWE,OAC7BC,uBACAC,YACAC,gBAAgB,OAChBC,gCACAC,sBACAC,6BACAC,kBACAC,aACAC,kBACAC,iBAEA,MAAMC,EAAgBC,EAAQ,IAAMd,EAAWe,MAAM,EAAGd,GAAkB,CAACD,EAAYC,IACjFe,EAAkBF,EAAQ,IAAMd,EAAWe,MAAMd,GAAkB,CAACD,EAAYC,IAEhFgB,EAAqBC,QAAQf,IAAyBa,EAAgBd,OAAS,EAErF,OACIiB,EAACC,KAAAA,CACGhB,UAAWiB,EACPC,EAAOC,UACP,CAAE,CAACD,EAAOE,MAAyB,SAAlBnB,EAA0B,CAACiB,EAAOG,cAAef,GAAgC,SAAlBL,GAChFD,GAEJsB,cAAad,GAEZC,EAAcc,IAAIC,GACfjB,EACIA,EAAgBiB,GAEhBT,EAACU,EAAAA,CACGC,GAAG,KACHC,IAAKH,EAAUI,IACfC,IAAKL,EAAUK,IACfD,IAAKJ,EAAUI,IACfE,iBAAkB1B,EAClB2B,aAAcd,EAAGC,EAAOc,IAAK,CAAE,CAACd,EAAOe,UAAW3B,GAAcH,GAChE+B,YAAa7B,KAIxBQ,GACGE,EAACoB,KAAAA,CAAGnC,UAAWiB,EAAGC,EAAOnB,qBAAsBG,IAC1CH,GAAwB,KAAKa,EAAgBd"}

package/dist/es/components/internal/BrandImage/BrandImage.js

@@ -1,2 +1,2 @@
-import{createElement as r}from"../../../external/preact/dist/preact.js";import{useState as a}from"../../../external/preact/hooks/dist/hooks.js";import e from"../../../_virtual/index.js";import t from"../Img/Img.js";const s=({src:s,alt:o,wrapperClassName:m="",imgClassName:p="",showOnError:n})=>{const[c,i]=a(!1),d=e("adyen-checkout-brand-wrapper",m,n?{}:{"adyen-checkout-brand-wrapper--error":c});return r("span",{className:d,"data-testid":"brand-image-wrapper"},r(t,{className:p,src:s,alt:o,onError:()=>i(!0)}))};export{s as BrandImage};
+import{createElement as r}from"../../../external/preact/dist/preact.js";import{useState as a}from"../../../external/preact/hooks/dist/hooks.js";import e from"../../../_virtual/index.js";import s from"../Img/Img.js";const t=({src:t,alt:o,wrapperClassName:m="",imgClassName:p="",showOnError:n,as:c})=>{const[i,d]=a(!1),l=e("adyen-checkout-brand-wrapper",m,n?{}:{"adyen-checkout-brand-wrapper--error":i});return r(c??"span",{className:l,"data-testid":"brand-image-wrapper"},r(s,{className:p,src:t,alt:o,onError:()=>d(!0)}))};export{t as BrandImage};
 //# sourceMappingURL=BrandImage.js.map

package/dist/es/components/internal/BrandImage/BrandImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandImage.js","sources":["../../../../../src/components/internal/BrandImage/BrandImage.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport Img from '../Img';\nimport './BrandImage.scss';\n\ninterface BrandImageProps {\n    src: string;\n    alt: string;\n    wrapperClassName?: string;\n    imgClassName?: string;\n    showOnError?: boolean;\n}\n\nexport const BrandImage = ({ src, alt, wrapperClassName = '', imgClassName = '', showOnError }: Readonly<BrandImageProps>) => {\n    const [hasError, setHasError] = useState(false);\n    const classesOnError = showOnError ? {} : { 'adyen-checkout-brand-wrapper--error': hasError };\n    const classes = cx('adyen-checkout-brand-wrapper', wrapperClassName, classesOnError);\n\n    return (\n        <span className={classes} data-testid=\"brand-image-wrapper\">\n            <Img className={imgClassName} src={src} alt={alt} onError={() => setHasError(true)} />\n        </span>\n    );\n};\n"],"names":["BrandImage","src","alt","wrapperClassName","imgClassName","showOnError","hasError","setHasError","useState","classes","cx","h","span","className","data-testid","Img","onError"],"mappings":"uNAcO,MAAMA,EAAa,EAAGC,MAAKC,MAAKC,mBAAmB,GAAIC,eAAe,GAAIC,kBAC7E,MAAOC,EAAUC,GAAeC,GAAS,GAEnCC,EAAUC,EAAG,+BAAgCP,EAD5BE,EAAc,GAAK,CAAE,sCAAuCC,IAGnF,OACIK,EAACC,OAAAA,CAAKC,UAAWJ,EAASK,cAAY,uBAClCH,EAACI,EAAAA,CAAIF,UAAWT,EAAcH,IAAKA,EAAKC,IAAKA,EAAKc,QAAS,IAAMT,GAAY"}
+{"version":3,"file":"BrandImage.js","sources":["../../../../../src/components/internal/BrandImage/BrandImage.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport Img from '../Img';\nimport './BrandImage.scss';\nimport { ElementType } from 'preact/compat';\n\ninterface BrandImageProps {\n    src: string;\n    alt: string;\n    wrapperClassName?: string;\n    imgClassName?: string;\n    showOnError?: boolean;\n    as?: ElementType;\n}\n\nexport const BrandImage = ({ src, alt, wrapperClassName = '', imgClassName = '', showOnError, as }: Readonly<BrandImageProps>) => {\n    const [hasError, setHasError] = useState(false);\n    const classesOnError = showOnError ? {} : { 'adyen-checkout-brand-wrapper--error': hasError };\n    const classes = cx('adyen-checkout-brand-wrapper', wrapperClassName, classesOnError);\n\n    const Component = as ?? 'span';\n\n    return (\n        <Component className={classes} data-testid=\"brand-image-wrapper\">\n            <Img className={imgClassName} src={src} alt={alt} onError={() => setHasError(true)} />\n        </Component>\n    );\n};\n"],"names":["BrandImage","src","alt","wrapperClassName","imgClassName","showOnError","as","hasError","setHasError","useState","classes","cx","h","Component","className","data-testid","Img","onError"],"mappings":"6NAgBaA,EAAa,EAAGC,MAAKC,MAAKC,mBAAmB,GAAIC,eAAe,GAAIC,cAAaC,SAC1F,MAAOC,EAAUC,GAAeC,GAAS,GAEnCC,EAAUC,EAAG,+BAAgCR,EAD5BE,EAAc,GAAK,CAAE,sCAAuCE,IAKnF,OACIK,EAHcN,GAAM,OAGnBO,CAAUC,UAAWJ,EAASK,cAAY,uBACvCH,EAACI,EAAAA,CAAIF,UAAWV,EAAcH,IAAKA,EAAKC,IAAKA,EAAKe,QAAS,IAAMT,GAAY"}

package/dist/es/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useMemo as r,useEffect as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../context/useClickToPayContext.js";import{useCoreContext as s}from"../../../../../../core/Context/CoreProvider.js";import i from"../../../../../../core/Context/useImage.js";import o from"../../../../../../utils/useForm/useForm.js";import d from"../../../../../../utils/isMobile.js";import c from"../../../../FormFields/Field/Field.js";import l from"../../../../FormFields/Select/Select.js";const m=["srcDigitalCardId"],n=({cardSelected:n,cards:p,errorMessage:C,onChangeCard:g})=>{const{i18n:u}=s(),f=i(),{status:x}=t(),{handleChangeFor:h,data:F}=o({schema:m,defaultData:{srcDigitalCardId:n.srcDigitalCardId}}),j=r(()=>p.map(e=>({icon:e.artUri||f()(e.scheme),name:`${d()?"":e.title} •••• ${e.panLastFour} `,secondaryText:e.isExpired&&u.get("ctp.cards.expiredCard"),id:e.srcDigitalCardId,disabled:e.isExpired})),[p]);return a(()=>{const{srcDigitalCardId:e}=F,r=p.find(r=>r.srcDigitalCardId===e);g(r)},[F,g]),e(c,{name:"clickToPayCards",className:"adyen-checkout-ctp__cards-list-field",errorMessage:C,readOnly:"loading"===x,label:u.get("ctp.cards.subtitle")},e(l,{items:j,selectedValue:F.srcDigitalCardId,name:"clickToPayCards",filterable:!1,className:"adyen-checkout-ctp__cards-list-dropdown",readonly:"loading"===x,onChange:h("srcDigitalCardId")}))};export{n as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useMemo as r,useEffect as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../context/useClickToPayContext.js";import{useCoreContext as s}from"../../../../../../core/Context/CoreProvider.js";import i from"../../../../../../core/Context/useImage.js";import o from"../../../../../../utils/useForm/useForm.js";import"../../../../SecuredFields/lib/CSF/utils/userAgent.js";import d from"../../../../../../utils/isMobile.js";import c from"../../../../FormFields/Field/Field.js";import l from"../../../../FormFields/Select/Select.js";const m=["srcDigitalCardId"],n=({cardSelected:n,cards:p,errorMessage:C,onChangeCard:u})=>{const{i18n:g}=s(),f=i(),{status:F}=t(),{handleChangeFor:x,data:h}=o({schema:m,defaultData:{srcDigitalCardId:n.srcDigitalCardId}}),j=r(()=>p.map(e=>({icon:e.artUri||f()(e.scheme),name:`${d()?"":e.title} •••• ${e.panLastFour} `,secondaryText:e.isExpired&&g.get("ctp.cards.expiredCard"),id:e.srcDigitalCardId,disabled:e.isExpired})),[p]);return a(()=>{const{srcDigitalCardId:e}=h,r=p.find(r=>r.srcDigitalCardId===e);u(r)},[h,u]),e(c,{name:"clickToPayCards",className:"adyen-checkout-ctp__cards-list-field",errorMessage:C,readOnly:"loading"===F,label:g.get("ctp.cards.subtitle")},e(l,{items:j,selectedValue:h.srcDigitalCardId,name:"clickToPayCards",filterable:!1,className:"adyen-checkout-ctp__cards-list-dropdown",readonly:"loading"===F,onChange:x("srcDigitalCardId")}))};export{n as default};
 //# sourceMappingURL=CtPCardsList.js.map

package/dist/es/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: Readonly<CtPCardsListProps>) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field\n            name=\"clickToPayCards\"\n            className=\"adyen-checkout-ctp__cards-list-field\"\n            errorMessage={errorMessage}\n            readOnly={status === 'loading'}\n            label={i18n.get('ctp.cards.subtitle')}\n        >\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'clickToPayCards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","className","readOnly","label","Select","selectedValue","filterable","readonly","onChange"],"mappings":"2kBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,EAAQ,IACXf,EAAMgB,IAAIC,KACbC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,aAEpB,CAAC1B,IAQJ,OANA8B,EAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,KAAKd,GAAQA,EAAKJ,mBAAqBA,GAC1DX,EAAae,IACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CACGZ,KAAK,kBACLa,UAAU,uCACVjC,aAAcA,EACdkC,SAAqB,YAAX5B,EACV6B,MAAOjC,EAAKwB,IAAI,uBAEhBK,EAACK,EAAAA,CACGvB,MAAOA,EACPwB,cAAe5B,EAAK,iBACpBW,KAAM,kBACNkB,YAAY,EACZL,UAAW,0CACXM,SAAqB,YAAXjC,EACVkC,SAAUhC,EAAgB"}
+{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: Readonly<CtPCardsListProps>) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field\n            name=\"clickToPayCards\"\n            className=\"adyen-checkout-ctp__cards-list-field\"\n            errorMessage={errorMessage}\n            readOnly={status === 'loading'}\n            label={i18n.get('ctp.cards.subtitle')}\n        >\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'clickToPayCards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","className","readOnly","label","Select","selectedValue","filterable","readonly","onChange"],"mappings":"woBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,EAAQ,IACXf,EAAMgB,IAAIC,KACbC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,aAEpB,CAAC1B,IAQJ,OANA8B,EAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,KAAKd,GAAQA,EAAKJ,mBAAqBA,GAC1DX,EAAae,IACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CACGZ,KAAK,kBACLa,UAAU,uCACVjC,aAAcA,EACdkC,SAAqB,YAAX5B,EACV6B,MAAOjC,EAAKwB,IAAI,uBAEhBK,EAACK,EAAAA,CACGvB,MAAOA,EACPwB,cAAe5B,EAAK,iBACpBW,KAAM,kBACNkB,YAAY,EACZL,UAAW,0CACXM,SAAqB,YAAXjC,EACVkC,SAAUhC,EAAgB"}

package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as a}from"./validate.js";import{useCoreContext as n}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useForm.js";import p from"../../../FormFields/Field/Field.js";import l from"../../../FormFields/InputEmail.js";const d=d=>{const{i18n:u}=n(),{handleChangeFor:m,data:c,triggerValidation:g,valid:h,errors:f,isValid:L}=i({schema:["shopperLogin"],rules:a}),F=r({validateInput:null}),[j,v]=o(!1),b=s(()=>{v(!0),g()},[g]);t(()=>{c.shopperLogin&&v(!0)},[c.shopperLogin]),t(()=>{F.current.validateInput=b,d.onSetInputHandlers(F.current)},[b,d.onSetInputHandlers]);const E=s(e=>{"Enter"===e.key&&d.onPressEnter()},[d.onPressEnter]);return t(()=>{d.onChange({data:c,valid:h,errors:f,isValid:L})},[c,h,f]),e(p,{name:"shopperLogin",label:u.get("ctp.login.inputLabel"),errorMessage:j?d.errorMessage||!!f.shopperLogin:null,classNameModifiers:["shopperLogin"]},e(l,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:c.shopperLogin,disabled:d.disabled,onInput:m("shopperLogin","input"),onBlur:m("shopperLogin","blur"),onKeyPress:E}))};export{d as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as n}from"./validate.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as l}from"../../../../../utils/setFocus.js";import p from"../../../FormFields/Field/Field.js";import u from"../../../FormFields/InputEmail.js";const d=d=>{const{i18n:m}=a(),c=r(null),{handleChangeFor:g,data:h,triggerValidation:f,valid:L,errors:F,isValid:v}=i({schema:["shopperLogin"],rules:n,formHolder:c}),j=r({validateInput:null,focusInput:null}),[I,b]=o(!1),E=s(()=>{b(!0),f()},[f]);t(()=>{c.current&&d.errorMessage&&l(c.current,"shopperLogin")},[d.errorMessage]),t(()=>{h.shopperLogin&&b(!0)},[h.shopperLogin]),t(()=>{j.current.validateInput=E,d.onSetInputHandlers(j.current)},[E,d.onSetInputHandlers]);const k=s(e=>{"Enter"===e.key&&d.onPressEnter()},[d.onPressEnter]);return t(()=>{d.onChange({data:h,valid:L,errors:F,isValid:v})},[h,L,F]),e("div",{ref:c},e(p,{name:"shopperLogin",label:m.get("ctp.login.inputLabel"),errorMessage:I?d.errorMessage||!!F.shopperLogin:null,classNameModifiers:["shopperLogin"],errorLive:!0},e(u,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:h.shopperLogin,disabled:d.disabled,onInput:g("shopperLogin","input"),onBlur:g("shopperLogin","blur"),onKeyPress:k})))};export{d as default};
 //# sourceMappingURL=CtPLoginInput.js.map

package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport useForm from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n    disabled: boolean;\n    errorMessage?: string;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n    shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n    validateInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['shopperLogin'];\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useForm<CtPLoginInputDataState>({\n        schema: formSchema,\n        rules: loginValidationRules\n    });\n    const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null });\n    const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsLoginInputDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    useEffect(() => {\n        if (data.shopperLogin) setIsLoginInputDirty(true);\n    }, [data.shopperLogin]);\n\n    useEffect(() => {\n        loginInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(loginInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <Field\n            name=\"shopperLogin\"\n            label={i18n.get('ctp.login.inputLabel')}\n            errorMessage={isLoginInputDirty ? props.errorMessage || !!errors.shopperLogin : null}\n            classNameModifiers={['shopperLogin']}\n        >\n            <InputEmail\n                name={'shopperLogin'}\n                autocorrect={'off'}\n                spellcheck={false}\n                value={data.shopperLogin}\n                disabled={props.disabled}\n                onInput={handleChangeFor('shopperLogin', 'input')}\n                onBlur={handleChangeFor('shopperLogin', 'blur')}\n                onKeyPress={handleOnKeyPress}\n            />\n        </Field>\n    );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","handleChangeFor","data","triggerValidation","valid","errors","isValid","useForm","schema","rules","loginValidationRules","loginInputHandlersRef","useRef","validateInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","shopperLogin","current","onSetInputHandlers","handleOnKeyPress","event","key","onPressEnter","onChange","h","Field","name","label","get","errorMessage","classNameModifiers","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress"],"mappings":"oeA0BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAgC,CACzGC,OAFe,CAAC,gBAGhBC,MAAOC,IAELC,EAAwBC,EAA8B,CAAEC,cAAe,QACtEC,EAAmBC,GAAwBC,GAAkB,GAE9DH,EAAgBI,EAAY,KAC9BF,GAAqB,GACrBZ,KACD,CAACA,IAEJe,EAAU,KACFhB,EAAKiB,cAAcJ,GAAqB,IAC7C,CAACb,EAAKiB,eAETD,EAAU,KACNP,EAAsBS,QAAQP,cAAgBA,EAC9Cf,EAAMuB,mBAAmBV,EAAsBS,UAChD,CAACP,EAAef,EAAMuB,qBAEzB,MAAMC,EAAmBL,EACpBM,IACqB,UAAdA,EAAMC,KACD1B,EAAM2B,gBAGnB,CAAC3B,EAAM2B,eAOX,OAJAP,EAAU,KACNpB,EAAM4B,SAAS,CAAExB,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbsB,EAACC,EAAAA,CACGC,KAAK,eACLC,MAAO/B,EAAKgC,IAAI,wBAChBC,aAAclB,EAAoBhB,EAAMkC,gBAAkB3B,EAAOc,aAAe,KAChFc,mBAAoB,CAAC,iBAErBN,EAACO,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOnC,EAAKiB,aACZmB,SAAUxC,EAAMwC,SAChBC,QAAStC,EAAgB,eAAgB,SACzCuC,OAAQvC,EAAgB,eAAgB,QACxCwC,WAAYnB"}
+{"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\nimport { setFocusOnField } from '../../../../../utils/setFocus';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n    disabled: boolean;\n    errorMessage?: string;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n    shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n    validateInput(): void;\n    focusInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['shopperLogin'];\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useFormWithA11y<CtPLoginInputDataState>({\n        schema: formSchema,\n        rules: loginValidationRules,\n        formHolder: containerRef\n    });\n    const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null, focusInput: null });\n    const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsLoginInputDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    useEffect(() => {\n        if (containerRef.current && props.errorMessage) {\n            setFocusOnField(containerRef.current, 'shopperLogin');\n        }\n    }, [props.errorMessage]);\n\n    useEffect(() => {\n        if (data.shopperLogin) setIsLoginInputDirty(true);\n    }, [data.shopperLogin]);\n\n    useEffect(() => {\n        loginInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(loginInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <div ref={containerRef}>\n            <Field\n                name=\"shopperLogin\"\n                label={i18n.get('ctp.login.inputLabel')}\n                errorMessage={isLoginInputDirty ? props.errorMessage || !!errors.shopperLogin : null}\n                classNameModifiers={['shopperLogin']}\n                errorLive={true}\n            >\n                <InputEmail\n                    name={'shopperLogin'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.shopperLogin}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('shopperLogin', 'input')}\n                    onBlur={handleChangeFor('shopperLogin', 'blur')}\n                    onKeyPress={handleOnKeyPress}\n                />\n            </Field>\n        </div>\n    );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","useFormWithA11y","schema","rules","loginValidationRules","formHolder","loginInputHandlersRef","validateInput","focusInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","current","errorMessage","setFocusOnField","shopperLogin","onSetInputHandlers","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","ref","Field","name","label","get","classNameModifiers","errorLive","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress"],"mappings":"+iBA4BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,IAEXC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAwC,CACjHC,OAHe,CAAC,gBAIhBC,MAAOC,EACPC,WAAYZ,IAEVa,EAAwBZ,EAA8B,CAAEa,cAAe,KAAMC,WAAY,QACxFC,EAAmBC,GAAwBC,GAAkB,GAE9DJ,EAAgBK,EAAY,KAC9BF,GAAqB,GACrBb,KACD,CAACA,IAEJgB,EAAU,KACFpB,EAAaqB,SAAWxB,EAAMyB,cAC9BC,EAAgBvB,EAAaqB,QAAS,iBAE3C,CAACxB,EAAMyB,eAEVF,EAAU,KACFjB,EAAKqB,cAAcP,GAAqB,IAC7C,CAACd,EAAKqB,eAETJ,EAAU,KACNP,EAAsBQ,QAAQP,cAAgBA,EAC9CjB,EAAM4B,mBAAmBZ,EAAsBQ,UAChD,CAACP,EAAejB,EAAM4B,qBAEzB,MAAMC,EAAmBP,EACpBQ,IACqB,UAAdA,EAAMC,KACD/B,EAAMgC,gBAGnB,CAAChC,EAAMgC,eAOX,OAJAT,EAAU,KACNvB,EAAMiC,SAAS,CAAE3B,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbyB,EAACC,MAAAA,CAAIC,IAAKjC,GACN+B,EAACG,EAAAA,CACGC,KAAK,eACLC,MAAOtC,EAAKuC,IAAI,wBAChBf,aAAcN,EAAoBnB,EAAMyB,gBAAkBhB,EAAOkB,aAAe,KAChFc,mBAAoB,CAAC,gBACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOxC,EAAKqB,aACZoB,SAAU/C,EAAM+C,SAChBC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,QACxC6C,WAAYrB"}