@adyen/adyen-web 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -1 +1 @@
-{"version":3,"file":"validate.js","sources":["../../../../../src/components/internal/Address/validate.ts"],"sourcesContent":["import { ValidatorRules, ValidatorRule } from '../../../utils/Validator/types';\nimport { countrySpecificFormatters } from './validate.formats';\nimport { ERROR_KEY_REQUIRED } from '../../../core/Errors/constants';\nimport { isEmpty } from '../../../utils/validator-utils';\n\nconst createPatternByDigits = (digits: number) => {\n    return {\n        pattern: new RegExp(`\\\\d{${digits}}`)\n    };\n};\n\nconst validatePostalCode = (val: string, countryCode: string, validatorRules: ValidatorRules) => {\n    if (countryCode) {\n        // If there is no value, we display the 'required' error message\n        if (isEmpty(val)) return null;\n\n        // Dynamically create errorMessage\n        (validatorRules.postalCode as ValidatorRule).errorMessage = {\n            translationKey: 'invalidFormatExpects',\n            translationObject: {\n                values: {\n                    format: countrySpecificFormatters[countryCode]?.postalCode.format || null\n                }\n            }\n        };\n\n        const pattern = postalCodePatterns[countryCode]?.pattern;\n        return pattern ? pattern.test(val) : !!val; // No pattern? Accept any, filled, value.\n    }\n    // Default rule\n    return isEmpty(val) ? null : true;\n};\n\nconst postalCodePatterns = {\n    AT: createPatternByDigits(4),\n    AU: createPatternByDigits(4),\n    BE: { pattern: /(?:(?:[1-9])(?:\\d{3}))/ },\n    BG: createPatternByDigits(4),\n    BR: { pattern: /^\\d{5}-?\\d{3}$/ },\n    CA: { pattern: /(?:[ABCEGHJ-NPRSTVXY]\\d[A-Z][ -]?\\d[A-Z]\\d)/ },\n    CH: { pattern: /[1-9]\\d{3}/ },\n    CY: createPatternByDigits(4),\n    CZ: { pattern: /\\d{3}\\s?\\d{2}/ },\n    DE: createPatternByDigits(5),\n    DK: createPatternByDigits(4),\n    EE: createPatternByDigits(5),\n    ES: { pattern: /(?:0[1-9]|[1-4]\\d|5[0-2])\\d{3}/ },\n    FI: createPatternByDigits(5),\n    FR: createPatternByDigits(5),\n    GB: { pattern: /^([A-Za-z][A-Ha-hK-Yk-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/ },\n    GE: createPatternByDigits(4),\n    GR: { pattern: /^\\d{3}\\s{0,1}\\d{2}$/ },\n    HR: { pattern: /^([1-5])[0-9]{4}$/ },\n    HU: createPatternByDigits(4),\n    IE: { pattern: /(?:^[AC-FHKNPRTV-Y][0-9]{2}|D6W)[ -]?[0-9AC-FHKNPRTV-Y]{4}/ },\n    IS: createPatternByDigits(3),\n    IT: createPatternByDigits(5),\n    LI: createPatternByDigits(4),\n    LT: { pattern: /^(LT-\\d{5})$/ },\n    LU: createPatternByDigits(4),\n    LV: { pattern: /^(LV-)[0-9]{4}$/ },\n    MC: { pattern: /^980\\d{2}$/ },\n    MT: { pattern: /^[A-Za-z]{3}\\d{4}$/ },\n    MY: createPatternByDigits(5),\n    NL: { pattern: /(?:NL-)?(?:[1-9]\\d{3} ?(?:[A-EGHJ-NPRTVWXZ][A-EGHJ-NPRSTVWXZ]|S[BCEGHJ-NPRTVWXZ]))/ },\n    NO: createPatternByDigits(4),\n    PL: { pattern: /^\\d{2}[-]{0,1}\\d{3}$/ },\n    PT: { pattern: /^([1-9]\\d{3})([- ]?(\\d{3})? *)$/ },\n    RO: createPatternByDigits(6),\n    SI: createPatternByDigits(4),\n    SE: createPatternByDigits(5),\n    SG: createPatternByDigits(6),\n    SK: createPatternByDigits(5),\n    US: createPatternByDigits(5)\n};\n\n/**\n * Validates only postalCode property. As the partial address form does not have the country selector, the country value\n * must be informed beforehand and can't be picked up from the form context\n *\n * @param country - Country that will be used to validate postal code\n */\nexport const getPartialAddressValidationRules = (country: string): ValidatorRules => {\n    const validationRules: ValidatorRules = {\n        postalCode: {\n            modes: ['blur'],\n            validate: val => {\n                return validatePostalCode(val, country, validationRules);\n            },\n            errorMessage: ERROR_KEY_REQUIRED\n        }\n    };\n    return validationRules;\n};\n\nexport const getAddressValidationRules = (specifications): ValidatorRules => {\n    const addressValidationRules: ValidatorRules = {\n        postalCode: {\n            modes: ['blur'],\n            validate: (val, context) => {\n                const country = context.state.data.country;\n                return validatePostalCode(val, country, addressValidationRules);\n            },\n            errorMessage: ERROR_KEY_REQUIRED\n        },\n        houseNumberOrName: {\n            validate: (value, context) => {\n                const selectedCountry = context.state?.data?.country;\n                const isOptional = selectedCountry && specifications.countryHasOptionalField(selectedCountry, 'houseNumberOrName');\n                return isOptional || (isEmpty(value) ? null : true);\n            },\n            modes: ['blur'],\n            errorMessage: ERROR_KEY_REQUIRED\n        },\n        default: {\n            validate: value => (isEmpty(value) ? null : true), // true, if there are chars other than spaces\n            modes: ['blur'],\n            errorMessage: ERROR_KEY_REQUIRED\n        }\n    };\n    return addressValidationRules;\n};\n"],"names":["createPatternByDigits","digits","pattern","RegExp","validatePostalCode","val","countryCode","validatorRules","isEmpty","postalCode","errorMessage","translationKey","translationObject","values","format","countrySpecificFormatters","postalCodePatterns","test","AT","AU","BE","BG","BR","CA","CH","CY","CZ","DE","DK","EE","ES","FI","FR","GB","GE","GR","HR","HU","IE","IS","IT","LI","LT","LU","LV","MC","MT","MY","NL","NO","PL","PT","RO","SI","SE","SG","SK","US","getPartialAddressValidationRules","country","validationRules","modes","validate","ERROR_KEY_REQUIRED","getAddressValidationRules","specifications","addressValidationRules","context","state","data","houseNumberOrName","value","selectedCountry","countryHasOptionalField","default"],"mappings":"qMAKA,MAAMA,EAAyBC,IACpB,CACHC,QAAS,IAAIC,OAAO,OAAOF,QAI7BG,EAAqB,CAACC,EAAaC,EAAqBC,KAC1D,GAAID,EAAa,CAEb,GAAIE,EAAQH,GAAM,OAAO,KAGxBE,EAAeE,WAA6BC,aAAe,CACxDC,eAAgB,uBAChBC,kBAAmB,CACfC,OAAQ,CACJC,OAAQC,EAA0BT,IAAcG,WAAWK,QAAU,QAKjF,MAAMZ,EAAUc,EAAmBV,IAAcJ,QACjD,OAAOA,EAAUA,EAAQe,KAAKZ,KAASA,CAC3C,CAEA,OAAOG,EAAQH,IAAO,IAAO,EAG3BW,EAAqB,CACvBE,GAAIlB,EAAsB,GAC1BmB,GAAInB,EAAsB,GAC1BoB,GAAI,CAAElB,QAAS,0BACfmB,GAAIrB,EAAsB,GAC1BsB,GAAI,CAAEpB,QAAS,kBACfqB,GAAI,CAAErB,QAAS,+CACfsB,GAAI,CAAEtB,QAAS,cACfuB,GAAIzB,EAAsB,GAC1B0B,GAAI,CAAExB,QAAS,iBACfyB,GAAI3B,EAAsB,GAC1B4B,GAAI5B,EAAsB,GAC1B6B,GAAI7B,EAAsB,GAC1B8B,GAAI,CAAE5B,QAAS,kCACf6B,GAAI/B,EAAsB,GAC1BgC,GAAIhC,EAAsB,GAC1BiC,GAAI,CAAE/B,QAAS,yFACfgC,GAAIlC,EAAsB,GAC1BmC,GAAI,CAAEjC,QAAS,uBACfkC,GAAI,CAAElC,QAAS,qBACfmC,GAAIrC,EAAsB,GAC1BsC,GAAI,CAAEpC,QAAS,8DACfqC,GAAIvC,EAAsB,GAC1BwC,GAAIxC,EAAsB,GAC1ByC,GAAIzC,EAAsB,GAC1B0C,GAAI,CAAExC,QAAS,gBACfyC,GAAI3C,EAAsB,GAC1B4C,GAAI,CAAE1C,QAAS,mBACf2C,GAAI,CAAE3C,QAAS,cACf4C,GAAI,CAAE5C,QAAS,sBACf6C,GAAI/C,EAAsB,GAC1BgD,GAAI,CAAE9C,QAAS,sFACf+C,GAAIjD,EAAsB,GAC1BkD,GAAI,CAAEhD,QAAS,wBACfiD,GAAI,CAAEjD,QAAS,mCACfkD,GAAIpD,EAAsB,GAC1BqD,GAAIrD,EAAsB,GAC1BsD,GAAItD,EAAsB,GAC1BuD,GAAIvD,EAAsB,GAC1BwD,GAAIxD,EAAsB,GAC1ByD,GAAIzD,EAAsB,IASjB0D,EAAoCC,IAC7C,MAAMC,EAAkC,CACpCnD,WAAY,CACRoD,MAAO,CAAC,QACRC,SAAUzD,GACCD,EAAmBC,EAAKsD,EAASC,GAE5ClD,aAAcqD,IAGtB,OAAOH,CAAAA,EAGEI,EAA6BC,IACtC,MAAMC,EAAyC,CAC3CzD,WAAY,CACRoD,MAAO,CAAC,QACRC,SAAU,CAACzD,EAAK8D,KACZ,MAAMR,EAAUQ,EAAQC,MAAMC,KAAKV,QACnC,OAAOvD,EAAmBC,EAAKsD,EAASO,EAAAA,EAE5CxD,aAAcqD,GAElBO,kBAAmB,CACfR,SAAU,CAACS,EAAOJ,KACd,MAAMK,EAAkBL,EAAQC,OAAOC,MAAMV,QAE7C,OADmBa,GAAmBP,EAAeQ,wBAAwBD,EAAiB,uBACxEhE,EAAQ+D,IAAS,IAAU,EAErDV,MAAO,CAAC,QACRnD,aAAcqD,GAElBW,QAAS,CACLZ,SAAUS,IAAU/D,EAAQ+D,IAAS,KACrCV,MAAO,CAAC,QACRnD,aAAcqD,IAGtB,OAAOG,CAAAA"}
+{"version":3,"file":"validate.js","sources":["../../../../../src/components/internal/Address/validate.ts"],"sourcesContent":["import { ValidatorRules, ValidatorRule } from '../../../utils/Validator/types';\nimport { countrySpecificFormatters } from './validate.formats';\nimport { ERROR_FIELD_REQUIRED, ERROR_INVALID_FORMAT_EXPECTS } from '../../../core/Errors/constants';\nimport { isEmpty } from '../../../utils/validator-utils';\n\nconst createPatternByDigits = (digits: number) => {\n    return {\n        pattern: new RegExp(`\\\\d{${digits}}`)\n    };\n};\n\nconst validatePostalCode = (val: string, countryCode: string, validatorRules: ValidatorRules) => {\n    if (countryCode) {\n        // If there is no value, we display the 'required' error message\n        if (isEmpty(val)) return null;\n\n        // Dynamically create errorMessage\n        (validatorRules.postalCode as ValidatorRule).errorMessage = {\n            translationKey: ERROR_INVALID_FORMAT_EXPECTS,\n            translationObject: {\n                values: {\n                    format: countrySpecificFormatters[countryCode]?.postalCode.format || null\n                }\n            }\n        };\n\n        const pattern = postalCodePatterns[countryCode]?.pattern;\n        return pattern ? pattern.test(val) : !!val; // No pattern? Accept any, filled, value.\n    }\n    // Default rule\n    return isEmpty(val) ? null : true;\n};\n\nconst postalCodePatterns = {\n    AT: createPatternByDigits(4),\n    AU: createPatternByDigits(4),\n    BE: { pattern: /(?:(?:[1-9])(?:\\d{3}))/ },\n    BG: createPatternByDigits(4),\n    BR: { pattern: /^\\d{5}-?\\d{3}$/ },\n    CA: { pattern: /(?:[ABCEGHJ-NPRSTVXY]\\d[A-Z][ -]?\\d[A-Z]\\d)/ },\n    CH: { pattern: /[1-9]\\d{3}/ },\n    CY: createPatternByDigits(4),\n    CZ: { pattern: /\\d{3}\\s?\\d{2}/ },\n    DE: createPatternByDigits(5),\n    DK: createPatternByDigits(4),\n    EE: createPatternByDigits(5),\n    ES: { pattern: /(?:0[1-9]|[1-4]\\d|5[0-2])\\d{3}/ },\n    FI: createPatternByDigits(5),\n    FR: createPatternByDigits(5),\n    GB: { pattern: /^([A-Za-z][A-Ha-hK-Yk-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/ },\n    GE: createPatternByDigits(4),\n    GR: { pattern: /^\\d{3}\\s{0,1}\\d{2}$/ },\n    HR: { pattern: /^([1-5])[0-9]{4}$/ },\n    HU: createPatternByDigits(4),\n    IE: { pattern: /(?:^[AC-FHKNPRTV-Y][0-9]{2}|D6W)[ -]?[0-9AC-FHKNPRTV-Y]{4}/ },\n    IS: createPatternByDigits(3),\n    IT: createPatternByDigits(5),\n    LI: createPatternByDigits(4),\n    LT: { pattern: /^(LT-\\d{5})$/ },\n    LU: createPatternByDigits(4),\n    LV: { pattern: /^(LV-)[0-9]{4}$/ },\n    MC: { pattern: /^980\\d{2}$/ },\n    MT: { pattern: /^[A-Za-z]{3}\\d{4}$/ },\n    MY: createPatternByDigits(5),\n    NL: { pattern: /(?:NL-)?(?:[1-9]\\d{3} ?(?:[A-EGHJ-NPRTVWXZ][A-EGHJ-NPRSTVWXZ]|S[BCEGHJ-NPRTVWXZ]))/ },\n    NO: createPatternByDigits(4),\n    PL: { pattern: /^\\d{2}[-]{0,1}\\d{3}$/ },\n    PT: { pattern: /^([1-9]\\d{3})([- ]?(\\d{3})? *)$/ },\n    RO: createPatternByDigits(6),\n    SI: createPatternByDigits(4),\n    SE: createPatternByDigits(5),\n    SG: createPatternByDigits(6),\n    SK: createPatternByDigits(5),\n    US: createPatternByDigits(5)\n};\n\n/**\n * Validates only postalCode property. As the partial address form does not have the country selector, the country value\n * must be informed beforehand and can't be picked up from the form context\n *\n * @param country - Country that will be used to validate postal code\n */\nexport const getPartialAddressValidationRules = (country: string): ValidatorRules => {\n    const validationRules: ValidatorRules = {\n        postalCode: {\n            modes: ['blur'],\n            validate: val => {\n                return validatePostalCode(val, country, validationRules);\n            },\n            errorMessage: ERROR_FIELD_REQUIRED\n        }\n    };\n    return validationRules;\n};\n\nexport const getAddressValidationRules = (specifications): ValidatorRules => {\n    const addressValidationRules: ValidatorRules = {\n        postalCode: {\n            modes: ['blur'],\n            validate: (val, context) => {\n                const country = context.state.data.country;\n                return validatePostalCode(val, country, addressValidationRules);\n            },\n            errorMessage: ERROR_FIELD_REQUIRED\n        },\n        houseNumberOrName: {\n            validate: (value, context) => {\n                const selectedCountry = context.state?.data?.country;\n                const isOptional = selectedCountry && specifications.countryHasOptionalField(selectedCountry, 'houseNumberOrName');\n                return isOptional || (isEmpty(value) ? null : true);\n            },\n            modes: ['blur'],\n            errorMessage: ERROR_FIELD_REQUIRED\n        },\n        default: {\n            validate: value => (isEmpty(value) ? null : true), // true, if there are chars other than spaces\n            modes: ['blur'],\n            errorMessage: ERROR_FIELD_REQUIRED\n        }\n    };\n    return addressValidationRules;\n};\n"],"names":["createPatternByDigits","digits","pattern","RegExp","validatePostalCode","val","countryCode","validatorRules","isEmpty","postalCode","errorMessage","translationKey","ERROR_INVALID_FORMAT_EXPECTS","translationObject","values","format","countrySpecificFormatters","postalCodePatterns","test","AT","AU","BE","BG","BR","CA","CH","CY","CZ","DE","DK","EE","ES","FI","FR","GB","GE","GR","HR","HU","IE","IS","IT","LI","LT","LU","LV","MC","MT","MY","NL","NO","PL","PT","RO","SI","SE","SG","SK","US","getPartialAddressValidationRules","country","validationRules","modes","validate","ERROR_FIELD_REQUIRED","getAddressValidationRules","specifications","addressValidationRules","context","state","data","houseNumberOrName","value","selectedCountry","countryHasOptionalField","default"],"mappings":"yOAKA,MAAMA,EAAyBC,IACpB,CACHC,QAAS,IAAIC,OAAO,OAAOF,QAI7BG,EAAqB,CAACC,EAAaC,EAAqBC,KAC1D,GAAID,EAAa,CAEb,GAAIE,EAAQH,GAAM,OAAO,KAGxBE,EAAeE,WAA6BC,aAAe,CACxDC,eAAgBC,EAChBC,kBAAmB,CACfC,OAAQ,CACJC,OAAQC,EAA0BV,IAAcG,WAAWM,QAAU,QAKjF,MAAMb,EAAUe,EAAmBX,IAAcJ,QACjD,OAAOA,EAAUA,EAAQgB,KAAKb,KAASA,CAC3C,CAEA,OAAOG,EAAQH,IAAO,IAAO,EAG3BY,EAAqB,CACvBE,GAAInB,EAAsB,GAC1BoB,GAAIpB,EAAsB,GAC1BqB,GAAI,CAAEnB,QAAS,0BACfoB,GAAItB,EAAsB,GAC1BuB,GAAI,CAAErB,QAAS,kBACfsB,GAAI,CAAEtB,QAAS,+CACfuB,GAAI,CAAEvB,QAAS,cACfwB,GAAI1B,EAAsB,GAC1B2B,GAAI,CAAEzB,QAAS,iBACf0B,GAAI5B,EAAsB,GAC1B6B,GAAI7B,EAAsB,GAC1B8B,GAAI9B,EAAsB,GAC1B+B,GAAI,CAAE7B,QAAS,kCACf8B,GAAIhC,EAAsB,GAC1BiC,GAAIjC,EAAsB,GAC1BkC,GAAI,CAAEhC,QAAS,yFACfiC,GAAInC,EAAsB,GAC1BoC,GAAI,CAAElC,QAAS,uBACfmC,GAAI,CAAEnC,QAAS,qBACfoC,GAAItC,EAAsB,GAC1BuC,GAAI,CAAErC,QAAS,8DACfsC,GAAIxC,EAAsB,GAC1ByC,GAAIzC,EAAsB,GAC1B0C,GAAI1C,EAAsB,GAC1B2C,GAAI,CAAEzC,QAAS,gBACf0C,GAAI5C,EAAsB,GAC1B6C,GAAI,CAAE3C,QAAS,mBACf4C,GAAI,CAAE5C,QAAS,cACf6C,GAAI,CAAE7C,QAAS,sBACf8C,GAAIhD,EAAsB,GAC1BiD,GAAI,CAAE/C,QAAS,sFACfgD,GAAIlD,EAAsB,GAC1BmD,GAAI,CAAEjD,QAAS,wBACfkD,GAAI,CAAElD,QAAS,mCACfmD,GAAIrD,EAAsB,GAC1BsD,GAAItD,EAAsB,GAC1BuD,GAAIvD,EAAsB,GAC1BwD,GAAIxD,EAAsB,GAC1ByD,GAAIzD,EAAsB,GAC1B0D,GAAI1D,EAAsB,IASjB2D,EAAoCC,IAC7C,MAAMC,EAAkC,CACpCpD,WAAY,CACRqD,MAAO,CAAC,QACRC,SAAU1D,GACCD,EAAmBC,EAAKuD,EAASC,GAE5CnD,aAAcsD,IAGtB,OAAOH,CAAAA,EAGEI,EAA6BC,IACtC,MAAMC,EAAyC,CAC3C1D,WAAY,CACRqD,MAAO,CAAC,QACRC,SAAU,CAAC1D,EAAK+D,KACZ,MAAMR,EAAUQ,EAAQC,MAAMC,KAAKV,QACnC,OAAOxD,EAAmBC,EAAKuD,EAASO,EAAAA,EAE5CzD,aAAcsD,GAElBO,kBAAmB,CACfR,SAAU,CAACS,EAAOJ,KACd,MAAMK,EAAkBL,EAAQC,OAAOC,MAAMV,QAE7C,OADmBa,GAAmBP,EAAeQ,wBAAwBD,EAAiB,uBACxEjE,EAAQgE,IAAS,IAAU,EAErDV,MAAO,CAAC,QACRpD,aAAcsD,GAElBW,QAAS,CACLZ,SAAUS,IAAUhE,EAAQgE,IAAS,KACrCV,MAAO,CAAC,QACRpD,aAAcsD,IAGtB,OAAOG,CAAAA"}

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/BaseElement/BaseElement.js

