@adyen/adyen-web 6.0.0-beta.1 → 6.0.1

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import n from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as o,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./IframeLabelAlternative.js";function _(_){const{label:p,focused:m,filled:u,onFocusField:f,className:x="",error:h="",isValid:y=!1,expiryDatePolicy:k=d,showContextualElement:F,contextualText:j}=_,{i18n:b}=i(),N=c(),g=t(x,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===o,"adyen-checkout__field__exp-date--optional":k===r}),C=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:C,classNameModifiers:["expiryDate"],className:g,focused:m,filled:u,onFocusField:()=>f(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(n,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":m,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:N({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:C})))}export{_ as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import n from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as o,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./FieldLabelAlternative.js";function _(_){const{label:p,focused:m,filled:u,onFocusField:x,className:f="",error:h="",isValid:y=!1,expiryDatePolicy:k=d,showContextualElement:F,contextualText:j}=_,{i18n:b}=i(),N=c(),g=t(f,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===o,"adyen-checkout__field__exp-date--optional":k===r}),C=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:C,classNameModifiers:["expiryDate"],className:g,focused:m,filled:u,onFocusField:()=>x(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(n,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":m,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:N({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:C})))}export{_ as default};
 //# sourceMappingURL=ExpirationDate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n    DATE_POLICY_HIDDEN,\n    DATE_POLICY_OPTIONAL,\n    DATE_POLICY_REQUIRED,\n    ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        error = '',\n        isValid = false,\n        expiryDatePolicy = DATE_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__exp-date': true,\n        'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n        'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n    });\n\n    const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n    return (\n        <Field\n            label={fieldLabel}\n            classNameModifiers={['expiryDate']}\n            className={fieldClassnames}\n            focused={focused}\n            filled={filled}\n            onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={'encryptedExpiryDate'}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n                className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n            <span\n                className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n                    'adyen-checkout__field__exp-date_hint_wrapper--hidden': error || isValid\n                })}\n            >\n                <img\n                    src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n                    className=\"adyen-checkout__field__exp-date_hint\"\n                    alt={fieldLabel}\n                />\n            </span>\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"wlBAgBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}
+{"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n    DATE_POLICY_HIDDEN,\n    DATE_POLICY_OPTIONAL,\n    DATE_POLICY_REQUIRED,\n    ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        error = '',\n        isValid = false,\n        expiryDatePolicy = DATE_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__exp-date': true,\n        'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n        'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n    });\n\n    const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n    return (\n        <Field\n            label={fieldLabel}\n            classNameModifiers={['expiryDate']}\n            className={fieldClassnames}\n            focused={focused}\n            filled={filled}\n            onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={'encryptedExpiryDate'}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n                className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n            <span\n                className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n                    'adyen-checkout__field__exp-date_hint_wrapper--hidden': error || isValid\n                })}\n            >\n                <img\n                    src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n                    className=\"adyen-checkout__field__exp-date_hint\"\n                    alt={fieldLabel}\n                />\n            </span>\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"ulBAgBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}

package/dist/es/components/Card/components/CardInput/components/{IframeLabelAlternative.js → FieldLabelAlternative.js}

@@ -1,2 +1,2 @@
 import{createElement as e}from"../../../../../external/preact/dist/preact.js";const t=(t,r)=>e("div",{...t,"aria-hidden":"true"},r);export{t as alternativeLabelContent};
-//# sourceMappingURL=IframeLabelAlternative.js.map
+//# sourceMappingURL=FieldLabelAlternative.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabelAlternative.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/FieldLabelAlternative.tsx"],"sourcesContent":["import { h } from 'preact';\n\nexport const alternativeLabelContent = (defaultWrapperProps, children) => {\n    return (\n        <div {...defaultWrapperProps} aria-hidden={'true'}>\n            {children}\n        </div>\n    );\n};\n"],"names":["alternativeLabelContent","defaultWrapperProps","children","h","div","aria-hidden"],"mappings":"8EAEO,MAAMA,EAA0B,CAACC,EAAqBC,IAErDC,EAACC,MAAAA,IAAQH,EAAqBI,cAAa,QACtCH"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import s from"./DataSfSpan.js";import n from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(n,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:d},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import s from"./DataSfSpan.js";import d from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as n}from"./FieldLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(d,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:n},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
 //# sourceMappingURL=KCPAuthentication.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n    const { i18n } = useCoreContext();\n\n    const taxNumberLabel = useMemo((): string => {\n        if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n        return i18n.get('creditCard.taxNumber.label');\n    }, [props.value]);\n\n    return (\n        <div className=\"adyen-checkout__card__kcp-authentication\">\n            <Field\n                label={taxNumberLabel}\n                filled={props.filled}\n                classNameModifiers={['kcp-taxNumber']}\n                errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n                isValid={props.isValid}\n                dir={'ltr'}\n                name={'kcpTaxNumberOrDOB'}\n                onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n                onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n            >\n                <InputTelephone\n                    name={'kcpTaxNumberOrDOB'}\n                    className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n                    maxLength={10}\n                    minLength={6}\n                    autoComplete={'false'}\n                    value={props.value}\n                    required={true}\n                    onBlur={props.onBlur}\n                    onInput={props.onInput}\n                    disabled={props.disabled}\n                    placeholder={props.placeholder}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('creditCard.password.label')}\n                focused={props.focusedElement === 'encryptedPassword'}\n                filled={props.filled}\n                classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n                onFocusField={() => props.onFocusField('encryptedPassword')}\n                errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n                isValid={props.encryptedPasswordState.valid}\n                dir={'ltr'}\n                name={'encryptedPassword'}\n                useLabelElement={false}\n                renderAlternativeToLabel={alternativeLabelContent}\n            >\n                <DataSfSpan\n                    encryptedFieldType=\"encryptedPassword\"\n                    className={classNames({\n                        'adyen-checkout__input': true,\n                        'adyen-checkout__input--large': true,\n                        'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n                        'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n                        'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n                    })}\n                />\n            </Field>\n        </div>\n    );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"+lBAWe,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}
+{"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n    const { i18n } = useCoreContext();\n\n    const taxNumberLabel = useMemo((): string => {\n        if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n        return i18n.get('creditCard.taxNumber.label');\n    }, [props.value]);\n\n    return (\n        <div className=\"adyen-checkout__card__kcp-authentication\">\n            <Field\n                label={taxNumberLabel}\n                filled={props.filled}\n                classNameModifiers={['kcp-taxNumber']}\n                errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n                isValid={props.isValid}\n                dir={'ltr'}\n                name={'kcpTaxNumberOrDOB'}\n                onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n                onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n            >\n                <InputTelephone\n                    name={'kcpTaxNumberOrDOB'}\n                    className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n                    maxLength={10}\n                    minLength={6}\n                    autoComplete={'false'}\n                    value={props.value}\n                    required={true}\n                    onBlur={props.onBlur}\n                    onInput={props.onInput}\n                    disabled={props.disabled}\n                    placeholder={props.placeholder}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('creditCard.password.label')}\n                focused={props.focusedElement === 'encryptedPassword'}\n                filled={props.filled}\n                classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n                onFocusField={() => props.onFocusField('encryptedPassword')}\n                errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n                isValid={props.encryptedPasswordState.valid}\n                dir={'ltr'}\n                name={'encryptedPassword'}\n                useLabelElement={false}\n                renderAlternativeToLabel={alternativeLabelContent}\n            >\n                <DataSfSpan\n                    encryptedFieldType=\"encryptedPassword\"\n                    className={classNames({\n                        'adyen-checkout__input': true,\n                        'adyen-checkout__input--large': true,\n                        'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n                        'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n                        'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n                    })}\n                />\n            </Field>\n        </div>\n    );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"8lBAWe,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}

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

