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

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) return <div {...props} ref={toggleButtonRef} />;\n\n    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: SelectButtonProps) {\n    const { active, selected, inputText, readonly, showList } = props;\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    const onFocusHandler = readonly ? null : props.onFocus;\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        onFocus={onFocusHandler}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={`listItem-${active.id}`}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","props","h","div","ref","button","id","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,OAAIF,EAAmBG,EAACC,MAAAA,IAAQF,EAAOG,IAAKJ,IAErCE,EAACG,SAAAA,CAAOC,GAAIL,EAAMK,GAAIC,mBAAkBN,EAAMO,gBAAiBC,KAAM,YAAcR,EAAOG,IAAKJ,GAC1G,CAEA,SAASU,EAAaT,GAClB,MAAMU,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAad,EAGtDe,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQjB,EAAMkB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOb,EAAMF,WAZ7BuB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBxB,EAAMyB,eAAeC,QAC3C1B,EAAMc,UACPd,EAAM2B,WAAWN,GAEdrB,EAAMyB,eAAeC,SAAS1B,EAAMyB,eAAeC,QAAQE,OAAK,EAMR5B,EAAM2B,WAEvEE,EAAiBhB,EAAW,KAAOb,EAAM8B,QAE/C,OACI7B,EAACJ,EAAAA,CACGkC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CnB,EAC9C,2CAA4CC,EAC5C,4CAA6Cd,EAAMiC,UACnD,0CAA2CjC,EAAMkC,QACjD,6CAA8CvB,EAASwB,WAE3DA,SAAUnC,EAAMmC,SAChBrC,WAAYE,EAAMF,WAClBsC,QAAShB,EACTiB,UAAYxB,EAAmC,KAAxBb,EAAMsC,gBAC7BvC,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJG,EAACsC,EAAAA,MACKzB,GAAYH,EAAS6B,MAAQvC,EAACwC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAK/B,EAAS6B,KAAMG,IAAKhC,EAASM,OACzHhB,EAAC2C,QAAAA,CACGC,MAAO1B,EACP2B,oBAAkB,OAClBC,gBAAe/C,EAAMgD,aACrBC,gBAAenC,EACfoC,YAAWlD,EAAMgD,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,QAASpD,EAAMoD,QACftB,QAASD,EACT1B,IAAKH,EAAMyB,eACX4B,KAAK,WACLC,wBAAuB,YAAY5C,EAAOL,KAC1CG,KAAK,OACL+C,SAAUvD,EAAMa,SAChBR,GAAIL,EAAMK,GACVC,mBAAkBN,EAAMO,mBAE1BO,GAAYH,EAAS6C,eACnBvD,EAACwD,OAAAA,CAAK1B,UAAU,oDAAoDpB,EAAS6C,gBA3BrFvD,EAACsC,OACI5B,EAAS6B,MAAQvC,EAACwC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAK/B,EAAS6B,KAAMG,IAAKhC,EAASM,OAC5GhB,EAACwD,OAAAA,CAAK1B,UAAU,0CAA0ChB,GACzDJ,EAAS6C,eAAiBvD,EAACwD,OAAAA,CAAK1B,UAAU,oDAAoDpB,EAAS6C,gBA8B5H"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) return <div {...props} ref={toggleButtonRef} />;\n\n    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList } = props;\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    const onFocusHandler = readonly ? null : props.onFocus;\n\n    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        onFocus={onFocusHandler}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","props","h","div","ref","button","id","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,OAAIF,EAAmBG,EAACC,MAAAA,IAAQF,EAAOG,IAAKJ,IAErCE,EAACG,SAAAA,CAAOC,GAAIL,EAAMK,GAAIC,mBAAkBN,EAAMO,gBAAiBC,KAAM,YAAcR,EAAOG,IAAKJ,GAC1G,CAEA,SAASU,EAAaT,GAClB,MAAMU,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAad,EAGtDe,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQjB,EAAMkB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOb,EAAMF,WAZ7BuB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBxB,EAAMyB,eAAeC,QAC3C1B,EAAMc,UACPd,EAAM2B,WAAWN,GAEdrB,EAAMyB,eAAeC,SAAS1B,EAAMyB,eAAeC,QAAQE,OAAK,EAMR5B,EAAM2B,WAEvEE,EAAiBhB,EAAW,KAAOb,EAAM8B,QAGzCC,EAAwBrB,EAAOL,GAAK,YAAYK,EAAOL,KAAO,GAEpE,OACIJ,EAACJ,EAAAA,CACGmC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CpB,EAC9C,2CAA4CC,EAC5C,4CAA6Cd,EAAMkC,UACnD,0CAA2ClC,EAAMmC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUpC,EAAMoC,SAChBtC,WAAYE,EAAMF,WAClBuC,QAASjB,EACTkB,UAAYzB,EAAmC,KAAxBb,EAAMuC,gBAC7BxC,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJG,EAACuC,EAAAA,MACK1B,GAAYH,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OACzHhB,EAAC4C,QAAAA,CACGC,MAAO3B,EACP4B,oBAAkB,OAClBC,gBAAehD,EAAMiD,aACrBC,gBAAepC,EACfqC,YAAWnD,EAAMiD,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,QAASrD,EAAMqD,QACfvB,QAASD,EACT1B,IAAKH,EAAMyB,eACX6B,KAAK,WACLC,wBAAuBxB,EACvBvB,KAAK,OACLgD,SAAUxD,EAAMa,SAChBR,GAAIL,EAAMK,GACVC,mBAAkBN,EAAMO,mBAE1BO,GAAYH,EAAS8C,eACnBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA3BrFxD,EAACuC,OACI7B,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OAC5GhB,EAACyD,OAAAA,CAAK1B,UAAU,0CAA0CjB,GACzDJ,EAAS8C,eAAiBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA8B5H"}

package/dist/es/components/internal/FormFields/Select/components/SelectList.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./SelectListItem.js";import n from"../../../../../core/Context/useCoreContext.js";function s({selected:s,active:i,filteredItems:c,showList:d,...r}){const{i18n:l}=n();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":d}),id:r.selectListId,ref:r.selectListRef,role:"listbox"},c.length?c.map((t=>e(o,{active:t.id===i.id,item:t,key:t.id,onSelect:r.onSelect,onHover:r.onHover,selected:t.id===s.id}))):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{s as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./SelectListItem.js";import{useCoreContext as n}from"../../../../../core/Context/CoreProvider.js";function s({selected:s,active:i,filteredItems:r,showList:c,...d}){const{i18n:l}=n();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":c}),id:d.selectListId,ref:d.selectListRef,role:"listbox"},r.length?r.map((t=>e(o,{active:t.id===i.id,item:t,key:t.id,onSelect:d.onSelect,onHover:d.onHover,selected:t.id===s.id}))):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{s as default};
 //# sourceMappingURL=SelectList.js.map

package/dist/es/components/internal/FormFields/Select/components/SelectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport useCoreContext from '../../../../../core/Context/useCoreContext';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n    const { i18n } = useCoreContext();\n\n    return (\n        <ul\n            className={cx({\n                'adyen-checkout__dropdown__list': true,\n                'adyen-checkout__dropdown__list--active': showList\n            })}\n            id={props.selectListId}\n            ref={props.selectListRef}\n            role=\"listbox\"\n        >\n            {filteredItems.length ? (\n                filteredItems.map(item => (\n                    <SelectListItem\n                        active={item.id === active.id}\n                        item={item}\n                        key={item.id}\n                        onSelect={props.onSelect}\n                        onHover={props.onHover}\n                        selected={item.id === selected.id}\n                    />\n                ))\n            ) : (\n                <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n                    {i18n.get('select.noOptionsFound')}\n                </div>\n            )}\n        </ul>\n    );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"yOAMA,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,KAAIC,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,OAIvCJ,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}
+{"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n    const { i18n } = useCoreContext();\n\n    return (\n        <ul\n            className={cx({\n                'adyen-checkout__dropdown__list': true,\n                'adyen-checkout__dropdown__list--active': showList\n            })}\n            id={props.selectListId}\n            ref={props.selectListRef}\n            role=\"listbox\"\n        >\n            {filteredItems.length ? (\n                filteredItems.map(item => (\n                    <SelectListItem\n                        active={item.id === active.id}\n                        item={item}\n                        key={item.id}\n                        onSelect={props.onSelect}\n                        onHover={props.onHover}\n                        selected={item.id === selected.id}\n                    />\n                ))\n            ) : (\n                <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n                    {i18n.get('select.noOptionsFound')}\n                </div>\n            )}\n        </ul>\n    );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"yPAMA,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,KAAIC,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,OAIvCJ,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}

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

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import e from"../../../core/Context/useCoreContext.js";const r=()=>{const{i18n:r}=e();return t("p",{className:"adyen-checkout-form-instruction"},r.get("form.instruction"))};export{r as default};
+import{createElement as t}from"../../../external/preact/dist/preact.js";import{useCoreContext as e}from"../../../core/Context/CoreProvider.js";const r=()=>{const{i18n:r}=e();return t("p",{className:"adyen-checkout-form-instruction"},r.get("form.instruction"))};export{r as default};
 //# sourceMappingURL=FormInstruction.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport useCoreContext from '../../../core/Context/useCoreContext';\n\nconst FormInstruction = () => {\n    const { i18n } = useCoreContext();\n    return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+HAIA,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI,oBAAA"}
+{"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\n\nconst FormInstruction = () => {\n    const { i18n } = useCoreContext();\n    return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+IAIA,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI,oBAAA"}

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

