@adyen/adyen-web 6.0.0-alpha.3 → 6.0.0-alpha.5

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

@@ -1 +1 @@
-{"version":3,"file":"Specifications.js","sources":["../../../../../src/components/internal/Address/Specifications.ts"],"sourcesContent":["import { AddressSchema, AddressSpecifications, StringObject } from './types';\nimport { ADDRESS_SPECIFICATIONS } from './constants';\nimport { AddressField } from '../../../types/global-types';\n\nconst SCHEMA_MAX_DEPTH = 2;\n\nclass Specifications {\n    private specifications: AddressSpecifications;\n\n    constructor(specifications?) {\n        this.specifications = { ...ADDRESS_SPECIFICATIONS, ...specifications };\n    }\n\n    /**\n     * Checks if a certain country has a dataset.\n     * @param country - The selected country\n     * @returns Boolean\n     */\n    countryHasDataset(country: string): boolean {\n        return !!this.specifications?.[country]?.hasDataset;\n    }\n\n    /**\n     * Checks if a certain country has the passed field in their optional fields array.\n     * @param country - The selected country\n     * @param fieldName - The field to be checked\n     * @returns Boolean\n     */\n    countryHasOptionalField(country: string, fieldName: string): boolean {\n        return !!this.specifications?.[country]?.optionalFields?.includes(fieldName as any);\n    }\n\n    /**\n     * Returns the address schema of the selected country or the default address schema.\n     * @param country - The selected country\n     * @returns AddressSchema\n     */\n    getAddressSchemaForCountry(country: string): AddressSchema {\n        return this.specifications?.[country]?.schema || this.specifications.default.schema;\n    }\n\n    /**\n     * Returns the address labels of the selected country or the default address labels.\n     * @param country - The selected country\n     * @returns StringObject\n     */\n    getAddressLabelsForCountry(country: string): StringObject {\n        return this.specifications?.[country]?.labels || this.specifications.default.labels;\n    }\n\n    /**\n     * Returns the optional fields of the selected country or the default optional fields.\n     * @param country - The selected country\n     * @returns Optional fields array\n     */\n    getOptionalFieldsForCountry(country: string): string[] {\n        return this.specifications?.[country]?.optionalFields || this.specifications.default?.optionalFields || [];\n    }\n\n    /**\n     * Returns the key for a field of the passed country or the default key for that field.\n     * @param fieldName - The field to be searched\n     * @param country - The selected country\n     */\n    getKeyForField(fieldName: string, country: string): string {\n        return this.specifications?.[country]?.labels?.[fieldName] || this.specifications?.default?.labels?.[fieldName] || fieldName;\n    }\n\n    /**\n     * Returns the placeholder key for a field of the passed country or the default key for that field.\n     * @param fieldName - The field to be searched\n     * @param country - The selected country\n     */\n    getPlaceholderKeyForField(fieldName: string, country: string): string {\n        return this.specifications?.[country]?.placeholders?.[fieldName] || this.specifications?.default?.placeholders?.[fieldName];\n    }\n\n    /**\n     * Returns an array with the address schema of the selected country or the default address schema\n     * Flat version of getAddressSchemaForCountry\n     * @param country - The selected country\n     * @param mode - Address schema mode, can be 'full', 'partial' or 'none'\n     * @returns Array\n     */\n    getAddressSchemaForCountryFlat(country: string): AddressField[] {\n        return this.getAddressSchemaForCountry(country)\n            .flat(SCHEMA_MAX_DEPTH)\n            .filter((element): element is AddressField => typeof element === 'string');\n    }\n}\n\nexport default Specifications;\n"],"names":["Specifications","specifications","constructor","this","ADDRESS_SPECIFICATIONS","countryHasDataset","country","hasDataset","countryHasOptionalField","fieldName","optionalFields","includes","getAddressSchemaForCountry","schema","default","getAddressLabelsForCountry","labels","getOptionalFieldsForCountry","getKeyForField","getPlaceholderKeyForField","placeholders","getAddressSchemaForCountryFlat","flat","filter","element"],"mappings":"wDAMA,MAAMA,EACMC,eAERC,WAAAA,CAAYD,GACRE,KAAKF,eAAiB,IAAKG,KAA2BH,EAC1D,CAOAI,iBAAAA,CAAkBC,GACd,QAASH,KAAKF,iBAAiBK,IAAUC,UAC7C,CAQAC,uBAAAA,CAAwBF,EAAiBG,GACrC,QAASN,KAAKF,iBAAiBK,IAAUI,gBAAgBC,SAASF,EACtE,CAOAG,0BAAAA,CAA2BN,GACvB,OAAOH,KAAKF,iBAAiBK,IAAUO,QAAUV,KAAKF,eAAea,QAAQD,MACjF,CAOAE,0BAAAA,CAA2BT,GACvB,OAAOH,KAAKF,iBAAiBK,IAAUU,QAAUb,KAAKF,eAAea,QAAQE,MACjF,CAOAC,2BAAAA,CAA4BX,GACxB,OAAOH,KAAKF,iBAAiBK,IAAUI,gBAAkBP,KAAKF,eAAea,SAASJ,gBAAkB,EAC5G,CAOAQ,cAAAA,CAAeT,EAAmBH,GAC9B,OAAOH,KAAKF,iBAAiBK,IAAUU,SAASP,IAAcN,KAAKF,gBAAgBa,SAASE,SAASP,IAAcA,CACvH,CAOAU,yBAAAA,CAA0BV,EAAmBH,GACzC,OAAOH,KAAKF,iBAAiBK,IAAUc,eAAeX,IAAcN,KAAKF,gBAAgBa,SAASM,eAAeX,EACrH,CASAY,8BAAAA,CAA+Bf,GAC3B,OAAOH,KAAKS,2BAA2BN,GAClCgB,KAlFY,GAmFZC,QAAQC,GAAwD,iBAAZA,GAC7D"}
+{"version":3,"file":"Specifications.js","sources":["../../../../../src/components/internal/Address/Specifications.ts"],"sourcesContent":["import { AddressSchema, AddressSpecifications, StringObject } from './types';\nimport { ADDRESS_SPECIFICATIONS } from './constants';\nimport { AddressField } from '../../../types/global-types';\n\nconst SCHEMA_MAX_DEPTH = 2;\n\nclass Specifications {\n    private specifications: AddressSpecifications;\n\n    constructor(specifications?) {\n        this.specifications = { ...ADDRESS_SPECIFICATIONS, ...specifications };\n    }\n\n    /**\n     * Checks if a certain country has a dataset.\n     * @param country - The selected country\n     * @returns Boolean\n     */\n    countryHasDataset(country: string): boolean {\n        return !!this.specifications?.[country]?.hasDataset;\n    }\n\n    /**\n     * Checks if a certain country has the passed field in their optional fields array.\n     * @param country - The selected country\n     * @param fieldName - The field to be checked\n     * @returns Boolean\n     */\n    countryHasOptionalField(country: string, fieldName: string): boolean {\n        return !!this.specifications?.[country]?.optionalFields?.includes(fieldName as any);\n    }\n\n    /**\n     * Returns the address schema of the selected country or the default address schema.\n     * @param country - The selected country\n     * @returns AddressSchema\n     */\n    getAddressSchemaForCountry(country: string): AddressSchema {\n        return this.specifications?.[country]?.schema || this.specifications.default.schema;\n    }\n\n    /**\n     * Returns the address labels of the selected country or the default address labels.\n     * @param country - The selected country\n     * @returns StringObject\n     */\n    getAddressLabelsForCountry(country: string): StringObject {\n        return this.specifications?.[country]?.labels || this.specifications.default.labels;\n    }\n\n    /**\n     * Returns the optional fields of the selected country or the default optional fields.\n     * @param country - The selected country\n     * @returns Optional fields array\n     */\n    getOptionalFieldsForCountry(country: string): string[] {\n        return this.specifications?.[country]?.optionalFields || this.specifications.default?.optionalFields || [];\n    }\n\n    /**\n     * Returns the key for a field of the passed country or the default key for that field.\n     * @param fieldName - The field to be searched\n     * @param country - The selected country\n     */\n    getKeyForField(fieldName: string, country: string): string {\n        return this.specifications?.[country]?.labels?.[fieldName] || this.specifications?.default?.labels?.[fieldName] || fieldName;\n    }\n\n    /**\n     * Returns the placeholder key for a field of the passed country or the default key for that field.\n     * @param fieldName - The field to be searched\n     * @param country - The selected country\n     */\n    getPlaceholderKeyForField(fieldName: string, country: string): string {\n        return this.specifications?.[country]?.placeholders?.[fieldName] || this.specifications?.default?.placeholders?.[fieldName];\n    }\n\n    /**\n     * Returns an array with the address schema of the selected country or the default address schema\n     * Flat version of getAddressSchemaForCountry\n     * @param country - The selected country\n     * @returns Array\n     */\n    getAddressSchemaForCountryFlat(country: string): AddressField[] {\n        return this.getAddressSchemaForCountry(country)\n            .flat(SCHEMA_MAX_DEPTH)\n            .filter((element): element is AddressField => typeof element === 'string');\n    }\n}\n\nexport default Specifications;\n"],"names":["Specifications","specifications","constructor","this","ADDRESS_SPECIFICATIONS","countryHasDataset","country","hasDataset","countryHasOptionalField","fieldName","optionalFields","includes","getAddressSchemaForCountry","schema","default","getAddressLabelsForCountry","labels","getOptionalFieldsForCountry","getKeyForField","getPlaceholderKeyForField","placeholders","getAddressSchemaForCountryFlat","flat","filter","element"],"mappings":"wDAMA,MAAMA,EACMC,eAERC,WAAAA,CAAYD,GACRE,KAAKF,eAAiB,IAAKG,KAA2BH,EAC1D,CAOAI,iBAAAA,CAAkBC,GACd,QAASH,KAAKF,iBAAiBK,IAAUC,UAC7C,CAQAC,uBAAAA,CAAwBF,EAAiBG,GACrC,QAASN,KAAKF,iBAAiBK,IAAUI,gBAAgBC,SAASF,EACtE,CAOAG,0BAAAA,CAA2BN,GACvB,OAAOH,KAAKF,iBAAiBK,IAAUO,QAAUV,KAAKF,eAAea,QAAQD,MACjF,CAOAE,0BAAAA,CAA2BT,GACvB,OAAOH,KAAKF,iBAAiBK,IAAUU,QAAUb,KAAKF,eAAea,QAAQE,MACjF,CAOAC,2BAAAA,CAA4BX,GACxB,OAAOH,KAAKF,iBAAiBK,IAAUI,gBAAkBP,KAAKF,eAAea,SAASJ,gBAAkB,EAC5G,CAOAQ,cAAAA,CAAeT,EAAmBH,GAC9B,OAAOH,KAAKF,iBAAiBK,IAAUU,SAASP,IAAcN,KAAKF,gBAAgBa,SAASE,SAASP,IAAcA,CACvH,CAOAU,yBAAAA,CAA0BV,EAAmBH,GACzC,OAAOH,KAAKF,iBAAiBK,IAAUc,eAAeX,IAAcN,KAAKF,gBAAgBa,SAASM,eAAeX,EACrH,CAQAY,8BAAAA,CAA+Bf,GAC3B,OAAOH,KAAKS,2BAA2BN,GAClCgB,KAjFY,GAkFZC,QAAQC,GAAwD,iBAAZA,GAC7D"}

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

@@ -1,2 +1,2 @@
-import e from"../../FormFields/Field/Field.js";import{createElement as s}from"../../../../external/preact/dist/preact.js";import{useState as a,useCallback as t,useEffect as r,useMemo as o}from"../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../core/Context/useCoreContext.js";import{debounce as d}from"../../../../utils/debounce.js";import c from"../../FormFields/Select/Select.js";function l({onAddressLookup:l,onAddressSelected:u,onSelect:i,onManualAddress:m,externalErrorMessage:h,hideManualButton:_,showContextualElement:p,contextualText:f,placeholder:k,addressSearchDebounceMs:x}){const[y,b]=a([]),[g,M]=a([]),[C,j]=a(""),{i18n:v}=n(),F=t((e=>{e?.errorMessage&&j(e.errorMessage)}),[]),S=t((async e=>{new Promise(((s,a)=>{l(e,{resolve:s,reject:a})})).then((e=>{M(e),b(e.map((({id:e,name:s})=>({id:e,name:s})))),j("")})).catch((e=>F(e)))}),[l]);r((()=>{j(h)}),[h]);const w=o((()=>d(S,x)),[]);return s("div",{className:"adyen-checkout__address-search adyen-checkout__field-group"},s(e,{label:v.get("address"),classNameModifiers:["address-search"],errorMessage:C,name:"address-search",showContextualElement:p,contextualText:f},s(c,{name:"address-search",className:"adyen-checkout__address-search__dropdown",placeholder:k,onInput:w,items:y,onChange:async e=>{if(!e.target.value)return void j(v.get("address.errors.incomplete"));const s=g.find((s=>s.id===e.target.value));if("function"!=typeof u)return i(s),void b([]);new Promise(((e,a)=>{u(s,{resolve:e,reject:a})})).then((e=>{i(e),b([])})).catch((e=>F(e)))},disableTextFilter:!0,blurOnClose:!0})),!_&&s("span",{className:"adyen-checkout__address-search__manual-add"},s("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button",onClick:m},"+ "+v.get("address.enterManually"))))}export{l as default};
+import e from"../../FormFields/Field/Field.js";import{createElement as s}from"../../../../external/preact/dist/preact.js";import{useState as a,useCallback as t,useEffect as r,useMemo as o}from"../../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as n}from"../../../../core/Context/CoreProvider.js";import{debounce as d}from"../../../../utils/debounce.js";import c from"../../FormFields/Select/Select.js";function l({onAddressLookup:l,onAddressSelected:u,onSelect:i,onManualAddress:m,externalErrorMessage:h,hideManualButton:_,showContextualElement:p,contextualText:f,placeholder:k,addressSearchDebounceMs:y}){const[b,x]=a([]),[g,M]=a([]),[j,v]=a(""),{i18n:C}=n(),F=t((e=>{e?.errorMessage&&v(e.errorMessage)}),[]),S=t((async e=>{new Promise(((s,a)=>{l(e,{resolve:s,reject:a})})).then((e=>{M(e),x(e.map((({id:e,name:s})=>({id:e,name:s})))),v("")})).catch((e=>F(e)))}),[l]);r((()=>{v(h)}),[h]);const w=o((()=>d(S,y)),[]);return s("div",{className:"adyen-checkout__address-search adyen-checkout__field-group"},s(e,{label:C.get("address"),classNameModifiers:["address-search"],errorMessage:j,name:"address-search",showContextualElement:p,contextualText:f},s(c,{name:"address-search",className:"adyen-checkout__address-search__dropdown",placeholder:k,onInput:w,items:b,onChange:async e=>{if(!e.target.value)return void v(C.get("address.errors.incomplete"));const s=g.find((s=>s.id===e.target.value));if("function"!=typeof u)return i(s),void x([]);new Promise(((e,a)=>{u(s,{resolve:e,reject:a})})).then((e=>{i(e),x([])})).catch((e=>F(e)))},disableTextFilter:!0,blurOnClose:!0})),!_&&s("span",{className:"adyen-checkout__address-search__manual-add"},s("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button",onClick:m},"+ "+C.get("address.enterManually"))))}export{l as default};
 //# sourceMappingURL=AddressSearch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport useCoreContext from '../../../../core/Context/useCoreContext';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n    value: string,\n    actions: {\n        resolve: (value: Array<AddressLookupItem>) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n    value: string,\n    actions: {\n        resolve: (value: AddressLookupItem) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n    onAddressLookup?: OnAddressLookupType;\n    onAddressSelected?: OnAddressSelectedType;\n    onSelect: (addressItem: AddressData) => void;\n    onManualAddress: any;\n    externalErrorMessage: string;\n    hideManualButton: boolean;\n    showContextualElement?: boolean;\n    contextualText?: string;\n    placeholder?: string;\n    addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n    errorMessage: string;\n}\n\nexport default function AddressSearch({\n    onAddressLookup,\n    onAddressSelected,\n    onSelect,\n    onManualAddress,\n    externalErrorMessage,\n    hideManualButton,\n    showContextualElement,\n    contextualText,\n    placeholder,\n    addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n    const [formattedData, setFormattedData] = useState([]);\n    const [originalData, setOriginalData] = useState([]);\n\n    const [errorMessage, setErrorMessage] = useState('');\n\n    const { i18n } = useCoreContext();\n    const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n    const handlePromiseReject = useCallback((reason: RejectionReason) => {\n        if (reason?.errorMessage) {\n            setErrorMessage(reason.errorMessage);\n        }\n    }, []);\n\n    const onTextInput = useCallback(\n        async (inputValue: string) => {\n            new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n                onAddressLookup(inputValue, { resolve, reject });\n            })\n                .then(searchArray => {\n                    setOriginalData(searchArray);\n                    setFormattedData(mapDataToSelect(searchArray));\n                    setErrorMessage('');\n                })\n                .catch(reason => handlePromiseReject(reason));\n        },\n        [onAddressLookup]\n    );\n\n    // update error message when there's a new one\n    useEffect(() => {\n        setErrorMessage(externalErrorMessage);\n    }, [externalErrorMessage]);\n\n    const onSelectItem = async event => {\n        if (!event.target.value) {\n            setErrorMessage(i18n.get('address.errors.incomplete'));\n            return;\n        }\n        const value = originalData.find(item => item.id === event.target.value);\n\n        // 1. in case we don't get a function just select item\n        if (typeof onAddressSelected !== 'function') {\n            onSelect(value);\n            setFormattedData([]);\n            return;\n        }\n\n        // 2. in case callback is provided, create and call onAddressSelected\n        new Promise<AddressLookupItem>((resolve, reject) => {\n            onAddressSelected(value, { resolve, reject });\n        })\n            .then(fullData => {\n                onSelect(fullData);\n                setFormattedData([]);\n            })\n            .catch(reason => handlePromiseReject(reason));\n    };\n\n    const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n    return (\n        <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n            <Field\n                label={i18n.get('address')}\n                classNameModifiers={['address-search']}\n                errorMessage={errorMessage}\n                name={'address-search'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    name={'address-search'}\n                    className={'adyen-checkout__address-search__dropdown'}\n                    placeholder={placeholder}\n                    onInput={debounceInputHandler}\n                    items={formattedData}\n                    onChange={onSelectItem}\n                    disableTextFilter={true}\n                    blurOnClose={true}\n                />\n            </Field>\n            {!hideManualButton && (\n                <span className=\"adyen-checkout__address-search__manual-add\">\n                    <button\n                        type=\"button\"\n                        className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n                        onClick={onManualAddress}\n                    >\n                        {'+ ' + i18n.get('address.enterManually')}\n                    </button>\n                </span>\n            )}\n        </div>\n    );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","async","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"sZA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,EAAS,KAC5CC,EAAcC,GAAmBF,EAAS,KAE1CG,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,GAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,aAC3B,GACD,IAEGO,EAAcF,GAChBG,MAAOC,IACH,IAAIC,SAAkC,CAACC,EAASC,KAC5C3B,EAAgBwB,EAAY,CAAEE,UAASC,UAAO,IAE7CC,MAAKC,IACFf,EAAgBe,GAChBlB,EAAiCkB,EAfZC,KAAI,EAAGC,KAAIC,WAAY,CAAED,KAAIC,YAgBlDhB,EAAgB,GAAA,IAEnBiB,OAAMZ,GAAUF,EAAoBE,IAAAA,GAE7C,CAACrB,IAILkC,GAAU,KACNlB,EAAgBZ,EAAAA,GACjB,CAACA,IAEJ,MAyBM+B,EAAuBC,GAAQ,IAAMC,EAASf,EAAab,IAA0B,IAE3F,OACI6B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOzB,EAAK0B,IAAI,WAChBC,mBAAoB,CAAC,kBACrB7B,aAAcA,EACdiB,KAAM,iBACN1B,sBAAuBA,EACvBC,eAAgBA,GAEhB+B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACXhC,YAAaA,EACbsC,QAASX,EACTY,MAAOrC,EACPsC,SA3CKzB,MAAM0B,IACvB,IAAKA,EAAMC,OAAOC,MAEd,YADAnC,EAAgBC,EAAK0B,IAAI,8BAG7B,MAAMQ,EAAQtC,EAAauC,MAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,QAGjE,GAAiC,mBAAtBlD,EAGP,OAFAC,EAASiD,QACTxC,EAAiB,IAKrB,IAAIc,SAA2B,CAACC,EAASC,KACrC1B,EAAkBkD,EAAO,CAAEzB,UAASC,UAAO,IAE1CC,MAAK0B,IACFpD,EAASoD,GACT3C,EAAiB,GAAE,IAEtBsB,OAAMZ,GAAUF,EAAoBE,IAAAA,EAsB7BkC,mBAAmB,EACnBC,aAAa,MAGnBnD,GACEiC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASzD,GAER,KAAOc,EAAK0B,IAAI,2BAMzC"}
