@adyen/adyen-web 6.20.0 → 6.22.0

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

@@ -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"}
+{"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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=UPIMandate.js.map

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

@@ -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                <span>\n                    {introText} (<strong>{recurringAmount}</strong>).\n                </span>\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                <span>\n                    {introText} (<strong>{formattedTransactionAmount}</strong>). {extraText} (<strong>{maxAmountText}</strong>).\n                </span>\n            );\n        }\n\n        return (\n            <span>\n                {introText} (<strong>{maxAmountText}</strong>).\n            </span>\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

@@ -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"}
+{"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

@@ -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

@@ -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]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{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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"}
+{"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]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{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

@@ -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

@@ -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"}
+{"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as s}from"../../../external/preact/dist/preact.js";import{useState as t,useCallback as r,useRef as o,useEffect as i}from"../../../external/preact/hooks/dist/hooks.js";import a from"../../../utils/useForm/useForm.js";import n from"../FormFields/Field/Field.js";import l from"./IssuerButtonGroup/IssuerButtonGroup.js";import u from"../ContentSeparator/ContentSeparator.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import c from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as d}from"../../../core/Errors/constants.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import h from"../DisclaimerMessage/DisclaimerMessage.js";import p from"../FormFields/Select/Select.js";import{ANALYTICS_LIST as f,ANALYTICS_FEATURED_ISSUER as y,ANALYTICS_SELECTED_STR as C,ANALYTICS_DISPLAYED_STR as j,ANALYTICS_SEARCH_DEBOUNCE_TIME as F,ANALYTICS_LIST_SEARCH as x,ANALYTICS_INPUT_STR as S}from"../../../core/Analytics/constants.js";import{debounce as _}from"../../../utils/debounce.js";import{AnalyticsInfoEvent as b}from"../../../core/Analytics/AnalyticsInfoEvent.js";const v=({issuer:e,items:s},t)=>{const r=s.find(s=>s.id===e)?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},A=["issuer"],I={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};function M({items:M,placeholder:k,issuer:w,highlightedIds:E=[],showContextualElement:V,contextualText:T,...B}){const{i18n:N}=m(),{handleChangeFor:P,triggerValidation:R,data:D,valid:L,errors:G,isValid:$}=a({schema:A,defaultData:{issuer:w},rules:I}),[K,O]=t("ready"),[q,z]=t(1),{setSRMessagesFromObjects:H,shouldMoveFocusSR:J}=c(),Q=H?.({});this.setStatus=e=>{O(e)};const U=r(e=>s=>{const t=1===e?f:y,r=M.find(e=>e.id===s.target.value),o=new b({type:C,target:t,issuer:r.name});B.onSubmitAnalytics(o),z(e),P("issuer")(s)},[P]),W=r(e=>{if(e){const e=new b({type:j,target:f});B.onSubmitAnalytics(e)}},[]),X=o(_(B.onSubmitAnalytics,F)),Y=r(()=>{X.current({type:S,target:x})},[]);i(()=>{B.onChange({data:D,valid:L,errors:G,isValid:$});const e=Q?.({errors:G,isValidating:!0});e?.action===d&&J&&g(".adyen-checkout__issuer-list","issuer-list")},[D,L,G,$]),this.showValidation=()=>{R()};const{highlightedItems:Z}=M.reduce((e,s)=>(E.includes(s.id)&&e.highlightedItems.push({...s}),e),{highlightedItems:[]});return e("div",{className:"adyen-checkout__issuer-list"},!!Z.length&&e(s,null,e(l,{selectedIssuerId:0===q?D.issuer:null,items:Z,onChange:U(0)}),e(u,null)),e(n,{label:N.get("issuerList.selectField.label"),errorMessage:(ee=G.issuer,ee&&ee.errorMessage?N.get(ee.errorMessage):!!ee),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:V,contextualText:T},e(p,{items:M,selectedValue:1===q?D.issuer:null,placeholder:k,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:U(1),onListToggle:W,onInput:Y})),B.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:N.get(B.termsAndConditions.translationKey),urls:B.termsAndConditions.urls})),B.showPayButton&&B.payButton({status:K,label:v({issuer:D.issuer,items:[...M,...Z]},N)}));var ee}M.defaultProps={onChange:()=>{}};export{M as default};
+import{createElement as e,Fragment as s}from"../../../external/preact/dist/preact.js";import{useState as t,useRef as r,useCallback as o,useEffect as i}from"../../../external/preact/hooks/dist/hooks.js";import a from"../../../utils/useForm/useForm.js";import n from"../FormFields/Field/Field.js";import l from"./IssuerButtonGroup/IssuerButtonGroup.js";import u from"../ContentSeparator/ContentSeparator.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import c from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as d}from"../../../core/Errors/constants.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import h from"../DisclaimerMessage/DisclaimerMessage.js";import p from"../FormFields/Select/Select.js";import{ANALYTICS_LIST as f,ANALYTICS_FEATURED_ISSUER as C,ANALYTICS_SELECTED_STR as j,ANALYTICS_DISPLAYED_STR as y,ANALYTICS_SEARCH_DEBOUNCE_TIME as F,ANALYTICS_LIST_SEARCH as x,ANALYTICS_INPUT_STR as S}from"../../../core/Analytics/constants.js";import{debounce as b}from"../../../utils/debounce.js";import{AnalyticsInfoEvent as v}from"../../../core/Analytics/AnalyticsInfoEvent.js";const A=({issuer:e,items:s},t)=>{const r=s.find(s=>s.id===e)?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},I=["issuer"],_={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};function M({items:M,placeholder:w,issuer:E,highlightedIds:k=[],showContextualElement:V,contextualText:T,selectFieldLabel:B,...L}){const{i18n:N}=m(),{handleChangeFor:P,triggerValidation:R,data:D,valid:G,errors:$,isValid:K}=a({schema:I,defaultData:{issuer:E},rules:_}),[O,q]=t("ready"),[z,H]=t(1),{setSRMessagesFromObjects:J,shouldMoveFocusSR:Q}=c(),U=J?.({}),W=r(null);this.setStatus=e=>{q(e)};const X=o(e=>s=>{const t=1===e?f:C,r=M.find(e=>e.id===s.target.value),o=new v({type:j,target:t,issuer:r.name});L.onSubmitAnalytics(o),H(e),P("issuer")(s)},[P]),Y=o(e=>{if(e){const e=new v({type:y,target:f});L.onSubmitAnalytics(e)}},[]),Z=r(b(L.onSubmitAnalytics,F)),ee=o(()=>{Z.current({type:S,target:x})},[]);i(()=>{L.onChange({data:D,valid:G,errors:$,isValid:K});const e=U?.({errors:$,isValidating:!0});e?.action===d&&Q&&g(W.current,"issuer-list")},[D,G,$,K]),this.showValidation=()=>{R()};const{highlightedItems:se}=M.reduce((e,s)=>(k.includes(s.id)&&e.highlightedItems.push({...s}),e),{highlightedItems:[]});return e("div",{ref:W,className:"adyen-checkout__issuer-list"},!!se.length&&e(s,null,e(l,{selectedIssuerId:0===z?D.issuer:null,items:se,onChange:X(0)}),e(u,null)),e(n,{label:B??N.get("issuerList.selectField.label"),errorMessage:(te=$.issuer,te&&te.errorMessage?N.get(te.errorMessage):!!te),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:V,contextualText:T},e(p,{items:M,selectedValue:1===z?D.issuer:null,placeholder:w,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:X(1),onListToggle:Y,onInput:ee})),L.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:N.get(L.termsAndConditions.translationKey),urls:L.termsAndConditions.urls})),L.showPayButton&&L.payButton({status:O,label:A({issuer:D.issuer,items:[...M,...se]},N)}));var te}M.defaultProps={onChange:()=>{}};export{M as default};
 //# sourceMappingURL=IssuerList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IssuerList.js","sources":["../../../../../src/components/internal/IssuerList/IssuerList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useState, useEffect, useCallback, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport Field from '../FormFields/Field';\nimport IssuerButtonGroup from './IssuerButtonGroup';\nimport ContentSeparator from '../ContentSeparator';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ValidatorRules } from '../../../utils/Validator/types';\nimport { IssuerListProps } from './types';\nimport './IssuerList.scss';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport { ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport DisclaimerMessage from '../DisclaimerMessage';\nimport Select from '../FormFields/Select';\nimport { SelectTargetObject } from '../FormFields/Select/types';\nimport {\n    ANALYTICS_DISPLAYED_STR,\n    ANALYTICS_FEATURED_ISSUER,\n    ANALYTICS_INPUT_STR,\n    ANALYTICS_LIST,\n    ANALYTICS_LIST_SEARCH,\n    ANALYTICS_SEARCH_DEBOUNCE_TIME,\n    ANALYTICS_SELECTED_STR\n} from '../../../core/Analytics/constants';\nimport { debounce } from '../../../utils/debounce';\nimport { AnalyticsInfoEvent } from '../../../core/Analytics/AnalyticsInfoEvent';\n\nconst payButtonLabel = ({ issuer, items }, i18n): string => {\n    const issuerName = items.find(i => i.id === issuer)?.name;\n    if (!issuer || !issuerName) return i18n.get('continue');\n    return `${i18n.get('continueTo')} ${issuerName}`;\n};\n\nconst schema = ['issuer'];\nconst validationRules: ValidatorRules = {\n    issuer: {\n        validate: issuer => !!issuer && issuer.length > 0,\n        errorMessage: 'issuerList.selectField.contextualText',\n        modes: ['blur']\n    }\n};\n\nenum IssuerListInputTypes {\n    ButtonGroup,\n    Dropdown\n}\n\nfunction IssuerList({ items, placeholder, issuer, highlightedIds = [], showContextualElement, contextualText, ...props }: IssuerListProps) {\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm({\n        schema,\n        defaultData: { issuer },\n        rules: validationRules\n    });\n    const [status, setStatus] = useState('ready');\n    const [inputType, setInputType] = useState<IssuerListInputTypes>(IssuerListInputTypes.Dropdown);\n\n    const { setSRMessagesFromObjects, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n\n    this.setStatus = newStatus => {\n        setStatus(newStatus);\n    };\n\n    const handleInputChange = useCallback(\n        (type: IssuerListInputTypes) => (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            const target = type === IssuerListInputTypes.Dropdown ? ANALYTICS_LIST : ANALYTICS_FEATURED_ISSUER;\n            const issuerObj = items.find(issuer => issuer.id === (event.target as SelectTargetObject).value);\n\n            const analyticsEvent = new AnalyticsInfoEvent({\n                type: ANALYTICS_SELECTED_STR,\n                target,\n                issuer: issuerObj.name\n            });\n            props.onSubmitAnalytics(analyticsEvent);\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            const event = new AnalyticsInfoEvent({\n                type: ANALYTICS_DISPLAYED_STR,\n                target: ANALYTICS_LIST\n            });\n            props.onSubmitAnalytics(event);\n        }\n    }, []);\n\n    const debounceSearchAnalytics = useRef(debounce(props.onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: ANALYTICS_INPUT_STR, target: ANALYTICS_LIST_SEARCH });\n    }, []);\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: true });\n        if (srPanelResp?.action === ERROR_ACTION_FOCUS_FIELD) {\n            // Focus field in error, if required\n            if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__issuer-list', 'issuer-list');\n        }\n    }, [data, valid, errors, isValid]);\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    const { highlightedItems } = items.reduce(\n        (memo, item) => {\n            if (highlightedIds.includes(item.id)) memo.highlightedItems.push({ ...item });\n            return memo;\n        },\n        { highlightedItems: [] }\n    );\n\n    return (\n        <div className=\"adyen-checkout__issuer-list\">\n            {!!highlightedItems.length && (\n                <Fragment>\n                    <IssuerButtonGroup\n                        selectedIssuerId={inputType === IssuerListInputTypes.ButtonGroup ? data['issuer'] : null}\n                        items={highlightedItems}\n                        onChange={handleInputChange(IssuerListInputTypes.ButtonGroup)}\n                    />\n                    <ContentSeparator />\n                </Fragment>\n            )}\n\n            <Field\n                label={i18n.get('issuerList.selectField.label')}\n                errorMessage={getErrorMessage(errors.issuer)}\n                classNameModifiers={['issuer-list']}\n                name={'issuer'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    items={items}\n                    selectedValue={inputType === IssuerListInputTypes.Dropdown ? data['issuer'] : null}\n                    placeholder={placeholder}\n                    name={'issuer'}\n                    className={'adyen-checkout__issuer-list__dropdown'}\n                    onChange={handleInputChange(IssuerListInputTypes.Dropdown)}\n                    onListToggle={handleListToggle}\n                    onInput={handleSearch}\n                />\n            </Field>\n\n            {props.termsAndConditions && (\n                <div className=\"adyen-checkout__issuer-list__termsAndConditions\">\n                    <DisclaimerMessage message={i18n.get(props.termsAndConditions.translationKey)} urls={props.termsAndConditions.urls} />\n                </div>\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label: payButtonLabel({ issuer: data['issuer'], items: [...items, ...highlightedItems] }, i18n)\n                })}\n        </div>\n    );\n}\n\nIssuerList.defaultProps = {\n    onChange: () => {}\n};\n\nexport default IssuerList;\n"],"names":["payButtonLabel","issuer","items","i18n","issuerName","find","i","id","name","get","schema","validationRules","validate","length","errorMessage","modes","IssuerList","placeholder","highlightedIds","showContextualElement","contextualText","props","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","defaultData","rules","status","setStatus","useState","inputType","setInputType","setSRMessagesFromObjects","shouldMoveFocusSR","useSRPanelContext","setSRMessages","this","newStatus","handleInputChange","useCallback","type","event","target","ANALYTICS_LIST","ANALYTICS_FEATURED_ISSUER","issuerObj","value","analyticsEvent","AnalyticsInfoEvent","ANALYTICS_SELECTED_STR","onSubmitAnalytics","handleListToggle","isOpen","ANALYTICS_DISPLAYED_STR","debounceSearchAnalytics","useRef","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","current","ANALYTICS_INPUT_STR","ANALYTICS_LIST_SEARCH","useEffect","onChange","srPanelResp","isValidating","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","showValidation","highlightedItems","reduce","memo","item","includes","push","h","div","className","Fragment","IssuerButtonGroup","selectedIssuerId","ContentSeparator","Field","label","error","classNameModifiers","Select","selectedValue","onListToggle","onInput","termsAndConditions","DisclaimerMessage","message","translationKey","urls","showPayButton","payButton","defaultProps"],"mappings":"soCA8BA,MAAMA,EAAiB,EAAGC,SAAQC,SAASC,KACvC,MAAMC,EAAaF,EAAMG,KAAKC,GAAKA,EAAEC,KAAON,IAASO,KACrD,OAAKP,GAAWG,EACT,GAAGD,EAAKM,IAAI,iBAAiBL,IADDD,EAAKM,IAAI,aAI1CC,EAAS,CAAC,UACVC,EAAkC,CACpCV,OAAQ,CACJW,SAAUX,KAAYA,GAAUA,EAAOY,OAAS,EAChDC,aAAc,wCACdC,MAAO,CAAC,UAShB,SAASC,GAAWd,MAAEA,EAAKe,YAAEA,EAAWhB,OAAEA,EAAMiB,eAAEA,EAAiB,GAAEC,sBAAEA,EAAqBC,eAAEA,KAAmBC,IAC7G,MAAMlB,KAAEA,GAASmB,KACXC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAQ,CACjFnB,SACAoB,YAAa,CAAE7B,UACf8B,MAAOpB,KAEJqB,EAAQC,GAAaC,EAAS,UAC9BC,EAAWC,GAAgBF,EAAAA,IAE5BG,yBAAEA,EAAwBC,kBAAEA,GAAsBC,IAClDC,EAAuCH,IAA2B,IAIxEI,KAAKR,UAAYS,IACbT,EAAUS,IAGd,MAAMC,EAAoBC,EACrBC,GAAgCC,IAC7B,MAAMC,MAASF,EAAyCG,EAAiBC,EACnEC,EAAYhD,EAAMG,KAAKJ,GAAUA,EAAOM,KAAQuC,EAAMC,OAA8BI,OAEpFC,EAAiB,IAAIC,EAAmB,CAC1CR,KAAMS,EACNP,SACA9C,OAAQiD,EAAU1C,OAEtBa,EAAMkC,kBAAkBH,GAExBhB,EAAaS,GACbtB,EAAgB,SAAhBA,CAA0BuB,IAE9B,CAACvB,IAGCiC,EAAmBZ,EAAaa,IAClC,GAAIA,EAAQ,CACR,MAAMX,EAAQ,IAAIO,EAAmB,CACjCR,KAAMa,EACNX,OAAQC,IAEZ3B,EAAMkC,kBAAkBT,EAC5B,GACD,IAEGa,EAA0BC,EAAOC,EAASxC,EAAMkC,kBAAmBO,IAEnEC,EAAenB,EAAY,KAC7Be,EAAwBK,QAAQ,CAAEnB,KAAMoB,EAAqBlB,OAAQmB,KACtE,IAEHC,EAAU,KACN9C,EAAM+C,SAAS,CAAE3C,OAAMC,QAAOC,SAAQC,YAEtC,MAAMyC,EAAyC7B,IAAgB,CAAEb,SAAQ2C,cAAc,IACnFD,GAAaE,SAAWC,GAEpBlC,GAAmBmC,EAAgB,+BAAgC,gBAE5E,CAAChD,EAAMC,EAAOC,EAAQC,IAEzBa,KAAKiC,eAAiB,KAClBlD,KAGJ,MAAMmD,iBAAEA,GAAqBzE,EAAM0E,OAC/B,CAACC,EAAMC,KACC5D,EAAe6D,SAASD,EAAKvE,KAAKsE,EAAKF,iBAAiBK,KAAK,IAAKF,IAC/DD,GAEX,CAAEF,iBAAkB,KAGxB,OACIM,EAACC,MAAAA,CAAIC,UAAU,iCACRR,EAAiB9D,QAChBoE,EAACG,OACGH,EAACI,EAAAA,CACGC,iBAAkBnD,IAAAA,EAAiDV,EAAK,OAAY,KACpFvB,MAAOyE,EACPP,SAAUzB,EAAAA,KAEdsC,EAACM,SAITN,EAACO,EAAAA,CACGC,MAAOtF,EAAKM,IAAI,gCAChBK,cA7EY4E,GA6EkB/D,EAAO1B,OA7EfyF,IAASA,GAAM5E,aAAeX,EAAKM,IAAIiF,GAAM5E,gBAAkB4E,IA8ErFC,mBAAoB,CAAC,eACrBnF,KAAM,SACNW,sBAAuBA,EACvBC,eAAgBA,GAEhB6D,EAACW,EAAAA,CACG1F,MAAOA,EACP2F,cAAe1D,IAAAA,EAA8CV,EAAK,OAAY,KAC9ER,YAAaA,EACbT,KAAM,SACN2E,UAAW,wCACXf,SAAUzB,EAAAA,GACVmD,aAActC,EACduC,QAAShC,KAIhB1C,EAAM2E,oBACHf,EAACC,MAAAA,CAAIC,UAAU,mDACXF,EAACgB,EAAAA,CAAkBC,QAAS/F,EAAKM,IAAIY,EAAM2E,mBAAmBG,gBAAiBC,KAAM/E,EAAM2E,mBAAmBI,QAIrH/E,EAAMgF,eACHhF,EAAMiF,UAAU,CACZtE,SACAyD,MAAOzF,EAAe,CAAEC,OAAQwB,EAAK,OAAWvB,MAAO,IAAIA,KAAUyE,IAAqBxE,MAxGlFuF,IAAAA,EA4G5B,CAEA1E,EAAWuF,aAAe,CACtBnC,SAAU"}