@@ -1,2 +1,2 @@
-import{Component as a,createElement as e}from"../../../external/preact/dist/preact.js";import t from"../../../core/Context/useCoreContext.js";import r from"../FormFields/Field/Field.js";import{isValidHolder as s,checkIbanStatus as i}from"./validate.js";import{electronicFormat as n,formatIban as o,getCountryCode as l,getNextCursorPosition as d}from"./utils.js";import h from"../FormFields/Fieldset/Fieldset.js";import u from"../FormFields/InputText.js";const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},b={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class c extends a{ibanNumber;constructor(a){if(super(a),this.state={status:"ready",data:{ownerName:a?.data?.ownerName||"",ibanNumber:a?.data?.ibanNumber||"",countryCode:a?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const a=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(a)}if(this.state.data.ibanNumber||this.state.data.ownerName){const a=this.props.holderName?s(this.state.data.ownerName):"",e=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&a,t={data:this.state.data,isValid:e};this.props.onChange(t)}}static defaultProps={onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null};setStatus(a){this.setState({status:a})}onChange(){const a=!this.props.holderName||s(this.state.data.ownerName),e="valid"===i(this.state.data.ibanNumber).status&&a,t={data:this.state.data,isValid:e,errors:this.state.errors};this.props.onChange(t)}setData=(a,e,t)=>{this.setState((t=>({data:{...t.data,[a]:e}})),t)};setError=(a,e,t)=>{this.setState((t=>({errors:{...t.errors,[a]:e}})),t)};setValid=(a,e,t)=>{this.setState((t=>({valid:{...t.valid,[a]:e}})),t)};handleHolderInput=a=>{this.setState((e=>({data:{...e.data,ownerName:a}})),(()=>{const a=s(this.state.data.ownerName),e=null==a||a?null:m;this.setError("holder",e,this.onChange)}))};handleIbanInput=a=>{const e=a.target.value,t=n(e),r=o(t),s=i(r).status,h=l(t),u=a.target.selectionStart,m=this.state.data.ibanNumber,c=d(u,r,m);this.setState((a=>({data:{...a.data,ibanNumber:r,countryCode:h},errors:{...a.errors,iban:"invalid"===s?b:null},valid:{...a.valid,iban:"valid"===s}})),(()=>{a.target.setSelectionRange(c,c),this.onChange()}))};handleIbanBlur=a=>{const e=a.target.value;if(e.length>0){const a=i(e).status;this.setError("iban","valid"!==a?b:null,this.onChange)}else this.setError("iban",null,this.onChange)};showValidation(){const a=i(this.state.data.ibanNumber).status,e=s(this.state.data.ownerName);this.setError("iban","valid"!==a?b:null);const t=e?null:m;this.setError("holder",t,this.onChange)}render({placeholders:a},{data:s,errors:i,valid:n}){const{i18n:o}=t();return e(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&e(r,{className:"adyen-checkout__field--owner-name",label:o.get("sepa.ownerName"),filled:s.ownerName&&s.ownerName.length,errorMessage:!!i.holder&&o.get(i.holder.error),dir:"ltr",i18n:o,name:"ownerName"},e(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:a?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:a=>this.handleHolderInput(a.target.value),onBlur:a=>this.handleHolderInput(a.target.value)})),e(r,{className:"adyen-checkout__field--iban-number",label:o.get("sepa.ibanNumber"),errorMessage:!!i.iban&&o.get(i.iban.error),filled:s.ibanNumber&&s.ibanNumber.length,isValid:n.iban,onBlur:this.handleIbanBlur,dir:"ltr",i18n:o,name:"ibanNumber"},e(u,{setRef:a=>{this.ibanNumber=a},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:a?.ibanNumber,value:s.ibanNumber,onInput:this.handleIbanInput,"aria-invalid":!!this.state.errors.iban,"aria-label":o.get("sepa.ibanNumber"),autocorrect:"off",spellcheck:!1})),this.props.showPayButton&&this.props.payButton({status:this.state.status}))}}export{c as default};
+import{Component as a,createElement as e}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import r from"../FormFields/Field/Field.js";import{isValidHolder as s,checkIbanStatus as i}from"./validate.js";import{electronicFormat as n,formatIban as o,getCountryCode as l,getNextCursorPosition as d}from"./utils.js";import h from"../FormFields/Fieldset/Fieldset.js";import u from"../FormFields/InputText.js";const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},b={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class c extends a{ibanNumber;constructor(a){if(super(a),this.state={status:"ready",data:{ownerName:a?.data?.ownerName||"",ibanNumber:a?.data?.ibanNumber||"",countryCode:a?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const a=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(a)}if(this.state.data.ibanNumber||this.state.data.ownerName){const a=this.props.holderName?s(this.state.data.ownerName):"",e=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&a,t={data:this.state.data,isValid:e};this.props.onChange(t)}}static defaultProps={onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null};setStatus(a){this.setState({status:a})}onChange(){const a=!this.props.holderName||s(this.state.data.ownerName),e="valid"===i(this.state.data.ibanNumber).status&&a,t={data:this.state.data,isValid:e,errors:this.state.errors};this.props.onChange(t)}setData=(a,e,t)=>{this.setState((t=>({data:{...t.data,[a]:e}})),t)};setError=(a,e,t)=>{this.setState((t=>({errors:{...t.errors,[a]:e}})),t)};setValid=(a,e,t)=>{this.setState((t=>({valid:{...t.valid,[a]:e}})),t)};handleHolderInput=a=>{this.setState((e=>({data:{...e.data,ownerName:a}})),(()=>{const a=s(this.state.data.ownerName),e=null==a||a?null:m;this.setError("holder",e,this.onChange)}))};handleIbanInput=a=>{const e=a.target.value,t=n(e),r=o(t),s=i(r).status,h=l(t),u=a.target.selectionStart,m=this.state.data.ibanNumber,c=d(u,r,m);this.setState((a=>({data:{...a.data,ibanNumber:r,countryCode:h},errors:{...a.errors,iban:"invalid"===s?b:null},valid:{...a.valid,iban:"valid"===s}})),(()=>{a.target.setSelectionRange(c,c),this.onChange()}))};handleIbanBlur=a=>{const e=a.target.value;if(e.length>0){const a=i(e).status;this.setError("iban","valid"!==a?b:null,this.onChange)}else this.setError("iban",null,this.onChange)};showValidation(){const a=i(this.state.data.ibanNumber).status,e=s(this.state.data.ownerName);this.setError("iban","valid"!==a?b:null);const t=e?null:m;this.setError("holder",t,this.onChange)}render({placeholders:a},{data:s,errors:i,valid:n}){const{i18n:o}=t();return e(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&e(r,{className:"adyen-checkout__field--owner-name",label:o.get("sepa.ownerName"),filled:s.ownerName&&s.ownerName.length,errorMessage:!!i.holder&&o.get(i.holder.error),dir:"ltr",i18n:o,name:"ownerName"},e(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:a?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:a=>this.handleHolderInput(a.target.value),onBlur:a=>this.handleHolderInput(a.target.value)})),e(r,{className:"adyen-checkout__field--iban-number",label:o.get("sepa.ibanNumber"),errorMessage:!!i.iban&&o.get(i.iban.error),filled:s.ibanNumber&&s.ibanNumber.length,isValid:n.iban,onBlur:this.handleIbanBlur,dir:"ltr",i18n:o,name:"ibanNumber"},e(u,{setRef:a=>{this.ibanNumber=a},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:a?.ibanNumber,value:s.ibanNumber,onInput:this.handleIbanInput,"aria-invalid":!!this.state.errors.iban,"aria-label":o.get("sepa.ibanNumber"),autocorrect:"off",spellcheck:!1})),this.props.showPayButton&&this.props.payButton({status:this.state.status}))}}export{c as default};
 //# sourceMappingURL=IbanInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport useCoreContext from '../../../core/Context/useCoreContext';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n    holderName?: boolean;\n    placeholders?: Omit<IbanData, 'countryCode'>;\n    countryCode?: string;\n    showPayButton?: any;\n    payButton?: any;\n    onChange: (data) => void;\n    label: string;\n    data: IbanData;\n}\n\ninterface IbanData {\n    ownerName?: string;\n    ibanNumber?: string;\n    countryCode?: string;\n}\n\ninterface IbanInputState {\n    data: any;\n    errors: any;\n    valid: any;\n    status: string;\n    isValid: boolean;\n    cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n    error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'sepaDirectDebit.ibanField.invalid',\n    error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<IbanInputProps, IbanInputState> {\n    private ibanNumber: HTMLInputElement;\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            status: 'ready',\n            data: {\n                ownerName: props?.data?.ownerName || '',\n                ibanNumber: props?.data?.ibanNumber || '',\n                countryCode: props?.data?.countryCode || ''\n            },\n            isValid: false,\n            cursor: 0,\n            errors: {},\n            valid: {}\n        };\n\n        if (this.state.data['ibanNumber']) {\n            const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n            this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        }\n\n        if (this.state.data['ibanNumber'] || this.state.data['ownerName']) {\n            const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n            const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n            const isValid = ibanValid && holderNameValid;\n            const data = { data: this.state.data, isValid };\n\n            this.props.onChange(data);\n        }\n    }\n\n    public static defaultProps = {\n        onChange: () => {},\n        countryCode: null,\n        holderName: true,\n        placeholders: {},\n        label: null\n    };\n\n    setStatus(status) {\n        this.setState({ status });\n    }\n\n    onChange() {\n        const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n        const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n        const isValid = ibanValid && holderNameValid;\n        const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n        this.props.onChange(data);\n    }\n\n    public setData = (key, value, cb?) => {\n        this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n    };\n\n    public setError = (key, value, cb?) => {\n        this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n    };\n\n    public setValid = (key, value, cb?) => {\n        this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n    };\n\n    public handleHolderInput = holder => {\n        this.setState(\n            prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n            () => {\n                const holderStatus = isValidHolder(this.state.data['ownerName']);\n                const holderErr =\n                    holderStatus != null && !holderStatus // *don't* consider null, i.e. a value that has just been deleted, to be in error\n                        ? ibanHolderNameErrorObj\n                        : null;\n\n                this.setError('holder', holderErr, this.onChange);\n            }\n        );\n    };\n\n    public handleIbanInput = e => {\n        const inputValue = e.target.value;\n        const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n        const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        const validationStatus = checkIbanStatus(iban).status;\n\n        const countryCode = getCountryCode(electronicFormatIban);\n\n        // calculate cursor's new position\n        const cursor = e.target.selectionStart;\n        const previousIban = this.state.data['ibanNumber'];\n        const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n        this.setState(\n            prevState => ({\n                data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n                errors: {\n                    ...prevState.errors,\n                    iban: validationStatus === 'invalid' ? ibanErrorObj : null\n                },\n                valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n            }),\n            () => {\n                e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n                this.onChange();\n            }\n        );\n    };\n\n    public handleIbanBlur = e => {\n        const currentIban = e.target.value;\n\n        if (currentIban.length > 0) {\n            const validationStatus = checkIbanStatus(currentIban).status;\n            this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n        } else {\n            // Empty field is not in error\n            this.setError('iban', null, this.onChange);\n        }\n    };\n\n    showValidation() {\n        const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n        const holderStatus = isValidHolder(this.state.data['ownerName']);\n        this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n        const holderErr = !holderStatus // *do* consider null, i.e. an empty field, to be in error\n            ? ibanHolderNameErrorObj\n            : null;\n\n        this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n    }\n\n    render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n        const { i18n } = useCoreContext();\n        return (\n            <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n                {this.props.holderName && (\n                    <Field\n                        className={'adyen-checkout__field--owner-name'}\n                        label={i18n.get('sepa.ownerName')}\n                        filled={data['ownerName'] && data['ownerName'].length}\n                        errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n                        dir={'ltr'}\n                        i18n={i18n}\n                        name={'ownerName'}\n                    >\n                        <InputText\n                            name={'ownerName'}\n                            className={'adyen-checkout__iban-input__owner-name'}\n                            placeholder={placeholders?.ownerName}\n                            value={data['ownerName']}\n                            aria-invalid={!!this.state.errors.holder}\n                            aria-label={i18n.get('sepa.ownerName')}\n                            onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                            onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                        />\n                    </Field>\n                )}\n\n                <Field\n                    className={'adyen-checkout__field--iban-number'}\n                    label={i18n.get('sepa.ibanNumber')}\n                    errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n                    filled={data['ibanNumber'] && data['ibanNumber'].length}\n                    isValid={valid.iban}\n                    onBlur={this.handleIbanBlur}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'ibanNumber'}\n                >\n                    <InputText\n                        setRef={ref => {\n                            this.ibanNumber = ref;\n                        }}\n                        name={'ibanNumber'}\n                        className={'adyen-checkout__iban-input__iban-number'}\n                        classNameModifiers={['large']}\n                        placeholder={placeholders?.ibanNumber}\n                        value={data['ibanNumber']}\n                        onInput={this.handleIbanInput}\n                        aria-invalid={!!this.state.errors.iban}\n                        aria-label={i18n.get('sepa.ibanNumber')}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                    />\n                </Field>\n\n                {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n            </Fieldset>\n        );\n    }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","ibanNumber","constructor","props","super","this","state","status","data","ownerName","countryCode","cursor","errors","valid","electronicFormatIban","electronicFormat","formatIban","holderNameValid","holderName","isValidHolder","checkIbanStatus","onChange","static","placeholders","label","setStatus","setState","setData","key","value","cb","prevState","setError","setValid","handleHolderInput","holder","holderStatus","holderErr","handleIbanInput","e","inputValue","target","iban","validationStatus","getCountryCode","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","handleIbanBlur","currentIban","length","showValidation","render","i18n","useCoreContext","h","Fieldset","classNameModifiers","Field","className","get","filled","dir","name","InputText","placeholder","aria-invalid","aria-label","onInput","onBlur","setRef","ref","autocorrect","spellcheck","showPayButton","payButton"],"mappings":"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"}
+{"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n    holderName?: boolean;\n    placeholders?: Omit<IbanData, 'countryCode'>;\n    countryCode?: string;\n    showPayButton?: boolean;\n    payButton?: any;\n    onChange: (data) => void;\n    label: string;\n    data: IbanData;\n}\n\ninterface IbanData {\n    ownerName?: string;\n    ibanNumber?: string;\n    countryCode?: string;\n}\n\ninterface IbanInputState {\n    data: any;\n    errors: any;\n    valid: any;\n    status: string;\n    isValid: boolean;\n    cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n    error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'sepaDirectDebit.ibanField.invalid',\n    error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<IbanInputProps, IbanInputState> {\n    private ibanNumber: HTMLInputElement;\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            status: 'ready',\n            data: {\n                ownerName: props?.data?.ownerName || '',\n                ibanNumber: props?.data?.ibanNumber || '',\n                countryCode: props?.data?.countryCode || ''\n            },\n            isValid: false,\n            cursor: 0,\n            errors: {},\n            valid: {}\n        };\n\n        if (this.state.data['ibanNumber']) {\n            const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n            this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        }\n\n        if (this.state.data['ibanNumber'] || this.state.data['ownerName']) {\n            const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n            const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n            const isValid = ibanValid && holderNameValid;\n            const data = { data: this.state.data, isValid };\n\n            this.props.onChange(data);\n        }\n    }\n\n    public static defaultProps = {\n        onChange: () => {},\n        countryCode: null,\n        holderName: true,\n        placeholders: {},\n        label: null\n    };\n\n    setStatus(status) {\n        this.setState({ status });\n    }\n\n    onChange() {\n        const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n        const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n        const isValid = ibanValid && holderNameValid;\n        const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n        this.props.onChange(data);\n    }\n\n    public setData = (key, value, cb?) => {\n        this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n    };\n\n    public setError = (key, value, cb?) => {\n        this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n    };\n\n    public setValid = (key, value, cb?) => {\n        this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n    };\n\n    public handleHolderInput = holder => {\n        this.setState(\n            prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n            () => {\n                const holderStatus = isValidHolder(this.state.data['ownerName']);\n                const holderErr =\n                    holderStatus != null && !holderStatus // *don't* consider null, i.e. a value that has just been deleted, to be in error\n                        ? ibanHolderNameErrorObj\n                        : null;\n\n                this.setError('holder', holderErr, this.onChange);\n            }\n        );\n    };\n\n    public handleIbanInput = e => {\n        const inputValue = e.target.value;\n        const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n        const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        const validationStatus = checkIbanStatus(iban).status;\n\n        const countryCode = getCountryCode(electronicFormatIban);\n\n        // calculate cursor's new position\n        const cursor = e.target.selectionStart;\n        const previousIban = this.state.data['ibanNumber'];\n        const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n        this.setState(\n            prevState => ({\n                data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n                errors: {\n                    ...prevState.errors,\n                    iban: validationStatus === 'invalid' ? ibanErrorObj : null\n                },\n                valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n            }),\n            () => {\n                e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n                this.onChange();\n            }\n        );\n    };\n\n    public handleIbanBlur = e => {\n        const currentIban = e.target.value;\n\n        if (currentIban.length > 0) {\n            const validationStatus = checkIbanStatus(currentIban).status;\n            this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n        } else {\n            // Empty field is not in error\n            this.setError('iban', null, this.onChange);\n        }\n    };\n\n    showValidation() {\n        const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n        const holderStatus = isValidHolder(this.state.data['ownerName']);\n        this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n        const holderErr = !holderStatus // *do* consider null, i.e. an empty field, to be in error\n            ? ibanHolderNameErrorObj\n            : null;\n\n        this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n    }\n\n    render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n        const { i18n } = useCoreContext();\n        return (\n            <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n                {this.props.holderName && (\n                    <Field\n                        className={'adyen-checkout__field--owner-name'}\n                        label={i18n.get('sepa.ownerName')}\n                        filled={data['ownerName'] && data['ownerName'].length}\n                        errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n                        dir={'ltr'}\n                        i18n={i18n}\n                        name={'ownerName'}\n                    >\n                        <InputText\n                            name={'ownerName'}\n                            className={'adyen-checkout__iban-input__owner-name'}\n                            placeholder={placeholders?.ownerName}\n                            value={data['ownerName']}\n                            aria-invalid={!!this.state.errors.holder}\n                            aria-label={i18n.get('sepa.ownerName')}\n                            onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                            onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                        />\n                    </Field>\n                )}\n\n                <Field\n                    className={'adyen-checkout__field--iban-number'}\n                    label={i18n.get('sepa.ibanNumber')}\n                    errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n                    filled={data['ibanNumber'] && data['ibanNumber'].length}\n                    isValid={valid.iban}\n                    onBlur={this.handleIbanBlur}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'ibanNumber'}\n                >\n                    <InputText\n                        setRef={ref => {\n                            this.ibanNumber = ref;\n                        }}\n                        name={'ibanNumber'}\n                        className={'adyen-checkout__iban-input__iban-number'}\n                        classNameModifiers={['large']}\n                        placeholder={placeholders?.ibanNumber}\n                        value={data['ibanNumber']}\n                        onInput={this.handleIbanInput}\n                        aria-invalid={!!this.state.errors.iban}\n                        aria-label={i18n.get('sepa.ibanNumber')}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                    />\n                </Field>\n\n                {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n            </Fieldset>\n        );\n    }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","ibanNumber","constructor","props","super","this","state","status","data","ownerName","countryCode","cursor","errors","valid","electronicFormatIban","electronicFormat","formatIban","holderNameValid","holderName","isValidHolder","checkIbanStatus","onChange","static","placeholders","label","setStatus","setState","setData","key","value","cb","prevState","setError","setValid","handleHolderInput","holder","holderStatus","holderErr","handleIbanInput","e","inputValue","target","iban","validationStatus","getCountryCode","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","handleIbanBlur","currentIban","length","showValidation","render","i18n","useCoreContext","h","Fieldset","classNameModifiers","Field","className","get","filled","dir","name","InputText","placeholder","aria-invalid","aria-label","onInput","onBlur","setRef","ref","autocorrect","spellcheck","showPayButton","payButton"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{useState as e,useRef as a,useEffect as s}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../external/classnames/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";function o(o){const{backgroundUrl:c="",className:n="",classNameModifiers:l=[],src:m="",alt:d="",showOnError:i=!1}=o,[u,f]=e(!1),p=a(null),g=()=>{f(!0)},k=r([n],"adyen-checkout__image",{"adyen-checkout__image--loaded":u},...l.map((e=>`adyen-checkout__image--${e}`)));return s((()=>{const e=c?new Image:p.current;e.src=c||m,e.onload=g,f(!!e.complete)}),[]),c?t("div",{style:{backgroundUrl:c},...o,className:k}):t("img",{...o,alt:d,ref:p,className:k,onError:()=>{f(i)}})}export{o as default};
+import{useState as e,useRef as a,useEffect as s}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../external/classnames/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";function o(o){const{backgroundUrl:c="",className:n="",classNameModifiers:l=[],src:m="",alt:d="",showOnError:i=!1}=o,[u,f]=e(!1),p=a(null),g=()=>{f(!0)},k=r([n],"adyen-checkout__image",{"adyen-checkout__image--loaded":u},...l.map((e=>`adyen-checkout__image--${e}`)));return s((()=>{const e=c?new Image:p.current;e.src=c||m,e.onload=g,f(!!e.complete)}),[]),c?t("div",{"data-testid":"background",style:{backgroundUrl:c},...o,className:k}):t("img",{...o,alt:d,ref:p,className:k,onError:()=>{f(i)}})}export{o as default};
 //# sourceMappingURL=Img.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Img.js","sources":["../../../../../src/components/internal/Img/Img.tsx"],"sourcesContent":["import { JSX } from 'preact';\nimport { useRef, useState, useEffect } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Img.scss';\nimport { h } from 'preact';\nimport { ImgProps } from './types';\n\nexport default function Img(props: ImgProps) {\n    const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;\n    const [loaded, setLoaded] = useState(false);\n    const imageRef = useRef(null);\n\n    const handleLoad = () => {\n        setLoaded(true);\n    };\n\n    const handleError = () => {\n        setLoaded(showOnError);\n    };\n\n    const classNames = cx(\n        [className],\n        'adyen-checkout__image',\n        { 'adyen-checkout__image--loaded': loaded },\n        ...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)\n    );\n\n    useEffect(() => {\n        const image = backgroundUrl ? new Image() : imageRef.current;\n        image.src = backgroundUrl || src;\n        image.onload = handleLoad;\n        setLoaded(!!image.complete);\n    }, []);\n\n    if (backgroundUrl) {\n        return <div style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;\n    }\n\n    return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;\n}\n"],"names":["Img","props","backgroundUrl","className","classNameModifiers","src","alt","showOnError","loaded","setLoaded","useState","imageRef","useRef","handleLoad","classNames","cx","map","modifier","useEffect","image","Image","current","onload","complete","h","div","style","img","ref","onError"],"mappings":"gOAOe,SAASA,EAAIC,GACxB,MAAMC,cAAEA,EAAgB,GAAEC,UAAEA,EAAY,GAAEC,mBAAEA,EAAqB,GAAEC,IAAEA,EAAM,GAAEC,IAAEA,EAAM,GAAEC,YAAEA,GAAc,GAAUN,GAC1GO,EAAQC,GAAaC,GAAS,GAC/BC,EAAWC,EAAO,MAElBC,EAAa,KACfJ,GAAU,EAAA,EAORK,EAAaC,EACf,CAACZ,GACD,wBACA,CAAE,gCAAiCK,MAChCJ,EAAmBY,KAAIC,GAAY,0BAA0BA,OAUpE,OAPAC,GAAU,KACN,MAAMC,EAAQjB,EAAgB,IAAIkB,MAAUT,EAASU,QACrDF,EAAMd,IAAMH,GAAiBG,EAC7Bc,EAAMG,OAAST,EACfJ,IAAYU,EAAMI,SAAQ,GAC3B,IAECrB,EACOsB,EAACC,MAAAA,CAAIC,MAAO,CAAExB,oBAA0CD,EAAOE,UAAWW,IAG9EU,EAACG,MAAAA,IAAQ1B,EAAOK,IAAKA,EAAKsB,IAAKjB,EAAUR,UAAWW,EAAYe,QAtBnD,KAChBpB,EAAUF,EAAAA,GAsBlB"}
+{"version":3,"file":"Img.js","sources":["../../../../../src/components/internal/Img/Img.tsx"],"sourcesContent":["import { JSX } from 'preact';\nimport { useRef, useState, useEffect } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Img.scss';\nimport { h } from 'preact';\nimport { ImgProps } from './types';\n\nexport default function Img(props: ImgProps) {\n    const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;\n    const [loaded, setLoaded] = useState(false);\n    const imageRef = useRef(null);\n\n    const handleLoad = () => {\n        setLoaded(true);\n    };\n\n    const handleError = () => {\n        setLoaded(showOnError);\n    };\n\n    const classNames = cx(\n        [className],\n        'adyen-checkout__image',\n        { 'adyen-checkout__image--loaded': loaded },\n        ...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)\n    );\n\n    useEffect(() => {\n        const image = backgroundUrl ? new Image() : imageRef.current;\n        image.src = backgroundUrl || src;\n        image.onload = handleLoad;\n        setLoaded(!!image.complete);\n    }, []);\n\n    if (backgroundUrl) {\n        return <div data-testid=\"background\" style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;\n    }\n\n    return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;\n}\n"],"names":["Img","props","backgroundUrl","className","classNameModifiers","src","alt","showOnError","loaded","setLoaded","useState","imageRef","useRef","handleLoad","classNames","cx","map","modifier","useEffect","image","Image","current","onload","complete","h","div","data-testid","style","img","ref","onError"],"mappings":"gOAOe,SAASA,EAAIC,GACxB,MAAMC,cAAEA,EAAgB,GAAEC,UAAEA,EAAY,GAAEC,mBAAEA,EAAqB,GAAEC,IAAEA,EAAM,GAAEC,IAAEA,EAAM,GAAEC,YAAEA,GAAc,GAAUN,GAC1GO,EAAQC,GAAaC,GAAS,GAC/BC,EAAWC,EAAO,MAElBC,EAAa,KACfJ,GAAU,EAAA,EAORK,EAAaC,EACf,CAACZ,GACD,wBACA,CAAE,gCAAiCK,MAChCJ,EAAmBY,KAAIC,GAAY,0BAA0BA,OAUpE,OAPAC,GAAU,KACN,MAAMC,EAAQjB,EAAgB,IAAIkB,MAAUT,EAASU,QACrDF,EAAMd,IAAMH,GAAiBG,EAC7Bc,EAAMG,OAAST,EACfJ,IAAYU,EAAMI,SAAQ,GAC3B,IAECrB,EACOsB,EAACC,MAAAA,CAAIC,cAAY,aAAaC,MAAO,CAAEzB,oBAA0CD,EAAOE,UAAWW,IAGvGU,EAACI,MAAAA,IAAQ3B,EAAOK,IAAKA,EAAKuB,IAAKlB,EAAUR,UAAWW,EAAYgB,QAtBnD,KAChBrB,EAAUF,EAAAA,GAsBlB"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import s from"../../../../core/Context/useCoreContext.js";const o=({items:o=[],selectedIssuerId:a,onChange:c})=>{const{i18n:l}=s(),n=t((e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),c(e)}),[c]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":l.get("issuerList.selectField.contextualText")},o.map((t=>e(r,{key:t.id,...t,selected:a===t.id,onClick:n}))))};export{o as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";const s=({items:s=[],selectedIssuerId:a,onChange:c})=>{const{i18n:i}=o(),l=t((e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),c(e)}),[c]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":i.get("issuerList.selectField.contextualText")},s.map((t=>e(r,{key:t.id,...t,selected:a===t.id,onClick:l}))))};export{s as default};
 //# sourceMappingURL=IssuerButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IssuerButtonGroup.js","sources":["../../../../../../src/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport IssuerButton from './IssuerButton';\nimport useCoreContext from '../../../../core/Context/useCoreContext';\nimport './IssuerButtonGroup.scss';\nimport { IssuerItem } from '../types';\n\ninterface IssuerButtonGroupProps {\n    items: IssuerItem[];\n    selectedIssuerId: string;\n    onChange: (event: UIEvent) => void;\n}\n\nconst IssuerButtonGroup = ({ items = [], selectedIssuerId, onChange }: IssuerButtonGroupProps) => {\n    const { i18n } = useCoreContext();\n\n    const handleClick = useCallback(\n        (event: UIEvent) => {\n            const value = (event.currentTarget as HTMLButtonElement).value;\n            Object.defineProperty(event.target, 'value', { value });\n            onChange(event);\n        },\n        [onChange]\n    );\n\n    return (\n        <div className=\"adyen-checkout__issuer-button-group\" role=\"group\" aria-label={i18n.get('issuerList.selectField.contextualText')}>\n            {items.map(issuer => (\n                <IssuerButton key={issuer.id} {...issuer} selected={selectedIssuerId === issuer.id} onClick={handleClick} />\n            ))}\n        </div>\n    );\n};\n\nexport default IssuerButtonGroup;\n"],"names":["IssuerButtonGroup","items","selectedIssuerId","onChange","i18n","useCoreContext","handleClick","useCallback","event","value","currentTarget","Object","defineProperty","target","h","div","className","role","aria-label","get","map","issuer","IssuerButton","key","id","selected","onClick"],"mappings":"oPAaMA,MAAAA,EAAoB,EAAGC,QAAQ,GAAIC,mBAAkBC,eACvD,MAAMC,KAAEA,GAASC,IAEXC,EAAcC,GACfC,IACG,MAAMC,EAASD,EAAME,cAAoCD,MACzDE,OAAOC,eAAeJ,EAAMK,OAAQ,QAAS,CAAEJ,UAC/CN,EAASK,EAAAA,GAEb,CAACL,IAGL,OACIW,EAACC,MAAAA,CAAIC,UAAU,sCAAsCC,KAAK,QAAQC,aAAYd,EAAKe,IAAI,0CAClFlB,EAAMmB,KAAIC,GACPP,EAACQ,EAAAA,CAAaC,IAAKF,EAAOG,MAAQH,EAAQI,SAAUvB,IAAqBmB,EAAOG,GAAIE,QAASpB"}
+{"version":3,"file":"IssuerButtonGroup.js","sources":["../../../../../../src/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport IssuerButton from './IssuerButton';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './IssuerButtonGroup.scss';\nimport { IssuerItem } from '../types';\n\ninterface IssuerButtonGroupProps {\n    items: IssuerItem[];\n    selectedIssuerId: string;\n    onChange: (event: UIEvent) => void;\n}\n\nconst IssuerButtonGroup = ({ items = [], selectedIssuerId, onChange }: IssuerButtonGroupProps) => {\n    const { i18n } = useCoreContext();\n\n    const handleClick = useCallback(\n        (event: UIEvent) => {\n            const value = (event.currentTarget as HTMLButtonElement).value;\n            Object.defineProperty(event.target, 'value', { value });\n            onChange(event);\n        },\n        [onChange]\n    );\n\n    return (\n        <div className=\"adyen-checkout__issuer-button-group\" role=\"group\" aria-label={i18n.get('issuerList.selectField.contextualText')}>\n            {items.map(issuer => (\n                <IssuerButton key={issuer.id} {...issuer} selected={selectedIssuerId === issuer.id} onClick={handleClick} />\n            ))}\n        </div>\n    );\n};\n\nexport default IssuerButtonGroup;\n"],"names":["IssuerButtonGroup","items","selectedIssuerId","onChange","i18n","useCoreContext","handleClick","useCallback","event","value","currentTarget","Object","defineProperty","target","h","div","className","role","aria-label","get","map","issuer","IssuerButton","key","id","selected","onClick"],"mappings":"oQAaMA,MAAAA,EAAoB,EAAGC,QAAQ,GAAIC,mBAAkBC,eACvD,MAAMC,KAAEA,GAASC,IAEXC,EAAcC,GACfC,IACG,MAAMC,EAASD,EAAME,cAAoCD,MACzDE,OAAOC,eAAeJ,EAAMK,OAAQ,QAAS,CAAEJ,UAC/CN,EAASK,EAAAA,GAEb,CAACL,IAGL,OACIW,EAACC,MAAAA,CAAIC,UAAU,sCAAsCC,KAAK,QAAQC,aAAYd,EAAKe,IAAI,0CAClFlB,EAAMmB,KAAIC,GACPP,EAACQ,EAAAA,CAAaC,IAAKF,EAAOG,MAAQH,EAAQI,SAAUvB,IAAqBmB,EAAOG,GAAIE,QAASpB"}

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 m from"../../../core/Context/useCoreContext.js";import d from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as c}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_SELECTED_STR as f,ANALYTICS_DISPLAYED_STR as C,ANALYTICS_LIST as F,ANALYTICS_SEARCH_DEBOUNCE_TIME as j,ANALYTICS_INPUT_STR as y,ANALYTICS_LIST_SEARCH as x,ANALYTICS_FEATURED_ISSUER as S}from"../../../core/Analytics/constants.js";import{debounce as _}from"../../../utils/debounce.js";const b=({issuer:e,items:s},t)=>{const r=s.find((s=>s.id===e))?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},v=["issuer"],I={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};var M;function A({items:M,placeholder:A,issuer:k,highlightedIds:w=[],showContextualElement:B,contextualText:E,...T}){const{i18n:V}=m(),{handleChangeFor:D,triggerValidation:G,data:N,valid:R,errors:L,isValid:P}=a({schema:v,defaultData:{issuer:k},rules:I}),[$,K]=t("ready"),[O,q]=t(1),{setSRMessagesFromObjects:z,shouldMoveFocusSR:H}=d(),J=z?.({});this.setStatus=e=>{K(e)};const Q=r((e=>s=>{const t=1===e?F:S,r=M.find((e=>e.id===s.target.value));T.onSubmitAnalytics({type:f,target:t,issuer:r.name}),q(e),D("issuer")(s)}),[D]),U=r((e=>{e&&T.onSubmitAnalytics({type:C,target:F})}),[]),W=o(_(T.onSubmitAnalytics,j)),X=r((()=>{W.current({type:y,target:x})}),[]);i((()=>{T.onChange({data:N,valid:R,errors:L,isValid:P});const e=J?.({errors:L,isValidating:!0});e?.action===c&&H&&g(".adyen-checkout__issuer-list",e.fieldToFocus)}),[N,R,L,P]),this.showValidation=()=>{G()};const{highlightedItems:Y}=M.reduce(((e,s)=>(w.includes(s.id)&&e.highlightedItems.push({...s}),e)),{highlightedItems:[]});return e("div",{className:"adyen-checkout__issuer-list"},!!Y.length&&e(s,null,e(l,{selectedIssuerId:0===O?N.issuer:null,items:Y,onChange:Q(0)}),e(u,null)),e(n,{label:V.get("issuerList.selectField.label"),errorMessage:(Z=L.issuer,Z&&Z.errorMessage?V.get(Z.errorMessage):!!Z),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:B,contextualText:E},e(p,{items:M,selectedValue:1===O?N.issuer:null,placeholder:A,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:Q(1),onListToggle:U,onInput:X})),T.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:V.get(T.termsAndConditions.translationKey),urls:T.termsAndConditions.urls})),T.showPayButton&&T.payButton({status:$,label:b({issuer:N.issuer,items:[...M,...Y]},V)}));var Z}!function(e){e[e.ButtonGroup=0]="ButtonGroup",e[e.Dropdown=1]="Dropdown"}(M||(M={})),A.defaultProps={onChange:()=>{}};export{A as default};
+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 d from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as c}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_SELECTED_STR as f,ANALYTICS_DISPLAYED_STR as C,ANALYTICS_LIST as F,ANALYTICS_SEARCH_DEBOUNCE_TIME as j,ANALYTICS_INPUT_STR as y,ANALYTICS_LIST_SEARCH as x,ANALYTICS_FEATURED_ISSUER as S}from"../../../core/Analytics/constants.js";import{debounce as _}from"../../../utils/debounce.js";const b=({issuer:e,items:s},t)=>{const r=s.find((s=>s.id===e))?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},v=["issuer"],I={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};var M;function A({items:M,placeholder:A,issuer:k,highlightedIds:w=[],showContextualElement:B,contextualText:E,...T}){const{i18n:V}=m(),{handleChangeFor:D,triggerValidation:G,data:N,valid:P,errors:R,isValid:L}=a({schema:v,defaultData:{issuer:k},rules:I}),[$,K]=t("ready"),[O,q]=t(1),{setSRMessagesFromObjects:z,shouldMoveFocusSR:H}=d(),J=z?.({});this.setStatus=e=>{K(e)};const Q=r((e=>s=>{const t=1===e?F:S,r=M.find((e=>e.id===s.target.value));T.onSubmitAnalytics({type:f,target:t,issuer:r.name}),q(e),D("issuer")(s)}),[D]),U=r((e=>{e&&T.onSubmitAnalytics({type:C,target:F})}),[]),W=o(_(T.onSubmitAnalytics,j)),X=r((()=>{W.current({type:y,target:x})}),[]);i((()=>{T.onChange({data:N,valid:P,errors:R,isValid:L});const e=J?.({errors:R,isValidating:!0});e?.action===c&&H&&g(".adyen-checkout__issuer-list",e.fieldToFocus)}),[N,P,R,L]),this.showValidation=()=>{G()};const{highlightedItems:Y}=M.reduce(((e,s)=>(w.includes(s.id)&&e.highlightedItems.push({...s}),e)),{highlightedItems:[]});return e("div",{className:"adyen-checkout__issuer-list"},!!Y.length&&e(s,null,e(l,{selectedIssuerId:0===O?N.issuer:null,items:Y,onChange:Q(0)}),e(u,null)),e(n,{label:V.get("issuerList.selectField.label"),errorMessage:(Z=R.issuer,Z&&Z.errorMessage?V.get(Z.errorMessage):!!Z),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:B,contextualText:E},e(p,{items:M,selectedValue:1===O?N.issuer:null,placeholder:A,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:Q(1),onListToggle:U,onInput:X})),T.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:V.get(T.termsAndConditions.translationKey),urls:T.termsAndConditions.urls})),T.showPayButton&&T.payButton({status:$,label:b({issuer:N.issuer,items:[...M,...Y]},V)}));var Z}!function(e){e[e.ButtonGroup=0]="ButtonGroup",e[e.Dropdown=1]="Dropdown"}(M||(M={})),A.defaultProps={onChange:()=>{}};export{A 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/useCoreContext';\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';\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            props.onSubmitAnalytics({ type: ANALYTICS_SELECTED_STR, target, issuer: issuerObj.name });\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            props.onSubmitAnalytics({ type: ANALYTICS_DISPLAYED_STR, target: ANALYTICS_LIST });\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', srPanelResp.fieldToFocus);\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","onSubmitAnalytics","ANALYTICS_SELECTED_STR","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","fieldToFocus","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","IssuerListInputTypes","defaultProps"],"mappings":"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"}
+{"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';\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            props.onSubmitAnalytics({ type: ANALYTICS_SELECTED_STR, target, issuer: issuerObj.name });\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            props.onSubmitAnalytics({ type: ANALYTICS_DISPLAYED_STR, target: ANALYTICS_LIST });\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', srPanelResp.fieldToFocus);\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","onSubmitAnalytics","ANALYTICS_SELECTED_STR","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","fieldToFocus","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","IssuerListInputTypes","defaultProps"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as s,useMemo as r,useState as o,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import i from"../../../core/Context/useCoreContext.js";import n,{COMPANY_DETAILS_SCHEMA as a}from"../CompanyDetails/CompanyDetails.js";import l,{PERSONAL_DETAILS_SCHEMA as d}from"../PersonalDetails/PersonalDetails.js";import c from"../Address/Address.js";import u from"../FormFields/Checkbox/Checkbox.js";import m from"../FormFields/ConsentCheckbox/ConsentCheckbox.js";import{mapFieldKey as p,getInitialActiveFieldsets as b,fieldsetsSchema as y,getActiveFieldsData as f}from"./utils.js";import C from"../IbanInput/IbanInput.js";import{enhanceErrorObjectKeys as h}from"../../../core/Errors/utils.js";import A from"../../../core/Errors/useSRPanelContext.js";import v from"../Address/Specifications.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import{ERROR_ACTION_BLUR_SCENARIO as k,ERROR_ACTION_FOCUS_FIELD as F}from"../../../core/Errors/constants.js";import{usePrevious as j}from"../../../utils/hookUtils.js";import{getArrayDifferences as D}from"../../../utils/arrayUtils.js";import x from"../FormFields/Field/Field.js";import S from"../FormInstruction/FormInstruction.js";const R={isValid:!1,errorMessage:"consent.checkbox.invalid",error:"consent.checkbox.invalid"};function w(w){const{countryCode:E,visibility:M}=w,{i18n:q}=i(),I=s({});Object.keys(I.current).length||w.setComponentRef?.(I.current);const L=s(!1),{setSRMessagesFromObjects:P,setSRMessagesFromStrings:V,clearSRPanel:N,shouldMoveFocusSR:O}=A(),_=P?.({fieldTypeMappingFn:p}),B=r((()=>new v),[]),T=b(M,w.data),[U,$]=o(T),{current:z}=s(y.reduce(((e,s)=>(e[s]=e=>{z[s].current=e},e)),{})),G=!!w.consentCheckboxLabel,H=!G&&Object.keys(U).every((e=>!U[e])),J="editable"===M.deliveryAddress&&"hidden"!==M.billingAddress,[K,Q]=o({...w.data,...G&&{consentCheckbox:!1}}),[W,X]=o({}),[Y,Z]=o({}),[ee,se]=o("ready"),[re,oe]=o(null);I.current.showValidation=()=>{L.current=!0,y.forEach((e=>{z[e].current&&z[e].current.showValidation()})),X({...G&&{consentCheckbox:K.consentCheckbox?null:R}})},I.current.setStatus=se;const te=j(re);t((()=>{const e=Object.keys(U).every((e=>!U[e]||!!Y[e])),s=!G||!!Y.consentCheckbox,r=e&&s,o=f(U,K),t="deliveryAddress:",{companyDetails:i,personalDetails:n,bankAccount:l,billingAddress:c,deliveryAddress:u,...m}=W,p=h(u,t),b={..."object"==typeof i&&i,..."object"==typeof n&&n,..."object"==typeof l&&l,..."object"==typeof c&&c,..."object"==typeof p&&p,...m},y=a,C=w.personalDetailsRequiredFields??d,A=d.filter((e=>C?.includes(e))),v=B.getAddressSchemaForCountryFlat(K.billingAddress?.country),j=B.getAddressSchemaForCountryFlat(K.deliveryAddress?.country).map((e=>`${t}${e}`)),x=y.concat(A,["holder","iban"],v,j,["consentCheckbox"]),S=B.getAddressLabelsForCountry(K.billingAddress?.country??K.deliveryAddress?.country),R=_?.({errors:b,isValidating:L.current,layout:x,countrySpecificLabels:S}),E=R?.currentErrorsSortedByLayout;switch(oe(E),R?.action){case F:O&&g(".adyen-checkout__open-invoice",R.fieldToFocus),setTimeout((()=>{L.current=!1}),300);break;case k:{const e=D(E,te,"field"),s=e?.[0];if(s){const e="shopperEmail.invalid"===s.errorCode?s.errorMessage:null;V(e)}else N();break}}w.onChange({data:o,errors:W,valid:Y,isValid:r})}),[K,U]);const ie=e=>s=>{Q((r=>({...r,[e]:s.data}))),Z((r=>({...r,[e]:s.isValid}))),X((r=>({...r,[e]:s.errors})))};return e("div",{className:"adyen-checkout__open-invoice"},w.showFormInstruction&&e(S,null),U.companyDetails&&e(n,{data:w.data.companyDetails,label:"companyDetails",onChange:ie("companyDetails"),setComponentRef:z.companyDetails,visibility:M.companyDetails}),U.personalDetails&&e(l,{data:w.data.personalDetails,requiredFields:w.personalDetailsRequiredFields,label:"personalDetails",onChange:ie("personalDetails"),setComponentRef:z.personalDetails,visibility:M.personalDetails}),U.bankAccount&&e(C,{holderName:!0,label:"bankAccount",data:K.bankAccount,onChange:ie("bankAccount"),ref:z.bankAccount}),U.billingAddress&&e(c,{allowedCountries:w?.billingAddressSpecification?.allowedCountries??w.allowedCountries,countryCode:E,requiredFields:w.billingAddressRequiredFields,specifications:w.billingAddressSpecification,data:K.billingAddress,label:"billingAddress",onChange:ie("billingAddress"),setComponentRef:z.billingAddress,visibility:M.billingAddress}),J&&e(x,{classNameModifiers:["separateDeliveryAddress","consentCheckbox"],name:"separateDeliveryAddress",useLabelElement:!1,showErrorElement:!1},e(u,{label:q.get("separateDeliveryAddress"),checked:U.deliveryAddress,classNameModifiers:["separateDeliveryAddress"],name:"separateDeliveryAddress",onChange:()=>{$((e=>({...e,deliveryAddress:!U.deliveryAddress})))}})),U.deliveryAddress&&e(c,{allowedCountries:w?.deliveryAddressSpecification?.allowedCountries??w.allowedCountries,countryCode:E,requiredFields:w.deliveryAddressRequiredFields,specifications:w.deliveryAddressSpecification,data:K.deliveryAddress,label:"deliveryAddress",onChange:ie("deliveryAddress"),setComponentRef:z.deliveryAddress,visibility:M.deliveryAddress}),G&&e(m,{data:K,errorMessage:!!W.consentCheckbox,label:w.consentCheckboxLabel,onChange:e=>{const{checked:s}=e.target;Q((e=>({...e,consentCheckbox:s}))),Z((e=>({...e,consentCheckbox:s}))),X((e=>({...e,consentCheckbox:!s})))},i18n:q}),w.showPayButton&&w.payButton({status:ee,classNameModifiers:[...H?["standalone"]:[]],label:q.get("confirmPurchase")}))}export{w as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as s,useMemo as r,useState as o,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import n,{COMPANY_DETAILS_SCHEMA as a}from"../CompanyDetails/CompanyDetails.js";import l,{PERSONAL_DETAILS_SCHEMA as d}from"../PersonalDetails/PersonalDetails.js";import c from"../Address/Address.js";import u from"../FormFields/Checkbox/Checkbox.js";import m from"../FormFields/ConsentCheckbox/ConsentCheckbox.js";import{mapFieldKey as p,getInitialActiveFieldsets as b,fieldsetsSchema as y,getActiveFieldsData as f}from"./utils.js";import A from"../IbanInput/IbanInput.js";import{enhanceErrorObjectKeys as C}from"../../../core/Errors/utils.js";import h from"../../../core/Errors/useSRPanelContext.js";import v from"../Address/Specifications.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import{ERROR_ACTION_BLUR_SCENARIO as k,ERROR_ACTION_FOCUS_FIELD as F}from"../../../core/Errors/constants.js";import{usePrevious as j}from"../../../utils/hookUtils.js";import{getArrayDifferences as D}from"../../../utils/arrayUtils.js";import x from"../FormFields/Field/Field.js";import S from"../FormInstruction/FormInstruction.js";const R={isValid:!1,errorMessage:"consent.checkbox.invalid",error:"consent.checkbox.invalid"};function w(w){const{countryCode:E,visibility:M}=w,{i18n:q}=i(),I=s({});Object.keys(I.current).length||w.setComponentRef?.(I.current);const L=s(!1),{setSRMessagesFromObjects:P,setSRMessagesFromStrings:V,clearSRPanel:N,shouldMoveFocusSR:O}=h(),$=P?.({fieldTypeMappingFn:p}),_=r((()=>new v),[]),B=r((()=>new v(w.deliveryAddressSpecification)),[]),T=b(M,w.data),[U,z]=o(T),{current:G}=s(y.reduce(((e,s)=>(e[s]=e=>{G[s].current=e},e)),{})),H=!!w.consentCheckboxLabel,J=!H&&Object.keys(U).every((e=>!U[e])),K="editable"===M.deliveryAddress&&"hidden"!==M.billingAddress,[Q,W]=o({...w.data,...H&&{consentCheckbox:!1}}),[X,Y]=o({}),[Z,ee]=o({}),[se,re]=o("ready"),[oe,te]=o(null);I.current.showValidation=()=>{L.current=!0,y.forEach((e=>{G[e].current&&G[e].current.showValidation()})),Y({...H&&{consentCheckbox:Q.consentCheckbox?null:R}})},I.current.setStatus=re;const ie=j(oe);t((()=>{const e=Object.keys(U).every((e=>!U[e]||!!Z[e])),s=!H||!!Z.consentCheckbox,r=e&&s,o=f(U,Q),t="deliveryAddress:",i="billingAddress:",{companyDetails:n,personalDetails:l,bankAccount:c,billingAddress:u,deliveryAddress:m,...p}=X,b=C(u,i),y=C(m,t),A={..."object"==typeof n&&n,..."object"==typeof l&&l,..."object"==typeof c&&c,..."object"==typeof b&&b,..."object"==typeof y&&y,...p},h=a,v=w.personalDetailsRequiredFields??d,j=d.filter((e=>v?.includes(e))),x=_.getAddressSchemaForCountryFlat(Q.billingAddress?.country).map((e=>`${i}${e}`)),S=B.getAddressSchemaForCountryFlat(Q.deliveryAddress?.country).map((e=>`${t}${e}`)),R=h.concat(j,["holder","iban"],x,S,["consentCheckbox"]),E=_.getAddressLabelsForCountry(Q.billingAddress?.country),M=B.getAddressLabelsForCountry(Q.deliveryAddress?.country),q=$?.({errors:A,isValidating:L.current,layout:R,countrySpecificLabels:{...E,...M}}),I=q?.currentErrorsSortedByLayout;switch(te(I),q?.action){case F:O&&g(".adyen-checkout__open-invoice",q.fieldToFocus),setTimeout((()=>{L.current=!1}),300);break;case k:{const e=D(I,ie,"field"),s=e?.[0];if(s){const e="shopperEmail.invalid"===s.errorCode?s.errorMessage:null;V(e)}else N();break}}w.onChange({data:o,errors:X,valid:Z,isValid:r})}),[Q,U]);const ne=e=>s=>{W((r=>({...r,[e]:s.data}))),ee((r=>({...r,[e]:s.isValid}))),Y((r=>({...r,[e]:s.errors})))};return e("div",{className:"adyen-checkout__open-invoice"},w.showFormInstruction&&e(S,null),U.companyDetails&&e(n,{data:w.data.companyDetails,label:"companyDetails",onChange:ne("companyDetails"),setComponentRef:G.companyDetails,visibility:M.companyDetails}),U.personalDetails&&e(l,{data:w.data.personalDetails,requiredFields:w.personalDetailsRequiredFields,label:"personalDetails",onChange:ne("personalDetails"),setComponentRef:G.personalDetails,visibility:M.personalDetails}),U.bankAccount&&e(A,{holderName:!0,label:"bankAccount",data:Q.bankAccount,onChange:ne("bankAccount"),ref:G.bankAccount}),U.billingAddress&&e(c,{allowedCountries:w?.billingAddressSpecification?.allowedCountries??w.allowedCountries,countryCode:E,requiredFields:w.billingAddressRequiredFields,specifications:w.billingAddressSpecification,data:Q.billingAddress,label:"billingAddress",onChange:ne("billingAddress"),setComponentRef:G.billingAddress,visibility:M.billingAddress}),K&&e(x,{classNameModifiers:["separateDeliveryAddress","consentCheckbox"],name:"separateDeliveryAddress",useLabelElement:!1,showErrorElement:!1},e(u,{label:q.get("separateDeliveryAddress"),checked:U.deliveryAddress,classNameModifiers:["separateDeliveryAddress"],name:"separateDeliveryAddress",onChange:()=>{z((e=>({...e,deliveryAddress:!U.deliveryAddress})))}})),U.deliveryAddress&&e(c,{allowedCountries:w?.deliveryAddressSpecification?.allowedCountries??w.allowedCountries,countryCode:E,requiredFields:w.deliveryAddressRequiredFields,specifications:w.deliveryAddressSpecification,data:Q.deliveryAddress,label:"deliveryAddress",onChange:ne("deliveryAddress"),setComponentRef:G.deliveryAddress,visibility:M.deliveryAddress}),H&&e(m,{data:Q,errorMessage:!!X.consentCheckbox,label:w.consentCheckboxLabel,onChange:e=>{const{checked:s}=e.target;W((e=>({...e,consentCheckbox:s}))),ee((e=>({...e,consentCheckbox:s}))),Y((e=>({...e,consentCheckbox:!s})))},i18n:q}),w.showPayButton&&w.payButton({status:se,classNameModifiers:[...J?["standalone"]:[]],label:q.get("confirmPurchase")}))}export{w as default};
 //# sourceMappingURL=OpenInvoice.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OpenInvoice.js","sources":["../../../../../src/components/internal/OpenInvoice/OpenInvoice.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState, useMemo } from 'preact/hooks';\nimport useCoreContext from '../../../core/Context/useCoreContext';\nimport CompanyDetails from '../CompanyDetails';\nimport PersonalDetails from '../PersonalDetails';\nimport Address from '../Address';\nimport Checkbox from '../FormFields/Checkbox';\nimport ConsentCheckbox from '../FormFields/ConsentCheckbox';\nimport { getActiveFieldsData, getInitialActiveFieldsets, fieldsetsSchema, mapFieldKey } from './utils';\nimport {\n    OpenInvoiceActiveFieldsets,\n    OpenInvoiceFieldsetsRefs,\n    OpenInvoiceProps,\n    OpenInvoiceStateData,\n    OpenInvoiceStateError,\n    OpenInvoiceStateValid\n} from './types';\nimport './OpenInvoice.scss';\nimport IbanInput from '../IbanInput';\nimport { enhanceErrorObjectKeys } from '../../../core/Errors/utils';\nimport { GenericError, SetSRMessagesReturnObject, SortedErrorObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport Specifications from '../Address/Specifications';\nimport { PERSONAL_DETAILS_SCHEMA } from '../PersonalDetails/PersonalDetails';\nimport { COMPANY_DETAILS_SCHEMA } from '../CompanyDetails/CompanyDetails';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport Field from '../FormFields/Field';\nimport FormInstruction from '../FormInstruction';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nconst consentCBErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'consent.checkbox.invalid',\n    error: 'consent.checkbox.invalid'\n};\n\nexport default function OpenInvoice(props: OpenInvoiceProps) {\n    const { countryCode, visibility } = props;\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const openInvoiceRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(openInvoiceRef.current).length) {\n        props.setComponentRef?.(openInvoiceRef.current);\n    }\n\n    const isValidating = useRef(false);\n\n    /** SR stuff */\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n    // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n        fieldTypeMappingFn: mapFieldKey\n    });\n\n    const specifications = useMemo(() => new Specifications(), []);\n    /** end SR stuff */\n\n    const initialActiveFieldsets: OpenInvoiceActiveFieldsets = getInitialActiveFieldsets(visibility, props.data);\n    const [activeFieldsets, setActiveFieldsets] = useState<OpenInvoiceActiveFieldsets>(initialActiveFieldsets);\n\n    const { current: fieldsetsRefs } = useRef<OpenInvoiceFieldsetsRefs>(\n        fieldsetsSchema.reduce((acc, fieldset) => {\n            acc[fieldset] = ref => {\n                fieldsetsRefs[fieldset].current = ref;\n            };\n            return acc;\n        }, {})\n    );\n\n    const checkFieldsets = () => Object.keys(activeFieldsets).every(fieldset => !activeFieldsets[fieldset] || !!valid[fieldset]);\n    const hasConsentCheckbox = !!props.consentCheckboxLabel;\n    const isStandAloneButton = !hasConsentCheckbox && Object.keys(activeFieldsets).every(key => !activeFieldsets[key]);\n    const showSeparateDeliveryAddressCheckbox = visibility.deliveryAddress === 'editable' && visibility.billingAddress !== 'hidden';\n\n    const [data, setData] = useState<OpenInvoiceStateData>({\n        ...props.data,\n        ...(hasConsentCheckbox && { consentCheckbox: false })\n    });\n    const [errors, setErrors] = useState<OpenInvoiceStateError>({});\n    const [valid, setValid] = useState<OpenInvoiceStateValid>({});\n    const [status, setStatus] = useState('ready');\n\n    // Relates to onBlur errors\n    const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n    // Expose methods expected by parent\n    openInvoiceRef.current.showValidation = () => {\n        isValidating.current = true;\n        fieldsetsSchema.forEach(fieldset => {\n            if (fieldsetsRefs[fieldset].current) fieldsetsRefs[fieldset].current.showValidation();\n        });\n\n        setErrors({\n            ...(hasConsentCheckbox && { consentCheckbox: data.consentCheckbox ? null : consentCBErrorObj })\n        });\n    };\n\n    openInvoiceRef.current.setStatus = setStatus;\n\n    // Get the previous value (Relates to onBlur errors)\n    const previousSortedErrors = usePrevious(sortedErrorList);\n\n    useEffect(() => {\n        const fieldsetsAreValid: boolean = checkFieldsets();\n        const consentCheckboxValid: boolean = !hasConsentCheckbox || !!valid.consentCheckbox;\n        const isValid: boolean = fieldsetsAreValid && consentCheckboxValid;\n        const newData: OpenInvoiceStateData = getActiveFieldsData(activeFieldsets, data);\n\n        const DELIVERY_ADDRESS_PREFIX = 'deliveryAddress:';\n\n        /** Create messages for SRPanel */\n        // Extract nested errors from the various child components...\n        const {\n            companyDetails: extractedCompanyDetailsErrors,\n            personalDetails: extractedPersonalDetailsErrors,\n            bankAccount: extractedBankAccountErrors,\n            billingAddress: extractedBillingAddressErrors,\n            deliveryAddress: extractedDeliveryAddressErrors,\n            ...remainingErrors\n        } = errors;\n\n        // (Differentiate between billingAddress and deliveryAddress errors by adding a prefix to the latter)\n        const enhancedDeliveryAddressErrors = enhanceErrorObjectKeys(extractedDeliveryAddressErrors, DELIVERY_ADDRESS_PREFIX);\n\n        // ...and then collate the errors into a new object so that they all sit at top level\n        const errorsForPanel = {\n            ...(typeof extractedCompanyDetailsErrors === 'object' && extractedCompanyDetailsErrors),\n            ...(typeof extractedPersonalDetailsErrors === 'object' && extractedPersonalDetailsErrors),\n            ...(typeof extractedBankAccountErrors === 'object' && extractedBankAccountErrors),\n            ...(typeof extractedBillingAddressErrors === 'object' && extractedBillingAddressErrors),\n            ...(typeof enhancedDeliveryAddressErrors === 'object' && enhancedDeliveryAddressErrors),\n            ...remainingErrors\n        };\n\n        // Create layout\n        const companyDetailsLayout: string[] = COMPANY_DETAILS_SCHEMA;\n\n        const personalDetailsReqFields: string[] = props.personalDetailsRequiredFields ?? PERSONAL_DETAILS_SCHEMA;\n        const personalDetailLayout: string[] = PERSONAL_DETAILS_SCHEMA.filter(x => personalDetailsReqFields?.includes(x));\n\n        const bankAccountLayout = ['holder', 'iban'];\n\n        const billingAddressLayout = specifications.getAddressSchemaForCountryFlat(data.billingAddress?.country);\n\n        const deliveryAddressLayout = specifications.getAddressSchemaForCountryFlat(data.deliveryAddress?.country);\n        // In order to sort the deliveryAddress errors the layout entries need to have the same (prefixed) identifier as the errors themselves\n        const deliveryAddressLayoutEnhanced = deliveryAddressLayout.map(item => `${DELIVERY_ADDRESS_PREFIX}${item}`);\n\n        const fullLayout = companyDetailsLayout.concat(personalDetailLayout, bankAccountLayout, billingAddressLayout, deliveryAddressLayoutEnhanced, [\n            'consentCheckbox'\n        ]);\n\n        // Country specific address labels\n        const countrySpecificLabels = specifications.getAddressLabelsForCountry(data.billingAddress?.country ?? data.deliveryAddress?.country);\n\n        // Set messages: Pass dynamic props (errors, layout etc) to SRPanel via partial\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n            errors: errorsForPanel,\n            isValidating: isValidating.current,\n            layout: fullLayout,\n            countrySpecificLabels\n        });\n\n        // Relates to onBlur errors\n        const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n\n        // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n        setSortedErrorList(currentErrorsSortedByLayout); // Relates to onBlur errors\n\n        /**\n         * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n         */\n        switch (srPanelResp?.action) {\n            // A call to focus the first field in error will always follow the call to validate the whole form\n            case ERROR_ACTION_FOCUS_FIELD:\n                // Focus first field in error, if required\n                if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__open-invoice', srPanelResp.fieldToFocus);\n                // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                setTimeout(() => {\n                    isValidating.current = false;\n                }, 300);\n                break;\n\n            /** On blur scenario: not validating, i.e. trying to submit form, but there might be an error, either to set or to clear */\n            case ERROR_ACTION_BLUR_SCENARIO: {\n                const difference = getArrayDifferences(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                const latestErrorMsg = difference?.[0];\n\n                if (latestErrorMsg) {\n                    // Is error actually a blur based one - depends on the specific fields in a component as to whether they validate on blur\n                    const isBlurBasedError = latestErrorMsg.errorCode === 'shopperEmail.invalid';\n\n                    // Only add blur based errors to the error panel - doing this step prevents the non-blur based errors from being read out twice\n                    const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                    setSRMessagesFromStrings(latestSRError);\n                } else {\n                    // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                    clearSRPanel();\n                }\n\n                break;\n            }\n            default:\n                break;\n        }\n\n        props.onChange({ data: newData, errors, valid, isValid });\n    }, [data, activeFieldsets]);\n\n    const handleFieldset = key => state => {\n        setData(prevData => ({ ...prevData, [key]: state.data }));\n        setValid(prevValid => ({ ...prevValid, [key]: state.isValid }));\n        setErrors(prevErrors => ({ ...prevErrors, [key]: state.errors }));\n    };\n\n    const handleSeparateDeliveryAddress = () => {\n        setActiveFieldsets(prevActiveFields => ({\n            ...prevActiveFields,\n            deliveryAddress: !activeFieldsets.deliveryAddress\n        }));\n    };\n\n    const handleConsentCheckbox = e => {\n        const { checked } = e.target;\n        setData(prevData => ({ ...prevData, consentCheckbox: checked }));\n        setValid(prevValid => ({ ...prevValid, consentCheckbox: checked }));\n        setErrors(prevErrors => ({ ...prevErrors, consentCheckbox: !checked }));\n    };\n    return (\n        <div className=\"adyen-checkout__open-invoice\">\n            {props.showFormInstruction && <FormInstruction />}\n            {activeFieldsets.companyDetails && (\n                <CompanyDetails\n                    data={props.data.companyDetails}\n                    label=\"companyDetails\"\n                    onChange={handleFieldset('companyDetails')}\n                    setComponentRef={fieldsetsRefs.companyDetails}\n                    visibility={visibility.companyDetails}\n                />\n            )}\n\n            {activeFieldsets.personalDetails && (\n                <PersonalDetails\n                    data={props.data.personalDetails}\n                    requiredFields={props.personalDetailsRequiredFields}\n                    label=\"personalDetails\"\n                    onChange={handleFieldset('personalDetails')}\n                    setComponentRef={fieldsetsRefs.personalDetails}\n                    visibility={visibility.personalDetails}\n                />\n            )}\n\n            {activeFieldsets.bankAccount && (\n                <IbanInput\n                    holderName={true}\n                    label=\"bankAccount\"\n                    data={data.bankAccount}\n                    onChange={handleFieldset('bankAccount')}\n                    ref={fieldsetsRefs.bankAccount}\n                />\n            )}\n\n            {activeFieldsets.billingAddress && (\n                <Address\n                    allowedCountries={props?.billingAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.billingAddressRequiredFields}\n                    specifications={props.billingAddressSpecification}\n                    data={data.billingAddress}\n                    label=\"billingAddress\"\n                    onChange={handleFieldset('billingAddress')}\n                    setComponentRef={fieldsetsRefs.billingAddress}\n                    visibility={visibility.billingAddress}\n                />\n            )}\n\n            {showSeparateDeliveryAddressCheckbox && (\n                <Field\n                    classNameModifiers={['separateDeliveryAddress', 'consentCheckbox']}\n                    name={'separateDeliveryAddress'}\n                    useLabelElement={false}\n                    showErrorElement={false}\n                >\n                    <Checkbox\n                        label={i18n.get('separateDeliveryAddress')}\n                        checked={activeFieldsets.deliveryAddress}\n                        classNameModifiers={['separateDeliveryAddress']}\n                        name={'separateDeliveryAddress'}\n                        onChange={handleSeparateDeliveryAddress}\n                    />\n                </Field>\n            )}\n\n            {activeFieldsets.deliveryAddress && (\n                <Address\n                    allowedCountries={props?.deliveryAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.deliveryAddressRequiredFields}\n                    specifications={props.deliveryAddressSpecification}\n                    data={data.deliveryAddress}\n                    label=\"deliveryAddress\"\n                    onChange={handleFieldset('deliveryAddress')}\n                    setComponentRef={fieldsetsRefs.deliveryAddress}\n                    visibility={visibility.deliveryAddress}\n                />\n            )}\n\n            {hasConsentCheckbox && (\n                <ConsentCheckbox\n                    data={data}\n                    errorMessage={!!errors.consentCheckbox}\n                    label={props.consentCheckboxLabel}\n                    onChange={handleConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    classNameModifiers: [...(isStandAloneButton ? ['standalone'] : [])],\n                    label: i18n.get('confirmPurchase')\n                })}\n        </div>\n    );\n}\n"],"names":["consentCBErrorObj","isValid","errorMessage","error","OpenInvoice","props","countryCode","visibility","i18n","useCoreContext","openInvoiceRef","useRef","Object","keys","current","length","setComponentRef","isValidating","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","specifications","useMemo","Specifications","initialActiveFieldsets","getInitialActiveFieldsets","data","activeFieldsets","setActiveFieldsets","useState","fieldsetsRefs","fieldsetsSchema","reduce","acc","fieldset","ref","hasConsentCheckbox","consentCheckboxLabel","isStandAloneButton","every","key","showSeparateDeliveryAddressCheckbox","deliveryAddress","billingAddress","setData","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","sortedErrorList","setSortedErrorList","showValidation","forEach","previousSortedErrors","usePrevious","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","DELIVERY_ADDRESS_PREFIX","companyDetails","extractedCompanyDetailsErrors","personalDetails","extractedPersonalDetailsErrors","bankAccount","extractedBankAccountErrors","extractedBillingAddressErrors","extractedDeliveryAddressErrors","remainingErrors","enhancedDeliveryAddressErrors","enhanceErrorObjectKeys","errorsForPanel","companyDetailsLayout","COMPANY_DETAILS_SCHEMA","personalDetailsReqFields","personalDetailsRequiredFields","PERSONAL_DETAILS_SCHEMA","personalDetailLayout","filter","x","includes","billingAddressLayout","getAddressSchemaForCountryFlat","country","deliveryAddressLayoutEnhanced","map","item","fullLayout","concat","countrySpecificLabels","getAddressLabelsForCountry","srPanelResp","layout","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorCode","onChange","handleFieldset","state","prevData","prevValid","prevErrors","h","div","className","showFormInstruction","FormInstruction","CompanyDetails","label","PersonalDetails","requiredFields","IbanInput","holderName","Address","allowedCountries","billingAddressSpecification","billingAddressRequiredFields","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","get","checked","prevActiveFields","deliveryAddressSpecification","deliveryAddressRequiredFields","ConsentCheckbox","e","target","showPayButton","payButton"],"mappings":"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"}
+{"version":3,"file":"OpenInvoice.js","sources":["../../../../../src/components/internal/OpenInvoice/OpenInvoice.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState, useMemo } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport CompanyDetails from '../CompanyDetails';\nimport PersonalDetails from '../PersonalDetails';\nimport Address from '../Address';\nimport Checkbox from '../FormFields/Checkbox';\nimport ConsentCheckbox from '../FormFields/ConsentCheckbox';\nimport { getActiveFieldsData, getInitialActiveFieldsets, fieldsetsSchema, mapFieldKey } from './utils';\nimport {\n    OpenInvoiceActiveFieldsets,\n    OpenInvoiceFieldsetsRefs,\n    OpenInvoiceProps,\n    OpenInvoiceStateData,\n    OpenInvoiceStateError,\n    OpenInvoiceStateValid\n} from './types';\nimport './OpenInvoice.scss';\nimport IbanInput from '../IbanInput';\nimport { enhanceErrorObjectKeys } from '../../../core/Errors/utils';\nimport { GenericError, SetSRMessagesReturnObject, SortedErrorObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport Specifications from '../Address/Specifications';\nimport { PERSONAL_DETAILS_SCHEMA } from '../PersonalDetails/PersonalDetails';\nimport { COMPANY_DETAILS_SCHEMA } from '../CompanyDetails/CompanyDetails';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport Field from '../FormFields/Field';\nimport FormInstruction from '../FormInstruction';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nconst consentCBErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'consent.checkbox.invalid',\n    error: 'consent.checkbox.invalid'\n};\n\nexport default function OpenInvoice(props: OpenInvoiceProps) {\n    const { countryCode, visibility } = props;\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const openInvoiceRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(openInvoiceRef.current).length) {\n        props.setComponentRef?.(openInvoiceRef.current);\n    }\n\n    const isValidating = useRef(false);\n\n    /** SR stuff */\n    const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n    // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n        fieldTypeMappingFn: mapFieldKey\n    });\n\n    const billingAddressSpecifications = useMemo(() => new Specifications(), []);\n    const deliveryAddressSpecifications = useMemo(() => new Specifications(props.deliveryAddressSpecification), []);\n    /** end SR stuff */\n\n    const initialActiveFieldsets: OpenInvoiceActiveFieldsets = getInitialActiveFieldsets(visibility, props.data);\n    const [activeFieldsets, setActiveFieldsets] = useState<OpenInvoiceActiveFieldsets>(initialActiveFieldsets);\n\n    const { current: fieldsetsRefs } = useRef<OpenInvoiceFieldsetsRefs>(\n        fieldsetsSchema.reduce((acc, fieldset) => {\n            acc[fieldset] = ref => {\n                fieldsetsRefs[fieldset].current = ref;\n            };\n            return acc;\n        }, {})\n    );\n\n    const checkFieldsets = () => Object.keys(activeFieldsets).every(fieldset => !activeFieldsets[fieldset] || !!valid[fieldset]);\n    const hasConsentCheckbox = !!props.consentCheckboxLabel;\n    const isStandAloneButton = !hasConsentCheckbox && Object.keys(activeFieldsets).every(key => !activeFieldsets[key]);\n    const showSeparateDeliveryAddressCheckbox = visibility.deliveryAddress === 'editable' && visibility.billingAddress !== 'hidden';\n\n    const [data, setData] = useState<OpenInvoiceStateData>({\n        ...props.data,\n        ...(hasConsentCheckbox && { consentCheckbox: false })\n    });\n    const [errors, setErrors] = useState<OpenInvoiceStateError>({});\n    const [valid, setValid] = useState<OpenInvoiceStateValid>({});\n    const [status, setStatus] = useState('ready');\n\n    // Relates to onBlur errors\n    const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n    // Expose methods expected by parent\n    openInvoiceRef.current.showValidation = () => {\n        isValidating.current = true;\n        fieldsetsSchema.forEach(fieldset => {\n            if (fieldsetsRefs[fieldset].current) fieldsetsRefs[fieldset].current.showValidation();\n        });\n\n        setErrors({\n            ...(hasConsentCheckbox && { consentCheckbox: data.consentCheckbox ? null : consentCBErrorObj })\n        });\n    };\n\n    openInvoiceRef.current.setStatus = setStatus;\n\n    // Get the previous value (Relates to onBlur errors)\n    const previousSortedErrors = usePrevious(sortedErrorList);\n\n    useEffect(() => {\n        const fieldsetsAreValid: boolean = checkFieldsets();\n        const consentCheckboxValid: boolean = !hasConsentCheckbox || !!valid.consentCheckbox;\n        const isValid: boolean = fieldsetsAreValid && consentCheckboxValid;\n        const newData: OpenInvoiceStateData = getActiveFieldsData(activeFieldsets, data);\n\n        const DELIVERY_ADDRESS_PREFIX = 'deliveryAddress:';\n        const BILLING_ADDRESS_PREFIX = 'billingAddress:';\n\n        /** Create messages for SRPanel */\n        // Extract nested errors from the various child components...\n        const {\n            companyDetails: extractedCompanyDetailsErrors,\n            personalDetails: extractedPersonalDetailsErrors,\n            bankAccount: extractedBankAccountErrors,\n            billingAddress: extractedBillingAddressErrors,\n            deliveryAddress: extractedDeliveryAddressErrors,\n            ...remainingErrors\n        } = errors;\n\n        // Differentiate between billingAddress and deliveryAddress errors by adding a prefix.\n        // This also allows overlapping errors e.g. now that addresses can contain first & last name fields\n        const enhancedBillingAddressErrors = enhanceErrorObjectKeys(extractedBillingAddressErrors, BILLING_ADDRESS_PREFIX);\n        const enhancedDeliveryAddressErrors = enhanceErrorObjectKeys(extractedDeliveryAddressErrors, DELIVERY_ADDRESS_PREFIX);\n\n        // ...and then collate the errors into a new object so that they all sit at top level\n        const errorsForPanel = {\n            ...(typeof extractedCompanyDetailsErrors === 'object' && extractedCompanyDetailsErrors),\n            ...(typeof extractedPersonalDetailsErrors === 'object' && extractedPersonalDetailsErrors),\n            ...(typeof extractedBankAccountErrors === 'object' && extractedBankAccountErrors),\n            ...(typeof enhancedBillingAddressErrors === 'object' && enhancedBillingAddressErrors),\n            ...(typeof enhancedDeliveryAddressErrors === 'object' && enhancedDeliveryAddressErrors),\n            ...remainingErrors\n        };\n\n        // Create layout\n        const companyDetailsLayout: string[] = COMPANY_DETAILS_SCHEMA;\n\n        const personalDetailsReqFields: string[] = props.personalDetailsRequiredFields ?? PERSONAL_DETAILS_SCHEMA;\n        const personalDetailLayout: string[] = PERSONAL_DETAILS_SCHEMA.filter(x => personalDetailsReqFields?.includes(x));\n\n        const bankAccountLayout = ['holder', 'iban'];\n\n        const billingAddressLayout = billingAddressSpecifications.getAddressSchemaForCountryFlat(data.billingAddress?.country);\n        // In order to sort the address errors the layout entries need to have the same (prefixed) identifier as the errors themselves\n        const billingAddressLayoutEnhanced = billingAddressLayout.map(item => `${BILLING_ADDRESS_PREFIX}${item}`);\n\n        const deliveryAddressLayout = deliveryAddressSpecifications.getAddressSchemaForCountryFlat(data.deliveryAddress?.country);\n        const deliveryAddressLayoutEnhanced = deliveryAddressLayout.map(item => `${DELIVERY_ADDRESS_PREFIX}${item}`);\n\n        const fullLayout = companyDetailsLayout.concat(\n            personalDetailLayout,\n            bankAccountLayout,\n            billingAddressLayoutEnhanced,\n            deliveryAddressLayoutEnhanced,\n            ['consentCheckbox']\n        );\n\n        // Country specific address labels\n        const countrySpecificLabels_billing = billingAddressSpecifications.getAddressLabelsForCountry(data.billingAddress?.country);\n        const countrySpecificLabels_delivery = deliveryAddressSpecifications.getAddressLabelsForCountry(data.deliveryAddress?.country);\n\n        // Set messages: Pass dynamic props (errors, layout etc) to SRPanel via partial\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n            errors: errorsForPanel,\n            isValidating: isValidating.current,\n            layout: fullLayout,\n            countrySpecificLabels: { ...countrySpecificLabels_billing, ...countrySpecificLabels_delivery }\n        });\n\n        // Relates to onBlur errors\n        const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n\n        // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n        setSortedErrorList(currentErrorsSortedByLayout); // Relates to onBlur errors\n\n        /**\n         * Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n         */\n        switch (srPanelResp?.action) {\n            // A call to focus the first field in error will always follow the call to validate the whole form\n            case ERROR_ACTION_FOCUS_FIELD:\n                // Focus first field in error, if required\n                if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__open-invoice', srPanelResp.fieldToFocus);\n                // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n                setTimeout(() => {\n                    isValidating.current = false;\n                }, 300);\n                break;\n\n            /** On blur scenario: not validating, i.e. trying to submit form, but there might be an error, either to set or to clear */\n            case ERROR_ACTION_BLUR_SCENARIO: {\n                const difference = getArrayDifferences(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n                const latestErrorMsg = difference?.[0];\n\n                if (latestErrorMsg) {\n                    // Is error actually a blur based one - depends on the specific fields in a component as to whether they validate on blur\n                    const isBlurBasedError = latestErrorMsg.errorCode === 'shopperEmail.invalid';\n\n                    // Only add blur based errors to the error panel - doing this step prevents the non-blur based errors from being read out twice\n                    const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n                    setSRMessagesFromStrings(latestSRError);\n                } else {\n                    // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n                    clearSRPanel();\n                }\n\n                break;\n            }\n            default:\n                break;\n        }\n\n        props.onChange({ data: newData, errors, valid, isValid });\n    }, [data, activeFieldsets]);\n\n    const handleFieldset = key => state => {\n        setData(prevData => ({ ...prevData, [key]: state.data }));\n        setValid(prevValid => ({ ...prevValid, [key]: state.isValid }));\n        setErrors(prevErrors => ({ ...prevErrors, [key]: state.errors }));\n    };\n\n    const handleSeparateDeliveryAddress = () => {\n        setActiveFieldsets(prevActiveFields => ({\n            ...prevActiveFields,\n            deliveryAddress: !activeFieldsets.deliveryAddress\n        }));\n    };\n\n    const handleConsentCheckbox = e => {\n        const { checked } = e.target;\n        setData(prevData => ({ ...prevData, consentCheckbox: checked }));\n        setValid(prevValid => ({ ...prevValid, consentCheckbox: checked }));\n        setErrors(prevErrors => ({ ...prevErrors, consentCheckbox: !checked }));\n    };\n    return (\n        <div className=\"adyen-checkout__open-invoice\">\n            {props.showFormInstruction && <FormInstruction />}\n            {activeFieldsets.companyDetails && (\n                <CompanyDetails\n                    data={props.data.companyDetails}\n                    label=\"companyDetails\"\n                    onChange={handleFieldset('companyDetails')}\n                    setComponentRef={fieldsetsRefs.companyDetails}\n                    visibility={visibility.companyDetails}\n                />\n            )}\n\n            {activeFieldsets.personalDetails && (\n                <PersonalDetails\n                    data={props.data.personalDetails}\n                    requiredFields={props.personalDetailsRequiredFields}\n                    label=\"personalDetails\"\n                    onChange={handleFieldset('personalDetails')}\n                    setComponentRef={fieldsetsRefs.personalDetails}\n                    visibility={visibility.personalDetails}\n                />\n            )}\n\n            {activeFieldsets.bankAccount && (\n                <IbanInput\n                    holderName={true}\n                    label=\"bankAccount\"\n                    data={data.bankAccount}\n                    onChange={handleFieldset('bankAccount')}\n                    ref={fieldsetsRefs.bankAccount}\n                />\n            )}\n\n            {activeFieldsets.billingAddress && (\n                <Address\n                    allowedCountries={props?.billingAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.billingAddressRequiredFields}\n                    specifications={props.billingAddressSpecification}\n                    data={data.billingAddress}\n                    label=\"billingAddress\"\n                    onChange={handleFieldset('billingAddress')}\n                    setComponentRef={fieldsetsRefs.billingAddress}\n                    visibility={visibility.billingAddress}\n                />\n            )}\n\n            {showSeparateDeliveryAddressCheckbox && (\n                <Field\n                    classNameModifiers={['separateDeliveryAddress', 'consentCheckbox']}\n                    name={'separateDeliveryAddress'}\n                    useLabelElement={false}\n                    showErrorElement={false}\n                >\n                    <Checkbox\n                        label={i18n.get('separateDeliveryAddress')}\n                        checked={activeFieldsets.deliveryAddress}\n                        classNameModifiers={['separateDeliveryAddress']}\n                        name={'separateDeliveryAddress'}\n                        onChange={handleSeparateDeliveryAddress}\n                    />\n                </Field>\n            )}\n\n            {activeFieldsets.deliveryAddress && (\n                <Address\n                    allowedCountries={props?.deliveryAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.deliveryAddressRequiredFields}\n                    specifications={props.deliveryAddressSpecification}\n                    data={data.deliveryAddress}\n                    label=\"deliveryAddress\"\n                    onChange={handleFieldset('deliveryAddress')}\n                    setComponentRef={fieldsetsRefs.deliveryAddress}\n                    visibility={visibility.deliveryAddress}\n                />\n            )}\n\n            {hasConsentCheckbox && (\n                <ConsentCheckbox\n                    data={data}\n                    errorMessage={!!errors.consentCheckbox}\n                    label={props.consentCheckboxLabel}\n                    onChange={handleConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    classNameModifiers: [...(isStandAloneButton ? ['standalone'] : [])],\n                    label: i18n.get('confirmPurchase')\n                })}\n        </div>\n    );\n}\n"],"names":["consentCBErrorObj","isValid","errorMessage","error","OpenInvoice","props","countryCode","visibility","i18n","useCoreContext","openInvoiceRef","useRef","Object","keys","current","length","setComponentRef","isValidating","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","billingAddressSpecifications","useMemo","Specifications","deliveryAddressSpecifications","deliveryAddressSpecification","initialActiveFieldsets","getInitialActiveFieldsets","data","activeFieldsets","setActiveFieldsets","useState","fieldsetsRefs","fieldsetsSchema","reduce","acc","fieldset","ref","hasConsentCheckbox","consentCheckboxLabel","isStandAloneButton","every","key","showSeparateDeliveryAddressCheckbox","deliveryAddress","billingAddress","setData","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","sortedErrorList","setSortedErrorList","showValidation","forEach","previousSortedErrors","usePrevious","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","DELIVERY_ADDRESS_PREFIX","BILLING_ADDRESS_PREFIX","companyDetails","extractedCompanyDetailsErrors","personalDetails","extractedPersonalDetailsErrors","bankAccount","extractedBankAccountErrors","extractedBillingAddressErrors","extractedDeliveryAddressErrors","remainingErrors","enhancedBillingAddressErrors","enhanceErrorObjectKeys","enhancedDeliveryAddressErrors","errorsForPanel","companyDetailsLayout","COMPANY_DETAILS_SCHEMA","personalDetailsReqFields","personalDetailsRequiredFields","PERSONAL_DETAILS_SCHEMA","personalDetailLayout","filter","x","includes","billingAddressLayoutEnhanced","getAddressSchemaForCountryFlat","country","map","item","deliveryAddressLayoutEnhanced","fullLayout","concat","countrySpecificLabels_billing","getAddressLabelsForCountry","countrySpecificLabels_delivery","srPanelResp","layout","countrySpecificLabels","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorCode","onChange","handleFieldset","state","prevData","prevValid","prevErrors","h","div","className","showFormInstruction","FormInstruction","CompanyDetails","label","PersonalDetails","requiredFields","IbanInput","holderName","Address","allowedCountries","billingAddressSpecification","billingAddressRequiredFields","specifications","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","get","checked","prevActiveFields","deliveryAddressRequiredFields","ConsentCheckbox","e","target","showPayButton","payButton"],"mappings":"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"}

package/dist/es/components/internal/OpenInvoice/utils.js

@@ -1,2 +1,2 @@
-import{mapFieldKey as e}from"../PersonalDetails/utils.js";import{mapFieldKey as s}from"../Address/utils.js";const t=["companyDetails","personalDetails","billingAddress","deliveryAddress","bankAccount"],r=(e,s)=>Object.keys(s).filter((s=>e[s])).reduce(((e,t)=>(e[t]=s[t],e)),{}),d=(e,s={})=>t.reduce(((t,r)=>{const d="hidden"!==e[r],i="deliveryAddress"===r,l="hidden"===e?.billingAddress;return t[r]=d&&(!i||l||((e={})=>Object.keys(e).length>1)(s[r])),t}),{}),i=(t,r,d)=>{let i,l=t;const n=l.split(":"),a=n.length>1;a&&(i=n[0],l=n[1]);const c=s(l,r,d);if(c)return a?`${r.get(i)} ${c}`:c;switch(l){case"gender":case"dateOfBirth":return e(l,r)}return null};export{t as fieldsetsSchema,r as getActiveFieldsData,d as getInitialActiveFieldsets,i as mapFieldKey};
+import{mapFieldKey as e}from"../Address/utils.js";const s=["companyDetails","personalDetails","billingAddress","deliveryAddress","bankAccount"],t=(e,s)=>Object.keys(s).filter((s=>e[s])).reduce(((e,t)=>(e[t]=s[t],e)),{}),r=(e,t={})=>s.reduce(((s,r)=>{const d="hidden"!==e[r],l="deliveryAddress"===r,n="hidden"===e?.billingAddress;return s[r]=d&&(!l||n||((e={})=>Object.keys(e).length>1)(t[r])),s}),{}),d=(s,t,r)=>{let d,l=s;const n=l.split(":"),i=n.length>1;i&&(d=n[0],l=n[1]);const c=e(l,t,r);if(c&&d)return i?`${t.get(d)} ${c}`:c;switch(l){case"dateOfBirth":case"shopperEmail":case"telephoneNumber":return t.get(l)}return null};export{s as fieldsetsSchema,t as getActiveFieldsData,r as getInitialActiveFieldsets,d as mapFieldKey};
 //# sourceMappingURL=utils.js.map

package/dist/es/components/internal/OpenInvoice/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/OpenInvoice/utils.ts"],"sourcesContent":["import { OpenInvoiceActiveFieldsets, OpenInvoiceStateData, OpenInvoiceVisibility } from './types';\nimport Language from '../../../language';\nimport { mapFieldKey as mapFieldKeyPD } from '../PersonalDetails/utils';\nimport { mapFieldKey as mapFieldKeyAddress } from '../Address/utils';\nimport { StringObject } from '../Address/types';\n\nexport const fieldsetsSchema: Array<keyof OpenInvoiceStateData> = [\n    'companyDetails',\n    'personalDetails',\n    'billingAddress',\n    'deliveryAddress',\n    'bankAccount'\n];\n\nconst isPrefilled = (fieldsetData: object = {}): boolean => Object.keys(fieldsetData).length > 1;\n\nexport const getActiveFieldsData = (activeFieldsets: OpenInvoiceActiveFieldsets, data: OpenInvoiceStateData): OpenInvoiceStateData =>\n    Object.keys(data)\n        .filter(fieldset => activeFieldsets[fieldset])\n        .reduce((acc, cur) => {\n            acc[cur] = data[cur];\n            return acc;\n        }, {});\n\nexport const getInitialActiveFieldsets = (visibility: OpenInvoiceVisibility, data: OpenInvoiceStateData = {}): OpenInvoiceActiveFieldsets =>\n    fieldsetsSchema.reduce((acc, fieldset) => {\n        const isVisible = visibility[fieldset] !== 'hidden';\n        const isDeliveryAddress = fieldset === 'deliveryAddress';\n        const billingAddressIsHidden = visibility?.billingAddress === 'hidden';\n\n        // The delivery address will be active not only when set as visible\n        // but also when the billing address is hidden or when it has prefilled data\n        acc[fieldset] = isVisible && (!isDeliveryAddress || billingAddressIsHidden || isPrefilled(data[fieldset]));\n        return acc;\n    }, {} as OpenInvoiceActiveFieldsets);\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to prepend the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to prepend the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    let refKey = key;\n    let label;\n\n    // Differentiate between address types (billing and delivery)\n    const splitKey = refKey.split(':');\n    const hasSplitKey = splitKey.length > 1;\n    if (hasSplitKey) {\n        label = splitKey[0];\n        refKey = splitKey[1];\n    }\n\n    const addressKey = mapFieldKeyAddress(refKey, i18n, countrySpecificLabels);\n    if (addressKey) return hasSplitKey ? `${i18n.get(label)} ${addressKey}` : addressKey;\n\n    // Personal details related\n    switch (refKey) {\n        case 'gender':\n        case 'dateOfBirth':\n            return mapFieldKeyPD(refKey, i18n);\n        default:\n            break;\n    }\n\n    // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them\n    return null;\n};\n"],"names":["fieldsetsSchema","getActiveFieldsData","activeFieldsets","data","Object","keys","filter","fieldset","reduce","acc","cur","getInitialActiveFieldsets","visibility","isVisible","isDeliveryAddress","billingAddressIsHidden","billingAddress","fieldsetData","length","isPrefilled","mapFieldKey","key","i18n","countrySpecificLabels","label","refKey","splitKey","split","hasSplitKey","addressKey","mapFieldKeyAddress","get","mapFieldKeyPD"],"mappings":"kHAMaA,EAAqD,CAC9D,iBACA,kBACA,iBACA,kBACA,eAKSC,EAAsB,CAACC,EAA6CC,IAC7EC,OAAOC,KAAKF,GACPG,QAAOC,GAAYL,EAAgBK,KACnCC,QAAO,CAACC,EAAKC,KACVD,EAAIC,GAAOP,EAAKO,GACTD,IACR,IAEEE,EAA4B,CAACC,EAAmCT,EAA6B,CAAA,IACtGH,EAAgBQ,QAAO,CAACC,EAAKF,KACzB,MAAMM,EAAqC,WAAzBD,EAAWL,GACvBO,EAAiC,oBAAbP,EACpBQ,EAAwD,WAA/BH,GAAYI,eAK3C,OADAP,EAAIF,GAAYM,KAAeC,GAAqBC,GAlBxC,EAACE,EAAuB,KAAgBb,OAAOC,KAAKY,GAAcC,OAAS,EAkBTC,CAAYhB,EAAKI,KACxFE,CAAAA,GACR,IAOMW,EAAc,CAACC,EAAaC,EAAgBC,KACrD,IACIC,EADAC,EAASJ,EAIb,MAAMK,EAAWD,EAAOE,MAAM,KACxBC,EAAcF,EAASR,OAAS,EAClCU,IACAJ,EAAQE,EAAS,GACjBD,EAASC,EAAS,IAGtB,MAAMG,EAAaC,EAAmBL,EAAQH,EAAMC,GACpD,GAAIM,EAAY,OAAOD,EAAc,GAAGN,EAAKS,IAAIP,MAAUK,IAAeA,EAG1E,OAAQJ,GACJ,IAAK,SACL,IAAK,cACD,OAAOO,EAAcP,EAAQH,GAMrC,OAAO,IAAA"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/OpenInvoice/utils.ts"],"sourcesContent":["import { OpenInvoiceActiveFieldsets, OpenInvoiceStateData, OpenInvoiceVisibility } from './types';\nimport Language from '../../../language';\nimport { mapFieldKey as mapFieldKeyAddress } from '../Address/utils';\nimport { StringObject } from '../Address/types';\n\nexport const fieldsetsSchema: Array<keyof OpenInvoiceStateData> = [\n    'companyDetails',\n    'personalDetails',\n    'billingAddress',\n    'deliveryAddress',\n    'bankAccount'\n];\n\nconst isPrefilled = (fieldsetData: object = {}): boolean => Object.keys(fieldsetData).length > 1;\n\nexport const getActiveFieldsData = (activeFieldsets: OpenInvoiceActiveFieldsets, data: OpenInvoiceStateData): OpenInvoiceStateData =>\n    Object.keys(data)\n        .filter(fieldset => activeFieldsets[fieldset])\n        .reduce((acc, cur) => {\n            acc[cur] = data[cur];\n            return acc;\n        }, {});\n\nexport const getInitialActiveFieldsets = (visibility: OpenInvoiceVisibility, data: OpenInvoiceStateData = {}): OpenInvoiceActiveFieldsets =>\n    fieldsetsSchema.reduce((acc, fieldset) => {\n        const isVisible = visibility[fieldset] !== 'hidden';\n        const isDeliveryAddress = fieldset === 'deliveryAddress';\n        const billingAddressIsHidden = visibility?.billingAddress === 'hidden';\n\n        // The delivery address will be active not only when set as visible\n        // but also when the billing address is hidden or when it has prefilled data\n        acc[fieldset] = isVisible && (!isDeliveryAddress || billingAddressIsHidden || isPrefilled(data[fieldset]));\n        return acc;\n    }, {} as OpenInvoiceActiveFieldsets);\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to add the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to add the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    let refKey = key;\n    let label;\n\n    // Differentiate between address types (billing and delivery)\n    const splitKey = refKey.split(':');\n    const hasSplitKey = splitKey.length > 1;\n    if (hasSplitKey) {\n        label = splitKey[0];\n        refKey = splitKey[1];\n    }\n\n    const addressKey = mapFieldKeyAddress(refKey, i18n, countrySpecificLabels);\n    // Also use the presence of a label to know that we are dealing with address related fields. (This matters now that addresses can contain first & last name fields.)\n    if (addressKey && label) return hasSplitKey ? `${i18n.get(label)} ${addressKey}` : addressKey;\n\n    switch (refKey) {\n        case 'dateOfBirth':\n        case 'shopperEmail':\n        case 'telephoneNumber':\n            return i18n.get(refKey);\n        default:\n            break;\n    }\n\n    // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them\n    return null;\n};\n"],"names":["fieldsetsSchema","getActiveFieldsData","activeFieldsets","data","Object","keys","filter","fieldset","reduce","acc","cur","getInitialActiveFieldsets","visibility","isVisible","isDeliveryAddress","billingAddressIsHidden","billingAddress","fieldsetData","length","isPrefilled","mapFieldKey","key","i18n","countrySpecificLabels","label","refKey","splitKey","split","hasSplitKey","addressKey","mapFieldKeyAddress","get"],"mappings":"wDAKaA,EAAqD,CAC9D,iBACA,kBACA,iBACA,kBACA,eAKSC,EAAsB,CAACC,EAA6CC,IAC7EC,OAAOC,KAAKF,GACPG,QAAOC,GAAYL,EAAgBK,KACnCC,QAAO,CAACC,EAAKC,KACVD,EAAIC,GAAOP,EAAKO,GACTD,IACR,IAEEE,EAA4B,CAACC,EAAmCT,EAA6B,CAAA,IACtGH,EAAgBQ,QAAO,CAACC,EAAKF,KACzB,MAAMM,EAAqC,WAAzBD,EAAWL,GACvBO,EAAiC,oBAAbP,EACpBQ,EAAwD,WAA/BH,GAAYI,eAK3C,OADAP,EAAIF,GAAYM,KAAeC,GAAqBC,GAlBxC,EAACE,EAAuB,KAAgBb,OAAOC,KAAKY,GAAcC,OAAS,EAkBTC,CAAYhB,EAAKI,KACxFE,CAAAA,GACR,IAOMW,EAAc,CAACC,EAAaC,EAAgBC,KACrD,IACIC,EADAC,EAASJ,EAIb,MAAMK,EAAWD,EAAOE,MAAM,KACxBC,EAAcF,EAASR,OAAS,EAClCU,IACAJ,EAAQE,EAAS,GACjBD,EAASC,EAAS,IAGtB,MAAMG,EAAaC,EAAmBL,EAAQH,EAAMC,GAEpD,GAAIM,GAAcL,EAAO,OAAOI,EAAc,GAAGN,EAAKS,IAAIP,MAAUK,IAAeA,EAEnF,OAAQJ,GACJ,IAAK,cACL,IAAK,eACL,IAAK,kBACD,OAAOH,EAAKS,IAAIN,GAMxB,OAAO,IAAA"}

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

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import e from"../Button/Button.js";import o from"../../../core/Context/useCoreContext.js";import{payAmountLabel as a,secondaryAmountLabel as r}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"):a(u,l),f=!d&&!m&&l&&n&&Object.keys(n).length?r(u,n):null;return t(e,{...c,disabled:c.disabled||"loading"===c.status,classNameModifiers:[...i,"pay"],label:m||p},f&&t(s,{label:f}))};export{l as default,a 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=!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};
 //# 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/useCoreContext';\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":"4RAsBA,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 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"}