npm - @adyen/adyen-web - Versions diffs - 6.21.0 → 6.22.0 - Mend

@adyen/adyen-web 6.21.0 → 6.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/dist/es/components/PayTo/components/BSBInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import{useEffect as a,useRef as t}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../utils/useForm/useForm.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import n from"../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import l from"../../internal/FormFields/InputText.js";import{bsbValidationRules as b}from"./validate.js";import{phoneFormatters as m}from"../../internal/PhoneInput/validate.js";import u from"./PayToNameFields.js";const c=["bankAccountNumber","bsb","firstName","lastName"];function d({setComponentRef:d,defaultData:p,placeholders:f,onChange:N,setStatus:h}){const{i18n:k}=i(),F=o({schema:c,defaultData:p,rules:b,formatters:m}),{handleChangeFor:g,triggerValidation:j,data:A,errors:B,valid:v,isValid:C}=F;a(()=>{N({data:A,valid:v,errors:B,isValid:C})},[A,v,B,C]);const M=t({setStatus:h,showValidation:j});return a(()=>{d(M.current)},[d]),e(r,{classNameModifiers:["payto__bsb_input"],label:"BSB",description:"payto.bsb.description"},e(n,{label:k.get("payto.bsb.label.bankAccountNumber"),classNameModifiers:["col-60","bankAccountNumber"],errorMessage:s(k,B.bankAccountNumber,k.get("payto.bsb.label.bankAccountNumber")),name:"bankAccountNumber",i18n:k},e(l,{name:"bankAccountNumber",value:A.bankAccountNumber,onInput:g("bankAccountNumber","input"),onBlur:g("bankAccountNumber","blur"),placeholder:f?.bankAccountNumber,required:!0})),e(n,{label:k.get("Bank State Branch"),classNameModifiers:["col-40","bsb"],errorMessage:s(k,B.bsb,k.get("Bank State Branch")),name:"bsb",i18n:k},e(l,{name:"bsb",value:A.bsb,onInput:g("bsb","input"),onBlur:g("bsb","blur"),placeholder:f?.bsb,required:!0})),e(u,{i18n:k,data:A,handleChangeFor:g,errors:B,placeholders:f}))}export{d as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import{useEffect as a,useRef as t}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../utils/useForm/useForm.js";import{getErrorMessage as s}from"../../../utils/getErrorMessage.js";import n from"../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import l from"../../internal/FormFields/InputText.js";import{bsbValidationRules as b}from"./validate.js";import{phoneFormatters as m}from"../../internal/PhoneInput/validate.js";import u from"./PayToNameFields.js";const c=["bankAccountNumber","bsb","firstName","lastName"];function d({setComponentRef:d,defaultData:p,placeholders:f,onChange:N,setStatus:h,id:k}){const{i18n:F}=i(),g=o({schema:c,defaultData:p,rules:b,formatters:m}),{handleChangeFor:j,triggerValidation:A,data:B,errors:v,valid:C,isValid:M}=g;a(()=>{N({data:B,valid:C,errors:v,isValid:M})},[B,C,v,M]);const x=t({setStatus:h,showValidation:A});return a(()=>{d(x.current)},[d]),e(r,{id:k,classNameModifiers:["payto__bsb_input"],label:"BSB",description:"payto.bsb.description"},e(n,{label:F.get("payto.bsb.label.bankAccountNumber"),classNameModifiers:["col-60","bankAccountNumber"],errorMessage:s(F,v.bankAccountNumber,F.get("payto.bsb.label.bankAccountNumber")),name:"bankAccountNumber",i18n:F},e(l,{name:"bankAccountNumber",value:B.bankAccountNumber,onInput:j("bankAccountNumber","input"),onBlur:j("bankAccountNumber","blur"),placeholder:f?.bankAccountNumber,required:!0})),e(n,{label:F.get("Bank State Branch"),classNameModifiers:["col-40","bsb"],errorMessage:s(F,v.bsb,F.get("Bank State Branch")),name:"bsb",i18n:F},e(l,{name:"bsb",value:B.bsb,onInput:j("bsb","input"),onBlur:j("bsb","blur"),placeholder:f?.bsb,required:!0})),e(u,{i18n:F,data:B,handleChangeFor:j,errors:v,placeholders:f}))}export{d as default};
 //# sourceMappingURL=BSBInput.js.map

package/dist/es/components/PayTo/components/BSBInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BSBInput.js","sources":["../../../../../src/components/PayTo/components/BSBInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { bsbValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface BSBFormData {\n bsb: string;\n bankAccountNumber: string;\n firstName: string;\n lastName: string;\n}\n\nexport interface BSBInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: BSBFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n}\n\nconst BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];\n\nexport default function BSBInput({ setComponentRef, defaultData, placeholders, onChange, setStatus }: BSBInputProps) {\n const { i18n } = useCoreContext();\n\n const form = useForm<BSBFormData>({\n schema: BASE_SCHEMA,\n defaultData: defaultData,\n rules: bsbValidationRules,\n formatters: phoneFormatters\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form;\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset classNameModifiers={['payto__bsb_input']} label={'BSB'} description={'payto.bsb.description'}>\n <Field\n label={i18n.get('payto.bsb.label.bankAccountNumber')}\n classNameModifiers={['col-60', 'bankAccountNumber']}\n errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))}\n name={'bankAccountNumber'}\n i18n={i18n}\n >\n <InputText\n name={'bankAccountNumber'}\n value={data.bankAccountNumber}\n onInput={handleChangeFor('bankAccountNumber', 'input')}\n onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n placeholder={placeholders?.bankAccountNumber}\n required={true}\n />\n </Field>\n\n <Field\n label={i18n.get('Bank State Branch')}\n classNameModifiers={['col-40', 'bsb']}\n errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('Bank State Branch'))}\n name={'bsb'}\n i18n={i18n}\n >\n <InputText\n name={'bsb'}\n value={data.bsb}\n onInput={handleChangeFor('bsb', 'input')}\n onBlur={handleChangeFor('bsb', 'blur')}\n placeholder={placeholders?.bsb}\n required={true}\n />\n </Field>\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","BSBInput","setComponentRef","defaultData","placeholders","onChange","setStatus","i18n","useCoreContext","form","useForm","schema","rules","bsbValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","Field","get","errorMessage","getErrorMessage","bankAccountNumber","name","InputText","value","onInput","onBlur","placeholder","required","bsb","PayToNameFields"],"mappings":"~~oqBA+BA~~,MAAMA,EAAc,CAAC,oBAAqB,MAAO,YAAa,YAE/C,SAASC,GAASC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,~~IACrF~~,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAqB,CAC9BC,~~OAAQX~~,EACRG,YAAaA,~~EACbS~~,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,GAAYZ,EAG7Ea,EAAU,~~KACNjB~~,EAAS,~~CAAEa~~,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAME,EAAWC,EAA4B,~~CACzClB~~,UAAWA,~~EACXmB~~,eAAgBR,IAOpB,OAJAK,EAAU,~~KACNpB~~,~~EAAgBqB~~,EAASG,UAC1B,~~CAACxB~~,~~IAGAyB~~,EAACC,EAAAA,~~CAASC~~,mBAAoB,CAAC,oBAAqBC,MAAO,MAAOC,YAAa,~~yBAC3EJ~~,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qCAChBJ,mBAAoB,CAAC,SAAU,qBAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOiB,kBAAmB7B,EAAK0B,IAAI,sCACvEI,KAAM,oBACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,oBACNE,MAAOrB,EAAKkB,kBACZI,QAASxB,EAAgB,oBAAqB,SAC9CyB,OAAQzB,EAAgB,oBAAqB,QAC7C0B,~~YAAatC~~,~~GAAcgC~~,kBAC3BO,UAAU,KAIlBhB,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qBAChBJ,mBAAoB,CAAC,SAAU,OAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOyB,IAAKrC,EAAK0B,IAAI,sBACzDI,KAAM,MACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,MACNE,MAAOrB,EAAK0B,IACZJ,QAASxB,EAAgB,MAAO,SAChCyB,OAAQzB,EAAgB,MAAO,QAC/B0B,~~YAAatC~~,~~GAAcwC~~,IAC3BD,UAAU,KAIlBhB,EAACkB,EAAAA,CAAgBtC,KAAMA,EAAMW,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,~~EAAQf~~,aAAcA,IAGrH"}
1	+ {"version":3,"file":"BSBInput.js","sources":["../../../../../src/components/PayTo/components/BSBInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { bsbValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface BSBFormData {\n bsb: string;\n bankAccountNumber: string;\n firstName: string;\n lastName: string;\n}\n\nexport interface BSBInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: BSBFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n id?: string;\n}\n\nconst BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];\n\nexport default function BSBInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: BSBInputProps) {\n const { i18n } = useCoreContext();\n\n const form = useForm<BSBFormData>({\n schema: BASE_SCHEMA,\n defaultData: defaultData,\n rules: bsbValidationRules,\n formatters: phoneFormatters\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form;\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset id={id} classNameModifiers={['payto__bsb_input']} label={'BSB'} description={'payto.bsb.description'}>\n <Field\n label={i18n.get('payto.bsb.label.bankAccountNumber')}\n classNameModifiers={['col-60', 'bankAccountNumber']}\n errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))}\n name={'bankAccountNumber'}\n i18n={i18n}\n >\n <InputText\n name={'bankAccountNumber'}\n value={data.bankAccountNumber}\n onInput={handleChangeFor('bankAccountNumber', 'input')}\n onBlur={handleChangeFor('bankAccountNumber', 'blur')}\n placeholder={placeholders?.bankAccountNumber}\n required={true}\n />\n </Field>\n\n <Field\n label={i18n.get('Bank State Branch')}\n classNameModifiers={['col-40', 'bsb']}\n errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('Bank State Branch'))}\n name={'bsb'}\n i18n={i18n}\n >\n <InputText\n name={'bsb'}\n value={data.bsb}\n onInput={handleChangeFor('bsb', 'input')}\n onBlur={handleChangeFor('bsb', 'blur')}\n placeholder={placeholders?.bsb}\n required={true}\n />\n </Field>\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","BSBInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useForm","schema","rules","bsbValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","Field","get","errorMessage","getErrorMessage","bankAccountNumber","name","InputText","value","onInput","onBlur","placeholder","required","bsb","PayToNameFields"],"mappings":"oqBAgCA,MAAMA,EAAc,CAAC,oBAAqB,MAAO,YAAa,YAE/C,SAASC,GAASC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAChG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAqB,CAC9BC,OAAQZ,EACRG,YAAaA,EACbU,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,GAAYZ,EAG7Ea,EAAU,KACNlB,EAAS,CAAEc,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAME,EAAWC,EAA4B,CACzCnB,UAAWA,EACXoB,eAAgBR,IAOpB,OAJAK,EAAU,KACNrB,EAAgBsB,EAASG,UAC1B,CAACzB,IAGA0B,EAACC,EAAAA,CAAStB,GAAIA,EAAIuB,mBAAoB,CAAC,oBAAqBC,MAAO,MAAOC,YAAa,yBACnFJ,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qCAChBJ,mBAAoB,CAAC,SAAU,qBAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOiB,kBAAmB7B,EAAK0B,IAAI,sCACvEI,KAAM,oBACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,oBACNE,MAAOrB,EAAKkB,kBACZI,QAASxB,EAAgB,oBAAqB,SAC9CyB,OAAQzB,EAAgB,oBAAqB,QAC7C0B,YAAavC,GAAciC,kBAC3BO,UAAU,KAIlBhB,EAACK,EAAAA,CACGF,MAAOvB,EAAK0B,IAAI,qBAChBJ,mBAAoB,CAAC,SAAU,OAC/BK,aAAcC,EAAgB5B,EAAMY,EAAOyB,IAAKrC,EAAK0B,IAAI,sBACzDI,KAAM,MACN9B,KAAMA,GAENoB,EAACW,EAAAA,CACGD,KAAM,MACNE,MAAOrB,EAAK0B,IACZJ,QAASxB,EAAgB,MAAO,SAChCyB,OAAQzB,EAAgB,MAAO,QAC/B0B,YAAavC,GAAcyC,IAC3BD,UAAU,KAIlBhB,EAACkB,EAAAA,CAAgBtC,KAAMA,EAAMW,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQhB,aAAcA,IAGrH"}