@@ -1,2 +1,2 @@
-import{AddressModeOptions as e}from"./types.js";var o={type:"scheme",setComponentRef:()=>{},hasHolderName:!1,holderNameRequired:!1,enableStoreDetails:!1,hasCVC:!0,showBrandIcon:!0,positionHolderNameOnTop:!1,billingAddressRequired:!1,billingAddressMode:e.full,billingAddressRequiredFields:["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],installmentOptions:{},configuration:{koreanAuthenticationRequired:!1,socialSecurityNumberMode:"auto"},autoFocus:!0,isPayButtonPrimaryVariant:!0,disableIOSArrowKeys:!1,showContextualElement:!0,exposeExpiryDate:!1,onLoad:()=>{},onConfigSuccess:()=>{},onAllValid:()=>{},onFieldValid:()=>{},onBrand:()=>{},onError:()=>{},onBinValue:()=>{},onBlur:()=>{},onFocus:()=>{},onChange:()=>{},data:{billingAddress:{}},styles:{},placeholders:{}};export{o as default};
+import{AddressModeOptions as e}from"./types.js";var o={type:"scheme",setComponentRef:()=>{},autoFocus:!0,billingAddressAllowedCountries:[],billingAddressMode:e.full,billingAddressRequired:!1,billingAddressRequiredFields:["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],configuration:{koreanAuthenticationRequired:!1,socialSecurityNumberMode:"auto"},data:{billingAddress:{}},disableIOSArrowKeys:!1,enableStoreDetails:!1,exposeExpiryDate:!1,forceCompat:!1,hasHolderName:!1,holderNameRequired:!1,hasCVC:!0,hideCVC:!1,installmentOptions:{},keypadFix:!0,legacyInputMode:!1,maskSecurityCode:!1,minimumExpiryDate:null,name:null,placeholders:{},positionHolderNameOnTop:!1,showBrandIcon:!0,showInstallmentAmounts:null,styles:{},isPayButtonPrimaryVariant:!0,showContextualElement:!0,onLoad:()=>{},onConfigSuccess:()=>{},onAllValid:()=>{},onFieldValid:()=>{},onBrand:()=>{},onError:()=>{},onBinValue:()=>{},onBlur:()=>{},onFocus:()=>{},onChange:()=>{},onBinLookup:()=>{},onEnterKeyPressed:()=>{}};export{o as default};
 //# sourceMappingURL=defaultProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"defaultProps.js","sources":["../../../../../../src/components/Card/components/CardInput/defaultProps.ts"],"sourcesContent":["import { SocialSecurityMode } from '../../types';\nimport { AddressModeOptions } from './types';\n\nexport default {\n    type: 'scheme',\n\n    setComponentRef: () => {},\n\n    // Settings\n    hasHolderName: false,\n    holderNameRequired: false,\n    enableStoreDetails: false,\n    hasCVC: true,\n    showBrandIcon: true,\n    positionHolderNameOnTop: false,\n    billingAddressRequired: false,\n    billingAddressMode: AddressModeOptions.full,\n    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],\n    installmentOptions: {},\n    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },\n    autoFocus: true,\n    isPayButtonPrimaryVariant: true,\n    disableIOSArrowKeys: false,\n    showContextualElement: true,\n    exposeExpiryDate: false,\n\n    // Events\n    onLoad: (): any => {},\n    onConfigSuccess: (): any => {},\n    onAllValid: (): any => {},\n    onFieldValid: (): any => {},\n    onBrand: (): any => {},\n    onError: (): any => {},\n    onBinValue: (): any => {},\n    onBlur: (): any => {},\n    onFocus: (): any => {},\n    onChange: (): any => {},\n\n    // Values\n    data: {\n        billingAddress: {}\n    },\n\n    // Customization\n    styles: {},\n    placeholders: {}\n};\n"],"names":["defaultProps","type","setComponentRef","hasHolderName","holderNameRequired","enableStoreDetails","hasCVC","showBrandIcon","positionHolderNameOnTop","billingAddressRequired","billingAddressMode","AddressModeOptions","full","billingAddressRequiredFields","installmentOptions","configuration","koreanAuthenticationRequired","socialSecurityNumberMode","autoFocus","isPayButtonPrimaryVariant","disableIOSArrowKeys","showContextualElement","exposeExpiryDate","onLoad","onConfigSuccess","onAllValid","onFieldValid","onBrand","onError","onBinValue","onBlur","onFocus","onChange","data","billingAddress","styles","placeholders"],"mappings":"gDAGA,IAAeA,EAAA,CACXC,KAAM,SAENC,gBAAiB,OAGjBC,eAAe,EACfC,oBAAoB,EACpBC,oBAAoB,EACpBC,QAAQ,EACRC,eAAe,EACfC,yBAAyB,EACzBC,wBAAwB,EACxBC,mBAAoBC,EAAmBC,KACvCC,6BAA8B,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,WACvGC,mBAAoB,CAAC,EACrBC,cAAe,CAAEC,8BAA8B,EAAOC,yBAA0B,QAChFC,WAAW,EACXC,2BAA2B,EAC3BC,qBAAqB,EACrBC,uBAAuB,EACvBC,kBAAkB,EAGlBC,OAAQ,OACRC,gBAAiB,OACjBC,WAAY,OACZC,aAAc,OACdC,QAAS,OACTC,QAAS,OACTC,WAAY,OACZC,OAAQ,OACRC,QAAS,OACTC,SAAU,OAGVC,KAAM,CACFC,eAAgB,CAAC,GAIrBC,OAAQ,CAAC,EACTC,aAAc,CAAC"}
+{"version":3,"file":"defaultProps.js","sources":["../../../../../../src/components/Card/components/CardInput/defaultProps.ts"],"sourcesContent":["import { SocialSecurityMode } from '../../types';\nimport { AddressModeOptions } from './types';\n\nexport default {\n    type: 'scheme',\n\n    setComponentRef: () => {},\n\n    // Settings\n    autoFocus: true,\n    billingAddressAllowedCountries: [],\n    billingAddressMode: AddressModeOptions.full,\n    billingAddressRequired: false,\n    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],\n\n    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },\n    data: {\n        billingAddress: {}\n    },\n    disableIOSArrowKeys: false,\n    enableStoreDetails: false,\n    exposeExpiryDate: false,\n    forceCompat: false,\n    hasHolderName: false,\n    holderNameRequired: false,\n    hasCVC: true,\n    hideCVC: false,\n    installmentOptions: {},\n    keypadFix: true,\n    legacyInputMode: false,\n    maskSecurityCode: false,\n    minimumExpiryDate: null,\n    name: null, // Affects Dropin only, the name displayed in the PMList item\n    placeholders: {},\n    positionHolderNameOnTop: false,\n    showBrandIcon: true,\n    showInstallmentAmounts: null,\n    styles: {},\n\n    isPayButtonPrimaryVariant: true,\n    showContextualElement: true,\n\n    // Events\n    onLoad: (): any => {},\n    onConfigSuccess: (): any => {},\n    onAllValid: (): any => {},\n    onFieldValid: (): any => {},\n    onBrand: (): any => {},\n    onError: (): any => {},\n    onBinValue: (): any => {},\n    onBlur: (): any => {},\n    onFocus: (): any => {},\n    onChange: (): any => {},\n\n    // Strictly speaking a Card level props, but needed here for analytics.configData\n    onBinLookup: () => {},\n    onEnterKeyPressed: () => {}\n};\n"],"names":["CardInputDefaultProps","type","setComponentRef","autoFocus","billingAddressAllowedCountries","billingAddressMode","AddressModeOptions","full","billingAddressRequired","billingAddressRequiredFields","configuration","koreanAuthenticationRequired","socialSecurityNumberMode","data","billingAddress","disableIOSArrowKeys","enableStoreDetails","exposeExpiryDate","forceCompat","hasHolderName","holderNameRequired","hasCVC","hideCVC","installmentOptions","keypadFix","legacyInputMode","maskSecurityCode","minimumExpiryDate","name","placeholders","positionHolderNameOnTop","showBrandIcon","showInstallmentAmounts","styles","isPayButtonPrimaryVariant","showContextualElement","onLoad","onConfigSuccess","onAllValid","onFieldValid","onBrand","onError","onBinValue","onBlur","onFocus","onChange","onBinLookup","onEnterKeyPressed"],"mappings":"gDAGA,IAAeA,EAAA,CACXC,KAAM,SAENC,gBAAiB,OAGjBC,WAAW,EACXC,+BAAgC,GAChCC,mBAAoBC,EAAmBC,KACvCC,wBAAwB,EACxBC,6BAA8B,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,WAEvGC,cAAe,CAAEC,8BAA8B,EAAOC,yBAA0B,QAChFC,KAAM,CACFC,eAAgB,CAAC,GAErBC,qBAAqB,EACrBC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,eAAe,EACfC,oBAAoB,EACpBC,QAAQ,EACRC,SAAS,EACTC,mBAAoB,CAAC,EACrBC,WAAW,EACXC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAmB,KACnBC,KAAM,KACNC,aAAc,CAAC,EACfC,yBAAyB,EACzBC,eAAe,EACfC,uBAAwB,KACxBC,OAAQ,CAAC,EAETC,2BAA2B,EAC3BC,uBAAuB,EAGvBC,OAAQ,OACRC,gBAAiB,OACjBC,WAAY,OACZC,aAAc,OACdC,QAAS,OACTC,QAAS,OACTC,WAAY,OACZC,OAAQ,OACRC,QAAS,OACTC,SAAU,OAGVC,YAAa,OACbC,kBAAmB"}

package/dist/es/components/CustomCard/CustomCard.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../external/preact/dist/preact.js";import{UIElement as t}from"../internal/UIElement/UIElement.js";import s from"./CustomCardInput/CustomCardInput.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import n from"../../utils/browserInfo.js";import r from"../internal/SecuredFields/binLookup/triggerBinLookUp.js";import{getCardImageUrl as i,fieldTypeToSnakeCase as a}from"../internal/SecuredFields/utils.js";import{TxVariants as p}from"../tx-variants.js";import{ANALYTICS_FOCUS_STR as d,ANALYTICS_UNFOCUS_STR as u}from"../../core/Analytics/constants.js";class c extends t{static type=p.customCard;static analyticsType="custom-scheme";static defaultProps={onBinLookup:()=>{},brandsConfiguration:{}};formatProps(e){return{...e,type:p.customCard,brand:p.card}}formatData(){const e=this.state.selectedBrandValue;return{paymentMethod:{type:"scheme",...this.state.data,...e&&{brand:e}},browserInfo:this.browserInfo}}updateStyles(e){return this.componentRef?.updateStyles&&this.componentRef.updateStyles(e),this}setFocusOn(e){return this.componentRef?.setFocusOn&&this.componentRef.setFocusOn(e),this}processBinLookupResponse(e){return this.componentRef?.processBinLookupResponse&&this.componentRef.processBinLookupResponse(e),this}dualBrandingChangeHandler(e){return this.componentRef?.dualBrandingChangeHandler&&this.componentRef.dualBrandingChangeHandler(e),this}handleUnsupportedCard(e){return this.componentRef?.handleUnsupportedCard&&this.componentRef.handleUnsupportedCard(e),this}onBinLookup(e){const t={...e};t.rootNode=this._node,t.isReset||(t.supportedBrandsRaw=e.supportedBrandsRaw?.map((e=>(e.brandImageUrl=this.props.brandsConfiguration[e.brand]?.icon??i(e.brand,this.resources),e)))),this.props.onBinLookup(t)}onBinValue=r(this);get isValid(){return!!this.state.isValid}get browserInfo(){return n()}onFocus=e=>{this.submitAnalytics({type:!0===e.focus?d:u,target:a(e.fieldType)}),this.props.onFocus?.(e)};onEnterKeyPressed=(e,t)=>{this.props.onEnterKeyPressed?.(e,t)};render(){return e(o,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},e(s,{ref:e=>{this.componentRef=e},...this.props,...this.state,handleKeyPress:this.handleKeyPress,rootNode:this._node,onChange:this.setState,onBinValue:this.onBinValue,implementationType:"custom",resources:this.resources,brand:this.props.brand,onFocus:this.onFocus}))}}export{c as CustomCard,c as default};
+import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import s from"./CustomCardInput/CustomCardInput.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import n from"../../utils/browserInfo.js";import r from"../internal/SecuredFields/binLookup/triggerBinLookUp.js";import{getCardImageUrl as i,fieldTypeToSnakeCase as a}from"../internal/SecuredFields/utils.js";import{TxVariants as p}from"../tx-variants.js";import{ANALYTICS_FOCUS_STR as d,ANALYTICS_UNFOCUS_STR as u}from"../../core/Analytics/constants.js";class c extends e{static type=p.customCard;static analyticsType="custom-scheme";static defaultProps={onBinLookup:()=>{},brandsConfiguration:{}};formatProps(t){return{...t,type:p.customCard,brand:p.card}}formatData(){const t=this.state.selectedBrandValue;return{paymentMethod:{type:"scheme",...this.state.data,...t&&{brand:t}},browserInfo:this.browserInfo}}submitAnalytics(t){super.submitAnalytics(t,this.props)}updateStyles(t){return this.componentRef?.updateStyles&&this.componentRef.updateStyles(t),this}setFocusOn(t){return this.componentRef?.setFocusOn&&this.componentRef.setFocusOn(t),this}processBinLookupResponse(t){return this.componentRef?.processBinLookupResponse&&this.componentRef.processBinLookupResponse(t),this}dualBrandingChangeHandler(t){return this.componentRef?.dualBrandingChangeHandler&&this.componentRef.dualBrandingChangeHandler(t),this}handleUnsupportedCard(t){return this.componentRef?.handleUnsupportedCard&&this.componentRef.handleUnsupportedCard(t),this}onBinLookup(t){const e={...t};e.rootNode=this._node,e.isReset||(e.supportedBrandsRaw=t.supportedBrandsRaw?.map((t=>(t.brandImageUrl=this.props.brandsConfiguration[t.brand]?.icon??i(t.brand,this.resources),t)))),this.props.onBinLookup(e)}onBinValue=r(this);get isValid(){return!!this.state.isValid}get browserInfo(){return n()}onFocus=t=>{this.submitAnalytics({type:!0===t.focus?d:u,target:a(t.fieldType)}),this.props.onFocus?.(t)};onEnterKeyPressed=(t,e)=>{this.props.onEnterKeyPressed?.(t,e)};render(){return t(o,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(s,{ref:t=>{this.componentRef=t},...this.props,...this.state,handleKeyPress:this.handleKeyPress,rootNode:this._node,onChange:this.setState,onBinValue:this.onBinValue,implementationType:"custom",resources:this.resources,brand:this.props.brand,onFocus:this.onFocus}))}}export{c as CustomCard,c as default};
 //# sourceMappingURL=CustomCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CustomCard.js","sources":["../../../../src/components/CustomCard/CustomCard.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement';\nimport CustomCardInput from './CustomCardInput';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport collectBrowserInfo from '../../utils/browserInfo';\nimport triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';\nimport { CbObjOnBinLookup, CbObjOnFocus } from '../internal/SecuredFields/lib/types';\nimport { BrandObject } from '../Card/types';\nimport { getCardImageUrl } from '../internal/SecuredFields/utils';\nimport { TxVariants } from '../tx-variants';\nimport { CustomCardConfiguration } from './types';\nimport { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';\nimport { ANALYTICS_FOCUS_STR, ANALYTICS_UNFOCUS_STR } from '../../core/Analytics/constants';\n\n// TODO questions about\n// brand - does a merchant ever make a custom stored card?\n// type\n// countryCode\n\nexport class CustomCard extends UIElement<CustomCardConfiguration> {\n    public static type = TxVariants.customCard;\n\n    public static analyticsType = 'custom-scheme';\n\n    protected static defaultProps = {\n        onBinLookup: () => {},\n        brandsConfiguration: {}\n    };\n\n    formatProps(props: CustomCardConfiguration) {\n        return {\n            ...props,\n            type: TxVariants.customCard,\n            brand: TxVariants.card\n        };\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const sfBrand = this.state.selectedBrandValue;\n        return {\n            paymentMethod: {\n                type: 'scheme',\n                ...this.state.data,\n                ...(sfBrand && { brand: sfBrand })\n            },\n            browserInfo: this.browserInfo\n        };\n    }\n\n    updateStyles(stylesObj) {\n        if (this.componentRef?.updateStyles) this.componentRef.updateStyles(stylesObj);\n        return this;\n    }\n\n    setFocusOn(frame) {\n        if (this.componentRef?.setFocusOn) this.componentRef.setFocusOn(frame);\n        return this;\n    }\n\n    processBinLookupResponse(binLookupResponse) {\n        if (this.componentRef?.processBinLookupResponse) this.componentRef.processBinLookupResponse(binLookupResponse);\n        return this;\n    }\n\n    dualBrandingChangeHandler(e: Event | string) {\n        if (this.componentRef?.dualBrandingChangeHandler) this.componentRef.dualBrandingChangeHandler(e);\n        return this;\n    }\n\n    handleUnsupportedCard(errObj) {\n        if (this.componentRef?.handleUnsupportedCard) this.componentRef.handleUnsupportedCard(errObj);\n        return this;\n    }\n\n    onBinLookup(obj: CbObjOnBinLookup) {\n        const nuObj = { ...obj };\n        nuObj.rootNode = this._node;\n\n        if (!nuObj.isReset) {\n            // Add brandImage urls, first checking if the merchant has configured their own one for the brand\n            nuObj.supportedBrandsRaw = obj.supportedBrandsRaw?.map((item: BrandObject) => {\n                item.brandImageUrl = this.props.brandsConfiguration[item.brand]?.icon ?? getCardImageUrl(item.brand, this.resources);\n                return item;\n            });\n        }\n\n        this.props.onBinLookup(nuObj);\n    }\n\n    public onBinValue = triggerBinLookUp(this);\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    get browserInfo() {\n        return collectBrowserInfo();\n    }\n\n    private onFocus = (obj: CbObjOnFocus) => {\n        this.submitAnalytics({\n            type: obj.focus === true ? ANALYTICS_FOCUS_STR : ANALYTICS_UNFOCUS_STR,\n            target: fieldTypeToSnakeCase(obj.fieldType)\n        });\n\n        // Call merchant defined callback\n        this.props.onFocus?.(obj);\n    };\n\n    protected onEnterKeyPressed = (activeElement: Element, component: UIElement) => {\n        this.props.onEnterKeyPressed?.(activeElement, component);\n    };\n\n    render() {\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                <CustomCardInput\n                    ref={ref => {\n                        this.componentRef = ref;\n                    }}\n                    {...this.props}\n                    {...this.state}\n                    handleKeyPress={this.handleKeyPress}\n                    rootNode={this._node}\n                    onChange={this.setState}\n                    onBinValue={this.onBinValue}\n                    implementationType={'custom'}\n                    resources={this.resources}\n                    brand={this.props.brand}\n                    onFocus={this.onFocus}\n                />\n            </CoreProvider>\n        );\n    }\n}\n\nexport default CustomCard;\n"],"names":["CustomCard","UIElement","static","TxVariants","customCard","onBinLookup","brandsConfiguration","formatProps","props","type","brand","card","formatData","sfBrand","this","state","selectedBrandValue","paymentMethod","data","browserInfo","updateStyles","stylesObj","componentRef","setFocusOn","frame","processBinLookupResponse","binLookupResponse","dualBrandingChangeHandler","e","handleUnsupportedCard","errObj","obj","nuObj","rootNode","_node","isReset","supportedBrandsRaw","map","item","brandImageUrl","icon","getCardImageUrl","resources","onBinValue","triggerBinLookUp","isValid","collectBrowserInfo","onFocus","submitAnalytics","focus","ANALYTICS_FOCUS_STR","ANALYTICS_UNFOCUS_STR","target","fieldTypeToSnakeCase","fieldType","onEnterKeyPressed","activeElement","component","render","h","CoreProvider","i18n","loadingContext","CustomCardInput","ref","handleKeyPress","onChange","setState","implementationType"],"mappings":"4lBAmBO,MAAMA,UAAmBC,EAC5BC,YAAqBC,EAAWC,WAEhCF,qBAA8B,gBAE9BA,oBAAgC,CAC5BG,YAAa,OACbC,oBAAqB,CAAC,GAG1BC,WAAAA,CAAYC,GACR,MAAO,IACAA,EACHC,KAAMN,EAAWC,WACjBM,MAAOP,EAAWQ,KAE1B,CAKAC,UAAAA,GACI,MAAMC,EAAUC,KAAKC,MAAMC,mBAC3B,MAAO,CACHC,cAAe,CACXR,KAAM,YACHK,KAAKC,MAAMG,QACVL,GAAW,CAAEH,MAAOG,IAE5BM,YAAaL,KAAKK,YAE1B,CAEAC,YAAAA,CAAaC,GAET,OADIP,KAAKQ,cAAcF,cAAcN,KAAKQ,aAAaF,aAAaC,GAC7DP,IACX,CAEAS,UAAAA,CAAWC,GAEP,OADIV,KAAKQ,cAAcC,YAAYT,KAAKQ,aAAaC,WAAWC,GACzDV,IACX,CAEAW,wBAAAA,CAAyBC,GAErB,OADIZ,KAAKQ,cAAcG,0BAA0BX,KAAKQ,aAAaG,yBAAyBC,GACrFZ,IACX,CAEAa,yBAAAA,CAA0BC,GAEtB,OADId,KAAKQ,cAAcK,2BAA2Bb,KAAKQ,aAAaK,0BAA0BC,GACvFd,IACX,CAEAe,qBAAAA,CAAsBC,GAElB,OADIhB,KAAKQ,cAAcO,uBAAuBf,KAAKQ,aAAaO,sBAAsBC,GAC/EhB,IACX,CAEAT,WAAAA,CAAY0B,GACR,MAAMC,EAAQ,IAAKD,GACnBC,EAAMC,SAAWnB,KAAKoB,MAEjBF,EAAMG,UAEPH,EAAMI,mBAAqBL,EAAIK,oBAAoBC,KAAKC,IACpDA,EAAKC,cAAgBzB,KAAKN,MAAMF,oBAAoBgC,EAAK5B,QAAQ8B,MAAQC,EAAgBH,EAAK5B,MAAOI,KAAK4B,WACnGJ,MAIfxB,KAAKN,MAAMH,YAAY2B,EAC3B,CAEOW,WAAaC,EAAiB9B,MAErC,WAAI+B,GACA,QAAS/B,KAAKC,MAAM8B,OACxB,CAEA,eAAI1B,GACA,OAAO2B,GACX,CAEQC,QAAWhB,IACfjB,KAAKkC,gBAAgB,CACjBvC,MAAoB,IAAdsB,EAAIkB,MAAiBC,EAAsBC,EACjDC,OAAQC,EAAqBtB,EAAIuB,aAIrCxC,KAAKN,MAAMuC,UAAUhB,EAAAA,EAGfwB,kBAAoB,CAACC,EAAwBC,KACnD3C,KAAKN,MAAM+C,oBAAoBC,EAAeC,EAAAA,EAGlDC,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaC,KAAM/C,KAAKN,MAAMqD,KAAMC,eAAgBhD,KAAKN,MAAMsD,eAAgBpB,UAAW5B,KAAK4B,WAC5FiB,EAACI,EAAAA,CACGC,IAAKA,IACDlD,KAAKQ,aAAe0C,CAAAA,KAEpBlD,KAAKN,SACLM,KAAKC,MACTkD,eAAgBnD,KAAKmD,eACrBhC,SAAUnB,KAAKoB,MACfgC,SAAUpD,KAAKqD,SACfxB,WAAY7B,KAAK6B,WACjByB,mBAAoB,SACpB1B,UAAW5B,KAAK4B,UAChBhC,MAAOI,KAAKN,MAAME,MAClBqC,QAASjC,KAAKiC,UAI9B"}
+{"version":3,"file":"CustomCard.js","sources":["../../../../src/components/CustomCard/CustomCard.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement';\nimport CustomCardInput from './CustomCardInput';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport collectBrowserInfo from '../../utils/browserInfo';\nimport triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';\nimport { CbObjOnBinLookup, CbObjOnFocus } from '../internal/SecuredFields/lib/types';\nimport { BrandObject } from '../Card/types';\nimport { getCardImageUrl } from '../internal/SecuredFields/utils';\nimport { TxVariants } from '../tx-variants';\nimport { CustomCardConfiguration } from './types';\nimport { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';\nimport { ANALYTICS_FOCUS_STR, ANALYTICS_UNFOCUS_STR } from '../../core/Analytics/constants';\nimport { SendAnalyticsObject } from '../../core/Analytics/types';\n\n// TODO questions about\n// brand - does a merchant ever make a custom stored card?\n// type\n// countryCode\n\nexport class CustomCard extends UIElement<CustomCardConfiguration> {\n    public static type = TxVariants.customCard;\n\n    public static analyticsType = 'custom-scheme';\n\n    protected static defaultProps = {\n        onBinLookup: () => {},\n        brandsConfiguration: {}\n    };\n\n    formatProps(props: CustomCardConfiguration) {\n        return {\n            ...props,\n            type: TxVariants.customCard,\n            brand: TxVariants.card\n        };\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData() {\n        const sfBrand = this.state.selectedBrandValue;\n        return {\n            paymentMethod: {\n                type: 'scheme',\n                ...this.state.data,\n                ...(sfBrand && { brand: sfBrand })\n            },\n            browserInfo: this.browserInfo\n        };\n    }\n\n    protected submitAnalytics(analyticsObj: SendAnalyticsObject) {\n        super.submitAnalytics(analyticsObj, this.props);\n    }\n\n    updateStyles(stylesObj) {\n        if (this.componentRef?.updateStyles) this.componentRef.updateStyles(stylesObj);\n        return this;\n    }\n\n    setFocusOn(frame) {\n        if (this.componentRef?.setFocusOn) this.componentRef.setFocusOn(frame);\n        return this;\n    }\n\n    processBinLookupResponse(binLookupResponse) {\n        if (this.componentRef?.processBinLookupResponse) this.componentRef.processBinLookupResponse(binLookupResponse);\n        return this;\n    }\n\n    dualBrandingChangeHandler(e: Event | string) {\n        if (this.componentRef?.dualBrandingChangeHandler) this.componentRef.dualBrandingChangeHandler(e);\n        return this;\n    }\n\n    handleUnsupportedCard(errObj) {\n        if (this.componentRef?.handleUnsupportedCard) this.componentRef.handleUnsupportedCard(errObj);\n        return this;\n    }\n\n    onBinLookup(obj: CbObjOnBinLookup) {\n        const nuObj = { ...obj };\n        nuObj.rootNode = this._node;\n\n        if (!nuObj.isReset) {\n            // Add brandImage urls, first checking if the merchant has configured their own one for the brand\n            nuObj.supportedBrandsRaw = obj.supportedBrandsRaw?.map((item: BrandObject) => {\n                item.brandImageUrl = this.props.brandsConfiguration[item.brand]?.icon ?? getCardImageUrl(item.brand, this.resources);\n                return item;\n            });\n        }\n\n        this.props.onBinLookup(nuObj);\n    }\n\n    public onBinValue = triggerBinLookUp(this);\n\n    get isValid() {\n        return !!this.state.isValid;\n    }\n\n    get browserInfo() {\n        return collectBrowserInfo();\n    }\n\n    private onFocus = (obj: CbObjOnFocus) => {\n        this.submitAnalytics({\n            type: obj.focus === true ? ANALYTICS_FOCUS_STR : ANALYTICS_UNFOCUS_STR,\n            target: fieldTypeToSnakeCase(obj.fieldType)\n        });\n\n        // Call merchant defined callback\n        this.props.onFocus?.(obj);\n    };\n\n    protected onEnterKeyPressed = (activeElement: Element, component: UIElement) => {\n        this.props.onEnterKeyPressed?.(activeElement, component);\n    };\n\n    render() {\n        return (\n            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n                <CustomCardInput\n                    ref={ref => {\n                        this.componentRef = ref;\n                    }}\n                    {...this.props}\n                    {...this.state}\n                    handleKeyPress={this.handleKeyPress}\n                    rootNode={this._node}\n                    onChange={this.setState}\n                    onBinValue={this.onBinValue}\n                    implementationType={'custom'}\n                    resources={this.resources}\n                    brand={this.props.brand}\n                    onFocus={this.onFocus}\n                />\n            </CoreProvider>\n        );\n    }\n}\n\nexport default CustomCard;\n"],"names":["CustomCard","UIElement","static","TxVariants","customCard","onBinLookup","brandsConfiguration","formatProps","props","type","brand","card","formatData","sfBrand","this","state","selectedBrandValue","paymentMethod","data","browserInfo","submitAnalytics","analyticsObj","super","updateStyles","stylesObj","componentRef","setFocusOn","frame","processBinLookupResponse","binLookupResponse","dualBrandingChangeHandler","e","handleUnsupportedCard","errObj","obj","nuObj","rootNode","_node","isReset","supportedBrandsRaw","map","item","brandImageUrl","icon","getCardImageUrl","resources","onBinValue","triggerBinLookUp","isValid","collectBrowserInfo","onFocus","focus","ANALYTICS_FOCUS_STR","ANALYTICS_UNFOCUS_STR","target","fieldTypeToSnakeCase","fieldType","onEnterKeyPressed","activeElement","component","render","h","CoreProvider","i18n","loadingContext","CustomCardInput","ref","handleKeyPress","onChange","setState","implementationType"],"mappings":"4lBAoBO,MAAMA,UAAmBC,EAC5BC,YAAqBC,EAAWC,WAEhCF,qBAA8B,gBAE9BA,oBAAgC,CAC5BG,YAAa,OACbC,oBAAqB,CAAC,GAG1BC,WAAAA,CAAYC,GACR,MAAO,IACAA,EACHC,KAAMN,EAAWC,WACjBM,MAAOP,EAAWQ,KAE1B,CAKAC,UAAAA,GACI,MAAMC,EAAUC,KAAKC,MAAMC,mBAC3B,MAAO,CACHC,cAAe,CACXR,KAAM,YACHK,KAAKC,MAAMG,QACVL,GAAW,CAAEH,MAAOG,IAE5BM,YAAaL,KAAKK,YAE1B,CAEUC,eAAAA,CAAgBC,GACtBC,MAAMF,gBAAgBC,EAAcP,KAAKN,MAC7C,CAEAe,YAAAA,CAAaC,GAET,OADIV,KAAKW,cAAcF,cAAcT,KAAKW,aAAaF,aAAaC,GAC7DV,IACX,CAEAY,UAAAA,CAAWC,GAEP,OADIb,KAAKW,cAAcC,YAAYZ,KAAKW,aAAaC,WAAWC,GACzDb,IACX,CAEAc,wBAAAA,CAAyBC,GAErB,OADIf,KAAKW,cAAcG,0BAA0Bd,KAAKW,aAAaG,yBAAyBC,GACrFf,IACX,CAEAgB,yBAAAA,CAA0BC,GAEtB,OADIjB,KAAKW,cAAcK,2BAA2BhB,KAAKW,aAAaK,0BAA0BC,GACvFjB,IACX,CAEAkB,qBAAAA,CAAsBC,GAElB,OADInB,KAAKW,cAAcO,uBAAuBlB,KAAKW,aAAaO,sBAAsBC,GAC/EnB,IACX,CAEAT,WAAAA,CAAY6B,GACR,MAAMC,EAAQ,IAAKD,GACnBC,EAAMC,SAAWtB,KAAKuB,MAEjBF,EAAMG,UAEPH,EAAMI,mBAAqBL,EAAIK,oBAAoBC,KAAKC,IACpDA,EAAKC,cAAgB5B,KAAKN,MAAMF,oBAAoBmC,EAAK/B,QAAQiC,MAAQC,EAAgBH,EAAK/B,MAAOI,KAAK+B,WACnGJ,MAIf3B,KAAKN,MAAMH,YAAY8B,EAC3B,CAEOW,WAAaC,EAAiBjC,MAErC,WAAIkC,GACA,QAASlC,KAAKC,MAAMiC,OACxB,CAEA,eAAI7B,GACA,OAAO8B,GACX,CAEQC,QAAWhB,IACfpB,KAAKM,gBAAgB,CACjBX,MAAoB,IAAdyB,EAAIiB,MAAiBC,EAAsBC,EACjDC,OAAQC,EAAqBrB,EAAIsB,aAIrC1C,KAAKN,MAAM0C,UAAUhB,EAAAA,EAGfuB,kBAAoB,CAACC,EAAwBC,KACnD7C,KAAKN,MAAMiD,oBAAoBC,EAAeC,EAAAA,EAGlDC,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaC,KAAMjD,KAAKN,MAAMuD,KAAMC,eAAgBlD,KAAKN,MAAMwD,eAAgBnB,UAAW/B,KAAK+B,WAC5FgB,EAACI,EAAAA,CACGC,IAAKA,IACDpD,KAAKW,aAAeyC,CAAAA,KAEpBpD,KAAKN,SACLM,KAAKC,MACToD,eAAgBrD,KAAKqD,eACrB/B,SAAUtB,KAAKuB,MACf+B,SAAUtD,KAAKuD,SACfvB,WAAYhC,KAAKgC,WACjBwB,mBAAoB,SACpBzB,UAAW/B,KAAK+B,UAChBnC,MAAOI,KAAKN,MAAME,MAClBwC,QAASpC,KAAKoC,UAI9B"}

package/dist/es/components/Donation/components/CampaignContent.js

@@ -1,2 +1,2 @@
-import{createElement as a}from"../../../external/preact/dist/preact.js";import e from"../../internal/Img/Img.js";function n({logoUrl:n="",nonprofitDescription:c="",nonprofitName:t="",nonprofitUrl:r="",bannerUrl:o=""}){return a("div",{className:"adyen-checkout__campaign-container"},a(e,{className:"adyen-checkout__campaign-background-image",style:{backgroundImage:`linear-gradient(0, #000, #0003), url(${o})`},backgroundUrl:o}),a("div",{className:"adyen-checkout__campaign-content"},n&&a("img",{src:n,className:"adyen-checkout__campaign-logo",alt:t}),t&&a("div",{className:"adyen-checkout__campaign-title"},t),c&&a("div",{className:"adyen-checkout__campaign-description"},c,r&&" ›")))}export{n as default};
+import{createElement as a}from"../../../external/preact/dist/preact.js";import e from"../../internal/Img/Img.js";function c({logoUrl:c="",nonprofitDescription:n="",nonprofitName:t="",causeName:i="",nonprofitUrl:o="",bannerUrl:r=""}){return a("div",{className:"adyen-checkout__campaign-container"},a(e,{className:"adyen-checkout__campaign-background-image",style:{backgroundImage:`linear-gradient(0, #000, #0003), url(${r})`},backgroundUrl:r}),a("div",{className:"adyen-checkout__campaign-content"},c&&a("img",{src:c,className:"adyen-checkout__campaign-logo",alt:t}),t&&a("div",{className:"adyen-checkout__campaign-title"},t),i&&a("div",{className:"adyen-checkout__campaign-cause"},i),n&&a("div",{className:"adyen-checkout__campaign-description"},n,o&&" ›")))}export{c as default};
 //# sourceMappingURL=CampaignContent.js.map

package/dist/es/components/Donation/components/CampaignContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CampaignContent.js","sources":["../../../../../src/components/Donation/components/CampaignContent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Img from '../../internal/Img';\n\nexport interface CampaignContentProps {\n    logoUrl?: string;\n    nonprofitDescription?: string;\n    nonprofitName?: string;\n    nonprofitUrl?: string;\n    bannerUrl?: string;\n}\n\nexport default function CampaignContent({\n    logoUrl = '',\n    nonprofitDescription = '',\n    nonprofitName = '',\n    nonprofitUrl = '',\n    bannerUrl = ''\n}: CampaignContentProps) {\n    const backgroundImage = `linear-gradient(0, #000, #0003), url(${bannerUrl})`;\n\n    return (\n        <div className=\"adyen-checkout__campaign-container\">\n            <Img className=\"adyen-checkout__campaign-background-image\" style={{ backgroundImage }} backgroundUrl={bannerUrl} />\n\n            <div className=\"adyen-checkout__campaign-content\">\n                {logoUrl && <img src={logoUrl} className=\"adyen-checkout__campaign-logo\" alt={nonprofitName} />}\n                {nonprofitName && <div className=\"adyen-checkout__campaign-title\">{nonprofitName}</div>}\n                {nonprofitDescription && (\n                    <div className=\"adyen-checkout__campaign-description\">\n                        {nonprofitDescription}\n                        {nonprofitUrl && ' ›'}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"names":["CampaignContent","logoUrl","nonprofitDescription","nonprofitName","nonprofitUrl","bannerUrl","h","div","className","Img","style","backgroundImage","backgroundUrl","img","src","alt"],"mappings":"iHAWe,SAASA,GAAgBC,QACpCA,EAAU,GAAEC,qBACZA,EAAuB,GAAEC,cACzBA,EAAgB,GAAEC,aAClBA,EAAe,GAAEC,UACjBA,EAAY,KAIZ,OACIC,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACG,EAAAA,CAAID,UAAU,4CAA4CE,MAAO,CAAEC,gBAJpD,wCAAwCN,MAI+BO,cAAeP,IAEtGC,EAACC,MAAAA,CAAIC,UAAU,oCACVP,GAAWK,EAACO,MAAAA,CAAIC,IAAKb,EAASO,UAAU,gCAAgCO,IAAKZ,IAC7EA,GAAiBG,EAACC,MAAAA,CAAIC,UAAU,kCAAkCL,GAClED,GACGI,EAACC,MAAAA,CAAIC,UAAU,wCACVN,EACAE,GAAgB,OAMzC"}
+{"version":3,"file":"CampaignContent.js","sources":["../../../../../src/components/Donation/components/CampaignContent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Img from '../../internal/Img';\n\nexport interface CampaignContentProps {\n    logoUrl?: string;\n    nonprofitDescription?: string;\n    nonprofitName?: string;\n    causeName?: string;\n    nonprofitUrl?: string;\n    bannerUrl?: string;\n}\n\nexport default function CampaignContent({\n    logoUrl = '',\n    nonprofitDescription = '',\n    nonprofitName = '',\n    causeName = '',\n    nonprofitUrl = '',\n    bannerUrl = ''\n}: CampaignContentProps) {\n    const backgroundImage = `linear-gradient(0, #000, #0003), url(${bannerUrl})`;\n\n    return (\n        <div className=\"adyen-checkout__campaign-container\">\n            <Img className=\"adyen-checkout__campaign-background-image\" style={{ backgroundImage }} backgroundUrl={bannerUrl} />\n\n            <div className=\"adyen-checkout__campaign-content\">\n                {logoUrl && <img src={logoUrl} className=\"adyen-checkout__campaign-logo\" alt={nonprofitName} />}\n                {nonprofitName && <div className=\"adyen-checkout__campaign-title\">{nonprofitName}</div>}\n                {causeName && <div className=\"adyen-checkout__campaign-cause\">{causeName}</div>}\n                {nonprofitDescription && (\n                    <div className=\"adyen-checkout__campaign-description\">\n                        {nonprofitDescription}\n                        {nonprofitUrl && ' ›'}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"names":["CampaignContent","logoUrl","nonprofitDescription","nonprofitName","causeName","nonprofitUrl","bannerUrl","h","div","className","Img","style","backgroundImage","backgroundUrl","img","src","alt"],"mappings":"iHAYe,SAASA,GAAgBC,QACpCA,EAAU,GAAEC,qBACZA,EAAuB,GAAEC,cACzBA,EAAgB,GAAEC,UAClBA,EAAY,GAAEC,aACdA,EAAe,GAAEC,UACjBA,EAAY,KAIZ,OACIC,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACG,EAAAA,CAAID,UAAU,4CAA4CE,MAAO,CAAEC,gBAJpD,wCAAwCN,MAI+BO,cAAeP,IAEtGC,EAACC,MAAAA,CAAIC,UAAU,oCACVR,GAAWM,EAACO,MAAAA,CAAIC,IAAKd,EAASQ,UAAU,gCAAgCO,IAAKb,IAC7EA,GAAiBI,EAACC,MAAAA,CAAIC,UAAU,kCAAkCN,GAClEC,GAAaG,EAACC,MAAAA,CAAIC,UAAU,kCAAkCL,GAC9DF,GACGK,EAACC,MAAAA,CAAIC,UAAU,wCACVP,EACAG,GAAgB,OAMzC"}

package/dist/es/components/Donation/components/DonationComponent.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as a,useCallback as t,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"./CampaignContainer.js";import s from"../../internal/ButtonGroup/ButtonGroup.js";import r from"../../internal/Button/Button.js";import c from"../../internal/Img/Img.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import u from"../../internal/DisclaimerMessage/DisclaimerMessage.js";import l from"../../../core/Context/useImage.js";function d(d){const{amounts:m,onCancel:g,onDonate:_,showCancelButton:p=!0,termsAndConditionsUrl:h}=d,{i18n:y}=i(),k=l(),{currency:v}=m,[f,C]=a("ready"),[N,j]=a(!1),[B,b]=a({currency:v,value:null});this.setStatus=e=>{C(e)};const x=t(((e,a)=>y.amount(e,a)),[y]);return o((()=>{d.onChange({data:{amount:B},isValid:N})}),[B,N]),"error"===f?e("div",{className:"adyen-checkout__adyen-giving"},e(c,{className:"adyen-checkout__status__icon adyen-checkout__status__icon--error",src:k({imageFolder:"components/"})("error"),alt:y.get("error.message.unknown")}),e("div",{className:"adyen-checkout__status__text"},y.get("error.message.unknown"))):"success"===f?e("div",{className:"adyen-checkout__adyen-giving"},e(c,{className:"adyen-checkout__status__icon adyen-checkout__status__icon--success",src:k({imageFolder:"components/"})("heart"),alt:y.get("thanksForYourSupport")}),e("div",{className:"adyen-checkout__status__text"},y.get("thanksForYourSupport"))):e("div",{className:"adyen-checkout__adyen-giving"},e(n,d),e("div",{className:"adyen-checkout__adyen-giving-actions"},e("div",{className:"adyen-checkout__amounts"},e(s,{options:m.values.map((e=>({value:e,label:x(e,v),disabled:"loading"===f,selected:e===B.value}))),name:"amount",onChange:({target:e})=>{const a=parseInt(e.value,10);j(!0),b((e=>({...e,value:a})))}})),h&&e(u,{message:"By donating you agree to the %#terms and conditions%#",urls:[h]}),e(r,{classNameModifiers:["donate"],onClick:()=>{C("loading"),_({data:{amount:B}})},label:y.get("donateButton"),disabled:!B.value,status:f}),p&&e(r,{classNameModifiers:["decline"],variant:"ghost",onClick:()=>{C("ready"),g({data:{amount:B},isValid:N})},disabled:"loading"===f,label:`${y.get("notNowButton")} ›`})))}d.defaultProps={onCancel:()=>{},onChange:()=>{},onDonate:()=>{},amounts:{},showCancelButton:!0};export{d as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as t,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"./CampaignContainer.js";import a from"../../internal/Button/Button.js";import s from"../../internal/Img/Img.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import c from"../../internal/DisclaimerMessage/DisclaimerMessage.js";import u from"../../../core/Context/useImage.js";import i from"./FixedAmounts.js";import m from"./Roundup.js";import{getRoundupAmount as d,getRoundupAmountLabel as l,getAmountLabel as g}from"./utils.js";function _(_){const{donation:p,commercialTxAmount:y,onCancel:h,onDonate:k,showCancelButton:v=!0,termsAndConditionsUrl:f}=_,{i18n:C}=r(),x=u(),{currency:j,type:A}=p,N="roundup"===A,[B,D]=t("ready"),[w,F]=t(N),[S,I]=t({currency:j,value:N?d(p.maxRoundupAmount,y):null});this.setStatus=e=>{D(e)};const R=()=>{D("loading"),k({data:{amount:S}})};return o((()=>{_.onChange({data:{amount:S},isValid:w})}),[S,w]),"error"===B?e("div",{className:"adyen-checkout__adyen-giving"},e(s,{className:"adyen-checkout__status__icon adyen-checkout__status__icon--error",src:x({imageFolder:"components/"})("error"),alt:C.get("error.message.unknown")}),e("div",{className:"adyen-checkout__status__text"},C.get("error.message.unknown"))):"success"===B?e("div",{className:"adyen-checkout__adyen-giving"},e(s,{className:"adyen-checkout__status__icon adyen-checkout__status__icon--success",src:x({imageFolder:"components/"})("heart"),alt:C.get("thanksForYourSupport")}),e("div",{className:"adyen-checkout__status__text"},C.get("thanksForYourSupport"))):e("div",{className:"adyen-checkout__adyen-giving"},e(n,_),e("div",{className:"adyen-checkout__adyen-giving-actions"},f&&e(c,{message:C.get("donationTermsCondition"),urls:[f]}),N?e(m,{donationAmount:l(C,{maxRoundupAmount:p.maxRoundupAmount,commercialTxAmount:y,currency:j}),originalPaymentAmount:g(C,{value:y,currency:j}),status:B,onDonateButtonClicked:R}):e(i,{selectedAmount:S.value,values:p.values,currency:j,status:B,onAmountSelected:({target:e})=>{const t=parseInt(e.value,10);F(!0),I((e=>({...e,value:t})))},onDonateButtonClicked:R}),v&&e(a,{classNameModifiers:["decline"],variant:"ghost",onClick:()=>{D("ready"),h({data:{amount:S},isValid:w})},disabled:"loading"===B,label:`${C.get("notNowButton")} ›`})))}_.defaultProps={onCancel:()=>{},onChange:()=>{},onDonate:()=>{},donation:{},showCancelButton:!0};export{_ as default};
 //# sourceMappingURL=DonationComponent.js.map

package/dist/es/components/Donation/components/DonationComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonationComponent.js","sources":["../../../../../src/components/Donation/components/DonationComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport CampaignContainer from './CampaignContainer';\nimport ButtonGroup from '../../internal/ButtonGroup';\nimport Button from '../../internal/Button';\nimport Img from '../../internal/Img';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport '../Donation.scss';\nimport DisclaimerMessage from '../../internal/DisclaimerMessage';\nimport { DonationComponentProps } from './types';\nimport useImage from '../../../core/Context/useImage';\n\nexport default function DonationComponent(props: DonationComponentProps) {\n    const { amounts, onCancel, onDonate, showCancelButton = true, termsAndConditionsUrl } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { currency } = amounts;\n    const [status, setStatus] = useState('ready');\n    const [isValid, setIsValid] = useState(false);\n    const [amount, setAmount] = useState({\n        currency,\n        value: null\n    });\n\n    this.setStatus = status => {\n        setStatus(status);\n    };\n\n    const getAmount = useCallback((value: number, currency: string) => i18n.amount(value, currency), [i18n]);\n\n    const handleAmountSelected = ({ target }) => {\n        const value = parseInt(target.value, 10);\n        setIsValid(true);\n        setAmount(amount => ({ ...amount, value }));\n    };\n\n    const handleDonate = () => {\n        setStatus('loading');\n        onDonate({ data: { amount } });\n    };\n\n    const handleDecline = () => {\n        setStatus('ready');\n        onCancel({ data: { amount }, isValid });\n    };\n\n    useEffect(() => {\n        props.onChange({ data: { amount }, isValid });\n    }, [amount, isValid]);\n\n    if (status === 'error') {\n        return (\n            <div className=\"adyen-checkout__adyen-giving\">\n                <Img\n                    className=\"adyen-checkout__status__icon adyen-checkout__status__icon--error\"\n                    src={getImage({ imageFolder: 'components/' })('error')}\n                    alt={i18n.get('error.message.unknown')}\n                />\n                <div className=\"adyen-checkout__status__text\">{i18n.get('error.message.unknown')}</div>\n            </div>\n        );\n    }\n\n    if (status === 'success') {\n        return (\n            <div className=\"adyen-checkout__adyen-giving\">\n                <Img\n                    className=\"adyen-checkout__status__icon adyen-checkout__status__icon--success\"\n                    src={getImage({ imageFolder: 'components/' })('heart')}\n                    alt={i18n.get('thanksForYourSupport')}\n                />\n\n                <div className=\"adyen-checkout__status__text\">{i18n.get('thanksForYourSupport')}</div>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__adyen-giving\">\n            <CampaignContainer {...props} />\n\n            <div className=\"adyen-checkout__adyen-giving-actions\">\n                <div className=\"adyen-checkout__amounts\">\n                    <ButtonGroup\n                        options={amounts.values.map(value => ({\n                            value,\n                            label: getAmount(value, currency),\n                            disabled: status === 'loading',\n                            selected: value === amount.value\n                        }))}\n                        name=\"amount\"\n                        onChange={handleAmountSelected}\n                    />\n                </div>\n                {termsAndConditionsUrl && (\n                    <DisclaimerMessage message={'By donating you agree to the %#terms and conditions%#'} urls={[termsAndConditionsUrl]} />\n                )}\n                <Button\n                    classNameModifiers={['donate']}\n                    onClick={handleDonate}\n                    label={i18n.get('donateButton')}\n                    disabled={!amount.value}\n                    status={status}\n                />\n\n                {showCancelButton && (\n                    <Button\n                        classNameModifiers={['decline']}\n                        variant=\"ghost\"\n                        onClick={handleDecline}\n                        disabled={status === 'loading'}\n                        label={`${i18n.get('notNowButton')} ›`}\n                    />\n                )}\n            </div>\n        </div>\n    );\n}\n\nDonationComponent.defaultProps = {\n    onCancel: () => {},\n    onChange: () => {},\n    onDonate: () => {},\n    amounts: {},\n    showCancelButton: true\n};\n"],"names":["DonationComponent","props","amounts","onCancel","onDonate","showCancelButton","termsAndConditionsUrl","i18n","useCoreContext","getImage","useImage","currency","status","setStatus","useState","isValid","setIsValid","amount","setAmount","value","this","getAmount","useCallback","useEffect","onChange","data","h","div","className","Img","src","imageFolder","alt","get","CampaignContainer","ButtonGroup","options","values","map","label","disabled","selected","name","target","parseInt","DisclaimerMessage","message","urls","Button","classNameModifiers","onClick","variant","defaultProps"],"mappings":"oiBAYe,SAASA,EAAkBC,GACtC,MAAMC,QAAEA,EAAOC,SAAEA,EAAQC,SAAEA,EAAQC,iBAAEA,GAAmB,EAAIC,sBAAEA,GAA0BL,GAClFM,KAAEA,GAASC,IACXC,EAAWC,KACXC,SAAEA,GAAaT,GACdU,EAAQC,GAAaC,EAAS,UAC9BC,EAASC,GAAcF,GAAS,IAChCG,EAAQC,GAAaJ,EAAS,CACjCH,WACAQ,MAAO,OAGXC,KAAKP,UAAYD,IACbC,EAAUD,EAAAA,EAGd,MAAMS,EAAYC,GAAY,CAACH,EAAeR,IAAqBJ,EAAKU,OAAOE,EAAOR,IAAW,CAACJ,IAsBlG,OAJAgB,GAAU,KACNtB,EAAMuB,SAAS,CAAEC,KAAM,CAAER,UAAUF,WAAQ,GAC5C,CAACE,EAAQF,IAEG,UAAXH,EAEIc,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,EAAAA,CACGD,UAAU,mEACVE,IAAKrB,EAAS,CAAEsB,YAAa,eAAxBtB,CAAyC,SAC9CuB,IAAKzB,EAAK0B,IAAI,2BAElBP,EAACC,MAAAA,CAAIC,UAAU,gCAAgCrB,EAAK0B,IAAI,2BAKrD,YAAXrB,EAEIc,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,EAAAA,CACGD,UAAU,qEACVE,IAAKrB,EAAS,CAAEsB,YAAa,eAAxBtB,CAAyC,SAC9CuB,IAAKzB,EAAK0B,IAAI,0BAGlBP,EAACC,MAAAA,CAAIC,UAAU,gCAAgCrB,EAAK0B,IAAI,0BAMhEP,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACQ,EAAsBjC,GAEvByB,EAACC,MAAAA,CAAIC,UAAU,wCACXF,EAACC,MAAAA,CAAIC,UAAU,2BACXF,EAACS,EAAAA,CACGC,QAASlC,EAAQmC,OAAOC,KAAInB,IAAU,CAClCA,QACAoB,MAAOlB,EAAUF,EAAOR,GACxB6B,SAAqB,YAAX5B,EACV6B,SAAUtB,IAAUF,EAAOE,UAE/BuB,KAAK,SACLlB,SA7DS,EAAGmB,aAC5B,MAAMxB,EAAQyB,SAASD,EAAOxB,MAAO,IACrCH,GAAW,GACXE,GAAUD,IAAW,IAAKA,EAAQE,WAAM,KA6D/Bb,GACGoB,EAACmB,EAAAA,CAAkBC,QAAS,wDAAyDC,KAAM,CAACzC,KAEhGoB,EAACsB,EAAAA,CACGC,mBAAoB,CAAC,UACrBC,QA/DK,KACjBrC,EAAU,WACVT,EAAS,CAAEqB,KAAM,CAAER,WAAS,EA8DhBsB,MAAOhC,EAAK0B,IAAI,gBAChBO,UAAWvB,EAAOE,MAClBP,OAAQA,IAGXP,GACGqB,EAACsB,EAAAA,CACGC,mBAAoB,CAAC,WACrBE,QAAQ,QACRD,QApEE,KAClBrC,EAAU,SACVV,EAAS,CAAEsB,KAAM,CAAER,UAAUF,WAAQ,EAmErByB,SAAqB,YAAX5B,EACV2B,MAAO,GAAGhC,EAAK0B,IAAI,uBAM3C,CAEAjC,EAAkBoD,aAAe,CAC7BjD,SAAU,OACVqB,SAAU,OACVpB,SAAU,OACVF,QAAS,CAAC,EACVG,kBAAkB"}
+{"version":3,"file":"DonationComponent.js","sources":["../../../../../src/components/Donation/components/DonationComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useState } from 'preact/hooks';\nimport CampaignContainer from './CampaignContainer';\nimport Button from '../../internal/Button';\nimport Img from '../../internal/Img';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport '../Donation.scss';\nimport DisclaimerMessage from '../../internal/DisclaimerMessage';\nimport { DonationAmount, DonationComponentProps, Status } from './types';\nimport useImage from '../../../core/Context/useImage';\nimport FixedAmounts from './FixedAmounts';\nimport Roundup from './Roundup';\nimport { getAmountLabel, getRoundupAmount, getRoundupAmountLabel } from './utils';\n\nexport default function DonationComponent(props: DonationComponentProps) {\n    const { donation, commercialTxAmount, onCancel, onDonate, showCancelButton = true, termsAndConditionsUrl } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { currency, type } = donation;\n    const isRoundupDonation = type === 'roundup';\n    const [status, setStatus] = useState<Status>('ready');\n    const [isValid, setIsValid] = useState<boolean>(isRoundupDonation);\n    const [amount, setAmount] = useState<DonationAmount>({\n        currency,\n        value: isRoundupDonation ? getRoundupAmount(donation.maxRoundupAmount, commercialTxAmount) : null\n    });\n\n    this.setStatus = (status: Status) => {\n        setStatus(status);\n    };\n\n    const handleAmountSelected = ({ target }) => {\n        const value = parseInt(target.value, 10);\n        setIsValid(true);\n        setAmount((amount: DonationAmount) => ({ ...amount, value }));\n    };\n\n    const handleDonate = () => {\n        setStatus('loading');\n        onDonate({ data: { amount } });\n    };\n\n    const handleDecline = () => {\n        setStatus('ready');\n        onCancel({ data: { amount }, isValid });\n    };\n\n    useEffect(() => {\n        props.onChange({ data: { amount }, isValid });\n    }, [amount, isValid]);\n\n    if (status === 'error') {\n        return (\n            <div className=\"adyen-checkout__adyen-giving\">\n                <Img\n                    className=\"adyen-checkout__status__icon adyen-checkout__status__icon--error\"\n                    src={getImage({ imageFolder: 'components/' })('error')}\n                    alt={i18n.get('error.message.unknown')}\n                />\n                <div className=\"adyen-checkout__status__text\">{i18n.get('error.message.unknown')}</div>\n            </div>\n        );\n    }\n\n    if (status === 'success') {\n        return (\n            <div className=\"adyen-checkout__adyen-giving\">\n                <Img\n                    className=\"adyen-checkout__status__icon adyen-checkout__status__icon--success\"\n                    src={getImage({ imageFolder: 'components/' })('heart')}\n                    alt={i18n.get('thanksForYourSupport')}\n                />\n\n                <div className=\"adyen-checkout__status__text\">{i18n.get('thanksForYourSupport')}</div>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__adyen-giving\">\n            <CampaignContainer {...props} />\n\n            <div className=\"adyen-checkout__adyen-giving-actions\">\n                {termsAndConditionsUrl && <DisclaimerMessage message={i18n.get('donationTermsCondition')} urls={[termsAndConditionsUrl]} />}\n                {isRoundupDonation ? (\n                    <Roundup\n                        donationAmount={getRoundupAmountLabel(i18n, { maxRoundupAmount: donation.maxRoundupAmount, commercialTxAmount, currency })}\n                        originalPaymentAmount={getAmountLabel(i18n, { value: commercialTxAmount, currency })}\n                        status={status}\n                        onDonateButtonClicked={handleDonate}\n                    ></Roundup>\n                ) : (\n                    <FixedAmounts\n                        selectedAmount={amount.value}\n                        values={donation.values}\n                        currency={currency}\n                        status={status}\n                        onAmountSelected={handleAmountSelected}\n                        onDonateButtonClicked={handleDonate}\n                    ></FixedAmounts>\n                )}\n                {showCancelButton && (\n                    <Button\n                        classNameModifiers={['decline']}\n                        variant=\"ghost\"\n                        onClick={handleDecline}\n                        disabled={status === 'loading'}\n                        label={`${i18n.get('notNowButton')} ›`}\n                    />\n                )}\n            </div>\n        </div>\n    );\n}\n\nDonationComponent.defaultProps = {\n    onCancel: () => {},\n    onChange: () => {},\n    onDonate: () => {},\n    donation: {},\n    showCancelButton: true\n};\n"],"names":["DonationComponent","props","donation","commercialTxAmount","onCancel","onDonate","showCancelButton","termsAndConditionsUrl","i18n","useCoreContext","getImage","useImage","currency","type","isRoundupDonation","status","setStatus","useState","isValid","setIsValid","amount","setAmount","value","getRoundupAmount","maxRoundupAmount","this","handleDonate","data","useEffect","onChange","h","div","className","Img","src","imageFolder","alt","get","CampaignContainer","DisclaimerMessage","message","urls","Roundup","donationAmount","getRoundupAmountLabel","originalPaymentAmount","getAmountLabel","onDonateButtonClicked","FixedAmounts","selectedAmount","values","onAmountSelected","target","parseInt","Button","classNameModifiers","variant","onClick","disabled","label","defaultProps"],"mappings":"onBAce,SAASA,EAAkBC,GACtC,MAAMC,SAAEA,EAAQC,mBAAEA,EAAkBC,SAAEA,EAAQC,SAAEA,EAAQC,iBAAEA,GAAmB,EAAIC,sBAAEA,GAA0BN,GACvGO,KAAEA,GAASC,IACXC,EAAWC,KACXC,SAAEA,EAAQC,KAAEA,GAASX,EACrBY,EAA6B,YAATD,GACnBE,EAAQC,GAAaC,EAAiB,UACtCC,EAASC,GAAcF,EAAkBH,IACzCM,EAAQC,GAAaJ,EAAyB,CACjDL,WACAU,MAAOR,EAAoBS,EAAiBrB,EAASsB,iBAAkBrB,GAAsB,OAGjGsB,KAAKT,UAAaD,IACdC,EAAUD,EAAAA,EAGd,MAMMW,EAAe,KACjBV,EAAU,WACVX,EAAS,CAAEsB,KAAM,CAAEP,WAAS,EAYhC,OAJAQ,GAAU,KACN3B,EAAM4B,SAAS,CAAEF,KAAM,CAAEP,UAAUF,WAAQ,GAC5C,CAACE,EAAQF,IAEG,UAAXH,EAEIe,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,EAAAA,CACGD,UAAU,mEACVE,IAAKxB,EAAS,CAAEyB,YAAa,eAAxBzB,CAAyC,SAC9C0B,IAAK5B,EAAK6B,IAAI,2BAElBP,EAACC,MAAAA,CAAIC,UAAU,gCAAgCxB,EAAK6B,IAAI,2BAKrD,YAAXtB,EAEIe,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACG,EAAAA,CACGD,UAAU,qEACVE,IAAKxB,EAAS,CAAEyB,YAAa,eAAxBzB,CAAyC,SAC9C0B,IAAK5B,EAAK6B,IAAI,0BAGlBP,EAACC,MAAAA,CAAIC,UAAU,gCAAgCxB,EAAK6B,IAAI,0BAMhEP,EAACC,MAAAA,CAAIC,UAAU,gCACXF,EAACQ,EAAsBrC,GAEvB6B,EAACC,MAAAA,CAAIC,UAAU,wCACVzB,GAAyBuB,EAACS,EAAAA,CAAkBC,QAAShC,EAAK6B,IAAI,0BAA2BI,KAAM,CAAClC,KAChGO,EACGgB,EAACY,EAAAA,CACGC,eAAgBC,EAAsBpC,EAAM,CAAEgB,iBAAkBtB,EAASsB,iBAAkBrB,qBAAoBS,aAC/GiC,sBAAuBC,EAAetC,EAAM,CAAEc,MAAOnB,EAAoBS,aACzEG,OAAQA,EACRgC,sBAAuBrB,IAG3BI,EAACkB,EAAAA,CACGC,eAAgB7B,EAAOE,MACvB4B,OAAQhD,EAASgD,OACjBtC,SAAUA,EACVG,OAAQA,EACRoC,iBAlES,EAAGC,aAC5B,MAAM9B,EAAQ+B,SAASD,EAAO9B,MAAO,IACrCH,GAAW,GACXE,GAAWD,IAA4B,IAAKA,EAAQE,WAAM,EAgE1CyB,sBAAuBrB,IAG9BpB,GACGwB,EAACwB,EAAAA,CACGC,mBAAoB,CAAC,WACrBC,QAAQ,QACRC,QA/DE,KAClBzC,EAAU,SACVZ,EAAS,CAAEuB,KAAM,CAAEP,UAAUF,WAAQ,EA8DrBwC,SAAqB,YAAX3C,EACV4C,MAAO,GAAGnD,EAAK6B,IAAI,uBAM3C,CAEArC,EAAkB4D,aAAe,CAC7BxD,SAAU,OACVyB,SAAU,OACVxB,SAAU,OACVH,SAAU,CAAC,EACXI,kBAAkB"}

package/dist/es/components/Donation/components/FixedAmounts.js

@@ -0,0 +1,2 @@
+import{createElement as t,Fragment as e}from"../../../external/preact/dist/preact.js";import o from"../../internal/ButtonGroup/ButtonGroup.js";import n from"../../internal/Button/Button.js";import{getAmountLabel as a}from"./utils.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";function l(l){const{currency:s,values:u,selectedAmount:i,status:m,onAmountSelected:c,onDonateButtonClicked:d}=l,{i18n:p}=r();return t(e,null,t("div",{className:"adyen-checkout__amounts"},t(o,{options:u.map((t=>({value:t,label:a(p,{value:t,currency:s}),disabled:"loading"===m,selected:t===i}))),name:"amount",onChange:c})),t(n,{classNameModifiers:["donate"],onClick:d,label:p.get("donateButton"),disabled:null===i,status:m}))}export{l as default};
+//# sourceMappingURL=FixedAmounts.js.map

package/dist/es/components/Donation/components/FixedAmounts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedAmounts.js","sources":["../../../../../src/components/Donation/components/FixedAmounts.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport ButtonGroup from '../../internal/ButtonGroup';\nimport Button from '../../internal/Button';\nimport { getAmountLabel } from './utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { Status } from './types';\n\ninterface FixedAmountsProps {\n    selectedAmount: number;\n    currency: string;\n    values: Array<number>;\n    status: Status;\n    onAmountSelected: ({ target }) => void;\n    onDonateButtonClicked: (amount: number) => void;\n}\nexport default function FixedAmounts(props: FixedAmountsProps) {\n    const { currency, values, selectedAmount, status, onAmountSelected, onDonateButtonClicked } = props;\n    const { i18n } = useCoreContext();\n\n    return (\n        <Fragment>\n            <div className=\"adyen-checkout__amounts\">\n                <ButtonGroup\n                    options={values.map(value => ({\n                        value,\n                        label: getAmountLabel(i18n, { value, currency }),\n                        disabled: status === 'loading',\n                        selected: value === selectedAmount\n                    }))}\n                    name=\"amount\"\n                    onChange={onAmountSelected}\n                />\n            </div>\n            <Button\n                classNameModifiers={['donate']}\n                onClick={onDonateButtonClicked}\n                label={i18n.get('donateButton')}\n                disabled={selectedAmount === null}\n                status={status}\n            />\n        </Fragment>\n    );\n}\n"],"names":["FixedAmounts","props","currency","values","selectedAmount","status","onAmountSelected","onDonateButtonClicked","i18n","useCoreContext","h","Fragment","div","className","ButtonGroup","options","map","value","label","getAmountLabel","disabled","selected","name","onChange","Button","classNameModifiers","onClick","get"],"mappings":"iTAee,SAASA,EAAaC,GACjC,MAAMC,SAAEA,EAAQC,OAAEA,EAAMC,eAAEA,EAAcC,OAAEA,EAAMC,iBAAEA,EAAgBC,sBAAEA,GAA0BN,GACxFO,KAAEA,GAASC,IAEjB,OACIC,EAACC,OACGD,EAACE,MAAAA,CAAIC,UAAU,2BACXH,EAACI,EAAAA,CACGC,QAASZ,EAAOa,KAAIC,IAAU,CAC1BA,QACAC,MAAOC,EAAeX,EAAM,CAAES,QAAOf,aACrCkB,SAAqB,YAAXf,EACVgB,SAAUJ,IAAUb,MAExBkB,KAAK,SACLC,SAAUjB,KAGlBI,EAACc,EAAAA,CACGC,mBAAoB,CAAC,UACrBC,QAASnB,EACTW,MAAOV,EAAKmB,IAAI,gBAChBP,SAA6B,OAAnBhB,EACVC,OAAQA,IAIxB"}

package/dist/es/components/Donation/components/Roundup.js

@@ -0,0 +1,2 @@
+import{createElement as t,Fragment as n}from"../../../external/preact/dist/preact.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import e from"../../internal/Button/Button.js";function a(a){const{status:r,donationAmount:i,originalPaymentAmount:s,onDonateButtonClicked:u}=a,{i18n:m}=o();return t(n,null,t(e,{classNameModifiers:["donate"],onClick:u,label:`${m.get("donateButton")} ${i}`,status:r}),t("span",{className:"adyen-checkout-roundup-description"},m.get("donationRoundUpDescription",{values:{donationAmount:i,originalPaymentAmount:s}})))}export{a as default};
+//# sourceMappingURL=Roundup.js.map

package/dist/es/components/Donation/components/Roundup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Roundup.js","sources":["../../../../../src/components/Donation/components/Roundup.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Button from '../../internal/Button';\n\ninterface RoundupProps {\n    status: string;\n    donationAmount: string;\n    originalPaymentAmount: string;\n    onDonateButtonClicked: () => void;\n}\n\nexport default function Roundup(props: RoundupProps) {\n    const { status, donationAmount, originalPaymentAmount, onDonateButtonClicked } = props;\n    const { i18n } = useCoreContext();\n\n    return (\n        <Fragment>\n            <Button\n                classNameModifiers={['donate']}\n                onClick={onDonateButtonClicked}\n                label={`${i18n.get('donateButton')} ${donationAmount}`}\n                status={status}\n            />\n            <span className=\"adyen-checkout-roundup-description\">\n                {i18n.get('donationRoundUpDescription', { values: { donationAmount, originalPaymentAmount } })}\n            </span>\n        </Fragment>\n    );\n}\n"],"names":["Roundup","props","status","donationAmount","originalPaymentAmount","onDonateButtonClicked","i18n","useCoreContext","h","Fragment","Button","classNameModifiers","onClick","label","get","span","className","values"],"mappings":"4MAWe,SAASA,EAAQC,GAC5B,MAAMC,OAAEA,EAAMC,eAAEA,EAAcC,sBAAEA,EAAqBC,sBAAEA,GAA0BJ,GAC3EK,KAAEA,GAASC,IAEjB,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGC,mBAAoB,CAAC,UACrBC,QAASP,EACTQ,MAAO,GAAGP,EAAKQ,IAAI,mBAAmBX,IACtCD,OAAQA,IAEZM,EAACO,OAAAA,CAAKC,UAAU,sCACXV,EAAKQ,IAAI,6BAA8B,CAAEG,OAAQ,CAAEd,iBAAgBC,4BAIpF"}

package/dist/es/components/Donation/components/utils.js

@@ -0,0 +1,2 @@
+const u=(u,c)=>u-c%u,c=(u,{value:c,currency:n})=>u.amount(c,n),n=(n,{maxRoundupAmount:r,commercialTxAmount:e,currency:o})=>c(n,{value:u(r,e),currency:o});export{c as getAmountLabel,u as getRoundupAmount,n as getRoundupAmountLabel};
+//# sourceMappingURL=utils.js.map

package/dist/es/components/Donation/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Donation/components/utils.ts"],"sourcesContent":["import Language from '../../../language';\nimport { DonationAmount } from './types';\n\ninterface RoundupAmount {\n    maxRoundupAmount: number;\n    commercialTxAmount: number;\n    currency: string;\n}\n\nconst getRoundupAmount = (maxRoundupAmount: number, commercialTxAmount: number) => maxRoundupAmount - (commercialTxAmount % maxRoundupAmount);\n\nconst getAmountLabel = (i18n: Language, { value, currency }: DonationAmount) => i18n.amount(value, currency);\n\nconst getRoundupAmountLabel = (i18n: Language, { maxRoundupAmount, commercialTxAmount, currency }: RoundupAmount) =>\n    getAmountLabel(i18n, { value: getRoundupAmount(maxRoundupAmount, commercialTxAmount), currency });\n\nexport { getAmountLabel, getRoundupAmount, getRoundupAmountLabel };\n"],"names":["getRoundupAmount","maxRoundupAmount","commercialTxAmount","getAmountLabel","i18n","value","currency","amount","getRoundupAmountLabel"],"mappings":"AASA,MAAMA,EAAmB,CAACC,EAA0BC,IAA+BD,EAAoBC,EAAqBD,EAEtHE,EAAiB,CAACC,GAAkBC,QAAOC,cAA+BF,EAAKG,OAAOF,EAAOC,GAE7FE,EAAwB,CAACJ,GAAkBH,mBAAkBC,qBAAoBI,cACnFH,EAAeC,EAAM,CAAEC,MAAOL,EAAiBC,EAAkBC,GAAqBI"}

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

@@ -1,2 +1,2 @@
-import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../external/classnames/index.js";import n from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{ExpandButton as m}from"./ExpandButton.js";import{useCoreContext as h}from"../../../../../core/Context/CoreProvider.js";class l extends e{static defaultProps={paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1};state={showDisableStoredPaymentMethodConfirmation:!1};toggleDisableConfirmation=()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})};onDisableStoredPaymentMethod=()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()};handleOnListItemClick=()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)};render({paymentMethod:e,isSelected:l,isDisablingPaymentMethod:c,isLoaded:p,isLoading:y,standalone:u,showRadioButton:_}){const{i18n:b}=h();if(!e)return null;const f="card"===e.props.type||"scheme"===e.props.type,C=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...f&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":l,"adyen-checkout__payment-method--loading":y,"adyen-checkout__payment-method--disabling":c,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":u,[e._id]:!0,[this.props.className]:!0}),k=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&l,M=`remove-${e._id}`,P=`container-${e._id}`,D=`button-${e._id}`,S=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("li",{key:e._id,className:C,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(m,{buttonId:D,showRadioButton:_,isSelected:l,expandContentId:P},t(a,{...e.props.oneClick&&{altDescription:e.props.name},type:e.type,src:e.icon}),t(r,{displayName:e.displayName,isSelected:l,additionalInfo:e.additionalInfo})),k&&t("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:this.toggleDisableConfirmation,"aria-expanded":this.state.showDisableStoredPaymentMethodConfirmation,"aria-controls":M},b.get("storedPaymentMethod.disable.button")),S&&t(s,{brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:l})),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!l},t("div",{className:"adyen-checkout__payment-method__details",id:P,role:"region"},k&&t(i,{id:M,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e.render(),isLoaded:p}))))}}export{l as default};
+import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../external/classnames/index.js";import n from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{useCoreContext as m}from"../../../../../core/Context/CoreProvider.js";import h from"../../../../internal/ExpandButton/ExpandButton.js";class l extends e{static defaultProps={paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1};state={showDisableStoredPaymentMethodConfirmation:!1};toggleDisableConfirmation=()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})};onDisableStoredPaymentMethod=()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()};handleOnListItemClick=()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)};render({paymentMethod:e,isSelected:l,isDisablingPaymentMethod:c,isLoaded:p,isLoading:y,standalone:u,showRadioButton:_}){const{i18n:b}=m();if(!e)return null;const f="card"===e.props.type||"scheme"===e.props.type,C=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...f&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":l,"adyen-checkout__payment-method--loading":y,"adyen-checkout__payment-method--disabling":c,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":u,[e._id]:!0,[this.props.className]:!0}),k=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&l,M=`remove-${e._id}`,P=`container-${e._id}`,D=`button-${e._id}`,S=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("div",{key:e._id,className:C,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(h,{buttonId:D,showRadioButton:_,isSelected:l,expandContentId:P},t(a,{...e.props.oneClick&&{altDescription:e.props.name},type:e.type,src:e.icon}),t(r,{displayName:e.displayName,isSelected:l,additionalInfo:e.additionalInfo})),k&&t("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:this.toggleDisableConfirmation,"aria-expanded":this.state.showDisableStoredPaymentMethodConfirmation,"aria-controls":M},b.get("storedPaymentMethod.disable.button")),S&&t(s,{brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:l})),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!l},t("div",{className:"adyen-checkout__payment-method__details",id:P,role:"region"},k&&t(i,{id:M,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e.render(),isLoaded:p}))))}}export{l as default};
 //# sourceMappingURL=PaymentMethodItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodItem.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport PaymentMethodDetails from '../PaymentMethodDetails';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport DisableOneClickConfirmation from '../DisableOneClickConfirmation';\nimport './PaymentMethodItem.scss';\nimport UIElement from '../../../../internal/UIElement/UIElement';\nimport PaymentMethodBrands from '../PaymentMethodBrands/PaymentMethodBrands';\nimport { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../../internal/SecuredFields/lib/constants';\nimport PaymentMethodName from '../PaymentMethodName';\nimport { ExpandButton } from './ExpandButton';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\n\nexport interface PaymentMethodItemProps {\n    paymentMethod: UIElement;\n    isSelected?: boolean;\n    isLoaded?: boolean;\n    isLoading?: boolean;\n    isDisablingPaymentMethod: boolean;\n    showRemovePaymentMethodButton: boolean;\n    onDisableStoredPaymentMethod: (paymentMethod) => void;\n    onSelect: (paymentMethod: UIElement) => void;\n    standalone: boolean;\n    className?: string;\n    showRadioButton?: boolean;\n}\n\nclass PaymentMethodItem extends Component<PaymentMethodItemProps> {\n    public static defaultProps = {\n        paymentMethod: null,\n        isSelected: false,\n        isLoaded: false,\n        isLoading: false,\n        showDisableStoredPaymentMethodConfirmation: false,\n        showRadioButton: false\n    };\n\n    public state = {\n        showDisableStoredPaymentMethodConfirmation: false\n    };\n\n    public toggleDisableConfirmation = () => {\n        this.setState({ showDisableStoredPaymentMethodConfirmation: !this.state.showDisableStoredPaymentMethodConfirmation });\n    };\n\n    public onDisableStoredPaymentMethod = () => {\n        this.props.onDisableStoredPaymentMethod(this.props.paymentMethod);\n        this.toggleDisableConfirmation();\n    };\n\n    private handleOnListItemClick = (): void => {\n        const { onSelect, paymentMethod } = this.props;\n        onSelect(paymentMethod);\n    };\n\n    // @ts-ignore need to refine the type for paymentMethod\n    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoaded, isLoading, standalone, showRadioButton }) {\n        const { i18n } = useCoreContext();\n\n        if (!paymentMethod) {\n            return null;\n        }\n\n        const isCard = paymentMethod.props.type === 'card' || paymentMethod.props.type === 'scheme';\n\n        const paymentMethodClassnames = classNames({\n            'adyen-checkout__payment-method': true,\n            [`adyen-checkout__payment-method--${paymentMethod.props.type}`]: true,\n            ...(isCard && { [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true }),\n            'adyen-checkout__payment-method--selected': isSelected,\n            'adyen-checkout__payment-method--loading': isLoading,\n            'adyen-checkout__payment-method--disabling': isDisablingPaymentMethod,\n            'adyen-checkout__payment-method--confirming': this.state.showDisableStoredPaymentMethodConfirmation,\n            'adyen-checkout__payment-method--standalone': standalone,\n            [paymentMethod._id]: true,\n            [this.props.className]: true\n        });\n\n        const showRemovePaymentMethodButton = this.props.showRemovePaymentMethodButton && paymentMethod.props.oneClick && isSelected;\n        const disableConfirmationId = `remove-${paymentMethod._id}`;\n        const containerId = `container-${paymentMethod._id}`;\n        const buttonId = `button-${paymentMethod._id}`;\n\n        const showBrands = !paymentMethod.props.oneClick && paymentMethod.brands && paymentMethod.brands.length > 0;\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n            <li key={paymentMethod._id} className={paymentMethodClassnames} onClick={this.handleOnListItemClick}>\n                <div className=\"adyen-checkout__payment-method__header\">\n                    <ExpandButton buttonId={buttonId} showRadioButton={showRadioButton} isSelected={isSelected} expandContentId={containerId}>\n                        <PaymentMethodIcon\n                            // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)\n                            {...(paymentMethod.props.oneClick && { altDescription: paymentMethod.props.name })}\n                            type={paymentMethod.type}\n                            src={paymentMethod.icon}\n                        />\n\n                        <PaymentMethodName\n                            displayName={paymentMethod.displayName}\n                            isSelected={isSelected}\n                            additionalInfo={paymentMethod.additionalInfo}\n                        />\n                    </ExpandButton>\n\n                    {showRemovePaymentMethodButton && (\n                        <button\n                            type=\"button\"\n                            className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n                            onClick={this.toggleDisableConfirmation}\n                            aria-expanded={this.state.showDisableStoredPaymentMethodConfirmation}\n                            aria-controls={disableConfirmationId}\n                        >\n                            {i18n.get('storedPaymentMethod.disable.button')}\n                        </button>\n                    )}\n\n                    {showBrands && (\n                        <PaymentMethodBrands\n                            brands={paymentMethod.brands}\n                            excludedUIBrands={BRAND_ICON_UI_EXCLUSION_LIST}\n                            isPaymentMethodSelected={isSelected}\n                        />\n                    )}\n                </div>\n\n                <div className=\"adyen-checkout-pm-details-wrapper\" aria-hidden={!isSelected}>\n                    <div className=\"adyen-checkout__payment-method__details\" id={containerId} role=\"region\">\n                        {showRemovePaymentMethodButton && (\n                            <DisableOneClickConfirmation\n                                id={disableConfirmationId}\n                                open={this.state.showDisableStoredPaymentMethodConfirmation}\n                                onDisable={this.onDisableStoredPaymentMethod}\n                                onCancel={this.toggleDisableConfirmation}\n                            />\n                        )}\n\n                        <PaymentMethodDetails paymentMethodComponent={paymentMethod.render()} isLoaded={isLoaded} />\n                    </div>\n                </div>\n            </li>\n        );\n    }\n}\n\nexport default PaymentMethodItem;\n"],"names":["PaymentMethodItem","Component","static","paymentMethod","isSelected","isLoaded","isLoading","showDisableStoredPaymentMethodConfirmation","showRadioButton","state","toggleDisableConfirmation","this","setState","onDisableStoredPaymentMethod","props","handleOnListItemClick","onSelect","render","isDisablingPaymentMethod","standalone","i18n","useCoreContext","isCard","type","paymentMethodClassnames","classNames","fundingSource","_id","className","showRemovePaymentMethodButton","oneClick","disableConfirmationId","containerId","buttonId","showBrands","brands","length","h","li","key","onClick","div","ExpandButton","expandContentId","PaymentMethodIcon","altDescription","name","src","icon","PaymentMethodName","displayName","additionalInfo","button","aria-expanded","aria-controls","get","PaymentMethodBrands","excludedUIBrands","BRAND_ICON_UI_EXCLUSION_LIST","isPaymentMethodSelected","aria-hidden","id","role","DisableOneClickConfirmation","open","onDisable","onCancel","PaymentMethodDetails","paymentMethodComponent"],"mappings":"+lBA2BA,MAAMA,UAA0BC,EAC5BC,oBAA6B,CACzBC,cAAe,KACfC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,4CAA4C,EAC5CC,iBAAiB,GAGdC,MAAQ,CACXF,4CAA4C,GAGzCG,0BAA4B,KAC/BC,KAAKC,SAAS,CAAEL,4CAA6CI,KAAKF,MAAMF,4CAA2C,EAGhHM,6BAA+B,KAClCF,KAAKG,MAAMD,6BAA6BF,KAAKG,MAAMX,eACnDQ,KAAKD,2BAAyB,EAG1BK,sBAAwB,KAC5B,MAAMC,SAAEA,EAAQb,cAAEA,GAAkBQ,KAAKG,MACzCE,EAASb,EAAAA,EAIbc,MAAAA,EAAOd,cAAEA,EAAaC,WAAEA,EAAUc,yBAAEA,EAAwBb,SAAEA,EAAQC,UAAEA,EAASa,WAAEA,EAAUX,gBAAEA,IAC3F,MAAMY,KAAEA,GAASC,IAEjB,IAAKlB,EACD,OAAO,KAGX,MAAMmB,EAAsC,SAA7BnB,EAAcW,MAAMS,MAAgD,WAA7BpB,EAAcW,MAAMS,KAEpEC,EAA0BC,EAAW,CACvC,kCAAkC,EAClC,CAAC,mCAAmCtB,EAAcW,MAAMS,SAAS,KAC7DD,GAAU,CAAE,CAAC,mCAAmCnB,EAAcW,MAAMY,eAAiB,aAAa,GACtG,2CAA4CtB,EAC5C,0CAA2CE,EAC3C,4CAA6CY,EAC7C,6CAA8CP,KAAKF,MAAMF,2CACzD,6CAA8CY,EAC9C,CAAChB,EAAcwB,MAAM,EACrB,CAAChB,KAAKG,MAAMc,YAAY,IAGtBC,EAAgClB,KAAKG,MAAMe,+BAAiC1B,EAAcW,MAAMgB,UAAY1B,EAC5G2B,EAAwB,UAAU5B,EAAcwB,MAChDK,EAAc,aAAa7B,EAAcwB,MACzCM,EAAW,UAAU9B,EAAcwB,MAEnCO,GAAc/B,EAAcW,MAAMgB,UAAY3B,EAAcgC,QAAUhC,EAAcgC,OAAOC,OAAS,EAE1G,OAEIC,EAACC,KAAAA,CAAGC,IAAKpC,EAAcwB,IAAKC,UAAWJ,EAAyBgB,QAAS7B,KAAKI,uBAC1EsB,EAACI,MAAAA,CAAIb,UAAU,0CACXS,EAACK,EAAAA,CAAaT,SAAUA,EAAUzB,gBAAiBA,EAAiBJ,WAAYA,EAAYuC,gBAAiBX,GACzGK,EAACO,EAAAA,IAEQzC,EAAcW,MAAMgB,UAAY,CAAEe,eAAgB1C,EAAcW,MAAMgC,MAC3EvB,KAAMpB,EAAcoB,KACpBwB,IAAK5C,EAAc6C,OAGvBX,EAACY,EAAAA,CACGC,YAAa/C,EAAc+C,YAC3B9C,WAAYA,EACZ+C,eAAgBhD,EAAcgD,kBAIrCtB,GACGQ,EAACe,SAAAA,CACG7B,KAAK,SACLK,UAAU,qFACVY,QAAS7B,KAAKD,0BACd2C,gBAAe1C,KAAKF,MAAMF,2CAC1B+C,gBAAevB,GAEdX,EAAKmC,IAAI,uCAIjBrB,GACGG,EAACmB,EAAAA,CACGrB,OAAQhC,EAAcgC,OACtBsB,iBAAkBC,EAClBC,wBAAyBvD,KAKrCiC,EAACI,MAAAA,CAAIb,UAAU,oCAAoCgC,eAAcxD,GAC7DiC,EAACI,MAAAA,CAAIb,UAAU,0CAA0CiC,GAAI7B,EAAa8B,KAAK,UAC1EjC,GACGQ,EAAC0B,EAAAA,CACGF,GAAI9B,EACJiC,KAAMrD,KAAKF,MAAMF,2CACjB0D,UAAWtD,KAAKE,6BAChBqD,SAAUvD,KAAKD,4BAIvB2B,EAAC8B,EAAAA,CAAqBC,uBAAwBjE,EAAcc,SAAUZ,SAAUA,MAKpG"}
