@adyen/adyen-web 6.18.0 → 6.19.0

package/dist/es-legacy/components/internal/ButtonGroup/ButtonGroup.js

@@ -1,2 +1,2 @@
-import e from"../../../_virtual/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";const a=({options:a=[],name:n,onChange:o})=>t("div",{className:"adyen-checkout__button-group"},a.map((({label:a,selected:c,value:s,disabled:d},u)=>t("label",{key:`${n}${u}`,className:e({"adyen-checkout__button":!0,"adyen-checkout__button--selected":c,"adyen-checkout__button--disabled":d})},t("input",{type:"radio",className:"adyen-checkout__button-group__input",value:s,checked:c,onChange:o,disabled:d}),t("span",{className:"adyen-checkout__button-text"},a)))));export{a as default};
+import e from"../../../_virtual/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";const a=({options:a=[],name:n,onChange:o})=>t("div",{className:"adyen-checkout__button-group"},a.map(({label:a,selected:c,value:s,disabled:d},u)=>t("label",{key:`${n}${u}`,className:e({"adyen-checkout__button":!0,"adyen-checkout__button--selected":c,"adyen-checkout__button--disabled":d})},t("input",{type:"radio",className:"adyen-checkout__button-group__input",value:s,checked:c,onChange:o,disabled:d}),t("span",{className:"adyen-checkout__button-text"},a))));export{a as default};
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/es-legacy/components/internal/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../../../../../src/components/internal/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import cx from 'classnames';\nimport './ButtonGroup.scss';\nimport { h } from 'preact';\n\nconst ButtonGroup = ({ options = [], name, onChange }) => (\n    <div className=\"adyen-checkout__button-group\">\n        {options.map(({ label, selected, value, disabled }, index) => (\n            <label\n                key={`${name}${index}`}\n                className={cx({\n                    'adyen-checkout__button': true,\n                    'adyen-checkout__button--selected': selected,\n                    'adyen-checkout__button--disabled': disabled\n                })}\n            >\n                <input\n                    type=\"radio\"\n                    className=\"adyen-checkout__button-group__input\"\n                    value={value}\n                    checked={selected}\n                    onChange={onChange}\n                    disabled={disabled}\n                />\n                <span className=\"adyen-checkout__button-text\">{label}</span>\n            </label>\n        ))}\n    </div>\n);\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","options","name","onChange","h","div","className","map","label","selected","value","disabled","index","key","cx","input","type","checked","span"],"mappings":"kHAIMA,MAAAA,EAAc,EAAGC,UAAU,GAAIC,OAAMC,cACvCC,EAACC,MAAAA,CAAIC,UAAU,gCACVL,EAAQM,KAAI,EAAGC,QAAOC,WAAUC,QAAOC,YAAYC,IAChDR,EAACI,QAAAA,CACGK,IAAK,GAAGX,IAAOU,IACfN,UAAWQ,EAAG,CACV,0BAA0B,EAC1B,mCAAoCL,EACpC,mCAAoCE,KAGxCP,EAACW,QAAAA,CACGC,KAAK,QACLV,UAAU,sCACVI,MAAOA,EACPO,QAASR,EACTN,SAAUA,EACVQ,SAAUA,IAEdP,EAACc,OAAAA,CAAKZ,UAAU,+BAA+BE"}
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../src/components/internal/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import cx from 'classnames';\nimport './ButtonGroup.scss';\nimport { h } from 'preact';\n\nconst ButtonGroup = ({ options = [], name, onChange }) => (\n    <div className=\"adyen-checkout__button-group\">\n        {options.map(({ label, selected, value, disabled }, index) => (\n            <label\n                key={`${name}${index}`}\n                className={cx({\n                    'adyen-checkout__button': true,\n                    'adyen-checkout__button--selected': selected,\n                    'adyen-checkout__button--disabled': disabled\n                })}\n            >\n                <input\n                    type=\"radio\"\n                    className=\"adyen-checkout__button-group__input\"\n                    value={value}\n                    checked={selected}\n                    onChange={onChange}\n                    disabled={disabled}\n                />\n                <span className=\"adyen-checkout__button-text\">{label}</span>\n            </label>\n        ))}\n    </div>\n);\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","options","name","onChange","h","div","className","map","label","selected","value","disabled","index","key","cx","input","type","checked","span"],"mappings":"kHAIA,MAAMA,EAAc,EAAGC,UAAU,GAAIC,OAAMC,cACvCC,EAACC,MAAAA,CAAIC,UAAU,gCACVL,EAAQM,IAAI,EAAGC,QAAOC,WAAUC,QAAOC,YAAYC,IAChDR,EAACI,QAAAA,CACGK,IAAK,GAAGX,IAAOU,IACfN,UAAWQ,EAAG,CACV,0BAA0B,EAC1B,mCAAoCL,EACpC,mCAAoCE,KAGxCP,EAACW,QAAAA,CACGC,KAAK,QACLV,UAAU,sCACVI,MAAOA,EACPO,QAASR,EACTN,SAAUA,EACVQ,SAAUA,IAEdP,EAACc,OAAAA,CAAKZ,UAAU,+BAA+BE"}

package/dist/es-legacy/components/internal/ClickToPay/ClickToPayComponent.js

@@ -1,2 +1,2 @@
-import{createElement as o}from"../../../external/preact/dist/preact.js";import{useEffect as t,useCallback as e}from"../../../external/preact/hooks/dist/hooks.js";import{CtpState as n}from"./services/ClickToPayService.js";import r from"./context/useClickToPayContext.js";import s from"./components/CtPOneTimePassword/CtPOneTimePassword.js";import a from"./components/CtPCards/CtPCards.js";import i from"./components/CtPSection/CtPSection.js";import p from"./components/CtPLoader/CtPLoader.js";import m from"./components/CtPLogin/CtPLogin.js";import c from"./services/sdks/SrciError.js";const d=({onDisplayCardComponent:d})=>{const{ctpState:l,onReady:C,startIdentityValidation:P,logoutShopper:f}=r();t((()=>{[n.OneTimePassword,n.Login,n.Ready].includes(l)&&C()}),[l,C]),t((()=>{l===n.ShopperIdentified&&async function(){try{await P()}catch(o){o instanceof c&&console.warn(`CtP - Identity Validation error: ${o.toString()}`),await f()}}()}),[l]);const y=e((o=>{"Enter"===o.key&&(o.preventDefault(),o.stopPropagation())}),[]);return l===n.NotAvailable?null:o(i,{onEnterKeyPress:y},[n.Loading,n.ShopperIdentified].includes(l)&&o(p,null),l===n.OneTimePassword&&o(s,{onDisplayCardComponent:d}),l===n.Ready&&o(a,{onDisplayCardComponent:d}),l===n.Login&&o(m,null))};export{d as default};
+import{createElement as o}from"../../../external/preact/dist/preact.js";import{useEffect as t,useCallback as e}from"../../../external/preact/hooks/dist/hooks.js";import{CtpState as n}from"./services/ClickToPayService.js";import r from"./context/useClickToPayContext.js";import s from"./components/CtPOneTimePassword/CtPOneTimePassword.js";import a from"./components/CtPCards/CtPCards.js";import i from"./components/CtPSection/CtPSection.js";import p from"./components/CtPLoader/CtPLoader.js";import m from"./components/CtPLogin/CtPLogin.js";import c from"./services/sdks/SrciError.js";const d=({onDisplayCardComponent:d})=>{const{ctpState:l,onReady:C,startIdentityValidation:P,logoutShopper:f}=r();t(()=>{[n.OneTimePassword,n.Login,n.Ready].includes(l)&&C()},[l,C]),t(()=>{l===n.ShopperIdentified&&async function(){try{await P()}catch(o){o instanceof c&&console.warn(`CtP - Identity Validation error: ${o.toString()}`),await f()}}()},[l]);const y=e(o=>{"Enter"===o.key&&(o.preventDefault(),o.stopPropagation())},[]);return l===n.NotAvailable?null:o(i,{onEnterKeyPress:y},[n.Loading,n.ShopperIdentified].includes(l)&&o(p,null),l===n.OneTimePassword&&o(s,{onDisplayCardComponent:d}),l===n.Ready&&o(a,{onDisplayCardComponent:d}),l===n.Login&&o(m,null))};export{d as default};
 //# sourceMappingURL=ClickToPayComponent.js.map