+{"version":3,"file":"IssuerList.js","sources":["../../../../../src/components/internal/IssuerList/IssuerList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useState, useEffect, useCallback, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport Field from '../FormFields/Field';\nimport IssuerButtonGroup from './IssuerButtonGroup';\nimport ContentSeparator from '../ContentSeparator';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ValidatorRules } from '../../../utils/Validator/types';\nimport { IssuerListProps } from './types';\nimport './IssuerList.scss';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport { ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport DisclaimerMessage from '../DisclaimerMessage';\nimport Select from '../FormFields/Select';\nimport { SelectTargetObject } from '../FormFields/Select/types';\nimport {\n    ANALYTICS_DISPLAYED_STR,\n    ANALYTICS_FEATURED_ISSUER,\n    ANALYTICS_INPUT_STR,\n    ANALYTICS_LIST,\n    ANALYTICS_LIST_SEARCH,\n    ANALYTICS_SEARCH_DEBOUNCE_TIME,\n    ANALYTICS_SELECTED_STR\n} from '../../../core/Analytics/constants';\nimport { debounce } from '../../../utils/debounce';\nimport { AnalyticsInfoEvent } from '../../../core/Analytics/AnalyticsInfoEvent';\n\nconst payButtonLabel = ({ issuer, items }, i18n): string => {\n    const issuerName = items.find(i => i.id === issuer)?.name;\n    if (!issuer || !issuerName) return i18n.get('continue');\n    return `${i18n.get('continueTo')} ${issuerName}`;\n};\n\nconst schema = ['issuer'];\nconst validationRules: ValidatorRules = {\n    issuer: {\n        validate: issuer => !!issuer && issuer.length > 0,\n        errorMessage: 'issuerList.selectField.contextualText',\n        modes: ['blur']\n    }\n};\n\nenum IssuerListInputTypes {\n    ButtonGroup,\n    Dropdown\n}\n\nfunction IssuerList({\n    items,\n    placeholder,\n    issuer,\n    highlightedIds = [],\n    showContextualElement,\n    contextualText,\n    selectFieldLabel,\n    ...props\n}: IssuerListProps) {\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm({\n        schema,\n        defaultData: { issuer },\n        rules: validationRules\n    });\n    const [status, setStatus] = useState('ready');\n    const [inputType, setInputType] = useState<IssuerListInputTypes>(IssuerListInputTypes.Dropdown);\n\n    const { setSRMessagesFromObjects, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n\n    this.setStatus = newStatus => {\n        setStatus(newStatus);\n    };\n\n    const handleInputChange = useCallback(\n        (type: IssuerListInputTypes) => (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            const target = type === IssuerListInputTypes.Dropdown ? ANALYTICS_LIST : ANALYTICS_FEATURED_ISSUER;\n            const issuerObj = items.find(issuer => issuer.id === (event.target as SelectTargetObject).value);\n\n            const analyticsEvent = new AnalyticsInfoEvent({\n                type: ANALYTICS_SELECTED_STR,\n                target,\n                issuer: issuerObj.name\n            });\n            props.onSubmitAnalytics(analyticsEvent);\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            const event = new AnalyticsInfoEvent({\n                type: ANALYTICS_DISPLAYED_STR,\n                target: ANALYTICS_LIST\n            });\n            props.onSubmitAnalytics(event);\n        }\n    }, []);\n\n    const debounceSearchAnalytics = useRef(debounce(props.onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: ANALYTICS_INPUT_STR, target: ANALYTICS_LIST_SEARCH });\n    }, []);\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: true });\n        if (srPanelResp?.action === ERROR_ACTION_FOCUS_FIELD) {\n            // Focus field in error, if required\n            if (shouldMoveFocusSR) setFocusOnField(containerRef.current, 'issuer-list');\n        }\n    }, [data, valid, errors, isValid]);\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    const { highlightedItems } = items.reduce(\n        (memo, item) => {\n            if (highlightedIds.includes(item.id)) memo.highlightedItems.push({ ...item });\n            return memo;\n        },\n        { highlightedItems: [] }\n    );\n\n    return (\n        <div ref={containerRef} className=\"adyen-checkout__issuer-list\">\n            {!!highlightedItems.length && (\n                <Fragment>\n                    <IssuerButtonGroup\n                        selectedIssuerId={inputType === IssuerListInputTypes.ButtonGroup ? data['issuer'] : null}\n                        items={highlightedItems}\n                        onChange={handleInputChange(IssuerListInputTypes.ButtonGroup)}\n                    />\n                    <ContentSeparator />\n                </Fragment>\n            )}\n\n            <Field\n                label={selectFieldLabel ?? i18n.get('issuerList.selectField.label')}\n                errorMessage={getErrorMessage(errors.issuer)}\n                classNameModifiers={['issuer-list']}\n                name={'issuer'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    items={items}\n                    selectedValue={inputType === IssuerListInputTypes.Dropdown ? data['issuer'] : null}\n                    placeholder={placeholder}\n                    name={'issuer'}\n                    className={'adyen-checkout__issuer-list__dropdown'}\n                    onChange={handleInputChange(IssuerListInputTypes.Dropdown)}\n                    onListToggle={handleListToggle}\n                    onInput={handleSearch}\n                />\n            </Field>\n\n            {props.termsAndConditions && (\n                <div className=\"adyen-checkout__issuer-list__termsAndConditions\">\n                    <DisclaimerMessage message={i18n.get(props.termsAndConditions.translationKey)} urls={props.termsAndConditions.urls} />\n                </div>\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label: payButtonLabel({ issuer: data['issuer'], items: [...items, ...highlightedItems] }, i18n)\n                })}\n        </div>\n    );\n}\n\nIssuerList.defaultProps = {\n    onChange: () => {}\n};\n\nexport default IssuerList;\n"],"names":["payButtonLabel","issuer","items","i18n","issuerName","find","i","id","name","get","schema","validationRules","validate","length","errorMessage","modes","IssuerList","placeholder","highlightedIds","showContextualElement","contextualText","selectFieldLabel","props","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","defaultData","rules","status","setStatus","useState","inputType","setInputType","setSRMessagesFromObjects","shouldMoveFocusSR","useSRPanelContext","setSRMessages","containerRef","useRef","this","newStatus","handleInputChange","useCallback","type","event","target","ANALYTICS_LIST","ANALYTICS_FEATURED_ISSUER","issuerObj","value","analyticsEvent","AnalyticsInfoEvent","ANALYTICS_SELECTED_STR","onSubmitAnalytics","handleListToggle","isOpen","ANALYTICS_DISPLAYED_STR","debounceSearchAnalytics","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","current","ANALYTICS_INPUT_STR","ANALYTICS_LIST_SEARCH","useEffect","onChange","srPanelResp","isValidating","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","showValidation","highlightedItems","reduce","memo","item","includes","push","h","div","ref","className","Fragment","IssuerButtonGroup","selectedIssuerId","ContentSeparator","Field","label","error","classNameModifiers","Select","selectedValue","onListToggle","onInput","termsAndConditions","DisclaimerMessage","message","translationKey","urls","showPayButton","payButton","defaultProps"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import{payAmountLabel as r,secondaryAmountLabel as a}from"./utils.js";import s from"./components/SecondaryButtonLabel.js";const l=({amount:l,secondaryAmount:n,classNameModifiers:i=[],label:m,...c})=>{const{i18n:u}=o(),d=l&&{}.hasOwnProperty.call(l,"value")&&0===l.value,p=d?u.get("confirmPreauthorization"):r(u,l),f=!d&&!m&&l&&n&&Object.keys(n).length?a(u,n):null;return e(t,{...c,disabled:c.disabled||"loading"===c.status,classNameModifiers:[...i,"pay"],label:m||p},f&&e(s,{label:f}))};export{l as default,r as payAmountLabel};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import{payAmountLabel as r,secondaryAmountLabel as a}from"./utils.js";import s from"./components/SecondaryButtonLabel.js";const l=({amount:l,secondaryAmount:n,classNameModifiers:i=[],label:m,...c})=>{const{i18n:u}=o(),d=l&&{}.hasOwnProperty.call(l,"value")&&0===l.value,p=d?u.get("confirmPreauthorization"):r(u,l),f=l&&"number"==typeof l.value&&!!l.currency,b=n&&Object.keys(n).length>0,y=!d&&!m&&f&&b?a(u,n):null;return e(t,{...c,disabled:c.disabled||"loading"===c.status,classNameModifiers:[...i,"pay"],label:m||p},y&&e(s,{label:y}))};export{l as default,r as payAmountLabel};
 //# sourceMappingURL=PayButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { payAmountLabel, secondaryAmountLabel } from './utils';\nimport { PaymentAmountExtended } from '../../../types/global-types';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\n\nexport interface PayButtonProps extends ButtonProps {\n    /**\n     * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n     */\n    classNameModifiers?: string[];\n    label?: string;\n    amount: PaymentAmountExtended;\n    secondaryAmount?: PaymentAmountExtended;\n    status?: string;\n    disabled?: boolean;\n    icon?: string;\n    onClick?(): void;\n}\n\nconst PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, ...props }: PayButtonProps) => {\n    const { i18n } = useCoreContext();\n    const isZeroAuth = amount && {}.hasOwnProperty.call(amount, 'value') && amount.value === 0;\n    const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount);\n\n    /**\n     * Show the secondaryLabel if:\n     *  - it's not zero auth, and\n     *  - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n     *  - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n     *  - we have a secondaryAmount object with some properties\n     */\n    const secondaryLabel =\n        !isZeroAuth && !label && amount && secondaryAmount && Object.keys(secondaryAmount).length\n            ? secondaryAmountLabel(i18n, secondaryAmount)\n            : null;\n\n    return (\n        <Button\n            {...props}\n            disabled={props.disabled || props.status === 'loading'}\n            classNameModifiers={[...classNameModifiers, 'pay']}\n            label={label || defaultLabel}\n        >\n            {secondaryLabel && <SecondaryButtonLabel label={secondaryLabel} />}\n        </Button>\n    );\n};\n\nexport default PayButton;\nexport { payAmountLabel };\n"],"names":["PayButton","amount","secondaryAmount","classNameModifiers","label","props","i18n","useCoreContext","isZeroAuth","hasOwnProperty","call","value","defaultLabel","get","payAmountLabel","secondaryLabel","Object","keys","length","secondaryAmountLabel","h","Button","disabled","status","SecondaryButtonLabel"],"mappings":"4SAsBA,MAAMA,EAAY,EAAGC,SAAQC,kBAAiBC,qBAAqB,GAAIC,WAAUC,MAC7E,MAAMC,KAAEA,GAASC,IACXC,EAAaP,GAAU,CAAC,EAAEQ,eAAeC,KAAKT,EAAQ,UAA6B,IAAjBA,EAAOU,MACzEC,EAAeJ,EAAaF,EAAKO,IAAI,2BAA6BC,EAAeR,EAAML,GASvFc,GACDP,IAAeJ,GAASH,GAAUC,GAAmBc,OAAOC,KAAKf,GAAiBgB,OAC7EC,EAAqBb,EAAMJ,GAC3B,KAEV,OACIkB,EAACC,EAAAA,IACOhB,EACJiB,SAAUjB,EAAMiB,UAA6B,YAAjBjB,EAAMkB,OAClCpB,mBAAoB,IAAIA,EAAoB,OAC5CC,MAAOA,GAASQ,GAEfG,GAAkBK,EAACI,EAAAA,CAAqBpB,MAAOW"}
+{"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { payAmountLabel, secondaryAmountLabel } from './utils';\nimport { PaymentAmountExtended } from '../../../types/global-types';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\n\nexport interface PayButtonProps extends ButtonProps {\n    /**\n     * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n     */\n    classNameModifiers?: string[];\n    label?: string;\n    amount?: PaymentAmountExtended;\n    secondaryAmount?: PaymentAmountExtended;\n    status?: string;\n    disabled?: boolean;\n    icon?: string;\n    onClick?(): void;\n}\n\nconst PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, ...props }: PayButtonProps) => {\n    const { i18n } = useCoreContext();\n    const isZeroAuth = amount && {}.hasOwnProperty.call(amount, 'value') && amount.value === 0;\n    const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount);\n\n    /**\n     * Show the secondaryLabel if:\n     *  - it's not zero auth, and\n     *  - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n     *  - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n     *  - we have a secondaryAmount object with some properties\n     */\n    const hasValidAmount = amount && typeof amount.value === 'number' && !!amount.currency;\n    const hasSecondaryAmount = secondaryAmount && Object.keys(secondaryAmount).length > 0;\n\n    const secondaryLabel = !isZeroAuth && !label && hasValidAmount && hasSecondaryAmount ? secondaryAmountLabel(i18n, secondaryAmount) : null;\n\n    return (\n        <Button\n            {...props}\n            disabled={props.disabled || props.status === 'loading'}\n            classNameModifiers={[...classNameModifiers, 'pay']}\n            label={label || defaultLabel}\n        >\n            {secondaryLabel && <SecondaryButtonLabel label={secondaryLabel} />}\n        </Button>\n    );\n};\n\nexport default PayButton;\nexport { payAmountLabel };\n"],"names":["PayButton","amount","secondaryAmount","classNameModifiers","label","props","i18n","useCoreContext","isZeroAuth","hasOwnProperty","call","value","defaultLabel","get","payAmountLabel","hasValidAmount","currency","hasSecondaryAmount","Object","keys","length","secondaryLabel","secondaryAmountLabel","h","Button","disabled","status","SecondaryButtonLabel"],"mappings":"4SAsBA,MAAMA,EAAY,EAAGC,SAAQC,kBAAiBC,qBAAqB,GAAIC,WAAUC,MAC7E,MAAMC,KAAEA,GAASC,IACXC,EAAaP,GAAU,CAAC,EAAEQ,eAAeC,KAAKT,EAAQ,UAA6B,IAAjBA,EAAOU,MACzEC,EAAeJ,EAAaF,EAAKO,IAAI,2BAA6BC,EAAeR,EAAML,GASvFc,EAAiBd,GAAkC,iBAAjBA,EAAOU,SAAwBV,EAAOe,SACxEC,EAAqBf,GAAmBgB,OAAOC,KAAKjB,GAAiBkB,OAAS,EAE9EC,GAAkBb,IAAeJ,GAASW,GAAkBE,EAAqBK,EAAqBhB,EAAMJ,GAAmB,KAErI,OACIqB,EAACC,EAAAA,IACOnB,EACJoB,SAAUpB,EAAMoB,UAA6B,YAAjBpB,EAAMqB,OAClCvB,mBAAoB,IAAIA,EAAoB,OAC5CC,MAAOA,GAASQ,GAEfS,GAAkBE,EAACI,EAAAA,CAAqBvB,MAAOiB"}

package/dist/es/components/internal/PayButton/components/SecondaryButtonLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButtonLabel.js","sources":["../../../../../../src/components/internal/PayButton/components/SecondaryButtonLabel.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './SecondaryButtonLabel.scss';\n\nconst SecondaryButtonLabel = ({ label }) => {\n    return <span className={'checkout-secondary-button__text'}>{label}</span>;\n};\n\nexport default SecondaryButtonLabel;\n"],"names":["SecondaryButtonLabel","label","h","span","className"],"mappings":"2EAGA,MAAMA,EAAuB,EAAGC,WACrBC,EAACC,OAAAA,CAAKC,UAAW,mCAAoCH"}
+{"version":3,"file":"SecondaryButtonLabel.js","sources":["../../../../../../src/components/internal/PayButton/components/SecondaryButtonLabel.tsx"],"sourcesContent":["import { h } from 'preact';\n\nconst SecondaryButtonLabel = ({ label }) => {\n    return <span className={'checkout-secondary-button__text'}>{label}</span>;\n};\n\nexport default SecondaryButtonLabel;\n"],"names":["SecondaryButtonLabel","label","h","span","className"],"mappings":"2EAEA,MAAMA,EAAuB,EAAGC,WACrBC,EAACC,OAAAA,CAAKC,UAAW,mCAAoCH"}

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

@@ -1,2 +1,2 @@
-import{Component as t,createElement as e}from"../../../external/preact/dist/preact.js";import o from"../Countdown/index.js";import r from"../Button/Button.js";import s from"../Spinner/Spinner.js";import a from"../../../core/Services/payment-status.js";import{processResponse as i}from"../../../core/ProcessResponse/process-response.js";import{copyToClipboard as n}from"../../../utils/clipboard.js";import c from"../../../core/Errors/AdyenCheckoutError.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import d from"../ContentSeparator/ContentSeparator.js";import l from"../../../core/Context/useImage.js";import{useA11yReporter as m}from"../../../core/Errors/useA11yReporter.js";import u from"../../../utils/useAutoFocus.js";import{ANALYTICS_QR_CODE_DOWNLOAD as h,ANALYTICS_DOWNLOAD_STR as _}from"../../../core/Analytics/constants.js";import{PREFIX as y}from"../Icon/constants.js";import{AnalyticsInfoEvent as g}from"../../../core/Analytics/AnalyticsInfoEvent.js";function f(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class k extends t{componentDidMount(){this.statusInterval()}componentWillUnmount(){clearTimeout(this.timeoutId)}pollStatus(t){clearTimeout(this.timeoutId),this.timeoutId=setTimeout(async()=>{const t=performance.now();await this.checkStatus();const e=performance.now();this.statusInterval(Math.round(e-t))},t)}render({amount:t,url:a,brandLogo:i,brandName:c,countdownTime:f,type:k,onActionHandled:q},{expired:v,completed:b,loading:C}){const{i18n:w,loadingContext:N}=p(),I=l(),T=this.props.qrCodeData?`${N}utility/v1/barcode.png?type=qrCode&data=${this.props.qrCodeData}&clientKey=${this.props.clientKey}`:this.props.qrCodeImage,j=(t,o)=>{const r=w.get(o);return m(r),e("div",{className:"adyen-checkout__qr-loader adyen-checkout__qr-loader--result"},e("img",{className:"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result",src:I({imageFolder:"components/"})(t),alt:r}),e("div",{className:"adyen-checkout__qr-loader__subtitle"},r))};if(v)return j("error","error.subtitle.payment");if(b)return j("success","creditCard.success");if(C)return e("div",{className:"adyen-checkout__qr-loader"},i&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{alt:c,src:i,className:"adyen-checkout__qr-loader__brand-logo"})),e(s,null));const S=w.get(this.props.timeToPay).split("%@"),x=u(),E=this.props.classNameModifiers.map(t=>`adyen-checkout__qr-loader--${t}`);return e("div",{className:`adyen-checkout__qr-loader adyen-checkout__qr-loader--${k} ${E.join(" ")}`},i&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{src:i,alt:c,className:"adyen-checkout__qr-loader__brand-logo"})),t&&t.value&&t.currency&&e("div",{className:"adyen-checkout__qr-loader__payment_amount"},w.amount(t.value,t.currency)),a&&e("div",{className:"adyen-checkout__qr-loader__app-link"},this.props.redirectIntroduction&&e("div",{className:"adyen-checkout__qr-loader__subtitle"},w.get(this.props.redirectIntroduction)),e(r,{classNameModifiers:["qr-loader"],onClick:()=>this.redirectToApp(a),label:w.get(this.props.buttonLabel)}),e(d,null)),e("div",{ref:x,tabIndex:0,className:"adyen-checkout__qr-loader__subtitle"},"string"==typeof this.props.introduction?w.get(this.props.introduction):this.props.introduction?.()),e("img",{src:T,alt:w.get("wechatpay.scanqrcode"),onLoad:()=>{q?.({componentType:this.props.type,actionDescription:"qr-code-loaded"})}}),e("div",{className:"adyen-checkout__qr-loader__progress"},e("span",{className:"adyen-checkout__qr-loader__percentage",style:{width:`${this.state.percentage}%`}})),e("div",{className:"adyen-checkout__qr-loader__countdown"},S[0]," ",e(o,{minutesFromNow:f,onTick:this.onTick,onCompleted:this.onTimeUp})," ",S[1]),this.props.instructions&&e("div",{className:"adyen-checkout__qr-loader__instructions"},"string"==typeof this.props.instructions?w.get(this.props.instructions):this.props.instructions?.()),this.props.copyBtn&&e("div",{className:"adyen-checkout__qr-loader__actions"},e(r,{inline:!0,variant:"action",onClick:(t,{complete:e})=>{n(this.props.qrCodeData);const o=new g({type:_,target:h});this.props.onSubmitAnalytics(o),e()},icon:I({imageFolder:"components/"})(`${y}copy`),label:w.get("button.copy")})))}constructor(t){super(t),f(this,"timeoutId",void 0),f(this,"redirectToApp",t=>{window.location.assign(t)}),f(this,"statusInterval",(t=0)=>{if(this.state.expired||this.state.completed)return;this.setState(e=>({timePassed:e.timePassed+this.props.delay+t}));const e=this.state.timePassed>=this.props.throttleTime?this.props.throttledInterval:this.state.delay;this.pollStatus(e)}),f(this,"onTick",t=>{this.setState({percentage:t.percentage})}),f(this,"onTimeUp",()=>{this.setState({expired:!0}),clearTimeout(this.timeoutId),this.props.onError(new c("ERROR","Payment Expired"))}),f(this,"onComplete",t=>{clearTimeout(this.timeoutId),this.setState({completed:!0,loading:!1});const e={data:{details:{payload:t.props.payload},paymentData:this.props.paymentData}};this.props.onComplete(e,this)}),f(this,"onError",t=>{if(clearTimeout(this.timeoutId),this.setState({expired:!0,loading:!1}),t.props.payload){const e={data:{details:{payload:t.props.payload},paymentData:this.props.paymentData}};this.props.onComplete(e,this)}const e=new c("ERROR","error result with no payload in response");return this.props.onError(e)}),f(this,"checkStatus",()=>{const{paymentData:t,clientKey:e,loadingContext:o,throttledInterval:r}=this.props;return a(t,e,o,r).then(i).catch(t=>({type:"network-error",props:t})).then(t=>{switch(t.type){case"success":this.onComplete(t);break;case"error":this.onError(t);break;default:this.setState({loading:!1})}return t})}),this.state={buttonStatus:"default",completed:!1,delay:t.delay,expired:!1,loading:!0,percentage:100,timePassed:0}}}f(k,"defaultProps",{delay:2e3,countdownTime:15,onError:()=>{},onComplete:()=>{},throttleTime:6e4,classNameModifiers:[],throttledInterval:1e4,introduction:"wechatpay.scanqrcode",timeToPay:"wechatpay.timetopay",buttonLabel:"openApp"});export{k as default};
+import{Component as t,createElement as e}from"../../../external/preact/dist/preact.js";import o from"../Countdown/index.js";import r from"../Button/Button.js";import s from"../Spinner/Spinner.js";import a from"../../../core/Services/payment-status.js";import{processResponse as i}from"../../../core/ProcessResponse/process-response.js";import{copyToClipboard as n}from"../../../utils/clipboard.js";import c from"../../../core/Errors/AdyenCheckoutError.js";import{useCoreContext as p}from"../../../core/Context/CoreProvider.js";import d from"../ContentSeparator/ContentSeparator.js";import l from"../../../core/Context/useImage.js";import{useA11yReporter as m}from"../../../core/Errors/useA11yReporter.js";import u from"../../../utils/useAutoFocus.js";import{ANALYTICS_QR_CODE_DOWNLOAD as h,ANALYTICS_DOWNLOAD_STR as _}from"../../../core/Analytics/constants.js";import{PREFIX as y}from"../Icon/constants.js";import{AnalyticsInfoEvent as g}from"../../../core/Analytics/AnalyticsInfoEvent.js";function f(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class k extends t{componentDidMount(){this.statusInterval()}componentWillUnmount(){clearTimeout(this.timeoutId)}pollStatus(t){clearTimeout(this.timeoutId),this.timeoutId=setTimeout(async()=>{const t=performance.now();await this.checkStatus();const e=performance.now();this.statusInterval(Math.round(e-t))},t)}render({amount:t,showAmount:a,url:i,brandLogo:c,brandName:f,countdownTime:k,type:q,onActionHandled:v},{expired:b,completed:w,loading:C}){const{i18n:N,loadingContext:I}=p(),T=l(),j=this.props.qrCodeData?`${I}utility/v1/barcode.png?type=qrCode&data=${this.props.qrCodeData}&clientKey=${this.props.clientKey}`:this.props.qrCodeImage,S=(t,o)=>{const r=N.get(o);return m(r),e("div",{className:"adyen-checkout__qr-loader adyen-checkout__qr-loader--result"},e("img",{className:"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result",src:T({imageFolder:"components/"})(t),alt:r}),e("div",{className:"adyen-checkout__qr-loader__subtitle"},r))};if(b)return S("error","error.subtitle.payment");if(w)return S("success","creditCard.success");if(C)return e("div",{className:"adyen-checkout__qr-loader"},c&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{alt:f,src:c,className:"adyen-checkout__qr-loader__brand-logo"})),e(s,null));const x=N.get(this.props.timeToPay).split("%@"),A=u(),E=this.props.classNameModifiers.map(t=>`adyen-checkout__qr-loader--${t}`);return e("div",{className:`adyen-checkout__qr-loader adyen-checkout__qr-loader--${q} ${E.join(" ")}`},c&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{src:c,alt:f,className:"adyen-checkout__qr-loader__brand-logo"})),a&&t&&null!==t.value&&!!t.currency&&e("div",{className:"adyen-checkout__qr-loader__payment_amount"},N.amount(t.value,t.currency)),i&&e("div",{className:"adyen-checkout__qr-loader__app-link"},this.props.redirectIntroduction&&e("div",{className:"adyen-checkout__qr-loader__subtitle"},N.get(this.props.redirectIntroduction)),e(r,{classNameModifiers:["qr-loader"],onClick:()=>this.redirectToApp(i),label:N.get(this.props.buttonLabel)}),e(d,null)),e("div",{ref:A,tabIndex:0,className:"adyen-checkout__qr-loader__subtitle"},"string"==typeof this.props.introduction?N.get(this.props.introduction):this.props.introduction?.()),e("img",{src:j,alt:N.get("wechatpay.scanqrcode"),onLoad:()=>{v?.({componentType:this.props.type,actionDescription:"qr-code-loaded"})}}),e("div",{className:"adyen-checkout__qr-loader__progress"},e("span",{className:"adyen-checkout__qr-loader__percentage",style:{width:`${this.state.percentage}%`}})),e("div",{className:"adyen-checkout__qr-loader__countdown"},x[0]," ",e(o,{minutesFromNow:k,onTick:this.onTick,onCompleted:this.onTimeUp})," ",x[1]),this.props.instructions&&e("div",{className:"adyen-checkout__qr-loader__instructions"},"string"==typeof this.props.instructions?N.get(this.props.instructions):this.props.instructions?.()),this.props.copyBtn&&e("div",{className:"adyen-checkout__qr-loader__actions"},e(r,{inline:!0,variant:"action",onClick:(t,{complete:e})=>{n(this.props.qrCodeData);const o=new g({type:_,target:h});this.props.onSubmitAnalytics(o),e()},icon:T({imageFolder:"components/"})(`${y}copy`),label:N.get("button.copy")})))}constructor(t){super(t),f(this,"timeoutId",void 0),f(this,"redirectToApp",t=>{window.location.assign(t)}),f(this,"statusInterval",(t=0)=>{if(this.state.expired||this.state.completed)return;this.setState(e=>({timePassed:e.timePassed+this.props.delay+t}));const e=this.state.timePassed>=this.props.throttleTime?this.props.throttledInterval:this.state.delay;this.pollStatus(e)}),f(this,"onTick",t=>{this.setState({percentage:t.percentage})}),f(this,"onTimeUp",()=>{this.setState({expired:!0}),clearTimeout(this.timeoutId),this.props.onError(new c("ERROR","Payment Expired"))}),f(this,"onComplete",t=>{clearTimeout(this.timeoutId),this.setState({completed:!0,loading:!1});const e={data:{details:{payload:t.props.payload},paymentData:this.props.paymentData}};this.props.onComplete(e,this)}),f(this,"onError",t=>{if(clearTimeout(this.timeoutId),this.setState({expired:!0,loading:!1}),t.props.payload){const e={data:{details:{payload:t.props.payload},paymentData:this.props.paymentData}};this.props.onComplete(e,this)}const e=new c("ERROR","error result with no payload in response");return this.props.onError(e)}),f(this,"checkStatus",()=>{const{paymentData:t,clientKey:e,loadingContext:o,throttledInterval:r}=this.props;return a(t,e,o,r).then(i).catch(t=>({type:"network-error",props:t})).then(t=>{switch(t.type){case"success":this.onComplete(t);break;case"error":this.onError(t);break;default:this.setState({loading:!1})}return t})}),this.state={buttonStatus:"default",completed:!1,delay:t.delay,expired:!1,loading:!0,percentage:100,timePassed:0}}}f(k,"defaultProps",{delay:2e3,countdownTime:15,onError:()=>{},onComplete:()=>{},throttleTime:6e4,classNameModifiers:[],throttledInterval:1e4,introduction:"wechatpay.scanqrcode",timeToPay:"wechatpay.timetopay",buttonLabel:"openApp",showAmount:!0});export{k as default};
 //# sourceMappingURL=QRLoader.js.map