package/dist/es/components/PayTo/components/PayIDInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import i,{PayToIdentifierEnum as a}from"./IdentifierSelector.js";import{useEffect as t,useRef as o}from"../../../external/preact/hooks/dist/hooks.js";import l from"../../../utils/useForm/useForm.js";import s from"./PayToPhone.js";import n from"../../internal/FormFields/InputEmail.js";import{getErrorMessage as d}from"../../../utils/getErrorMessage.js";import m from"../../internal/FormFields/Field/Field.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import f from"../../internal/FormFields/InputText.js";import{payIdValidationRules as c}from"./validate.js";import{phoneFormatters as u}from"../../internal/PhoneInput/validate.js";import g from"./PayToNameFields.js";const h=["selectedIdentifier","firstName","lastName"],b={[a.email]:["email"],[a.phone]:["phoneNumber","phonePrefix"],[a.abn]:["abn"],[a.orgid]:["orgid"]};function I({setComponentRef:I,defaultData:F,placeholders:j,onChange:N,setStatus:y}){const{i18n:M}=p(),v=l({schema:h,defaultData:{selectedIdentifier:a.phone,...F},rules:c,formatters:u}),{handleChangeFor:C,triggerValidation:P,data:x,errors:B,valid:E,isValid:S,setSchema:V}=v;t(()=>{V([...b[x.selectedIdentifier],...h])},[x.selectedIdentifier]),t(()=>{N({data:x,valid:E,errors:B,isValid:S})},[x,E,B,S]);const q=o({setStatus:y,showValidation:P});return t(()=>{I(q.current)},[I]),e(r,{classNameModifiers:["payto__payid_input"],label:"PayID",description:"payto.payid.description"},e(i,{classNameModifiers:["col-40"],onSelectedIdentifier:C("selectedIdentifier"),selectedIdentifier:x.selectedIdentifier}),x.selectedIdentifier===a.phone&&e(s,{onChange:C("phone","blur"),data:x,form:v}),x.selectedIdentifier===a.email&&e(m,{label:M.get("shopperEmail"),classNameModifiers:["col-60","email"],errorMessage:d(M,B.email,M.get("shopperEmail")),dir:"ltr",name:"email",i18n:M},e(n,{name:"email",value:x.email,onInput:C("email","input"),onBlur:C("email","blur"),placeholder:j?.email,required:!0})),x.selectedIdentifier===a.abn&&e(m,{label:M.get("ABN"),classNameModifiers:["col-60","abn"],errorMessage:d(M,B.abn,M.get("ABN")),name:"ABN",i18n:M},e(f,{name:"abn",value:x.abn,onInput:C("abn","input"),onBlur:C("abn","blur"),placeholder:j?.abn,required:!0})),x.selectedIdentifier===a.orgid&&e(m,{label:M.get("payto.payid.label.orgid"),classNameModifiers:["col-60","orgid"],errorMessage:d(M,B.orgid,M.get("payto.payid.label.orgid")),name:"orgid",i18n:M},e(f,{name:"orgid",value:x.orgid,onInput:C("orgid","input"),onBlur:C("orgid","blur"),placeholder:j?.orgid,required:!0})),e(g,{i18n:M,data:x,handleChangeFor:C,errors:B,placeholders:j}))}export{I as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../internal/FormFields/Fieldset/Fieldset.js";import i,{PayToIdentifierEnum as a}from"./IdentifierSelector.js";import{useEffect as t,useRef as o}from"../../../external/preact/hooks/dist/hooks.js";import l from"../../../utils/useForm/useForm.js";import s from"./PayToPhone.js";import n from"../../internal/FormFields/InputEmail.js";import{getErrorMessage as d}from"../../../utils/getErrorMessage.js";import m from"../../internal/FormFields/Field/Field.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import f from"../../internal/FormFields/InputText.js";import{payIdValidationRules as c}from"./validate.js";import{phoneFormatters as u}from"../../internal/PhoneInput/validate.js";import g from"./PayToNameFields.js";const h=["selectedIdentifier","firstName","lastName"],b={[a.email]:["email"],[a.phone]:["phoneNumber","phonePrefix"],[a.abn]:["abn"],[a.orgid]:["orgid"]};function I({setComponentRef:I,defaultData:F,placeholders:j,onChange:N,setStatus:y,id:M}){const{i18n:v}=p(),C=l({schema:h,defaultData:{selectedIdentifier:a.phone,...F},rules:c,formatters:u}),{handleChangeFor:P,triggerValidation:x,data:B,errors:E,valid:S,isValid:V,setSchema:q}=C;t(()=>{q([...b[B.selectedIdentifier],...h])},[B.selectedIdentifier]),t(()=>{N({data:B,valid:S,errors:E,isValid:V})},[B,S,E,V]);const A=o({setStatus:y,showValidation:x});return t(()=>{I(A.current)},[I]),e(r,{id:M,classNameModifiers:["payto__payid_input"],label:"PayID",description:"payto.payid.description"},e(i,{classNameModifiers:["col-40"],onSelectedIdentifier:P("selectedIdentifier"),selectedIdentifier:B.selectedIdentifier}),B.selectedIdentifier===a.phone&&e(s,{onChange:P("phone","blur"),data:B,form:C}),B.selectedIdentifier===a.email&&e(m,{label:v.get("shopperEmail"),classNameModifiers:["col-60","email"],errorMessage:d(v,E.email,v.get("shopperEmail")),dir:"ltr",name:"email",i18n:v},e(n,{name:"email",value:B.email,onInput:P("email","input"),onBlur:P("email","blur"),placeholder:j?.email,required:!0})),B.selectedIdentifier===a.abn&&e(m,{label:v.get("ABN"),classNameModifiers:["col-60","abn"],errorMessage:d(v,E.abn,v.get("ABN")),name:"ABN",i18n:v},e(f,{name:"abn",value:B.abn,onInput:P("abn","input"),onBlur:P("abn","blur"),placeholder:j?.abn,required:!0})),B.selectedIdentifier===a.orgid&&e(m,{label:v.get("payto.payid.label.orgid"),classNameModifiers:["col-60","orgid"],errorMessage:d(v,E.orgid,v.get("payto.payid.label.orgid")),name:"orgid",i18n:v},e(f,{name:"orgid",value:B.orgid,onInput:P("orgid","input"),onBlur:P("orgid","blur"),placeholder:j?.orgid,required:!0})),e(g,{i18n:v,data:B,handleChangeFor:P,errors:E,placeholders:j}))}export{I as default};
 //# sourceMappingURL=PayIDInput.js.map