package/dist/es-legacy/components/internal/ClickToPay/ClickToPayComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickToPayComponent.js","sources":["../../../../../src/components/internal/ClickToPay/ClickToPayComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect } from 'preact/hooks';\nimport { CtpState } from './services/ClickToPayService';\nimport useClickToPayContext from './context/useClickToPayContext';\nimport CtPOneTimePassword from './components/CtPOneTimePassword';\nimport CtPCards from './components/CtPCards';\nimport CtPSection from './components/CtPSection';\nimport CtPLoader from './components/CtPLoader';\nimport CtPLogin from './components/CtPLogin';\nimport SrciError from './services/sdks/SrciError';\n\ntype ClickToPayComponentProps = {\n    onDisplayCardComponent?(): void;\n};\n\nconst ClickToPayComponent = ({ onDisplayCardComponent }: ClickToPayComponentProps): h.JSX.Element => {\n    const { ctpState, onReady, startIdentityValidation, logoutShopper } = useClickToPayContext();\n\n    useEffect(() => {\n        if ([CtpState.OneTimePassword, CtpState.Login, CtpState.Ready].includes(ctpState)) {\n            onReady();\n        }\n    }, [ctpState, onReady]);\n\n    useEffect(() => {\n        async function sendOneTimePassword() {\n            try {\n                await startIdentityValidation();\n            } catch (error) {\n                if (error instanceof SrciError) console.warn(`CtP - Identity Validation error: ${error.toString()}`);\n                await logoutShopper();\n            }\n        }\n        if (ctpState === CtpState.ShopperIdentified) {\n            void sendOneTimePassword();\n        }\n    }, [ctpState]);\n\n    /**\n     * We capture the ENTER keypress within the ClickToPay component because we do not want to propagate the event up to the UIElement\n     * UIElement would perform the payment flow (by calling .submit), which is not relevant/supported by Click to Pay\n     */\n    const handleEnterKeyPress = useCallback((event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault(); // Prevent <form> submission if Component is placed inside a form\n            event.stopPropagation(); // Prevent global BaseElement keypress event to be triggered\n        }\n    }, []);\n\n    if (ctpState === CtpState.NotAvailable) {\n        return null;\n    }\n\n    return (\n        <CtPSection onEnterKeyPress={handleEnterKeyPress}>\n            {[CtpState.Loading, CtpState.ShopperIdentified].includes(ctpState) && <CtPLoader />}\n            {ctpState === CtpState.OneTimePassword && <CtPOneTimePassword onDisplayCardComponent={onDisplayCardComponent} />}\n            {ctpState === CtpState.Ready && <CtPCards onDisplayCardComponent={onDisplayCardComponent} />}\n            {ctpState === CtpState.Login && <CtPLogin />}\n        </CtPSection>\n    );\n};\n\nexport default ClickToPayComponent;\n"],"names":["ClickToPayComponent","onDisplayCardComponent","ctpState","onReady","startIdentityValidation","logoutShopper","useClickToPayContext","useEffect","CtpState","OneTimePassword","Login","Ready","includes","ShopperIdentified","async","error","SrciError","console","warn","toString","sendOneTimePassword","handleEnterKeyPress","useCallback","event","key","preventDefault","stopPropagation","NotAvailable","h","CtPSection","onEnterKeyPress","Loading","CtPLoader","CtPOneTimePassword","CtPCards","CtPLogin"],"mappings":"ykBAeA,MAAMA,EAAsB,EAAGC,6BAC3B,MAAMC,SAAEA,EAAQC,QAAEA,EAAOC,wBAAEA,EAAuBC,cAAEA,GAAkBC,IAEtEC,GAAU,KACF,CAACC,EAASC,gBAAiBD,EAASE,MAAOF,EAASG,OAAOC,SAASV,IACpEC,GACJ,GACD,CAACD,EAAUC,IAEdI,GAAU,KASFL,IAAaM,EAASK,mBAR1BC,iBACI,UACUV,GACV,CAAE,MAAOW,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,oCAAoCH,EAAMI,oBACjFd,GACV,CACJ,CAESe,EACT,GACD,CAAClB,IAMJ,MAAMmB,EAAsBC,GAAaC,IACnB,UAAdA,EAAMC,MACND,EAAME,iBACNF,EAAMG,kBACV,GACD,IAEH,OAAIxB,IAAaM,EAASmB,aACf,KAIPC,EAACC,EAAAA,CAAWC,gBAAiBT,GACxB,CAACb,EAASuB,QAASvB,EAASK,mBAAmBD,SAASV,IAAa0B,EAACI,QACtE9B,IAAaM,EAASC,iBAAmBmB,EAACK,EAAAA,CAAmBhC,uBAAwBA,IACrFC,IAAaM,EAASG,OAASiB,EAACM,EAAAA,CAASjC,uBAAwBA,IACjEC,IAAaM,EAASE,OAASkB,EAACO,EAAAA,MAAAA"}
+{"version":3,"file":"ClickToPayComponent.js","sources":["../../../../../src/components/internal/ClickToPay/ClickToPayComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect } from 'preact/hooks';\nimport { CtpState } from './services/ClickToPayService';\nimport useClickToPayContext from './context/useClickToPayContext';\nimport CtPOneTimePassword from './components/CtPOneTimePassword';\nimport CtPCards from './components/CtPCards';\nimport CtPSection from './components/CtPSection';\nimport CtPLoader from './components/CtPLoader';\nimport CtPLogin from './components/CtPLogin';\nimport SrciError from './services/sdks/SrciError';\n\ntype ClickToPayComponentProps = {\n    onDisplayCardComponent?(): void;\n};\n\nconst ClickToPayComponent = ({ onDisplayCardComponent }: ClickToPayComponentProps): h.JSX.Element => {\n    const { ctpState, onReady, startIdentityValidation, logoutShopper } = useClickToPayContext();\n\n    useEffect(() => {\n        if ([CtpState.OneTimePassword, CtpState.Login, CtpState.Ready].includes(ctpState)) {\n            onReady();\n        }\n    }, [ctpState, onReady]);\n\n    useEffect(() => {\n        async function sendOneTimePassword() {\n            try {\n                await startIdentityValidation();\n            } catch (error) {\n                if (error instanceof SrciError) console.warn(`CtP - Identity Validation error: ${error.toString()}`);\n                await logoutShopper();\n            }\n        }\n        if (ctpState === CtpState.ShopperIdentified) {\n            void sendOneTimePassword();\n        }\n    }, [ctpState]);\n\n    /**\n     * We capture the ENTER keypress within the ClickToPay component because we do not want to propagate the event up to the UIElement\n     * UIElement would perform the payment flow (by calling .submit), which is not relevant/supported by Click to Pay\n     */\n    const handleEnterKeyPress = useCallback((event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault(); // Prevent <form> submission if Component is placed inside a form\n            event.stopPropagation(); // Prevent global BaseElement keypress event to be triggered\n        }\n    }, []);\n\n    if (ctpState === CtpState.NotAvailable) {\n        return null;\n    }\n\n    return (\n        <CtPSection onEnterKeyPress={handleEnterKeyPress}>\n            {[CtpState.Loading, CtpState.ShopperIdentified].includes(ctpState) && <CtPLoader />}\n            {ctpState === CtpState.OneTimePassword && <CtPOneTimePassword onDisplayCardComponent={onDisplayCardComponent} />}\n            {ctpState === CtpState.Ready && <CtPCards onDisplayCardComponent={onDisplayCardComponent} />}\n            {ctpState === CtpState.Login && <CtPLogin />}\n        </CtPSection>\n    );\n};\n\nexport default ClickToPayComponent;\n"],"names":["ClickToPayComponent","onDisplayCardComponent","ctpState","onReady","startIdentityValidation","logoutShopper","useClickToPayContext","useEffect","CtpState","OneTimePassword","Login","Ready","includes","ShopperIdentified","async","error","SrciError","console","warn","toString","sendOneTimePassword","handleEnterKeyPress","useCallback","event","key","preventDefault","stopPropagation","NotAvailable","h","CtPSection","onEnterKeyPress","Loading","CtPLoader","CtPOneTimePassword","CtPCards","CtPLogin"],"mappings":"ykBAeA,MAAMA,EAAsB,EAAGC,6BAC3B,MAAMC,SAAEA,EAAQC,QAAEA,EAAOC,wBAAEA,EAAuBC,cAAEA,GAAkBC,IAEtEC,EAAU,KACF,CAACC,EAASC,gBAAiBD,EAASE,MAAOF,EAASG,OAAOC,SAASV,IACpEC,KAEL,CAACD,EAAUC,IAEdI,EAAU,KASFL,IAAaM,EAASK,mBAR1BC,iBACI,UACUV,GACV,CAAE,MAAOW,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,oCAAoCH,EAAMI,oBACjFd,GACV,CACJ,CAESe,IAEV,CAAClB,IAMJ,MAAMmB,EAAsBC,EAAaC,IACnB,UAAdA,EAAMC,MACND,EAAME,iBACNF,EAAMG,oBAEX,IAEH,OAAIxB,IAAaM,EAASmB,aACf,KAIPC,EAACC,EAAAA,CAAWC,gBAAiBT,GACxB,CAACb,EAASuB,QAASvB,EAASK,mBAAmBD,SAASV,IAAa0B,EAACI,QACtE9B,IAAaM,EAASC,iBAAmBmB,EAACK,EAAAA,CAAmBhC,uBAAwBA,IACrFC,IAAaM,EAASG,OAASiB,EAACM,EAAAA,CAASjC,uBAAwBA,IACjEC,IAAaM,EAASE,OAASkB,EAACO,EAAAA"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPBrand/CtPBrand.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import c from"../../../Img/Img.js";import{SchemeNames as a}from"../../services/sdks/utils.js";import o from"../../context/useClickToPayContext.js";import r from"../../../../../core/Context/useImage.js";const s=({classNameModifiers:s=[]})=>{const m=r(),{schemes:p}=o(),n=m()("ctp"),i=m({imageFolder:"components/"})("pipe");return e("div",{className:t("adyen_checkout-ctp__brand-wrapper",s.map((e=>`adyen_checkout-ctp__brand-wrapper--${e}`)))},e(c,{className:"adyen_checkout-ctp__brand-logo",src:n,alt:"Logo of Click to Pay"}),e(c,{className:"adyen_checkout-ctp__brand-pipe",src:i,alt:""}),p.map((o=>e(c,{key:o,className:t("adyen_checkout-ctp__brand-scheme",`adyen_checkout-ctp__brand-scheme-${o}`),src:m()(o),alt:`Logo of ${a[o]}`}))))};export{s as CtPBrand};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import c from"../../../Img/Img.js";import{SchemeNames as a}from"../../services/sdks/utils.js";import o from"../../context/useClickToPayContext.js";import r from"../../../../../core/Context/useImage.js";const s=({classNameModifiers:s=[]})=>{const m=r(),{schemes:p}=o(),n=m()("ctp"),i=m({imageFolder:"components/"})("pipe");return e("div",{className:t("adyen_checkout-ctp__brand-wrapper",s.map(e=>`adyen_checkout-ctp__brand-wrapper--${e}`))},e(c,{className:"adyen_checkout-ctp__brand-logo",src:n,alt:"Logo of Click to Pay"}),e(c,{className:"adyen_checkout-ctp__brand-pipe",src:i,alt:""}),p.map(o=>e(c,{key:o,className:t("adyen_checkout-ctp__brand-scheme",`adyen_checkout-ctp__brand-scheme-${o}`),src:m()(o),alt:`Logo of ${a[o]}`})))};export{s as CtPBrand};
 //# sourceMappingURL=CtPBrand.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPBrand/CtPBrand.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPBrand.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPBrand/CtPBrand.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport Img from '../../../Img';\nimport { SchemeNames } from '../../services/sdks/utils';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport useImage from '../../../../../core/Context/useImage';\nimport './CtPBrand.scss';\n\ntype CtPBrandProps = {\n    classNameModifiers?: string[];\n};\n\nconst CtPBrand = ({ classNameModifiers = [] }: CtPBrandProps) => {\n    const getImage = useImage();\n    const { schemes } = useClickToPayContext();\n\n    const ctpImageUrl = getImage()('ctp');\n    const pipeImageUrl = getImage({ imageFolder: 'components/' })('pipe');\n\n    return (\n        <div\n            className={classnames(\n                'adyen_checkout-ctp__brand-wrapper',\n                classNameModifiers.map(m => `adyen_checkout-ctp__brand-wrapper--${m}`)\n            )}\n        >\n            <Img className=\"adyen_checkout-ctp__brand-logo\" src={ctpImageUrl} alt={'Logo of Click to Pay'} />\n            <Img className=\"adyen_checkout-ctp__brand-pipe\" src={pipeImageUrl} alt=\"\" />\n\n            {schemes.map(brand => (\n                <Img\n                    key={brand}\n                    className={classnames('adyen_checkout-ctp__brand-scheme', `adyen_checkout-ctp__brand-scheme-${brand}`)}\n                    src={getImage()(brand)}\n                    alt={`Logo of ${SchemeNames[brand]}`}\n                />\n            ))}\n        </div>\n    );\n};\n\nexport { CtPBrand };\n"],"names":["CtPBrand","classNameModifiers","getImage","useImage","schemes","useClickToPayContext","ctpImageUrl","pipeImageUrl","imageFolder","h","div","className","classnames","map","m","Img","src","alt","brand","key","SchemeNames"],"mappings":"wUAYA,MAAMA,EAAW,EAAGC,qBAAqB,OACrC,MAAMC,EAAWC,KACXC,QAAEA,GAAYC,IAEdC,EAAcJ,IAAW,OACzBK,EAAeL,EAAS,CAAEM,YAAa,eAAxBN,CAAyC,QAE9D,OACIO,EAACC,MAAAA,CACGC,UAAWC,EACP,oCACAX,EAAmBY,KAAIC,GAAK,sCAAsCA,QAGtEL,EAACM,EAAAA,CAAIJ,UAAU,iCAAiCK,IAAKV,EAAaW,IAAK,yBACvER,EAACM,EAAAA,CAAIJ,UAAU,iCAAiCK,IAAKT,EAAcU,IAAI,KAEtEb,EAAQS,KAAIK,GACTT,EAACM,EAAAA,CACGI,IAAKD,EACLP,UAAWC,EAAW,mCAAoC,oCAAoCM,KAC9FF,IAAKd,IAAWgB,GAChBD,IAAK,WAAWG,EAAYF"}
+{"version":3,"file":"CtPBrand.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPBrand/CtPBrand.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport Img from '../../../Img';\nimport { SchemeNames } from '../../services/sdks/utils';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport useImage from '../../../../../core/Context/useImage';\nimport './CtPBrand.scss';\n\ntype CtPBrandProps = {\n    classNameModifiers?: string[];\n};\n\nconst CtPBrand = ({ classNameModifiers = [] }: CtPBrandProps) => {\n    const getImage = useImage();\n    const { schemes } = useClickToPayContext();\n\n    const ctpImageUrl = getImage()('ctp');\n    const pipeImageUrl = getImage({ imageFolder: 'components/' })('pipe');\n\n    return (\n        <div\n            className={classnames(\n                'adyen_checkout-ctp__brand-wrapper',\n                classNameModifiers.map(m => `adyen_checkout-ctp__brand-wrapper--${m}`)\n            )}\n        >\n            <Img className=\"adyen_checkout-ctp__brand-logo\" src={ctpImageUrl} alt={'Logo of Click to Pay'} />\n            <Img className=\"adyen_checkout-ctp__brand-pipe\" src={pipeImageUrl} alt=\"\" />\n\n            {schemes.map(brand => (\n                <Img\n                    key={brand}\n                    className={classnames('adyen_checkout-ctp__brand-scheme', `adyen_checkout-ctp__brand-scheme-${brand}`)}\n                    src={getImage()(brand)}\n                    alt={`Logo of ${SchemeNames[brand]}`}\n                />\n            ))}\n        </div>\n    );\n};\n\nexport { CtPBrand };\n"],"names":["CtPBrand","classNameModifiers","getImage","useImage","schemes","useClickToPayContext","ctpImageUrl","pipeImageUrl","imageFolder","h","div","className","classnames","map","m","Img","src","alt","brand","key","SchemeNames"],"mappings":"wUAYA,MAAMA,EAAW,EAAGC,qBAAqB,OACrC,MAAMC,EAAWC,KACXC,QAAEA,GAAYC,IAEdC,EAAcJ,IAAW,OACzBK,EAAeL,EAAS,CAAEM,YAAa,eAAxBN,CAAyC,QAE9D,OACIO,EAACC,MAAAA,CACGC,UAAWC,EACP,oCACAX,EAAmBY,IAAIC,GAAK,sCAAsCA,OAGtEL,EAACM,EAAAA,CAAIJ,UAAU,iCAAiCK,IAAKV,EAAaW,IAAK,yBACvER,EAACM,EAAAA,CAAIJ,UAAU,iCAAiCK,IAAKT,EAAcU,IAAI,KAEtEb,EAAQS,IAAIK,GACTT,EAACM,EAAAA,CACGI,IAAKD,EACLP,UAAWC,EAAW,mCAAoC,oCAAoCM,KAC9FF,IAAKd,IAAWgB,GAChBD,IAAK,WAAWG,EAAYF"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPCards.js

@@ -1,2 +1,2 @@
-import{createElement as t,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as r,useEffect as o,useCallback as s}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../context/useClickToPayContext.js";import a from"./CtPSingleCard/CtPSingleCard.js";import i from"../../../PayButton/PayButton.js";import{amountLabel as l}from"../../../PayButton/utils.js";import c from"./CtPCardsList/CtPCardsList.js";import m from"../../services/sdks/SrciError.js";import u from"../CtPSection/CtPSection.js";import{CTP_IFRAME_NAME as d}from"../../services/utils.js";import p from"../../../IFrame/Iframe.js";import f from"../../../../../core/Context/useImage.js";import{useCoreContext as g}from"../../../../../core/Context/CoreProvider.js";import C from"../../../../../utils/isMobile.js";import h from"../../../../../core/Errors/AdyenCheckoutError.js";import{PREFIX as y}from"../../../Icon/constants.js";function k(t,e){if(!t)return null;const r=e.get(`ctp.errors.${t}`);return r.includes("ctp.errors")?e.get("ctp.errors.UNKNOWN_ERROR"):r}function P(t,e,r){return r?C()?null:t.get("payButton.with",{values:{value:l(t,e),maskedData:`•••• ${null==r?void 0:r.panLastFour}`}}):t.get("payButton")}const j=({onDisplayCardComponent:l})=>{const{i18n:C}=g(),j=f(),{amount:v,cards:E,checkout:S,isCtpPrimaryPaymentMethod:x,status:b,onSubmit:R,onSetStatus:$,onError:w}=n(),[B,M]=r(E.find((t=>!t.isExpired))||E[0]),[N,D]=r(null),F=E.every((t=>t.isExpired)),[I,T]=r(!1);o((()=>{(0===E.length||F)&&(null==l||l())}),[l,F,E]);const _=s((async()=>{if(B)try{T(!0),D(null),$("loading");const t=await S(B);R(t)}catch(t){t instanceof m&&(D(null==t?void 0:t.reason),console.warn(`CtP - Checkout: Reason: ${null==t?void 0:t.reason} / Source: ${null==t?void 0:t.source} / Scheme: ${null==t?void 0:t.scheme}`)),T(!1),w(t instanceof h?t:new h("ERROR","Error during ClickToPay checkout",{cause:t}))}}),[S,B]),L=s((t=>{M(t)}),[]),O=I&&"loading"===b&&(null==B?void 0:B.isDcfPopupEmbedded),K="loading"!==b||!O,A=s((t=>{"Enter"===t.key&&_()}),[_]);return t(e,null,t(p,{name:d,height:"380",width:"100%",classNameModifiers:[O?"":"hidden"]}),K&&t(e,null,t(u.Title,null,C.get("ctp.cards.title")),t(u.Text,null,C.get("ctp.cards.subtitle")),0===E.length&&t("div",{className:"adyen-checkout-ctp__empty-cards"},C.get("ctp.emptyProfile.message")),1===E.length&&t(a,{card:E[0],errorMessage:k(N,C)}),E.length>1&&t(c,{cardSelected:B,cards:E,onChangeCard:L,errorMessage:k(N,C)}),t(i,{disabled:F,amount:v,label:P(C,v,B),status:b,variant:x?"primary":"secondary",icon:0!==E.length&&j({imageFolder:"components/"})(x?`${y}lock`:`${y}lock_black`),onClick:_,onKeyDown:A})))};export{j as default};
+import{createElement as t,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as r,useEffect as o,useCallback as s}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../context/useClickToPayContext.js";import a from"./CtPSingleCard/CtPSingleCard.js";import i from"../../../PayButton/PayButton.js";import{amountLabel as l}from"../../../PayButton/utils.js";import c from"./CtPCardsList/CtPCardsList.js";import m from"../../services/sdks/SrciError.js";import u from"../CtPSection/CtPSection.js";import{CTP_IFRAME_NAME as d}from"../../services/utils.js";import p from"../../../IFrame/Iframe.js";import f from"../../../../../core/Context/useImage.js";import{useCoreContext as g}from"../../../../../core/Context/CoreProvider.js";import C from"../../../../../utils/isMobile.js";import h from"../../../../../core/Errors/AdyenCheckoutError.js";import{PREFIX as y}from"../../../Icon/constants.js";function k(t,e){if(!t)return null;const r=e.get(`ctp.errors.${t}`);return r.includes("ctp.errors")?e.get("ctp.errors.UNKNOWN_ERROR"):r}function P(t,e,r){return r?C()?null:t.get("payButton.with",{values:{value:l(t,e),maskedData:`•••• ${null==r?void 0:r.panLastFour}`}}):t.get("payButton")}const j=({onDisplayCardComponent:l})=>{const{i18n:C}=g(),j=f(),{amount:v,cards:E,checkout:S,isCtpPrimaryPaymentMethod:x,status:b,onSubmit:R,onSetStatus:$,onError:w}=n(),[B,M]=r(E.find(t=>!t.isExpired)||E[0]),[N,D]=r(null),F=E.every(t=>t.isExpired),[I,T]=r(!1);o(()=>{(0===E.length||F)&&(null==l||l())},[l,F,E]);const _=s(async()=>{if(B)try{T(!0),D(null),$("loading");const t=await S(B);R(t)}catch(t){t instanceof m&&(D(null==t?void 0:t.reason),console.warn(`CtP - Checkout: Reason: ${null==t?void 0:t.reason} / Source: ${null==t?void 0:t.source} / Scheme: ${null==t?void 0:t.scheme}`)),T(!1),w(t instanceof h?t:new h("ERROR","Error during ClickToPay checkout",{cause:t}))}},[S,B]),L=s(t=>{M(t)},[]),O=I&&"loading"===b&&(null==B?void 0:B.isDcfPopupEmbedded),K="loading"!==b||!O,A=s(t=>{"Enter"===t.key&&_()},[_]);return t(e,null,t(p,{name:d,height:"380",width:"100%",classNameModifiers:[O?"":"hidden"]}),K&&t(e,null,t(u.Title,null,C.get("ctp.cards.title")),t(u.Text,null,C.get("ctp.cards.subtitle")),0===E.length&&t("div",{className:"adyen-checkout-ctp__empty-cards"},C.get("ctp.emptyProfile.message")),1===E.length&&t(a,{card:E[0],errorMessage:k(N,C)}),E.length>1&&t(c,{cardSelected:B,cards:E,onChangeCard:L,errorMessage:k(N,C)}),t(i,{disabled:F,amount:v,label:P(C,v,B),status:b,variant:x?"primary":"secondary",icon:0!==E.length&&j({imageFolder:"components/"})(x?`${y}lock`:`${y}lock_black`),onClick:_,onKeyDown:A})))};export{j as default};
 //# sourceMappingURL=CtPCards.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPCards.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPSingleCard from './CtPSingleCard/CtPSingleCard';\nimport PayButton from '../../../PayButton';\nimport { amountLabel } from '../../../PayButton/utils';\nimport CtPCardsList from './CtPCardsList';\nimport ShopperCard from '../../models/ShopperCard';\nimport SrciError from '../../services/sdks/SrciError';\nimport CtPSection from '../CtPSection';\nimport { CTP_IFRAME_NAME } from '../../services/utils';\nimport Iframe from '../../../../internal/IFrame';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport isMobile from '../../../../../utils/isMobile';\nimport Language from '../../../../../language';\nimport { PaymentAmount } from '../../../../../types/global-types';\nimport './CtPCards.scss';\nimport AdyenCheckoutError from '../../../../../core/Errors/AdyenCheckoutError';\nimport { PREFIX } from '../../../Icon/constants';\n\ntype CtPCardsProps = {\n    onDisplayCardComponent?(): void;\n};\n\nfunction getErrorLabel(errorCode: string, i18n: Language): string {\n    if (!errorCode) return null;\n\n    const errorLabel = i18n.get(`ctp.errors.${errorCode}`);\n    if (errorLabel.includes('ctp.errors')) return i18n.get(`ctp.errors.UNKNOWN_ERROR`);\n    return errorLabel;\n}\n\nfunction getPayButtonLabel(i18n: Language, amount: PaymentAmount, checkoutCard?: ShopperCard): string | null {\n    if (!checkoutCard) return i18n.get('payButton');\n    if (!isMobile())\n        return i18n.get('payButton.with', {\n            values: { value: amountLabel(i18n, amount), maskedData: `•••• ${checkoutCard?.panLastFour}` }\n        });\n    return null;\n}\n\nconst CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { amount, cards, checkout, isCtpPrimaryPaymentMethod, status, onSubmit, onSetStatus, onError } = useClickToPayContext();\n    const [checkoutCard, setCheckoutCard] = useState<ShopperCard | undefined>(cards.find(card => !card.isExpired) || cards[0]);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const isEveryCardExpired = cards.every(card => card.isExpired);\n    const [isShopperCheckingOutWithCtp, setIsShopperCheckingOutWithCtp] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (cards.length === 0 || isEveryCardExpired) {\n            onDisplayCardComponent?.();\n        }\n    }, [onDisplayCardComponent, isEveryCardExpired, cards]);\n\n    const doCheckout = useCallback(async () => {\n        if (!checkoutCard) return;\n\n        try {\n            setIsShopperCheckingOutWithCtp(true);\n            setErrorCode(null);\n            onSetStatus('loading');\n            const payload = await checkout(checkoutCard);\n            onSubmit(payload);\n        } catch (error: unknown) {\n            if (error instanceof SrciError) {\n                setErrorCode(error?.reason);\n                console.warn(`CtP - Checkout: Reason: ${error?.reason} / Source: ${error?.source} / Scheme: ${error?.scheme}`);\n            }\n            setIsShopperCheckingOutWithCtp(false);\n\n            if (error instanceof AdyenCheckoutError) onError(error);\n            else onError(new AdyenCheckoutError('ERROR', 'Error during ClickToPay checkout', { cause: error }));\n        }\n    }, [checkout, checkoutCard]);\n\n    const handleOnChangeCard = useCallback((card: ShopperCard) => {\n        setCheckoutCard(card);\n    }, []);\n\n    /**\n     * If shopper submits the payment using the default Card component while CtP is rendered, the status here will be updated\n     * and that can potentially display an iframe.\n     *\n     * Therefore, we use the flag 'isShopperCheckingOutWithCtp' to flag that the iframe should be displayed only in case the\n     * Shopper is checking out with Click to Pay.\n     */\n    const displayNetworkDcf = isShopperCheckingOutWithCtp && status === 'loading' && checkoutCard?.isDcfPopupEmbedded;\n    const displayCardCheckoutView = status !== 'loading' || !displayNetworkDcf;\n\n    const handlePayButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void doCheckout();\n            }\n        },\n        [doCheckout]\n    );\n\n    return (\n        <Fragment>\n            <Iframe name={CTP_IFRAME_NAME} height=\"380\" width=\"100%\" classNameModifiers={[displayNetworkDcf ? '' : 'hidden']} />\n\n            {displayCardCheckoutView && (\n                <Fragment>\n                    <CtPSection.Title>{i18n.get('ctp.cards.title')}</CtPSection.Title>\n                    <CtPSection.Text>{i18n.get('ctp.cards.subtitle')}</CtPSection.Text>\n                    {cards.length === 0 && <div className=\"adyen-checkout-ctp__empty-cards\">{i18n.get('ctp.emptyProfile.message')}</div>}\n                    {cards.length === 1 && <CtPSingleCard card={cards[0]} errorMessage={getErrorLabel(errorCode, i18n)} />}\n                    {cards.length > 1 && (\n                        <CtPCardsList\n                            cardSelected={checkoutCard}\n                            cards={cards}\n                            onChangeCard={handleOnChangeCard}\n                            errorMessage={getErrorLabel(errorCode, i18n)}\n                        />\n                    )}\n\n                    <PayButton\n                        disabled={isEveryCardExpired}\n                        amount={amount}\n                        label={getPayButtonLabel(i18n, amount, checkoutCard)}\n                        status={status}\n                        variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                        icon={\n                            cards.length !== 0 &&\n                            getImage({ imageFolder: 'components/' })(isCtpPrimaryPaymentMethod ? `${PREFIX}lock` : `${PREFIX}lock_black`)\n                        }\n                        onClick={doCheckout}\n                        onKeyDown={handlePayButtonKeyDown}\n                    />\n                </Fragment>\n            )}\n        </Fragment>\n    );\n};\n\nexport default CtPCards;\n"],"names":["getErrorLabel","errorCode","i18n","errorLabel","get","includes","getPayButtonLabel","amount","checkoutCard","isMobile","values","value","amountLabel","maskedData","panLastFour","CtPCards","onDisplayCardComponent","useCoreContext","getImage","useImage","cards","checkout","isCtpPrimaryPaymentMethod","status","onSubmit","onSetStatus","onError","useClickToPayContext","setCheckoutCard","useState","find","card","isExpired","setErrorCode","isEveryCardExpired","every","isShopperCheckingOutWithCtp","setIsShopperCheckingOutWithCtp","useEffect","length","doCheckout","useCallback","async","payload","error","SrciError","reason","console","warn","source","scheme","AdyenCheckoutError","cause","handleOnChangeCard","displayNetworkDcf","isDcfPopupEmbedded","displayCardCheckoutView","handlePayButtonKeyDown","event","key","h","Fragment","Iframe","name","CTP_IFRAME_NAME","height","width","classNameModifiers","CtPSection","Title","Text","div","className","CtPSingleCard","errorMessage","CtPCardsList","cardSelected","onChangeCard","PayButton","disabled","label","variant","icon","imageFolder","PREFIX","onClick","onKeyDown"],"mappings":"46BAyBA,SAASA,EAAcC,EAAmBC,GACtC,IAAKD,EAAW,OAAO,KAEvB,MAAME,EAAaD,EAAKE,IAAI,cAAcH,KAC1C,OAAIE,EAAWE,SAAS,cAAsBH,EAAKE,IAAI,4BAChDD,CACX,CAEA,SAASG,EAAkBJ,EAAgBK,EAAuBC,GAC9D,OAAKA,EACAC,IAIE,KAHIP,EAAKE,IAAI,iBAAkB,CAC9BM,OAAQ,CAAEC,MAAOC,EAAYV,EAAMK,GAASM,WAAY,QAAQL,aAAAA,EAAAA,EAAcM,iBAH5DZ,EAAKE,IAAI,YAMvC,CAEA,MAAMW,EAAW,EAAGC,6BAChB,MAAMd,KAAEA,GAASe,IACXC,EAAWC,KACXZ,OAAEA,EAAMa,MAAEA,EAAKC,SAAEA,EAAQC,0BAAEA,EAAyBC,OAAEA,EAAMC,SAAEA,EAAQC,YAAEA,EAAWC,QAAEA,GAAYC,KAChGnB,EAAcoB,GAAmBC,EAAkCT,EAAMU,MAAKC,IAASA,EAAKC,aAAcZ,EAAM,KAChHnB,EAAWgC,GAAgBJ,EAAiB,MAC7CK,EAAqBd,EAAMe,OAAMJ,GAAQA,EAAKC,aAC7CI,EAA6BC,GAAkCR,GAAkB,GAExFS,GAAU,MACe,IAAjBlB,EAAMmB,QAAgBL,KACtBlB,SAAAA,IACJ,GACD,CAACA,EAAwBkB,EAAoBd,IAEhD,MAAMoB,EAAaC,GAAYC,UAC3B,GAAKlC,EAEL,IACI6B,GAA+B,GAC/BJ,EAAa,MACbR,EAAY,WACZ,MAAMkB,QAAgBtB,EAASb,GAC/BgB,EAASmB,EACb,CAAE,MAAOC,GACDA,aAAiBC,IACjBZ,EAAaW,aAAAA,EAAAA,EAAOE,QACpBC,QAAQC,KAAK,2BAA2BJ,aAAAA,EAAAA,EAAOE,oBAAoBF,aAAAA,EAAAA,EAAOK,oBAAoBL,aAAAA,EAAAA,EAAOM,WAEzGb,GAA+B,GAEUX,EAArCkB,aAAiBO,EAA4BP,EACpC,IAAIO,EAAmB,QAAS,mCAAoC,CAAEC,MAAOR,IAC9F,IACD,CAACvB,EAAUb,IAER6C,EAAqBZ,GAAaV,IACpCH,EAAgBG,EAAAA,GACjB,IASGuB,EAAoBlB,GAA0C,YAAXb,IAAwBf,aAAAA,EAAAA,EAAc+C,oBACzFC,EAAqC,YAAXjC,IAAyB+B,EAEnDG,EAAyBhB,GAC1BiB,IACqB,UAAdA,EAAMC,KACDnB,GACT,GAEJ,CAACA,IAGL,OACIoB,EAACC,OACGD,EAACE,EAAAA,CAAOC,KAAMC,EAAiBC,OAAO,MAAMC,MAAM,OAAOC,mBAAoB,CAACb,EAAoB,GAAK,YAEtGE,GACGI,EAACC,OACGD,EAACQ,EAAWC,MAAOnE,KAAAA,EAAKE,IAAI,oBAC5BwD,EAACQ,EAAWE,KAAI,KAAEpE,EAAKE,IAAI,uBACT,IAAjBgB,EAAMmB,QAAgBqB,EAACW,MAAAA,CAAIC,UAAU,mCAAmCtE,EAAKE,IAAI,6BAChE,IAAjBgB,EAAMmB,QAAgBqB,EAACa,EAAAA,CAAc1C,KAAMX,EAAM,GAAIsD,aAAc1E,EAAcC,EAAWC,KAC5FkB,EAAMmB,OAAS,GACZqB,EAACe,EAAAA,CACGC,aAAcpE,EACdY,MAAOA,EACPyD,aAAcxB,EACdqB,aAAc1E,EAAcC,EAAWC,KAI/C0D,EAACkB,EAAAA,CACGC,SAAU7C,EACV3B,OAAQA,EACRyE,MAAO1E,EAAkBJ,EAAMK,EAAQC,GACvCe,OAAQA,EACR0D,QAAS3D,EAA4B,UAAY,YACjD4D,KACqB,IAAjB9D,EAAMmB,QACNrB,EAAS,CAAEiE,YAAa,eAAxBjE,CAAyCI,EAA4B,GAAG8D,QAAe,GAAGA,eAE9FC,QAAS7C,EACT8C,UAAW7B"}
+{"version":3,"file":"CtPCards.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPSingleCard from './CtPSingleCard/CtPSingleCard';\nimport PayButton from '../../../PayButton';\nimport { amountLabel } from '../../../PayButton/utils';\nimport CtPCardsList from './CtPCardsList';\nimport ShopperCard from '../../models/ShopperCard';\nimport SrciError from '../../services/sdks/SrciError';\nimport CtPSection from '../CtPSection';\nimport { CTP_IFRAME_NAME } from '../../services/utils';\nimport Iframe from '../../../../internal/IFrame';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport isMobile from '../../../../../utils/isMobile';\nimport Language from '../../../../../language';\nimport { PaymentAmount } from '../../../../../types/global-types';\nimport './CtPCards.scss';\nimport AdyenCheckoutError from '../../../../../core/Errors/AdyenCheckoutError';\nimport { PREFIX } from '../../../Icon/constants';\n\ntype CtPCardsProps = {\n    onDisplayCardComponent?(): void;\n};\n\nfunction getErrorLabel(errorCode: string, i18n: Language): string {\n    if (!errorCode) return null;\n\n    const errorLabel = i18n.get(`ctp.errors.${errorCode}`);\n    if (errorLabel.includes('ctp.errors')) return i18n.get(`ctp.errors.UNKNOWN_ERROR`);\n    return errorLabel;\n}\n\nfunction getPayButtonLabel(i18n: Language, amount: PaymentAmount, checkoutCard?: ShopperCard): string | null {\n    if (!checkoutCard) return i18n.get('payButton');\n    if (!isMobile())\n        return i18n.get('payButton.with', {\n            values: { value: amountLabel(i18n, amount), maskedData: `•••• ${checkoutCard?.panLastFour}` }\n        });\n    return null;\n}\n\nconst CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { amount, cards, checkout, isCtpPrimaryPaymentMethod, status, onSubmit, onSetStatus, onError } = useClickToPayContext();\n    const [checkoutCard, setCheckoutCard] = useState<ShopperCard | undefined>(cards.find(card => !card.isExpired) || cards[0]);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const isEveryCardExpired = cards.every(card => card.isExpired);\n    const [isShopperCheckingOutWithCtp, setIsShopperCheckingOutWithCtp] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (cards.length === 0 || isEveryCardExpired) {\n            onDisplayCardComponent?.();\n        }\n    }, [onDisplayCardComponent, isEveryCardExpired, cards]);\n\n    const doCheckout = useCallback(async () => {\n        if (!checkoutCard) return;\n\n        try {\n            setIsShopperCheckingOutWithCtp(true);\n            setErrorCode(null);\n            onSetStatus('loading');\n            const payload = await checkout(checkoutCard);\n            onSubmit(payload);\n        } catch (error: unknown) {\n            if (error instanceof SrciError) {\n                setErrorCode(error?.reason);\n                console.warn(`CtP - Checkout: Reason: ${error?.reason} / Source: ${error?.source} / Scheme: ${error?.scheme}`);\n            }\n            setIsShopperCheckingOutWithCtp(false);\n\n            if (error instanceof AdyenCheckoutError) onError(error);\n            else onError(new AdyenCheckoutError('ERROR', 'Error during ClickToPay checkout', { cause: error }));\n        }\n    }, [checkout, checkoutCard]);\n\n    const handleOnChangeCard = useCallback((card: ShopperCard) => {\n        setCheckoutCard(card);\n    }, []);\n\n    /**\n     * If shopper submits the payment using the default Card component while CtP is rendered, the status here will be updated\n     * and that can potentially display an iframe.\n     *\n     * Therefore, we use the flag 'isShopperCheckingOutWithCtp' to flag that the iframe should be displayed only in case the\n     * Shopper is checking out with Click to Pay.\n     */\n    const displayNetworkDcf = isShopperCheckingOutWithCtp && status === 'loading' && checkoutCard?.isDcfPopupEmbedded;\n    const displayCardCheckoutView = status !== 'loading' || !displayNetworkDcf;\n\n    const handlePayButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void doCheckout();\n            }\n        },\n        [doCheckout]\n    );\n\n    return (\n        <Fragment>\n            <Iframe name={CTP_IFRAME_NAME} height=\"380\" width=\"100%\" classNameModifiers={[displayNetworkDcf ? '' : 'hidden']} />\n\n            {displayCardCheckoutView && (\n                <Fragment>\n                    <CtPSection.Title>{i18n.get('ctp.cards.title')}</CtPSection.Title>\n                    <CtPSection.Text>{i18n.get('ctp.cards.subtitle')}</CtPSection.Text>\n                    {cards.length === 0 && <div className=\"adyen-checkout-ctp__empty-cards\">{i18n.get('ctp.emptyProfile.message')}</div>}\n                    {cards.length === 1 && <CtPSingleCard card={cards[0]} errorMessage={getErrorLabel(errorCode, i18n)} />}\n                    {cards.length > 1 && (\n                        <CtPCardsList\n                            cardSelected={checkoutCard}\n                            cards={cards}\n                            onChangeCard={handleOnChangeCard}\n                            errorMessage={getErrorLabel(errorCode, i18n)}\n                        />\n                    )}\n\n                    <PayButton\n                        disabled={isEveryCardExpired}\n                        amount={amount}\n                        label={getPayButtonLabel(i18n, amount, checkoutCard)}\n                        status={status}\n                        variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                        icon={\n                            cards.length !== 0 &&\n                            getImage({ imageFolder: 'components/' })(isCtpPrimaryPaymentMethod ? `${PREFIX}lock` : `${PREFIX}lock_black`)\n                        }\n                        onClick={doCheckout}\n                        onKeyDown={handlePayButtonKeyDown}\n                    />\n                </Fragment>\n            )}\n        </Fragment>\n    );\n};\n\nexport default CtPCards;\n"],"names":["getErrorLabel","errorCode","i18n","errorLabel","get","includes","getPayButtonLabel","amount","checkoutCard","isMobile","values","value","amountLabel","maskedData","panLastFour","CtPCards","onDisplayCardComponent","useCoreContext","getImage","useImage","cards","checkout","isCtpPrimaryPaymentMethod","status","onSubmit","onSetStatus","onError","useClickToPayContext","setCheckoutCard","useState","find","card","isExpired","setErrorCode","isEveryCardExpired","every","isShopperCheckingOutWithCtp","setIsShopperCheckingOutWithCtp","useEffect","length","doCheckout","useCallback","async","payload","error","SrciError","reason","console","warn","source","scheme","AdyenCheckoutError","cause","handleOnChangeCard","displayNetworkDcf","isDcfPopupEmbedded","displayCardCheckoutView","handlePayButtonKeyDown","event","key","h","Fragment","Iframe","name","CTP_IFRAME_NAME","height","width","classNameModifiers","CtPSection","Title","Text","div","className","CtPSingleCard","errorMessage","CtPCardsList","cardSelected","onChangeCard","PayButton","disabled","label","variant","icon","imageFolder","PREFIX","onClick","onKeyDown"],"mappings":"46BAyBA,SAASA,EAAcC,EAAmBC,GACtC,IAAKD,EAAW,OAAO,KAEvB,MAAME,EAAaD,EAAKE,IAAI,cAAcH,KAC1C,OAAIE,EAAWE,SAAS,cAAsBH,EAAKE,IAAI,4BAChDD,CACX,CAEA,SAASG,EAAkBJ,EAAgBK,EAAuBC,GAC9D,OAAKA,EACAC,IAIE,KAHIP,EAAKE,IAAI,iBAAkB,CAC9BM,OAAQ,CAAEC,MAAOC,EAAYV,EAAMK,GAASM,WAAY,QAAQL,aAAAA,EAAAA,EAAcM,iBAH5DZ,EAAKE,IAAI,YAMvC,CAEA,MAAMW,EAAW,EAAGC,6BAChB,MAAMd,KAAEA,GAASe,IACXC,EAAWC,KACXZ,OAAEA,EAAMa,MAAEA,EAAKC,SAAEA,EAAQC,0BAAEA,EAAyBC,OAAEA,EAAMC,SAAEA,EAAQC,YAAEA,EAAWC,QAAEA,GAAYC,KAChGnB,EAAcoB,GAAmBC,EAAkCT,EAAMU,KAAKC,IAASA,EAAKC,YAAcZ,EAAM,KAChHnB,EAAWgC,GAAgBJ,EAAiB,MAC7CK,EAAqBd,EAAMe,MAAMJ,GAAQA,EAAKC,YAC7CI,EAA6BC,GAAkCR,GAAkB,GAExFS,EAAU,MACe,IAAjBlB,EAAMmB,QAAgBL,KACtBlB,SAAAA,MAEL,CAACA,EAAwBkB,EAAoBd,IAEhD,MAAMoB,EAAaC,EAAYC,UAC3B,GAAKlC,EAEL,IACI6B,GAA+B,GAC/BJ,EAAa,MACbR,EAAY,WACZ,MAAMkB,QAAgBtB,EAASb,GAC/BgB,EAASmB,EACb,CAAE,MAAOC,GACDA,aAAiBC,IACjBZ,EAAaW,aAAAA,EAAAA,EAAOE,QACpBC,QAAQC,KAAK,2BAA2BJ,aAAAA,EAAAA,EAAOE,oBAAoBF,aAAAA,EAAAA,EAAOK,oBAAoBL,aAAAA,EAAAA,EAAOM,WAEzGb,GAA+B,GAEUX,EAArCkB,aAAiBO,EAA4BP,EACpC,IAAIO,EAAmB,QAAS,mCAAoC,CAAEC,MAAOR,IAC9F,GACD,CAACvB,EAAUb,IAER6C,EAAqBZ,EAAaV,IACpCH,EAAgBG,IACjB,IASGuB,EAAoBlB,GAA0C,YAAXb,IAAwBf,aAAAA,EAAAA,EAAc+C,oBACzFC,EAAqC,YAAXjC,IAAyB+B,EAEnDG,EAAyBhB,EAC1BiB,IACqB,UAAdA,EAAMC,KACDnB,KAGb,CAACA,IAGL,OACIoB,EAACC,OACGD,EAACE,EAAAA,CAAOC,KAAMC,EAAiBC,OAAO,MAAMC,MAAM,OAAOC,mBAAoB,CAACb,EAAoB,GAAK,YAEtGE,GACGI,EAACC,OACGD,EAACQ,EAAWC,MAAK,KAAEnE,EAAKE,IAAI,oBAC5BwD,EAACQ,EAAWE,KAAI,KAAEpE,EAAKE,IAAI,uBACT,IAAjBgB,EAAMmB,QAAgBqB,EAACW,MAAAA,CAAIC,UAAU,mCAAmCtE,EAAKE,IAAI,6BAChE,IAAjBgB,EAAMmB,QAAgBqB,EAACa,EAAAA,CAAc1C,KAAMX,EAAM,GAAIsD,aAAc1E,EAAcC,EAAWC,KAC5FkB,EAAMmB,OAAS,GACZqB,EAACe,EAAAA,CACGC,aAAcpE,EACdY,MAAOA,EACPyD,aAAcxB,EACdqB,aAAc1E,EAAcC,EAAWC,KAI/C0D,EAACkB,EAAAA,CACGC,SAAU7C,EACV3B,OAAQA,EACRyE,MAAO1E,EAAkBJ,EAAMK,EAAQC,GACvCe,OAAQA,EACR0D,QAAS3D,EAA4B,UAAY,YACjD4D,KACqB,IAAjB9D,EAAMmB,QACNrB,EAAS,CAAEiE,YAAa,eAAxBjE,CAAyCI,EAA4B,GAAG8D,QAAe,GAAGA,eAE9FC,QAAS7C,EACT8C,UAAW7B"}

package/dist/es-legacy/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 o from"../../../../../../core/Context/useImage.js";import i 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:f}=s(),u=o(),{status:x}=t(),{handleChangeFor:F,data:h}=i({schema:m,defaultData:{srcDigitalCardId:n.srcDigitalCardId}}),j=r((()=>p.map((e=>({icon:e.artUri||u()(e.scheme),name:`${d()?"":e.title} •••• ${e.panLastFour} `,secondaryText:e.isExpired&&f.get("ctp.cards.expiredCard"),id:e.srcDigitalCardId,disabled:e.isExpired})))),[p]);return a((()=>{const{srcDigitalCardId:e}=h,r=p.find((r=>r.srcDigitalCardId===e));g(r)}),[h,g]),e(c,{name:"clickToPayCards",errorMessage:C,readOnly:"loading"===x},e(l,{items:j,selectedValue:h.srcDigitalCardId,name:"cards",filterable:!1,className:"adyen-checkout-ctp__cards-list-dropdown",readonly:"loading"===x,onChange:F("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 o from"../../../../../../core/Context/useImage.js";import i 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:f}=s(),u=o(),{status:x}=t(),{handleChangeFor:F,data:h}=i({schema:m,defaultData:{srcDigitalCardId:n.srcDigitalCardId}}),j=r(()=>p.map(e=>({icon:e.artUri||u()(e.scheme),name:`${d()?"":e.title} •••• ${e.panLastFour} `,secondaryText:e.isExpired&&f.get("ctp.cards.expiredCard"),id:e.srcDigitalCardId,disabled:e.isExpired})),[p]);return a(()=>{const{srcDigitalCardId:e}=h,r=p.find(r=>r.srcDigitalCardId===e);g(r)},[h,g]),e(c,{name:"clickToPayCards",errorMessage:C,readOnly:"loading"===x},e(l,{items:j,selectedValue:h.srcDigitalCardId,name:"cards",filterable:!1,className:"adyen-checkout-ctp__cards-list-dropdown",readonly:"loading"===x,onChange:F("srcDigitalCardId")}))};export{n as default};
 //# sourceMappingURL=CtPCardsList.js.map

package/dist/es-legacy/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 }: 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 name=\"clickToPayCards\" errorMessage={errorMessage} readOnly={status === 'loading'}>\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'cards'}\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","readOnly","Select","selectedValue","filterable","className","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,GAAQ,IACXf,EAAMgB,KAAIC,IAAS,CACtBC,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,eAEpB,CAAC1B,IAQJ,OANA8B,GAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,MAAKd,GAAQA,EAAKJ,mBAAqBA,IAC1DX,EAAae,EAAAA,GACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CAAMZ,KAAK,kBAAkBpB,aAAcA,EAAciC,SAAqB,YAAX3B,GAChEyB,EAACG,EAAAA,CACGrB,MAAOA,EACPsB,cAAe1B,EAAwB,iBACvCW,KAAM,QACNgB,YAAY,EACZC,UAAW,0CACXC,SAAqB,YAAXhC,EACViC,SAAU/B,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 }: 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 name=\"clickToPayCards\" errorMessage={errorMessage} readOnly={status === 'loading'}>\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'cards'}\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","readOnly","Select","selectedValue","filterable","className","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,CAAMZ,KAAK,kBAAkBpB,aAAcA,EAAciC,SAAqB,YAAX3B,GAChEyB,EAACG,EAAAA,CACGrB,MAAOA,EACPsB,cAAe1B,EAAK,iBACpBW,KAAM,QACNgB,YAAY,EACZC,UAAW,0CACXC,SAAqB,YAAXhC,EACViC,SAAU/B,EAAgB"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPSingleCard.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport classnames from 'classnames';\nimport Img from '../../../../Img';\nimport ShopperCard from '../../../models/ShopperCard';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport './CtPSingleCard.scss';\n\ntype CtPSingleCardProps = {\n    card: ShopperCard;\n    errorMessage?: string;\n};\n\nconst CtPSingleCard = ({ card, errorMessage }: CtPSingleCardProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const cardImage = card.artUri || getImage()(card.scheme);\n\n    return (\n        <Fragment>\n            <div className=\"adyen-checkout-ctp__card-list-single-card\">\n                <Img src={cardImage} height={24} className={'adyen-checkout-ctp__card-image'} />\n\n                <span className={classnames({ 'adyen-checkout-ctp__card-list-single-card-expired': card.isExpired })}>\n                    {card.title} {`•••• ${card.panLastFour}`}\n                </span>\n\n                {card.isExpired && <span className=\"adyen-checkout-ctp__expired-label\">{i18n.get('ctp.cards.expiredCard')}</span>}\n            </div>\n\n            {errorMessage && <div className=\"adyen-checkout-contextual-text--error\">{errorMessage}</div>}\n        </Fragment>\n    );\n};\n\nexport default CtPSingleCard;\n"],"names":["CtPSingleCard","card","errorMessage","i18n","useCoreContext","getImage","useImage","cardImage","artUri","scheme","h","Fragment","div","className","Img","src","height","span","classnames","isExpired","title","panLastFour","get"],"mappings":"kUAaA,MAAMA,EAAgB,EAAGC,OAAMC,mBAC3B,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAYN,EAAKO,QAAUH,IAAWJ,EAAKQ,QAEjD,OACIC,EAACC,OACGD,EAACE,MAAAA,CAAIC,UAAU,6CACXH,EAACI,EAAAA,CAAIC,IAAKR,EAAWS,OAAQ,GAAIH,UAAW,mCAE5CH,EAACO,OAAAA,CAAKJ,UAAWK,EAAW,CAAE,oDAAqDjB,EAAKkB,aACnFlB,EAAKmB,MAAM,IAAE,QAAQnB,EAAKoB,eAG9BpB,EAAKkB,WAAaT,EAACO,OAAAA,CAAKJ,UAAU,qCAAqCV,EAAKmB,IAAI,2BAGpFpB,GAAgBQ,EAACE,MAAAA,CAAIC,UAAU,yCAAyCX,GAAAA"}
+{"version":3,"file":"CtPSingleCard.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport classnames from 'classnames';\nimport Img from '../../../../Img';\nimport ShopperCard from '../../../models/ShopperCard';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport './CtPSingleCard.scss';\n\ntype CtPSingleCardProps = {\n    card: ShopperCard;\n    errorMessage?: string;\n};\n\nconst CtPSingleCard = ({ card, errorMessage }: CtPSingleCardProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const cardImage = card.artUri || getImage()(card.scheme);\n\n    return (\n        <Fragment>\n            <div className=\"adyen-checkout-ctp__card-list-single-card\">\n                <Img src={cardImage} height={24} className={'adyen-checkout-ctp__card-image'} />\n\n                <span className={classnames({ 'adyen-checkout-ctp__card-list-single-card-expired': card.isExpired })}>\n                    {card.title} {`•••• ${card.panLastFour}`}\n                </span>\n\n                {card.isExpired && <span className=\"adyen-checkout-ctp__expired-label\">{i18n.get('ctp.cards.expiredCard')}</span>}\n            </div>\n\n            {errorMessage && <div className=\"adyen-checkout-contextual-text--error\">{errorMessage}</div>}\n        </Fragment>\n    );\n};\n\nexport default CtPSingleCard;\n"],"names":["CtPSingleCard","card","errorMessage","i18n","useCoreContext","getImage","useImage","cardImage","artUri","scheme","h","Fragment","div","className","Img","src","height","span","classnames","isExpired","title","panLastFour","get"],"mappings":"kUAaA,MAAMA,EAAgB,EAAGC,OAAMC,mBAC3B,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAYN,EAAKO,QAAUH,IAAWJ,EAAKQ,QAEjD,OACIC,EAACC,OACGD,EAACE,MAAAA,CAAIC,UAAU,6CACXH,EAACI,EAAAA,CAAIC,IAAKR,EAAWS,OAAQ,GAAIH,UAAW,mCAE5CH,EAACO,OAAAA,CAAKJ,UAAWK,EAAW,CAAE,oDAAqDjB,EAAKkB,aACnFlB,EAAKmB,MAAM,IAAE,QAAQnB,EAAKoB,eAG9BpB,EAAKkB,WAAaT,EAACO,OAAAA,CAAKJ,UAAU,qCAAqCV,EAAKmB,IAAI,2BAGpFpB,GAAgBQ,EAACE,MAAAA,CAAIC,UAAU,yCAAyCX"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPInfo/CtPInfo.js

@@ -1,2 +1,2 @@
-import{createElement as o,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as t,useRef as r,useCallback as a}from"../../../../../external/preact/hooks/dist/hooks.js";import{CtPInfoModal as s}from"./CtPInfoModal/CtPInfoModal.js";import n from"../../../../../core/Context/useImage.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import m from"../../../Img/Img.js";const c=()=>{const[c,l]=t(!1),f=r(),{i18n:p}=i(),u=n()({imageFolder:"components/"})("info"),d=a((()=>{l(!1)}),[]),C=a((()=>{l(!0)}),[]);return o(e,null,o("button",{ref:f,onClick:C,className:"adyen-web__ctp-info-button","aria-label":p.get("ctp.aria.infoModalButton"),type:"button"},o(m,{height:"15",src:u,ariaHidden:!0})),o(s,{isOpen:c,onClose:d,focusAfterClose:f.current}))};export{c as CtPInfo};
+import{createElement as o,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as t,useRef as r,useCallback as a}from"../../../../../external/preact/hooks/dist/hooks.js";import{CtPInfoModal as s}from"./CtPInfoModal/CtPInfoModal.js";import n from"../../../../../core/Context/useImage.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import m from"../../../Img/Img.js";const c=()=>{const[c,l]=t(!1),f=r(),{i18n:p}=i(),u=n()({imageFolder:"components/"})("info"),d=a(()=>{l(!1)},[]),C=a(()=>{l(!0)},[]);return o(e,null,o("button",{ref:f,onClick:C,className:"adyen-web__ctp-info-button","aria-label":p.get("ctp.aria.infoModalButton"),type:"button"},o(m,{height:"15",src:u,ariaHidden:!0})),o(s,{isOpen:c,onClose:d,focusAfterClose:f.current}))};export{c as CtPInfo};
 //# sourceMappingURL=CtPInfo.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPInfo/CtPInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPInfo.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfo.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { CtPInfoModal } from './CtPInfoModal';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport Img from '../../../Img';\nimport './CtPInfo.scss';\n\nconst CtPInfo = () => {\n    const [isInfoModalOpen, setIsInfoModalOpen] = useState<boolean>(false);\n    const buttonRef = useRef<HTMLButtonElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const url = getImage({ imageFolder: 'components/' })('info');\n\n    const handleOnClose = useCallback(() => {\n        setIsInfoModalOpen(false);\n    }, []);\n\n    const handleOnIconClick = useCallback(() => {\n        setIsInfoModalOpen(true);\n    }, []);\n\n    return (\n        <Fragment>\n            <button\n                ref={buttonRef}\n                onClick={handleOnIconClick}\n                className=\"adyen-web__ctp-info-button\"\n                aria-label={i18n.get('ctp.aria.infoModalButton')}\n                type=\"button\"\n            >\n                <Img height=\"15\" src={url} ariaHidden={true} />\n            </button>\n\n            <CtPInfoModal isOpen={isInfoModalOpen} onClose={handleOnClose} focusAfterClose={buttonRef.current} />\n        </Fragment>\n    );\n};\n\nexport { CtPInfo };\n"],"names":["CtPInfo","isInfoModalOpen","setIsInfoModalOpen","useState","buttonRef","useRef","i18n","useCoreContext","url","useImage","getImage","imageFolder","handleOnClose","useCallback","handleOnIconClick","h","Fragment","button","ref","onClick","className","aria-label","get","type","Img","height","src","ariaHidden","CtPInfoModal","isOpen","onClose","focusAfterClose","current"],"mappings":"4aAQA,MAAMA,EAAU,KACZ,MAAOC,EAAiBC,GAAsBC,GAAkB,GAC1DC,EAAYC,KACZC,KAAEA,GAASC,IAEXC,EADWC,GACLC,CAAS,CAAEC,YAAa,eAAxBD,CAAyC,QAE/CE,EAAgBC,GAAY,KAC9BX,GAAmB,EAAA,GACpB,IAEGY,EAAoBD,GAAY,KAClCX,GAAmB,EAAA,GACpB,IAEH,OACIa,EAACC,OACGD,EAACE,SAAAA,CACGC,IAAKd,EACLe,QAASL,EACTM,UAAU,6BACVC,aAAYf,EAAKgB,IAAI,4BACrBC,KAAK,UAELR,EAACS,EAAAA,CAAIC,OAAO,KAAKC,IAAKlB,EAAKmB,YAAY,KAG3CZ,EAACa,EAAAA,CAAaC,OAAQ5B,EAAiB6B,QAASlB,EAAemB,gBAAiB3B,EAAU4B"}
+{"version":3,"file":"CtPInfo.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfo.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { CtPInfoModal } from './CtPInfoModal';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport Img from '../../../Img';\nimport './CtPInfo.scss';\n\nconst CtPInfo = () => {\n    const [isInfoModalOpen, setIsInfoModalOpen] = useState<boolean>(false);\n    const buttonRef = useRef<HTMLButtonElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const url = getImage({ imageFolder: 'components/' })('info');\n\n    const handleOnClose = useCallback(() => {\n        setIsInfoModalOpen(false);\n    }, []);\n\n    const handleOnIconClick = useCallback(() => {\n        setIsInfoModalOpen(true);\n    }, []);\n\n    return (\n        <Fragment>\n            <button\n                ref={buttonRef}\n                onClick={handleOnIconClick}\n                className=\"adyen-web__ctp-info-button\"\n                aria-label={i18n.get('ctp.aria.infoModalButton')}\n                type=\"button\"\n            >\n                <Img height=\"15\" src={url} ariaHidden={true} />\n            </button>\n\n            <CtPInfoModal isOpen={isInfoModalOpen} onClose={handleOnClose} focusAfterClose={buttonRef.current} />\n        </Fragment>\n    );\n};\n\nexport { CtPInfo };\n"],"names":["CtPInfo","isInfoModalOpen","setIsInfoModalOpen","useState","buttonRef","useRef","i18n","useCoreContext","url","useImage","getImage","imageFolder","handleOnClose","useCallback","handleOnIconClick","h","Fragment","button","ref","onClick","className","aria-label","get","type","Img","height","src","ariaHidden","CtPInfoModal","isOpen","onClose","focusAfterClose","current"],"mappings":"4aAQA,MAAMA,EAAU,KACZ,MAAOC,EAAiBC,GAAsBC,GAAkB,GAC1DC,EAAYC,KACZC,KAAEA,GAASC,IAEXC,EADWC,GACLC,CAAS,CAAEC,YAAa,eAAxBD,CAAyC,QAE/CE,EAAgBC,EAAY,KAC9BX,GAAmB,IACpB,IAEGY,EAAoBD,EAAY,KAClCX,GAAmB,IACpB,IAEH,OACIa,EAACC,OACGD,EAACE,SAAAA,CACGC,IAAKd,EACLe,QAASL,EACTM,UAAU,6BACVC,aAAYf,EAAKgB,IAAI,4BACrBC,KAAK,UAELR,EAACS,EAAAA,CAAIC,OAAO,KAAKC,IAAKlB,EAAKmB,YAAY,KAG3CZ,EAACa,EAAAA,CAAaC,OAAQ5B,EAAiB6B,QAASlB,EAAemB,gBAAiB3B,EAAU4B"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../../../external/preact/dist/preact.js";import{useRef as o}from"../../../../../../external/preact/hooks/dist/hooks.js";import{CtPBrand as s}from"../../CtPBrand/CtPBrand.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import c from"../../../../../../core/Context/useImage.js";import{Modal as l}from"../../../../Modal/Modal.js";import n from"../../../../Img/Img.js";import r from"../../../../Button/Button.js";let i=Date.now();function p(){return i+=1,`adyen-${i}`}const m=({isOpen:i,onClose:m,focusAfterClose:d})=>{const u=o(),{i18n:f}=a(),g=c(),C=p(),_=p();return e(l,{onClose:m,isOpen:i,classNameModifiers:["ctp"],labelledBy:C,describedBy:_,focusFirst:u.current,focusAfterClose:d},(({onCloseModal:o})=>e(t,null,e(n,{className:"adyen-checkout__ctp-modal-header-image",src:g({imageFolder:"components/"})("ctp_landscape"),alt:""}),e("h1",{id:C,className:"adyen-checkout__ctp-modal-title"},f.get("ctp.infoPopup.title")),e("div",{id:_},e("p",{tabIndex:-1,ref:u,className:"adyen-checkout__ctp-modal-text"},f.get("ctp.infoPopup.subtitle")),e("ul",{className:"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits",type:"disc"},e("li",null,f.get("ctp.infoPopup.benefit1")),e("li",null,f.get("ctp.infoPopup.benefit2")),e("li",null,f.get("ctp.infoPopup.benefit3"))),e(s,{classNameModifiers:["popup"]})),e(r,{onClick:o,label:f.get("close")}))))};export{m as CtPInfoModal};
+import{createElement as e,Fragment as t}from"../../../../../../external/preact/dist/preact.js";import{useRef as o}from"../../../../../../external/preact/hooks/dist/hooks.js";import{CtPBrand as s}from"../../CtPBrand/CtPBrand.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import c from"../../../../../../core/Context/useImage.js";import{Modal as l}from"../../../../Modal/Modal.js";import n from"../../../../Img/Img.js";import r from"../../../../Button/Button.js";let i=Date.now();function p(){return i+=1,`adyen-${i}`}const m=({isOpen:i,onClose:m,focusAfterClose:d})=>{const u=o(),{i18n:f}=a(),g=c(),C=p(),_=p();return e(l,{onClose:m,isOpen:i,classNameModifiers:["ctp"],labelledBy:C,describedBy:_,focusFirst:u.current,focusAfterClose:d},({onCloseModal:o})=>e(t,null,e(n,{className:"adyen-checkout__ctp-modal-header-image",src:g({imageFolder:"components/"})("ctp_landscape"),alt:""}),e("h1",{id:C,className:"adyen-checkout__ctp-modal-title"},f.get("ctp.infoPopup.title")),e("div",{id:_},e("p",{tabIndex:-1,ref:u,className:"adyen-checkout__ctp-modal-text"},f.get("ctp.infoPopup.subtitle")),e("ul",{className:"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits",type:"disc"},e("li",null,f.get("ctp.infoPopup.benefit1")),e("li",null,f.get("ctp.infoPopup.benefit2")),e("li",null,f.get("ctp.infoPopup.benefit3"))),e(s,{classNameModifiers:["popup"]})),e(r,{onClick:o,label:f.get("close")})))};export{m as CtPInfoModal};
 //# sourceMappingURL=CtPInfoModal.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPInfoModal.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { CtPBrand } from '../../CtPBrand';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport { Modal } from '../../../../Modal';\nimport Img from '../../../../Img';\nimport Button from '../../../../Button';\nimport './CtPInfoModal.scss';\n\nlet idGenerator = Date.now();\n\nfunction getUniqueId() {\n    idGenerator += 1;\n    return `adyen-${idGenerator}`;\n}\n\ntype CtPInfoModalProps = {\n    isOpen: boolean;\n    onClose(): void;\n    focusAfterClose: HTMLElement;\n};\n\nconst CtPInfoModal = ({ isOpen, onClose, focusAfterClose }: CtPInfoModalProps) => {\n    const focusFirstElement = useRef<HTMLParagraphElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const labelledBy = getUniqueId();\n    const describedBy = getUniqueId();\n\n    return (\n        <Modal\n            onClose={onClose}\n            isOpen={isOpen}\n            classNameModifiers={['ctp']}\n            labelledBy={labelledBy}\n            describedBy={describedBy}\n            focusFirst={focusFirstElement.current}\n            focusAfterClose={focusAfterClose}\n        >\n            {({ onCloseModal }) => (\n                <Fragment>\n                    <Img className=\"adyen-checkout__ctp-modal-header-image\" src={getImage({ imageFolder: 'components/' })('ctp_landscape')} alt=\"\" />\n                    <h1 id={labelledBy} className=\"adyen-checkout__ctp-modal-title\">\n                        {i18n.get('ctp.infoPopup.title')}\n                    </h1>\n\n                    <div id={describedBy}>\n                        <p tabIndex={-1} ref={focusFirstElement} className=\"adyen-checkout__ctp-modal-text\">\n                            {i18n.get('ctp.infoPopup.subtitle')}\n                        </p>\n\n                        <ul className=\"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits\" type=\"disc\">\n                            <li>{i18n.get('ctp.infoPopup.benefit1')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit2')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit3')}</li>\n                        </ul>\n\n                        <CtPBrand classNameModifiers={['popup']} />\n                    </div>\n\n                    <Button onClick={onCloseModal} label={i18n.get('close')} />\n                </Fragment>\n            )}\n        </Modal>\n    );\n};\n\nexport { CtPInfoModal };\n"],"names":["idGenerator","Date","now","getUniqueId","CtPInfoModal","isOpen","onClose","focusAfterClose","focusFirstElement","useRef","i18n","useCoreContext","getImage","useImage","labelledBy","describedBy","h","Modal","classNameModifiers","focusFirst","current","onCloseModal","Fragment","Img","className","src","imageFolder","alt","h1","id","get","div","p","tabIndex","ref","ul","type","li","CtPBrand","Button","onClick","label"],"mappings":"mfAUA,IAAIA,EAAcC,KAAKC,MAEvB,SAASC,IAEL,OADAH,GAAe,EACR,SAASA,GACpB,CAQMI,MAAAA,EAAe,EAAGC,SAAQC,UAASC,sBACrC,MAAMC,EAAoBC,KACpBC,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAaX,IACbY,EAAcZ,IAEpB,OACIa,EAACC,EAAAA,CACGX,QAASA,EACTD,OAAQA,EACRa,mBAAoB,CAAC,OACrBJ,WAAYA,EACZC,YAAaA,EACbI,WAAYX,EAAkBY,QAC9Bb,gBAAiBA,IAEhB,EAAGc,kBACAL,EAACM,OACGN,EAACO,EAAAA,CAAIC,UAAU,yCAAyCC,IAAKb,EAAS,CAAEc,YAAa,eAAxBd,CAAyC,iBAAkBe,IAAI,KAC5HX,EAACY,KAAAA,CAAGC,GAAIf,EAAYU,UAAU,mCACzBd,EAAKoB,IAAI,wBAGdd,EAACe,MAAAA,CAAIF,GAAId,GACLC,EAACgB,IAAAA,CAAEC,UAAW,EAAGC,IAAK1B,EAAmBgB,UAAU,kCAC9Cd,EAAKoB,IAAI,2BAGdd,EAACmB,KAAAA,CAAGX,UAAU,oEAAoEY,KAAK,QACnFpB,EAACqB,UAAI3B,EAAKoB,IAAI,2BACdd,EAACqB,KAAI3B,KAAAA,EAAKoB,IAAI,2BACdd,EAACqB,KAAAA,KAAI3B,EAAKoB,IAAI,4BAGlBd,EAACsB,EAAAA,CAASpB,mBAAoB,CAAC,YAGnCF,EAACuB,EAAAA,CAAOC,QAASnB,EAAcoB,MAAO/B,EAAKoB,IAAI"}
+{"version":3,"file":"CtPInfoModal.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { CtPBrand } from '../../CtPBrand';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport { Modal } from '../../../../Modal';\nimport Img from '../../../../Img';\nimport Button from '../../../../Button';\nimport './CtPInfoModal.scss';\n\nlet idGenerator = Date.now();\n\nfunction getUniqueId() {\n    idGenerator += 1;\n    return `adyen-${idGenerator}`;\n}\n\ntype CtPInfoModalProps = {\n    isOpen: boolean;\n    onClose(): void;\n    focusAfterClose: HTMLElement;\n};\n\nconst CtPInfoModal = ({ isOpen, onClose, focusAfterClose }: CtPInfoModalProps) => {\n    const focusFirstElement = useRef<HTMLParagraphElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const labelledBy = getUniqueId();\n    const describedBy = getUniqueId();\n\n    return (\n        <Modal\n            onClose={onClose}\n            isOpen={isOpen}\n            classNameModifiers={['ctp']}\n            labelledBy={labelledBy}\n            describedBy={describedBy}\n            focusFirst={focusFirstElement.current}\n            focusAfterClose={focusAfterClose}\n        >\n            {({ onCloseModal }) => (\n                <Fragment>\n                    <Img className=\"adyen-checkout__ctp-modal-header-image\" src={getImage({ imageFolder: 'components/' })('ctp_landscape')} alt=\"\" />\n                    <h1 id={labelledBy} className=\"adyen-checkout__ctp-modal-title\">\n                        {i18n.get('ctp.infoPopup.title')}\n                    </h1>\n\n                    <div id={describedBy}>\n                        <p tabIndex={-1} ref={focusFirstElement} className=\"adyen-checkout__ctp-modal-text\">\n                            {i18n.get('ctp.infoPopup.subtitle')}\n                        </p>\n\n                        <ul className=\"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits\" type=\"disc\">\n                            <li>{i18n.get('ctp.infoPopup.benefit1')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit2')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit3')}</li>\n                        </ul>\n\n                        <CtPBrand classNameModifiers={['popup']} />\n                    </div>\n\n                    <Button onClick={onCloseModal} label={i18n.get('close')} />\n                </Fragment>\n            )}\n        </Modal>\n    );\n};\n\nexport { CtPInfoModal };\n"],"names":["idGenerator","Date","now","getUniqueId","CtPInfoModal","isOpen","onClose","focusAfterClose","focusFirstElement","useRef","i18n","useCoreContext","getImage","useImage","labelledBy","describedBy","h","Modal","classNameModifiers","focusFirst","current","onCloseModal","Fragment","Img","className","src","imageFolder","alt","h1","id","get","div","p","tabIndex","ref","ul","type","li","CtPBrand","Button","onClick","label"],"mappings":"mfAUA,IAAIA,EAAcC,KAAKC,MAEvB,SAASC,IAEL,OADAH,GAAe,EACR,SAASA,GACpB,CAQA,MAAMI,EAAe,EAAGC,SAAQC,UAASC,sBACrC,MAAMC,EAAoBC,KACpBC,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAaX,IACbY,EAAcZ,IAEpB,OACIa,EAACC,EAAAA,CACGX,QAASA,EACTD,OAAQA,EACRa,mBAAoB,CAAC,OACrBJ,WAAYA,EACZC,YAAaA,EACbI,WAAYX,EAAkBY,QAC9Bb,gBAAiBA,GAEhB,EAAGc,kBACAL,EAACM,OACGN,EAACO,EAAAA,CAAIC,UAAU,yCAAyCC,IAAKb,EAAS,CAAEc,YAAa,eAAxBd,CAAyC,iBAAkBe,IAAI,KAC5HX,EAACY,KAAAA,CAAGC,GAAIf,EAAYU,UAAU,mCACzBd,EAAKoB,IAAI,wBAGdd,EAACe,MAAAA,CAAIF,GAAId,GACLC,EAACgB,IAAAA,CAAEC,UAAU,EAAIC,IAAK1B,EAAmBgB,UAAU,kCAC9Cd,EAAKoB,IAAI,2BAGdd,EAACmB,KAAAA,CAAGX,UAAU,oEAAoEY,KAAK,QACnFpB,EAACqB,UAAI3B,EAAKoB,IAAI,2BACdd,EAACqB,KAAAA,KAAI3B,EAAKoB,IAAI,2BACdd,EAACqB,KAAAA,KAAI3B,EAAKoB,IAAI,4BAGlBd,EAACsB,EAAAA,CAASpB,mBAAoB,CAAC,YAGnCF,EAACuB,EAAAA,CAAOC,QAASnB,EAAcoB,MAAO/B,EAAKoB,IAAI"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPLoader/CtPLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPLoader.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLoader.scss';\n\nconst CtPLoader = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        <Fragment>\n            <div className=\"adyen-checkout-ctp__card-animation\">\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n            </div>\n\n            <div className=\"adyen-checkout-ctp__loading-subtitle\">{i18n.get('ctp.loading.intro')}</div>\n        </Fragment>\n    );\n};\n\nexport default CtPLoader;\n"],"names":["CtPLoader","i18n","useCoreContext","h","Fragment","div","className","get"],"mappings":"yKAIA,MAAMA,EAAY,KACd,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,OACGD,EAACE,MAAAA,CAAIC,UAAU,sCACXH,EAACE,MAAAA,CAAIC,UAAU,6CACfH,EAACE,MAAAA,CAAIC,UAAU,6CACfH,EAACE,MAAAA,CAAIC,UAAU,8CAGnBH,EAACE,MAAAA,CAAIC,UAAU,wCAAwCL,EAAKM,IAAI,sBAAA"}
+{"version":3,"file":"CtPLoader.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLoader.scss';\n\nconst CtPLoader = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        <Fragment>\n            <div className=\"adyen-checkout-ctp__card-animation\">\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n                <div className=\"adyen-checkout-ctp__card-animation-layer\"></div>\n            </div>\n\n            <div className=\"adyen-checkout-ctp__loading-subtitle\">{i18n.get('ctp.loading.intro')}</div>\n        </Fragment>\n    );\n};\n\nexport default CtPLoader;\n"],"names":["CtPLoader","i18n","useCoreContext","h","Fragment","div","className","get"],"mappings":"yKAIA,MAAMA,EAAY,KACd,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,OACGD,EAACE,MAAAA,CAAIC,UAAU,sCACXH,EAACE,MAAAA,CAAIC,UAAU,6CACfH,EAACE,MAAAA,CAAIC,UAAU,6CACfH,EAACE,MAAAA,CAAIC,UAAU,8CAGnBH,EAACE,MAAAA,CAAIC,UAAU,wCAAwCL,EAAKM,IAAI"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPLogin/CtPLogin.js

@@ -1,2 +1,2 @@
-import{createElement as t,Fragment as o}from"../../../../../external/preact/dist/preact.js";import{useState as r,useCallback as e}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../Button/Button.js";import s from"../../context/useClickToPayContext.js";import i from"./CtPLoginInput.js";import{CtPInfo as a}from"../CtPInfo/CtPInfo.js";import l from"../CtPSection/CtPSection.js";import m from"../../services/sdks/SrciError.js";import{useCoreContext as p}from"../../../../../core/Context/CoreProvider.js";import c from"../../errors/TimeoutError.js";import{isSrciError as u}from"../../services/utils.js";const d=()=>{const{i18n:d}=p(),{isCtpPrimaryPaymentMethod:f,setIsCtpPrimaryPaymentMethod:g,verifyIfShopperIsEnrolled:C,startIdentityValidation:y}=s(),[P,h]=r(null),[j,v]=r(!1),[I,E]=r(null),[S,k]=r(!1),[x,w]=r(null),T=e((t=>{w(t)}),[]),b=e((({data:t,isValid:o})=>{var r;h(t.shopperLogin),v(o),(null==t||null===(r=t.shopperLogin)||void 0===r?void 0:r.length)>0&&g(!0)}),[]),L=e((async()=>{if(E(null),j){k(!0);try{const{isEnrolled:t}=await C({shopperEmail:P});t?await y():(E("NOT_FOUND"),k(!1))}catch(t){t instanceof m&&console.warn(`CtP - Login error: ${t.toString()}`),t instanceof c&&console.warn(t.toString()),u(t)?E(null==t?void 0:t.reason):console.error(t),k(!1)}}else x.validateInput()}),[C,y,P,j,x]),M=e((t=>{"Enter"===t.key&&L()}),[L]);return t(o,null,t(l.Title,{endAdornment:t(a,null)},d.get("ctp.login.title")),t(l.Text,null,d.get("ctp.login.subtitle")),t(i,{onChange:b,onSetInputHandlers:T,disabled:S,errorMessage:I&&d.get(`ctp.errors.${I}`),onPressEnter:L}),t(n,{label:d.get("continue"),variant:f?"primary":"secondary",status:S&&"loading",onClick:()=>{L()},onKeyDown:M}))};export{d as default};
+import{createElement as t,Fragment as o}from"../../../../../external/preact/dist/preact.js";import{useState as r,useCallback as e}from"../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../Button/Button.js";import s from"../../context/useClickToPayContext.js";import i from"./CtPLoginInput.js";import{CtPInfo as a}from"../CtPInfo/CtPInfo.js";import l from"../CtPSection/CtPSection.js";import m from"../../services/sdks/SrciError.js";import{useCoreContext as p}from"../../../../../core/Context/CoreProvider.js";import c from"../../errors/TimeoutError.js";import{isSrciError as u}from"../../services/utils.js";const d=()=>{const{i18n:d}=p(),{isCtpPrimaryPaymentMethod:f,setIsCtpPrimaryPaymentMethod:g,verifyIfShopperIsEnrolled:C,startIdentityValidation:y}=s(),[P,h]=r(null),[j,v]=r(!1),[I,E]=r(null),[S,k]=r(!1),[x,w]=r(null),T=e(t=>{w(t)},[]),b=e(({data:t,isValid:o})=>{var r;h(t.shopperLogin),v(o),(null==t||null===(r=t.shopperLogin)||void 0===r?void 0:r.length)>0&&g(!0)},[]),L=e(async()=>{if(E(null),j){k(!0);try{const{isEnrolled:t}=await C({shopperEmail:P});t?await y():(E("NOT_FOUND"),k(!1))}catch(t){t instanceof m&&console.warn(`CtP - Login error: ${t.toString()}`),t instanceof c&&console.warn(t.toString()),u(t)?E(null==t?void 0:t.reason):console.error(t),k(!1)}}else x.validateInput()},[C,y,P,j,x]),M=e(t=>{"Enter"===t.key&&L()},[L]);return t(o,null,t(l.Title,{endAdornment:t(a,null)},d.get("ctp.login.title")),t(l.Text,null,d.get("ctp.login.subtitle")),t(i,{onChange:b,onSetInputHandlers:T,disabled:S,errorMessage:I&&d.get(`ctp.errors.${I}`),onPressEnter:L}),t(n,{label:d.get("continue"),variant:f?"primary":"secondary",status:S&&"loading",onClick:()=>{L()},onKeyDown:M}))};export{d as default};
 //# sourceMappingURL=CtPLogin.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPLogin/CtPLogin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPLogin.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLogin.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPLoginInput, { CtPLoginInputHandlers } from './CtPLoginInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport SrciError from '../../services/sdks/SrciError';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogin.scss';\nimport TimeoutError from '../../errors/TimeoutError';\nimport { isSrciError } from '../../services/utils';\n\nconst CtPLogin = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { isCtpPrimaryPaymentMethod, setIsCtpPrimaryPaymentMethod, verifyIfShopperIsEnrolled, startIdentityValidation } = useClickToPayContext();\n    const [shopperLogin, setShopperLogin] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);\n    const [loginInputHandlers, setLoginInputHandlers] = useState<CtPLoginInputHandlers>(null);\n\n    const onSetLoginInputHandlers = useCallback((handlers: CtPLoginInputHandlers) => {\n        setLoginInputHandlers(handlers);\n    }, []);\n\n    const handleOnLoginChange = useCallback(({ data, isValid }) => {\n        setShopperLogin(data.shopperLogin);\n        setIsValid(isValid);\n\n        // As soon as the Shopper interacts with input, the CtP becomes the primary PM\n        if (data?.shopperLogin?.length > 0) {\n            setIsCtpPrimaryPaymentMethod(true);\n        }\n    }, []);\n\n    const handleOnLoginButtonClick = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            loginInputHandlers.validateInput();\n            return;\n        }\n\n        setIsLoggingIn(true);\n\n        try {\n            const { isEnrolled } = await verifyIfShopperIsEnrolled({ shopperEmail: shopperLogin });\n            if (isEnrolled) {\n                await startIdentityValidation();\n            } else {\n                setErrorCode('NOT_FOUND');\n                setIsLoggingIn(false);\n            }\n        } catch (error: unknown) {\n            if (error instanceof SrciError) console.warn(`CtP - Login error: ${error.toString()}`);\n            if (error instanceof TimeoutError) console.warn(error.toString());\n            if (isSrciError(error)) setErrorCode(error?.reason);\n            else console.error(error);\n\n            setIsLoggingIn(false);\n        }\n    }, [verifyIfShopperIsEnrolled, startIdentityValidation, shopperLogin, isValid, loginInputHandlers]);\n\n    const handleButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void handleOnLoginButtonClick();\n            }\n        },\n        [handleOnLoginButtonClick]\n    );\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.login.title')}</CtPSection.Title>\n\n            <CtPSection.Text>{i18n.get('ctp.login.subtitle')}</CtPSection.Text>\n\n            <CtPLoginInput\n                onChange={handleOnLoginChange}\n                onSetInputHandlers={onSetLoginInputHandlers}\n                disabled={isLoggingIn}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={handleOnLoginButtonClick}\n            />\n\n            <Button\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                status={isLoggingIn && 'loading'}\n                onClick={() => {\n                    void handleOnLoginButtonClick();\n                }}\n                onKeyDown={handleButtonKeyDown}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPLogin;\n"],"names":["CtPLogin","i18n","useCoreContext","isCtpPrimaryPaymentMethod","setIsCtpPrimaryPaymentMethod","verifyIfShopperIsEnrolled","startIdentityValidation","useClickToPayContext","shopperLogin","setShopperLogin","useState","isValid","setIsValid","errorCode","setErrorCode","isLoggingIn","setIsLoggingIn","loginInputHandlers","setLoginInputHandlers","onSetLoginInputHandlers","useCallback","handlers","handleOnLoginChange","data","length","handleOnLoginButtonClick","async","isEnrolled","shopperEmail","error","SrciError","console","warn","toString","TimeoutError","isSrciError","reason","validateInput","handleButtonKeyDown","event","key","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","get","Text","CtPLoginInput","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","Button","label","variant","status","onClick","onKeyDown"],"mappings":"qnBAaA,MAAMA,EAAW,KACb,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,6BAAEA,EAA4BC,0BAAEA,EAAyBC,wBAAEA,GAA4BC,KACjHC,EAAcC,GAAmBC,EAAiB,OAClDC,EAASC,GAAcF,GAAkB,IACzCG,EAAWC,GAAgBJ,EAAiB,OAC5CK,EAAaC,GAAkBN,GAAkB,IACjDO,EAAoBC,GAAyBR,EAAgC,MAE9ES,EAA0BC,GAAaC,IACzCH,EAAsBG,EAAAA,GACvB,IAEGC,EAAsBF,GAAY,EAAGG,OAAMZ,cAKzCY,IAAAA,EAJJd,EAAgBc,EAAKf,cACrBI,EAAWD,IAGPY,SAAkB,QAAlBA,EAAAA,EAAMf,oBAANe,IAAAA,OAAAA,EAAAA,EAAoBC,QAAS,GAC7BpB,GAA6B,EACjC,GACD,IAEGqB,EAA2BL,GAAYM,UAGzC,GAFAZ,EAAa,MAERH,EAAL,CAKAK,GAAe,GAEf,IACI,MAAMW,WAAEA,SAAqBtB,EAA0B,CAAEuB,aAAcpB,IACnEmB,QACMrB,KAENQ,EAAa,aACbE,GAAe,GAEvB,CAAE,MAAOa,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,sBAAsBH,EAAMI,cACrEJ,aAAiBK,GAAcH,QAAQC,KAAKH,EAAMI,YAClDE,EAAYN,GAAQf,EAAae,aAAAA,EAAAA,EAAOO,QACvCL,QAAQF,MAAMA,GAEnBb,GAAe,EACnB,CAnBA,MAFIC,EAAmBoB,eAqBvB,GACD,CAAChC,EAA2BC,EAAyBE,EAAcG,EAASM,IAEzEqB,EAAsBlB,GACvBmB,IACqB,UAAdA,EAAMC,KACDf,GACT,GAEJ,CAACA,IAGL,OACIgB,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAa7C,EAAK8C,IAAI,oBAEvDN,EAACE,EAAWK,KAAI,KAAE/C,EAAK8C,IAAI,uBAE3BN,EAACQ,EAAAA,CACGC,SAAU5B,EACV6B,mBAAoBhC,EACpBiC,SAAUrC,EACVsC,aAAcxC,GAAaZ,EAAK8C,IAAI,cAAclC,KAClDyC,aAAc7B,IAGlBgB,EAACc,EAAAA,CACGC,MAAOvD,EAAK8C,IAAI,YAChBU,QAAStD,EAA4B,UAAY,YACjDuD,OAAQ3C,GAAe,UACvB4C,QAAS,KACAlC,GAAAA,EAETmC,UAAWtB"}
+{"version":3,"file":"CtPLogin.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLogin.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPLoginInput, { CtPLoginInputHandlers } from './CtPLoginInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport SrciError from '../../services/sdks/SrciError';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogin.scss';\nimport TimeoutError from '../../errors/TimeoutError';\nimport { isSrciError } from '../../services/utils';\n\nconst CtPLogin = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { isCtpPrimaryPaymentMethod, setIsCtpPrimaryPaymentMethod, verifyIfShopperIsEnrolled, startIdentityValidation } = useClickToPayContext();\n    const [shopperLogin, setShopperLogin] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);\n    const [loginInputHandlers, setLoginInputHandlers] = useState<CtPLoginInputHandlers>(null);\n\n    const onSetLoginInputHandlers = useCallback((handlers: CtPLoginInputHandlers) => {\n        setLoginInputHandlers(handlers);\n    }, []);\n\n    const handleOnLoginChange = useCallback(({ data, isValid }) => {\n        setShopperLogin(data.shopperLogin);\n        setIsValid(isValid);\n\n        // As soon as the Shopper interacts with input, the CtP becomes the primary PM\n        if (data?.shopperLogin?.length > 0) {\n            setIsCtpPrimaryPaymentMethod(true);\n        }\n    }, []);\n\n    const handleOnLoginButtonClick = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            loginInputHandlers.validateInput();\n            return;\n        }\n\n        setIsLoggingIn(true);\n\n        try {\n            const { isEnrolled } = await verifyIfShopperIsEnrolled({ shopperEmail: shopperLogin });\n            if (isEnrolled) {\n                await startIdentityValidation();\n            } else {\n                setErrorCode('NOT_FOUND');\n                setIsLoggingIn(false);\n            }\n        } catch (error: unknown) {\n            if (error instanceof SrciError) console.warn(`CtP - Login error: ${error.toString()}`);\n            if (error instanceof TimeoutError) console.warn(error.toString());\n            if (isSrciError(error)) setErrorCode(error?.reason);\n            else console.error(error);\n\n            setIsLoggingIn(false);\n        }\n    }, [verifyIfShopperIsEnrolled, startIdentityValidation, shopperLogin, isValid, loginInputHandlers]);\n\n    const handleButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void handleOnLoginButtonClick();\n            }\n        },\n        [handleOnLoginButtonClick]\n    );\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.login.title')}</CtPSection.Title>\n\n            <CtPSection.Text>{i18n.get('ctp.login.subtitle')}</CtPSection.Text>\n\n            <CtPLoginInput\n                onChange={handleOnLoginChange}\n                onSetInputHandlers={onSetLoginInputHandlers}\n                disabled={isLoggingIn}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={handleOnLoginButtonClick}\n            />\n\n            <Button\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                status={isLoggingIn && 'loading'}\n                onClick={() => {\n                    void handleOnLoginButtonClick();\n                }}\n                onKeyDown={handleButtonKeyDown}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPLogin;\n"],"names":["CtPLogin","i18n","useCoreContext","isCtpPrimaryPaymentMethod","setIsCtpPrimaryPaymentMethod","verifyIfShopperIsEnrolled","startIdentityValidation","useClickToPayContext","shopperLogin","setShopperLogin","useState","isValid","setIsValid","errorCode","setErrorCode","isLoggingIn","setIsLoggingIn","loginInputHandlers","setLoginInputHandlers","onSetLoginInputHandlers","useCallback","handlers","handleOnLoginChange","data","length","handleOnLoginButtonClick","async","isEnrolled","shopperEmail","error","SrciError","console","warn","toString","TimeoutError","isSrciError","reason","validateInput","handleButtonKeyDown","event","key","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","get","Text","CtPLoginInput","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","Button","label","variant","status","onClick","onKeyDown"],"mappings":"qnBAaA,MAAMA,EAAW,KACb,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,6BAAEA,EAA4BC,0BAAEA,EAAyBC,wBAAEA,GAA4BC,KACjHC,EAAcC,GAAmBC,EAAiB,OAClDC,EAASC,GAAcF,GAAkB,IACzCG,EAAWC,GAAgBJ,EAAiB,OAC5CK,EAAaC,GAAkBN,GAAkB,IACjDO,EAAoBC,GAAyBR,EAAgC,MAE9ES,EAA0BC,EAAaC,IACzCH,EAAsBG,IACvB,IAEGC,EAAsBF,EAAY,EAAGG,OAAMZ,cAKzCY,IAAAA,EAJJd,EAAgBc,EAAKf,cACrBI,EAAWD,IAGPY,SAAkB,QAAlBA,EAAAA,EAAMf,oBAANe,IAAAA,OAAAA,EAAAA,EAAoBC,QAAS,GAC7BpB,GAA6B,IAElC,IAEGqB,EAA2BL,EAAYM,UAGzC,GAFAZ,EAAa,MAERH,EAAL,CAKAK,GAAe,GAEf,IACI,MAAMW,WAAEA,SAAqBtB,EAA0B,CAAEuB,aAAcpB,IACnEmB,QACMrB,KAENQ,EAAa,aACbE,GAAe,GAEvB,CAAE,MAAOa,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,sBAAsBH,EAAMI,cACrEJ,aAAiBK,GAAcH,QAAQC,KAAKH,EAAMI,YAClDE,EAAYN,GAAQf,EAAae,aAAAA,EAAAA,EAAOO,QACvCL,QAAQF,MAAMA,GAEnBb,GAAe,EACnB,CAnBA,MAFIC,EAAmBoB,iBAsBxB,CAAChC,EAA2BC,EAAyBE,EAAcG,EAASM,IAEzEqB,EAAsBlB,EACvBmB,IACqB,UAAdA,EAAMC,KACDf,KAGb,CAACA,IAGL,OACIgB,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAa7C,EAAK8C,IAAI,oBAEvDN,EAACE,EAAWK,KAAI,KAAE/C,EAAK8C,IAAI,uBAE3BN,EAACQ,EAAAA,CACGC,SAAU5B,EACV6B,mBAAoBhC,EACpBiC,SAAUrC,EACVsC,aAAcxC,GAAaZ,EAAK8C,IAAI,cAAclC,KAClDyC,aAAc7B,IAGlBgB,EAACc,EAAAA,CACGC,MAAOvD,EAAK8C,IAAI,YAChBU,QAAStD,EAA4B,UAAY,YACjDuD,OAAQ3C,GAAe,UACvB4C,QAAS,KACAlC,KAETmC,UAAWtB"}

package/dist/es-legacy/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 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};
 //# sourceMappingURL=CtPLoginInput.js.map

package/dist/es-legacy/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: 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,GAAY,KAC9BF,GAAqB,GACrBZ,GAAAA,GACD,CAACA,IAEJe,GAAU,KACFhB,EAAKiB,cAAcJ,GAAqB,EAAA,GAC7C,CAACb,EAAKiB,eAETD,GAAU,KACNP,EAAsBS,QAAQP,cAAgBA,EAC9Cf,EAAMuB,mBAAmBV,EAAsBS,QAAO,GACvD,CAACP,EAAef,EAAMuB,qBAEzB,MAAMC,EAAmBL,GACpBM,IACqB,UAAdA,EAAMC,KACD1B,EAAM2B,cACf,GAEJ,CAAC3B,EAAM2B,eAOX,OAJAP,GAAU,KACNpB,EAAM4B,SAAS,CAAExB,OAAME,QAAOC,SAAQC,WAAQ,GAC/C,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 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: 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"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePassword.js

@@ -1,2 +1,2 @@
-import{createElement as t,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as o,useCallback as n}from"../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../Button/Button.js";import r from"../../context/useClickToPayContext.js";import a from"./CtPOneTimePasswordInput/CtPOneTimePasswordInput.js";import{CtPInfo as i}from"../CtPInfo/CtPInfo.js";import l from"../CtPSection/CtPSection.js";import{useCoreContext as p}from"../../../../../core/Context/CoreProvider.js";import d from"./CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.js";import{isSrciError as u}from"../../services/utils.js";const m=({onDisplayCardComponent:m})=>{const{i18n:c}=p(),{finishIdentityValidation:C,otpMaskedContact:f,otpNetwork:P,isCtpPrimaryPaymentMethod:h}=r(),[k,y]=o(null),[g,j]=o(!1),[v,x]=o(!1),[I,b]=o(null),[S,T]=o(null),[w,E]=o(!1),B=n((t=>{T(t)}),[]),O=n((({data:t,isValid:e})=>{y(t.otp),j(e)}),[]),A=n((()=>{b(null)}),[]),M=n((async()=>{if(b(null),g){x(!0);try{await C(k)}catch(t){if(!u(t))return void x(!1);b(null==t?void 0:t.reason),x(!1),"ACCT_INACCESSIBLE"===(null==t?void 0:t.reason)&&(E(!0),null==m||m())}}else S.validateInput()}),[k,g,S,m]),N=n((t=>{"Enter"===t.key&&M()}),[M]),V=c.get("ctp.otp.subtitle").split("%@");return t(e,null,t(l.Title,{endAdornment:t(i,null)},c.get("ctp.otp.title")),t(l.Text,null,V[0]," ",P," ",V[1],t("span",{className:"adyen-checkout-ctp__otp-subtitle--highlighted"},f),V[2]),t(a,{hideResendOtpButton:w,onChange:O,onSetInputHandlers:B,disabled:v,errorMessage:I&&c.get(`ctp.errors.${I}`),onPressEnter:M,onResendCode:A,isValidatingOtp:v}),t(d,null),t(s,{disabled:w,label:c.get("continue"),variant:h?"primary":"secondary",onClick:M,status:v&&"loading",onKeyDown:N}))};export{m as default};
+import{createElement as t,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useState as o,useCallback as n}from"../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../Button/Button.js";import r from"../../context/useClickToPayContext.js";import a from"./CtPOneTimePasswordInput/CtPOneTimePasswordInput.js";import{CtPInfo as i}from"../CtPInfo/CtPInfo.js";import l from"../CtPSection/CtPSection.js";import{useCoreContext as p}from"../../../../../core/Context/CoreProvider.js";import d from"./CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.js";import{isSrciError as u}from"../../services/utils.js";const m=({onDisplayCardComponent:m})=>{const{i18n:c}=p(),{finishIdentityValidation:C,otpMaskedContact:f,otpNetwork:P,isCtpPrimaryPaymentMethod:h}=r(),[k,y]=o(null),[g,j]=o(!1),[v,x]=o(!1),[I,b]=o(null),[S,T]=o(null),[w,E]=o(!1),B=n(t=>{T(t)},[]),O=n(({data:t,isValid:e})=>{y(t.otp),j(e)},[]),A=n(()=>{b(null)},[]),M=n(async()=>{if(b(null),g){x(!0);try{await C(k)}catch(t){if(!u(t))return void x(!1);b(null==t?void 0:t.reason),x(!1),"ACCT_INACCESSIBLE"===(null==t?void 0:t.reason)&&(E(!0),null==m||m())}}else S.validateInput()},[k,g,S,m]),N=n(t=>{"Enter"===t.key&&M()},[M]),V=c.get("ctp.otp.subtitle").split("%@");return t(e,null,t(l.Title,{endAdornment:t(i,null)},c.get("ctp.otp.title")),t(l.Text,null,V[0]," ",P," ",V[1],t("span",{className:"adyen-checkout-ctp__otp-subtitle--highlighted"},f),V[2]),t(a,{hideResendOtpButton:w,onChange:O,onSetInputHandlers:B,disabled:v,errorMessage:I&&c.get(`ctp.errors.${I}`),onPressEnter:M,onResendCode:A,isValidatingOtp:v}),t(d,null),t(s,{disabled:w,label:c.get("continue"),variant:h?"primary":"secondary",onClick:M,status:v&&"loading",onKeyDown:N}))};export{m as default};
 //# sourceMappingURL=CtPOneTimePassword.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPOneTimePassword.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePassword.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPOneTimePasswordInput from './CtPOneTimePasswordInput';\nimport { CtPOneTimePasswordInputHandlers } from './CtPOneTimePasswordInput/CtPOneTimePasswordInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPOneTimePassword.scss';\nimport CtPSaveCookiesCheckbox from './CtPSaveCookiesCheckbox';\nimport { isSrciError } from '../../services/utils';\n\ntype CtPOneTimePasswordProps = {\n    onDisplayCardComponent?(): void;\n};\nconst CtPOneTimePassword = ({ onDisplayCardComponent }: CtPOneTimePasswordProps): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { finishIdentityValidation, otpMaskedContact, otpNetwork, isCtpPrimaryPaymentMethod } = useClickToPayContext();\n    const [otp, setOtp] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [isValidatingOtp, setIsValidatingOtp] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [otpInputHandlers, setOtpInputHandlers] = useState<CtPOneTimePasswordInputHandlers>(null);\n    const [isAccountLocked, setIsAccountLocked] = useState<boolean>(false);\n\n    const onSetOtpInputHandlers = useCallback((handlers: CtPOneTimePasswordInputHandlers) => {\n        setOtpInputHandlers(handlers);\n    }, []);\n\n    const onChangeOtpInput = useCallback(({ data, isValid }) => {\n        setOtp(data.otp);\n        setIsValid(isValid);\n    }, []);\n\n    const onResendCode = useCallback(() => {\n        setErrorCode(null);\n    }, []);\n\n    const onSubmitPassword = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            otpInputHandlers.validateInput();\n            return;\n        }\n\n        setIsValidatingOtp(true);\n\n        try {\n            await finishIdentityValidation(otp);\n        } catch (error: unknown) {\n            if (!isSrciError(error)) {\n                setIsValidatingOtp(false);\n                return;\n            }\n\n            setErrorCode(error?.reason);\n            setIsValidatingOtp(false);\n\n            if (error?.reason === 'ACCT_INACCESSIBLE') {\n                setIsAccountLocked(true);\n                onDisplayCardComponent?.();\n            }\n        }\n    }, [otp, isValid, otpInputHandlers, onDisplayCardComponent]);\n\n    const handleButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void onSubmitPassword();\n            }\n        },\n        [onSubmitPassword]\n    );\n\n    const subtitleParts = i18n.get('ctp.otp.subtitle').split('%@');\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.otp.title')}</CtPSection.Title>\n\n            <CtPSection.Text>\n                {subtitleParts[0]} {otpNetwork} {subtitleParts[1]}\n                <span className=\"adyen-checkout-ctp__otp-subtitle--highlighted\">{otpMaskedContact}</span>\n                {subtitleParts[2]}\n            </CtPSection.Text>\n\n            <CtPOneTimePasswordInput\n                hideResendOtpButton={isAccountLocked}\n                onChange={onChangeOtpInput}\n                onSetInputHandlers={onSetOtpInputHandlers}\n                disabled={isValidatingOtp}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={onSubmitPassword}\n                onResendCode={onResendCode}\n                isValidatingOtp={isValidatingOtp}\n            />\n\n            <CtPSaveCookiesCheckbox />\n\n            <Button\n                disabled={isAccountLocked}\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                onClick={onSubmitPassword}\n                status={isValidatingOtp && 'loading'}\n                onKeyDown={handleButtonKeyDown}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPOneTimePassword;\n"],"names":["CtPOneTimePassword","onDisplayCardComponent","i18n","useCoreContext","finishIdentityValidation","otpMaskedContact","otpNetwork","isCtpPrimaryPaymentMethod","useClickToPayContext","otp","setOtp","useState","isValid","setIsValid","isValidatingOtp","setIsValidatingOtp","errorCode","setErrorCode","otpInputHandlers","setOtpInputHandlers","isAccountLocked","setIsAccountLocked","onSetOtpInputHandlers","useCallback","handlers","onChangeOtpInput","data","onResendCode","onSubmitPassword","async","error","isSrciError","reason","validateInput","handleButtonKeyDown","event","key","subtitleParts","get","split","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","Text","span","className","CtPOneTimePasswordInput","hideResendOtpButton","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","CtPSaveCookiesCheckbox","Button","label","variant","onClick","status","onKeyDown"],"mappings":"6nBAgBA,MAAMA,EAAqB,EAAGC,6BAC1B,MAAMC,KAAEA,GAASC,KACXC,yBAAEA,EAAwBC,iBAAEA,EAAgBC,WAAEA,EAAUC,0BAAEA,GAA8BC,KACvFC,EAAKC,GAAUC,EAAiB,OAChCC,EAASC,GAAcF,GAAkB,IACzCG,EAAiBC,GAAsBJ,GAAkB,IACzDK,EAAWC,GAAgBN,EAAiB,OAC5CO,EAAkBC,GAAuBR,EAA0C,OACnFS,EAAiBC,GAAsBV,GAAkB,GAE1DW,EAAwBC,GAAaC,IACvCL,EAAoBK,EAAAA,GACrB,IAEGC,EAAmBF,GAAY,EAAGG,OAAMd,cAC1CF,EAAOgB,EAAKjB,KACZI,EAAWD,EAAAA,GACZ,IAEGe,EAAeJ,GAAY,KAC7BN,EAAa,KAAA,GACd,IAEGW,EAAmBL,GAAYM,UAGjC,GAFAZ,EAAa,MAERL,EAAL,CAKAG,GAAmB,GAEnB,UACUX,EAAyBK,EACnC,CAAE,MAAOqB,GACL,IAAKC,EAAYD,GAEb,YADAf,GAAmB,GAIvBE,EAAaa,aAAAA,EAAAA,EAAOE,QACpBjB,GAAmB,GAEG,uBAAlBe,aAAAA,EAAAA,EAAOE,UACPX,GAAmB,GACnBpB,SAAAA,IAER,CAnBA,MAFIiB,EAAiBe,eAqBrB,GACD,CAACxB,EAAKG,EAASM,EAAkBjB,IAE9BiC,EAAsBX,GACvBY,IACqB,UAAdA,EAAMC,KACDR,GACT,GAEJ,CAACA,IAGCS,EAAgBnC,EAAKoC,IAAI,oBAAoBC,MAAM,MAEzD,OACIC,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAa3C,EAAKoC,IAAI,kBAEvDE,EAACE,EAAWI,UACPT,EAAc,GAAG,IAAE/B,EAAW,IAAE+B,EAAc,GAC/CG,EAACO,OAAAA,CAAKC,UAAU,iDAAiD3C,GAChEgC,EAAc,IAGnBG,EAACS,EAAAA,CACGC,oBAAqB9B,EACrB+B,SAAU1B,EACV2B,mBAAoB9B,EACpB+B,SAAUvC,EACVwC,aAActC,GAAad,EAAKoC,IAAI,cAActB,KAClDuC,aAAc3B,EACdD,aAAcA,EACdb,gBAAiBA,IAGrB0B,EAACgB,QAEDhB,EAACiB,EAAAA,CACGJ,SAAUjC,EACVsC,MAAOxD,EAAKoC,IAAI,YAChBqB,QAASpD,EAA4B,UAAY,YACjDqD,QAAShC,EACTiC,OAAQ/C,GAAmB,UAC3BgD,UAAW5B"}
+{"version":3,"file":"CtPOneTimePassword.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePassword.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPOneTimePasswordInput from './CtPOneTimePasswordInput';\nimport { CtPOneTimePasswordInputHandlers } from './CtPOneTimePasswordInput/CtPOneTimePasswordInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPOneTimePassword.scss';\nimport CtPSaveCookiesCheckbox from './CtPSaveCookiesCheckbox';\nimport { isSrciError } from '../../services/utils';\n\ntype CtPOneTimePasswordProps = {\n    onDisplayCardComponent?(): void;\n};\nconst CtPOneTimePassword = ({ onDisplayCardComponent }: CtPOneTimePasswordProps): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { finishIdentityValidation, otpMaskedContact, otpNetwork, isCtpPrimaryPaymentMethod } = useClickToPayContext();\n    const [otp, setOtp] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [isValidatingOtp, setIsValidatingOtp] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [otpInputHandlers, setOtpInputHandlers] = useState<CtPOneTimePasswordInputHandlers>(null);\n    const [isAccountLocked, setIsAccountLocked] = useState<boolean>(false);\n\n    const onSetOtpInputHandlers = useCallback((handlers: CtPOneTimePasswordInputHandlers) => {\n        setOtpInputHandlers(handlers);\n    }, []);\n\n    const onChangeOtpInput = useCallback(({ data, isValid }) => {\n        setOtp(data.otp);\n        setIsValid(isValid);\n    }, []);\n\n    const onResendCode = useCallback(() => {\n        setErrorCode(null);\n    }, []);\n\n    const onSubmitPassword = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            otpInputHandlers.validateInput();\n            return;\n        }\n\n        setIsValidatingOtp(true);\n\n        try {\n            await finishIdentityValidation(otp);\n        } catch (error: unknown) {\n            if (!isSrciError(error)) {\n                setIsValidatingOtp(false);\n                return;\n            }\n\n            setErrorCode(error?.reason);\n            setIsValidatingOtp(false);\n\n            if (error?.reason === 'ACCT_INACCESSIBLE') {\n                setIsAccountLocked(true);\n                onDisplayCardComponent?.();\n            }\n        }\n    }, [otp, isValid, otpInputHandlers, onDisplayCardComponent]);\n\n    const handleButtonKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                void onSubmitPassword();\n            }\n        },\n        [onSubmitPassword]\n    );\n\n    const subtitleParts = i18n.get('ctp.otp.subtitle').split('%@');\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.otp.title')}</CtPSection.Title>\n\n            <CtPSection.Text>\n                {subtitleParts[0]} {otpNetwork} {subtitleParts[1]}\n                <span className=\"adyen-checkout-ctp__otp-subtitle--highlighted\">{otpMaskedContact}</span>\n                {subtitleParts[2]}\n            </CtPSection.Text>\n\n            <CtPOneTimePasswordInput\n                hideResendOtpButton={isAccountLocked}\n                onChange={onChangeOtpInput}\n                onSetInputHandlers={onSetOtpInputHandlers}\n                disabled={isValidatingOtp}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={onSubmitPassword}\n                onResendCode={onResendCode}\n                isValidatingOtp={isValidatingOtp}\n            />\n\n            <CtPSaveCookiesCheckbox />\n\n            <Button\n                disabled={isAccountLocked}\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                onClick={onSubmitPassword}\n                status={isValidatingOtp && 'loading'}\n                onKeyDown={handleButtonKeyDown}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPOneTimePassword;\n"],"names":["CtPOneTimePassword","onDisplayCardComponent","i18n","useCoreContext","finishIdentityValidation","otpMaskedContact","otpNetwork","isCtpPrimaryPaymentMethod","useClickToPayContext","otp","setOtp","useState","isValid","setIsValid","isValidatingOtp","setIsValidatingOtp","errorCode","setErrorCode","otpInputHandlers","setOtpInputHandlers","isAccountLocked","setIsAccountLocked","onSetOtpInputHandlers","useCallback","handlers","onChangeOtpInput","data","onResendCode","onSubmitPassword","async","error","isSrciError","reason","validateInput","handleButtonKeyDown","event","key","subtitleParts","get","split","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","Text","span","className","CtPOneTimePasswordInput","hideResendOtpButton","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","CtPSaveCookiesCheckbox","Button","label","variant","onClick","status","onKeyDown"],"mappings":"6nBAgBA,MAAMA,EAAqB,EAAGC,6BAC1B,MAAMC,KAAEA,GAASC,KACXC,yBAAEA,EAAwBC,iBAAEA,EAAgBC,WAAEA,EAAUC,0BAAEA,GAA8BC,KACvFC,EAAKC,GAAUC,EAAiB,OAChCC,EAASC,GAAcF,GAAkB,IACzCG,EAAiBC,GAAsBJ,GAAkB,IACzDK,EAAWC,GAAgBN,EAAiB,OAC5CO,EAAkBC,GAAuBR,EAA0C,OACnFS,EAAiBC,GAAsBV,GAAkB,GAE1DW,EAAwBC,EAAaC,IACvCL,EAAoBK,IACrB,IAEGC,EAAmBF,EAAY,EAAGG,OAAMd,cAC1CF,EAAOgB,EAAKjB,KACZI,EAAWD,IACZ,IAEGe,EAAeJ,EAAY,KAC7BN,EAAa,OACd,IAEGW,EAAmBL,EAAYM,UAGjC,GAFAZ,EAAa,MAERL,EAAL,CAKAG,GAAmB,GAEnB,UACUX,EAAyBK,EACnC,CAAE,MAAOqB,GACL,IAAKC,EAAYD,GAEb,YADAf,GAAmB,GAIvBE,EAAaa,aAAAA,EAAAA,EAAOE,QACpBjB,GAAmB,GAEG,uBAAlBe,aAAAA,EAAAA,EAAOE,UACPX,GAAmB,GACnBpB,SAAAA,IAER,CAnBA,MAFIiB,EAAiBe,iBAsBtB,CAACxB,EAAKG,EAASM,EAAkBjB,IAE9BiC,EAAsBX,EACvBY,IACqB,UAAdA,EAAMC,KACDR,KAGb,CAACA,IAGCS,EAAgBnC,EAAKoC,IAAI,oBAAoBC,MAAM,MAEzD,OACIC,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAa3C,EAAKoC,IAAI,kBAEvDE,EAACE,EAAWI,UACPT,EAAc,GAAG,IAAE/B,EAAW,IAAE+B,EAAc,GAC/CG,EAACO,OAAAA,CAAKC,UAAU,iDAAiD3C,GAChEgC,EAAc,IAGnBG,EAACS,EAAAA,CACGC,oBAAqB9B,EACrB+B,SAAU1B,EACV2B,mBAAoB9B,EACpB+B,SAAUvC,EACVwC,aAActC,GAAad,EAAKoC,IAAI,cAActB,KAClDuC,aAAc3B,EACdD,aAAcA,EACdb,gBAAiBA,IAGrB0B,EAACgB,QAEDhB,EAACiB,EAAAA,CACGJ,SAAUjC,EACVsC,MAAOxD,EAAKoC,IAAI,YAChBqB,QAASpD,EAA4B,UAAY,YACjDqD,QAAShC,EACTiC,OAAQ/C,GAAmB,UAC3BgD,UAAW5B"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useRef as r,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import d from"../../../../../../utils/useForm/useForm.js";import p from"../../../../FormFields/Field/Field.js";import c from"../../../../FormFields/InputText.js";const u=u=>{const{i18n:m}=i(),{configuration:{disableOtpAutoFocus:f}}=l(),[C,g]=t(null),{handleChangeFor:F,data:h,triggerValidation:j,valid:k,errors:v,isValid:b,setData:x}=d({schema:["otp"],rules:a}),P=r({validateInput:null}),E=r(null),[I,R]=t(!1),y=o((()=>{R(!0),j()}),[j]);s((()=>{h.otp&&R(!0)}),[h.otp]),s((()=>{!f&&E.current&&E.current.focus()}),[E.current,f]),s((()=>{P.current.validateInput=y,u.onSetInputHandlers(P.current)}),[y,u.onSetInputHandlers]);const V=o((()=>{x("otp",""),g(null),f||E.current.focus(),u.onResendCode()}),[u.onResendCode,E.current,f]),_=o((e=>{const t=m.get(`ctp.errors.${e}`);t&&g(t)}),[m]),w=o((e=>{"Enter"===e.key&&u.onPressEnter()}),[u.onPressEnter]);return s((()=>{u.onChange({data:h,valid:k,errors:v,isValid:b})}),[h,k,v]),e("div",{className:"adyen-checkout-ctp__otp-field-wrapper"},e(p,{name:"oneTimePassword",label:m.get("ctp.otp.fieldLabel"),errorMessage:I?C||u.errorMessage||!!v.otp:null,classNameModifiers:["otp"]},e(c,{name:"otp",autocorrect:"off",spellcheck:!1,value:h.otp,disabled:u.disabled,onInput:F("otp","input"),onBlur:F("otp","blur"),onKeyPress:w,setRef:e=>{E.current=e}})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:u.isValidatingOtp,onError:_,onResendCode:V})))};export{u as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useRef as r,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import d from"../../../../../../utils/useForm/useForm.js";import p from"../../../../FormFields/Field/Field.js";import c from"../../../../FormFields/InputText.js";const u=u=>{const{i18n:m}=i(),{configuration:{disableOtpAutoFocus:f}}=l(),[C,g]=t(null),{handleChangeFor:F,data:h,triggerValidation:j,valid:k,errors:v,isValid:b,setData:x}=d({schema:["otp"],rules:a}),P=r({validateInput:null}),E=r(null),[I,R]=t(!1),y=o(()=>{R(!0),j()},[j]);s(()=>{h.otp&&R(!0)},[h.otp]),s(()=>{!f&&E.current&&E.current.focus()},[E.current,f]),s(()=>{P.current.validateInput=y,u.onSetInputHandlers(P.current)},[y,u.onSetInputHandlers]);const V=o(()=>{x("otp",""),g(null),f||E.current.focus(),u.onResendCode()},[u.onResendCode,E.current,f]),_=o(e=>{const t=m.get(`ctp.errors.${e}`);t&&g(t)},[m]),w=o(e=>{"Enter"===e.key&&u.onPressEnter()},[u.onPressEnter]);return s(()=>{u.onChange({data:h,valid:k,errors:v,isValid:b})},[h,k,v]),e("div",{className:"adyen-checkout-ctp__otp-field-wrapper"},e(p,{name:"oneTimePassword",label:m.get("ctp.otp.fieldLabel"),errorMessage:I?C||u.errorMessage||!!v.otp:null,classNameModifiers:["otp"]},e(c,{name:"otp",autocorrect:"off",spellcheck:!1,value:h.otp,disabled:u.disabled,onInput:F("otp","input"),onBlur:F("otp","blur"),onKeyPress:w,setRef:e=>{E.current=e}})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:u.isValidatingOtp,onError:_,onResendCode:V})))};export{u as default};
 //# sourceMappingURL=CtPOneTimePasswordInput.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useForm from '../../../../../../utils/useForm';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n    hideResendOtpButton: boolean;\n    disabled: boolean;\n    isValidatingOtp: boolean;\n    errorMessage?: string;\n    onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n    otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n    validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: CtPOneTimePasswordInputProps): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const {\n        configuration: { disableOtpAutoFocus }\n    } = useClickToPayContext();\n\n    const formSchema = ['otp'];\n    const [resendOtpError, setResendOtpError] = useState<string>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useForm<CtPOneTimePasswordInputDataState>({\n        schema: formSchema,\n        rules: otpValidationRules\n    });\n    const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsOtpFieldDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    /**\n     * If shopper changes the value of the OTP fields, input becomes dirty\n     */\n    useEffect(() => {\n        if (data.otp) setIsOtpFieldDirty(true);\n    }, [data.otp]);\n\n    useEffect(() => {\n        if (!disableOtpAutoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, disableOtpAutoFocus]);\n\n    useEffect(() => {\n        otpInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(otpInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnResendOtp = useCallback(() => {\n        setData('otp', '');\n        setResendOtpError(null);\n        if (!disableOtpAutoFocus) {\n            inputRef.current.focus();\n        }\n        props.onResendCode();\n    }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n    const handleOnResendOtpError = useCallback(\n        (errorCode: string) => {\n            const message = i18n.get(`ctp.errors.${errorCode}`);\n            if (message) setResendOtpError(message);\n        },\n        [i18n]\n    );\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <div className={'adyen-checkout-ctp__otp-field-wrapper'}>\n            <Field\n                name=\"oneTimePassword\"\n                label={i18n.get('ctp.otp.fieldLabel')}\n                errorMessage={isOtpFielDirty ? resendOtpError || props.errorMessage || !!errors.otp : null}\n                classNameModifiers={['otp']}\n            >\n                <InputText\n                    name={'otp'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.otp}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('otp', 'input')}\n                    onBlur={handleChangeFor('otp', 'blur')}\n                    onKeyPress={handleOnKeyPress}\n                    setRef={(ref: HTMLInputElement) => {\n                        inputRef.current = ref;\n                    }}\n                />\n            </Field>\n            <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n                <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n            </div>\n        </div>\n    );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useForm","schema","rules","otpValidationRules","otpInputHandlersRef","useRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","className","Field","name","label","errorMessage","classNameModifiers","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","ref","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"glBAgCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,OACvDC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAA0C,CAC5HC,OAHe,CAAC,OAIhBC,MAAOC,IAELC,EAAsBC,EAAwC,CAAEC,cAAe,OAC/EC,EAAWF,EAAyB,OACnCG,EAAgBC,GAAsBjB,GAAkB,GAEzDc,EAAgBI,GAAY,KAC9BD,GAAmB,GACnBd,GAAAA,GACD,CAACA,IAKJgB,GAAU,KACFjB,EAAKkB,KAAKH,GAAmB,EAAA,GAClC,CAACf,EAAKkB,MAETD,GAAU,MACDvB,GAAuBmB,EAASM,SACjCN,EAASM,QAAQC,OACrB,GACD,CAACP,EAASM,QAASzB,IAEtBuB,GAAU,KACNP,EAAoBS,QAAQP,cAAgBA,EAC5CtB,EAAM+B,mBAAmBX,EAAoBS,QAAO,GACrD,CAACP,EAAetB,EAAM+B,qBAEzB,MAAMC,EAAoBN,GAAY,KAClCX,EAAQ,MAAO,IACfR,EAAkB,MACbH,GACDmB,EAASM,QAAQC,QAErB9B,EAAMiC,cAAY,GACnB,CAACjC,EAAMiC,aAAcV,EAASM,QAASzB,IAEpC8B,EAAyBR,GAC1BS,IACG,MAAMC,EAAUnC,EAAKoC,IAAI,cAAcF,KACnCC,GAAS7B,EAAkB6B,EAAAA,GAEnC,CAACnC,IAGCqC,EAAmBZ,GACpBa,IACqB,UAAdA,EAAMC,KACDxC,EAAMyC,cACf,GAEJ,CAACzC,EAAMyC,eAOX,OAJAd,GAAU,KACN3B,EAAM0C,SAAS,CAAEhC,OAAME,QAAOC,SAAQC,WAAQ,GAC/C,CAACJ,EAAME,EAAOC,IAGb8B,EAACC,MAAAA,CAAIC,UAAW,yCACZF,EAACG,EAAAA,CACGC,KAAK,kBACLC,MAAO/C,EAAKoC,IAAI,sBAChBY,aAAczB,EAAiBlB,GAAkBN,EAAMiD,gBAAkBpC,EAAOe,IAAM,KACtFsB,mBAAoB,CAAC,QAErBP,EAACQ,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAO5C,EAAKkB,IACZ2B,SAAUvD,EAAMuD,SAChBC,QAAS/C,EAAgB,MAAO,SAChCgD,OAAQhD,EAAgB,MAAO,QAC/BiD,WAAYpB,EACZqB,OAASC,IACLrC,EAASM,QAAU+B,CAAAA,KAI/BjB,EAACC,MAAAA,CAAIC,UAAW,+CACZF,EAACkB,EAAAA,CAAiBN,SAAUvD,EAAM8D,gBAAiBC,QAAS7B,EAAwBD,aAAcD"}