+{"version":3,"file":"PaymentMethodItem.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport PaymentMethodDetails from '../PaymentMethodDetails';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport DisableOneClickConfirmation from '../DisableOneClickConfirmation';\nimport './PaymentMethodItem.scss';\nimport UIElement from '../../../../internal/UIElement/UIElement';\nimport PaymentMethodBrands from '../PaymentMethodBrands/PaymentMethodBrands';\nimport { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../../internal/SecuredFields/lib/constants';\nimport PaymentMethodName from '../PaymentMethodName';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport ExpandButton from '../../../../internal/ExpandButton';\n\nexport interface PaymentMethodItemProps {\n    paymentMethod: UIElement;\n    isSelected?: boolean;\n    isLoaded?: boolean;\n    isLoading?: boolean;\n    isDisablingPaymentMethod: boolean;\n    showRemovePaymentMethodButton: boolean;\n    onDisableStoredPaymentMethod: (paymentMethod) => void;\n    onSelect: (paymentMethod: UIElement) => void;\n    standalone: boolean;\n    className?: string;\n    showRadioButton?: boolean;\n}\n\nclass PaymentMethodItem extends Component<PaymentMethodItemProps> {\n    public static defaultProps = {\n        paymentMethod: null,\n        isSelected: false,\n        isLoaded: false,\n        isLoading: false,\n        showDisableStoredPaymentMethodConfirmation: false,\n        showRadioButton: false\n    };\n\n    public state = {\n        showDisableStoredPaymentMethodConfirmation: false\n    };\n\n    public toggleDisableConfirmation = () => {\n        this.setState({ showDisableStoredPaymentMethodConfirmation: !this.state.showDisableStoredPaymentMethodConfirmation });\n    };\n\n    public onDisableStoredPaymentMethod = () => {\n        this.props.onDisableStoredPaymentMethod(this.props.paymentMethod);\n        this.toggleDisableConfirmation();\n    };\n\n    private handleOnListItemClick = (): void => {\n        const { onSelect, paymentMethod } = this.props;\n        onSelect(paymentMethod);\n    };\n\n    // @ts-ignore need to refine the type for paymentMethod\n    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoaded, isLoading, standalone, showRadioButton }) {\n        const { i18n } = useCoreContext();\n\n        if (!paymentMethod) {\n            return null;\n        }\n\n        const isCard = paymentMethod.props.type === 'card' || paymentMethod.props.type === 'scheme';\n\n        const paymentMethodClassnames = classNames({\n            'adyen-checkout__payment-method': true,\n            [`adyen-checkout__payment-method--${paymentMethod.props.type}`]: true,\n            ...(isCard && { [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true }),\n            'adyen-checkout__payment-method--selected': isSelected,\n            'adyen-checkout__payment-method--loading': isLoading,\n            'adyen-checkout__payment-method--disabling': isDisablingPaymentMethod,\n            'adyen-checkout__payment-method--confirming': this.state.showDisableStoredPaymentMethodConfirmation,\n            'adyen-checkout__payment-method--standalone': standalone,\n            [paymentMethod._id]: true,\n            [this.props.className]: true\n        });\n\n        const showRemovePaymentMethodButton = this.props.showRemovePaymentMethodButton && paymentMethod.props.oneClick && isSelected;\n        const disableConfirmationId = `remove-${paymentMethod._id}`;\n        const containerId = `container-${paymentMethod._id}`;\n        const buttonId = `button-${paymentMethod._id}`;\n\n        const showBrands = !paymentMethod.props.oneClick && paymentMethod.brands && paymentMethod.brands.length > 0;\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n            <div key={paymentMethod._id} className={paymentMethodClassnames} onClick={this.handleOnListItemClick}>\n                <div className=\"adyen-checkout__payment-method__header\">\n                    <ExpandButton buttonId={buttonId} showRadioButton={showRadioButton} isSelected={isSelected} expandContentId={containerId}>\n                        <PaymentMethodIcon\n                            // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)\n                            {...(paymentMethod.props.oneClick && { altDescription: paymentMethod.props.name })}\n                            type={paymentMethod.type}\n                            src={paymentMethod.icon}\n                        />\n\n                        <PaymentMethodName\n                            displayName={paymentMethod.displayName}\n                            isSelected={isSelected}\n                            additionalInfo={paymentMethod.additionalInfo}\n                        />\n                    </ExpandButton>\n\n                    {showRemovePaymentMethodButton && (\n                        <button\n                            type=\"button\"\n                            className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n                            onClick={this.toggleDisableConfirmation}\n                            aria-expanded={this.state.showDisableStoredPaymentMethodConfirmation}\n                            aria-controls={disableConfirmationId}\n                        >\n                            {i18n.get('storedPaymentMethod.disable.button')}\n                        </button>\n                    )}\n\n                    {showBrands && (\n                        <PaymentMethodBrands\n                            brands={paymentMethod.brands}\n                            excludedUIBrands={BRAND_ICON_UI_EXCLUSION_LIST}\n                            isPaymentMethodSelected={isSelected}\n                        />\n                    )}\n                </div>\n\n                <div className=\"adyen-checkout-pm-details-wrapper\" aria-hidden={!isSelected}>\n                    <div className=\"adyen-checkout__payment-method__details\" id={containerId} role=\"region\">\n                        {showRemovePaymentMethodButton && (\n                            <DisableOneClickConfirmation\n                                id={disableConfirmationId}\n                                open={this.state.showDisableStoredPaymentMethodConfirmation}\n                                onDisable={this.onDisableStoredPaymentMethod}\n                                onCancel={this.toggleDisableConfirmation}\n                            />\n                        )}\n\n                        <PaymentMethodDetails paymentMethodComponent={paymentMethod.render()} isLoaded={isLoaded} />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default PaymentMethodItem;\n"],"names":["PaymentMethodItem","Component","static","paymentMethod","isSelected","isLoaded","isLoading","showDisableStoredPaymentMethodConfirmation","showRadioButton","state","toggleDisableConfirmation","this","setState","onDisableStoredPaymentMethod","props","handleOnListItemClick","onSelect","render","isDisablingPaymentMethod","standalone","i18n","useCoreContext","isCard","type","paymentMethodClassnames","classNames","fundingSource","_id","className","showRemovePaymentMethodButton","oneClick","disableConfirmationId","containerId","buttonId","showBrands","brands","length","h","div","key","onClick","ExpandButton","expandContentId","PaymentMethodIcon","altDescription","name","src","icon","PaymentMethodName","displayName","additionalInfo","button","aria-expanded","aria-controls","get","PaymentMethodBrands","excludedUIBrands","BRAND_ICON_UI_EXCLUSION_LIST","isPaymentMethodSelected","aria-hidden","id","role","DisableOneClickConfirmation","open","onDisable","onCancel","PaymentMethodDetails","paymentMethodComponent"],"mappings":"+mBA2BA,MAAMA,UAA0BC,EAC5BC,oBAA6B,CACzBC,cAAe,KACfC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,4CAA4C,EAC5CC,iBAAiB,GAGdC,MAAQ,CACXF,4CAA4C,GAGzCG,0BAA4B,KAC/BC,KAAKC,SAAS,CAAEL,4CAA6CI,KAAKF,MAAMF,4CAA2C,EAGhHM,6BAA+B,KAClCF,KAAKG,MAAMD,6BAA6BF,KAAKG,MAAMX,eACnDQ,KAAKD,2BAAyB,EAG1BK,sBAAwB,KAC5B,MAAMC,SAAEA,EAAQb,cAAEA,GAAkBQ,KAAKG,MACzCE,EAASb,EAAAA,EAIbc,MAAAA,EAAOd,cAAEA,EAAaC,WAAEA,EAAUc,yBAAEA,EAAwBb,SAAEA,EAAQC,UAAEA,EAASa,WAAEA,EAAUX,gBAAEA,IAC3F,MAAMY,KAAEA,GAASC,IAEjB,IAAKlB,EACD,OAAO,KAGX,MAAMmB,EAAsC,SAA7BnB,EAAcW,MAAMS,MAAgD,WAA7BpB,EAAcW,MAAMS,KAEpEC,EAA0BC,EAAW,CACvC,kCAAkC,EAClC,CAAC,mCAAmCtB,EAAcW,MAAMS,SAAS,KAC7DD,GAAU,CAAE,CAAC,mCAAmCnB,EAAcW,MAAMY,eAAiB,aAAa,GACtG,2CAA4CtB,EAC5C,0CAA2CE,EAC3C,4CAA6CY,EAC7C,6CAA8CP,KAAKF,MAAMF,2CACzD,6CAA8CY,EAC9C,CAAChB,EAAcwB,MAAM,EACrB,CAAChB,KAAKG,MAAMc,YAAY,IAGtBC,EAAgClB,KAAKG,MAAMe,+BAAiC1B,EAAcW,MAAMgB,UAAY1B,EAC5G2B,EAAwB,UAAU5B,EAAcwB,MAChDK,EAAc,aAAa7B,EAAcwB,MACzCM,EAAW,UAAU9B,EAAcwB,MAEnCO,GAAc/B,EAAcW,MAAMgB,UAAY3B,EAAcgC,QAAUhC,EAAcgC,OAAOC,OAAS,EAE1G,OAEIC,EAACC,MAAAA,CAAIC,IAAKpC,EAAcwB,IAAKC,UAAWJ,EAAyBgB,QAAS7B,KAAKI,uBAC3EsB,EAACC,MAAAA,CAAIV,UAAU,0CACXS,EAACI,EAAAA,CAAaR,SAAUA,EAAUzB,gBAAiBA,EAAiBJ,WAAYA,EAAYsC,gBAAiBV,GACzGK,EAACM,EAAAA,IAEQxC,EAAcW,MAAMgB,UAAY,CAAEc,eAAgBzC,EAAcW,MAAM+B,MAC3EtB,KAAMpB,EAAcoB,KACpBuB,IAAK3C,EAAc4C,OAGvBV,EAACW,EAAAA,CACGC,YAAa9C,EAAc8C,YAC3B7C,WAAYA,EACZ8C,eAAgB/C,EAAc+C,kBAIrCrB,GACGQ,EAACc,SAAAA,CACG5B,KAAK,SACLK,UAAU,qFACVY,QAAS7B,KAAKD,0BACd0C,gBAAezC,KAAKF,MAAMF,2CAC1B8C,gBAAetB,GAEdX,EAAKkC,IAAI,uCAIjBpB,GACGG,EAACkB,EAAAA,CACGpB,OAAQhC,EAAcgC,OACtBqB,iBAAkBC,EAClBC,wBAAyBtD,KAKrCiC,EAACC,MAAAA,CAAIV,UAAU,oCAAoC+B,eAAcvD,GAC7DiC,EAACC,MAAAA,CAAIV,UAAU,0CAA0CgC,GAAI5B,EAAa6B,KAAK,UAC1EhC,GACGQ,EAACyB,EAAAA,CACGF,GAAI7B,EACJgC,KAAMpD,KAAKF,MAAMF,2CACjByD,UAAWrD,KAAKE,6BAChBoD,SAAUtD,KAAKD,4BAIvB2B,EAAC6B,EAAAA,CAAqBC,uBAAwBhE,EAAcc,SAAUZ,SAAUA,MAKpG"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import o from"../../../../utils/getProp.js";import{OrderPaymentMethods as r}from"./OrderPaymentMethods.js";import n from"./InstantPaymentMethods.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{useBrandLogoConfiguration as a}from"./useBrandLogoConfiguration.js";import m from"./PaymentMethodsContainer.js";import{useEffect as d}from"../../../../external/preact/hooks/dist/hooks.js";const i=({paymentMethods:i=[],instantPaymentMethods:p=[],storedPaymentMethods:l=[],openFirstStoredPaymentMethod:y,openFirstPaymentMethod:h,openPaymentMethod:f,order:c,orderStatus:M=null,onOrderCancel:u,onSelect:P=(()=>{}),...g})=>{const{i18n:j}=s(),C=a(i),S=p.length>0,b=l.length>0,x=S||b?j.get("paymentMethodsList.otherPayments.label"):"";return d((()=>{if(f?.type){const e=i.find((e=>e.type===f?.type));if(e)return void P(e);console.warn(`Drop-in: payment method type "${f?.type}" not found`)}const e=l[0],t=i[0];if(e||t){if(y&&!0===o(e,"props.oneClick"))return void P(e);h&&P(t)}}),[l,i,y,h,f]),e(t,null,M&&e(r,{order:c,orderStatus:M,onOrderCancel:u,brandLogoConfiguration:C}),S&&e(n,{paymentMethods:p}),b&&e(m,{...g,label:j.get("paymentMethodsList.storedPayments.label"),classNameModifiers:["storedPayments"],paymentMethods:l,onSelect:P}),!!i.length&&e(m,{...g,label:x,classNameModifiers:["otherPayments"],paymentMethods:i,onSelect:P}))};export{i as default};
+import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import o from"../../../../utils/getProp.js";import{OrderPaymentMethods as r}from"./OrderPaymentMethods.js";import n from"./InstantPaymentMethods.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{useBrandLogoConfiguration as a}from"./useBrandLogoConfiguration.js";import m from"./PaymentMethodsContainer.js";import{useEffect as d}from"../../../../external/preact/hooks/dist/hooks.js";const i=({paymentMethods:i=[],instantPaymentMethods:p=[],storedPaymentMethods:l=[],openFirstStoredPaymentMethod:y,openFirstPaymentMethod:h,openPaymentMethod:f,order:c,orderStatus:M=null,onOrderCancel:u,onSelect:P=()=>{},...g})=>{const{i18n:j}=s(),C=a(i),S=p.length>0,b=l.length>0,x=S||b?j.get("paymentMethodsList.otherPayments.label"):"";return d((()=>{if(f?.type){const e=i.find((e=>e.type===f?.type));if(e)return void P(e);console.warn(`Drop-in: payment method type "${f?.type}" not found`)}const e=l[0],t=i[0];if(e||t){if(y&&!0===o(e,"props.oneClick"))return void P(e);h&&P(t)}}),[l,i,y,h,f]),e(t,null,M&&e(r,{order:c,orderStatus:M,onOrderCancel:u,brandLogoConfiguration:C}),S&&e(n,{paymentMethods:p}),b&&e(m,{...g,label:j.get("paymentMethodsList.storedPayments.label"),classNameModifiers:["storedPayments"],paymentMethods:l,onSelect:P}),!!i.length&&e(m,{...g,label:x,classNameModifiers:["otherPayments"],paymentMethods:i,onSelect:P}))};export{i as default};
 //# sourceMappingURL=PaymentMethodList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodList.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport getProp from '../../../../utils/getProp';\nimport UIElement from '../../../internal/UIElement/UIElement';\nimport { Order, OrderStatus } from '../../../../types/global-types';\nimport OrderPaymentMethods from './OrderPaymentMethods';\nimport InstantPaymentMethods from './InstantPaymentMethods';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { useBrandLogoConfiguration } from './useBrandLogoConfiguration';\nimport PaymentMethodsContainer, { PaymentMethodsContainerProps } from './PaymentMethodsContainer';\nimport { useEffect } from 'preact/hooks';\n\ninterface PaymentMethodListProps extends Omit<PaymentMethodsContainerProps, 'label' | 'classNameModifiers'> {\n    instantPaymentMethods?: UIElement[];\n    storedPaymentMethods?: UIElement[];\n    openFirstStoredPaymentMethod?: boolean;\n    openFirstPaymentMethod?: boolean;\n    openPaymentMethod?: {\n        type: string;\n    };\n    order?: Order;\n    orderStatus?: OrderStatus;\n    onOrderCancel?: (order) => void;\n}\n\nconst PaymentMethodList = ({\n    paymentMethods = [], // Non-stored payments\n    instantPaymentMethods = [],\n    storedPaymentMethods = [],\n    openFirstStoredPaymentMethod,\n    openFirstPaymentMethod,\n    openPaymentMethod,\n    order,\n    orderStatus = null,\n    onOrderCancel,\n    onSelect = () => {},\n    ...rest\n}: PaymentMethodListProps) => {\n    const { i18n } = useCoreContext();\n    const brandLogoConfiguration = useBrandLogoConfiguration(paymentMethods);\n    const hasInstantPaymentMethods = instantPaymentMethods.length > 0;\n    const hasStoredPaymentMethods = storedPaymentMethods.length > 0;\n    const pmListLabel = hasInstantPaymentMethods || hasStoredPaymentMethods ? i18n.get('paymentMethodsList.otherPayments.label') : '';\n\n    useEffect(() => {\n        if (openPaymentMethod?.type) {\n            const paymentMethod = paymentMethods.find(paymentMethod => paymentMethod.type === openPaymentMethod?.type);\n            if (!paymentMethod) {\n                console.warn(`Drop-in: payment method type \"${openPaymentMethod?.type}\" not found`);\n            } else {\n                onSelect(paymentMethod);\n                return;\n            }\n        }\n\n        // Open first PaymentMethodItem\n        const firstStoredPayment = storedPaymentMethods[0];\n        const firstNonStoredPayment = paymentMethods[0];\n\n        if (firstStoredPayment || firstNonStoredPayment) {\n            const shouldOpenFirstStored = openFirstStoredPaymentMethod && getProp(firstStoredPayment, 'props.oneClick') === true;\n            if (shouldOpenFirstStored) {\n                onSelect(firstStoredPayment);\n                return;\n            }\n\n            if (openFirstPaymentMethod) {\n                onSelect(firstNonStoredPayment);\n            }\n        }\n    }, [storedPaymentMethods, paymentMethods, openFirstStoredPaymentMethod, openFirstPaymentMethod, openPaymentMethod]);\n\n    return (\n        <Fragment>\n            {orderStatus && (\n                <OrderPaymentMethods\n                    order={order}\n                    orderStatus={orderStatus}\n                    onOrderCancel={onOrderCancel}\n                    brandLogoConfiguration={brandLogoConfiguration}\n                />\n            )}\n\n            {hasInstantPaymentMethods && <InstantPaymentMethods paymentMethods={instantPaymentMethods} />}\n\n            {hasStoredPaymentMethods && (\n                <PaymentMethodsContainer\n                    {...rest}\n                    label={i18n.get('paymentMethodsList.storedPayments.label')}\n                    classNameModifiers={['storedPayments']}\n                    paymentMethods={storedPaymentMethods}\n                    onSelect={onSelect}\n                ></PaymentMethodsContainer>\n            )}\n\n            {!!paymentMethods.length && (\n                <PaymentMethodsContainer\n                    {...rest}\n                    label={pmListLabel}\n                    classNameModifiers={['otherPayments']}\n                    paymentMethods={paymentMethods}\n                    onSelect={onSelect}\n                ></PaymentMethodsContainer>\n            )}\n        </Fragment>\n    );\n};\n\nexport default PaymentMethodList;\n"],"names":["PaymentMethodList","paymentMethods","instantPaymentMethods","storedPaymentMethods","openFirstStoredPaymentMethod","openFirstPaymentMethod","openPaymentMethod","order","orderStatus","onOrderCancel","onSelect","rest","i18n","useCoreContext","brandLogoConfiguration","useBrandLogoConfiguration","hasInstantPaymentMethods","length","hasStoredPaymentMethods","pmListLabel","get","useEffect","type","paymentMethod","find","console","warn","firstStoredPayment","firstNonStoredPayment","getProp","h","Fragment","OrderPaymentMethods","InstantPaymentMethods","PaymentMethodsContainer","label","classNameModifiers"],"mappings":"2fAwBA,MAAMA,EAAoB,EACtBC,iBAAiB,GACjBC,wBAAwB,GACxBC,uBAAuB,GACvBC,+BACAC,yBACAC,oBACAC,QACAC,cAAc,KACdC,gBACAC,WAAW,YACRC,MAEH,MAAMC,KAAEA,GAASC,IACXC,EAAyBC,EAA0Bd,GACnDe,EAA2Bd,EAAsBe,OAAS,EAC1DC,EAA0Bf,EAAqBc,OAAS,EACxDE,EAAcH,GAA4BE,EAA0BN,EAAKQ,IAAI,0CAA4C,GA8B/H,OA5BAC,GAAU,KACN,GAAIf,GAAmBgB,KAAM,CACzB,MAAMC,EAAgBtB,EAAeuB,MAAKD,GAAiBA,EAAcD,OAAShB,GAAmBgB,OACrG,GAAKC,EAID,YADAb,EAASa,GAFTE,QAAQC,KAAK,iCAAiCpB,GAAmBgB,kBAKzE,CAGA,MAAMK,EAAqBxB,EAAqB,GAC1CyB,EAAwB3B,EAAe,GAE7C,GAAI0B,GAAsBC,EAAuB,CAE7C,GAD8BxB,IAAkF,IAAlDyB,EAAQF,EAAoB,kBAGtF,YADAjB,EAASiB,GAITtB,GACAK,EAASkB,EAEjB,IACD,CAACzB,EAAsBF,EAAgBG,EAA8BC,EAAwBC,IAG5FwB,EAACC,EACIvB,KAAAA,GACGsB,EAACE,EAAAA,CACGzB,MAAOA,EACPC,YAAaA,EACbC,cAAeA,EACfK,uBAAwBA,IAI/BE,GAA4Bc,EAACG,EAAAA,CAAsBhC,eAAgBC,IAEnEgB,GACGY,EAACI,EAAAA,IACOvB,EACJwB,MAAOvB,EAAKQ,IAAI,2CAChBgB,mBAAoB,CAAC,kBACrBnC,eAAgBE,EAChBO,SAAUA,MAIfT,EAAegB,QACda,EAACI,EAAAA,IACOvB,EACJwB,MAAOhB,EACPiB,mBAAoB,CAAC,iBACrBnC,eAAgBA,EAChBS,SAAUA"}