@@ -1,2 +1,2 @@
-import{render as t}from"../../../external/preact/dist/preact.js";import o from"../../../utils/getProp.js";import e from"../../../utils/uuid.js";import r from"../../../core/Errors/AdyenCheckoutError.js";import{ANALYTICS_RENDERED_STR as s}from"../../../core/Analytics/constants.js";class n{_id=`${this.constructor.type}-${e()}`;props;state={};_component;_node=null;core;static defaultProps={};constructor(t,o){const e=function(t){return!!t&&("function"==typeof t.initialize&&"function"==typeof t.createFromAction)}(t);if(!e)throw new r("IMPLEMENTATION_ERROR",`Trying to initialise the component '${this.constructor.type}' without a reference to an instance of AdyenCheckout`);this.core=t,this.buildElementProps(o)}buildElementProps(t){this.props=this.formatProps({...this.constructor.defaultProps,...t})}formatProps(t){return t}formatData(){return{}}setUpAnalytics(t){return null}submitAnalytics(t){return null}setState(t){this.state={...this.state,...t}}get data(){const t=o(this.props,"modules.risk.data"),e=!!o(this.props,"modules.analytics.getEnabled")?.()?o(this.props,"modules.analytics.getCheckoutAttemptId")?.():"do-not-track",r=this.state.order||this.props.order,s=this.formatData();return s.paymentMethod&&e&&(s.paymentMethod.checkoutAttemptId=e),{...t&&{riskData:{clientData:t}},...r&&{order:{orderData:r.orderData,pspReference:r.pspReference}},...s,clientStateDataIndicator:!0}}render(){throw new Error("Payment method cannot be rendered.")}mount(o){const e="string"==typeof o?document.querySelector(o):o;if(!e)throw new Error("Component could not mount. Root node was not found.");const r=!this._node;return this._node&&this.unmount(),this._node=e,this._component=this.render(),t(this._component,e),r&&this.props.modules&&this.props.modules.analytics&&this.setUpAnalytics({containerWidth:e&&e.offsetWidth,component:this.props.isDropin?"dropin":this.constructor.analyticsType??this.constructor.type,flavor:this.props.isDropin?"dropin":"components"}).then((()=>{this.props.isDropin||this.submitAnalytics({type:s})})),this}update(t){return this.props=this.formatProps({...this.props,...t}),this.state={},this.unmount().mount(this._node)}unmount(){return this._node&&t(null,this._node),this}remove(){this.unmount(),this.core&&this.core.remove(this)}}export{n as default};
+import{render as t}from"../../../external/preact/dist/preact.js";import o from"../../../utils/getProp.js";import e from"../../../utils/uuid.js";import r from"../../../core/Errors/AdyenCheckoutError.js";import{ANALYTICS_RENDERED_STR as s}from"../../../core/Analytics/constants.js";class n{_id=`${this.constructor.type}-${e()}`;props;state={};_component;_node=null;core;static defaultProps={};constructor(t,o){const e=function(t){return!!t&&("function"==typeof t.initialize&&"function"==typeof t.createFromAction)}(t);if(!e)throw new r("IMPLEMENTATION_ERROR",`Trying to initialise the component '${this.constructor.type}' without a reference to an instance of AdyenCheckout`);this.core=t,this.buildElementProps(o)}buildElementProps(t){this.props=this.formatProps({...this.constructor.defaultProps,...t})}formatProps(t){return t}formatData(){return{}}setUpAnalytics(t){return null}submitAnalytics(t){return null}setState(t){this.state={...this.state,...t}}get data(){const t=o(this.props,"modules.risk.data"),e=!!o(this.props,"modules.analytics.getEnabled")?.()?o(this.props,"modules.analytics.getCheckoutAttemptId")?.():"do-not-track",r=this.state.order||this.props.order,s=this.formatData();if(s.paymentMethod&&e&&(s.paymentMethod.checkoutAttemptId=e),"riverty"!==this.props.type&&s.billingAddress){const{firstName:t,lastName:o,...e}=s.billingAddress;s.billingAddress={...e}}return{...t&&{riskData:{clientData:t}},...r&&{order:{orderData:r.orderData,pspReference:r.pspReference}},...s,clientStateDataIndicator:!0}}render(){throw new Error("Payment method cannot be rendered.")}mount(o){const e="string"==typeof o?document.querySelector(o):o;if(!e)throw new Error("Component could not mount. Root node was not found.");const r=!this._node;return this._node&&this.unmount(),this._node=e,this._component=this.render(),t(this._component,e),r&&this.props.modules&&this.props.modules.analytics&&this.setUpAnalytics({containerWidth:e&&e.offsetWidth,component:this.props.isDropin?"dropin":this.constructor.analyticsType??this.constructor.type,flavor:this.props.isDropin?"dropin":"components"}).then((()=>{this.props.isDropin||this.submitAnalytics({type:s})})),this}update(t){return this.props=this.formatProps({...this.props,...t}),this.state={},this.unmount().mount(this._node)}unmount(){return this._node&&t(null,this._node),this}remove(){this.unmount(),this.core&&this.core.remove(this)}}export{n as default};
 //# sourceMappingURL=BaseElement.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseElement.js","sources":["../../../../../src/components/internal/BaseElement/BaseElement.ts"],"sourcesContent":["import { ComponentChild, render } from 'preact';\nimport getProp from '../../../utils/getProp';\nimport uuid from '../../../utils/uuid';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\n\nimport type { ICore } from '../../../core/types';\nimport type { BaseElementProps, IBaseElement } from './types';\nimport type { PaymentData } from '../../../types/global-types';\nimport { AnalyticsInitialEvent, SendAnalyticsObject } from '../../../core/Analytics/types';\nimport { ANALYTICS_RENDERED_STR } from '../../../core/Analytics/constants';\n\n/**\n * Verify if the first parameter is instance of Core.\n * We do not use 'instanceof' to avoid importing the Core class directly into this class.\n * @param checkout\n */\nfunction assertIsCoreInstance(checkout: ICore): checkout is ICore {\n    if (!checkout) return false;\n    const isCoreObject = typeof checkout.initialize === 'function' && typeof checkout.createFromAction === 'function';\n    return isCoreObject;\n}\n\nclass BaseElement<P extends BaseElementProps> implements IBaseElement {\n    public readonly _id = `${this.constructor['type']}-${uuid()}`;\n\n    public props: P;\n    public state: any = {};\n    public _component;\n\n    protected _node: HTMLElement = null;\n    protected readonly core: ICore;\n\n    protected static defaultProps = {};\n\n    constructor(checkout: ICore, props?: P) {\n        const isCoreInstance = assertIsCoreInstance(checkout);\n\n        if (!isCoreInstance) {\n            throw new AdyenCheckoutError(\n                'IMPLEMENTATION_ERROR',\n                `Trying to initialise the component '${this.constructor['type']}' without a reference to an instance of AdyenCheckout`\n            );\n        }\n\n        this.core = checkout;\n        this.buildElementProps(props);\n    }\n\n    protected buildElementProps(componentProps?: P) {\n        this.props = this.formatProps({ ...this.constructor['defaultProps'], ...componentProps });\n    }\n\n    /**\n     * Executed during creation of any payment element.\n     * Gives a chance to any paymentMethod to format the props we're receiving.\n     */\n    protected formatProps(props: P) {\n        return props;\n    }\n\n    /**\n     * Executed on the `data` getter.\n     * Returns the component data necessary for the /payments request\n     *\n     * TODO: Replace 'any' by type PaymentMethodData<T> - this change requires updating all payment methods,\n     *       properly adding the type of the formatData function\n     */\n    protected formatData(): any {\n        return {};\n    }\n\n    /* eslint-disable-next-line */\n    protected setUpAnalytics(setUpAnalyticsObj: AnalyticsInitialEvent) {\n        return null;\n    }\n\n    /* eslint-disable-next-line */\n    protected submitAnalytics(analyticsObj?: SendAnalyticsObject) {\n        return null;\n    }\n\n    protected setState(newState: object): void {\n        this.state = { ...this.state, ...newState };\n    }\n\n    /**\n     * Returns the component payment data ready to submit to the Checkout API\n     * Note: this does not ensure validity, check isValid first\n     */\n    public get data(): PaymentData {\n        const clientData = getProp(this.props, 'modules.risk.data');\n        const useAnalytics = !!getProp(this.props, 'modules.analytics.getEnabled')?.();\n        const checkoutAttemptId = useAnalytics ? getProp(this.props, 'modules.analytics.getCheckoutAttemptId')?.() : 'do-not-track';\n        const order = this.state.order || this.props.order;\n\n        const componentData = this.formatData();\n        if (componentData.paymentMethod && checkoutAttemptId) {\n            componentData.paymentMethod.checkoutAttemptId = checkoutAttemptId;\n        }\n\n        return {\n            ...(clientData && { riskData: { clientData } }),\n            ...(order && { order: { orderData: order.orderData, pspReference: order.pspReference } }),\n            ...componentData,\n            clientStateDataIndicator: true\n        };\n    }\n\n    public render(): ComponentChild | Error {\n        // render() not implemented in the element\n        throw new Error('Payment method cannot be rendered.');\n    }\n\n    /**\n     * Mounts an element into the dom\n     * @param domNode - Node (or selector) where we will mount the payment element\n     * @returns this - the payment element instance we mounted\n     */\n    public mount(domNode: HTMLElement | string): this {\n        const node = typeof domNode === 'string' ? document.querySelector<HTMLElement>(domNode) : domNode;\n\n        if (!node) {\n            throw new Error('Component could not mount. Root node was not found.');\n        }\n\n        const setupAnalytics = !this._node;\n\n        if (this._node) {\n            this.unmount(); // new, if this._node exists then we are \"remounting\" so we first need to unmount if it's not already been done\n        }\n\n        this._node = node;\n\n        this._component = this.render();\n\n        render(this._component, node);\n\n        // Set up analytics (once, since this._node is currently undefined) now that we have mounted and rendered\n        if (setupAnalytics) {\n            if (this.props.modules && this.props.modules.analytics) {\n                this.setUpAnalytics({\n                    containerWidth: node && (node as HTMLElement).offsetWidth,\n                    component: !this.props.isDropin ? this.constructor['analyticsType'] ?? this.constructor['type'] : 'dropin',\n                    flavor: !this.props.isDropin ? 'components' : 'dropin'\n                }).then(() => {\n                    // Once the initial analytics set up call has been made...\n                    // ...create an analytics event  declaring that the component has been rendered\n                    // (The dropin will do this itself from DropinComponent once the PM list has rendered)\n                    if (!this.props.isDropin) {\n                        this.submitAnalytics({ type: ANALYTICS_RENDERED_STR });\n                    }\n                });\n            }\n        }\n\n        return this;\n    }\n\n    /**\n     * Updates props, resets the internal state and remounts the element.\n     *\n     * @param props - props to update\n     * @returns this - the element instance\n     */\n    public update(props: Partial<P>): this {\n        this.props = this.formatProps({ ...this.props, ...props });\n        this.state = {};\n\n        return this.unmount().mount(this._node); // for new mount fny\n    }\n\n    /**\n     * Unmounts a payment element from the DOM\n     */\n    public unmount(): this {\n        if (this._node) {\n            render(null, this._node);\n        }\n\n        return this;\n    }\n\n    /**\n     * Unmounts an element and removes it from the parent instance\n     * For \"destroy\" type cleanup - when you don't intend to use the component again\n     */\n    public remove() {\n        this.unmount();\n\n        if (this.core) {\n            this.core.remove(this);\n        }\n    }\n}\n\nexport default BaseElement;\n"],"names":["BaseElement","_id","this","constructor","uuid","props","state","_component","_node","core","static","checkout","isCoreInstance","initialize","createFromAction","assertIsCoreInstance","AdyenCheckoutError","buildElementProps","componentProps","formatProps","formatData","setUpAnalytics","setUpAnalyticsObj","submitAnalytics","analyticsObj","setState","newState","data","clientData","getProp","checkoutAttemptId","order","componentData","paymentMethod","riskData","orderData","pspReference","clientStateDataIndicator","render","Error","mount","domNode","node","document","querySelector","setupAnalytics","unmount","modules","analytics","containerWidth","offsetWidth","component","isDropin","flavor","then","type","ANALYTICS_RENDERED_STR","update","remove"],"mappings":"wRAsBA,MAAMA,EACcC,IAAM,GAAGC,KAAKC,YAAmB,QAAIC,MAE9CC,MACAC,MAAa,CAAA,EACbC,WAEGC,MAAqB,KACZC,KAEnBC,oBAAgC,CAAA,EAEhCP,WAAAA,CAAYQ,EAAiBN,GACzB,MAAMO,EAnBd,SAA8BD,GAC1B,QAAKA,IAC+C,mBAAxBA,EAASE,YAAkE,mBAA9BF,EAASG,iBAEtF,CAe+BC,CAAqBJ,GAE5C,IAAKC,EACD,MAAM,IAAII,EACN,uBACA,uCAAuCd,KAAKC,YAAmB,6DAIvED,KAAKO,KAAOE,EACZT,KAAKe,kBAAkBZ,EAC3B,CAEUY,iBAAAA,CAAkBC,GACxBhB,KAAKG,MAAQH,KAAKiB,YAAY,IAAKjB,KAAKC,YAA2B,gBAAKe,GAC5E,CAMUC,WAAAA,CAAYd,GAClB,OAAOA,CACX,CASA,UAAAe,GACI,MAAO,EACX,CAGUC,cAAAA,CAAeC,GACrB,OAAO,IACX,CAGUC,eAAAA,CAAgBC,GACtB,OAAO,IACX,CAEUC,QAAAA,CAASC,GACfxB,KAAKI,MAAQ,IAAKJ,KAAKI,SAAUoB,EACrC,CAMA,QAAWC,GACP,MAAMC,EAAaC,EAAQ3B,KAAKG,MAAO,qBAEjCyB,IADiBD,EAAQ3B,KAAKG,MAAO,+BAApBwB,KACkBA,EAAQ3B,KAAKG,MAAO,yCAApBwB,KAAoE,eACvGE,EAAQ7B,KAAKI,MAAMyB,OAAS7B,KAAKG,MAAM0B,MAEvCC,EAAgB9B,KAAKkB,aAK3B,OAJIY,EAAcC,eAAiBH,IAC/BE,EAAcC,cAAcH,kBAAoBA,GAG7C,IACCF,GAAc,CAAEM,SAAU,CAAEN,kBAC5BG,GAAS,CAAEA,MAAO,CAAEI,UAAWJ,EAAMI,UAAWC,aAAcL,EAAMK,kBACrEJ,EACHK,0BAA0B,EAElC,CAEOC,MAAAA,GAEH,MAAM,IAAIC,MAAM,qCACpB,CAOOC,KAAAA,CAAMC,GACT,MAAMC,EAA0B,iBAAZD,EAAuBE,SAASC,cAA2BH,GAAWA,EAE1F,IAAKC,EACD,MAAM,IAAIH,MAAM,uDAGpB,MAAMM,GAAkB3C,KAAKM,MA8B7B,OA5BIN,KAAKM,OACLN,KAAK4C,UAGT5C,KAAKM,MAAQkC,EAEbxC,KAAKK,WAAaL,KAAKoC,SAEvBA,EAAOpC,KAAKK,WAAYmC,GAGpBG,GACI3C,KAAKG,MAAM0C,SAAW7C,KAAKG,MAAM0C,QAAQC,WACzC9C,KAAKmB,eAAe,CAChB4B,eAAgBP,GAAQA,EAAsBQ,YAC9CC,UAAYjD,KAAKG,MAAM+C,SAA2E,SAAhElD,KAAKC,2BAAgCD,KAAKC,iBAC5EkD,OAASnD,KAAKG,MAAM+C,SAA0B,SAAf,eAChCE,MAAK,KAICpD,KAAKG,MAAM+C,UACZlD,KAAKqB,gBAAgB,CAAEgC,KAAMC,GACjC,IAKLtD,IACX,CAQOuD,MAAAA,CAAOpD,GAIV,OAHAH,KAAKG,MAAQH,KAAKiB,YAAY,IAAKjB,KAAKG,SAAUA,IAClDH,KAAKI,MAAQ,GAENJ,KAAK4C,UAAUN,MAAMtC,KAAKM,MACrC,CAKA,OAAAsC,GAKI,OAJI5C,KAAKM,OACL8B,EAAO,KAAMpC,KAAKM,OAGfN,IACX,CAMA,MAAAwD,GACIxD,KAAK4C,UAED5C,KAAKO,MACLP,KAAKO,KAAKiD,OAAOxD,KAEzB"}