+{"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useForm from '../../../../../../utils/useForm';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n    hideResendOtpButton: boolean;\n    disabled: boolean;\n    isValidatingOtp: boolean;\n    errorMessage?: string;\n    onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n    otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n    validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: CtPOneTimePasswordInputProps): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const {\n        configuration: { disableOtpAutoFocus }\n    } = useClickToPayContext();\n\n    const formSchema = ['otp'];\n    const [resendOtpError, setResendOtpError] = useState<string>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useForm<CtPOneTimePasswordInputDataState>({\n        schema: formSchema,\n        rules: otpValidationRules\n    });\n    const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsOtpFieldDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    /**\n     * If shopper changes the value of the OTP fields, input becomes dirty\n     */\n    useEffect(() => {\n        if (data.otp) setIsOtpFieldDirty(true);\n    }, [data.otp]);\n\n    useEffect(() => {\n        if (!disableOtpAutoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, disableOtpAutoFocus]);\n\n    useEffect(() => {\n        otpInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(otpInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnResendOtp = useCallback(() => {\n        setData('otp', '');\n        setResendOtpError(null);\n        if (!disableOtpAutoFocus) {\n            inputRef.current.focus();\n        }\n        props.onResendCode();\n    }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n    const handleOnResendOtpError = useCallback(\n        (errorCode: string) => {\n            const message = i18n.get(`ctp.errors.${errorCode}`);\n            if (message) setResendOtpError(message);\n        },\n        [i18n]\n    );\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <div className={'adyen-checkout-ctp__otp-field-wrapper'}>\n            <Field\n                name=\"oneTimePassword\"\n                label={i18n.get('ctp.otp.fieldLabel')}\n                errorMessage={isOtpFielDirty ? resendOtpError || props.errorMessage || !!errors.otp : null}\n                classNameModifiers={['otp']}\n            >\n                <InputText\n                    name={'otp'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.otp}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('otp', 'input')}\n                    onBlur={handleChangeFor('otp', 'blur')}\n                    onKeyPress={handleOnKeyPress}\n                    setRef={(ref: HTMLInputElement) => {\n                        inputRef.current = ref;\n                    }}\n                />\n            </Field>\n            <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n                <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n            </div>\n        </div>\n    );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useForm","schema","rules","otpValidationRules","otpInputHandlersRef","useRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","className","Field","name","label","errorMessage","classNameModifiers","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","ref","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"glBAgCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,OACvDC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAA0C,CAC5HC,OAHe,CAAC,OAIhBC,MAAOC,IAELC,EAAsBC,EAAwC,CAAEC,cAAe,OAC/EC,EAAWF,EAAyB,OACnCG,EAAgBC,GAAsBjB,GAAkB,GAEzDc,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDvB,GAAuBmB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAASzB,IAEtBuB,EAAU,KACNP,EAAoBS,QAAQP,cAAgBA,EAC5CtB,EAAM+B,mBAAmBX,EAAoBS,UAC9C,CAACP,EAAetB,EAAM+B,qBAEzB,MAAMC,EAAoBN,EAAY,KAClCX,EAAQ,MAAO,IACfR,EAAkB,MACbH,GACDmB,EAASM,QAAQC,QAErB9B,EAAMiC,gBACP,CAACjC,EAAMiC,aAAcV,EAASM,QAASzB,IAEpC8B,EAAyBR,EAC1BS,IACG,MAAMC,EAAUnC,EAAKoC,IAAI,cAAcF,KACnCC,GAAS7B,EAAkB6B,IAEnC,CAACnC,IAGCqC,EAAmBZ,EACpBa,IACqB,UAAdA,EAAMC,KACDxC,EAAMyC,gBAGnB,CAACzC,EAAMyC,eAOX,OAJAd,EAAU,KACN3B,EAAM0C,SAAS,CAAEhC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGb8B,EAACC,MAAAA,CAAIC,UAAW,yCACZF,EAACG,EAAAA,CACGC,KAAK,kBACLC,MAAO/C,EAAKoC,IAAI,sBAChBY,aAAczB,EAAiBlB,GAAkBN,EAAMiD,gBAAkBpC,EAAOe,IAAM,KACtFsB,mBAAoB,CAAC,QAErBP,EAACQ,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAO5C,EAAKkB,IACZ2B,SAAUvD,EAAMuD,SAChBC,QAAS/C,EAAgB,MAAO,SAChCgD,OAAQhD,EAAgB,MAAO,QAC/BiD,WAAYpB,EACZqB,OAASC,IACLrC,EAASM,QAAU+B,MAI/BjB,EAACC,MAAAA,CAAIC,UAAW,+CACZF,EAACkB,EAAAA,CAAiBN,SAAUvD,EAAM8D,gBAAiBC,QAAS7B,EAAwBD,aAAcD"}

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useEffect as o,useCallback as r}from"../../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../context/useClickToPayContext.js";import n from"../../../../../../_virtual/index.js";import{useCoreContext as c}from"../../../../../../core/Context/CoreProvider.js";import a from"../../../../Icon/Icon.js";import{isSrciError as i}from"../../../services/utils.js";import{PREFIX as d}from"../../../../Icon/constants.js";import l from"../../../../Button/Button.js";const p=({onError:p,onResendCode:m,disabled:u})=>{const[f,k]=t(null),[h,j]=t(!1),{i18n:C}=c(),{startIdentityValidation:v}=s();o((()=>{let e=null;return f>0&&(e=setTimeout((()=>k(f-1)),1e3)),()=>clearTimeout(e)}),[f]),o((()=>{let e=null;return h&&(e=setTimeout((()=>{j(!1),k(60)}),2e3)),()=>clearTimeout(e)}),[h]);const y=r((async e=>{e.preventDefault();try{m(),j(!0),await v()}catch(e){if(k(0),j(!1),!i(e))return void console.error(e);p(e.reason)}}),[v,p,m]);return h?e("div",{className:"adyen-checkout-ctp__otp-resend-code--confirmation"},C.get("ctp.otp.codeResent"),e(a,{type:`${d}checkmark`,height:14,width:14})):f>0?e("div",{className:"adyen-checkout-ctp__otp-resend-code--disabled"},C.get("ctp.otp.resendCode")," -"," ",e("span",{className:"adyen-checkout-ctp__otp-resend-code-counter"}," ",f>0&&`${f}s`," ")):e(l,{classNameModifiers:[n("otp-resend-code",{"otp-resend-code--disabled":u})],onClick:y,variant:"link",inline:!0,disabled:u},C.get("ctp.otp.resendCode"))};export{p as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useEffect as o,useCallback as r}from"../../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../context/useClickToPayContext.js";import n from"../../../../../../_virtual/index.js";import{useCoreContext as c}from"../../../../../../core/Context/CoreProvider.js";import a from"../../../../Icon/Icon.js";import{isSrciError as i}from"../../../services/utils.js";import{PREFIX as d}from"../../../../Icon/constants.js";import l from"../../../../Button/Button.js";const p=({onError:p,onResendCode:m,disabled:u})=>{const[f,k]=t(null),[h,j]=t(!1),{i18n:C}=c(),{startIdentityValidation:v}=s();o(()=>{let e=null;return f>0&&(e=setTimeout(()=>k(f-1),1e3)),()=>clearTimeout(e)},[f]),o(()=>{let e=null;return h&&(e=setTimeout(()=>{j(!1),k(60)},2e3)),()=>clearTimeout(e)},[h]);const y=r(async e=>{e.preventDefault();try{m(),j(!0),await v()}catch(e){if(k(0),j(!1),!i(e))return void console.error(e);p(e.reason)}},[v,p,m]);return h?e("div",{className:"adyen-checkout-ctp__otp-resend-code--confirmation"},C.get("ctp.otp.codeResent"),e(a,{type:`${d}checkmark`,height:14,width:14})):f>0?e("div",{className:"adyen-checkout-ctp__otp-resend-code--disabled"},C.get("ctp.otp.resendCode")," -"," ",e("span",{className:"adyen-checkout-ctp__otp-resend-code-counter"}," ",f>0&&`${f}s`," ")):e(l,{classNameModifiers:[n("otp-resend-code",{"otp-resend-code--disabled":u})],onClick:y,variant:"link",inline:!0,disabled:u},C.get("ctp.otp.resendCode"))};export{p as default};
 //# sourceMappingURL=CtPResendOtpLink.js.map