package/dist/es/components/PayTo/components/PayIDInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n email: string;\n phone: string;\n abn: string;\n orgid: string;\n firstName: string;\n lastName: string;\n phoneNumber?: string;\n phonePrefix?: string;\n selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: PayIdFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n [PayToIdentifierEnum.email]: ['email'],\n [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n [PayToIdentifierEnum.abn]: ['abn'],\n [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus }: PayIDInputProps) {\n const { i18n } = useCoreContext();\n\n const form = useForm<PayIdFormData>({\n schema: BASE_SCHEMA,\n defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n rules: payIdValidationRules,\n formatters: phoneFormatters\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n // handle the changes of identifier, each identifier gets its own schema\n useEffect(() => {\n // get the correct schema for each identifier and merge it with the base\n setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n }, [data.selectedIdentifier]);\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n <IdentifierSelector\n classNameModifiers={['col-40']}\n onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n selectedIdentifier={data.selectedIdentifier}\n />\n {data.selectedIdentifier === PayToIdentifierEnum.phone && (\n <PayToPhone onChange={handleChangeFor('phone', 'blur')} data={data} form={form} />\n )}\n\n {/* TODO probably worth refactoring this into either re-usable components or builder */}\n {data.selectedIdentifier === PayToIdentifierEnum.email && (\n <Field\n label={i18n.get('shopperEmail')}\n classNameModifiers={['col-60', 'email']}\n errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n dir={'ltr'}\n name={'email'}\n i18n={i18n}\n >\n <InputEmail\n name={'email'}\n value={data.email}\n onInput={handleChangeFor('email', 'input')}\n onBlur={handleChangeFor('email', 'blur')}\n placeholder={placeholders?.email}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n <Field\n label={i18n.get('ABN')}\n classNameModifiers={['col-60', 'abn']}\n errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n name={'ABN'}\n i18n={i18n}\n >\n <InputText\n name={'abn'}\n value={data.abn}\n onInput={handleChangeFor('abn', 'input')}\n onBlur={handleChangeFor('abn', 'blur')}\n placeholder={placeholders?.abn}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n <Field\n label={i18n.get('payto.payid.label.orgid')}\n classNameModifiers={['col-60', 'orgid']}\n errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n name={'orgid'}\n i18n={i18n}\n >\n <InputText\n name={'orgid'}\n value={data.orgid}\n onInput={handleChangeFor('orgid', 'input')}\n onBlur={handleChangeFor('orgid', 'blur')}\n placeholder={placeholders?.orgid}\n required={true}\n />\n </Field>\n )}\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","i18n","useCoreContext","form","useForm","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","InputEmail","value","onInput","onBlur","placeholder","required","InputText","PayToNameFields"],"mappings":"~~6zBAuCA~~,MAAMA,EAAc,CAAC,qBAAsB,YAAa,YAElDC,EAAoB,CACtB,CAACC,EAAoBC,OAAQ,CAAC,SAC9B,CAACD,EAAoBE,OAAQ,CAAC,cAAe,eAC7C,CAACF,EAAoBG,KAAM,CAAC,OAC5B,CAACH,EAAoBI,OAAQ,CAAC,UAGnB,SAASC,GAAWC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,~~IACvF~~,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAuB,CAChCC,~~OAAQjB~~,EACRS,YAAa,~~CAAES~~,~~mBAAoBhB~~,EAAoBE,SAAUK,~~GACjEU~~,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,UAAEA,GAAcd,EAGxFe,EAAU,KAEND,EAAU,~~IAAI5B~~,~~EAAkBwB~~,EAAKP,~~uBAAwBlB~~,KAC9D,~~CAACyB~~,EAAKP,qBAGTY,EAAU,~~KACNnB~~,EAAS,~~CAAEc~~,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAMG,EAAWC,EAA4B,~~CACzCpB~~,UAAWA,~~EACXqB~~,eAAgBT,IAOpB,OAJAM,EAAU,~~KACNtB~~,~~EAAgBuB~~,EAASG,UAC1B,~~CAAC1B~~,~~IAGA2B~~,EAACC,EAAAA,~~CAASC~~,mBAAoB,CAAC,sBAAuBC,MAAO,QAASC,YAAa,~~2BAC/EJ~~,EAACK,EAAAA,CACGH,mBAAoB,CAAC,UACrBI,qBAAsBlB,EAAgB,sBACtCL,mBAAoBO,EAAKP,qBAE5BO,EAAKP,~~qBAAuBhB~~,EAAoBE,~~OAC7C+B~~,EAACO,EAAAA,~~CAAW/B~~,~~SAAUY~~,EAAgB,QAAS,QAASE,KAAMA,EAAMV,KAAMA,IAI7EU,EAAKP,~~qBAAuBhB~~,EAAoBC,~~OAC7CgC~~,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,gBAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,~~EAAOvB~~,~~MAAOU~~,EAAK+B,IAAI,iBAC3DG,IAAK,MACLC,KAAM,QACNnC,KAAMA,GAENsB,EAACc,EAAAA,CACGD,KAAM,QACNE,MAAOzB,~~EAAKtB~~,~~MACZgD~~,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,~~YAAa3C~~,GAAcP,~~MAC3BmD~~,UAAU,KAKrB7B,EAAKP,~~qBAAuBhB~~,EAAoBG,~~KAC7C8B~~,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,OAChBP,mBAAoB,CAAC,SAAU,OAC/BQ,aAAcC,EAAgBjC,EAAMa,~~EAAOrB~~,~~IAAKQ~~,EAAK+B,IAAI,QACzDI,KAAM,MACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,MACNE,MAAOzB,~~EAAKpB~~,~~IACZ8C~~,QAAS5B,EAAgB,MAAO,SAChC6B,OAAQ7B,EAAgB,MAAO,QAC/B8B,~~YAAa3C~~,GAAcL,~~IAC3BiD~~,UAAU,KAKrB7B,EAAKP,~~qBAAuBhB~~,EAAoBI,~~OAC7C6B~~,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,2BAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,~~EAAOpB~~,~~MAAOO~~,EAAK+B,IAAI,4BAC3DI,KAAM,QACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,QACNE,MAAOzB,~~EAAKnB~~,~~MACZ6C~~,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,~~YAAa3C~~,GAAcJ,~~MAC3BgD~~,UAAU,KAKtBnB,EAACqB,EAAAA,CAAgB3C,KAAMA,EAAMY,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,~~EAAQhB~~,aAAcA,IAGrH"}
1	+ {"version":3,"file":"PayIDInput.js","sources":["../../../../../src/components/PayTo/components/PayIDInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';\nimport { useEffect, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport PayToPhone from './PayToPhone';\nimport InputEmail from '../../internal/FormFields/InputEmail';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../../internal/FormFields/InputText';\nimport { payIdValidationRules } from './validate';\nimport './PayIDInput.scss';\nimport { phoneFormatters } from '../../internal/PhoneInput/validate';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport PayToNameFields from './PayToNameFields';\nimport { PayToPlaceholdersType } from '../types';\n\nexport interface PayIdFormData {\n email: string;\n phone: string;\n abn: string;\n orgid: string;\n firstName: string;\n lastName: string;\n phoneNumber?: string;\n phonePrefix?: string;\n selectedIdentifier: PayToIdentifierEnum;\n}\n\nexport interface PayIDInputProps {\n status: UIElementStatus;\n setStatus: (status: UIElementStatus) => void;\n defaultData: PayIdFormData;\n placeholders: PayToPlaceholdersType;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n id?: string;\n}\n\nconst BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];\n\nconst IDENTIFIER_SCHEMA = {\n [PayToIdentifierEnum.email]: ['email'],\n [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],\n [PayToIdentifierEnum.abn]: ['abn'],\n [PayToIdentifierEnum.orgid]: ['orgid']\n};\n\nexport default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus, id }: PayIDInputProps) {\n const { i18n } = useCoreContext();\n\n const form = useForm<PayIdFormData>({\n schema: BASE_SCHEMA,\n defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },\n rules: payIdValidationRules,\n formatters: phoneFormatters\n });\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;\n\n // handle the changes of identifier, each identifier gets its own schema\n useEffect(() => {\n // get the correct schema for each identifier and merge it with the base\n setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);\n }, [data.selectedIdentifier]);\n\n // standard onChange propagate to parent state\n useEffect(() => {\n onChange({ data, valid, errors, isValid });\n }, [data, valid, errors, isValid]);\n\n const payToRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: triggerValidation\n });\n\n useEffect(() => {\n setComponentRef(payToRef.current);\n }, [setComponentRef]);\n\n return (\n <Fieldset id={id} classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>\n <IdentifierSelector\n classNameModifiers={['col-40']}\n onSelectedIdentifier={handleChangeFor('selectedIdentifier')}\n selectedIdentifier={data.selectedIdentifier}\n />\n {data.selectedIdentifier === PayToIdentifierEnum.phone && (\n <PayToPhone onChange={handleChangeFor('phone', 'blur')} data={data} form={form} />\n )}\n\n {/* TODO probably worth refactoring this into either re-usable components or builder */}\n {data.selectedIdentifier === PayToIdentifierEnum.email && (\n <Field\n label={i18n.get('shopperEmail')}\n classNameModifiers={['col-60', 'email']}\n errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}\n dir={'ltr'}\n name={'email'}\n i18n={i18n}\n >\n <InputEmail\n name={'email'}\n value={data.email}\n onInput={handleChangeFor('email', 'input')}\n onBlur={handleChangeFor('email', 'blur')}\n placeholder={placeholders?.email}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.abn && (\n <Field\n label={i18n.get('ABN')}\n classNameModifiers={['col-60', 'abn']}\n errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}\n name={'ABN'}\n i18n={i18n}\n >\n <InputText\n name={'abn'}\n value={data.abn}\n onInput={handleChangeFor('abn', 'input')}\n onBlur={handleChangeFor('abn', 'blur')}\n placeholder={placeholders?.abn}\n required={true}\n />\n </Field>\n )}\n\n {data.selectedIdentifier === PayToIdentifierEnum.orgid && (\n <Field\n label={i18n.get('payto.payid.label.orgid')}\n classNameModifiers={['col-60', 'orgid']}\n errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}\n name={'orgid'}\n i18n={i18n}\n >\n <InputText\n name={'orgid'}\n value={data.orgid}\n onInput={handleChangeFor('orgid', 'input')}\n onBlur={handleChangeFor('orgid', 'blur')}\n placeholder={placeholders?.orgid}\n required={true}\n />\n </Field>\n )}\n\n <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />\n </Fieldset>\n );\n}\n"],"names":["BASE_SCHEMA","IDENTIFIER_SCHEMA","PayToIdentifierEnum","email","phone","abn","orgid","PayIDInput","setComponentRef","defaultData","placeholders","onChange","setStatus","id","i18n","useCoreContext","form","useForm","schema","selectedIdentifier","rules","payIdValidationRules","formatters","phoneFormatters","handleChangeFor","triggerValidation","data","errors","valid","isValid","setSchema","useEffect","payToRef","useRef","showValidation","current","h","Fieldset","classNameModifiers","label","description","IdentifierSelector","onSelectedIdentifier","PayToPhone","Field","get","errorMessage","getErrorMessage","dir","name","InputEmail","value","onInput","onBlur","placeholder","required","InputText","PayToNameFields"],"mappings":"6zBAwCA,MAAMA,EAAc,CAAC,qBAAsB,YAAa,YAElDC,EAAoB,CACtB,CAACC,EAAoBC,OAAQ,CAAC,SAC9B,CAACD,EAAoBE,OAAQ,CAAC,cAAe,eAC7C,CAACF,EAAoBG,KAAM,CAAC,OAC5B,CAACH,EAAoBI,OAAQ,CAAC,UAGnB,SAASC,GAAWC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,SAAEA,EAAQC,UAAEA,EAASC,GAAEA,IAClG,MAAMC,KAAEA,GAASC,IAEXC,EAAOC,EAAuB,CAChCC,OAAQlB,EACRS,YAAa,CAAEU,mBAAoBjB,EAAoBE,SAAUK,GACjEW,MAAOC,EACPC,WAAYC,KAEVC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,UAAEA,GAAcd,EAGxFe,EAAU,KAEND,EAAU,IAAI7B,EAAkByB,EAAKP,uBAAwBnB,KAC9D,CAAC0B,EAAKP,qBAGTY,EAAU,KACNpB,EAAS,CAAEe,OAAME,QAAOD,SAAQE,aACjC,CAACH,EAAME,EAAOD,EAAQE,IAEzB,MAAMG,EAAWC,EAA4B,CACzCrB,UAAWA,EACXsB,eAAgBT,IAOpB,OAJAM,EAAU,KACNvB,EAAgBwB,EAASG,UAC1B,CAAC3B,IAGA4B,EAACC,EAAAA,CAASxB,GAAIA,EAAIyB,mBAAoB,CAAC,sBAAuBC,MAAO,QAASC,YAAa,2BACvFJ,EAACK,EAAAA,CACGH,mBAAoB,CAAC,UACrBI,qBAAsBlB,EAAgB,sBACtCL,mBAAoBO,EAAKP,qBAE5BO,EAAKP,qBAAuBjB,EAAoBE,OAC7CgC,EAACO,EAAAA,CAAWhC,SAAUa,EAAgB,QAAS,QAASE,KAAMA,EAAMV,KAAMA,IAI7EU,EAAKP,qBAAuBjB,EAAoBC,OAC7CiC,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,gBAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOxB,MAAOW,EAAK+B,IAAI,iBAC3DG,IAAK,MACLC,KAAM,QACNnC,KAAMA,GAENsB,EAACc,EAAAA,CACGD,KAAM,QACNE,MAAOzB,EAAKvB,MACZiD,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,YAAa5C,GAAcP,MAC3BoD,UAAU,KAKrB7B,EAAKP,qBAAuBjB,EAAoBG,KAC7C+B,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,OAChBP,mBAAoB,CAAC,SAAU,OAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOtB,IAAKS,EAAK+B,IAAI,QACzDI,KAAM,MACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,MACNE,MAAOzB,EAAKrB,IACZ+C,QAAS5B,EAAgB,MAAO,SAChC6B,OAAQ7B,EAAgB,MAAO,QAC/B8B,YAAa5C,GAAcL,IAC3BkD,UAAU,KAKrB7B,EAAKP,qBAAuBjB,EAAoBI,OAC7C8B,EAACQ,EAAAA,CACGL,MAAOzB,EAAK+B,IAAI,2BAChBP,mBAAoB,CAAC,SAAU,SAC/BQ,aAAcC,EAAgBjC,EAAMa,EAAOrB,MAAOQ,EAAK+B,IAAI,4BAC3DI,KAAM,QACNnC,KAAMA,GAENsB,EAACoB,EAAAA,CACGP,KAAM,QACNE,MAAOzB,EAAKpB,MACZ8C,QAAS5B,EAAgB,QAAS,SAClC6B,OAAQ7B,EAAgB,QAAS,QACjC8B,YAAa5C,GAAcJ,MAC3BiD,UAAU,KAKtBnB,EAACqB,EAAAA,CAAgB3C,KAAMA,EAAMY,KAAMA,EAAMF,gBAAiBA,EAAiBG,OAAQA,EAAQjB,aAAcA,IAGrH"}

package/dist/es/components/PayTo/components/PayToComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import e from"../../internal/SegmentedControl/SegmentedControl.js";import{useState as o,useMemo as a}from"../../../external/preact/hooks/dist/hooks.js";import n from"./PayIDInput.js";import s from"./BSBInput.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import p from"../../../_virtual/index.js";function i(i){const{i18n:l}=r(),[d,u]=o("ready"),m=a(()=>[{value:"payid-option",label:"PayID",id:"payid-option",controls:"payid-input"},{value:"bsb-option",label:l.get("payto.bsb.option.label"),id:"bsb-option",controls:"bsb-input"}],[l]),c=m[0].value,[f,b]=o(c),y=({data:t,valid:e,errors:o,isValid:a})=>{i.onChange({data:{selectedInput:f,...t},valid:e,errors:o,isValid:a})};return t("div",{className:p({"adyen-checkout__payto-component":!0,"adyen-checkout__payto-component--loading":"loading"===d})},t(e,{selectedValue:f,options:m,onChange:b}),"payid-option"===f&&t(n,{status:d,setStatus:u,setComponentRef:i.setComponentRef,onChange:y,defaultData:i.data,placeholders:i.placeholders}),"bsb-option"===f&&t(s,{status:d,setStatus:u,setComponentRef:i.setComponentRef,onChange:y,defaultData:i.data,placeholders:i.placeholders}),i.showPayButton&&i.payButton({status:d,label:l.get("continue")}))}export{i as default};
+import{createElement as t}from"../../../external/preact/dist/preact.js";import e from"../../internal/SegmentedControl/SegmentedControl.js";import{useState as o,useMemo as a}from"../../../external/preact/hooks/dist/hooks.js";import n from"./PayIDInput.js";import s from"./BSBInput.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import i from"../../../_virtual/index.js";import{getUniqueId as p}from"../../../utils/idGenerator.js";function l(l){const{i18n:d}=r(),[u,m]=o("ready"),c=a(()=>p("payid-input"),[]),f=a(()=>p("bsb-input"),[]),b=a(()=>[{value:"payid-option",label:"PayID",id:"payid-option",controls:c},{value:"bsb-option",label:d.get("payto.bsb.option.label"),id:"bsb-option",controls:f}],[d,c,f]),y=b[0].value,[h,C]=o(y),g=({data:t,valid:e,errors:o,isValid:a})=>{l.onChange({data:{selectedInput:h,...t},valid:e,errors:o,isValid:a})};return t("div",{className:i({"adyen-checkout__payto-component":!0,"adyen-checkout__payto-component--loading":"loading"===u})},t(e,{selectedValue:h,options:b,onChange:C}),"payid-option"===h&&t(n,{id:c,status:u,setStatus:m,setComponentRef:l.setComponentRef,onChange:g,defaultData:l.data,placeholders:l.placeholders}),"bsb-option"===h&&t(s,{id:f,status:u,setStatus:m,setComponentRef:l.setComponentRef,onChange:g,defaultData:l.data,placeholders:l.placeholders}),l.showPayButton&&l.payButton({status:u,label:d.get("continue")}))}export{l as default};
 //# sourceMappingURL=PayToComponent.js.map

package/dist/es/components/PayTo/components/PayToComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PayToComponent.js","sources":["../../../../../src/components/PayTo/components/PayToComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport SegmentedControl from '../../internal/SegmentedControl';\nimport { useMemo, useState } from 'preact/hooks';\nimport { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';\nimport PayIDInput from './PayIDInput';\nimport BSBInput from './BSBInput';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport { PayToData, PayToPlaceholdersType } from '../types';\nimport { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport classNames from 'classnames';\nimport './PayToComponent.scss';\n\nexport type PayToInputOption = 'payid-option' \| 'bsb-option';\n\nexport type PayToComponentData = { selectedInput: PayToInputOption };\n\nexport interface PayToComponentProps {\n showPayButton: boolean;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n data: PayToData;\n placeholders: PayToPlaceholdersType;\n payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n}\n\nexport default function PayToComponent(props: PayToComponentProps) {\n const { i18n } = useCoreContext();\n\n const [status, setStatus] = useState<UIElementStatus>('ready');\n\n const inputOptions: SegmentedControlOptions<PayToInputOption> = useMemo(\n () => [\n {\n value: 'payid-option',\n label: 'PayID',\n id: 'payid-option',\n controls: ~~'payid-input'~~\n },\n {\n value: 'bsb-option',\n label: i18n.get('payto.bsb.option.label'),\n id: 'bsb-option',\n controls: ~~'bsb-input'~~\n }\n ],\n [i18n]\n );\n\n const defaultOption = inputOptions[0].value;\n const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);\n\n const onChange = ({ data, valid, errors, isValid }) => {\n // merge selected input to as data, this keep the input layers untouched\n props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid });\n };\n\n return (\n <div\n className={classNames({\n 'adyen-checkout__payto-component': true,\n 'adyen-checkout__payto-component--loading': status === 'loading'\n })}\n >\n <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />\n {selectedInput === 'payid-option' && (\n <PayIDInput\n status={status}\n setStatus={setStatus}\n setComponentRef={props.setComponentRef}\n onChange={onChange}\n defaultData={props.data}\n placeholders={props.placeholders}\n />\n )}\n {selectedInput === 'bsb-option' && (\n <BSBInput\n status={status}\n setStatus={setStatus}\n setComponentRef={props.setComponentRef}\n onChange={onChange}\n defaultData={props.data}\n placeholders={props.placeholders}\n />\n )}\n\n {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}\n </div>\n );\n}\n"],"names":["PayToComponent","props","i18n","useCoreContext","status","setStatus","useState","~~inputOptions~~","useMemo","value","label","id","controls","get","defaultOption","selectedInput","setSelectedInput","onChange","data","valid","errors","isValid","h","div","className","classNames","SegmentedControl","selectedValue","options","PayIDInput","setComponentRef","defaultData","placeholders","BSBInput","showPayButton","payButton"],"mappings":"~~6YA0Be~~,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,KAEVC,EAAQC,GAAaC,EAA0B,~~SAEhDC~~,~~EAA0DC~~,EAC5D,IAAM,CACF,~~CACIC~~,MAAO,eACPC,MAAO,QACPC,GAAI,eACJC,~~SAAU~~,~~eAEd~~,~~CACIH~~,MAAO,aACPC,~~MAAOR~~,~~EAAKW~~,IAAI,0BAChBF,GAAI,aACJC,~~SAAU~~,~~cAGlB~~,~~CAACV~~,~~IAGCY~~,~~EAAgBP~~,EAAa,~~GAAGE~~,OAC/BM,EAAeC,~~GAAoBV~~,~~EAA2BQ~~,GAE/DG,EAAW,EAAGC,OAAMC,QAAOC,SAAQC,~~cAErCpB~~,~~EAAMgB~~,SAAS,CAAEC,KAAM,CAAEH,cAAeA,KAAkBG,GAAQC,QAAOC,SAAQC,aAGrF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,CAClB,mCAAmC,EACnC,2CAAuD,~~YAAXrB~~,~~KAGhDkB~~,EAACI,EAAAA,CAAiBC,cAAeZ,EAAea,~~QAASrB~~,~~EAAcU~~,SAAUD,IAC9D,iBAAlBD,GACGO,EAACO,EAAAA,~~CACGzB~~,OAAQA,EACRC,UAAWA,~~EACXyB~~,~~gBAAiB7B~~,~~EAAM6B~~,gBACvBb,SAAUA,EACVc,~~YAAa9B~~,~~EAAMiB~~,KACnBc,~~aAAc/B~~,~~EAAM+B~~,eAGT,eAAlBjB,GACGO,EAACW,EAAAA,~~CACG7B~~,OAAQA,EACRC,UAAWA,~~EACXyB~~,~~gBAAiB7B~~,~~EAAM6B~~,gBACvBb,SAAUA,EACVc,~~YAAa9B~~,~~EAAMiB~~,KACnBc,~~aAAc/B~~,~~EAAM+B~~,~~eAI3B/B~~,~~EAAMiC~~,~~eAAiBjC~~,~~EAAMkC~~,UAAU,~~CAAE/B~~,~~SAAQM~~,~~MAAOR~~,~~EAAKW~~,IAAI,cAG9E"}
1	+ {"version":3,"file":"PayToComponent.js","sources":["../../../../../src/components/PayTo/components/PayToComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport SegmentedControl from '../../internal/SegmentedControl';\nimport { useMemo, useState } from 'preact/hooks';\nimport { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';\nimport PayIDInput from './PayIDInput';\nimport BSBInput from './BSBInput';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';\nimport { PayToData, PayToPlaceholdersType } from '../types';\nimport { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport classNames from 'classnames';\nimport { getUniqueId } from '../../../utils/idGenerator';\nimport './PayToComponent.scss';\n\nexport type PayToInputOption = 'payid-option' \| 'bsb-option';\n\nexport type PayToComponentData = { selectedInput: PayToInputOption };\n\nexport interface PayToComponentProps {\n showPayButton: boolean;\n onChange: (e) => void;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n data: PayToData;\n placeholders: PayToPlaceholdersType;\n payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n}\n\nexport default function PayToComponent(props: PayToComponentProps) {\n const { i18n } = useCoreContext();\n\n const [status, setStatus] = useState<UIElementStatus>('ready');\n\n // Generate unique IDs for the input sections\n const payidInputId = useMemo(() => getUniqueId('payid-input'), []);\n const bsbInputId = useMemo(() => getUniqueId('bsb-input'), []);\n\n const inputOptions: SegmentedControlOptions<PayToInputOption> = useMemo(\n () => [\n {\n value: 'payid-option',\n label: 'PayID',\n id: 'payid-option',\n controls: payidInputId\n },\n {\n value: 'bsb-option',\n label: i18n.get('payto.bsb.option.label'),\n id: 'bsb-option',\n controls: bsbInputId\n }\n ],\n [i18n, payidInputId, bsbInputId]\n );\n\n const defaultOption = inputOptions[0].value;\n const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);\n\n const onChange = ({ data, valid, errors, isValid }) => {\n // merge selected input to as data, this keep the input layers untouched\n props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid });\n };\n\n return (\n <div\n className={classNames({\n 'adyen-checkout__payto-component': true,\n 'adyen-checkout__payto-component--loading': status === 'loading'\n })}\n >\n <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />\n {selectedInput === 'payid-option' && (\n <PayIDInput\n id={payidInputId}\n status={status}\n setStatus={setStatus}\n setComponentRef={props.setComponentRef}\n onChange={onChange}\n defaultData={props.data}\n placeholders={props.placeholders}\n />\n )}\n {selectedInput === 'bsb-option' && (\n <BSBInput\n id={bsbInputId}\n status={status}\n setStatus={setStatus}\n setComponentRef={props.setComponentRef}\n onChange={onChange}\n defaultData={props.data}\n placeholders={props.placeholders}\n />\n )}\n\n {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}\n </div>\n );\n}\n"],"names":["PayToComponent","props","i18n","useCoreContext","status","setStatus","useState","payidInputId","useMemo","getUniqueId","bsbInputId","inputOptions","value","label","id","controls","get","defaultOption","selectedInput","setSelectedInput","onChange","data","valid","errors","isValid","h","div","className","classNames","SegmentedControl","selectedValue","options","PayIDInput","setComponentRef","defaultData","placeholders","BSBInput","showPayButton","payButton"],"mappings":"ycA2Be,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,KAEVC,EAAQC,GAAaC,EAA0B,SAGhDC,EAAeC,EAAQ,IAAMC,EAAY,eAAgB,IACzDC,EAAaF,EAAQ,IAAMC,EAAY,aAAc,IAErDE,EAA0DH,EAC5D,IAAM,CACF,CACII,MAAO,eACPC,MAAO,QACPC,GAAI,eACJC,SAAUR,GAEd,CACIK,MAAO,aACPC,MAAOX,EAAKc,IAAI,0BAChBF,GAAI,aACJC,SAAUL,IAGlB,CAACR,EAAMK,EAAcG,IAGnBO,EAAgBN,EAAa,GAAGC,OAC/BM,EAAeC,GAAoBb,EAA2BW,GAE/DG,EAAW,EAAGC,OAAMC,QAAOC,SAAQC,cAErCvB,EAAMmB,SAAS,CAAEC,KAAM,CAAEH,cAAeA,KAAkBG,GAAQC,QAAOC,SAAQC,aAGrF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,CAClB,mCAAmC,EACnC,2CAAuD,YAAXxB,KAGhDqB,EAACI,EAAAA,CAAiBC,cAAeZ,EAAea,QAASpB,EAAcS,SAAUD,IAC9D,iBAAlBD,GACGO,EAACO,EAAAA,CACGlB,GAAIP,EACJH,OAAQA,EACRC,UAAWA,EACX4B,gBAAiBhC,EAAMgC,gBACvBb,SAAUA,EACVc,YAAajC,EAAMoB,KACnBc,aAAclC,EAAMkC,eAGT,eAAlBjB,GACGO,EAACW,EAAAA,CACGtB,GAAIJ,EACJN,OAAQA,EACRC,UAAWA,EACX4B,gBAAiBhC,EAAMgC,gBACvBb,SAAUA,EACVc,YAAajC,EAAMoB,KACnBc,aAAclC,EAAMkC,eAI3BlC,EAAMoC,eAAiBpC,EAAMqC,UAAU,CAAElC,SAAQS,MAAOX,EAAKc,IAAI,cAG9E"}

package/dist/es/components/UPI/UPI.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import o from"./components/UPIComponent/UPIComponent.js";import{CoreProvider as n}from"../../core/Context/CoreProvider.js";import r from"../internal/Await/Await.js";import s from"../internal/QRLoader/QRLoader.js";import i from"../../core/Errors/SRPanelProvider.js";import{TxVariants as p}from"../tx-variants.js";import a from"../../utils/isMobile.js";import{getQrOption as d,getVpaOption as l,getIntentOption as u}from"./constants.js";function m(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class h extends e{formatProps(t){if(!a())return{...super.formatProps(t),defaultMode:["qrCode","vpa"].includes(t?.defaultMode)?t.defaultMode:"qrCode",apps:[],segmentedControlOptions:[d(t.i18n),l(t.i18n)]};const{i18n:e,apps:o=[]}=t;if(o.length>0){const n=["intent","vpa"].includes(t.defaultMode)?t.defaultMode:"intent";return{...super.formatProps(t),defaultMode:n,apps:o,segmentedControlOptions:[u(e),l(e)]}}return{...super.formatProps(t),defaultMode:"vpa",apps:[],segmentedControlOptions:[]}}get isValid(){return this.state.isValid}formatData(){const{virtualPaymentAddress:t,app:e}=this.state.data||{};return{paymentMethod:{type:this.paymentType,...this.paymentType===p.upi_collect&&t&&{virtualPaymentAddress:t},...this.paymentType===p.upi_intent&&e?.id&&{appId:e.id}}}}get paymentType(){return"qrCode"===this.selectedMode?p.upi_qr:"vpa"===this.selectedMode?p.upi_collect:p.upi_intent}renderContent(e,n,i){switch(e){case"qrCode":return t(s,{ref:t=>{this.componentRef=t},...this.props,qrCodeData:this.props.qrCodeData?encodeURIComponent(this.props.qrCodeData):null,type:p.upi_qr,brandLogo:this.props.brandLogo||this.icon,onComplete:this.onComplete,introduction:this.props.i18n.get("upi.qrCodeWaitingMessage"),countdownTime:5,onActionHandled:this.onActionHandled});case"await":return t(r,{ref:t=>{this.componentRef=t},url:n,type:i,showCountdownTimer:!0,shouldRedirectAutomatically:!0,showAmount:!0,countdownTime:5,clientKey:this.props.clientKey,paymentData:this.props.paymentData,onActionHandled:this.onActionHandled,onError:this.props.onError,messageText:this.props.i18n.get("upi.vpaWaitingMessage"),awaitText:this.props.i18n.get("await.waitForConfirmation"),onComplete:this.onComplete,brandLogo:this.icon,amount:this.props.amount});default:return t(o,{ref:t=>{this.componentRef=t},payButton:this.payButton,onChange:this.setState,onUpdateMode:this.onUpdateMode,apps:this.props.apps,segmentedControlOptions:this.props.segmentedControlOptions,defaultMode:this.props.defaultMode,showPayButton:this.props.showPayButton})}}render(){const{type:e,url:o,paymentMethodType:r}=this.props;return t(n,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(i,{srPanel:this.props.modules.srPanel},this.renderContent(e,o,r)))}constructor(t,e){super(t,e),m(this,"selectedMode",void 0),m(this,"onUpdateMode",t=>{this.selectedMode=t}),this.selectedMode=this.props.defaultMode}}m(h,"type",p.upi),m(h,"txVariants",[p.upi,p.upi_qr,p.upi_collect,p.upi_intent]);export{h as default};
+import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import o from"./components/UPIComponent/UPIComponent.js";import{CoreProvider as n}from"../../core/Context/CoreProvider.js";import s from"../internal/Await/Await.js";import r from"../internal/QRLoader/QRLoader.js";import i from"../../core/Errors/SRPanelProvider.js";import{TxVariants as p}from"../tx-variants.js";import a from"../../utils/isMobile.js";import{getQrOption as d,getVpaOption as u,getIntentOption as m}from"./constants.js";function l(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class h extends e{formatProps(t){if(!a())return{...super.formatProps(t),defaultMode:["qrCode","vpa"].includes(t?.defaultMode)?t.defaultMode:"qrCode",apps:[],segmentedControlOptions:[d(t.i18n),u(t.i18n)]};const{i18n:e,apps:o=[]}=t;if(o.length>0){const n=["intent","vpa"].includes(t.defaultMode)?t.defaultMode:"intent";return{...super.formatProps(t),defaultMode:n,apps:o,segmentedControlOptions:[m(e),u(e)]}}return{...super.formatProps(t),defaultMode:"vpa",apps:[],segmentedControlOptions:[]}}get isValid(){return this.state.isValid}formatData(){const{virtualPaymentAddress:t,app:e}=this.state.data||{};return{paymentMethod:{type:this.paymentType,...this.paymentType===p.upi_collect&&t&&{virtualPaymentAddress:t},...this.paymentType===p.upi_intent&&e?.id&&{appId:e.id}}}}get paymentType(){return"qrCode"===this.selectedMode?p.upi_qr:"vpa"===this.selectedMode?p.upi_collect:p.upi_intent}renderContent(e,n,i){const a=!!this.props.mandate;switch(e){case"qrCode":return t(r,{ref:t=>{this.componentRef=t},...this.props,qrCodeData:this.props.qrCodeData?encodeURIComponent(this.props.qrCodeData):null,type:p.upi_qr,brandLogo:this.props.brandLogo||this.icon,onComplete:this.onComplete,introduction:this.props.i18n.get("upi.qrCodeWaitingMessage"),countdownTime:this.props.countdownTime??5,onActionHandled:this.onActionHandled,showAmount:!a});case"await":return t(s,{ref:t=>{this.componentRef=t},url:n,type:i,showCountdownTimer:!0,shouldRedirectAutomatically:!0,showAmount:!a,countdownTime:this.props.countdownTime??5,clientKey:this.props.clientKey,paymentData:this.props.paymentData,onActionHandled:this.onActionHandled,onError:this.props.onError,messageText:this.props.i18n.get("upi.vpaWaitingMessage"),awaitText:this.props.i18n.get("await.waitForConfirmation"),onComplete:this.onComplete,brandLogo:this.icon,amount:this.props.amount});default:return t(o,{ref:t=>{this.componentRef=t},payButton:this.payButton,onChange:this.setState,onUpdateMode:this.onUpdateMode,apps:this.props.apps,segmentedControlOptions:this.props.segmentedControlOptions,defaultMode:this.props.defaultMode,showPayButton:this.props.showPayButton,amount:this.props.amount,mandate:this.props.mandate})}}render(){const{type:e,url:o,paymentMethodType:s}=this.props;return t(n,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(i,{srPanel:this.props.modules.srPanel},this.renderContent(e,o,s)))}constructor(t,e){super(t,e),l(this,"selectedMode",void 0),l(this,"onUpdateMode",t=>{this.selectedMode=t}),this.selectedMode=this.props.defaultMode}}l(h,"type",p.upi),l(h,"txVariants",[p.upi,p.upi_qr,p.upi_collect,p.upi_intent]);export{h as default};
 //# sourceMappingURL=UPI.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UPI.js","sources":["../../../../src/components/UPI/UPI.tsx"],"sourcesContent":["import { h, RefObject } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport UPIComponent from './components/UPIComponent';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport Await from '../internal/Await';\nimport QRLoader from '../internal/QRLoader';\nimport { UPIConfiguration, UpiMode, UpiPaymentData, UpiType } from './types';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\nimport { TxVariants } from '../tx-variants';\nimport isMobile from '../../utils/isMobile';\nimport type { ICore } from '../../core/types';\nimport { getIntentOption, getQrOption, getVpaOption } from './constants';\n\n/*\n For mobile:\n * We should show upi_collect and upi_intent depending on if `apps` are returned in /paymentMethods response.\n * If there is no apps, hide segmented controls.\n * The upi_collect should always be on the second tab.\n * Never show QR code.\n \n For non-mobile:\n * We should never show the upi_intent (ignore `apps` in /paymentMethods response)\n * The upi_qr should be on the first tab and the upi_collect should be on second tab\n */\n\nclass UPI extends UIElement<UPIConfiguration> {\n public static type = TxVariants.upi;\n public static txVariants = [TxVariants.upi, TxVariants.upi_qr, TxVariants.upi_collect, TxVariants.upi_intent];\n\n private selectedMode: UpiMode;\n\n constructor(checkout: ICore, props: UPIConfiguration) {\n super(checkout, props);\n this.selectedMode = this.props.defaultMode;\n }\n\n formatProps(props: UPIConfiguration): UPIConfiguration {\n if (!isMobile()) {\n return {\n ...super.formatProps(props),\n defaultMode: ['qrCode', 'vpa'].includes(props?.defaultMode) ? props.defaultMode : 'qrCode',\n apps: [], // For desktop, ignore the apps\n segmentedControlOptions: [getQrOption(props.i18n), getVpaOption(props.i18n)]\n };\n }\n\n const { i18n, apps = [] } = props;\n const hasIntentApps = apps.length > 0;\n if (hasIntentApps) {\n // Mobile with UPI apps\n const allowedModes: UpiMode[] = ['intent', 'vpa'];\n const defaultMode = allowedModes.includes(props.defaultMode) ? props.defaultMode : 'intent';\n return {\n ...super.formatProps(props),\n defaultMode,\n apps,\n segmentedControlOptions: [getIntentOption(i18n), getVpaOption(i18n)]\n };\n }\n\n // Mobile, but no UPI apps\n return {\n ...super.formatProps(props),\n defaultMode: 'vpa', // Only VPA is possible\n apps: [],\n segmentedControlOptions: []\n };\n }\n\n public get isValid(): boolean {\n return this.state.isValid;\n }\n\n public formatData(): UpiPaymentData {\n const { virtualPaymentAddress, app } = this.state.data \|\| {};\n\n return {\n paymentMethod: {\n type: this.paymentType,\n ...(this.paymentType === TxVariants.upi_collect && virtualPaymentAddress && { virtualPaymentAddress }),\n ...(this.paymentType === TxVariants.upi_intent && app?.id && { appId: app.id })\n }\n };\n }\n\n get paymentType(): UpiType {\n if (this.selectedMode === 'qrCode') {\n return TxVariants.upi_qr;\n }\n if (this.selectedMode === 'vpa') {\n return TxVariants.upi_collect;\n }\n return TxVariants.upi_intent;\n }\n\n private onUpdateMode = (mode: UpiMode): void => {\n this.selectedMode = mode;\n };\n\n private renderContent(type: string, url: string, paymentMethodType: string): h.JSX.Element {\n switch (type) {\n case 'qrCode':\n return (\n <QRLoader\n ref={ref => {\n this.componentRef = ref;\n }}\n {...this.props}\n qrCodeData={this.props.qrCodeData ? encodeURIComponent(this.props.qrCodeData) : null}\n type={TxVariants.upi_qr}\n brandLogo={this.props.brandLogo \|\| this.icon}\n onComplete={this.onComplete}\n introduction={this.props.i18n.get('upi.qrCodeWaitingMessage')}\n countdownTime={5}\n onActionHandled={this.onActionHandled}\n />\n );\n case 'await':\n return (\n <Await\n ref={ref => {\n this.componentRef = ref;\n }}\n url={url}\n type={paymentMethodType}\n showCountdownTimer\n shouldRedirectAutomatically\n showAmount\n countdownTime={5}\n clientKey={this.props.clientKey}\n paymentData={this.props.paymentData}\n onActionHandled={this.onActionHandled}\n onError={this.props.onError}\n messageText={this.props.i18n.get('upi.vpaWaitingMessage')}\n awaitText={this.props.i18n.get('await.waitForConfirmation')}\n onComplete={this.onComplete}\n brandLogo={this.icon}\n amount={this.props.amount}\n />\n );\n default:\n return (\n <UPIComponent\n ref={(ref: RefObject<typeof UPIComponent>) => {\n this.componentRef = ref;\n }}\n payButton={this.payButton}\n onChange={this.setState}\n onUpdateMode={this.onUpdateMode}\n apps={this.props.apps}\n segmentedControlOptions={this.props.segmentedControlOptions}\n defaultMode={this.props.defaultMode}\n showPayButton={this.props.showPayButton}\n />\n );\n }\n }\n\n public render(): h.JSX.Element {\n const { type, url, paymentMethodType } = this.props;\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n <SRPanelProvider srPanel={this.props.modules.srPanel}>{this.renderContent(type, url, paymentMethodType)}</SRPanelProvider>\n </CoreProvider>\n );\n }\n}\n\nexport default UPI;\n"],"names":["UPI","UIElement","formatProps","props","isMobile","super","defaultMode","includes","apps","segmentedControlOptions","getQrOption","i18n","getVpaOption","length","getIntentOption","isValid","this","state","formatData","virtualPaymentAddress","app","data","paymentMethod","type","paymentType","TxVariants","upi_collect","upi_intent","id","appId","selectedMode","upi_qr","renderContent","url","paymentMethodType","h","QRLoader","ref","componentRef","qrCodeData","encodeURIComponent","brandLogo","icon","onComplete","introduction","get","countdownTime","onActionHandled","Await","showCountdownTimer","shouldRedirectAutomatically","showAmount","clientKey","paymentData","onError","messageText","awaitText","amount","UPIComponent","payButton","onChange","setState","onUpdateMode","showPayButton","render","CoreProvider","loadingContext","resources","SRPanelProvider","srPanel","modules","constructor","checkout","_define_property","mode","upi","txVariants"],"mappings":"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"}
1	+ {"version":3,"file":"UPI.js","sources":["../../../../src/components/UPI/UPI.tsx"],"sourcesContent":["import { h, RefObject } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport UPIComponent from './components/UPIComponent';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport Await from '../internal/Await';\nimport QRLoader from '../internal/QRLoader';\nimport { UPIConfiguration, UpiMode, UpiPaymentData, UpiType } from './types';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\nimport { TxVariants } from '../tx-variants';\nimport isMobile from '../../utils/isMobile';\nimport type { ICore } from '../../core/types';\nimport { getIntentOption, getQrOption, getVpaOption } from './constants';\n\n/*\n For mobile:\n * We should show upi_collect and upi_intent depending on if `apps` are returned in /paymentMethods response.\n * If there is no apps, hide segmented controls.\n * The upi_collect should always be on the second tab.\n * Never show QR code.\n \n For non-mobile:\n * We should never show the upi_intent (ignore `apps` in /paymentMethods response)\n * The upi_qr should be on the first tab and the upi_collect should be on second tab\n */\n\nclass UPI extends UIElement<UPIConfiguration> {\n public static type = TxVariants.upi;\n public static txVariants = [TxVariants.upi, TxVariants.upi_qr, TxVariants.upi_collect, TxVariants.upi_intent];\n\n private selectedMode: UpiMode;\n\n constructor(checkout: ICore, props: UPIConfiguration) {\n super(checkout, props);\n this.selectedMode = this.props.defaultMode;\n }\n\n formatProps(props: UPIConfiguration): UPIConfiguration {\n if (!isMobile()) {\n return {\n ...super.formatProps(props),\n defaultMode: ['qrCode', 'vpa'].includes(props?.defaultMode) ? props.defaultMode : 'qrCode',\n apps: [], // For desktop, ignore the apps\n segmentedControlOptions: [getQrOption(props.i18n), getVpaOption(props.i18n)]\n };\n }\n\n const { i18n, apps = [] } = props;\n const hasIntentApps = apps.length > 0;\n if (hasIntentApps) {\n // Mobile with UPI apps\n const allowedModes: UpiMode[] = ['intent', 'vpa'];\n const defaultMode = allowedModes.includes(props.defaultMode) ? props.defaultMode : 'intent';\n return {\n ...super.formatProps(props),\n defaultMode,\n apps,\n segmentedControlOptions: [getIntentOption(i18n), getVpaOption(i18n)]\n };\n }\n\n // Mobile, but no UPI apps\n return {\n ...super.formatProps(props),\n defaultMode: 'vpa', // Only VPA is possible\n apps: [],\n segmentedControlOptions: []\n };\n }\n\n public get isValid(): boolean {\n return this.state.isValid;\n }\n\n public formatData(): UpiPaymentData {\n const { virtualPaymentAddress, app } = this.state.data \|\| {};\n\n return {\n paymentMethod: {\n type: this.paymentType,\n ...(this.paymentType === TxVariants.upi_collect && virtualPaymentAddress && { virtualPaymentAddress }),\n ...(this.paymentType === TxVariants.upi_intent && app?.id && { appId: app.id })\n }\n };\n }\n\n get paymentType(): UpiType {\n if (this.selectedMode === 'qrCode') {\n return TxVariants.upi_qr;\n }\n if (this.selectedMode === 'vpa') {\n return TxVariants.upi_collect;\n }\n return TxVariants.upi_intent;\n }\n\n private onUpdateMode = (mode: UpiMode): void => {\n this.selectedMode = mode;\n };\n\n private renderContent(type: string, url: string, paymentMethodType: string): h.JSX.Element {\n const isAutoPay = !!this.props.mandate;\n\n switch (type) {\n case 'qrCode':\n return (\n <QRLoader\n ref={ref => {\n this.componentRef = ref;\n }}\n {...this.props}\n qrCodeData={this.props.qrCodeData ? encodeURIComponent(this.props.qrCodeData) : null}\n type={TxVariants.upi_qr}\n brandLogo={this.props.brandLogo \|\| this.icon}\n onComplete={this.onComplete}\n introduction={this.props.i18n.get('upi.qrCodeWaitingMessage')}\n countdownTime={this.props.countdownTime ?? 5}\n onActionHandled={this.onActionHandled}\n showAmount={!isAutoPay}\n />\n );\n case 'await':\n return (\n <Await\n ref={ref => {\n this.componentRef = ref;\n }}\n url={url}\n type={paymentMethodType}\n showCountdownTimer\n shouldRedirectAutomatically\n showAmount={!isAutoPay}\n countdownTime={this.props.countdownTime ?? 5}\n clientKey={this.props.clientKey}\n paymentData={this.props.paymentData}\n onActionHandled={this.onActionHandled}\n onError={this.props.onError}\n messageText={this.props.i18n.get('upi.vpaWaitingMessage')}\n awaitText={this.props.i18n.get('await.waitForConfirmation')}\n onComplete={this.onComplete}\n brandLogo={this.icon}\n amount={this.props.amount}\n />\n );\n default:\n return (\n <UPIComponent\n ref={(ref: RefObject<typeof UPIComponent>) => {\n this.componentRef = ref;\n }}\n payButton={this.payButton}\n onChange={this.setState}\n onUpdateMode={this.onUpdateMode}\n apps={this.props.apps}\n segmentedControlOptions={this.props.segmentedControlOptions}\n defaultMode={this.props.defaultMode}\n showPayButton={this.props.showPayButton}\n amount={this.props.amount}\n mandate={this.props.mandate}\n />\n );\n }\n }\n\n public render(): h.JSX.Element {\n const { type, url, paymentMethodType } = this.props;\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n <SRPanelProvider srPanel={this.props.modules.srPanel}>{this.renderContent(type, url, paymentMethodType)}</SRPanelProvider>\n </CoreProvider>\n );\n }\n}\n\nexport default UPI;\n"],"names":["UPI","UIElement","formatProps","props","isMobile","super","defaultMode","includes","apps","segmentedControlOptions","getQrOption","i18n","getVpaOption","length","getIntentOption","isValid","this","state","formatData","virtualPaymentAddress","app","data","paymentMethod","type","paymentType","TxVariants","upi_collect","upi_intent","id","appId","selectedMode","upi_qr","renderContent","url","paymentMethodType","isAutoPay","mandate","h","QRLoader","ref","componentRef","qrCodeData","encodeURIComponent","brandLogo","icon","onComplete","introduction","get","countdownTime","onActionHandled","showAmount","Await","showCountdownTimer","shouldRedirectAutomatically","clientKey","paymentData","onError","messageText","awaitText","amount","UPIComponent","payButton","onChange","setState","onUpdateMode","showPayButton","render","CoreProvider","loadingContext","resources","SRPanelProvider","srPanel","modules","constructor","checkout","_define_property","mode","upi","txVariants"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as a,useCallback as o,useEffect as n}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../VpaInput/VpaInput.js";import r from"../../../../core/Context/useImage.js";import{A11Y as s}from"../../constants.js";import l from"../../../internal/SegmentedControl/SegmentedControl.js";import d from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";import c from"../../../internal/Alert/Alert.js";function u({defaultMode:u,onChange:m,onUpdateMode:g=()=>{},payButton:I,showPayButton:b,apps:h=[],segmentedControlOptions:f=[]}){const{i18n:y}=p(),C=r(),[A,N]=a("ready"),[k,j]=a(u),[v,S]=a(null),[V,q]=a(null),[x,P]=a("qrCode"===u);this.setStatus=e=>{N(e)},this.showValidation=()=>{v?.validateInput(),"intent"===k&&M()};const B=o(e=>{S(e)},[]),E=o(e=>{j(e),g(e)},[g]),T=o(e=>{e?.id!==V?.id&&(q(e),P(!0),N("ready"))},[V]),M=o(()=>{V?(N("ready"),P(!0)):(N("error"),P(!1))},[V]);return n(()=>{m("qrCode"!==k?{data:{...V&&{app:V}},isValid:x}:{data:{},valid:{},errors:{},isValid:!0})},[V,x,k,m]),e(t,null,f.length>0&&e("p",{className:"adyen-checkout_upi-mode-selection-text"},y.get("upi.modeSelection")),e(l,{onChange:E,selectedValue:k,disabled:"loading"===A,classNameModifiers:["upi-margin-bottom"],options:f}),"intent"===k&&e("div",{id:s.AreaId.INTENT,"aria-labelledby":s.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},y.get("upi.intent.instruction")),"error"===A&&e(c,{icon:"cross"},y.get("upi.error.noAppSelected")),e(d,{disabled:"loading"===A,apps:h,selectedAppId:V?.id,onAppSelect:T}),b&&I({label:y.get("continue"),status:A})),"vpa"===k&&e("div",{id:s.AreaId.VPA,"aria-labelledby":s.ButtonId.VPA,className:"adyen-checkout-upi-area-vpa",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},y.get("upi.collect.instruction")),e(i,{disabled:"loading"===A,onChange:m,onSetInputHandlers:B}),b&&I({label:y.get("continue"),status:A})),"qrCode"===k&&e("div",{id:s.AreaId.QR,"aria-labelledby":s.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},y.get("upi.qrCode.instruction")),b&&I({label:y.get("generateQRCode"),icon:C({imageFolder:"components/"})("qr"),status:A})))}export{u as default};
+import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as a,useCallback as o,useEffect as n}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../VpaInput/VpaInput.js";import r from"../../../../core/Context/useImage.js";import{A11Y as s}from"../../constants.js";import l from"../../../internal/SegmentedControl/SegmentedControl.js";import d from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";import c from"../../../internal/Alert/Alert.js";import u from"../UPIMandate/UPIMandate.js";function m({defaultMode:m,onChange:g,payButton:I,showPayButton:b,mandate:h,amount:f,onUpdateMode:y=()=>{},apps:C=[],segmentedControlOptions:A=[]}){const{i18n:N}=p(),j=r(),[k,v]=a("ready"),[P,S]=a(m),[V,q]=a(null),[x,B]=a(null),[M,U]=a("qrCode"===m),E=h&&e(u,{mandate:h,amount:f});this.setStatus=e=>{v(e)},this.showValidation=()=>{V?.validateInput(),"intent"===P&&w()};const T=o(e=>{q(e)},[]),Q=o(e=>{S(e),y(e)},[y]),R=o(e=>{e?.id!==x?.id&&(B(e),U(!0),v("ready"))},[x]),w=o(()=>{x?(v("ready"),U(!0)):(v("error"),U(!1))},[x]);return n(()=>{g("qrCode"!==P?{data:{...x&&{app:x}},isValid:M}:{data:{},valid:{},errors:{},isValid:!0})},[x,M,P,g]),e(t,null,A.length>0&&e("p",{className:"adyen-checkout_upi-mode-selection-text"},N.get("upi.modeSelection")),e(l,{onChange:Q,selectedValue:P,disabled:"loading"===k,classNameModifiers:["upi-margin-bottom"],options:A}),"intent"===P&&e("div",{id:s.AreaId.INTENT,"aria-labelledby":s.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},N.get("upi.intent.instruction")),"error"===k&&e(c,{icon:"cross"},N.get("upi.error.noAppSelected")),e(d,{disabled:"loading"===k,apps:C,selectedAppId:x?.id,onAppSelect:R}),E,b&&I({label:N.get("continue"),status:k})),"vpa"===P&&e("div",{id:s.AreaId.VPA,"aria-labelledby":s.ButtonId.VPA,className:"adyen-checkout-upi-area-vpa",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},N.get("upi.collect.instruction")),e(i,{disabled:"loading"===k,onChange:g,onSetInputHandlers:T}),E,b&&I({label:N.get("continue"),status:k})),"qrCode"===P&&e("div",{id:s.AreaId.QR,"aria-labelledby":s.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code",role:"region"},e("span",{className:"adyen-checkout-upi-instruction-label"},N.get("upi.qrCode.instruction")),E,b&&I({label:N.get("generateQRCode"),icon:j({imageFolder:"components/"})("qr"),status:k})))}export{m as default};
 //# sourceMappingURL=UPIComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h, RefObject } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport { PayButtonFunctionProps, UIElementStatus } from '../../../types';\nimport VpaInput, { VpaInputHandlers } from '../VpaInput/VpaInput';\nimport { App, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y } from '../../constants';\nimport './UPIComponent.scss';\nimport SegmentedControl from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport { SegmentedControlOption } from '../../../internal/SegmentedControl/SegmentedControl';\n\ntype UpiData = { app?: App; virtualPaymentAddress?: string };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: any }; isValid: boolean };\n\ninterface UPIComponentProps {\n defaultMode: UpiMode;\n showPayButton: boolean;\n apps?: Array<App>;\n segmentedControlOptions?: Array<SegmentedControlOption<UpiMode>>;\n\n ref?(ref: RefObject<typeof UPIComponent>): void;\n\n payButton?(props: PayButtonFunctionProps): h.JSX.Element;\n\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n\n onUpdateMode?(mode: UpiMode): void;\n}\n\nexport default function UPIComponent({\n defaultMode,\n onChange,\n onUpdateMode = () => {},\n ~~payButton,\n showPayButton,\n~~ apps = [],\n segmentedControlOptions = []\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n const [status, setStatus] = useState<UIElementStatus>('ready');\n const [mode, setMode] = useState<UpiMode>(defaultMode);\n const [vpaInputHandlers, setVpaInputHandlers] = useState<VpaInputHandlers>(null);\n const [selectedApp, setSelectedApp] = useState<App>(null);\n const [isValid, setIsValid] = useState<boolean>(defaultMode === 'qrCode');\n\n this.setStatus = (status: UIElementStatus) => {\n setStatus(status);\n };\n\n this.showValidation = () => {\n vpaInputHandlers?.validateInput();\n if (mode === 'intent') {\n validateIntentApp();\n }\n };\n\n const onSetVpaInputHandlers = useCallback((handlers: VpaInputHandlers) => {\n setVpaInputHandlers(handlers);\n }, []);\n\n const onChangeUpiMode = useCallback(\n (newMode: UpiMode) => {\n setMode(newMode);\n onUpdateMode(newMode);\n },\n [onUpdateMode]\n );\n\n const handleAppSelect = useCallback(\n (app: App) => {\n if (app?.id === selectedApp?.id) return;\n\n setSelectedApp(app);\n setIsValid(true);\n setStatus('ready');\n },\n [selectedApp]\n );\n\n const validateIntentApp = useCallback(() => {\n if (!selectedApp) {\n setStatus('error');\n setIsValid(false);\n } else {\n setStatus('ready');\n setIsValid(true);\n }\n }, [selectedApp]);\n\n useEffect(() => {\n if (mode !== 'qrCode') {\n onChange({\n data: { ...(selectedApp && { app: selectedApp }) },\n isValid\n });\n } else {\n /*\n When selecting QR code mode, we need to clear the state data and trigger the 'onChange'.\n */\n onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n }\n }, [selectedApp, isValid, mode, onChange]);\n\n return (\n <Fragment>\n {segmentedControlOptions.length > 0 && <p className=\"adyen-checkout_upi-mode-selection-text\">{i18n.get('upi.modeSelection')}</p>}\n <SegmentedControl\n onChange={onChangeUpiMode}\n selectedValue={mode}\n disabled={status === 'loading'}\n classNameModifiers={['upi-margin-bottom']}\n options={segmentedControlOptions}\n />\n\n {mode === 'intent' && (\n <div id={A11Y.AreaId.INTENT} aria-labelledby={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n {status === 'error' && <Alert icon={'cross'}>{i18n.get('upi.error.noAppSelected')}</Alert>}\n <UPIIntentAppList disabled={status === 'loading'} apps={apps} selectedAppId={selectedApp?.id} onAppSelect={handleAppSelect} />\n\n {showPayButton &&\n payButton({\n label: i18n.get('continue'),\n status\n })}\n </div>\n )}\n {mode === 'vpa' && (\n <div id={A11Y.AreaId.VPA} aria-labelledby={A11Y.ButtonId.VPA} className=\"adyen-checkout-upi-area-vpa\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.collect.instruction')}</span>\n <VpaInput disabled={status === 'loading'} onChange={onChange} onSetInputHandlers={onSetVpaInputHandlers} />\n\n {showPayButton &&\n payButton({\n label: i18n.get('continue'),\n status\n })}\n </div>\n )}\n {mode === 'qrCode' && (\n <div id={A11Y.AreaId.QR} aria-labelledby={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.qrCode.instruction')}</span>\n {showPayButton &&\n payButton({\n label: i18n.get('generateQRCode'),\n icon: getImage({ imageFolder: 'components/' })('qr'),\n status\n })}\n </div>\n )}\n </Fragment>\n );\n}\n"],"names":["UPIComponent","defaultMode","onChange","~~onUpdateMode~~","~~payButton~~","~~showPayButton~~","apps","segmentedControlOptions","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","mode","setMode","vpaInputHandlers","setVpaInputHandlers","selectedApp","setSelectedApp","isValid","setIsValid","this","showValidation","validateInput","validateIntentApp","onSetVpaInputHandlers","useCallback","handlers","onChangeUpiMode","newMode","handleAppSelect","app","id","useEffect","data","valid","errors","~~h","~~Fragment","length","p","className","get","SegmentedControl","selectedValue","disabled","classNameModifiers","options","div","A11Y","AreaId","INTENT","aria-labelledby","ButtonId","role","span","Alert","icon","UPIIntentAppList","selectedAppId","onAppSelect","label","VPA","VpaInput","onSetInputHandlers","QR","imageFolder"],"mappings":"~~gkBAiCe~~,SAASA,GAAaC,YACjCA,EAAWC,SACXA,EAAQC,~~aACRA~~,~~EAAe,OAAQC,UACvBA,~~EAASC,cACTA,EAAaC,~~KACbA~~,EAAO,GAAEC,wBACTA,EAA0B,KAE1B,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACVC,EAAQC,GAAaC,EAA0B,UAC/CC,EAAMC,GAAWF,~~EAAkBb~~,~~IACnCgB~~,EAAkBC,GAAuBJ,EAA2B,OACpEK,EAAaC,GAAkBN,EAAc,OAC7CO,EAASC,GAAcR,EAAkC,~~WAAhBb~~,~~GAEhDsB~~,~~KAAKV~~,UAAaD,IACdC,EAAUD,~~IAGdW~~,KAAKC,eAAiB,~~KAClBP~~,~~GAAkBQ~~,gBACL,~~WAATV~~,~~GACAW~~,KAIR,MAAMC,EAAwBC,EAAaC,~~IACvCX~~,~~EAAoBW~~,IACrB,IAEGC,EAAkBF,EACnBG,~~IACGf~~,~~EAAQe~~,~~GACR5B~~,~~EAAa4B~~,IAEjB,~~CAAC5B~~,~~IAGC6B~~,EAAkBJ,EACnBK,IACOA,GAAKC,~~KAAOf~~,~~GAAae~~,~~KAE7Bd~~,~~EAAea~~,~~GACfX~~,GAAW,GACXT,EAAU,WAEd,CAACM,~~IAGCO~~,EAAoBE,EAAY,~~KAC7BT~~,GAIDN,EAAU,SACVS,GAAW,KAJXT,EAAU,SACVS,GAAW,KAKhB,CAACH,IAgBJ,~~OAdAgB~~,EAAU,~~KAEFjC~~,EADS,~~WAATa~~,EACS,~~CACLqB~~,KAAM,~~IAAMjB~~,GAAe,~~CAAEc~~,~~IAAKd~~,IAClCE,WAMK,~~CAAEe~~,KAAM,CAAA,EAAIC,MAAO,CAAA,EAAIC,OAAQ,CAAA,~~EAAIjB~~,SAAS,KAE1D,CAACF,EAAaE,EAASN,~~EAAMb~~,~~IAG5BqC~~,~~EAACC~~,EAAAA,~~KACIjC~~,~~EAAwBkC~~,OAAS,~~GAAKF~~,~~EAACG~~,IAAAA,CAAEC,UAAU,~~0CAA0CnC~~,~~EAAKoC~~,IAAI,~~sBACvGL~~,~~EAACM~~,EAAAA,~~CACG3C~~,~~SAAU4B~~,~~EACVgB~~,~~cAAe/B~~,~~EACfgC~~,SAAqB,~~YAAXnC~~,~~EACVoC~~,mBAAoB,CAAC,qBACrBC,~~QAAS1C~~,IAGH,WAATQ,~~GACGwB~~,~~EAACW~~,MAAAA,~~CAAIhB~~,~~GAAIiB~~,EAAKC,OAAOC,OAAQC,kBAAiBH,EAAKI,SAASF,OAAQV,UAAU,iCAAiCa,KAAK,~~UAChHjB~~,~~EAACkB~~,OAAAA,CAAKd,UAAU,~~wCAAwCnC~~,~~EAAKoC~~,IAAI,2BACrD,~~UAAXhC~~,~~GAAsB2B~~,~~EAACmB~~,EAAAA,CAAMC,KAAM,~~SAAUnD~~,~~EAAKoC~~,IAAI,~~4BACvDL~~,~~EAACqB~~,EAAAA,CAAiBb,SAAqB,~~YAAXnC~~,EAAsBN,KAAMA,~~EAAMuD~~,~~cAAe1C~~,~~GAAae~~,~~GAAI4B~~,~~YAAa9B~~,~~IAE1G3B~~,GACGD,EAAU,~~CACN2D~~,~~MAAOvD~~,~~EAAKoC~~,IAAI,~~YAChBhC~~,YAIN,QAATG,~~GACGwB~~,~~EAACW~~,MAAAA,~~CAAIhB~~,~~GAAIiB~~,EAAKC,OAAOY,IAAKV,kBAAiBH,EAAKI,SAASS,IAAKrB,UAAU,8BAA8Ba,KAAK,~~UACvGjB~~,~~EAACkB~~,OAAAA,CAAKd,UAAU,~~wCAAwCnC~~,~~EAAKoC~~,IAAI,~~4BACjEL~~,~~EAAC0B~~,EAAAA,CAASlB,SAAqB,~~YAAXnC~~,~~EAAsBV~~,SAAUA,~~EAAUgE~~,~~mBAAoBvC~~,~~IAEjFtB~~,GACGD,EAAU,~~CACN2D~~,~~MAAOvD~~,~~EAAKoC~~,IAAI,~~YAChBhC~~,YAIN,WAATG,~~GACGwB~~,~~EAACW~~,MAAAA,~~CAAIhB~~,~~GAAIiB~~,EAAKC,OAAOe,GAAIb,kBAAiBH,EAAKI,SAASY,GAAIxB,UAAU,kCAAkCa,KAAK,~~UACzGjB~~,~~EAACkB~~,OAAAA,CAAKd,UAAU,~~wCAAwCnC~~,~~EAAKoC~~,IAAI,~~2BAChEvC~~,GACGD,EAAU,~~CACN2D~~,~~MAAOvD~~,~~EAAKoC~~,IAAI,kBAChBe,~~KAAMjD~~,EAAS,~~CAAE0D~~,YAAa,~~eAAxB1D~~,CAAyC,MAC/CE,YAM5B"}
1	+ {"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h, RefObject } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport { PayButtonFunctionProps, UIElementStatus } from '../../../types';\nimport VpaInput, { VpaInputHandlers } from '../VpaInput/VpaInput';\nimport { App, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y } from '../../constants';\nimport './UPIComponent.scss';\nimport SegmentedControl from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport { SegmentedControlOption } from '../../../internal/SegmentedControl/SegmentedControl';\nimport UPIMandate, { Mandate } from '../UPIMandate/UPIMandate';\nimport type { PaymentAmount } from '../../../../types/global-types';\n\ntype UpiData = { app?: App; virtualPaymentAddress?: string };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: any }; isValid: boolean };\n\ninterface UPIComponentProps {\n defaultMode: UpiMode;\n showPayButton: boolean;\n apps?: Array<App>;\n segmentedControlOptions?: Array<SegmentedControlOption<UpiMode>>;\n mandate?: Mandate;\n amount?: PaymentAmount;\n\n ref?(ref: RefObject<typeof UPIComponent>): void;\n\n payButton?(props: PayButtonFunctionProps): h.JSX.Element;\n\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n\n onUpdateMode?(mode: UpiMode): void;\n}\n\nexport default function UPIComponent({\n defaultMode,\n onChange,\n payButton,\n showPayButton,\n mandate,\n amount,\n onUpdateMode = () => {},\n apps = [],\n segmentedControlOptions = []\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n const [status, setStatus] = useState<UIElementStatus>('ready');\n const [mode, setMode] = useState<UpiMode>(defaultMode);\n const [vpaInputHandlers, setVpaInputHandlers] = useState<VpaInputHandlers>(null);\n const [selectedApp, setSelectedApp] = useState<App>(null);\n const [isValid, setIsValid] = useState<boolean>(defaultMode === 'qrCode');\n const mandateComponent = mandate && <UPIMandate mandate={mandate} amount={amount} />;\n\n this.setStatus = (status: UIElementStatus) => {\n setStatus(status);\n };\n\n this.showValidation = () => {\n vpaInputHandlers?.validateInput();\n if (mode === 'intent') {\n validateIntentApp();\n }\n };\n\n const onSetVpaInputHandlers = useCallback((handlers: VpaInputHandlers) => {\n setVpaInputHandlers(handlers);\n }, []);\n\n const onChangeUpiMode = useCallback(\n (newMode: UpiMode) => {\n setMode(newMode);\n onUpdateMode(newMode);\n },\n [onUpdateMode]\n );\n\n const handleAppSelect = useCallback(\n (app: App) => {\n if (app?.id === selectedApp?.id) return;\n\n setSelectedApp(app);\n setIsValid(true);\n setStatus('ready');\n },\n [selectedApp]\n );\n\n const validateIntentApp = useCallback(() => {\n if (!selectedApp) {\n setStatus('error');\n setIsValid(false);\n } else {\n setStatus('ready');\n setIsValid(true);\n }\n }, [selectedApp]);\n\n useEffect(() => {\n if (mode !== 'qrCode') {\n onChange({\n data: { ...(selectedApp && { app: selectedApp }) },\n isValid\n });\n } else {\n /*\n When selecting QR code mode, we need to clear the state data and trigger the 'onChange'.\n */\n onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n }\n }, [selectedApp, isValid, mode, onChange]);\n\n return (\n <Fragment>\n {segmentedControlOptions.length > 0 && <p className=\"adyen-checkout_upi-mode-selection-text\">{i18n.get('upi.modeSelection')}</p>}\n <SegmentedControl\n onChange={onChangeUpiMode}\n selectedValue={mode}\n disabled={status === 'loading'}\n classNameModifiers={['upi-margin-bottom']}\n options={segmentedControlOptions}\n />\n\n {mode === 'intent' && (\n <div id={A11Y.AreaId.INTENT} aria-labelledby={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n {status === 'error' && <Alert icon={'cross'}>{i18n.get('upi.error.noAppSelected')}</Alert>}\n <UPIIntentAppList disabled={status === 'loading'} apps={apps} selectedAppId={selectedApp?.id} onAppSelect={handleAppSelect} />\n {mandateComponent}\n {showPayButton &&\n payButton({\n label: i18n.get('continue'),\n status\n })}\n </div>\n )}\n {mode === 'vpa' && (\n <div id={A11Y.AreaId.VPA} aria-labelledby={A11Y.ButtonId.VPA} className=\"adyen-checkout-upi-area-vpa\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.collect.instruction')}</span>\n <VpaInput disabled={status === 'loading'} onChange={onChange} onSetInputHandlers={onSetVpaInputHandlers} />\n {mandateComponent}\n {showPayButton &&\n payButton({\n label: i18n.get('continue'),\n status\n })}\n </div>\n )}\n {mode === 'qrCode' && (\n <div id={A11Y.AreaId.QR} aria-labelledby={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\" role=\"region\">\n <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.qrCode.instruction')}</span>\n {mandateComponent}\n {showPayButton &&\n payButton({\n label: i18n.get('generateQRCode'),\n icon: getImage({ imageFolder: 'components/' })('qr'),\n status\n })}\n </div>\n )}\n </Fragment>\n );\n}\n"],"names":["UPIComponent","defaultMode","onChange","payButton","showPayButton","mandate","amount","onUpdateMode","apps","segmentedControlOptions","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","mode","setMode","vpaInputHandlers","setVpaInputHandlers","selectedApp","setSelectedApp","isValid","setIsValid","mandateComponent","h","UPIMandate","this","showValidation","validateInput","validateIntentApp","onSetVpaInputHandlers","useCallback","handlers","onChangeUpiMode","newMode","handleAppSelect","app","id","useEffect","data","valid","errors","Fragment","length","p","className","get","SegmentedControl","selectedValue","disabled","classNameModifiers","options","div","A11Y","AreaId","INTENT","aria-labelledby","ButtonId","role","span","Alert","icon","UPIIntentAppList","selectedAppId","onAppSelect","label","VPA","VpaInput","onSetInputHandlers","QR","imageFolder"],"mappings":"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"}

package/dist/es/components/UPI/components/UPIMandate/UPIMandate.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{createElement as n}from"../../../../external/preact/dist/preact.js";import{useMemo as t}from"../../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as e}from"../../../../core/Context/CoreProvider.js";import o from"../../../internal/Alert/Alert.js";const r=({mandate:r,amount:a})=>{const{i18n:u}=e(),l=t(()=>{const{amount:t,frequency:e,amountRule:o}=r,{value:l,currency:s}=a\|\|{};if(!(e&&o&&t&&s))return console.warn("No mandate information because of missing one of the following: frequency, amountRule, amount or currency"),null;const m=u.amount(Number(t),s),i=l?u.amount(l,s):null,c=u.get(`upi.mandate.frequency.${e}`),f=u.get("upi.mandate.intro"),p=`${m}${c}`;if("exact"===o)return n("span",null,f," (",n("strong",null,p),").");const d=u.get("upi.mandate.upTo",{values:{amount:p}});if(i){const t=u.get("upi.mandate.max.extraText");return n("span",null,f," (",n("strong",null,i),"). ",t," (",n("strong",null,d),").")}return n("span",null,f," (",n("strong",null,d),").")},[r,a,u]);return l?n(o,{icon:"info_black",type:"info"},l):null};export{r as default};
2	+ //# sourceMappingURL=UPIMandate.js.map

package/dist/es/components/UPI/components/UPIMandate/UPIMandate.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UPIMandate.js","sources":["../../../../../../src/components/UPI/components/UPIMandate/UPIMandate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport type { PaymentAmount } from '../../../../types/global-types';\n\nexport type Mandate = { amount: string; frequency: 'monthly' | 'weekly' | 'adhoc'; amountRule: 'max' | 'exact' };\n\nexport interface UPIMandateProps {\n mandate: Mandate;\n amount?: PaymentAmount;\n}\n\nconst UPIMandate = ({ mandate, amount }: UPIMandateProps): h.JSX.Element => {\n const { i18n } = useCoreContext();\n\n const mandateContent = useMemo((): h.JSX.Element => {\n const { amount: mandateAmount, frequency, amountRule } = mandate;\n const { value: paymentAmount, currency } = amount || {};\n\n if (!frequency || !amountRule || !mandateAmount || !currency) {\n console.warn('No mandate information because of missing one of the following: frequency, amountRule, amount or currency');\n return null;\n }\n\n const formattedMandateAmount = i18n.amount(Number(mandateAmount), currency);\n const formattedTransactionAmount = paymentAmount ? i18n.amount(paymentAmount, currency) : null;\n\n const frequencyText = i18n.get(`upi.mandate.frequency.${frequency}`);\n const introText = i18n.get('upi.mandate.intro');\n const recurringAmount = `${formattedMandateAmount}${frequencyText}`;\n\n if (amountRule === 'exact') {\n return (\n \n {introText} ({recurringAmount}).\n \n );\n }\n\n // amountRule === 'max'\n const maxAmountText = i18n.get('upi.mandate.upTo', { values: { amount: recurringAmount } });\n\n if (formattedTransactionAmount) {\n const extraText = i18n.get('upi.mandate.max.extraText');\n return (\n \n {introText} ({formattedTransactionAmount}). {extraText} ({maxAmountText}).\n \n );\n }\n\n return (\n \n {introText} ({maxAmountText}).\n \n );\n }, [mandate, amount, i18n]);\n\n if (!mandateContent) return null;\n\n return (\n <Alert icon=\"info_black\" type=\"info\">\n {mandateContent}\n </Alert>\n );\n};\n\nexport default UPIMandate;\n"],"names":["UPIMandate","mandate","amount","i18n","useCoreContext","mandateContent","useMemo","mandateAmount","frequency","amountRule","value","paymentAmount","currency","console","warn","formattedMandateAmount","Number","formattedTransactionAmount","frequencyText","get","introText","recurringAmount","h","span","strong","maxAmountText","values","extraText","Alert","icon","type"],"mappings":"+QAaA,MAAMA,EAAa,EAAGC,UAASC,aAC3B,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,EAAQ,KAC3B,MAAQJ,OAAQK,EAAaC,UAAEA,EAASC,WAAEA,GAAeR,GACjDS,MAAOC,EAAaC,SAAEA,GAAaV,GAAU,CAAA,EAErD,KAAKM,GAAcC,GAAeF,GAAkBK,GAEhD,OADAC,QAAQC,KAAK,6GACN,KAGX,MAAMC,EAAyBZ,EAAKD,OAAOc,OAAOT,GAAgBK,GAC5DK,EAA6BN,EAAgBR,EAAKD,OAAOS,EAAeC,GAAY,KAEpFM,EAAgBf,EAAKgB,IAAI,yBAAyBX,KAClDY,EAAYjB,EAAKgB,IAAI,qBACrBE,EAAkB,GAAGN,IAAyBG,IAEpD,GAAmB,UAAfT,EACA,OACIa,EAACC,OAAAA,KACIH,EAAU,KAAEE,EAACE,cAAQH,GAAyB,MAM3D,MAAMI,EAAgBtB,EAAKgB,IAAI,mBAAoB,CAAEO,OAAQ,CAAExB,OAAQmB,KAEvE,GAAIJ,EAA4B,CAC5B,MAAMU,EAAYxB,EAAKgB,IAAI,6BAC3B,OACIG,EAACC,OAAAA,KACIH,EAAU,KAAEE,EAACE,SAAAA,KAAQP,GAAoC,MAAIU,EAAU,KAAEL,EAACE,SAAAA,KAAQC,GAAuB,KAGtH,CAEA,OACIH,EAACC,OAAAA,KACIH,EAAU,KAAEE,EAACE,cAAQC,GAAuB,OAGtD,CAACxB,EAASC,EAAQC,IAErB,OAAKE,EAGDiB,EAACM,EAAAA,CAAMC,KAAK,aAAaC,KAAK,QACzBzB,GAJmB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n value: string,\n actions: {\n resolve: (value: Array<AddressLookupItem>) => void;\n reject: (reason?: any) => void;\n }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n value: ~~string~~,\n actions: {\n resolve: (value: AddressLookupItem) => void;\n reject: (reason?: any) => void;\n }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n onAddressLookup?: OnAddressLookupType;\n onAddressSelected?: OnAddressSelectedType;\n onSelect: (addressItem: AddressData) => void;\n onManualAddress: any;\n externalErrorMessage: string;\n hideManualButton: boolean;\n showContextualElement?: boolean;\n contextualText?: string;\n placeholder?: string;\n addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n errorMessage: string;\n}\n\nexport default function AddressSearch({\n onAddressLookup,\n onAddressSelected,\n onSelect,\n onManualAddress,\n externalErrorMessage,\n hideManualButton,\n showContextualElement,\n contextualText,\n placeholder,\n addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n const [formattedData, setFormattedData] = useState([]);\n const [originalData, setOriginalData] = useState([]);\n\n const [errorMessage, setErrorMessage] = useState('');\n\n const { i18n } = useCoreContext();\n const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n const handlePromiseReject = useCallback((reason: RejectionReason) => {\n if (reason?.errorMessage) {\n setErrorMessage(reason.errorMessage);\n }\n }, []);\n\n const onTextInput = useCallback(\n (inputValue: string) => {\n new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n void onAddressLookup(inputValue, { resolve, reject });\n })\n .then(searchArray => {\n setOriginalData(searchArray);\n setFormattedData(mapDataToSelect(searchArray));\n setErrorMessage('');\n })\n .catch(reason => handlePromiseReject(reason));\n },\n [onAddressLookup]\n );\n\n // update error message when there's a new one\n useEffect(() => {\n setErrorMessage(externalErrorMessage);\n }, [externalErrorMessage]);\n\n const onSelectItem = event => {\n if (!event.target.value) {\n setErrorMessage(i18n.get('address.errors.incomplete'));\n return;\n }\n const value = originalData.find(item => item.id === event.target.value);\n\n // 1. in case we don't get a function just select item\n if (typeof onAddressSelected !== 'function') {\n onSelect(value);\n setFormattedData([]);\n return;\n }\n\n // 2. in case callback is provided, create and call onAddressSelected\n new Promise<AddressLookupItem>((resolve, reject) => {\n void onAddressSelected(value, { resolve, reject });\n })\n .then(fullData => {\n onSelect(fullData);\n setFormattedData([]);\n })\n .catch(reason => handlePromiseReject(reason));\n };\n\n const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n return (\n <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n <Field\n label={i18n.get('address')}\n classNameModifiers={['address-search']}\n errorMessage={errorMessage}\n name={'address-search'}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <Select\n name={'address-search'}\n className={'adyen-checkout__address-search__dropdown'}\n placeholder={placeholder}\n onInput={debounceInputHandler}\n items={formattedData}\n onChange={onSelectItem}\n disableTextFilter={true}\n blurOnClose={true}\n />\n </Field>\n {!hideManualButton && (\n <span className=\"adyen-checkout__address-search__manual-add\">\n <button\n type=\"button\"\n className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n onClick={onManualAddress}\n >\n {'+ ' + i18n.get('address.enterManually')}\n </button>\n </span>\n )}\n </div>\n );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"saA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,~~EAAS~~,~~KAC5CC~~,EAAcC,GAAmBF,~~EAAS~~,~~KAE1CG~~,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,EAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,eAE5B,IAEGO,EAAcF,EACfG,IACG,IAAIC,QAAkC,CAACC,EAASC,KACvC1B,EAAgBuB,EAAY,CAAEE,UAASC,aAE3CC,KAAKC,IACFd,EAAgBc,GAChBjB,EAAiCiB,EAfZC,IAAI,EAAGC,KAAIC,WAAM,CAAQD,KAAIC,WAgBlDf,EAAgB,MAEnBgB,MAAMX,GAAUF,EAAoBE,KAE7C,CAACrB,IAILiC,EAAU,KACNjB,EAAgBZ,IACjB,CAACA,IAEJ,MAyBM8B,EAAuBC,EAAQ,IAAMC,EAASd,EAAab,GAA0B,IAE3F,OACI4B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOxB,EAAKyB,IAAI,WAChBC,mBAAoB,CAAC,kBACrB5B,aAAcA,EACdgB,KAAM,iBACNzB,sBAAuBA,EACvBC,eAAgBA,GAEhB8B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACX/B,YAAaA,EACbqC,QAASX,EACTY,MAAOpC,EACPqC,SA3CKC,IACjB,IAAKA,EAAMC,OAAOC,MAEd,YADAlC,EAAgBC,EAAKyB,IAAI,8BAG7B,MAAMQ,EAAQrC,EAAasC,KAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,OAGjE,GAAiC,mBAAtBjD,EAGP,OAFAC,EAASgD,QACTvC,EAAiB,IAKrB,IAAIa,QAA2B,CAACC,EAASC,KAChCzB,EAAkBiD,EAAO,CAAEzB,UAASC,aAExCC,KAAK0B,IACFnD,EAASmD,GACT1C,EAAiB,MAEpBqB,MAAMX,GAAUF,EAAoBE,KAsB7BiC,mBAAmB,EACnBC,aAAa,MAGnBlD,GACEgC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASxD,GAER,KAAOc,EAAKyB,IAAI,2BAMzC"}
1	+ {"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n value: string,\n actions: {\n resolve: (value: Array<AddressLookupItem>) => void;\n reject: (reason?: any) => void;\n }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n value: AddressLookupItem,\n actions: {\n resolve: (value: AddressLookupItem) => void;\n reject: (reason?: any) => void;\n }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n onAddressLookup?: OnAddressLookupType;\n onAddressSelected?: OnAddressSelectedType;\n onSelect: (addressItem: AddressData) => void;\n onManualAddress: any;\n externalErrorMessage: string;\n hideManualButton: boolean;\n showContextualElement?: boolean;\n contextualText?: string;\n placeholder?: string;\n addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n errorMessage: string;\n}\n\nexport default function AddressSearch({\n onAddressLookup,\n onAddressSelected,\n onSelect,\n onManualAddress,\n externalErrorMessage,\n hideManualButton,\n showContextualElement,\n contextualText,\n placeholder,\n addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n const [formattedData, setFormattedData] = useState<AddressLookupItem[]>([]);\n const [originalData, setOriginalData] = useState<AddressLookupItem[]>([]);\n\n const [errorMessage, setErrorMessage] = useState('');\n\n const { i18n } = useCoreContext();\n const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n const handlePromiseReject = useCallback((reason: RejectionReason) => {\n if (reason?.errorMessage) {\n setErrorMessage(reason.errorMessage);\n }\n }, []);\n\n const onTextInput = useCallback(\n (inputValue: string) => {\n new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n void onAddressLookup(inputValue, { resolve, reject });\n })\n .then(searchArray => {\n setOriginalData(searchArray);\n setFormattedData(mapDataToSelect(searchArray));\n setErrorMessage('');\n })\n .catch(reason => handlePromiseReject(reason));\n },\n [onAddressLookup]\n );\n\n // update error message when there's a new one\n useEffect(() => {\n setErrorMessage(externalErrorMessage);\n }, [externalErrorMessage]);\n\n const onSelectItem = event => {\n if (!event.target.value) {\n setErrorMessage(i18n.get('address.errors.incomplete'));\n return;\n }\n const value = originalData.find(item => item.id === event.target.value);\n\n // 1. in case we don't get a function just select item\n if (typeof onAddressSelected !== 'function') {\n onSelect(value);\n setFormattedData([]);\n return;\n }\n\n // 2. in case callback is provided, create and call onAddressSelected\n new Promise<AddressLookupItem>((resolve, reject) => {\n void onAddressSelected(value, { resolve, reject });\n })\n .then(fullData => {\n onSelect(fullData);\n setFormattedData([]);\n })\n .catch(reason => handlePromiseReject(reason));\n };\n\n const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n return (\n <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n <Field\n label={i18n.get('address')}\n classNameModifiers={['address-search']}\n errorMessage={errorMessage}\n name={'address-search'}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <Select\n name={'address-search'}\n className={'adyen-checkout__address-search__dropdown'}\n placeholder={placeholder}\n onInput={debounceInputHandler}\n items={formattedData}\n onChange={onSelectItem}\n disableTextFilter={true}\n blurOnClose={true}\n />\n </Field>\n {!hideManualButton && (\n <span className=\"adyen-checkout__address-search__manual-add\">\n <button\n type=\"button\"\n className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n onClick={onManualAddress}\n >\n {'+ ' + i18n.get('address.enterManually')}\n </button>\n </span>\n )}\n </div>\n );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"saA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,EAA8B,KACjEC,EAAcC,GAAmBF,EAA8B,KAE/DG,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,EAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,eAE5B,IAEGO,EAAcF,EACfG,IACG,IAAIC,QAAkC,CAACC,EAASC,KACvC1B,EAAgBuB,EAAY,CAAEE,UAASC,aAE3CC,KAAKC,IACFd,EAAgBc,GAChBjB,EAAiCiB,EAfZC,IAAI,EAAGC,KAAIC,WAAM,CAAQD,KAAIC,WAgBlDf,EAAgB,MAEnBgB,MAAMX,GAAUF,EAAoBE,KAE7C,CAACrB,IAILiC,EAAU,KACNjB,EAAgBZ,IACjB,CAACA,IAEJ,MAyBM8B,EAAuBC,EAAQ,IAAMC,EAASd,EAAab,GAA0B,IAE3F,OACI4B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOxB,EAAKyB,IAAI,WAChBC,mBAAoB,CAAC,kBACrB5B,aAAcA,EACdgB,KAAM,iBACNzB,sBAAuBA,EACvBC,eAAgBA,GAEhB8B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACX/B,YAAaA,EACbqC,QAASX,EACTY,MAAOpC,EACPqC,SA3CKC,IACjB,IAAKA,EAAMC,OAAOC,MAEd,YADAlC,EAAgBC,EAAKyB,IAAI,8BAG7B,MAAMQ,EAAQrC,EAAasC,KAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,OAGjE,GAAiC,mBAAtBjD,EAGP,OAFAC,EAASgD,QACTvC,EAAiB,IAKrB,IAAIa,QAA2B,CAACC,EAASC,KAChCzB,EAAkBiD,EAAO,CAAEzB,UAASC,aAExCC,KAAK0B,IACFnD,EAASmD,GACT1C,EAAiB,MAEpBqB,MAAMX,GAAUF,EAAoBE,KAsB7BiC,mBAAmB,EACnBC,aAAa,MAGnBlD,GACEgC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASxD,GAER,KAAOc,EAAKyB,IAAI,2BAMzC"}

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

@@ -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"../../../_virtual/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 u from"../ContentSeparator/ContentSeparator.js";import m from"../../../core/Context/useImage.js";function _(_){const{i18n:p,loadingContext:y}=l(),h=m(),[w,k]=t(!1),[f,g]=t(!1),[v,N]=t(!0),[C,T]=t(!1),[b,x]=t(_.delay),[R,j]=t(100),[E,S]=t(0),[A,D]=t(!1),[I,L]=t(null),{amount:P}=_,M=e=>{if(e.props.payload){k(!0);const t={data:{details:{payload:e.props.payload},paymentData:_.paymentData}};return _.onComplete(t,this)}g(!0),_.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:_.paymentData}};return _.onComplete(t,this)}_.onError(new d("ERROR","error result with no payload in response"))},$=async()=>{const{paymentData:e,clientKey:t,throttleInterval:a,pollStatus:o}=_,s=o??(()=>r(e,t,y,a));return C||(_.onActionHandled?.({componentType:_.type,actionDescription:"polling-started"}),T(!0)),s().then(n).catch(({message:e,...t})=>({type:"network-error",props:{...e&&{message:p.get(e)},...t}})).then(e=>{switch(e.type){case"success":M(e);break;case"error":O(e);break;default:N(!1)}})},z=e=>{window.location.assign(e)};a(()=>{_.shouldRedirectAutomatically&&_.url&&z(_.url)},[_.shouldRedirectAutomatically,_.url]),a(()=>($(),()=>{clearTimeout(I)}),[]),a(()=>{if(f)return clearTimeout(I);if(w)return clearTimeout(I);if(!v){const e=async()=>{await $();const e=E+b;S(e),e>=_.throttleTime&&!A&&(x(_.throttleInterval),D(!0))};L(setTimeout(()=>{e()},b))}},[v,f,w,E]);const B=(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:h({imageFolder:"components/"})(t),alt:p.get(a)}),e("div",{className:"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result"},p.get(a)));if(f)return B("error","error.subtitle.payment");if(w)return B("success","creditCard.success");if(v)return e("div",{className:"adyen-checkout__await"},_.brandLogo&&e("img",{src:_.brandLogo,alt:_.type,className:"adyen-checkout__await__brand-logo"}),e(s,{inline:!1,size:"large"}));const F=p.get("wechatpay.timetopay").split("%@");return e("div",{className:o("adyen-checkout__await",`adyen-checkout__await--${_.type}`,_.classNameModifiers.map(e=>`adyen-checkout__await--${e}`))},_.brandLogo&&e("img",{src:_.brandLogo,alt:_.type,className:"adyen-checkout__await__brand-logo"}),!!(_.showAmount&&P?.value&&P?.currency)&&e("div",{className:"adyen-checkout__await__amount"},p.amount(P.value,P.currency)),null!=_.messageText&&e("div",{className:"adyen-checkout__await__subtitle"},_.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"},_.awaitText)),_.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:`${R}%`}})),e("div",{className:"adyen-checkout__await__countdown"},F[0]," ",e(i,{minutesFromNow:_.countdownTime,onTick:e=>{j(e.percentage)},onCompleted:()=>{g(!0),clearTimeout(I),_.onError(new d("ERROR","Payment Expired"))}})," ",F[1])),_.url&&!_.shouldRedirectAutomatically&&e("div",{className:"adyen-checkout__await__app-link"},e(u,null),e(c,{classNameModifiers:["await"],onClick:()=>z(_.url),label:p.get("openApp")})),_.instructions&&e("div",{className:"adyen-checkout__await__instructions"},"string"==typeof _.instructions?p.get(_.instructions):_.instructions?.()),_.endSlot&&e("div",{className:"adyen-checkout__await__end-slot"},_.endSlot()))}_.defaultProps={countdownTime:15,onError:()=>{},onComplete:()=>{},delay:2e3,throttleTime:6e4,throttleInterval:1e4,showCountdownTimer:!0,classNameModifiers:[],url:null};export{_ 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"../../../_virtual/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 u from"../../../core/Errors/AdyenCheckoutError.js";import d from"../ContentSeparator/ContentSeparator.js";import m from"../../../core/Context/useImage.js";function _(_){const{i18n:p,loadingContext:y}=l(),h=m(),[w,k]=t(!1),[f,g]=t(!1),[v,N]=t(!0),[C,T]=t(!1),[b,x]=t(_.delay),[R,j]=t(100),[E,S]=t(0),[A,D]=t(!1),[I,L]=t(null),{amount:P}=_,M=e=>{if(e.props.payload){k(!0);const t={data:{details:{payload:e.props.payload},paymentData:_.paymentData}};return _.onComplete(t,this)}g(!0),_.onError(new u("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:_.paymentData}};return _.onComplete(t,this)}_.onError(new u("ERROR","error result with no payload in response"))},$=async()=>{const{paymentData:e,clientKey:t,throttleInterval:a,pollStatus:o}=_,s=o??(()=>r(e,t,y,a));return C||(_.onActionHandled?.({componentType:_.type,actionDescription:"polling-started"}),T(!0)),s().then(n).catch(({message:e,...t})=>({type:"network-error",props:{...e&&{message:p.get(e)},...t}})).then(e=>{switch(e.type){case"success":M(e);break;case"error":O(e);break;default:N(!1)}})},z=e=>{window.location.assign(e)};a(()=>{_.shouldRedirectAutomatically&&_.url&&z(_.url)},[_.shouldRedirectAutomatically,_.url]),a(()=>($(),()=>{clearTimeout(I)}),[]),a(()=>{if(f)return clearTimeout(I);if(w)return clearTimeout(I);if(!v){const e=async()=>{await $();const e=E+b;S(e),e>=_.throttleTime&&!A&&(x(_.throttleInterval),D(!0))};L(setTimeout(()=>{e()},b))}},[v,f,w,E]);const B=(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:h({imageFolder:"components/"})(t),alt:p.get(a)}),e("div",{className:"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result"},p.get(a)));if(f)return B("error","error.subtitle.payment");if(w)return B("success","creditCard.success");if(v)return e("div",{className:"adyen-checkout__await"},_.brandLogo&&e("img",{src:_.brandLogo,alt:_.type,className:"adyen-checkout__await__brand-logo"}),e(s,{inline:!1,size:"large"}));const F=p.get("wechatpay.timetopay").split("%@");return e("div",{className:o("adyen-checkout__await",`adyen-checkout__await--${_.type}`,_.classNameModifiers.map(e=>`adyen-checkout__await--${e}`))},_.brandLogo&&e("img",{src:_.brandLogo,alt:_.type,className:"adyen-checkout__await__brand-logo"}),!(!_.showAmount||null===P?.value||!P?.currency)&&e("div",{className:"adyen-checkout__await__amount"},p.amount(P.value,P.currency)),null!=_.messageText&&e("div",{className:"adyen-checkout__await__subtitle"},_.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"},_.awaitText)),_.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:`${R}%`}})),e("div",{className:"adyen-checkout__await__countdown"},F[0]," ",e(i,{minutesFromNow:_.countdownTime,onTick:e=>{j(e.percentage)},onCompleted:()=>{g(!0),clearTimeout(I),_.onError(new u("ERROR","Payment Expired"))}})," ",F[1])),_.url&&!_.shouldRedirectAutomatically&&e("div",{className:"adyen-checkout__await__app-link"},e(d,null),e(c,{classNameModifiers:["await"],onClick:()=>z(_.url),label:p.get("openApp")})),_.instructions&&e("div",{className:"adyen-checkout__await__instructions"},"string"==typeof _.instructions?p.get(_.instructions):_.instructions?.()),_.endSlot&&e("div",{className:"adyen-checkout__await__end-slot"},_.endSlot()))}_.defaultProps={countdownTime:15,onError:()=>{},onComplete:()=>{},delay:2e3,throttleTime:6e4,throttleInterval:1e4,showCountdownTimer:!0,classNameModifiers:[],url:null};export{_ as default};
 //# sourceMappingURL=Await.js.map

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

	@@ -1 +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/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 const { amount } = props;\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 = async (): Promise<void> => {\n const { paymentData, clientKey, throttleInterval, pollStatus } = props;\n\n // If there's a custom pollStatus function, call it.\n // Otherwise, call the default one.\n const pollStatusFunction = pollStatus ?? (() => checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval));\n\n if (!hasCalledActionHandled) {\n props.onActionHandled?.({ componentType: props.type, actionDescription: 'polling-started' });\n setHasCalledActionHandled(true);\n }\n\n return pollStatusFunction()\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 if (props.shouldRedirectAutomatically && props.url) {\n redirectToApp(props.url);\n }\n }, [props.shouldRedirectAutomatically, props.url]);\n\n useEffect(() => {\n void 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 = async (): Promise<void> => {\n await 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(() => void 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 {/* Everything is wrapped in !! so we evaluate the result as boolean,\n otherwise we might just print the value or object as mistake */}\n {!!(props.showAmount && amount?.value && amount?.currency) && (\n <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n )}\n\n {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n <div className=\"adyen-checkout__await__indicator-holder\">\n <div className=\"adyen-checkout__await__indicator-spinner\">\n <Spinner inline={false} size=\"medium\" />\n </div>\n <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n </div>\n\n {props.showCountdownTimer && (\n <div className=\"adyen-checkout__await__countdown-holder\">\n <div className=\"adyen-checkout__await__progress\">\n <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n </div>\n\n <div className=\"adyen-checkout__await__countdown\">\n {timeToPayString[0]} \n <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n  {timeToPayString[1]}\n </div>\n </div>\n )}\n\n {props.url && !props.shouldRedirectAutomatically && (\n <div className=\"adyen-checkout__await__app-link\">\n <ContentSeparator />\n <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n </div>\n )}\n\n {props.instructions && (\n <div className=\"adyen-checkout__await__instructions\">\n {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n </div>\n )}\n\n {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n </div>\n );\n}\n\nAwait.defaultProps = {\n countdownTime: 15,\n onError: () => {},\n onComplete: () => {},\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","amount","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","async","clientKey","throttleInterval","pollStatus","pollStatusFunction","checkPaymentStatus","onActionHandled","componentType","type","actionDescription","then","processResponse","catch","message","response","get","redirectToApp","url","window","location","assign","useEffect","shouldRedirectAutomatically","clearTimeout","statusInterval","actualTimePassed","throttleTime","setTimeout","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps"],"mappings":"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"}
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/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 const { amount } = props;\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 = async (): Promise<void> => {\n const { paymentData, clientKey, throttleInterval, pollStatus } = props;\n\n // If there's a custom pollStatus function, call it.\n // Otherwise, call the default one.\n const pollStatusFunction = pollStatus ?? (() => checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval));\n\n if (!hasCalledActionHandled) {\n props.onActionHandled?.({ componentType: props.type, actionDescription: 'polling-started' });\n setHasCalledActionHandled(true);\n }\n\n return pollStatusFunction()\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 if (props.shouldRedirectAutomatically && props.url) {\n redirectToApp(props.url);\n }\n }, [props.shouldRedirectAutomatically, props.url]);\n\n useEffect(() => {\n void 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 = async (): Promise<void> => {\n await 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(() => void 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 {/* Everything is wrapped in !! so we evaluate the result as boolean,\n otherwise we might just print the value or object as mistake */}\n {!!(props.showAmount && amount?.value !== null && amount?.currency) && (\n <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n )}\n\n {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n <div className=\"adyen-checkout__await__indicator-holder\">\n <div className=\"adyen-checkout__await__indicator-spinner\">\n <Spinner inline={false} size=\"medium\" />\n </div>\n <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n </div>\n\n {props.showCountdownTimer && (\n <div className=\"adyen-checkout__await__countdown-holder\">\n <div className=\"adyen-checkout__await__progress\">\n <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n </div>\n\n <div className=\"adyen-checkout__await__countdown\">\n {timeToPayString[0]} \n <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n  {timeToPayString[1]}\n </div>\n </div>\n )}\n\n {props.url && !props.shouldRedirectAutomatically && (\n <div className=\"adyen-checkout__await__app-link\">\n <ContentSeparator />\n <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n </div>\n )}\n\n {props.instructions && (\n <div className=\"adyen-checkout__await__instructions\">\n {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n </div>\n )}\n\n {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n </div>\n );\n}\n\nAwait.defaultProps = {\n countdownTime: 15,\n onError: () => {},\n onComplete: () => {},\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","amount","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","async","clientKey","throttleInterval","pollStatus","pollStatusFunction","checkPaymentStatus","onActionHandled","componentType","type","actionDescription","then","processResponse","catch","message","response","get","redirectToApp","url","window","location","assign","useEffect","shouldRedirectAutomatically","clearTimeout","statusInterval","actualTimePassed","throttleTime","setTimeout","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/FormFields/Fieldset/Fieldset.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as a}from"../../../../utils/idGenerator.js";function d({children:d,classNameModifiers:s=[],label:r,readonly:c=!1,description:o}){const{i18n:l}=i(),n=a("payid-input-description");return e("fieldset",{className:t(["adyen-checkout__fieldset",...s.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":c}]),"aria-describedby":o?n:null},r&&e("legend",{className:"adyen-checkout__fieldset__title"},l.get(r)),o&&e("p",{id:n,className:"adyen-checkout__fieldset__description"},l.get(o)),e("div",{className:"adyen-checkout__fieldset__fields"},d))}export{d as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as s}from"../../../../utils/idGenerator.js";import{useMemo as d}from"../../../../external/preact/hooks/dist/hooks.js";function o({children:o,classNameModifiers:r=[],label:a,readonly:c=!1,description:l,id:n}){const{i18n:_}=i(),m=d(()=>s("fieldset-description"),[]);return e("fieldset",{id:n,className:t(["adyen-checkout__fieldset",...r.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":c}]),"aria-describedby":l?m:null},a&&e("legend",{className:"adyen-checkout__fieldset__title"},_.get(a)),l&&e("p",{id:m,className:"adyen-checkout__fieldset__description"},_.get(l)),e("div",{className:"adyen-checkout__fieldset__fields"},o))}export{o as default};
 //# sourceMappingURL=Fieldset.js.map

package/dist/es/components/internal/FormFields/Fieldset/Fieldset.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers?: string[];\n label?: string;\n description?: string;\n readonly?: boolean;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false, description }: FieldsetProps) {\n const { i18n } = useCoreContext();\n\n const describedById = getUniqueId('~~payid~~-~~input-~~description');\n\n return (\n <fieldset\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n aria-describedby={description ? describedById : null}\n >\n {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n {description && (\n <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n {i18n.get(description)}\n </p>\n )}\n <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","description","i18n","useCoreContext","describedById","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","get","p","~~id","~~div"],"mappings":"~~iQAce~~,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,EAAKC,YAAEA,~~IAC3F~~,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAY,~~2BAElC~~,OACIC,EAACC,WAAAA,~~CACGC~~,UAAWC,EAAG,CACV,~~8BACGX~~,~~EAAmBY~~,IAAIC,GAAK,6BAA6BA,KAC5D,CAAE,~~qCAAsCX~~,~~KAE5CY~~,~~mBAAkBX~~,~~EAAcG~~,EAAgB,MAE/CL,~~GAASO~~,EAACO,SAAAA,CAAOL,UAAU,~~mCAAmCN~~,~~EAAKY~~,~~IAAIf~~,IACvEE,~~GACGK~~,EAACS,IAAAA,~~CAAEC~~,~~GAAIZ~~,~~EAAeI~~,UAAU,~~yCAC3BN~~,~~EAAKY~~,~~IAAIb~~,~~IAGlBK~~,~~EAACW~~,MAAAA,~~CAAIT~~,UAAU,~~oCAAoCX~~,GAG/D"}
1	+ {"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers?: string[];\n label?: string;\n description?: string;\n readonly?: boolean;\n id?: string;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false, description, id }: FieldsetProps) {\n const { i18n } = useCoreContext();\n\n const describedById = useMemo(() => getUniqueId('fieldset-description'), []);\n\n return (\n <fieldset\n id={id}\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n aria-describedby={description ? describedById : null}\n >\n {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n {description && (\n <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n {i18n.get(description)}\n </p>\n )}\n <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","description","id","i18n","useCoreContext","describedById","useMemo","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","get","p","div"],"mappings":"2UAgBe,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,EAAKC,YAAEA,EAAWC,GAAEA,IACxG,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAQ,IAAMC,EAAY,wBAAyB,IAEzE,OACIC,EAACC,WAAAA,CACGP,GAAIA,EACJQ,UAAWC,EAAG,CACV,8BACGb,EAAmBc,IAAIC,GAAK,6BAA6BA,KAC5D,CAAE,qCAAsCb,KAE5Cc,mBAAkBb,EAAcI,EAAgB,MAE/CN,GAASS,EAACO,SAAAA,CAAOL,UAAU,mCAAmCP,EAAKa,IAAIjB,IACvEE,GACGO,EAACS,IAAAA,CAAEf,GAAIG,EAAeK,UAAU,yCAC3BP,EAAKa,IAAIf,IAGlBO,EAACU,MAAAA,CAAIR,UAAU,oCAAoCb,GAG/D"}