+{"version":3,"file":"BaseElement.js","sources":["../../../../../src/components/internal/BaseElement/BaseElement.ts"],"sourcesContent":["import { ComponentChild, render } from 'preact';\nimport getProp from '../../../utils/getProp';\nimport uuid from '../../../utils/uuid';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\n\nimport type { ICore } from '../../../core/types';\nimport type { BaseElementProps, IBaseElement } from './types';\nimport type { PaymentData } from '../../../types/global-types';\nimport { AnalyticsInitialEvent, SendAnalyticsObject } from '../../../core/Analytics/types';\nimport { ANALYTICS_RENDERED_STR } from '../../../core/Analytics/constants';\n\n/**\n * Verify if the first parameter is instance of Core.\n * We do not use 'instanceof' to avoid importing the Core class directly into this class.\n * @param checkout\n */\nfunction assertIsCoreInstance(checkout: ICore): checkout is ICore {\n    if (!checkout) return false;\n    const isCoreObject = typeof checkout.initialize === 'function' && typeof checkout.createFromAction === 'function';\n    return isCoreObject;\n}\n\nclass BaseElement<P extends BaseElementProps> implements IBaseElement {\n    public readonly _id = `${this.constructor['type']}-${uuid()}`;\n\n    public props: P;\n    public state: any = {};\n    public _component;\n\n    protected _node: HTMLElement = null;\n    protected readonly core: ICore;\n\n    protected static defaultProps = {};\n\n    constructor(checkout: ICore, props?: P) {\n        const isCoreInstance = assertIsCoreInstance(checkout);\n\n        if (!isCoreInstance) {\n            throw new AdyenCheckoutError(\n                'IMPLEMENTATION_ERROR',\n                `Trying to initialise the component '${this.constructor['type']}' without a reference to an instance of AdyenCheckout`\n            );\n        }\n\n        this.core = checkout;\n        this.buildElementProps(props);\n    }\n\n    protected buildElementProps(componentProps?: P) {\n        this.props = this.formatProps({ ...this.constructor['defaultProps'], ...componentProps });\n    }\n\n    /**\n     * Executed during creation of any payment element.\n     * Gives a chance to any paymentMethod to format the props we're receiving.\n     */\n    protected formatProps(props: P) {\n        return props;\n    }\n\n    /**\n     * Executed on the `data` getter.\n     * Returns the component data necessary for the /payments request\n     *\n     * TODO: Replace 'any' by type PaymentMethodData<T> - this change requires updating all payment methods,\n     *       properly adding the type of the formatData function\n     */\n    protected formatData(): any {\n        return {};\n    }\n\n    /* eslint-disable-next-line */\n    protected setUpAnalytics(setUpAnalyticsObj: AnalyticsInitialEvent) {\n        return null;\n    }\n\n    /* eslint-disable-next-line */\n    protected submitAnalytics(analyticsObj?: SendAnalyticsObject) {\n        return null;\n    }\n\n    protected setState(newState: object): void {\n        this.state = { ...this.state, ...newState };\n    }\n\n    /**\n     * Returns the component payment data ready to submit to the Checkout API\n     * Note: this does not ensure validity, check isValid first\n     */\n    public get data(): PaymentData {\n        const clientData = getProp(this.props, 'modules.risk.data');\n        const useAnalytics = !!getProp(this.props, 'modules.analytics.getEnabled')?.();\n        const checkoutAttemptId = useAnalytics ? getProp(this.props, 'modules.analytics.getCheckoutAttemptId')?.() : 'do-not-track';\n        const order = this.state.order || this.props.order;\n\n        const componentData = this.formatData();\n        if (componentData.paymentMethod && checkoutAttemptId) {\n            componentData.paymentMethod.checkoutAttemptId = checkoutAttemptId;\n        }\n\n        // Workaround, to be fixed properly\n        // Remove the firstName & lastName in the billingAddress for non Riverty components\n        // @ts-ignore type exists\n        if (this.props.type !== 'riverty' && componentData.billingAddress) {\n            const { firstName, lastName, ...rest } = componentData.billingAddress;\n            componentData.billingAddress = { ...rest };\n        }\n\n        return {\n            ...(clientData && { riskData: { clientData } }),\n            ...(order && { order: { orderData: order.orderData, pspReference: order.pspReference } }),\n            ...componentData,\n            clientStateDataIndicator: true\n        };\n    }\n\n    public render(): ComponentChild | Error {\n        // render() not implemented in the element\n        throw new Error('Payment method cannot be rendered.');\n    }\n\n    /**\n     * Mounts an element into the dom\n     * @param domNode - Node (or selector) where we will mount the payment element\n     * @returns this - the payment element instance we mounted\n     */\n    public mount(domNode: HTMLElement | string): this {\n        const node = typeof domNode === 'string' ? document.querySelector<HTMLElement>(domNode) : domNode;\n\n        if (!node) {\n            throw new Error('Component could not mount. Root node was not found.');\n        }\n\n        const setupAnalytics = !this._node;\n\n        if (this._node) {\n            this.unmount(); // new, if this._node exists then we are \"remounting\" so we first need to unmount if it's not already been done\n        }\n\n        this._node = node;\n\n        this._component = this.render();\n\n        render(this._component, node);\n\n        // Set up analytics (once, since this._node is currently undefined) now that we have mounted and rendered\n        if (setupAnalytics) {\n            if (this.props.modules && this.props.modules.analytics) {\n                this.setUpAnalytics({\n                    containerWidth: node && (node as HTMLElement).offsetWidth,\n                    component: !this.props.isDropin ? this.constructor['analyticsType'] ?? this.constructor['type'] : 'dropin',\n                    flavor: !this.props.isDropin ? 'components' : 'dropin'\n                }).then(() => {\n                    // Once the initial analytics set up call has been made...\n                    // ...create an analytics event  declaring that the component has been rendered\n                    // (The dropin will do this itself from DropinComponent once the PM list has rendered)\n                    if (!this.props.isDropin) {\n                        this.submitAnalytics({ type: ANALYTICS_RENDERED_STR });\n                    }\n                });\n            }\n        }\n\n        return this;\n    }\n\n    /**\n     * Updates props, resets the internal state and remounts the element.\n     *\n     * @param props - props to update\n     * @returns this - the element instance\n     */\n    public update(props: Partial<P>): this {\n        this.props = this.formatProps({ ...this.props, ...props });\n        this.state = {};\n\n        return this.unmount().mount(this._node); // for new mount fny\n    }\n\n    /**\n     * Unmounts a payment element from the DOM\n     */\n    public unmount(): this {\n        if (this._node) {\n            render(null, this._node);\n        }\n\n        return this;\n    }\n\n    /**\n     * Unmounts an element and removes it from the parent instance\n     * For \"destroy\" type cleanup - when you don't intend to use the component again\n     */\n    public remove() {\n        this.unmount();\n\n        if (this.core) {\n            this.core.remove(this);\n        }\n    }\n}\n\nexport default BaseElement;\n"],"names":["BaseElement","_id","this","constructor","uuid","props","state","_component","_node","core","static","checkout","isCoreInstance","initialize","createFromAction","assertIsCoreInstance","AdyenCheckoutError","buildElementProps","componentProps","formatProps","formatData","setUpAnalytics","setUpAnalyticsObj","submitAnalytics","analyticsObj","setState","newState","data","clientData","getProp","checkoutAttemptId","order","componentData","paymentMethod","type","billingAddress","firstName","lastName","rest","riskData","orderData","pspReference","clientStateDataIndicator","render","Error","mount","domNode","node","document","querySelector","setupAnalytics","unmount","modules","analytics","containerWidth","offsetWidth","component","isDropin","flavor","then","ANALYTICS_RENDERED_STR","update","remove"],"mappings":"wRAsBA,MAAMA,EACcC,IAAM,GAAGC,KAAKC,YAAmB,QAAIC,MAE9CC,MACAC,MAAa,CAAA,EACbC,WAEGC,MAAqB,KACZC,KAEnBC,oBAAgC,CAAA,EAEhCP,WAAAA,CAAYQ,EAAiBN,GACzB,MAAMO,EAnBd,SAA8BD,GAC1B,QAAKA,IAC+C,mBAAxBA,EAASE,YAAkE,mBAA9BF,EAASG,iBAEtF,CAe+BC,CAAqBJ,GAE5C,IAAKC,EACD,MAAM,IAAII,EACN,uBACA,uCAAuCd,KAAKC,YAAmB,6DAIvED,KAAKO,KAAOE,EACZT,KAAKe,kBAAkBZ,EAC3B,CAEUY,iBAAAA,CAAkBC,GACxBhB,KAAKG,MAAQH,KAAKiB,YAAY,IAAKjB,KAAKC,YAA2B,gBAAKe,GAC5E,CAMUC,WAAAA,CAAYd,GAClB,OAAOA,CACX,CASA,UAAAe,GACI,MAAO,EACX,CAGUC,cAAAA,CAAeC,GACrB,OAAO,IACX,CAGUC,eAAAA,CAAgBC,GACtB,OAAO,IACX,CAEUC,QAAAA,CAASC,GACfxB,KAAKI,MAAQ,IAAKJ,KAAKI,SAAUoB,EACrC,CAMA,QAAWC,GACP,MAAMC,EAAaC,EAAQ3B,KAAKG,MAAO,qBAEjCyB,IADiBD,EAAQ3B,KAAKG,MAAO,+BAApBwB,KACkBA,EAAQ3B,KAAKG,MAAO,yCAApBwB,KAAoE,eACvGE,EAAQ7B,KAAKI,MAAMyB,OAAS7B,KAAKG,MAAM0B,MAEvCC,EAAgB9B,KAAKkB,aAQ3B,GAPIY,EAAcC,eAAiBH,IAC/BE,EAAcC,cAAcH,kBAAoBA,GAM5B,YAApB5B,KAAKG,MAAM6B,MAAsBF,EAAcG,eAAgB,CAC/D,MAAMC,UAAEA,EAASC,SAAEA,KAAaC,GAASN,EAAcG,eACvDH,EAAcG,eAAiB,IAAKG,EACxC,CAEA,MAAO,IACCV,GAAc,CAAEW,SAAU,CAAEX,kBAC5BG,GAAS,CAAEA,MAAO,CAAES,UAAWT,EAAMS,UAAWC,aAAcV,EAAMU,kBACrET,EACHU,0BAA0B,EAElC,CAEOC,MAAAA,GAEH,MAAM,IAAIC,MAAM,qCACpB,CAOOC,KAAAA,CAAMC,GACT,MAAMC,EAA0B,iBAAZD,EAAuBE,SAASC,cAA2BH,GAAWA,EAE1F,IAAKC,EACD,MAAM,IAAIH,MAAM,uDAGpB,MAAMM,GAAkBhD,KAAKM,MA8B7B,OA5BIN,KAAKM,OACLN,KAAKiD,UAGTjD,KAAKM,MAAQuC,EAEb7C,KAAKK,WAAaL,KAAKyC,SAEvBA,EAAOzC,KAAKK,WAAYwC,GAGpBG,GACIhD,KAAKG,MAAM+C,SAAWlD,KAAKG,MAAM+C,QAAQC,WACzCnD,KAAKmB,eAAe,CAChBiC,eAAgBP,GAAQA,EAAsBQ,YAC9CC,UAAYtD,KAAKG,MAAMoD,SAA2E,SAAhEvD,KAAKC,2BAAgCD,KAAKC,iBAC5EuD,OAASxD,KAAKG,MAAMoD,SAA0B,SAAf,eAChCE,MAAK,KAICzD,KAAKG,MAAMoD,UACZvD,KAAKqB,gBAAgB,CAAEW,KAAM0B,GACjC,IAKL1D,IACX,CAQO2D,MAAAA,CAAOxD,GAIV,OAHAH,KAAKG,MAAQH,KAAKiB,YAAY,IAAKjB,KAAKG,SAAUA,IAClDH,KAAKI,MAAQ,GAENJ,KAAKiD,UAAUN,MAAM3C,KAAKM,MACrC,CAKA,OAAA2C,GAKI,OAJIjD,KAAKM,OACLmC,EAAO,KAAMzC,KAAKM,OAGfN,IACX,CAMA,MAAA4D,GACI5D,KAAKiD,UAEDjD,KAAKO,MACLP,KAAKO,KAAKqD,OAAO5D,KAEzB"}

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"}

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