+{"version":3,"file":"PaymentMethodList.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport getProp from '../../../../utils/getProp';\nimport UIElement from '../../../internal/UIElement/UIElement';\nimport { Order, OrderStatus } from '../../../../types/global-types';\nimport OrderPaymentMethods from './OrderPaymentMethods';\nimport InstantPaymentMethods from './InstantPaymentMethods';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { useBrandLogoConfiguration } from './useBrandLogoConfiguration';\nimport PaymentMethodsContainer, { PaymentMethodsContainerProps } from './PaymentMethodsContainer';\nimport { useEffect } from 'preact/hooks';\n\ninterface PaymentMethodListProps extends Omit<PaymentMethodsContainerProps, 'label' | 'classNameModifiers'> {\n    instantPaymentMethods?: UIElement[];\n    storedPaymentMethods?: UIElement[];\n    openFirstStoredPaymentMethod?: boolean;\n    openFirstPaymentMethod?: boolean;\n    openPaymentMethod?: {\n        type: string;\n    };\n    order?: Order;\n    orderStatus?: OrderStatus;\n    onOrderCancel?: (order) => void;\n}\n\nconst PaymentMethodList = ({\n    paymentMethods = [], // Non-stored payments\n    instantPaymentMethods = [],\n    storedPaymentMethods = [],\n    openFirstStoredPaymentMethod,\n    openFirstPaymentMethod,\n    openPaymentMethod,\n    order,\n    orderStatus = null,\n    onOrderCancel,\n    onSelect = () => {},\n    ...rest\n}: PaymentMethodListProps) => {\n    const { i18n } = useCoreContext();\n    const brandLogoConfiguration = useBrandLogoConfiguration(paymentMethods);\n    const hasInstantPaymentMethods = instantPaymentMethods.length > 0;\n    const hasStoredPaymentMethods = storedPaymentMethods.length > 0;\n    const pmListLabel = hasInstantPaymentMethods || hasStoredPaymentMethods ? i18n.get('paymentMethodsList.otherPayments.label') : '';\n\n    useEffect(() => {\n        if (openPaymentMethod?.type) {\n            const paymentMethod = paymentMethods.find(paymentMethod => paymentMethod.type === openPaymentMethod?.type);\n            if (!paymentMethod) {\n                console.warn(`Drop-in: payment method type \"${openPaymentMethod?.type}\" not found`);\n            } else {\n                onSelect(paymentMethod);\n                return;\n            }\n        }\n\n        // Open first PaymentMethodItem\n        const firstStoredPayment = storedPaymentMethods[0];\n        const firstNonStoredPayment = paymentMethods[0];\n\n        if (firstStoredPayment || firstNonStoredPayment) {\n            const shouldOpenFirstStored = openFirstStoredPaymentMethod && getProp(firstStoredPayment, 'props.oneClick') === true;\n            if (shouldOpenFirstStored) {\n                onSelect(firstStoredPayment);\n                return;\n            }\n\n            if (openFirstPaymentMethod) {\n                onSelect(firstNonStoredPayment);\n            }\n        }\n    }, [storedPaymentMethods, paymentMethods, openFirstStoredPaymentMethod, openFirstPaymentMethod, openPaymentMethod]);\n\n    return (\n        <Fragment>\n            {orderStatus && (\n                <OrderPaymentMethods\n                    order={order}\n                    orderStatus={orderStatus}\n                    onOrderCancel={onOrderCancel}\n                    brandLogoConfiguration={brandLogoConfiguration}\n                />\n            )}\n\n            {hasInstantPaymentMethods && <InstantPaymentMethods paymentMethods={instantPaymentMethods} />}\n\n            {hasStoredPaymentMethods && (\n                <PaymentMethodsContainer\n                    {...rest}\n                    label={i18n.get('paymentMethodsList.storedPayments.label')}\n                    classNameModifiers={['storedPayments']}\n                    paymentMethods={storedPaymentMethods}\n                    onSelect={onSelect}\n                ></PaymentMethodsContainer>\n            )}\n\n            {!!paymentMethods.length && (\n                <PaymentMethodsContainer\n                    {...rest}\n                    label={pmListLabel}\n                    classNameModifiers={['otherPayments']}\n                    paymentMethods={paymentMethods}\n                    onSelect={onSelect}\n                ></PaymentMethodsContainer>\n            )}\n        </Fragment>\n    );\n};\n\nexport default PaymentMethodList;\n"],"names":["PaymentMethodList","paymentMethods","instantPaymentMethods","storedPaymentMethods","openFirstStoredPaymentMethod","openFirstPaymentMethod","openPaymentMethod","order","orderStatus","onOrderCancel","onSelect","rest","i18n","useCoreContext","brandLogoConfiguration","useBrandLogoConfiguration","hasInstantPaymentMethods","length","hasStoredPaymentMethods","pmListLabel","get","useEffect","type","paymentMethod","find","console","warn","firstStoredPayment","firstNonStoredPayment","getProp","h","Fragment","OrderPaymentMethods","InstantPaymentMethods","PaymentMethodsContainer","label","classNameModifiers"],"mappings":"2fAwBA,MAAMA,EAAoB,EACtBC,iBAAiB,GACjBC,wBAAwB,GACxBC,uBAAuB,GACvBC,+BACAC,yBACAC,oBACAC,QACAC,cAAc,KACdC,gBACAC,WAAW,UACRC,MAEH,MAAMC,KAAEA,GAASC,IACXC,EAAyBC,EAA0Bd,GACnDe,EAA2Bd,EAAsBe,OAAS,EAC1DC,EAA0Bf,EAAqBc,OAAS,EACxDE,EAAcH,GAA4BE,EAA0BN,EAAKQ,IAAI,0CAA4C,GA8B/H,OA5BAC,GAAU,KACN,GAAIf,GAAmBgB,KAAM,CACzB,MAAMC,EAAgBtB,EAAeuB,MAAKD,GAAiBA,EAAcD,OAAShB,GAAmBgB,OACrG,GAAKC,EAID,YADAb,EAASa,GAFTE,QAAQC,KAAK,iCAAiCpB,GAAmBgB,kBAKzE,CAGA,MAAMK,EAAqBxB,EAAqB,GAC1CyB,EAAwB3B,EAAe,GAE7C,GAAI0B,GAAsBC,EAAuB,CAE7C,GAD8BxB,IAAkF,IAAlDyB,EAAQF,EAAoB,kBAGtF,YADAjB,EAASiB,GAITtB,GACAK,EAASkB,EAEjB,IACD,CAACzB,EAAsBF,EAAgBG,EAA8BC,EAAwBC,IAG5FwB,EAACC,EACIvB,KAAAA,GACGsB,EAACE,EAAAA,CACGzB,MAAOA,EACPC,YAAaA,EACbC,cAAeA,EACfK,uBAAwBA,IAI/BE,GAA4Bc,EAACG,EAAAA,CAAsBhC,eAAgBC,IAEnEgB,GACGY,EAACI,EAAAA,IACOvB,EACJwB,MAAOvB,EAAKQ,IAAI,2CAChBgB,mBAAoB,CAAC,kBACrBnC,eAAgBE,EAChBO,SAAUA,MAIfT,EAAegB,QACda,EAACI,EAAAA,IACOvB,EACJwB,MAAOhB,EACPiB,mBAAoB,CAAC,iBACrBnC,eAAgBA,EAChBS,SAAUA"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodItem/PaymentMethodItem.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";import{useMemo as a}from"../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../utils/uuid.js";import s from"../../../../external/classnames/index.js";function d({label:d,classNameModifiers:i=[],paymentMethods:m=[],activePaymentMethod:l=null,cachedPaymentMethods:r={},isLoading:c=!1,isDisablingPaymentMethod:h=!1,showRemovePaymentMethodButton:y,onDisableStoredPaymentMethod:p=(()=>{}),onSelect:u,showRadioButton:M}){const{i18n:_}=o(),P=a((()=>`select-${n()}`),[]),b=s(["adyen-checkout__payment-methods-list",{"adyen-checkout__payment-methods-list--loading":c},...i.map((e=>`adyen-checkout__payment-methods-list--${e}`))]);return e("div",{className:"adyen-checkout-payment-methods-container"},!!d.length&&e("label",{htmlFor:P,className:"adyen-checkout-payment-methods-list-label"},d),e("ul",{id:P,className:b,role:"radiogroup","aria-label":_.get("paymentMethodsList.aria.label"),required:!0},m.map(((o,a,n)=>{const d=l&&l._id===o._id,i=o._id in r,_=l&&n[a+1]&&l._id===n[a+1]._id;return e(t,{className:s({"adyen-checkout__payment-method--next-selected":_}),standalone:1===m.length,paymentMethod:o,isSelected:d,isDisablingPaymentMethod:d&&h,isLoaded:i,isLoading:c,onSelect:u,key:o._id,showRemovePaymentMethodButton:y,showRadioButton:M,onDisableStoredPaymentMethod:p})}))))}export{d as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodItem/PaymentMethodItem.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";import{useMemo as a}from"../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../utils/uuid.js";import s from"../../../../external/classnames/index.js";function d({label:d,classNameModifiers:i=[],paymentMethods:m=[],activePaymentMethod:l=null,cachedPaymentMethods:r={},isLoading:c=!1,isDisablingPaymentMethod:h=!1,showRemovePaymentMethodButton:y,onDisableStoredPaymentMethod:p=()=>{},onSelect:u,showRadioButton:M}){const{i18n:_}=o(),P=a((()=>`select-${n()}`),[]),b=s(["adyen-checkout__payment-methods-list",{"adyen-checkout__payment-methods-list--loading":c},...i.map((e=>`adyen-checkout__payment-methods-list--${e}`))]);return e("div",{className:"adyen-checkout-payment-methods-container"},!!d.length&&e("label",{htmlFor:P,className:"adyen-checkout-payment-methods-list-label"},d),e("div",{id:P,className:b,role:"radiogroup","aria-label":_.get("paymentMethodsList.aria.label"),required:!0},m.map(((o,a,n)=>{const d=l&&l._id===o._id,i=o._id in r,_=l&&n[a+1]&&l._id===n[a+1]._id;return e(t,{className:s({"adyen-checkout__payment-method--next-selected":_}),standalone:1===m.length,paymentMethod:o,isSelected:d,isDisablingPaymentMethod:d&&h,isLoaded:i,isLoading:c,onSelect:u,key:o._id,showRemovePaymentMethodButton:y,showRadioButton:M,onDisableStoredPaymentMethod:p})}))))}export{d as default};
 //# sourceMappingURL=PaymentMethodsContainer.js.map