+{"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n    value: string,\n    actions: {\n        resolve: (value: Array<AddressLookupItem>) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n    value: string,\n    actions: {\n        resolve: (value: AddressLookupItem) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n    onAddressLookup?: OnAddressLookupType;\n    onAddressSelected?: OnAddressSelectedType;\n    onSelect: (addressItem: AddressData) => void;\n    onManualAddress: any;\n    externalErrorMessage: string;\n    hideManualButton: boolean;\n    showContextualElement?: boolean;\n    contextualText?: string;\n    placeholder?: string;\n    addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n    errorMessage: string;\n}\n\nexport default function AddressSearch({\n    onAddressLookup,\n    onAddressSelected,\n    onSelect,\n    onManualAddress,\n    externalErrorMessage,\n    hideManualButton,\n    showContextualElement,\n    contextualText,\n    placeholder,\n    addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n    const [formattedData, setFormattedData] = useState([]);\n    const [originalData, setOriginalData] = useState([]);\n\n    const [errorMessage, setErrorMessage] = useState('');\n\n    const { i18n } = useCoreContext();\n    const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n    const handlePromiseReject = useCallback((reason: RejectionReason) => {\n        if (reason?.errorMessage) {\n            setErrorMessage(reason.errorMessage);\n        }\n    }, []);\n\n    const onTextInput = useCallback(\n        async (inputValue: string) => {\n            new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n                onAddressLookup(inputValue, { resolve, reject });\n            })\n                .then(searchArray => {\n                    setOriginalData(searchArray);\n                    setFormattedData(mapDataToSelect(searchArray));\n                    setErrorMessage('');\n                })\n                .catch(reason => handlePromiseReject(reason));\n        },\n        [onAddressLookup]\n    );\n\n    // update error message when there's a new one\n    useEffect(() => {\n        setErrorMessage(externalErrorMessage);\n    }, [externalErrorMessage]);\n\n    const onSelectItem = async event => {\n        if (!event.target.value) {\n            setErrorMessage(i18n.get('address.errors.incomplete'));\n            return;\n        }\n        const value = originalData.find(item => item.id === event.target.value);\n\n        // 1. in case we don't get a function just select item\n        if (typeof onAddressSelected !== 'function') {\n            onSelect(value);\n            setFormattedData([]);\n            return;\n        }\n\n        // 2. in case callback is provided, create and call onAddressSelected\n        new Promise<AddressLookupItem>((resolve, reject) => {\n            onAddressSelected(value, { resolve, reject });\n        })\n            .then(fullData => {\n                onSelect(fullData);\n                setFormattedData([]);\n            })\n            .catch(reason => handlePromiseReject(reason));\n    };\n\n    const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n    return (\n        <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n            <Field\n                label={i18n.get('address')}\n                classNameModifiers={['address-search']}\n                errorMessage={errorMessage}\n                name={'address-search'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    name={'address-search'}\n                    className={'adyen-checkout__address-search__dropdown'}\n                    placeholder={placeholder}\n                    onInput={debounceInputHandler}\n                    items={formattedData}\n                    onChange={onSelectItem}\n                    disableTextFilter={true}\n                    blurOnClose={true}\n                />\n            </Field>\n            {!hideManualButton && (\n                <span className=\"adyen-checkout__address-search__manual-add\">\n                    <button\n                        type=\"button\"\n                        className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n                        onClick={onManualAddress}\n                    >\n                        {'+ ' + i18n.get('address.enterManually')}\n                    </button>\n                </span>\n            )}\n        </div>\n    );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","async","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"saA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,EAAS,KAC5CC,EAAcC,GAAmBF,EAAS,KAE1CG,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,GAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,aAC3B,GACD,IAEGO,EAAcF,GAChBG,MAAOC,IACH,IAAIC,SAAkC,CAACC,EAASC,KAC5C3B,EAAgBwB,EAAY,CAAEE,UAASC,UAAO,IAE7CC,MAAKC,IACFf,EAAgBe,GAChBlB,EAAiCkB,EAfZC,KAAI,EAAGC,KAAIC,WAAY,CAAED,KAAIC,YAgBlDhB,EAAgB,GAAA,IAEnBiB,OAAMZ,GAAUF,EAAoBE,IAAAA,GAE7C,CAACrB,IAILkC,GAAU,KACNlB,EAAgBZ,EAAAA,GACjB,CAACA,IAEJ,MAyBM+B,EAAuBC,GAAQ,IAAMC,EAASf,EAAab,IAA0B,IAE3F,OACI6B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOzB,EAAK0B,IAAI,WAChBC,mBAAoB,CAAC,kBACrB7B,aAAcA,EACdiB,KAAM,iBACN1B,sBAAuBA,EACvBC,eAAgBA,GAEhB+B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACXhC,YAAaA,EACbsC,QAASX,EACTY,MAAOrC,EACPsC,SA3CKzB,MAAM0B,IACvB,IAAKA,EAAMC,OAAOC,MAEd,YADAnC,EAAgBC,EAAK0B,IAAI,8BAG7B,MAAMQ,EAAQtC,EAAauC,MAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,QAGjE,GAAiC,mBAAtBlD,EAGP,OAFAC,EAASiD,QACTxC,EAAiB,IAKrB,IAAIc,SAA2B,CAACC,EAASC,KACrC1B,EAAkBkD,EAAO,CAAEzB,UAASC,UAAO,IAE1CC,MAAK0B,IACFpD,EAASoD,GACT3C,EAAiB,GAAE,IAEtBsB,OAAMZ,GAAUF,EAAoBE,IAAAA,EAsB7BkC,mBAAmB,EACnBC,aAAa,MAGnBnD,GACEiC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASzD,GAER,KAAOc,EAAK0B,IAAI,2BAMzC"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as t,useLayoutEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../FormFields/Field/Field.js";import s from"../../../../core/Context/useCoreContext.js";import a from"../../../../core/Services/get-dataset.js";import n from"../../FormFields/Select/Select.js";import{getFlagEmoji as l}from"../../../../utils/getFlagEmoji.js";function i(i){const{allowedCountries:c=[],classNameModifiers:m=[],errorMessage:d,onDropdownChange:u,value:p}=i,{i18n:f,loadingContext:g}=s(),[h,j]=t([]),[y,C]=t(!1),[F,x]=t(i.readOnly);return o((()=>{a("countries",g,f.locale).then((e=>{const t=((e,t)=>{const o=e=>{const t=l(e.id);return{...e,name:`${t} ${e.name}`,selectedOptionName:`${t} ${e.name}`}};return t.length?e.filter((e=>t.includes(e.id))).map(o):e.map(o)})(e,c);j(t||[]),x(1===t.length||F),C(!0)})).catch((e=>{console.error(e),j([]),C(!0)}))}),[]),y?e(r,{name:"country",label:f.get("country"),errorMessage:d,classNameModifiers:m,isValid:!!p,showValidIcon:!1,i18n:f,readOnly:F&&!!p},e(n,{onChange:u,name:"country",selectedValue:p,items:h,readonly:F&&!!p})):null}export{i as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as o,useLayoutEffect as r}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import s from"../../../../core/Services/get-dataset.js";import n from"../../FormFields/Select/Select.js";function l(l){const{allowedCountries:i=[],classNameModifiers:c=[],errorMessage:m,onDropdownChange:d,value:u}=l,{i18n:p,loadingContext:f}=a(),[g,h]=o([]),[y,j]=o(!1),[C,F]=o(l.readOnly);return r((()=>{s("countries",f,p.locale).then((e=>{const o=((e,o)=>{const r=e=>({...e,name:e.name,selectedOptionName:e.name});return o.length?e.filter((e=>o.includes(e.id))).map(r):e.map(r)})(e,i);h(o||[]),F(1===o.length||C),j(!0)})).catch((e=>{console.error(e),h([]),j(!0)}))}),[]),y?e(t,{name:"country",label:p.get("country"),errorMessage:m,classNameModifiers:c,isValid:!!u,showValidIcon:!1,i18n:p,readOnly:C&&!!u},e(n,{onChange:d,name:"country",selectedValue:u,items:g,readonly:C&&!!u})):null}export{l as default};
 //# sourceMappingURL=CountryField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CountryField.js","sources":["../../../../../../src/components/internal/Address/components/CountryField.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useLayoutEffect, useState } from 'preact/hooks';\nimport Field from '../../FormFields/Field';\nimport useCoreContext from '../../../../core/Context/useCoreContext';\nimport getDataset from '../../../../core/Services/get-dataset';\nimport { CountryFieldProps, CountryFieldItem } from '../types';\nimport Select from '../../FormFields/Select';\nimport { getFlagEmoji } from '../../../../utils/getFlagEmoji';\n\nconst formatCountries = (countries: Array<CountryFieldItem>, allowedCountries: string[]) => {\n    const applyFilter = (country: CountryFieldItem) => allowedCountries.includes(country.id);\n    const applyMapper = (country: CountryFieldItem) => {\n        const flag = getFlagEmoji(country.id);\n        return {\n            ...country,\n            name: `${flag} ${country.name}`,\n            selectedOptionName: `${flag} ${country.name}`\n        };\n    };\n    return allowedCountries.length ? countries.filter(applyFilter).map(applyMapper) : countries.map(applyMapper);\n};\n\nexport default function CountryField(props: CountryFieldProps) {\n    const { allowedCountries = [], classNameModifiers = [], errorMessage, onDropdownChange, value } = props;\n    const { i18n, loadingContext } = useCoreContext();\n    const [countries, setCountries] = useState<CountryFieldItem[]>([]);\n    const [loaded, setLoaded] = useState<boolean>(false);\n    const [readOnly, setReadOnly] = useState(props.readOnly);\n\n    useLayoutEffect(() => {\n        getDataset('countries', loadingContext, i18n.locale)\n            .then(response => {\n                const newCountries = formatCountries(response, allowedCountries);\n                setCountries(newCountries || []);\n                setReadOnly(newCountries.length === 1 || readOnly);\n                setLoaded(true);\n            })\n            .catch(error => {\n                console.error(error);\n                setCountries([]);\n                setLoaded(true);\n            });\n    }, []);\n\n    if (!loaded) return null;\n\n    return (\n        <Field\n            name={'country'}\n            label={i18n.get('country')}\n            errorMessage={errorMessage}\n            classNameModifiers={classNameModifiers}\n            isValid={!!value}\n            showValidIcon={false}\n            i18n={i18n}\n            readOnly={readOnly && !!value}\n        >\n            <Select onChange={onDropdownChange} name={'country'} selectedValue={value} items={countries} readonly={readOnly && !!value} />\n        </Field>\n    );\n}\n"],"names":["CountryField","props","allowedCountries","classNameModifiers","errorMessage","onDropdownChange","value","i18n","loadingContext","useCoreContext","countries","setCountries","useState","loaded","setLoaded","readOnly","setReadOnly","useLayoutEffect","getDataset","locale","then","response","newCountries","applyMapper","country","flag","getFlagEmoji","id","name","selectedOptionName","length","filter","includes","map","formatCountries","catch","error","console","h","Field","label","get","isValid","showValidIcon","Select","onChange","selectedValue","items","readonly"],"mappings":"8bAsBe,SAASA,EAAaC,GACjC,MAAMC,iBAAEA,EAAmB,GAAEC,mBAAEA,EAAqB,GAAEC,aAAEA,EAAYC,iBAAEA,EAAgBC,MAAEA,GAAUL,GAC5FM,KAAEA,EAAIC,eAAEA,GAAmBC,KAC1BC,EAAWC,GAAgBC,EAA6B,KACxDC,EAAQC,GAAaF,GAAkB,IACvCG,EAAUC,GAAeJ,EAASX,EAAMc,UAiB/C,OAfAE,GAAgB,KACZC,EAAW,YAAaV,EAAgBD,EAAKY,QACxCC,MAAKC,IACF,MAAMC,EAvBE,EAACZ,EAAoCR,KACzD,MACMqB,EAAeC,IACjB,MAAMC,EAAOC,EAAaF,EAAQG,IAClC,MAAO,IACAH,EACHI,KAAM,GAAGH,KAAQD,EAAQI,OACzBC,mBAAoB,GAAGJ,KAAQD,EAAQI,OAC3C,EAEJ,OAAO1B,EAAiB4B,OAASpB,EAAUqB,QATtBP,GAA8BtB,EAAiB8B,SAASR,EAAQG,MAStBM,IAAIV,GAAeb,EAAUuB,IAAIV,EAAAA,EAa/DW,CAAgBb,EAAUnB,GAC/CS,EAAaW,GAAgB,IAC7BN,EAAoC,IAAxBM,EAAaQ,QAAgBf,GACzCD,GAAU,EAAA,IAEbqB,OAAMC,IACHC,QAAQD,MAAMA,GACdzB,EAAa,IACbG,GAAU,EAAA,GACd,GACL,IAEED,EAGDyB,EAACC,EAAAA,CACGX,KAAM,UACNY,MAAOjC,EAAKkC,IAAI,WAChBrC,aAAcA,EACdD,mBAAoBA,EACpBuC,UAAWpC,EACXqC,eAAe,EACfpC,KAAMA,EACNQ,SAAUA,KAAcT,GAExBgC,EAACM,EAAAA,CAAOC,SAAUxC,EAAkBuB,KAAM,UAAWkB,cAAexC,EAAOyC,MAAOrC,EAAWsC,SAAUjC,KAAcT,KAbzG,IAgBxB"}
+{"version":3,"file":"CountryField.js","sources":["../../../../../../src/components/internal/Address/components/CountryField.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useLayoutEffect, useState } from 'preact/hooks';\nimport Field from '../../FormFields/Field';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport getDataset from '../../../../core/Services/get-dataset';\nimport { CountryFieldProps, CountryFieldItem } from '../types';\nimport Select from '../../FormFields/Select';\n\nconst formatCountries = (countries: Array<CountryFieldItem>, allowedCountries: string[]) => {\n    const applyFilter = (country: CountryFieldItem) => allowedCountries.includes(country.id);\n    const applyMapper = (country: CountryFieldItem) => {\n        return {\n            ...country,\n            name: country.name,\n            selectedOptionName: country.name\n        };\n    };\n    return allowedCountries.length ? countries.filter(applyFilter).map(applyMapper) : countries.map(applyMapper);\n};\n\nexport default function CountryField(props: CountryFieldProps) {\n    const { allowedCountries = [], classNameModifiers = [], errorMessage, onDropdownChange, value } = props;\n    const { i18n, loadingContext } = useCoreContext();\n    const [countries, setCountries] = useState<CountryFieldItem[]>([]);\n    const [loaded, setLoaded] = useState<boolean>(false);\n    const [readOnly, setReadOnly] = useState(props.readOnly);\n\n    useLayoutEffect(() => {\n        getDataset('countries', loadingContext, i18n.locale)\n            .then(response => {\n                const newCountries = formatCountries(response, allowedCountries);\n                setCountries(newCountries || []);\n                setReadOnly(newCountries.length === 1 || readOnly);\n                setLoaded(true);\n            })\n            .catch(error => {\n                console.error(error);\n                setCountries([]);\n                setLoaded(true);\n            });\n    }, []);\n\n    if (!loaded) return null;\n\n    return (\n        <Field\n            name={'country'}\n            label={i18n.get('country')}\n            errorMessage={errorMessage}\n            classNameModifiers={classNameModifiers}\n            isValid={!!value}\n            showValidIcon={false}\n            i18n={i18n}\n            readOnly={readOnly && !!value}\n        >\n            <Select onChange={onDropdownChange} name={'country'} selectedValue={value} items={countries} readonly={readOnly && !!value} />\n        </Field>\n    );\n}\n"],"names":["CountryField","props","allowedCountries","classNameModifiers","errorMessage","onDropdownChange","value","i18n","loadingContext","useCoreContext","countries","setCountries","useState","loaded","setLoaded","readOnly","setReadOnly","useLayoutEffect","getDataset","locale","then","response","newCountries","applyMapper","country","name","selectedOptionName","length","filter","includes","id","map","formatCountries","catch","error","console","h","Field","label","get","isValid","showValidIcon","Select","onChange","selectedValue","items","readonly"],"mappings":"6YAoBe,SAASA,EAAaC,GACjC,MAAMC,iBAAEA,EAAmB,GAAEC,mBAAEA,EAAqB,GAAEC,aAAEA,EAAYC,iBAAEA,EAAgBC,MAAEA,GAAUL,GAC5FM,KAAEA,EAAIC,eAAEA,GAAmBC,KAC1BC,EAAWC,GAAgBC,EAA6B,KACxDC,EAAQC,GAAaF,GAAkB,IACvCG,EAAUC,GAAeJ,EAASX,EAAMc,UAiB/C,OAfAE,GAAgB,KACZC,EAAW,YAAaV,EAAgBD,EAAKY,QACxCC,MAAKC,IACF,MAAMC,EAtBE,EAACZ,EAAoCR,KACzD,MACMqB,EAAeC,IACV,IACAA,EACHC,KAAMD,EAAQC,KACdC,mBAAoBF,EAAQC,OAGpC,OAAOvB,EAAiByB,OAASjB,EAAUkB,QARtBJ,GAA8BtB,EAAiB2B,SAASL,EAAQM,MAQtBC,IAAIR,GAAeb,EAAUqB,IAAIR,EAAAA,EAa/DS,CAAgBX,EAAUnB,GAC/CS,EAAaW,GAAgB,IAC7BN,EAAoC,IAAxBM,EAAaK,QAAgBZ,GACzCD,GAAU,EAAA,IAEbmB,OAAMC,IACHC,QAAQD,MAAMA,GACdvB,EAAa,IACbG,GAAU,EAAA,GACd,GACL,IAEED,EAGDuB,EAACC,EAAAA,CACGZ,KAAM,UACNa,MAAO/B,EAAKgC,IAAI,WAChBnC,aAAcA,EACdD,mBAAoBA,EACpBqC,UAAWlC,EACXmC,eAAe,EACflC,KAAMA,EACNQ,SAAUA,KAAcT,GAExB8B,EAACM,EAAAA,CAAOC,SAAUtC,EAAkBoB,KAAM,UAAWmB,cAAetC,EAAOuC,MAAOnC,EAAWoC,SAAU/B,KAAcT,KAbzG,IAgBxB"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../FormFields/Field/Field.js";import o from"./StateField.js";import t from"./CountryField.js";import s from"../../../../core/Context/useCoreContext.js";import a from"../../FormFields/InputText.js";function n(n){const{i18n:i}=s(),{classNameModifiers:l=[],data:c,errors:d,valid:u,fieldName:m,onInput:f,onBlur:p,trimOnBlur:g,maxLength:F,disabled:C}=n,M=c[m],y=c.country,b=n.specifications.countryHasOptionalField(y,m),j=n.specifications.getKeyForField(m,y),w=b?` ${i.get("field.title.optional")}`:"",h=`${i.get(j)}${w}`,x=function(e,r,o,t){if("object"==typeof e[r]?.errorMessage){const{translationKey:t,translationObject:s}=e[r].errorMessage;return o.get(t,s)}return o.get(e[r]?.errorMessage,{values:{label:t.toLowerCase()}})||!!e[r]}(d,m,i,h);switch(m){case"country":return e(t,{allowedCountries:n.allowedCountries,classNameModifiers:l,label:h,errorMessage:x,onDropdownChange:n.onDropdownChange,value:M});case"stateOrProvince":return e(o,{classNameModifiers:l,label:h,errorMessage:x,onDropdownChange:n.onDropdownChange,selectedCountry:y,specifications:n.specifications,value:M});default:return e(r,{label:h,classNameModifiers:l,errorMessage:x,isValid:u[m],name:m,i18n:i,onFocus:e=>n.onFieldFocusAnalytics(m,e),onBlur:e=>n.onFieldBlurAnalytics(m,e)},e(a,{name:m,classNameModifiers:l,value:M,onInput:f,onBlur:p,maxlength:F,trimOnBlur:g,disabled:C,required:!b}))}}export{n as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../FormFields/Field/Field.js";import o from"./StateField.js";import t from"./CountryField.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import a from"../../FormFields/InputText.js";function i(i){const{i18n:n}=s(),{classNameModifiers:l=[],data:d,errors:c,valid:u,fieldName:m,onInput:f,onBlur:p,trimOnBlur:g,maxLength:F,disabled:C}=i,M=d[m],y=d.country,b=i.specifications.countryHasOptionalField(y,m),j=i.specifications.getKeyForField(m,y),w=b?` ${n.get("field.title.optional")}`:"",h=`${n.get(j)}${w}`,v=function(e,r,o,t){if("object"==typeof e[r]?.errorMessage){const{translationKey:t,translationObject:s}=e[r].errorMessage;return o.get(t,s)}return o.get(e[r]?.errorMessage,{values:{label:t.toLowerCase()}})||!!e[r]}(c,m,n,h);switch(m){case"country":return e(t,{allowedCountries:i.allowedCountries,classNameModifiers:l,label:h,errorMessage:v,onDropdownChange:i.onDropdownChange,value:M});case"stateOrProvince":return e(o,{classNameModifiers:l,label:h,errorMessage:v,onDropdownChange:i.onDropdownChange,selectedCountry:y,specifications:i.specifications,value:M});default:return e(r,{label:h,classNameModifiers:l,errorMessage:v,isValid:u[m],name:m,i18n:n,onFocus:e=>i.onFieldFocusAnalytics(m,e),onBlur:e=>i.onFieldBlurAnalytics(m,e)},e(a,{name:m,classNameModifiers:l,value:M,onInput:f,onBlur:p,maxlength:F,trimOnBlur:g,disabled:C,required:!b}))}}export{i as default};
 //# sourceMappingURL=FieldContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldContainer.js","sources":["../../../../../../src/components/internal/Address/components/FieldContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../FormFields/Field';\nimport StateField from './StateField';\nimport CountryField from './CountryField';\nimport { AddressStateError, FieldContainerProps } from '../types';\nimport useCoreContext from '../../../../core/Context/useCoreContext';\nimport Language from '../../../../language/Language';\nimport InputText from '../../FormFields/InputText';\n\nfunction getErrorMessage(errors: AddressStateError, fieldName: string, i18n: Language, label: string): string | boolean {\n    if (typeof errors[fieldName]?.errorMessage === 'object') {\n        const { translationKey, translationObject } = errors[fieldName].errorMessage;\n        return i18n.get(translationKey, translationObject);\n    }\n    // Default error msg: Enter the [label name]\n    const errorMsg = i18n.get(errors[fieldName]?.errorMessage, { values: { label: label.toLowerCase() } });\n    return errorMsg || !!errors[fieldName];\n}\n\n/**\n * USAGE: Specifically defined as a util to provide a wrapper for fields created within the Address component\n *\n * NOT TO BE USED: if you just want to add a Country or State dropdown outside of an Address component\n * - then you should implement <CountryField> or <StateField> directly\n */\nfunction FieldContainer(props: FieldContainerProps) {\n    const { i18n } = useCoreContext();\n    const { classNameModifiers = [], data, errors, valid, fieldName, onInput, onBlur, trimOnBlur, maxLength, disabled } = props;\n\n    const value: string = data[fieldName];\n    const selectedCountry: string = data.country;\n    const isOptional: boolean = props.specifications.countryHasOptionalField(selectedCountry, fieldName);\n    const labelKey: string = props.specifications.getKeyForField(fieldName, selectedCountry);\n    const optionalLabel = isOptional ? ` ${i18n.get('field.title.optional')}` : '';\n    const label = `${i18n.get(labelKey)}${optionalLabel}`;\n    const errorMessage = getErrorMessage(errors, fieldName, i18n, label);\n\n    switch (fieldName) {\n        case 'country':\n            return (\n                <CountryField\n                    allowedCountries={props.allowedCountries}\n                    classNameModifiers={classNameModifiers}\n                    label={label}\n                    errorMessage={errorMessage}\n                    onDropdownChange={props.onDropdownChange}\n                    value={value}\n                />\n            );\n        case 'stateOrProvince':\n            return (\n                <StateField\n                    classNameModifiers={classNameModifiers}\n                    label={label}\n                    errorMessage={errorMessage}\n                    onDropdownChange={props.onDropdownChange}\n                    selectedCountry={selectedCountry}\n                    specifications={props.specifications}\n                    value={value}\n                />\n            );\n        default:\n            return (\n                <Field\n                    label={label}\n                    classNameModifiers={classNameModifiers}\n                    errorMessage={errorMessage}\n                    isValid={valid[fieldName]}\n                    name={fieldName}\n                    i18n={i18n}\n                    onFocus={e => props.onFieldFocusAnalytics(fieldName, e)}\n                    onBlur={e => props.onFieldBlurAnalytics(fieldName, e)}\n                >\n                    <InputText\n                        name={fieldName}\n                        classNameModifiers={classNameModifiers}\n                        value={value}\n                        onInput={onInput}\n                        onBlur={onBlur}\n                        maxlength={maxLength}\n                        trimOnBlur={trimOnBlur}\n                        disabled={disabled}\n                        required={!isOptional}\n                    />\n                </Field>\n            );\n    }\n}\n\nexport default FieldContainer;\n"],"names":["FieldContainer","props","i18n","useCoreContext","classNameModifiers","data","errors","valid","fieldName","onInput","onBlur","trimOnBlur","maxLength","disabled","value","selectedCountry","country","isOptional","specifications","countryHasOptionalField","labelKey","getKeyForField","optionalLabel","get","label","errorMessage","translationKey","translationObject","values","toLowerCase","getErrorMessage","h","CountryField","allowedCountries","onDropdownChange","StateField","Field","isValid","name","onFocus","e","onFieldFocusAnalytics","onFieldBlurAnalytics","InputText","maxlength","required"],"mappings":"iSAyBA,SAASA,EAAeC,GACpB,MAAMC,KAAEA,GAASC,KACXC,mBAAEA,EAAqB,GAAEC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,UAAEA,EAASC,QAAEA,EAAOC,OAAEA,EAAMC,WAAEA,EAAUC,UAAEA,EAASC,SAAEA,GAAaZ,EAEhHa,EAAgBT,EAAKG,GACrBO,EAA0BV,EAAKW,QAC/BC,EAAsBhB,EAAMiB,eAAeC,wBAAwBJ,EAAiBP,GACpFY,EAAmBnB,EAAMiB,eAAeG,eAAeb,EAAWO,GAClEO,EAAgBL,EAAa,IAAIf,EAAKqB,IAAI,0BAA4B,GACtEC,EAAQ,GAAGtB,EAAKqB,IAAIH,KAAYE,IAChCG,EA1BV,SAAyBnB,EAA2BE,EAAmBN,EAAgBsB,GACnF,GAA+C,iBAApClB,EAAOE,IAAYiB,aAA2B,CACrD,MAAMC,eAAEA,EAAcC,kBAAEA,GAAsBrB,EAAOE,GAAWiB,aAChE,OAAOvB,EAAKqB,IAAIG,EAAgBC,EACpC,CAGA,OADiBzB,EAAKqB,IAAIjB,EAAOE,IAAYiB,aAAc,CAAEG,OAAQ,CAAEJ,MAAOA,EAAMK,oBAC/DvB,EAAOE,EAChC,CAkByBsB,CAAgBxB,EAAQE,EAAWN,EAAMsB,GAE9D,OAAQhB,GACJ,IAAK,UACD,OACIuB,EAACC,EAAAA,CACGC,iBAAkBhC,EAAMgC,iBACxB7B,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBpB,MAAOA,IAGnB,IAAK,kBACD,OACIiB,EAACI,EAAAA,CACG/B,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBnB,gBAAiBA,EACjBG,eAAgBjB,EAAMiB,eACtBJ,MAAOA,IAGnB,QACI,OACIiB,EAACK,EAAAA,CACGZ,MAAOA,EACPpB,mBAAoBA,EACpBqB,aAAcA,EACdY,QAAS9B,EAAMC,GACf8B,KAAM9B,EACNN,KAAMA,EACNqC,QAASC,GAAKvC,EAAMwC,sBAAsBjC,EAAWgC,GACrD9B,OAAQ8B,GAAKvC,EAAMyC,qBAAqBlC,EAAWgC,IAEnDT,EAACY,EAAAA,CACGL,KAAM9B,EACNJ,mBAAoBA,EACpBU,MAAOA,EACPL,QAASA,EACTC,OAAQA,EACRkC,UAAWhC,EACXD,WAAYA,EACZE,SAAUA,EACVgC,UAAW5B,KAKnC"}
+{"version":3,"file":"FieldContainer.js","sources":["../../../../../../src/components/internal/Address/components/FieldContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../FormFields/Field';\nimport StateField from './StateField';\nimport CountryField from './CountryField';\nimport { AddressStateError, FieldContainerProps } from '../types';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Language from '../../../../language/Language';\nimport InputText from '../../FormFields/InputText';\n\nfunction getErrorMessage(errors: AddressStateError, fieldName: string, i18n: Language, label: string): string | boolean {\n    if (typeof errors[fieldName]?.errorMessage === 'object') {\n        const { translationKey, translationObject } = errors[fieldName].errorMessage;\n        return i18n.get(translationKey, translationObject);\n    }\n    // Default error msg: Enter the [label name]\n    const errorMsg = i18n.get(errors[fieldName]?.errorMessage, { values: { label: label.toLowerCase() } });\n    return errorMsg || !!errors[fieldName];\n}\n\n/**\n * USAGE: Specifically defined as a util to provide a wrapper for fields created within the Address component\n *\n * NOT TO BE USED: if you just want to add a Country or State dropdown outside of an Address component\n * - then you should implement <CountryField> or <StateField> directly\n */\nfunction FieldContainer(props: FieldContainerProps) {\n    const { i18n } = useCoreContext();\n    const { classNameModifiers = [], data, errors, valid, fieldName, onInput, onBlur, trimOnBlur, maxLength, disabled } = props;\n\n    const value: string = data[fieldName];\n    const selectedCountry: string = data.country;\n    const isOptional: boolean = props.specifications.countryHasOptionalField(selectedCountry, fieldName);\n    const labelKey: string = props.specifications.getKeyForField(fieldName, selectedCountry);\n    const optionalLabel = isOptional ? ` ${i18n.get('field.title.optional')}` : '';\n    const label = `${i18n.get(labelKey)}${optionalLabel}`;\n    const errorMessage = getErrorMessage(errors, fieldName, i18n, label);\n\n    switch (fieldName) {\n        case 'country':\n            return (\n                <CountryField\n                    allowedCountries={props.allowedCountries}\n                    classNameModifiers={classNameModifiers}\n                    label={label}\n                    errorMessage={errorMessage}\n                    onDropdownChange={props.onDropdownChange}\n                    value={value}\n                />\n            );\n        case 'stateOrProvince':\n            return (\n                <StateField\n                    classNameModifiers={classNameModifiers}\n                    label={label}\n                    errorMessage={errorMessage}\n                    onDropdownChange={props.onDropdownChange}\n                    selectedCountry={selectedCountry}\n                    specifications={props.specifications}\n                    value={value}\n                />\n            );\n        default:\n            return (\n                <Field\n                    label={label}\n                    classNameModifiers={classNameModifiers}\n                    errorMessage={errorMessage}\n                    isValid={valid[fieldName]}\n                    name={fieldName}\n                    i18n={i18n}\n                    onFocus={e => props.onFieldFocusAnalytics(fieldName, e)}\n                    onBlur={e => props.onFieldBlurAnalytics(fieldName, e)}\n                >\n                    <InputText\n                        name={fieldName}\n                        classNameModifiers={classNameModifiers}\n                        value={value}\n                        onInput={onInput}\n                        onBlur={onBlur}\n                        maxlength={maxLength}\n                        trimOnBlur={trimOnBlur}\n                        disabled={disabled}\n                        required={!isOptional}\n                    />\n                </Field>\n            );\n    }\n}\n\nexport default FieldContainer;\n"],"names":["FieldContainer","props","i18n","useCoreContext","classNameModifiers","data","errors","valid","fieldName","onInput","onBlur","trimOnBlur","maxLength","disabled","value","selectedCountry","country","isOptional","specifications","countryHasOptionalField","labelKey","getKeyForField","optionalLabel","get","label","errorMessage","translationKey","translationObject","values","toLowerCase","getErrorMessage","h","CountryField","allowedCountries","onDropdownChange","StateField","Field","isValid","name","onFocus","e","onFieldFocusAnalytics","onFieldBlurAnalytics","InputText","maxlength","required"],"mappings":"iTAyBA,SAASA,EAAeC,GACpB,MAAMC,KAAEA,GAASC,KACXC,mBAAEA,EAAqB,GAAEC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,UAAEA,EAASC,QAAEA,EAAOC,OAAEA,EAAMC,WAAEA,EAAUC,UAAEA,EAASC,SAAEA,GAAaZ,EAEhHa,EAAgBT,EAAKG,GACrBO,EAA0BV,EAAKW,QAC/BC,EAAsBhB,EAAMiB,eAAeC,wBAAwBJ,EAAiBP,GACpFY,EAAmBnB,EAAMiB,eAAeG,eAAeb,EAAWO,GAClEO,EAAgBL,EAAa,IAAIf,EAAKqB,IAAI,0BAA4B,GACtEC,EAAQ,GAAGtB,EAAKqB,IAAIH,KAAYE,IAChCG,EA1BV,SAAyBnB,EAA2BE,EAAmBN,EAAgBsB,GACnF,GAA+C,iBAApClB,EAAOE,IAAYiB,aAA2B,CACrD,MAAMC,eAAEA,EAAcC,kBAAEA,GAAsBrB,EAAOE,GAAWiB,aAChE,OAAOvB,EAAKqB,IAAIG,EAAgBC,EACpC,CAGA,OADiBzB,EAAKqB,IAAIjB,EAAOE,IAAYiB,aAAc,CAAEG,OAAQ,CAAEJ,MAAOA,EAAMK,oBAC/DvB,EAAOE,EAChC,CAkByBsB,CAAgBxB,EAAQE,EAAWN,EAAMsB,GAE9D,OAAQhB,GACJ,IAAK,UACD,OACIuB,EAACC,EAAAA,CACGC,iBAAkBhC,EAAMgC,iBACxB7B,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBpB,MAAOA,IAGnB,IAAK,kBACD,OACIiB,EAACI,EAAAA,CACG/B,mBAAoBA,EACpBoB,MAAOA,EACPC,aAAcA,EACdS,iBAAkBjC,EAAMiC,iBACxBnB,gBAAiBA,EACjBG,eAAgBjB,EAAMiB,eACtBJ,MAAOA,IAGnB,QACI,OACIiB,EAACK,EAAAA,CACGZ,MAAOA,EACPpB,mBAAoBA,EACpBqB,aAAcA,EACdY,QAAS9B,EAAMC,GACf8B,KAAM9B,EACNN,KAAMA,EACNqC,QAASC,GAAKvC,EAAMwC,sBAAsBjC,EAAWgC,GACrD9B,OAAQ8B,GAAKvC,EAAMyC,qBAAqBlC,EAAWgC,IAEnDT,EAACY,EAAAA,CACGL,KAAM9B,EACNJ,mBAAoBA,EACpBU,MAAOA,EACPL,QAASA,EACTC,OAAQA,EACRkC,UAAWhC,EACXD,WAAYA,EACZE,SAAUA,EACVgC,UAAW5B,KAKnC"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as t,useLayoutEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../FormFields/Field/Field.js";import s from"../../../../core/Context/useCoreContext.js";import a from"../../../../core/Services/get-dataset.js";import n from"../../FormFields/Select/Select.js";function i(i){const{classNameModifiers:l,label:c,onDropdownChange:d,readOnly:m,selectedCountry:f,specifications:u,value:p}=i,{i18n:h,loadingContext:g}=s(),[C,j]=t([]),[x,y]=t(!1);return o((()=>{if(!f||!u.countryHasDataset(f))return j([]),void y(!0);a(`states/${f}`,g,h.locale).then((e=>{const t=e&&e.length?e:[];j(t),y(!0)})).catch((()=>{j([]),y(!0)}))}),[f]),x&&C.length?e(r,{label:c,classNameModifiers:l,errorMessage:i.errorMessage,isValid:!!p,showValidIcon:!1,name:"stateOrProvince",i18n:h,readOnly:m&&!!p},e(n,{name:"stateOrProvince",onChange:d,selectedValue:p,items:C,readonly:m&&!!p})):null}export{i as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as t,useLayoutEffect as r}from"../../../../external/preact/hooks/dist/hooks.js";import o from"../../FormFields/Field/Field.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import a from"../../../../core/Services/get-dataset.js";import n from"../../FormFields/Select/Select.js";function i(i){const{classNameModifiers:l,label:c,onDropdownChange:d,readOnly:m,selectedCountry:f,specifications:p,value:u}=i,{i18n:h,loadingContext:g}=s(),[j,v]=t([]),[y,C]=t(!1);return r((()=>{if(!f||!p.countryHasDataset(f))return v([]),void C(!0);a(`states/${f}`,g,h.locale).then((e=>{const t=e&&e.length?e:[];v(t),C(!0)})).catch((()=>{v([]),C(!0)}))}),[f]),y&&j.length?e(o,{label:c,classNameModifiers:l,errorMessage:i.errorMessage,isValid:!!u,showValidIcon:!1,name:"stateOrProvince",i18n:h,readOnly:m&&!!u},e(n,{name:"stateOrProvince",onChange:d,selectedValue:u,items:j,readonly:m&&!!u})):null}export{i as default};
 //# sourceMappingURL=StateField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StateField.js","sources":["../../../../../../src/components/internal/Address/components/StateField.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useLayoutEffect } from 'preact/hooks';\nimport Field from '../../FormFields/Field';\nimport useCoreContext from '../../../../core/Context/useCoreContext';\nimport getDataset from '../../../../core/Services/get-dataset';\nimport { StateFieldItem, StateFieldProps } from '../types';\nimport Select from '../../FormFields/Select';\n\nexport default function StateField(props: StateFieldProps) {\n    const { classNameModifiers, label, onDropdownChange, readOnly, selectedCountry, specifications, value } = props;\n    const { i18n, loadingContext } = useCoreContext();\n    const [states, setStates] = useState<StateFieldItem[]>([]);\n    const [loaded, setLoaded] = useState<boolean>(false);\n\n    useLayoutEffect(() => {\n        if (!selectedCountry || !specifications.countryHasDataset(selectedCountry)) {\n            setStates([]);\n            setLoaded(true);\n            return;\n        }\n\n        getDataset(`states/${selectedCountry}`, loadingContext, i18n.locale)\n            .then(response => {\n                const newStates = response && response.length ? response : [];\n                setStates(newStates);\n                setLoaded(true);\n            })\n            .catch(() => {\n                setStates([]);\n                setLoaded(true);\n            });\n    }, [selectedCountry]);\n\n    if (!loaded || !states.length) return null;\n\n    return (\n        <Field\n            label={label}\n            classNameModifiers={classNameModifiers}\n            errorMessage={props.errorMessage}\n            isValid={!!value}\n            showValidIcon={false}\n            name={'stateOrProvince'}\n            i18n={i18n}\n            readOnly={readOnly && !!value}\n        >\n            <Select name={'stateOrProvince'} onChange={onDropdownChange} selectedValue={value} items={states} readonly={readOnly && !!value} />\n        </Field>\n    );\n}\n"],"names":["StateField","props","classNameModifiers","label","onDropdownChange","readOnly","selectedCountry","specifications","value","i18n","loadingContext","useCoreContext","states","setStates","useState","loaded","setLoaded","useLayoutEffect","countryHasDataset","getDataset","locale","then","response","newStates","length","catch","h","Field","errorMessage","isValid","showValidIcon","name","Select","onChange","selectedValue","items","readonly"],"mappings":"6XAQe,SAASA,EAAWC,GAC/B,MAAMC,mBAAEA,EAAkBC,MAAEA,EAAKC,iBAAEA,EAAgBC,SAAEA,EAAQC,gBAAEA,EAAeC,eAAEA,EAAcC,MAAEA,GAAUP,GACpGQ,KAAEA,EAAIC,eAAEA,GAAmBC,KAC1BC,EAAQC,GAAaC,EAA2B,KAChDC,EAAQC,GAAaF,GAAkB,GAqB9C,OAnBAG,GAAgB,KACZ,IAAKX,IAAoBC,EAAeW,kBAAkBZ,GAGtD,OAFAO,EAAU,SACVG,GAAU,GAIdG,EAAW,UAAUb,IAAmBI,EAAgBD,EAAKW,QACxDC,MAAKC,IACF,MAAMC,EAAYD,GAAYA,EAASE,OAASF,EAAW,GAC3DT,EAAUU,GACVP,GAAU,EAAA,IAEbS,OAAM,KACHZ,EAAU,IACVG,GAAU,EAAA,GACd,GACL,CAACV,IAECS,GAAWH,EAAOY,OAGnBE,EAACC,EAAAA,CACGxB,MAAOA,EACPD,mBAAoBA,EACpB0B,aAAc3B,EAAM2B,aACpBC,UAAWrB,EACXsB,eAAe,EACfC,KAAM,kBACNtB,KAAMA,EACNJ,SAAUA,KAAcG,GAExBkB,EAACM,EAAAA,CAAOD,KAAM,kBAAmBE,SAAU7B,EAAkB8B,cAAe1B,EAAO2B,MAAOvB,EAAQwB,SAAU/B,KAAcG,KAb5F,IAgB1C"}
+{"version":3,"file":"StateField.js","sources":["../../../../../../src/components/internal/Address/components/StateField.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useLayoutEffect } from 'preact/hooks';\nimport Field from '../../FormFields/Field';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport getDataset from '../../../../core/Services/get-dataset';\nimport { StateFieldItem, StateFieldProps } from '../types';\nimport Select from '../../FormFields/Select';\n\nexport default function StateField(props: StateFieldProps) {\n    const { classNameModifiers, label, onDropdownChange, readOnly, selectedCountry, specifications, value } = props;\n    const { i18n, loadingContext } = useCoreContext();\n    const [states, setStates] = useState<StateFieldItem[]>([]);\n    const [loaded, setLoaded] = useState<boolean>(false);\n\n    useLayoutEffect(() => {\n        if (!selectedCountry || !specifications.countryHasDataset(selectedCountry)) {\n            setStates([]);\n            setLoaded(true);\n            return;\n        }\n\n        getDataset(`states/${selectedCountry}`, loadingContext, i18n.locale)\n            .then(response => {\n                const newStates = response && response.length ? response : [];\n                setStates(newStates);\n                setLoaded(true);\n            })\n            .catch(() => {\n                setStates([]);\n                setLoaded(true);\n            });\n    }, [selectedCountry]);\n\n    if (!loaded || !states.length) return null;\n\n    return (\n        <Field\n            label={label}\n            classNameModifiers={classNameModifiers}\n            errorMessage={props.errorMessage}\n            isValid={!!value}\n            showValidIcon={false}\n            name={'stateOrProvince'}\n            i18n={i18n}\n            readOnly={readOnly && !!value}\n        >\n            <Select name={'stateOrProvince'} onChange={onDropdownChange} selectedValue={value} items={states} readonly={readOnly && !!value} />\n        </Field>\n    );\n}\n"],"names":["StateField","props","classNameModifiers","label","onDropdownChange","readOnly","selectedCountry","specifications","value","i18n","loadingContext","useCoreContext","states","setStates","useState","loaded","setLoaded","useLayoutEffect","countryHasDataset","getDataset","locale","then","response","newStates","length","catch","h","Field","errorMessage","isValid","showValidIcon","name","Select","onChange","selectedValue","items","readonly"],"mappings":"6YAQe,SAASA,EAAWC,GAC/B,MAAMC,mBAAEA,EAAkBC,MAAEA,EAAKC,iBAAEA,EAAgBC,SAAEA,EAAQC,gBAAEA,EAAeC,eAAEA,EAAcC,MAAEA,GAAUP,GACpGQ,KAAEA,EAAIC,eAAEA,GAAmBC,KAC1BC,EAAQC,GAAaC,EAA2B,KAChDC,EAAQC,GAAaF,GAAkB,GAqB9C,OAnBAG,GAAgB,KACZ,IAAKX,IAAoBC,EAAeW,kBAAkBZ,GAGtD,OAFAO,EAAU,SACVG,GAAU,GAIdG,EAAW,UAAUb,IAAmBI,EAAgBD,EAAKW,QACxDC,MAAKC,IACF,MAAMC,EAAYD,GAAYA,EAASE,OAASF,EAAW,GAC3DT,EAAUU,GACVP,GAAU,EAAA,IAEbS,OAAM,KACHZ,EAAU,IACVG,GAAU,EAAA,GACd,GACL,CAACV,IAECS,GAAWH,EAAOY,OAGnBE,EAACC,EAAAA,CACGxB,MAAOA,EACPD,mBAAoBA,EACpB0B,aAAc3B,EAAM2B,aACpBC,UAAWrB,EACXsB,eAAe,EACfC,KAAM,kBACNtB,KAAMA,EACNJ,SAAUA,KAAcG,GAExBkB,EAACM,EAAAA,CAAOD,KAAM,kBAAmBE,SAAU7B,EAAkB8B,cAAe1B,EAAO2B,MAAOvB,EAAQwB,SAAU/B,KAAcG,KAb5F,IAgB1C"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as t,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../external/classnames/index.js";import r from"../../../core/Services/payment-status.js";import{processResponse as n}from"../../../core/ProcessResponse/process-response.js";import s from"../Spinner/Spinner.js";import i from"../Countdown/index.js";import c from"../Button/Button.js";import l from"../../../core/Context/useCoreContext.js";import d from"../../../core/Errors/AdyenCheckoutError.js";import m from"../ContentSeparator/ContentSeparator.js";import p from"../../../core/Context/useImage.js";function u(u){const{i18n:_,loadingContext:y}=l(),w=p(),[h,f]=t(!1),[k,g]=t(!1),[N,v]=t(!0),[C,T]=t(!1),[b,x]=t(u.delay),[j,E]=t(100),[R,D]=t(0),[S,A]=t(!1),[I,L]=t(null),M=e=>{if(e.props.payload){f(!0);const t={data:{details:{payload:e.props.payload},paymentData:u.paymentData}};return u.onComplete(t,this)}g(!0),u.onError(new d("ERROR","successful result, but no payload in response"))},O=e=>{if(g(!0),e.props.payload){const t={data:{details:{payload:e.props.payload},paymentData:u.paymentData}};return u.onComplete(t,this)}u.onError(new d("ERROR","error result with no payload in response"))},P=()=>{const{paymentData:e,clientKey:t,throttleInterval:a}=u;C||(u.onActionHandled({componentType:u.type,actionDescription:"polling-started"}),T(!0)),r(e,t,y,a).then(n).catch((({message:e,...t})=>({type:"network-error",props:{...e&&{message:_.get(e)},...t}}))).then((e=>{switch(e.type){case"success":M(e);break;case"error":O(e);break;default:v(!1)}}))};a((()=>(P(),()=>{clearTimeout(I)})),[]),a((()=>{if(k)return clearTimeout(I);if(h)return clearTimeout(I);if(!N){L(setTimeout((()=>{P();const e=R+b;D(e),e>=u.throttleTime&&!S&&(x(u.throttleInterval),A(!0))}),b))}}),[N,k,h,R]);const $=(t,a)=>e("div",{className:"adyen-checkout__await adyen-checkout__await--result"},e("img",{className:"adyen-checkout__await__icon adyen-checkout__await__icon--result",src:w({imageFolder:"components/"})(t),alt:_.get(a)}),e("div",{className:"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result"},_.get(a)));if(k)return $("error","error.subtitle.payment");if(h)return $("success","creditCard.success");if(N)return e("div",{className:"adyen-checkout__await"},u.brandLogo&&e("img",{src:u.brandLogo,alt:u.type,className:"adyen-checkout__await__brand-logo"}),e(s,{inline:!1,size:"large"}));const z=_.get("wechatpay.timetopay").split("%@");return e("div",{className:o("adyen-checkout__await",`adyen-checkout__await--${u.type}`,u.classNameModifiers.map((e=>`adyen-checkout__await--${e}`)))},u.brandLogo&&e("img",{src:u.brandLogo,alt:u.type,className:"adyen-checkout__await__brand-logo"}),e("div",{className:"adyen-checkout__await__subtitle"},u.messageText),e("div",{className:"adyen-checkout__await__indicator-holder"},e("div",{className:"adyen-checkout__await__indicator-spinner"},e(s,{inline:!1,size:"medium"})),e("div",{className:"adyen-checkout__await__indicator-text"},u.awaitText)),u.showCountdownTimer&&e("div",{className:"adyen-checkout__await__countdown-holder"},e("div",{className:"adyen-checkout__await__progress"},e("span",{className:"adyen-checkout__await__percentage",style:{width:`${j}%`}})),e("div",{className:"adyen-checkout__await__countdown"},z[0]," ",e(i,{minutesFromNow:u.countdownTime,onTick:e=>{E(e.percentage)},onCompleted:()=>{g(!0),clearTimeout(I),u.onError(new d("ERROR","Payment Expired"))}})," ",z[1])),u.url&&e("div",{className:"adyen-checkout__await__app-link"},e(m,null),e(c,{classNameModifiers:["await"],onClick:()=>{return e=u.url,void window.location.assign(e);var e},label:_.get("openApp")})))}u.defaultProps={countdownTime:15,onError:()=>{},onComplete:()=>{},onActionHandled:()=>{},delay:2e3,throttleTime:6e4,throttleInterval:1e4,showCountdownTimer:!0,classNameModifiers:[],url:null};export{u as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useState as t,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../external/classnames/index.js";import r from"../../../core/Services/payment-status.js";import{processResponse as n}from"../../../core/ProcessResponse/process-response.js";import s from"../Spinner/Spinner.js";import i from"../Countdown/index.js";import c from"../Button/Button.js";import{useCoreContext as l}from"../../../core/Context/CoreProvider.js";import d from"../../../core/Errors/AdyenCheckoutError.js";import m from"../ContentSeparator/ContentSeparator.js";import p from"../../../core/Context/useImage.js";function u(u){const{i18n:_,loadingContext:y}=l(),w=p(),[h,f]=t(!1),[k,g]=t(!1),[N,v]=t(!0),[C,T]=t(!1),[b,x]=t(u.delay),[j,E]=t(100),[R,D]=t(0),[S,A]=t(!1),[I,L]=t(null),P=e=>{if(e.props.payload){f(!0);const t={data:{details:{payload:e.props.payload},paymentData:u.paymentData}};return u.onComplete(t,this)}g(!0),u.onError(new d("ERROR","successful result, but no payload in response"))},M=e=>{if(g(!0),e.props.payload){const t={data:{details:{payload:e.props.payload},paymentData:u.paymentData}};return u.onComplete(t,this)}u.onError(new d("ERROR","error result with no payload in response"))},O=()=>{const{paymentData:e,clientKey:t,throttleInterval:a}=u;C||(u.onActionHandled({componentType:u.type,actionDescription:"polling-started"}),T(!0)),r(e,t,y,a).then(n).catch((({message:e,...t})=>({type:"network-error",props:{...e&&{message:_.get(e)},...t}}))).then((e=>{switch(e.type){case"success":P(e);break;case"error":M(e);break;default:v(!1)}}))};a((()=>(O(),()=>{clearTimeout(I)})),[]),a((()=>{if(k)return clearTimeout(I);if(h)return clearTimeout(I);if(!N){L(setTimeout((()=>{O();const e=R+b;D(e),e>=u.throttleTime&&!S&&(x(u.throttleInterval),A(!0))}),b))}}),[N,k,h,R]);const $=(t,a)=>e("div",{className:"adyen-checkout__await adyen-checkout__await--result"},e("img",{className:"adyen-checkout__await__icon adyen-checkout__await__icon--result",src:w({imageFolder:"components/"})(t),alt:_.get(a)}),e("div",{className:"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result"},_.get(a)));if(k)return $("error","error.subtitle.payment");if(h)return $("success","creditCard.success");if(N)return e("div",{className:"adyen-checkout__await"},u.brandLogo&&e("img",{src:u.brandLogo,alt:u.type,className:"adyen-checkout__await__brand-logo"}),e(s,{inline:!1,size:"large"}));const z=_.get("wechatpay.timetopay").split("%@");return e("div",{className:o("adyen-checkout__await",`adyen-checkout__await--${u.type}`,u.classNameModifiers.map((e=>`adyen-checkout__await--${e}`)))},u.brandLogo&&e("img",{src:u.brandLogo,alt:u.type,className:"adyen-checkout__await__brand-logo"}),e("div",{className:"adyen-checkout__await__subtitle"},u.messageText),e("div",{className:"adyen-checkout__await__indicator-holder"},e("div",{className:"adyen-checkout__await__indicator-spinner"},e(s,{inline:!1,size:"medium"})),e("div",{className:"adyen-checkout__await__indicator-text"},u.awaitText)),u.showCountdownTimer&&e("div",{className:"adyen-checkout__await__countdown-holder"},e("div",{className:"adyen-checkout__await__progress"},e("span",{className:"adyen-checkout__await__percentage",style:{width:`${j}%`}})),e("div",{className:"adyen-checkout__await__countdown"},z[0]," ",e(i,{minutesFromNow:u.countdownTime,onTick:e=>{E(e.percentage)},onCompleted:()=>{g(!0),clearTimeout(I),u.onError(new d("ERROR","Payment Expired"))}})," ",z[1])),u.url&&e("div",{className:"adyen-checkout__await__app-link"},e(m,null),e(c,{classNameModifiers:["await"],onClick:()=>{return e=u.url,void window.location.assign(e);var e},label:_.get("openApp")})))}u.defaultProps={countdownTime:15,onError:()=>{},onComplete:()=>{},onActionHandled:()=>{},delay:2e3,throttleTime:6e4,throttleInterval:1e4,showCountdownTimer:!0,classNameModifiers:[],url:null};export{u as default};
 //# sourceMappingURL=Await.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classnames from 'classnames';\nimport checkPaymentStatus from '../../../core/Services/payment-status';\nimport processResponse from '../../../core/ProcessResponse';\n\nimport Spinner from '../../internal/Spinner';\nimport Countdown from '../Countdown';\nimport Button from '../Button';\nimport useCoreContext from '../../../core/Context/useCoreContext';\nimport { AwaitComponentProps, StatusObject } from './types';\nimport './Await.scss';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\nimport ContentSeparator from '../ContentSeparator';\nimport useImage from '../../../core/Context/useImage';\n\nfunction Await(props: AwaitComponentProps) {\n    const { i18n, loadingContext } = useCoreContext();\n    const getImage = useImage();\n    const [completed, setCompleted] = useState(false);\n    const [expired, setExpired] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [hasCalledActionHandled, setHasCalledActionHandled] = useState(false);\n    const [delay, setDelay] = useState(props.delay);\n    const [percentage, setPercentage] = useState(100);\n    const [timePassed, setTimePassed] = useState(0);\n    const [hasAdjustedTime, setHasAdjustedTime] = useState(false);\n    const [storedTimeout, setStoredTimeout] = useState(null);\n\n    const onTimeUp = (): void => {\n        setExpired(true);\n        clearTimeout(storedTimeout);\n        props.onError(new AdyenCheckoutError('ERROR', 'Payment Expired'));\n    };\n\n    const onTick = (time): void => {\n        setPercentage(time.percentage);\n    };\n\n    const onComplete = (status: StatusObject): void => {\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            setCompleted(true);\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send success response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Show error state & call merchant defined error callback if we do not have a payload\n        setExpired(true);\n        props.onError(new AdyenCheckoutError('ERROR', 'successful result, but no payload in response'));\n    };\n\n    const onError = (status: StatusObject): void => {\n        setExpired(true);\n\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send error response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Call merchant defined error callback if we do not have a payload\n        props.onError(new AdyenCheckoutError('ERROR', 'error result with no payload in response'));\n    };\n\n    const checkStatus = (): void => {\n        const { paymentData, clientKey, throttleInterval } = props;\n\n        if (!hasCalledActionHandled) {\n            props.onActionHandled({ componentType: props.type, actionDescription: 'polling-started' });\n            setHasCalledActionHandled(true);\n        }\n\n        checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval)\n            .then(processResponse)\n            .catch(({ message, ...response }) => ({\n                type: 'network-error',\n                props: {\n                    ...(message && { message: i18n.get(message) }),\n                    ...response\n                }\n            }))\n            .then((status: StatusObject) => {\n                switch (status.type) {\n                    case 'success':\n                        onComplete(status);\n                        break;\n\n                    case 'error':\n                        onError(status);\n                        break;\n\n                    default:\n                        setLoading(false);\n                }\n            });\n    };\n\n    const redirectToApp = (url): void => {\n        window.location.assign(url);\n    };\n\n    useEffect(() => {\n        checkStatus();\n        return (): void => {\n            clearTimeout(storedTimeout);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (expired) return clearTimeout(storedTimeout);\n\n        if (completed) return clearTimeout(storedTimeout);\n\n        if (!loading) {\n            // Retry until getting a complete response from the server OR it times out\n            // Changes setTimeout time to new value (throttleInterval) after a certain amount of time (throttleTime) has passed\n            const statusInterval = (): void => {\n                checkStatus();\n\n                const actualTimePassed = timePassed + delay;\n                // timePassed is the value that is the main \"engine\" that drives this useEffect/polling\n                setTimePassed(actualTimePassed);\n\n                if (actualTimePassed >= props.throttleTime && !hasAdjustedTime) {\n                    setDelay(props.throttleInterval);\n                    setHasAdjustedTime(true);\n                }\n            };\n\n            // Create (another) interval to poll for a result\n            setStoredTimeout(setTimeout(statusInterval, delay));\n        }\n    }, [loading, expired, completed, timePassed]);\n\n    const finalState = (image, message) => (\n        <div className=\"adyen-checkout__await adyen-checkout__await--result\">\n            <img\n                className=\"adyen-checkout__await__icon adyen-checkout__await__icon--result\"\n                src={getImage({ imageFolder: 'components/' })(image)}\n                alt={i18n.get(message)}\n            />\n            <div className=\"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result\">{i18n.get(message)}</div>\n        </div>\n    );\n\n    if (expired) {\n        return finalState('error', 'error.subtitle.payment');\n    }\n\n    if (completed) {\n        return finalState('success', 'creditCard.success');\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: 15,\n    onError: () => {},\n    onComplete: () => {},\n    onActionHandled: () => {},\n    delay: 2000,\n    throttleTime: 60000,\n    throttleInterval: 10000,\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n\nexport default Await;\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","getImage","useImage","completed","setCompleted","useState","expired","setExpired","loading","setLoading","hasCalledActionHandled","setHasCalledActionHandled","delay","setDelay","percentage","setPercentage","timePassed","setTimePassed","hasAdjustedTime","setHasAdjustedTime","storedTimeout","setStoredTimeout","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","clientKey","throttleInterval","onActionHandled","componentType","type","actionDescription","checkPaymentStatus","then","processResponse","catch","message","response","get","useEffect","clearTimeout","setTimeout","actualTimePassed","throttleTime","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","url","ContentSeparator","Button","onClick","redirectToApp","window","location","assign","label","defaultProps"],"mappings":"sqBAgBA,SAASA,EAAMC,GACX,MAAMC,KAAEA,EAAIC,eAAEA,GAAmBC,IAC3BC,EAAWC,KACVC,EAAWC,GAAgBC,GAAS,IACpCC,EAASC,GAAcF,GAAS,IAChCG,EAASC,GAAcJ,GAAS,IAChCK,EAAwBC,GAA6BN,GAAS,IAC9DO,EAAOC,GAAYR,EAASR,EAAMe,QAClCE,EAAYC,GAAiBV,EAAS,MACtCW,EAAYC,GAAiBZ,EAAS,IACtCa,EAAiBC,GAAsBd,GAAS,IAChDe,EAAeC,GAAoBhB,EAAS,MAY7CiB,EAAcC,IAEhB,GAAIA,EAAO1B,MAAM2B,QAAS,CACtBpB,GAAa,GACb,MAAMqB,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAtB,GAAW,GACXV,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,iDAAA,EAG5CD,EAAWP,IAIb,GAHAhB,GAAW,GAGPgB,EAAO1B,MAAM2B,QAAS,CACtB,MAAMC,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAhC,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,4CAAA,EAG5CC,EAAc,KAChB,MAAMJ,YAAEA,EAAWK,UAAEA,EAASC,iBAAEA,GAAqBrC,EAEhDa,IACDb,EAAMsC,gBAAgB,CAAEC,cAAevC,EAAMwC,KAAMC,kBAAmB,oBACtE3B,GAA0B,IAG9B4B,EAAmBX,EAAaK,EAAWlC,EAAgBmC,GACtDM,KAAKC,GACLC,OAAM,EAAGC,aAAYC,MAAgB,CAClCP,KAAM,gBACNxC,MAAO,IACC8C,GAAW,CAAEA,QAAS7C,EAAK+C,IAAIF,OAChCC,OAGVJ,MAAMjB,IACH,OAAQA,EAAOc,MACX,IAAK,UACDf,EAAWC,GACX,MAEJ,IAAK,QACDO,EAAQP,GACR,MAEJ,QACId,GAAW,GACnB,GACJ,EAORqC,GAAU,KACNd,IACO,KACHe,aAAa3B,EAAAA,IAElB,IAEH0B,GAAU,KACN,GAAIxC,EAAS,OAAOyC,aAAa3B,GAEjC,GAAIjB,EAAW,OAAO4C,aAAa3B,GAEnC,IAAKZ,EAAS,CAiBVa,EAAiB2B,YAdM,KACnBhB,IAEA,MAAMiB,EAAmBjC,EAAaJ,EAEtCK,EAAcgC,GAEVA,GAAoBpD,EAAMqD,eAAiBhC,IAC3CL,EAAShB,EAAMqC,kBACff,GAAmB,GACvB,GAIwCP,GAChD,IACD,CAACJ,EAASF,EAASH,EAAWa,IAEjC,MAAMmC,EAAa,CAACC,EAAOT,IACvBU,EAACC,MAAAA,CAAIC,UAAU,uDACXF,EAACG,MAAAA,CACGD,UAAU,kEACVE,IAAKxD,EAAS,CAAEyD,YAAa,eAAxBzD,CAAyCmD,GAC9CO,IAAK7D,EAAK+C,IAAIF,KAElBU,EAACC,MAAAA,CAAIC,UAAU,2EAA2EzD,EAAK+C,IAAIF,KAI3G,GAAIrC,EACA,OAAO6C,EAAW,QAAS,0BAG/B,GAAIhD,EACA,OAAOgD,EAAW,UAAW,sBAGjC,GAAI3C,EACA,OACI6C,EAACC,MAAAA,CAAIC,UAAU,yBACV1D,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAC1EF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,WAKzC,MAAMC,EAAkBlE,EAAK+C,IAAI,uBAAuBoB,MAAM,MAE9D,OACIZ,EAACC,MAAAA,CACGC,UAAWW,EACP,wBACA,0BAA0BrE,EAAMwC,OAChCxC,EAAMsE,mBAAmBC,KAAIC,GAAK,0BAA0BA,QAG/DxE,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAE1EF,EAACC,MAAAA,CAAIC,UAAU,mCAAmC1D,EAAMyE,aAExDjB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,YAEjCV,EAACC,MAAAA,CAAIC,UAAU,yCAAyC1D,EAAM0E,YAGjE1E,EAAM2E,oBACHnB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAACoB,OAAAA,CAAKlB,UAAU,oCAAoCmB,MAAO,CAAEC,MAAO,GAAG7D,SAG3EuC,EAACC,MAAAA,CAAIC,UAAU,oCACVS,EAAgB,GAAG,IACpBX,EAACuB,EAAAA,CAAUC,eAAgBhF,EAAMiF,cAAeC,OAzKpDC,IACZjE,EAAciE,EAAKlE,WAAU,EAwKmDmE,YA/KnE,KACb1E,GAAW,GACXwC,aAAa3B,GACbvB,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,mBAAA,IA4K2D,IAClFiC,EAAgB,KAKlCnE,EAAMqF,KACH7B,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAAC8B,QACD9B,EAAC+B,EAAAA,CAAOjB,mBAAoB,CAAC,SAAUkB,QAAS,KAAMC,OAvG/CJ,EAuG6DrF,EAAMqF,SAtGtFK,OAAOC,SAASC,OAAOP,GADL,IAACA,CAuGsE,EAAGQ,MAAO5F,EAAK+C,IAAI,cAKpH,CAEAjD,EAAM+F,aAAe,CACjBb,cAAe,GACfhD,QAAS,OACTR,WAAY,OACZa,gBAAiB,OACjBvB,MAAO,IACPsC,aAAc,IACdhB,iBAAkB,IAClBsC,oBAAoB,EACpBL,mBAAoB,GACpBe,IAAK"}
+{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classnames from 'classnames';\nimport checkPaymentStatus from '../../../core/Services/payment-status';\nimport processResponse from '../../../core/ProcessResponse';\n\nimport Spinner from '../../internal/Spinner';\nimport Countdown from '../Countdown';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { AwaitComponentProps, StatusObject } from './types';\nimport './Await.scss';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\nimport ContentSeparator from '../ContentSeparator';\nimport useImage from '../../../core/Context/useImage';\n\nfunction Await(props: AwaitComponentProps) {\n    const { i18n, loadingContext } = useCoreContext();\n    const getImage = useImage();\n    const [completed, setCompleted] = useState(false);\n    const [expired, setExpired] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [hasCalledActionHandled, setHasCalledActionHandled] = useState(false);\n    const [delay, setDelay] = useState(props.delay);\n    const [percentage, setPercentage] = useState(100);\n    const [timePassed, setTimePassed] = useState(0);\n    const [hasAdjustedTime, setHasAdjustedTime] = useState(false);\n    const [storedTimeout, setStoredTimeout] = useState(null);\n\n    const onTimeUp = (): void => {\n        setExpired(true);\n        clearTimeout(storedTimeout);\n        props.onError(new AdyenCheckoutError('ERROR', 'Payment Expired'));\n    };\n\n    const onTick = (time): void => {\n        setPercentage(time.percentage);\n    };\n\n    const onComplete = (status: StatusObject): void => {\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            setCompleted(true);\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send success response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Show error state & call merchant defined error callback if we do not have a payload\n        setExpired(true);\n        props.onError(new AdyenCheckoutError('ERROR', 'successful result, but no payload in response'));\n    };\n\n    const onError = (status: StatusObject): void => {\n        setExpired(true);\n\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send error response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Call merchant defined error callback if we do not have a payload\n        props.onError(new AdyenCheckoutError('ERROR', 'error result with no payload in response'));\n    };\n\n    const checkStatus = (): void => {\n        const { paymentData, clientKey, throttleInterval } = props;\n\n        if (!hasCalledActionHandled) {\n            props.onActionHandled({ componentType: props.type, actionDescription: 'polling-started' });\n            setHasCalledActionHandled(true);\n        }\n\n        checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval)\n            .then(processResponse)\n            .catch(({ message, ...response }) => ({\n                type: 'network-error',\n                props: {\n                    ...(message && { message: i18n.get(message) }),\n                    ...response\n                }\n            }))\n            .then((status: StatusObject) => {\n                switch (status.type) {\n                    case 'success':\n                        onComplete(status);\n                        break;\n\n                    case 'error':\n                        onError(status);\n                        break;\n\n                    default:\n                        setLoading(false);\n                }\n            });\n    };\n\n    const redirectToApp = (url): void => {\n        window.location.assign(url);\n    };\n\n    useEffect(() => {\n        checkStatus();\n        return (): void => {\n            clearTimeout(storedTimeout);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (expired) return clearTimeout(storedTimeout);\n\n        if (completed) return clearTimeout(storedTimeout);\n\n        if (!loading) {\n            // Retry until getting a complete response from the server OR it times out\n            // Changes setTimeout time to new value (throttleInterval) after a certain amount of time (throttleTime) has passed\n            const statusInterval = (): void => {\n                checkStatus();\n\n                const actualTimePassed = timePassed + delay;\n                // timePassed is the value that is the main \"engine\" that drives this useEffect/polling\n                setTimePassed(actualTimePassed);\n\n                if (actualTimePassed >= props.throttleTime && !hasAdjustedTime) {\n                    setDelay(props.throttleInterval);\n                    setHasAdjustedTime(true);\n                }\n            };\n\n            // Create (another) interval to poll for a result\n            setStoredTimeout(setTimeout(statusInterval, delay));\n        }\n    }, [loading, expired, completed, timePassed]);\n\n    const finalState = (image, message) => (\n        <div className=\"adyen-checkout__await adyen-checkout__await--result\">\n            <img\n                className=\"adyen-checkout__await__icon adyen-checkout__await__icon--result\"\n                src={getImage({ imageFolder: 'components/' })(image)}\n                alt={i18n.get(message)}\n            />\n            <div className=\"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result\">{i18n.get(message)}</div>\n        </div>\n    );\n\n    if (expired) {\n        return finalState('error', 'error.subtitle.payment');\n    }\n\n    if (completed) {\n        return finalState('success', 'creditCard.success');\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: 15,\n    onError: () => {},\n    onComplete: () => {},\n    onActionHandled: () => {},\n    delay: 2000,\n    throttleTime: 60000,\n    throttleInterval: 10000,\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n\nexport default Await;\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","getImage","useImage","completed","setCompleted","useState","expired","setExpired","loading","setLoading","hasCalledActionHandled","setHasCalledActionHandled","delay","setDelay","percentage","setPercentage","timePassed","setTimePassed","hasAdjustedTime","setHasAdjustedTime","storedTimeout","setStoredTimeout","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","clientKey","throttleInterval","onActionHandled","componentType","type","actionDescription","checkPaymentStatus","then","processResponse","catch","message","response","get","useEffect","clearTimeout","setTimeout","actualTimePassed","throttleTime","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","url","ContentSeparator","Button","onClick","redirectToApp","window","location","assign","label","defaultProps"],"mappings":"srBAgBA,SAASA,EAAMC,GACX,MAAMC,KAAEA,EAAIC,eAAEA,GAAmBC,IAC3BC,EAAWC,KACVC,EAAWC,GAAgBC,GAAS,IACpCC,EAASC,GAAcF,GAAS,IAChCG,EAASC,GAAcJ,GAAS,IAChCK,EAAwBC,GAA6BN,GAAS,IAC9DO,EAAOC,GAAYR,EAASR,EAAMe,QAClCE,EAAYC,GAAiBV,EAAS,MACtCW,EAAYC,GAAiBZ,EAAS,IACtCa,EAAiBC,GAAsBd,GAAS,IAChDe,EAAeC,GAAoBhB,EAAS,MAY7CiB,EAAcC,IAEhB,GAAIA,EAAO1B,MAAM2B,QAAS,CACtBpB,GAAa,GACb,MAAMqB,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAtB,GAAW,GACXV,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,iDAAA,EAG5CD,EAAWP,IAIb,GAHAhB,GAAW,GAGPgB,EAAO1B,MAAM2B,QAAS,CACtB,MAAMC,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAhC,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,4CAAA,EAG5CC,EAAc,KAChB,MAAMJ,YAAEA,EAAWK,UAAEA,EAASC,iBAAEA,GAAqBrC,EAEhDa,IACDb,EAAMsC,gBAAgB,CAAEC,cAAevC,EAAMwC,KAAMC,kBAAmB,oBACtE3B,GAA0B,IAG9B4B,EAAmBX,EAAaK,EAAWlC,EAAgBmC,GACtDM,KAAKC,GACLC,OAAM,EAAGC,aAAYC,MAAgB,CAClCP,KAAM,gBACNxC,MAAO,IACC8C,GAAW,CAAEA,QAAS7C,EAAK+C,IAAIF,OAChCC,OAGVJ,MAAMjB,IACH,OAAQA,EAAOc,MACX,IAAK,UACDf,EAAWC,GACX,MAEJ,IAAK,QACDO,EAAQP,GACR,MAEJ,QACId,GAAW,GACnB,GACJ,EAORqC,GAAU,KACNd,IACO,KACHe,aAAa3B,EAAAA,IAElB,IAEH0B,GAAU,KACN,GAAIxC,EAAS,OAAOyC,aAAa3B,GAEjC,GAAIjB,EAAW,OAAO4C,aAAa3B,GAEnC,IAAKZ,EAAS,CAiBVa,EAAiB2B,YAdM,KACnBhB,IAEA,MAAMiB,EAAmBjC,EAAaJ,EAEtCK,EAAcgC,GAEVA,GAAoBpD,EAAMqD,eAAiBhC,IAC3CL,EAAShB,EAAMqC,kBACff,GAAmB,GACvB,GAIwCP,GAChD,IACD,CAACJ,EAASF,EAASH,EAAWa,IAEjC,MAAMmC,EAAa,CAACC,EAAOT,IACvBU,EAACC,MAAAA,CAAIC,UAAU,uDACXF,EAACG,MAAAA,CACGD,UAAU,kEACVE,IAAKxD,EAAS,CAAEyD,YAAa,eAAxBzD,CAAyCmD,GAC9CO,IAAK7D,EAAK+C,IAAIF,KAElBU,EAACC,MAAAA,CAAIC,UAAU,2EAA2EzD,EAAK+C,IAAIF,KAI3G,GAAIrC,EACA,OAAO6C,EAAW,QAAS,0BAG/B,GAAIhD,EACA,OAAOgD,EAAW,UAAW,sBAGjC,GAAI3C,EACA,OACI6C,EAACC,MAAAA,CAAIC,UAAU,yBACV1D,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAC1EF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,WAKzC,MAAMC,EAAkBlE,EAAK+C,IAAI,uBAAuBoB,MAAM,MAE9D,OACIZ,EAACC,MAAAA,CACGC,UAAWW,EACP,wBACA,0BAA0BrE,EAAMwC,OAChCxC,EAAMsE,mBAAmBC,KAAIC,GAAK,0BAA0BA,QAG/DxE,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAE1EF,EAACC,MAAAA,CAAIC,UAAU,mCAAmC1D,EAAMyE,aAExDjB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,YAEjCV,EAACC,MAAAA,CAAIC,UAAU,yCAAyC1D,EAAM0E,YAGjE1E,EAAM2E,oBACHnB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAACoB,OAAAA,CAAKlB,UAAU,oCAAoCmB,MAAO,CAAEC,MAAO,GAAG7D,SAG3EuC,EAACC,MAAAA,CAAIC,UAAU,oCACVS,EAAgB,GAAG,IACpBX,EAACuB,EAAAA,CAAUC,eAAgBhF,EAAMiF,cAAeC,OAzKpDC,IACZjE,EAAciE,EAAKlE,WAAU,EAwKmDmE,YA/KnE,KACb1E,GAAW,GACXwC,aAAa3B,GACbvB,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,mBAAA,IA4K2D,IAClFiC,EAAgB,KAKlCnE,EAAMqF,KACH7B,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAAC8B,QACD9B,EAAC+B,EAAAA,CAAOjB,mBAAoB,CAAC,SAAUkB,QAAS,KAAMC,OAvG/CJ,EAuG6DrF,EAAMqF,SAtGtFK,OAAOC,SAASC,OAAOP,GADL,IAACA,CAuGsE,EAAGQ,MAAO5F,EAAK+C,IAAI,cAKpH,CAEAjD,EAAM+F,aAAe,CACjBb,cAAe,GACfhD,QAAS,OACTR,WAAY,OACZa,gBAAiB,OACjBvB,MAAO,IACPsC,aAAc,IACdhB,iBAAkB,IAClBsC,oBAAoB,EACpBL,mBAAoB,GACpBe,IAAK"}

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

@@ -1,2 +1,2 @@
-import{Component as e,createElement as t}from"../../../external/preact/dist/preact.js";import a from"../../../external/classnames/index.js";import s from"../Spinner/Spinner.js";import n from"../../../core/Context/useCoreContext.js";class i extends e{static defaultProps={status:"default",variant:"primary",disabled:!1,label:"",inline:!1,target:"_self",onClick:()=>{}};onClick=e=>{e.preventDefault(),this.props.disabled||this.props.onClick(e,{complete:this.complete})};complete=(e=1e3)=>{this.setState({completed:!0}),setTimeout((()=>{this.setState({completed:!1})}),e)};render({classNameModifiers:e=[],disabled:i,href:o,icon:r,inline:l,label:c,status:d,variant:p},{completed:m}){const{i18n:u}=n(),_=r?t("img",{className:"adyen-checkout__button__icon",src:r,alt:"","aria-hidden":"true"}):"",h=[...e,..."primary"!==p?[p]:[],...l?["inline"]:[],...m?["completed"]:[],..."loading"===d||"redirect"===d?["loading"]:[]],b=a(["adyen-checkout__button",...h.map((e=>`adyen-checkout__button--${e}`))]),f={loading:t(s,{size:"medium"}),redirect:t("span",{className:"adyen-checkout__button__content"},t(s,{size:"medium",inline:!0}),u.get("payButton.redirecting")),default:t("span",{className:"adyen-checkout__button__content"},_,t("span",{className:"adyen-checkout__button__text"},c))},k=f[d]||f.default;return o?t("a",{className:b,href:o,disabled:i,target:this.props.target,rel:this.props.rel},k):t("button",{className:b,type:"button",disabled:i,onClick:this.onClick},k,"loading"!==d&&"redirect"!==d&&this.props.children)}}export{i as default};
+import{Component as e,createElement as t}from"../../../external/preact/dist/preact.js";import a from"../../../external/classnames/index.js";import s from"../Spinner/Spinner.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";class n extends e{static defaultProps={status:"default",variant:"primary",disabled:!1,label:"",inline:!1,target:"_self",onClick:()=>{}};onClick=e=>{e.preventDefault(),this.props.disabled||this.props.onClick(e,{complete:this.complete})};complete=(e=1e3)=>{this.setState({completed:!0}),setTimeout((()=>{this.setState({completed:!1})}),e)};render({classNameModifiers:e=[],disabled:n,href:o,icon:r,inline:l,label:c,status:d,variant:p},{completed:m}){const{i18n:u}=i(),_=r?t("img",{className:"adyen-checkout__button__icon",src:r,alt:"","aria-hidden":"true"}):"",h=[...e,..."primary"!==p?[p]:[],...l?["inline"]:[],...m?["completed"]:[],..."loading"===d||"redirect"===d?["loading"]:[]],b=a(["adyen-checkout__button",...h.map((e=>`adyen-checkout__button--${e}`))]),f={loading:t(s,{size:"medium"}),redirect:t("span",{className:"adyen-checkout__button__content"},t(s,{size:"medium",inline:!0}),u.get("payButton.redirecting")),default:t("span",{className:"adyen-checkout__button__content"},_,t("span",{className:"adyen-checkout__button__text"},c))},k=f[d]||f.default;return o?t("a",{className:b,href:o,disabled:n,target:this.props.target,rel:this.props.rel},k):t("button",{className:b,type:"button",disabled:n,onClick:this.onClick},k,"loading"!==d&&"redirect"!==d&&this.props.children)}}export{n as default};
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/internal/Button/Button.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport Spinner from '../Spinner';\nimport useCoreContext from '../../../core/Context/useCoreContext';\nimport './Button.scss';\nimport { ButtonProps, ButtonState } from './types';\n\nclass Button extends Component<ButtonProps, ButtonState> {\n    public static defaultProps = {\n        status: 'default',\n        variant: 'primary',\n        disabled: false,\n        label: '',\n        inline: false,\n        target: '_self',\n        onClick: () => {}\n    };\n\n    public onClick = e => {\n        e.preventDefault();\n\n        if (!this.props.disabled) {\n            this.props.onClick(e, { complete: this.complete });\n        }\n    };\n\n    public complete = (delay = 1000) => {\n        this.setState({ completed: true });\n        setTimeout(() => {\n            this.setState({ completed: false });\n        }, delay);\n    };\n\n    render({ classNameModifiers = [], disabled, href, icon, inline, label, status, variant }, { completed }) {\n        const { i18n } = useCoreContext();\n\n        const buttonIcon = icon ? <img className=\"adyen-checkout__button__icon\" src={icon} alt=\"\" aria-hidden=\"true\" /> : '';\n\n        const modifiers = [\n            ...classNameModifiers,\n            ...(variant !== 'primary' ? [variant] : []),\n            ...(inline ? ['inline'] : []),\n            ...(completed ? ['completed'] : []),\n            ...(status === 'loading' || status === 'redirect' ? ['loading'] : [])\n        ];\n\n        const buttonClasses = classNames(['adyen-checkout__button', ...modifiers.map(m => `adyen-checkout__button--${m}`)]);\n\n        const buttonStates = {\n            loading: <Spinner size=\"medium\" />,\n            redirect: (\n                <span className=\"adyen-checkout__button__content\">\n                    <Spinner size=\"medium\" inline />\n                    {i18n.get('payButton.redirecting')}\n                </span>\n            ),\n            default: (\n                <span className=\"adyen-checkout__button__content\">\n                    {buttonIcon}\n                    <span className=\"adyen-checkout__button__text\">{label}</span>\n                </span>\n            )\n        };\n\n        const buttonText = buttonStates[status] || buttonStates.default;\n\n        if (href) {\n            return (\n                <a className={buttonClasses} href={href} disabled={disabled} target={this.props.target} rel={this.props.rel}>\n                    {buttonText}\n                </a>\n            );\n        }\n\n        return (\n            <button className={buttonClasses} type=\"button\" disabled={disabled} onClick={this.onClick}>\n                {buttonText}\n                {status !== 'loading' && status !== 'redirect' && this.props.children}\n            </button>\n        );\n    }\n}\n\nexport default Button;\n"],"names":["Button","Component","static","status","variant","disabled","label","inline","target","onClick","e","preventDefault","this","props","complete","delay","setState","completed","setTimeout","render","classNameModifiers","href","icon","i18n","useCoreContext","buttonIcon","h","img","className","src","alt","aria-hidden","modifiers","buttonClasses","classNames","map","m","buttonStates","loading","Spinner","size","redirect","span","get","default","buttonText","a","rel","button","type","children"],"mappings":"wOAOA,MAAMA,UAAeC,EACjBC,oBAA6B,CACzBC,OAAQ,UACRC,QAAS,UACTC,UAAU,EACVC,MAAO,GACPC,QAAQ,EACRC,OAAQ,QACRC,QAAS,QAGNA,QAAUC,IACbA,EAAEC,iBAEGC,KAAKC,MAAMR,UACZO,KAAKC,MAAMJ,QAAQC,EAAG,CAAEI,SAAUF,KAAKE,UAC3C,EAGGA,SAAW,CAACC,EAAQ,OACvBH,KAAKI,SAAS,CAAEC,WAAW,IAC3BC,YAAW,KACPN,KAAKI,SAAS,CAAEC,WAAW,GAAM,GAClCF,EAAAA,EAGPI,MAAAA,EAAOC,mBAAEA,EAAqB,GAAEf,SAAEA,EAAQgB,KAAEA,EAAIC,KAAEA,EAAIf,OAAEA,EAAMD,MAAEA,EAAKH,OAAEA,EAAMC,QAAEA,IAAWa,UAAEA,IACxF,MAAMM,KAAEA,GAASC,IAEXC,EAAaH,EAAOI,EAACC,MAAAA,CAAIC,UAAU,+BAA+BC,IAAKP,EAAMQ,IAAI,GAAGC,cAAY,SAAY,GAE5GC,EAAY,IACXZ,KACa,YAAZhB,EAAwB,CAACA,GAAW,MACpCG,EAAS,CAAC,UAAY,MACtBU,EAAY,CAAC,aAAe,MACjB,YAAXd,GAAmC,aAAXA,EAAwB,CAAC,WAAa,IAGhE8B,EAAgBC,EAAW,CAAC,4BAA6BF,EAAUG,KAAIC,GAAK,2BAA2BA,QAEvGC,EAAe,CACjBC,QAASZ,EAACa,EAAAA,CAAQC,KAAK,WACvBC,SACIf,EAACgB,OAAAA,CAAKd,UAAU,mCACZF,EAACa,EAAAA,CAAQC,KAAK,SAASjC,QAAAA,IACtBgB,EAAKoB,IAAI,0BAGlBC,QACIlB,EAACgB,OAAAA,CAAKd,UAAU,mCACXH,EACDC,EAACgB,OAAAA,CAAKd,UAAU,gCAAgCtB,KAKtDuC,EAAaR,EAAalC,IAAWkC,EAAaO,QAExD,OAAIvB,EAEIK,EAACoB,IAAAA,CAAElB,UAAWK,EAAeZ,KAAMA,EAAMhB,SAAUA,EAAUG,OAAQI,KAAKC,MAAML,OAAQuC,IAAKnC,KAAKC,MAAMkC,KACnGF,GAMTnB,EAACsB,SAAAA,CAAOpB,UAAWK,EAAegB,KAAK,SAAS5C,SAAUA,EAAUI,QAASG,KAAKH,SAC7EoC,EACW,YAAX1C,GAAmC,aAAXA,GAAyBS,KAAKC,MAAMqC,SAGzE"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/internal/Button/Button.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport Spinner from '../Spinner';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './Button.scss';\nimport { ButtonProps, ButtonState } from './types';\n\nclass Button extends Component<ButtonProps, ButtonState> {\n    public static defaultProps = {\n        status: 'default',\n        variant: 'primary',\n        disabled: false,\n        label: '',\n        inline: false,\n        target: '_self',\n        onClick: () => {}\n    };\n\n    public onClick = e => {\n        e.preventDefault();\n\n        if (!this.props.disabled) {\n            this.props.onClick(e, { complete: this.complete });\n        }\n    };\n\n    public complete = (delay = 1000) => {\n        this.setState({ completed: true });\n        setTimeout(() => {\n            this.setState({ completed: false });\n        }, delay);\n    };\n\n    render({ classNameModifiers = [], disabled, href, icon, inline, label, status, variant }, { completed }) {\n        const { i18n } = useCoreContext();\n\n        const buttonIcon = icon ? <img className=\"adyen-checkout__button__icon\" src={icon} alt=\"\" aria-hidden=\"true\" /> : '';\n\n        const modifiers = [\n            ...classNameModifiers,\n            ...(variant !== 'primary' ? [variant] : []),\n            ...(inline ? ['inline'] : []),\n            ...(completed ? ['completed'] : []),\n            ...(status === 'loading' || status === 'redirect' ? ['loading'] : [])\n        ];\n\n        const buttonClasses = classNames(['adyen-checkout__button', ...modifiers.map(m => `adyen-checkout__button--${m}`)]);\n\n        const buttonStates = {\n            loading: <Spinner size=\"medium\" />,\n            redirect: (\n                <span className=\"adyen-checkout__button__content\">\n                    <Spinner size=\"medium\" inline />\n                    {i18n.get('payButton.redirecting')}\n                </span>\n            ),\n            default: (\n                <span className=\"adyen-checkout__button__content\">\n                    {buttonIcon}\n                    <span className=\"adyen-checkout__button__text\">{label}</span>\n                </span>\n            )\n        };\n\n        const buttonText = buttonStates[status] || buttonStates.default;\n\n        if (href) {\n            return (\n                <a className={buttonClasses} href={href} disabled={disabled} target={this.props.target} rel={this.props.rel}>\n                    {buttonText}\n                </a>\n            );\n        }\n\n        return (\n            <button className={buttonClasses} type=\"button\" disabled={disabled} onClick={this.onClick}>\n                {buttonText}\n                {status !== 'loading' && status !== 'redirect' && this.props.children}\n            </button>\n        );\n    }\n}\n\nexport default Button;\n"],"names":["Button","Component","static","status","variant","disabled","label","inline","target","onClick","e","preventDefault","this","props","complete","delay","setState","completed","setTimeout","render","classNameModifiers","href","icon","i18n","useCoreContext","buttonIcon","h","img","className","src","alt","aria-hidden","modifiers","buttonClasses","classNames","map","m","buttonStates","loading","Spinner","size","redirect","span","get","default","buttonText","a","rel","button","type","children"],"mappings":"wPAOA,MAAMA,UAAeC,EACjBC,oBAA6B,CACzBC,OAAQ,UACRC,QAAS,UACTC,UAAU,EACVC,MAAO,GACPC,QAAQ,EACRC,OAAQ,QACRC,QAAS,QAGNA,QAAUC,IACbA,EAAEC,iBAEGC,KAAKC,MAAMR,UACZO,KAAKC,MAAMJ,QAAQC,EAAG,CAAEI,SAAUF,KAAKE,UAC3C,EAGGA,SAAW,CAACC,EAAQ,OACvBH,KAAKI,SAAS,CAAEC,WAAW,IAC3BC,YAAW,KACPN,KAAKI,SAAS,CAAEC,WAAW,GAAM,GAClCF,EAAAA,EAGPI,MAAAA,EAAOC,mBAAEA,EAAqB,GAAEf,SAAEA,EAAQgB,KAAEA,EAAIC,KAAEA,EAAIf,OAAEA,EAAMD,MAAEA,EAAKH,OAAEA,EAAMC,QAAEA,IAAWa,UAAEA,IACxF,MAAMM,KAAEA,GAASC,IAEXC,EAAaH,EAAOI,EAACC,MAAAA,CAAIC,UAAU,+BAA+BC,IAAKP,EAAMQ,IAAI,GAAGC,cAAY,SAAY,GAE5GC,EAAY,IACXZ,KACa,YAAZhB,EAAwB,CAACA,GAAW,MACpCG,EAAS,CAAC,UAAY,MACtBU,EAAY,CAAC,aAAe,MACjB,YAAXd,GAAmC,aAAXA,EAAwB,CAAC,WAAa,IAGhE8B,EAAgBC,EAAW,CAAC,4BAA6BF,EAAUG,KAAIC,GAAK,2BAA2BA,QAEvGC,EAAe,CACjBC,QAASZ,EAACa,EAAAA,CAAQC,KAAK,WACvBC,SACIf,EAACgB,OAAAA,CAAKd,UAAU,mCACZF,EAACa,EAAAA,CAAQC,KAAK,SAASjC,QAAAA,IACtBgB,EAAKoB,IAAI,0BAGlBC,QACIlB,EAACgB,OAAAA,CAAKd,UAAU,mCACXH,EACDC,EAACgB,OAAAA,CAAKd,UAAU,gCAAgCtB,KAKtDuC,EAAaR,EAAalC,IAAWkC,EAAaO,QAExD,OAAIvB,EAEIK,EAACoB,IAAAA,CAAElB,UAAWK,EAAeZ,KAAMA,EAAMhB,SAAUA,EAAUG,OAAQI,KAAKC,MAAML,OAAQuC,IAAKnC,KAAKC,MAAMkC,KACnGF,GAMTnB,EAACsB,SAAAA,CAAOpB,UAAWK,EAAegB,KAAK,SAAS5C,SAAUA,EAAUI,QAASG,KAAKH,SAC7EoC,EACW,YAAX1C,GAAmC,aAAXA,GAAyBS,KAAKC,MAAMqC,SAGzE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CtPCards.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPSingleCard from './CtPSingleCard/CtPSingleCard';\nimport PayButton from '../../../PayButton';\nimport { amountLabel } from '../../../PayButton/utils';\nimport CtPCardsList from './CtPCardsList';\nimport ShopperCard from '../../models/ShopperCard';\nimport SrciError from '../../services/sdks/SrciError';\nimport CtPSection from '../CtPSection';\nimport { CTP_IFRAME_NAME } from '../../services/utils';\nimport Iframe from '../../../../internal/IFrame';\nimport useImage from '../../../../../core/Context/useImage';\nimport useCoreContext from '../../../../../core/Context/useCoreContext';\nimport isMobile from '../../../../../utils/isMobile';\nimport Language from '../../../../../language';\nimport { PaymentAmount } from '../../../../../types/global-types';\nimport './CtPCards.scss';\n\ntype CtPCardsProps = {\n    onDisplayCardComponent?(): void;\n};\n\nfunction getErrorLabel(errorCode: string, i18n: Language): string {\n    if (!errorCode) return null;\n\n    const errorLabel = i18n.get(`ctp.errors.${errorCode}`);\n    if (errorLabel.includes('ctp.errors')) return i18n.get(`ctp.errors.UNKNOWN_ERROR`);\n    return errorLabel;\n}\n\nfunction getPayButtonLabel(i18n: Language, amount: PaymentAmount, checkoutCard?: ShopperCard): string | null {\n    if (!checkoutCard) return i18n.get('payButton');\n    if (!isMobile())\n        return i18n.get('payButton.with', {\n            values: { value: amountLabel(i18n, amount), maskedData: `•••• ${checkoutCard?.panLastFour}` }\n        });\n    return null;\n}\n\nconst CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { amount, cards, checkout, isCtpPrimaryPaymentMethod, status, onSubmit, onSetStatus, onError } = useClickToPayContext();\n    const [checkoutCard, setCheckoutCard] = useState<ShopperCard | undefined>(cards.find(card => !card.isExpired) || cards[0]);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const isEveryCardExpired = cards.every(card => card.isExpired);\n    const [isShopperCheckingOutWithCtp, setIsShopperCheckingOutWithCtp] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (cards.length === 0 || isEveryCardExpired) {\n            onDisplayCardComponent?.();\n        }\n    }, [onDisplayCardComponent, isEveryCardExpired, cards]);\n\n    const doCheckout = useCallback(async () => {\n        if (!checkoutCard) return;\n\n        try {\n            setIsShopperCheckingOutWithCtp(true);\n            setErrorCode(null);\n            onSetStatus('loading');\n            const payload = await checkout(checkoutCard);\n            onSubmit(payload);\n        } catch (error) {\n            if (error instanceof SrciError) {\n                setErrorCode(error?.reason);\n                console.warn(`CtP - Checkout: Reason: ${error?.reason} / Source: ${error?.source} / Scheme: ${error?.scheme}`);\n            }\n            setIsShopperCheckingOutWithCtp(false);\n            onError(error);\n        }\n    }, [checkout, checkoutCard]);\n\n    const handleOnChangeCard = useCallback((card: ShopperCard) => {\n        setCheckoutCard(card);\n    }, []);\n\n    /**\n     * If shopper submits the payment using the default Card component while CtP is rendered, the status here will be updated\n     * and that can potentially display an iframe.\n     *\n     * Therefore, we use the flag 'isShopperCheckingOutWithCtp' to flag that the iframe should be displayed only in case the\n     * Shopper is checking out with Click to Pay.\n     */\n    const displayNetworkDcf = isShopperCheckingOutWithCtp && status === 'loading' && checkoutCard?.isDcfPopupEmbedded;\n    const displayCardCheckoutView = status !== 'loading' || !displayNetworkDcf;\n\n    return (\n        <Fragment>\n            <Iframe name={CTP_IFRAME_NAME} height=\"380\" width=\"100%\" classNameModifiers={[displayNetworkDcf ? '' : 'hidden']} />\n\n            {displayCardCheckoutView && (\n                <Fragment>\n                    <CtPSection.Title>{i18n.get('ctp.cards.title')}</CtPSection.Title>\n                    <CtPSection.Text>{i18n.get('ctp.cards.subtitle')}</CtPSection.Text>\n\n                    {cards.length === 0 && <div className=\"adyen-checkout-ctp__empty-cards\">{i18n.get('ctp.emptyProfile.message')}</div>}\n                    {cards.length === 1 && <CtPSingleCard card={cards[0]} errorMessage={getErrorLabel(errorCode, i18n)} />}\n                    {cards.length > 1 && (\n                        <CtPCardsList\n                            cardSelected={checkoutCard}\n                            cards={cards}\n                            onChangeCard={handleOnChangeCard}\n                            errorMessage={getErrorLabel(errorCode, i18n)}\n                        />\n                    )}\n\n                    <PayButton\n                        disabled={isEveryCardExpired}\n                        amount={amount}\n                        label={getPayButtonLabel(i18n, amount, checkoutCard)}\n                        status={status}\n                        variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                        icon={cards.length !== 0 && getImage({ imageFolder: 'components/' })(isCtpPrimaryPaymentMethod ? 'lock' : 'lock_black')}\n                        onClick={doCheckout}\n                    />\n                </Fragment>\n            )}\n        </Fragment>\n    );\n};\n\nexport default CtPCards;\n"],"names":["getErrorLabel","errorCode","i18n","errorLabel","get","includes","getPayButtonLabel","amount","checkoutCard","isMobile","values","value","amountLabel","maskedData","panLastFour","CtPCards","onDisplayCardComponent","useCoreContext","getImage","useImage","cards","checkout","isCtpPrimaryPaymentMethod","status","onSubmit","onSetStatus","onError","useClickToPayContext","setCheckoutCard","useState","find","card","isExpired","setErrorCode","isEveryCardExpired","every","isShopperCheckingOutWithCtp","setIsShopperCheckingOutWithCtp","useEffect","length","doCheckout","useCallback","async","payload","error","SrciError","reason","console","warn","source","scheme","handleOnChangeCard","displayNetworkDcf","isDcfPopupEmbedded","displayCardCheckoutView","h","Fragment","Iframe","name","CTP_IFRAME_NAME","height","width","classNameModifiers","CtPSection","Title","Text","div","className","CtPSingleCard","errorMessage","CtPCardsList","cardSelected","onChangeCard","PayButton","disabled","label","variant","icon","imageFolder","onClick"],"mappings":"wyBAuBA,SAASA,EAAcC,EAAmBC,GACtC,IAAKD,EAAW,OAAO,KAEvB,MAAME,EAAaD,EAAKE,IAAI,cAAcH,KAC1C,OAAIE,EAAWE,SAAS,cAAsBH,EAAKE,IAAI,4BAChDD,CACX,CAEA,SAASG,EAAkBJ,EAAgBK,EAAuBC,GAC9D,OAAKA,EACAC,IAIE,KAHIP,EAAKE,IAAI,iBAAkB,CAC9BM,OAAQ,CAAEC,MAAOC,EAAYV,EAAMK,GAASM,WAAY,QAAQL,GAAcM,iBAH5DZ,EAAKE,IAAI,YAMvC,CAEA,MAAMW,EAAW,EAAGC,6BAChB,MAAMd,KAAEA,GAASe,IACXC,EAAWC,KACXZ,OAAEA,EAAMa,MAAEA,EAAKC,SAAEA,EAAQC,0BAAEA,EAAyBC,OAAEA,EAAMC,SAAEA,EAAQC,YAAEA,EAAWC,QAAEA,GAAYC,KAChGnB,EAAcoB,GAAmBC,EAAkCT,EAAMU,MAAKC,IAASA,EAAKC,aAAcZ,EAAM,KAChHnB,EAAWgC,GAAgBJ,EAAiB,MAC7CK,EAAqBd,EAAMe,OAAMJ,GAAQA,EAAKC,aAC7CI,EAA6BC,GAAkCR,GAAkB,GAExFS,GAAU,MACe,IAAjBlB,EAAMmB,QAAgBL,IACtBlB,KACJ,GACD,CAACA,EAAwBkB,EAAoBd,IAEhD,MAAMoB,EAAaC,GAAYC,UAC3B,GAAKlC,EAEL,IACI6B,GAA+B,GAC/BJ,EAAa,MACbR,EAAY,WACZ,MAAMkB,QAAgBtB,EAASb,GAC/BgB,EAASmB,EACb,CAAE,MAAOC,GACDA,aAAiBC,IACjBZ,EAAaW,GAAOE,QACpBC,QAAQC,KAAK,2BAA2BJ,GAAOE,oBAAoBF,GAAOK,oBAAoBL,GAAOM,WAEzGb,GAA+B,GAC/BX,EAAQkB,EACZ,IACD,CAACvB,EAAUb,IAER2C,EAAqBV,GAAaV,IACpCH,EAAgBG,EAAAA,GACjB,IASGqB,EAAoBhB,GAA0C,YAAXb,GAAwBf,GAAc6C,mBACzFC,EAAqC,YAAX/B,IAAyB6B,EAEzD,OACIG,EAACC,OACGD,EAACE,EAAAA,CAAOC,KAAMC,EAAiBC,OAAO,MAAMC,MAAM,OAAOC,mBAAoB,CAACV,EAAoB,GAAK,YAEtGE,GACGC,EAACC,OACGD,EAACQ,EAAWC,MAAO9D,KAAAA,EAAKE,IAAI,oBAC5BmD,EAACQ,EAAWE,KAAI,KAAE/D,EAAKE,IAAI,uBAET,IAAjBgB,EAAMmB,QAAgBgB,EAACW,MAAAA,CAAIC,UAAU,mCAAmCjE,EAAKE,IAAI,6BAChE,IAAjBgB,EAAMmB,QAAgBgB,EAACa,EAAAA,CAAcrC,KAAMX,EAAM,GAAIiD,aAAcrE,EAAcC,EAAWC,KAC5FkB,EAAMmB,OAAS,GACZgB,EAACe,EAAAA,CACGC,aAAc/D,EACdY,MAAOA,EACPoD,aAAcrB,EACdkB,aAAcrE,EAAcC,EAAWC,KAI/CqD,EAACkB,EAAAA,CACGC,SAAUxC,EACV3B,OAAQA,EACRoE,MAAOrE,EAAkBJ,EAAMK,EAAQC,GACvCe,OAAQA,EACRqD,QAAStD,EAA4B,UAAY,YACjDuD,KAAuB,IAAjBzD,EAAMmB,QAAgBrB,EAAS,CAAE4D,YAAa,eAAxB5D,CAAyCI,EAA4B,OAAS,cAC1GyD,QAASvC"}
+{"version":3,"file":"CtPCards.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPSingleCard from './CtPSingleCard/CtPSingleCard';\nimport PayButton from '../../../PayButton';\nimport { amountLabel } from '../../../PayButton/utils';\nimport CtPCardsList from './CtPCardsList';\nimport ShopperCard from '../../models/ShopperCard';\nimport SrciError from '../../services/sdks/SrciError';\nimport CtPSection from '../CtPSection';\nimport { CTP_IFRAME_NAME } from '../../services/utils';\nimport Iframe from '../../../../internal/IFrame';\nimport useImage from '../../../../../core/Context/useImage';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport isMobile from '../../../../../utils/isMobile';\nimport Language from '../../../../../language';\nimport { PaymentAmount } from '../../../../../types/global-types';\nimport './CtPCards.scss';\n\ntype CtPCardsProps = {\n    onDisplayCardComponent?(): void;\n};\n\nfunction getErrorLabel(errorCode: string, i18n: Language): string {\n    if (!errorCode) return null;\n\n    const errorLabel = i18n.get(`ctp.errors.${errorCode}`);\n    if (errorLabel.includes('ctp.errors')) return i18n.get(`ctp.errors.UNKNOWN_ERROR`);\n    return errorLabel;\n}\n\nfunction getPayButtonLabel(i18n: Language, amount: PaymentAmount, checkoutCard?: ShopperCard): string | null {\n    if (!checkoutCard) return i18n.get('payButton');\n    if (!isMobile())\n        return i18n.get('payButton.with', {\n            values: { value: amountLabel(i18n, amount), maskedData: `•••• ${checkoutCard?.panLastFour}` }\n        });\n    return null;\n}\n\nconst CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { amount, cards, checkout, isCtpPrimaryPaymentMethod, status, onSubmit, onSetStatus, onError } = useClickToPayContext();\n    const [checkoutCard, setCheckoutCard] = useState<ShopperCard | undefined>(cards.find(card => !card.isExpired) || cards[0]);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const isEveryCardExpired = cards.every(card => card.isExpired);\n    const [isShopperCheckingOutWithCtp, setIsShopperCheckingOutWithCtp] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (cards.length === 0 || isEveryCardExpired) {\n            onDisplayCardComponent?.();\n        }\n    }, [onDisplayCardComponent, isEveryCardExpired, cards]);\n\n    const doCheckout = useCallback(async () => {\n        if (!checkoutCard) return;\n\n        try {\n            setIsShopperCheckingOutWithCtp(true);\n            setErrorCode(null);\n            onSetStatus('loading');\n            const payload = await checkout(checkoutCard);\n            onSubmit(payload);\n        } catch (error) {\n            if (error instanceof SrciError) {\n                setErrorCode(error?.reason);\n                console.warn(`CtP - Checkout: Reason: ${error?.reason} / Source: ${error?.source} / Scheme: ${error?.scheme}`);\n            }\n            setIsShopperCheckingOutWithCtp(false);\n            onError(error);\n        }\n    }, [checkout, checkoutCard]);\n\n    const handleOnChangeCard = useCallback((card: ShopperCard) => {\n        setCheckoutCard(card);\n    }, []);\n\n    /**\n     * If shopper submits the payment using the default Card component while CtP is rendered, the status here will be updated\n     * and that can potentially display an iframe.\n     *\n     * Therefore, we use the flag 'isShopperCheckingOutWithCtp' to flag that the iframe should be displayed only in case the\n     * Shopper is checking out with Click to Pay.\n     */\n    const displayNetworkDcf = isShopperCheckingOutWithCtp && status === 'loading' && checkoutCard?.isDcfPopupEmbedded;\n    const displayCardCheckoutView = status !== 'loading' || !displayNetworkDcf;\n\n    return (\n        <Fragment>\n            <Iframe name={CTP_IFRAME_NAME} height=\"380\" width=\"100%\" classNameModifiers={[displayNetworkDcf ? '' : 'hidden']} />\n\n            {displayCardCheckoutView && (\n                <Fragment>\n                    <CtPSection.Title>{i18n.get('ctp.cards.title')}</CtPSection.Title>\n                    <CtPSection.Text>{i18n.get('ctp.cards.subtitle')}</CtPSection.Text>\n\n                    {cards.length === 0 && <div className=\"adyen-checkout-ctp__empty-cards\">{i18n.get('ctp.emptyProfile.message')}</div>}\n                    {cards.length === 1 && <CtPSingleCard card={cards[0]} errorMessage={getErrorLabel(errorCode, i18n)} />}\n                    {cards.length > 1 && (\n                        <CtPCardsList\n                            cardSelected={checkoutCard}\n                            cards={cards}\n                            onChangeCard={handleOnChangeCard}\n                            errorMessage={getErrorLabel(errorCode, i18n)}\n                        />\n                    )}\n\n                    <PayButton\n                        disabled={isEveryCardExpired}\n                        amount={amount}\n                        label={getPayButtonLabel(i18n, amount, checkoutCard)}\n                        status={status}\n                        variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                        icon={cards.length !== 0 && getImage({ imageFolder: 'components/' })(isCtpPrimaryPaymentMethod ? 'lock' : 'lock_black')}\n                        onClick={doCheckout}\n                    />\n                </Fragment>\n            )}\n        </Fragment>\n    );\n};\n\nexport default CtPCards;\n"],"names":["getErrorLabel","errorCode","i18n","errorLabel","get","includes","getPayButtonLabel","amount","checkoutCard","isMobile","values","value","amountLabel","maskedData","panLastFour","CtPCards","onDisplayCardComponent","useCoreContext","getImage","useImage","cards","checkout","isCtpPrimaryPaymentMethod","status","onSubmit","onSetStatus","onError","useClickToPayContext","setCheckoutCard","useState","find","card","isExpired","setErrorCode","isEveryCardExpired","every","isShopperCheckingOutWithCtp","setIsShopperCheckingOutWithCtp","useEffect","length","doCheckout","useCallback","async","payload","error","SrciError","reason","console","warn","source","scheme","handleOnChangeCard","displayNetworkDcf","isDcfPopupEmbedded","displayCardCheckoutView","h","Fragment","Iframe","name","CTP_IFRAME_NAME","height","width","classNameModifiers","CtPSection","Title","Text","div","className","CtPSingleCard","errorMessage","CtPCardsList","cardSelected","onChangeCard","PayButton","disabled","label","variant","icon","imageFolder","onClick"],"mappings":"wzBAuBA,SAASA,EAAcC,EAAmBC,GACtC,IAAKD,EAAW,OAAO,KAEvB,MAAME,EAAaD,EAAKE,IAAI,cAAcH,KAC1C,OAAIE,EAAWE,SAAS,cAAsBH,EAAKE,IAAI,4BAChDD,CACX,CAEA,SAASG,EAAkBJ,EAAgBK,EAAuBC,GAC9D,OAAKA,EACAC,IAIE,KAHIP,EAAKE,IAAI,iBAAkB,CAC9BM,OAAQ,CAAEC,MAAOC,EAAYV,EAAMK,GAASM,WAAY,QAAQL,GAAcM,iBAH5DZ,EAAKE,IAAI,YAMvC,CAEA,MAAMW,EAAW,EAAGC,6BAChB,MAAMd,KAAEA,GAASe,IACXC,EAAWC,KACXZ,OAAEA,EAAMa,MAAEA,EAAKC,SAAEA,EAAQC,0BAAEA,EAAyBC,OAAEA,EAAMC,SAAEA,EAAQC,YAAEA,EAAWC,QAAEA,GAAYC,KAChGnB,EAAcoB,GAAmBC,EAAkCT,EAAMU,MAAKC,IAASA,EAAKC,aAAcZ,EAAM,KAChHnB,EAAWgC,GAAgBJ,EAAiB,MAC7CK,EAAqBd,EAAMe,OAAMJ,GAAQA,EAAKC,aAC7CI,EAA6BC,GAAkCR,GAAkB,GAExFS,GAAU,MACe,IAAjBlB,EAAMmB,QAAgBL,IACtBlB,KACJ,GACD,CAACA,EAAwBkB,EAAoBd,IAEhD,MAAMoB,EAAaC,GAAYC,UAC3B,GAAKlC,EAEL,IACI6B,GAA+B,GAC/BJ,EAAa,MACbR,EAAY,WACZ,MAAMkB,QAAgBtB,EAASb,GAC/BgB,EAASmB,EACb,CAAE,MAAOC,GACDA,aAAiBC,IACjBZ,EAAaW,GAAOE,QACpBC,QAAQC,KAAK,2BAA2BJ,GAAOE,oBAAoBF,GAAOK,oBAAoBL,GAAOM,WAEzGb,GAA+B,GAC/BX,EAAQkB,EACZ,IACD,CAACvB,EAAUb,IAER2C,EAAqBV,GAAaV,IACpCH,EAAgBG,EAAAA,GACjB,IASGqB,EAAoBhB,GAA0C,YAAXb,GAAwBf,GAAc6C,mBACzFC,EAAqC,YAAX/B,IAAyB6B,EAEzD,OACIG,EAACC,OACGD,EAACE,EAAAA,CAAOC,KAAMC,EAAiBC,OAAO,MAAMC,MAAM,OAAOC,mBAAoB,CAACV,EAAoB,GAAK,YAEtGE,GACGC,EAACC,OACGD,EAACQ,EAAWC,MAAO9D,KAAAA,EAAKE,IAAI,oBAC5BmD,EAACQ,EAAWE,KAAI,KAAE/D,EAAKE,IAAI,uBAET,IAAjBgB,EAAMmB,QAAgBgB,EAACW,MAAAA,CAAIC,UAAU,mCAAmCjE,EAAKE,IAAI,6BAChE,IAAjBgB,EAAMmB,QAAgBgB,EAACa,EAAAA,CAAcrC,KAAMX,EAAM,GAAIiD,aAAcrE,EAAcC,EAAWC,KAC5FkB,EAAMmB,OAAS,GACZgB,EAACe,EAAAA,CACGC,aAAc/D,EACdY,MAAOA,EACPoD,aAAcrB,EACdkB,aAAcrE,EAAcC,EAAWC,KAI/CqD,EAACkB,EAAAA,CACGC,SAAUxC,EACV3B,OAAQA,EACRoE,MAAOrE,EAAkBJ,EAAMK,EAAQC,GACvCe,OAAQA,EACRqD,QAAStD,EAA4B,UAAY,YACjDuD,KAAuB,IAAjBzD,EAAMmB,QAAgBrB,EAAS,CAAE4D,YAAa,eAAxB5D,CAAyCI,EAA4B,OAAS,cAC1GyD,QAASvC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport useCoreContext from '../../../../../../core/Context/useCoreContext';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCardsListProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field name=\"clickToPayCards\" errorMessage={errorMessage} readOnly={status === 'loading'}>\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'cards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","readOnly","Select","selectedValue","filterable","className","readonly","onChange"],"mappings":"2jBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,GAAQ,IACXf,EAAMgB,KAAIC,IAAS,CACtBC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,eAEpB,CAAC1B,IAQJ,OANA8B,GAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,MAAKd,GAAQA,EAAKJ,mBAAqBA,IAC1DX,EAAae,EAAAA,GACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CAAMZ,KAAK,kBAAkBpB,aAAcA,EAAciC,SAAqB,YAAX3B,GAChEyB,EAACG,EAAAA,CACGrB,MAAOA,EACPsB,cAAe1B,EAAwB,iBACvCW,KAAM,QACNgB,YAAY,EACZC,UAAW,0CACXC,SAAqB,YAAXhC,EACViC,SAAU/B,EAAgB"}
+{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCardsListProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field name=\"clickToPayCards\" errorMessage={errorMessage} readOnly={status === 'loading'}>\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'cards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","readOnly","Select","selectedValue","filterable","className","readonly","onChange"],"mappings":"2kBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,GAAQ,IACXf,EAAMgB,KAAIC,IAAS,CACtBC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,eAEpB,CAAC1B,IAQJ,OANA8B,GAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,MAAKd,GAAQA,EAAKJ,mBAAqBA,IAC1DX,EAAae,EAAAA,GACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CAAMZ,KAAK,kBAAkBpB,aAAcA,EAAciC,SAAqB,YAAX3B,GAChEyB,EAACG,EAAAA,CACGrB,MAAOA,EACPsB,cAAe1B,EAAwB,iBACvCW,KAAM,QACNgB,YAAY,EACZC,UAAW,0CACXC,SAAqB,YAAXhC,EACViC,SAAU/B,EAAgB"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../../../external/preact/dist/preact.js";import a from"../../../../../../external/classnames/index.js";import r from"../../../../Img/Img.js";import s from"../../../../../../core/Context/useCoreContext.js";import c from"../../../../../../core/Context/useImage.js";const o=({card:o,errorMessage:i})=>{const{i18n:n}=s(),d=c(),m=o.artUri||d()(o.scheme);return e(t,null,e("div",{className:"adyen-checkout-ctp__card-list-single-card"},e(r,{src:m,height:24,className:"adyen-checkout-ctp__card-image"}),e("span",{className:a({"adyen-checkout-ctp__card-list-single-card-expired":o.isExpired})},o.title," ",`•••• ${o.panLastFour}`),o.isExpired&&e("span",{className:"adyen-checkout-ctp__expired-label"},n.get("ctp.cards.expiredCard"))),i&&e("div",{className:"adyen-checkout-contextual-text--error"},i))};export{o as default};
+import{createElement as e,Fragment as r}from"../../../../../../external/preact/dist/preact.js";import a from"../../../../../../external/classnames/index.js";import t from"../../../../Img/Img.js";import{useCoreContext as s}from"../../../../../../core/Context/CoreProvider.js";import c from"../../../../../../core/Context/useImage.js";const o=({card:o,errorMessage:i})=>{const{i18n:d}=s(),n=c(),m=o.artUri||n()(o.scheme);return e(r,null,e("div",{className:"adyen-checkout-ctp__card-list-single-card"},e(t,{src:m,height:24,className:"adyen-checkout-ctp__card-image"}),e("span",{className:a({"adyen-checkout-ctp__card-list-single-card-expired":o.isExpired})},o.title," ",`•••• ${o.panLastFour}`),o.isExpired&&e("span",{className:"adyen-checkout-ctp__expired-label"},d.get("ctp.cards.expiredCard"))),i&&e("div",{className:"adyen-checkout-contextual-text--error"},i))};export{o as default};
 //# sourceMappingURL=CtPSingleCard.js.map

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

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

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

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

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

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

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

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

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

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