package/dist/es-legacy/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPResendOtpLink.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport Icon from '../../../../Icon';\nimport { isSrciError } from '../../../services/utils';\nimport { PREFIX } from '../../../../Icon/constants';\nimport Button from '../../../../Button';\n\nconst CONFIRMATION_SHOWING_TIME = 2000;\n\ninterface CtPResendOtpLinkProps {\n    onError(errorCode: string): void;\n    onResendCode(): void;\n    disabled: boolean;\n}\n\nconst CtPResendOtpLink = ({ onError, onResendCode, disabled }: CtPResendOtpLinkProps): h.JSX.Element => {\n    const [counter, setCounter] = useState<number>(null);\n    const [showConfirmation, setShowConfirmation] = useState<boolean>(false);\n    const { i18n } = useCoreContext();\n    const { startIdentityValidation } = useClickToPayContext();\n\n    useEffect(() => {\n        let timeout = null;\n        if (counter > 0) {\n            timeout = setTimeout(() => setCounter(counter - 1), 1000);\n        }\n        return () => clearTimeout(timeout);\n    }, [counter]);\n\n    useEffect(() => {\n        let timeout = null;\n\n        if (showConfirmation) {\n            timeout = setTimeout(() => {\n                setShowConfirmation(false);\n                setCounter(60);\n            }, CONFIRMATION_SHOWING_TIME);\n        }\n        return () => clearTimeout(timeout);\n    }, [showConfirmation]);\n\n    const handleResendCodeClick = useCallback(\n        async event => {\n            event.preventDefault();\n\n            try {\n                onResendCode();\n                setShowConfirmation(true);\n                await startIdentityValidation();\n            } catch (error: unknown) {\n                setCounter(0);\n                setShowConfirmation(false);\n\n                if (!isSrciError(error)) {\n                    console.error(error);\n                    return;\n                }\n\n                onError(error.reason);\n            }\n        },\n        [startIdentityValidation, onError, onResendCode]\n    );\n\n    if (showConfirmation) {\n        return (\n            <div className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n                {i18n.get('ctp.otp.codeResent')}\n                <Icon type={`${PREFIX}checkmark`} height={14} width={14} />\n            </div>\n        );\n    }\n\n    if (counter > 0) {\n        return (\n            <div className=\"adyen-checkout-ctp__otp-resend-code--disabled\">\n                {i18n.get('ctp.otp.resendCode')} -{' '}\n                <span className=\"adyen-checkout-ctp__otp-resend-code-counter\"> {counter > 0 && `${counter}s`} </span>\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            classNameModifiers={[classnames('otp-resend-code', { 'otp-resend-code--disabled': disabled })]}\n            onClick={handleResendCodeClick}\n            variant=\"link\"\n            inline={true}\n            disabled={disabled}\n        >\n            {i18n.get('ctp.otp.resendCode')}\n        </Button>\n    );\n};\n\nexport default CtPResendOtpLink;\n"],"names":["CtPResendOtpLink","onError","onResendCode","disabled","counter","setCounter","useState","showConfirmation","setShowConfirmation","i18n","useCoreContext","startIdentityValidation","useClickToPayContext","useEffect","timeout","setTimeout","clearTimeout","handleResendCodeClick","useCallback","async","event","preventDefault","error","isSrciError","console","reason","h","div","className","get","Icon","type","PREFIX","height","width","span","Button","classNameModifiers","classnames","onClick","variant","inline"],"mappings":"ikBAUA,MAQMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAiB,OACxCC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,IAEpCC,GAAU,KACN,IAAIC,EAAU,KAId,OAHIV,EAAU,IACVU,EAAUC,YAAW,IAAMV,EAAWD,EAAU,IAAI,MAEjD,IAAMY,aAAaF,EAAAA,GAC3B,CAACV,IAEJS,GAAU,KACN,IAAIC,EAAU,KAQd,OANIP,IACAO,EAAUC,YAAW,KACjBP,GAAoB,GACpBH,EAAW,GAAA,GA5BO,MA+BnB,IAAMW,aAAaF,EAAAA,GAC3B,CAACP,IAEJ,MAAMU,EAAwBC,GAC1BC,MAAMC,IACFA,EAAMC,iBAEN,IACInB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOW,GAIL,GAHAjB,EAAW,GACXG,GAAoB,IAEfe,EAAYD,GAEb,YADAE,QAAQF,MAAMA,GAIlBrB,EAAQqB,EAAMG,OAClB,IAEJ,CAACd,EAAyBV,EAASC,IAGvC,OAAIK,EAEImB,EAACC,MAAAA,CAAIC,UAAU,qDACVnB,EAAKoB,IAAI,sBACVH,EAACI,EAAAA,CAAKC,KAAM,GAAGC,aAAmBC,OAAQ,GAAIC,MAAO,MAK7D9B,EAAU,EAENsB,EAACC,MAAAA,CAAIC,UAAU,iDACVnB,EAAKoB,IAAI,sBAAsB,KAAG,IACnCH,EAACS,OAAAA,CAAKP,UAAU,+CAA8C,IAAExB,EAAU,GAAK,GAAGA,KAAW,MAMrGsB,EAACU,EAAAA,CACGC,mBAAoB,CAACC,EAAW,kBAAmB,CAAE,4BAA6BnC,KAClFoC,QAAStB,EACTuB,QAAQ,OACRC,QAAQ,EACRtC,SAAUA,GAETM,EAAKoB,IAAI,sBAAA"}
+{"version":3,"file":"CtPResendOtpLink.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport Icon from '../../../../Icon';\nimport { isSrciError } from '../../../services/utils';\nimport { PREFIX } from '../../../../Icon/constants';\nimport Button from '../../../../Button';\n\nconst CONFIRMATION_SHOWING_TIME = 2000;\n\ninterface CtPResendOtpLinkProps {\n    onError(errorCode: string): void;\n    onResendCode(): void;\n    disabled: boolean;\n}\n\nconst CtPResendOtpLink = ({ onError, onResendCode, disabled }: CtPResendOtpLinkProps): h.JSX.Element => {\n    const [counter, setCounter] = useState<number>(null);\n    const [showConfirmation, setShowConfirmation] = useState<boolean>(false);\n    const { i18n } = useCoreContext();\n    const { startIdentityValidation } = useClickToPayContext();\n\n    useEffect(() => {\n        let timeout = null;\n        if (counter > 0) {\n            timeout = setTimeout(() => setCounter(counter - 1), 1000);\n        }\n        return () => clearTimeout(timeout);\n    }, [counter]);\n\n    useEffect(() => {\n        let timeout = null;\n\n        if (showConfirmation) {\n            timeout = setTimeout(() => {\n                setShowConfirmation(false);\n                setCounter(60);\n            }, CONFIRMATION_SHOWING_TIME);\n        }\n        return () => clearTimeout(timeout);\n    }, [showConfirmation]);\n\n    const handleResendCodeClick = useCallback(\n        async event => {\n            event.preventDefault();\n\n            try {\n                onResendCode();\n                setShowConfirmation(true);\n                await startIdentityValidation();\n            } catch (error: unknown) {\n                setCounter(0);\n                setShowConfirmation(false);\n\n                if (!isSrciError(error)) {\n                    console.error(error);\n                    return;\n                }\n\n                onError(error.reason);\n            }\n        },\n        [startIdentityValidation, onError, onResendCode]\n    );\n\n    if (showConfirmation) {\n        return (\n            <div className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n                {i18n.get('ctp.otp.codeResent')}\n                <Icon type={`${PREFIX}checkmark`} height={14} width={14} />\n            </div>\n        );\n    }\n\n    if (counter > 0) {\n        return (\n            <div className=\"adyen-checkout-ctp__otp-resend-code--disabled\">\n                {i18n.get('ctp.otp.resendCode')} -{' '}\n                <span className=\"adyen-checkout-ctp__otp-resend-code-counter\"> {counter > 0 && `${counter}s`} </span>\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            classNameModifiers={[classnames('otp-resend-code', { 'otp-resend-code--disabled': disabled })]}\n            onClick={handleResendCodeClick}\n            variant=\"link\"\n            inline={true}\n            disabled={disabled}\n        >\n            {i18n.get('ctp.otp.resendCode')}\n        </Button>\n    );\n};\n\nexport default CtPResendOtpLink;\n"],"names":["CtPResendOtpLink","onError","onResendCode","disabled","counter","setCounter","useState","showConfirmation","setShowConfirmation","i18n","useCoreContext","startIdentityValidation","useClickToPayContext","useEffect","timeout","setTimeout","clearTimeout","handleResendCodeClick","useCallback","async","event","preventDefault","error","isSrciError","console","reason","h","div","className","get","Icon","type","PREFIX","height","width","span","Button","classNameModifiers","classnames","onClick","variant","inline"],"mappings":"ikBAUA,MAQMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAiB,OACxCC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,IAEpCC,EAAU,KACN,IAAIC,EAAU,KAId,OAHIV,EAAU,IACVU,EAAUC,WAAW,IAAMV,EAAWD,EAAU,GAAI,MAEjD,IAAMY,aAAaF,IAC3B,CAACV,IAEJS,EAAU,KACN,IAAIC,EAAU,KAQd,OANIP,IACAO,EAAUC,WAAW,KACjBP,GAAoB,GACpBH,EAAW,KA5BO,MA+BnB,IAAMW,aAAaF,IAC3B,CAACP,IAEJ,MAAMU,EAAwBC,EAC1BC,MAAMC,IACFA,EAAMC,iBAEN,IACInB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOW,GAIL,GAHAjB,EAAW,GACXG,GAAoB,IAEfe,EAAYD,GAEb,YADAE,QAAQF,MAAMA,GAIlBrB,EAAQqB,EAAMG,OAClB,GAEJ,CAACd,EAAyBV,EAASC,IAGvC,OAAIK,EAEImB,EAACC,MAAAA,CAAIC,UAAU,qDACVnB,EAAKoB,IAAI,sBACVH,EAACI,EAAAA,CAAKC,KAAM,GAAGC,aAAmBC,OAAQ,GAAIC,MAAO,MAK7D9B,EAAU,EAENsB,EAACC,MAAAA,CAAIC,UAAU,iDACVnB,EAAKoB,IAAI,sBAAsB,KAAG,IACnCH,EAACS,OAAAA,CAAKP,UAAU,+CAA8C,IAAExB,EAAU,GAAK,GAAGA,KAAW,MAMrGsB,EAACU,EAAAA,CACGC,mBAAoB,CAACC,EAAW,kBAAmB,CAAE,4BAA6BnC,KAClFoC,QAAStB,EACTuB,QAAQ,OACRC,QAAQ,EACRtC,SAAUA,GAETM,EAAKoB,IAAI"}