@@ -1,2 +1,2 @@
-import{createElement as a,Fragment as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../core/Context/useCoreContext.js";const c=()=>{const{i18n:c}=t();return a(e,null,a("div",{className:"adyen-checkout-ctp__card-animation"},a("div",{className:"adyen-checkout-ctp__card-animation-layer"}),a("div",{className:"adyen-checkout-ctp__card-animation-layer"}),a("div",{className:"adyen-checkout-ctp__card-animation-layer"})),a("div",{className:"adyen-checkout-ctp__loading-subtitle"},c.get("ctp.loading.intro")))};export{c as default};
+import{createElement as a,Fragment as e}from"../../../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../../../core/Context/CoreProvider.js";const c=()=>{const{i18n:c}=t();return a(e,null,a("div",{className:"adyen-checkout-ctp__card-animation"},a("div",{className:"adyen-checkout-ctp__card-animation-layer"}),a("div",{className:"adyen-checkout-ctp__card-animation-layer"}),a("div",{className:"adyen-checkout-ctp__card-animation-layer"})),a("div",{className:"adyen-checkout-ctp__loading-subtitle"},c.get("ctp.loading.intro")))};export{c as default};
 //# sourceMappingURL=CtPLoader.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CtPLogin.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLogin.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPLoginInput, { CtPLoginInputHandlers } from './CtPLoginInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport SrciError from '../../services/sdks/SrciError';\nimport useCoreContext from '../../../../../core/Context/useCoreContext';\nimport './CtPLogin.scss';\nimport TimeoutError from '../../errors/TimeoutError';\n\nconst CtPLogin = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { isCtpPrimaryPaymentMethod, setIsCtpPrimaryPaymentMethod, verifyIfShopperIsEnrolled, startIdentityValidation } = useClickToPayContext();\n    const [shopperLogin, setShopperLogin] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);\n    const [loginInputHandlers, setLoginInputHandlers] = useState<CtPLoginInputHandlers>(null);\n\n    const onSetLoginInputHandlers = useCallback((handlers: CtPLoginInputHandlers) => {\n        setLoginInputHandlers(handlers);\n    }, []);\n\n    const handleOnLoginChange = useCallback(({ data, isValid }) => {\n        setShopperLogin(data.shopperLogin);\n        setIsValid(isValid);\n\n        // As soon as the Shopper interacts with input, the CtP becomes the primary PM\n        if (data?.shopperLogin?.length > 0) {\n            setIsCtpPrimaryPaymentMethod(true);\n        }\n    }, []);\n\n    const handleOnLoginButtonClick = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            loginInputHandlers.validateInput();\n            return;\n        }\n\n        setIsLoggingIn(true);\n\n        try {\n            const { isEnrolled } = await verifyIfShopperIsEnrolled({ shopperEmail: shopperLogin });\n            if (isEnrolled) {\n                await startIdentityValidation();\n            } else {\n                setErrorCode('NOT_FOUND');\n                setIsLoggingIn(false);\n            }\n        } catch (error) {\n            if (error instanceof SrciError) console.warn(`CtP - Login error: ${error.toString()}`);\n            if (error instanceof TimeoutError) console.warn(error.toString());\n            setErrorCode(error?.reason);\n            setIsLoggingIn(false);\n        }\n    }, [verifyIfShopperIsEnrolled, startIdentityValidation, shopperLogin, isValid, loginInputHandlers]);\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.login.title')}</CtPSection.Title>\n\n            <CtPSection.Text>{i18n.get('ctp.login.subtitle')}</CtPSection.Text>\n\n            <CtPLoginInput\n                onChange={handleOnLoginChange}\n                onSetInputHandlers={onSetLoginInputHandlers}\n                disabled={isLoggingIn}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={handleOnLoginButtonClick}\n            />\n\n            <Button\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                status={isLoggingIn && 'loading'}\n                onClick={() => {\n                    void handleOnLoginButtonClick();\n                }}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPLogin;\n"],"names":["CtPLogin","i18n","useCoreContext","isCtpPrimaryPaymentMethod","setIsCtpPrimaryPaymentMethod","verifyIfShopperIsEnrolled","startIdentityValidation","useClickToPayContext","shopperLogin","setShopperLogin","useState","isValid","setIsValid","errorCode","setErrorCode","isLoggingIn","setIsLoggingIn","loginInputHandlers","setLoginInputHandlers","onSetLoginInputHandlers","useCallback","handlers","handleOnLoginChange","data","length","handleOnLoginButtonClick","async","isEnrolled","shopperEmail","error","SrciError","console","warn","toString","TimeoutError","reason","validateInput","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","get","Text","CtPLoginInput","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","Button","label","variant","status","onClick"],"mappings":"+iBAYA,MAAMA,EAAW,KACb,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,6BAAEA,EAA4BC,0BAAEA,EAAyBC,wBAAEA,GAA4BC,KACjHC,EAAcC,GAAmBC,EAAiB,OAClDC,EAASC,GAAcF,GAAkB,IACzCG,EAAWC,GAAgBJ,EAAiB,OAC5CK,EAAaC,GAAkBN,GAAkB,IACjDO,EAAoBC,GAAyBR,EAAgC,MAE9ES,EAA0BC,GAAaC,IACzCH,EAAsBG,EAAAA,GACvB,IAEGC,EAAsBF,GAAY,EAAGG,OAAMZ,cAC7CF,EAAgBc,EAAKf,cACrBI,EAAWD,GAGPY,GAAMf,cAAcgB,OAAS,GAC7BpB,GAA6B,EACjC,GACD,IAEGqB,EAA2BL,GAAYM,UAGzC,GAFAZ,EAAa,MAERH,EAAL,CAKAK,GAAe,GAEf,IACI,MAAMW,WAAEA,SAAqBtB,EAA0B,CAAEuB,aAAcpB,IACnEmB,QACMrB,KAENQ,EAAa,aACbE,GAAe,GAEvB,CAAE,MAAOa,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,sBAAsBH,EAAMI,cACrEJ,aAAiBK,GAAcH,QAAQC,KAAKH,EAAMI,YACtDnB,EAAae,GAAOM,QACpBnB,GAAe,EACnB,CAjBA,MAFIC,EAAmBmB,eAmBvB,GACD,CAAC/B,EAA2BC,EAAyBE,EAAcG,EAASM,IAE/E,OACIoB,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAazC,EAAK0C,IAAI,oBAEvDN,EAACE,EAAWK,KAAI,KAAE3C,EAAK0C,IAAI,uBAE3BN,EAACQ,EAAAA,CACGC,SAAUxB,EACVyB,mBAAoB5B,EACpB6B,SAAUjC,EACVkC,aAAcpC,GAAaZ,EAAK0C,IAAI,cAAc9B,KAClDqC,aAAczB,IAGlBY,EAACc,EAAAA,CACGC,MAAOnD,EAAK0C,IAAI,YAChBU,QAASlD,EAA4B,UAAY,YACjDmD,OAAQvC,GAAe,UACvBwC,QAAS,KACA9B,GAAAA"}
+{"version":3,"file":"CtPLogin.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLogin.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport Button from '../../../Button';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport CtPLoginInput, { CtPLoginInputHandlers } from './CtPLoginInput';\nimport { CtPInfo } from '../CtPInfo';\nimport CtPSection from '../CtPSection';\nimport SrciError from '../../services/sdks/SrciError';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogin.scss';\nimport TimeoutError from '../../errors/TimeoutError';\n\nconst CtPLogin = (): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const { isCtpPrimaryPaymentMethod, setIsCtpPrimaryPaymentMethod, verifyIfShopperIsEnrolled, startIdentityValidation } = useClickToPayContext();\n    const [shopperLogin, setShopperLogin] = useState<string>(null);\n    const [isValid, setIsValid] = useState<boolean>(false);\n    const [errorCode, setErrorCode] = useState<string>(null);\n    const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);\n    const [loginInputHandlers, setLoginInputHandlers] = useState<CtPLoginInputHandlers>(null);\n\n    const onSetLoginInputHandlers = useCallback((handlers: CtPLoginInputHandlers) => {\n        setLoginInputHandlers(handlers);\n    }, []);\n\n    const handleOnLoginChange = useCallback(({ data, isValid }) => {\n        setShopperLogin(data.shopperLogin);\n        setIsValid(isValid);\n\n        // As soon as the Shopper interacts with input, the CtP becomes the primary PM\n        if (data?.shopperLogin?.length > 0) {\n            setIsCtpPrimaryPaymentMethod(true);\n        }\n    }, []);\n\n    const handleOnLoginButtonClick = useCallback(async () => {\n        setErrorCode(null);\n\n        if (!isValid) {\n            loginInputHandlers.validateInput();\n            return;\n        }\n\n        setIsLoggingIn(true);\n\n        try {\n            const { isEnrolled } = await verifyIfShopperIsEnrolled({ shopperEmail: shopperLogin });\n            if (isEnrolled) {\n                await startIdentityValidation();\n            } else {\n                setErrorCode('NOT_FOUND');\n                setIsLoggingIn(false);\n            }\n        } catch (error) {\n            if (error instanceof SrciError) console.warn(`CtP - Login error: ${error.toString()}`);\n            if (error instanceof TimeoutError) console.warn(error.toString());\n            setErrorCode(error?.reason);\n            setIsLoggingIn(false);\n        }\n    }, [verifyIfShopperIsEnrolled, startIdentityValidation, shopperLogin, isValid, loginInputHandlers]);\n\n    return (\n        <Fragment>\n            <CtPSection.Title endAdornment={<CtPInfo />}>{i18n.get('ctp.login.title')}</CtPSection.Title>\n\n            <CtPSection.Text>{i18n.get('ctp.login.subtitle')}</CtPSection.Text>\n\n            <CtPLoginInput\n                onChange={handleOnLoginChange}\n                onSetInputHandlers={onSetLoginInputHandlers}\n                disabled={isLoggingIn}\n                errorMessage={errorCode && i18n.get(`ctp.errors.${errorCode}`)}\n                onPressEnter={handleOnLoginButtonClick}\n            />\n\n            <Button\n                label={i18n.get('continue')}\n                variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}\n                status={isLoggingIn && 'loading'}\n                onClick={() => {\n                    void handleOnLoginButtonClick();\n                }}\n            />\n        </Fragment>\n    );\n};\n\nexport default CtPLogin;\n"],"names":["CtPLogin","i18n","useCoreContext","isCtpPrimaryPaymentMethod","setIsCtpPrimaryPaymentMethod","verifyIfShopperIsEnrolled","startIdentityValidation","useClickToPayContext","shopperLogin","setShopperLogin","useState","isValid","setIsValid","errorCode","setErrorCode","isLoggingIn","setIsLoggingIn","loginInputHandlers","setLoginInputHandlers","onSetLoginInputHandlers","useCallback","handlers","handleOnLoginChange","data","length","handleOnLoginButtonClick","async","isEnrolled","shopperEmail","error","SrciError","console","warn","toString","TimeoutError","reason","validateInput","h","Fragment","CtPSection","Title","endAdornment","CtPInfo","get","Text","CtPLoginInput","onChange","onSetInputHandlers","disabled","errorMessage","onPressEnter","Button","label","variant","status","onClick"],"mappings":"+jBAYA,MAAMA,EAAW,KACb,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,6BAAEA,EAA4BC,0BAAEA,EAAyBC,wBAAEA,GAA4BC,KACjHC,EAAcC,GAAmBC,EAAiB,OAClDC,EAASC,GAAcF,GAAkB,IACzCG,EAAWC,GAAgBJ,EAAiB,OAC5CK,EAAaC,GAAkBN,GAAkB,IACjDO,EAAoBC,GAAyBR,EAAgC,MAE9ES,EAA0BC,GAAaC,IACzCH,EAAsBG,EAAAA,GACvB,IAEGC,EAAsBF,GAAY,EAAGG,OAAMZ,cAC7CF,EAAgBc,EAAKf,cACrBI,EAAWD,GAGPY,GAAMf,cAAcgB,OAAS,GAC7BpB,GAA6B,EACjC,GACD,IAEGqB,EAA2BL,GAAYM,UAGzC,GAFAZ,EAAa,MAERH,EAAL,CAKAK,GAAe,GAEf,IACI,MAAMW,WAAEA,SAAqBtB,EAA0B,CAAEuB,aAAcpB,IACnEmB,QACMrB,KAENQ,EAAa,aACbE,GAAe,GAEvB,CAAE,MAAOa,GACDA,aAAiBC,GAAWC,QAAQC,KAAK,sBAAsBH,EAAMI,cACrEJ,aAAiBK,GAAcH,QAAQC,KAAKH,EAAMI,YACtDnB,EAAae,GAAOM,QACpBnB,GAAe,EACnB,CAjBA,MAFIC,EAAmBmB,eAmBvB,GACD,CAAC/B,EAA2BC,EAAyBE,EAAcG,EAASM,IAE/E,OACIoB,EAACC,EAAAA,KACGD,EAACE,EAAWC,MAAK,CAACC,aAAcJ,EAACK,EAAAA,OAAazC,EAAK0C,IAAI,oBAEvDN,EAACE,EAAWK,KAAI,KAAE3C,EAAK0C,IAAI,uBAE3BN,EAACQ,EAAAA,CACGC,SAAUxB,EACVyB,mBAAoB5B,EACpB6B,SAAUjC,EACVkC,aAAcpC,GAAaZ,EAAK0C,IAAI,cAAc9B,KAClDqC,aAAczB,IAGlBY,EAACc,EAAAA,CACGC,MAAOnD,EAAK0C,IAAI,YAChBU,QAASlD,EAA4B,UAAY,YACjDmD,OAAQvC,GAAe,UACvBwC,QAAS,KACA9B,GAAAA"}

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

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