@adyen/adyen-web 6.19.0 → 6.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cjs/adyen.css +10 -11
- package/dist/cjs/adyen.css.map +1 -1
- package/dist/cjs/index.cjs +2 -2
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +43 -65
- package/dist/es/adyen.css +10 -11
- package/dist/es/adyen.css.map +1 -1
- package/dist/es/components/Ach/Ach.js +1 -1
- package/dist/es/components/Ach/Ach.js.map +1 -1
- package/dist/es/components/Ach/components/AchComponent.js +1 -1
- package/dist/es/components/Ach/components/AchComponent.js.map +1 -1
- package/dist/es/components/Ach/components/useSRPanelForACHErrors.js.map +1 -1
- package/dist/es/components/Card/Card.js +1 -1
- package/dist/es/components/Card/Card.js.map +1 -1
- package/dist/es/components/Card/components/CardInput/components/CardFieldsWrapper.js +1 -1
- package/dist/es/components/Card/components/CardInput/components/CardFieldsWrapper.js.map +1 -1
- package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js +1 -1
- package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map +1 -1
- package/dist/es/components/Card/components/CardInput/handlers.js.map +1 -1
- package/dist/es/components/Card/components/CardInput/useSRPanelForCardInputErrors.js.map +1 -1
- package/dist/es/components/Card/components/CardInput/utils.js +1 -1
- package/dist/es/components/Card/components/CardInput/utils.js.map +1 -1
- package/dist/es/components/Dropin/Dropin.js +1 -1
- package/dist/es/components/Dropin/Dropin.js.map +1 -1
- package/dist/es/components/Giftcard/components/useSRPanelForGiftcardErrors.js.map +1 -1
- package/dist/es/components/PayByBankPix/PayByBankPix.js +1 -1
- package/dist/es/components/PayByBankPix/PayByBankPix.js.map +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/Enrollment.js +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/Enrollment.js.map +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/components/IssuerListIntroduction.js +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/components/IssuerListIntroduction.js.map +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/useIssuerWithLogo.js +1 -1
- package/dist/es/components/PayByBankPix/components/Enrollment/useIssuerWithLogo.js.map +1 -1
- package/dist/es/components/PayByBankPix/components/StoredPayment/StoredPayment.js +1 -1
- package/dist/es/components/PayByBankPix/components/StoredPayment/StoredPayment.js.map +1 -1
- package/dist/es/components/PayPal/utils/get-paypal-styles.js.map +1 -1
- package/dist/es/components/PayPalFastlane/FastlaneSDK.js.map +1 -1
- package/dist/es/components/ThreeDS2/components/Challenge/PrepareChallenge3DS2.js.map +1 -1
- package/dist/es/components/ThreeDS2/components/DeviceFingerprint/PrepareFingerprint3DS2.js.map +1 -1
- package/dist/es/components/UPI/UPI.js +1 -1
- package/dist/es/components/UPI/UPI.js.map +1 -1
- package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js +1 -1
- package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js.map +1 -1
- package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js +1 -1
- package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js.map +1 -1
- package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js +1 -1
- package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js.map +1 -1
- package/dist/es/components/UPI/constants.js +2 -0
- package/dist/es/components/UPI/constants.js.map +1 -0
- package/dist/es/components/internal/Address/Address.js.map +1 -1
- package/dist/es/components/internal/Alert/Alert.js +1 -1
- package/dist/es/components/internal/Alert/Alert.js.map +1 -1
- package/dist/es/components/internal/ClickToPay/models/ShopperCard.js +1 -1
- package/dist/es/components/internal/ClickToPay/models/ShopperCard.js.map +1 -1
- package/dist/es/components/internal/IbanInput/IbanInput.js.map +1 -1
- package/dist/es/components/internal/IssuerList/IssuerList.js +1 -1
- package/dist/es/components/internal/IssuerList/IssuerList.js.map +1 -1
- package/dist/es/components/internal/OpenInvoice/useSRPanelForOpenInvoiceErrors.js.map +1 -1
- package/dist/es/components/internal/PayButton/PayButton.js +1 -1
- package/dist/es/components/internal/PayButton/PayButton.js.map +1 -1
- package/dist/es/components/internal/PayButton/components/SecondaryButtonLabel.js.map +1 -1
- package/dist/es/components/internal/SecuredFields/SFP/SecuredFieldsProvider.js.map +1 -1
- package/dist/es/components/internal/SecuredFields/binLookup/createCardVariantSwitcher.js +1 -1
- package/dist/es/components/internal/SecuredFields/binLookup/createCardVariantSwitcher.js.map +1 -1
- package/dist/es/components/internal/SecuredFields/binLookup/extensions.js +1 -1
- package/dist/es/components/internal/SecuredFields/binLookup/extensions.js.map +1 -1
- package/dist/es/components/internal/SecuredFields/binLookup/triggerBinLookUp.js.map +1 -1
- package/dist/es/components/internal/SecuredFields/lib/CSF/extensions/handleIOSTouchEvents.js.map +1 -1
- package/dist/es/components/internal/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/es/components/internal/UIElement/UIElement.js +1 -1
- package/dist/es/components/internal/UIElement/UIElement.js.map +1 -1
- package/dist/es/components/internal/UIElement/utils.js.map +1 -1
- package/dist/es/core/Analytics/utils.js.map +1 -1
- package/dist/es/core/Errors/SRPanel.js.map +1 -1
- package/dist/es/core/Errors/utils.js.map +1 -1
- package/dist/es/core/Services/analytics/collect-id.js +1 -1
- package/dist/es/core/core.js +1 -1
- package/dist/es/core/core.registry.js.map +1 -1
- package/dist/es/core/utils.js.map +1 -1
- package/dist/es/external/preact/compat/dist/compat.js.map +1 -1
- package/dist/es/external/preact/dist/preact.js.map +1 -1
- package/dist/es/index.d.ts +43 -65
- package/dist/es/language/utils.js.map +1 -1
- package/dist/es/utils/clipboard.js.map +1 -1
- package/dist/es/utils/setFocus.js.map +1 -1
- package/dist/es/utils/useForm/reducer.js.map +1 -1
- package/dist/es-legacy/adyen.css +10 -11
- package/dist/es-legacy/adyen.css.map +1 -1
- package/dist/es-legacy/components/Ach/Ach.js +1 -1
- package/dist/es-legacy/components/Ach/Ach.js.map +1 -1
- package/dist/es-legacy/components/Ach/components/AchComponent.js +1 -1
- package/dist/es-legacy/components/Ach/components/AchComponent.js.map +1 -1
- package/dist/es-legacy/components/Ach/components/useSRPanelForACHErrors.js.map +1 -1
- package/dist/es-legacy/components/Card/Card.js +1 -1
- package/dist/es-legacy/components/Card/Card.js.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/CardFieldsWrapper.js +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/CardFieldsWrapper.js.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/Installments/Installments.js +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/Installments/Installments.js.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/handlers.js.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/useSRPanelForCardInputErrors.js.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/utils.js +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/utils.js.map +1 -1
- package/dist/es-legacy/components/Dropin/Dropin.js +1 -1
- package/dist/es-legacy/components/Dropin/Dropin.js.map +1 -1
- package/dist/es-legacy/components/Giftcard/components/useSRPanelForGiftcardErrors.js.map +1 -1
- package/dist/es-legacy/components/PayByBankPix/PayByBankPix.js +1 -1
- package/dist/es-legacy/components/PayByBankPix/PayByBankPix.js.map +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/Enrollment.js +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/Enrollment.js.map +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/components/IssuerListIntroduction.js +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/components/IssuerListIntroduction.js.map +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/useIssuerWithLogo.js +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/Enrollment/useIssuerWithLogo.js.map +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/StoredPayment/StoredPayment.js +1 -1
- package/dist/es-legacy/components/PayByBankPix/components/StoredPayment/StoredPayment.js.map +1 -1
- package/dist/es-legacy/components/PayPal/utils/get-paypal-styles.js.map +1 -1
- package/dist/es-legacy/components/PayPalFastlane/FastlaneSDK.js.map +1 -1
- package/dist/es-legacy/components/ThreeDS2/components/Challenge/PrepareChallenge3DS2.js.map +1 -1
- package/dist/es-legacy/components/ThreeDS2/components/DeviceFingerprint/PrepareFingerprint3DS2.js.map +1 -1
- package/dist/es-legacy/components/UPI/UPI.js +1 -1
- package/dist/es-legacy/components/UPI/UPI.js.map +1 -1
- package/dist/es-legacy/components/UPI/components/UPIComponent/UPIComponent.js +1 -1
- package/dist/es-legacy/components/UPI/components/UPIComponent/UPIComponent.js.map +1 -1
- package/dist/es-legacy/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js +1 -1
- package/dist/es-legacy/components/UPI/components/UPIIntentAppList/UPIIntentAppItem/UPIIntentAppItem.js.map +1 -1
- package/dist/es-legacy/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js +1 -1
- package/dist/es-legacy/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js.map +1 -1
- package/dist/es-legacy/components/UPI/constants.js +2 -0
- package/dist/es-legacy/components/UPI/constants.js.map +1 -0
- package/dist/es-legacy/components/internal/Address/Address.js.map +1 -1
- package/dist/es-legacy/components/internal/Alert/Alert.js +1 -1
- package/dist/es-legacy/components/internal/Alert/Alert.js.map +1 -1
- package/dist/es-legacy/components/internal/ClickToPay/models/ShopperCard.js +1 -1
- package/dist/es-legacy/components/internal/ClickToPay/models/ShopperCard.js.map +1 -1
- package/dist/es-legacy/components/internal/IbanInput/IbanInput.js.map +1 -1
- package/dist/es-legacy/components/internal/IssuerList/IssuerList.js +1 -1
- package/dist/es-legacy/components/internal/IssuerList/IssuerList.js.map +1 -1
- package/dist/es-legacy/components/internal/OpenInvoice/useSRPanelForOpenInvoiceErrors.js.map +1 -1
- package/dist/es-legacy/components/internal/PayButton/PayButton.js +1 -1
- package/dist/es-legacy/components/internal/PayButton/PayButton.js.map +1 -1
- package/dist/es-legacy/components/internal/PayButton/components/SecondaryButtonLabel.js.map +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/SFP/SecuredFieldsProvider.js.map +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/binLookup/createCardVariantSwitcher.js +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/binLookup/createCardVariantSwitcher.js.map +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/binLookup/extensions.js +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/binLookup/extensions.js.map +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/binLookup/triggerBinLookUp.js.map +1 -1
- package/dist/es-legacy/components/internal/SecuredFields/lib/CSF/extensions/handleIOSTouchEvents.js.map +1 -1
- package/dist/es-legacy/components/internal/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/es-legacy/components/internal/UIElement/UIElement.js +1 -1
- package/dist/es-legacy/components/internal/UIElement/UIElement.js.map +1 -1
- package/dist/es-legacy/components/internal/UIElement/utils.js.map +1 -1
- package/dist/es-legacy/core/Analytics/utils.js.map +1 -1
- package/dist/es-legacy/core/Errors/SRPanel.js.map +1 -1
- package/dist/es-legacy/core/Errors/utils.js.map +1 -1
- package/dist/es-legacy/core/Services/analytics/collect-id.js +1 -1
- package/dist/es-legacy/core/core.js +1 -1
- package/dist/es-legacy/core/core.registry.js.map +1 -1
- package/dist/es-legacy/core/utils.js.map +1 -1
- package/dist/es-legacy/external/preact/compat/dist/compat.js.map +1 -1
- package/dist/es-legacy/external/preact/dist/preact.js.map +1 -1
- package/dist/es-legacy/language/utils.js.map +1 -1
- package/dist/es-legacy/utils/clipboard.js.map +1 -1
- package/dist/es-legacy/utils/setFocus.js.map +1 -1
- package/dist/es-legacy/utils/useForm/reducer.js.map +1 -1
- package/package.json +159 -159
- package/styles/adyen.css +10 -11
- package/dist/es/components/UPI/components/UPIComponent/constants.js +0 -2
- package/dist/es/components/UPI/components/UPIComponent/constants.js.map +0 -1
- package/dist/es/components/UPI/components/UPIComponent/useUpiSegmentedControlOptions.js +0 -2
- package/dist/es/components/UPI/components/UPIComponent/useUpiSegmentedControlOptions.js.map +0 -1
- package/dist/es-legacy/components/UPI/components/UPIComponent/constants.js +0 -2
- package/dist/es-legacy/components/UPI/components/UPIComponent/constants.js.map +0 -1
- package/dist/es-legacy/components/UPI/components/UPIComponent/useUpiSegmentedControlOptions.js +0 -2
- package/dist/es-legacy/components/UPI/components/UPIComponent/useUpiSegmentedControlOptions.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import s from"../internal/RedirectButton/RedirectButton.js";import{TxVariants as r}from"../tx-variants.js";import a from"./components/AchComponent.js";import n from"./defaultProps.js";import
|
|
1
|
+
import{createElement as t}from"../../external/preact/dist/preact.js";import{UIElement as e}from"../internal/UIElement/UIElement.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import s from"../internal/RedirectButton/RedirectButton.js";import{TxVariants as r}from"../tx-variants.js";import a from"./components/AchComponent.js";import n from"./defaultProps.js";import p from"../../core/Errors/SRPanelProvider.js";function i(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class d extends e{formatData(){return!!this.props.storedPaymentMethodId?{paymentMethod:{type:d.type,storedPaymentMethodId:this.props.storedPaymentMethodId}}:{paymentMethod:{type:d.type,ownerName:this.state.data.ownerName,accountHolderType:this.state.data.selectedAccountType?.split(".")[0],bankAccountType:this.state.data.selectedAccountType?.split(".")[1],bankLocationId:this.state.data.routingNumber,bankAccountNumber:this.state.data.accountNumber},...this.state.storePaymentMethod&&{storePaymentMethod:this.state.storePaymentMethod}}}get isValid(){return!!this.props.storedPaymentMethodId||!!this.state.isValid}get displayName(){return this.props.storedPaymentMethodId&&this.props.bankAccountNumber?`•••• ${this.props.bankAccountNumber.slice(-4)}`:this.props.name}get additionalInfo(){return this.props.storedPaymentMethodId?this.props.i18n.get("ach.savedBankAccount"):""}render(){return t(o,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},this.props.storedPaymentMethodId?t(s,{showPayButton:this.props.showPayButton,name:this.displayName,amount:this.props.amount,payButton:this.payButton,onSubmit:this.submit,ref:t=>{this.componentRef=t}}):t(p,{srPanel:this.props.modules.srPanel},t(a,{onChange:this.setState,payButton:this.payButton,showPayButton:this.props.showPayButton,hasHolderName:this.props.hasHolderName,placeholders:this.props.placeholders,data:this.props.data,setComponentRef:this.setComponentRef,enableStoreDetails:this.props.enableStoreDetails})))}}i(d,"type",r.ach),i(d,"defaultProps",n);export{d as AchElement,d as default};
|
|
2
2
|
//# sourceMappingURL=Ach.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ach.js","sources":["../../../../src/components/Ach/Ach.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport RedirectButton from '../internal/RedirectButton';\nimport { TxVariants } from '../tx-variants';\nimport AchComponent from './components/AchComponent';\nimport defaultProps from './defaultProps';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\n\nimport type { AchConfiguration } from './types';\n\nexport class AchElement extends UIElement<AchConfiguration> {\n public static type = TxVariants.ach;\n\n protected static defaultProps = defaultProps;\n\n public override formatData() {\n const recurringPayment = !!this.props.storedPaymentMethodId;\n\n if (recurringPayment) {\n return {\n paymentMethod: {\n type: AchElement.type,\n storedPaymentMethodId: this.props.storedPaymentMethodId\n }\n };\n }\n\n return {\n paymentMethod: {\n type: AchElement.type,\n ownerName: this.state.data.ownerName,\n accountHolderType: this.state.data.selectedAccountType?.split('.')[0],\n bankAccountType: this.state.data.selectedAccountType?.split('.')[1],\n bankLocationId: this.state.data.routingNumber,\n bankAccountNumber: this.state.data.accountNumber\n },\n ...(this.state.storePaymentMethod && { storePaymentMethod: this.state.storePaymentMethod })\n };\n }\n\n public override get isValid(): boolean {\n if (this.props.storedPaymentMethodId) {\n return true;\n }\n\n return !!this.state.isValid;\n }\n\n public override get displayName(): string {\n if (this.props.storedPaymentMethodId && this.props.bankAccountNumber) {\n return `•••• ${this.props.bankAccountNumber.slice(-4)}`;\n }\n return this.props.name;\n }\n\n public override get additionalInfo(): string {\n return this.props.storedPaymentMethodId ? this.props.i18n.get('ach.savedBankAccount') : '';\n }\n\n render() {\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n {this.props.storedPaymentMethodId ? (\n <RedirectButton\n showPayButton={this.props.showPayButton}\n name={this.displayName}\n amount={this.props.amount}\n payButton={this.payButton}\n onSubmit={this.submit}\n ref={ref => {\n this.componentRef = ref;\n }}\n />\n ) : (\n <SRPanelProvider srPanel={this.props.modules.srPanel}>\n <AchComponent\n onChange={this.setState}\n payButton={this.payButton}\n showPayButton={this.props.showPayButton}\n hasHolderName={this.props.hasHolderName}\n placeholders={this.props.placeholders}\n setComponentRef={this.setComponentRef}\n enableStoreDetails={this.props.enableStoreDetails}\n />\n </SRPanelProvider>\n )}\n </CoreProvider>\n );\n }\n}\n\nexport default AchElement;\n"],"names":["AchElement","UIElement","formatData","this","props","storedPaymentMethodId","paymentMethod","type","ownerName","state","data","accountHolderType","selectedAccountType","split","bankAccountType","bankLocationId","routingNumber","bankAccountNumber","accountNumber","storePaymentMethod","isValid","displayName","slice","name","additionalInfo","i18n","get","render","h","CoreProvider","loadingContext","resources","RedirectButton","showPayButton","amount","payButton","onSubmit","submit","ref","componentRef","SRPanelProvider","srPanel","modules","AchComponent","onChange","setState","hasHolderName","placeholders","setComponentRef","enableStoreDetails","_define_property","TxVariants","ach","defaultProps"],"mappings":"0iBAWO,MAAMA,UAAmBC,EAKZC,UAAAA,GAGZ,QAF2BC,KAAKC,MAAMC,sBAG3B,CACHC,cAAe,CACXC,KAAMP,EAAWO,KACjBF,sBAAuBF,KAAKC,MAAMC,wBAKvC,CACHC,cAAe,CACXC,KAAMP,EAAWO,KACjBC,UAAWL,KAAKM,MAAMC,KAAKF,UAC3BG,kBAAmBR,KAAKM,MAAMC,KAAKE,qBAAqBC,MAAM,KAAK,GACnEC,gBAAiBX,KAAKM,MAAMC,KAAKE,qBAAqBC,MAAM,KAAK,GACjEE,eAAgBZ,KAAKM,MAAMC,KAAKM,cAChCC,kBAAmBd,KAAKM,MAAMC,KAAKQ,kBAEnCf,KAAKM,MAAMU,oBAAsB,CAAEA,mBAAoBhB,KAAKM,MAAMU,oBAE9E,CAEA,WAAoBC,GAChB,QAAIjB,KAAKC,MAAMC,yBAINF,KAAKM,MAAMW,OACxB,CAEA,eAAoBC,GAChB,OAAIlB,KAAKC,MAAMC,uBAAyBF,KAAKC,MAAMa,kBACxC,QAAQd,KAAKC,MAAMa,kBAAkBK,OAAM,KAE/CnB,KAAKC,MAAMmB,IACtB,CAEA,kBAAoBC,GAChB,OAAOrB,KAAKC,MAAMC,sBAAwBF,KAAKC,MAAMqB,KAAKC,IAAI,wBAA0B,EAC5F,CAEAC,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaJ,KAAMtB,KAAKC,MAAMqB,KAAMK,eAAgB3B,KAAKC,MAAM0B,eAAgBC,UAAW5B,KAAK4B,WAC3F5B,KAAKC,MAAMC,sBACRuB,EAACI,EAAAA,CACGC,cAAe9B,KAAKC,MAAM6B,cAC1BV,KAAMpB,KAAKkB,YACXa,OAAQ/B,KAAKC,MAAM8B,OACnBC,UAAWhC,KAAKgC,UAChBC,SAAUjC,KAAKkC,OACfC,IAAKA,IACDnC,KAAKoC,aAAeD,KAI5BV,EAACY,EAAAA,CAAgBC,QAAStC,KAAKC,MAAMsC,QAAQD,SACzCb,EAACe,EAAAA,CACGC,SAAUzC,KAAK0C,SACfV,UAAWhC,KAAKgC,UAChBF,cAAe9B,KAAKC,MAAM6B,cAC1Ba,cAAe3C,KAAKC,MAAM0C,cAC1BC,aAAc5C,KAAKC,MAAM2C,
|
|
1
|
+
{"version":3,"file":"Ach.js","sources":["../../../../src/components/Ach/Ach.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../internal/UIElement/UIElement';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport RedirectButton from '../internal/RedirectButton';\nimport { TxVariants } from '../tx-variants';\nimport AchComponent from './components/AchComponent';\nimport defaultProps from './defaultProps';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\n\nimport type { AchConfiguration } from './types';\n\nexport class AchElement extends UIElement<AchConfiguration> {\n public static type = TxVariants.ach;\n\n protected static defaultProps = defaultProps;\n\n public override formatData() {\n const recurringPayment = !!this.props.storedPaymentMethodId;\n\n if (recurringPayment) {\n return {\n paymentMethod: {\n type: AchElement.type,\n storedPaymentMethodId: this.props.storedPaymentMethodId\n }\n };\n }\n\n return {\n paymentMethod: {\n type: AchElement.type,\n ownerName: this.state.data.ownerName,\n accountHolderType: this.state.data.selectedAccountType?.split('.')[0],\n bankAccountType: this.state.data.selectedAccountType?.split('.')[1],\n bankLocationId: this.state.data.routingNumber,\n bankAccountNumber: this.state.data.accountNumber\n },\n ...(this.state.storePaymentMethod && { storePaymentMethod: this.state.storePaymentMethod })\n };\n }\n\n public override get isValid(): boolean {\n if (this.props.storedPaymentMethodId) {\n return true;\n }\n\n return !!this.state.isValid;\n }\n\n public override get displayName(): string {\n if (this.props.storedPaymentMethodId && this.props.bankAccountNumber) {\n return `•••• ${this.props.bankAccountNumber.slice(-4)}`;\n }\n return this.props.name;\n }\n\n public override get additionalInfo(): string {\n return this.props.storedPaymentMethodId ? this.props.i18n.get('ach.savedBankAccount') : '';\n }\n\n render() {\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n {this.props.storedPaymentMethodId ? (\n <RedirectButton\n showPayButton={this.props.showPayButton}\n name={this.displayName}\n amount={this.props.amount}\n payButton={this.payButton}\n onSubmit={this.submit}\n ref={ref => {\n this.componentRef = ref;\n }}\n />\n ) : (\n <SRPanelProvider srPanel={this.props.modules.srPanel}>\n <AchComponent\n onChange={this.setState}\n payButton={this.payButton}\n showPayButton={this.props.showPayButton}\n hasHolderName={this.props.hasHolderName}\n placeholders={this.props.placeholders}\n data={this.props.data}\n setComponentRef={this.setComponentRef}\n enableStoreDetails={this.props.enableStoreDetails}\n />\n </SRPanelProvider>\n )}\n </CoreProvider>\n );\n }\n}\n\nexport default AchElement;\n"],"names":["AchElement","UIElement","formatData","this","props","storedPaymentMethodId","paymentMethod","type","ownerName","state","data","accountHolderType","selectedAccountType","split","bankAccountType","bankLocationId","routingNumber","bankAccountNumber","accountNumber","storePaymentMethod","isValid","displayName","slice","name","additionalInfo","i18n","get","render","h","CoreProvider","loadingContext","resources","RedirectButton","showPayButton","amount","payButton","onSubmit","submit","ref","componentRef","SRPanelProvider","srPanel","modules","AchComponent","onChange","setState","hasHolderName","placeholders","setComponentRef","enableStoreDetails","_define_property","TxVariants","ach","defaultProps"],"mappings":"0iBAWO,MAAMA,UAAmBC,EAKZC,UAAAA,GAGZ,QAF2BC,KAAKC,MAAMC,sBAG3B,CACHC,cAAe,CACXC,KAAMP,EAAWO,KACjBF,sBAAuBF,KAAKC,MAAMC,wBAKvC,CACHC,cAAe,CACXC,KAAMP,EAAWO,KACjBC,UAAWL,KAAKM,MAAMC,KAAKF,UAC3BG,kBAAmBR,KAAKM,MAAMC,KAAKE,qBAAqBC,MAAM,KAAK,GACnEC,gBAAiBX,KAAKM,MAAMC,KAAKE,qBAAqBC,MAAM,KAAK,GACjEE,eAAgBZ,KAAKM,MAAMC,KAAKM,cAChCC,kBAAmBd,KAAKM,MAAMC,KAAKQ,kBAEnCf,KAAKM,MAAMU,oBAAsB,CAAEA,mBAAoBhB,KAAKM,MAAMU,oBAE9E,CAEA,WAAoBC,GAChB,QAAIjB,KAAKC,MAAMC,yBAINF,KAAKM,MAAMW,OACxB,CAEA,eAAoBC,GAChB,OAAIlB,KAAKC,MAAMC,uBAAyBF,KAAKC,MAAMa,kBACxC,QAAQd,KAAKC,MAAMa,kBAAkBK,OAAM,KAE/CnB,KAAKC,MAAMmB,IACtB,CAEA,kBAAoBC,GAChB,OAAOrB,KAAKC,MAAMC,sBAAwBF,KAAKC,MAAMqB,KAAKC,IAAI,wBAA0B,EAC5F,CAEAC,MAAAA,GACI,OACIC,EAACC,EAAAA,CAAaJ,KAAMtB,KAAKC,MAAMqB,KAAMK,eAAgB3B,KAAKC,MAAM0B,eAAgBC,UAAW5B,KAAK4B,WAC3F5B,KAAKC,MAAMC,sBACRuB,EAACI,EAAAA,CACGC,cAAe9B,KAAKC,MAAM6B,cAC1BV,KAAMpB,KAAKkB,YACXa,OAAQ/B,KAAKC,MAAM8B,OACnBC,UAAWhC,KAAKgC,UAChBC,SAAUjC,KAAKkC,OACfC,IAAKA,IACDnC,KAAKoC,aAAeD,KAI5BV,EAACY,EAAAA,CAAgBC,QAAStC,KAAKC,MAAMsC,QAAQD,SACzCb,EAACe,EAAAA,CACGC,SAAUzC,KAAK0C,SACfV,UAAWhC,KAAKgC,UAChBF,cAAe9B,KAAKC,MAAM6B,cAC1Ba,cAAe3C,KAAKC,MAAM0C,cAC1BC,aAAc5C,KAAKC,MAAM2C,aACzBrC,KAAMP,KAAKC,MAAMM,KACjBsC,gBAAiB7C,KAAK6C,gBACtBC,mBAAoB9C,KAAKC,MAAM6C,sBAMvD,EA9EAC,EADSlD,EACKO,OAAO4C,EAAWC,KAEhCF,EAHSlD,EAGQqD,eAAeA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useState as o,useRef as
|
|
1
|
+
import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useState as o,useRef as a,useEffect as t,useCallback as n}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import c from"../../internal/FormInstruction/FormInstruction.js";import{AccountTypeSelector as u}from"./AccountTypeSelector.js";import s from"../../internal/FormFields/Fieldset/Fieldset.js";import l from"../../../utils/useForm/useForm.js";import m from"../../internal/FormFields/Field/Field.js";import d from"../../internal/FormFields/InputText.js";import{achValidationRules as b,achFormatters as N}from"./validate.js";import p from"../../internal/StoreDetails/StoreDetails.js";import g from"./useSRPanelForACHErrors.js";import f from"../../../core/Context/useImage.js";import{PREFIX as h}from"../../internal/Icon/constants.js";function V({onChange:V,payButton:F,showPayButton:M,placeholders:j,data:y,hasHolderName:w,setComponentRef:A,enableStoreDetails:v}){const x=f(),C=r(()=>["selectedAccountType","routingNumber","accountNumber","accountNumberVerification",...w?["ownerName"]:[]],[w]),{i18n:I}=i(),[S,T]=o("ready"),{handleChangeFor:k,triggerValidation:B,data:q,errors:D,valid:P,isValid:E}=l({schema:C,defaultData:y,rules:b,formatters:N}),[H,R]=o(!1),_="loading"===S,$=a(!1),z=a({setStatus:T,showValidation:()=>{$.current=!0,B()}});t(()=>{A(z.current)},[A,z.current]),g({errors:D,data:q,isValidating:$}),t(()=>{V({data:q,valid:P,errors:D,isValid:E,storePaymentMethod:H})},[V,q,P,D,E,H]);const G=n(e=>{k("accountNumber","input")(e);!!D.accountNumberVerification&&B(["accountNumberVerification"])},[k,B,q.accountNumberVerification,D.accountNumberVerification]);return e("div",{className:"adyen-checkout__ach"},e(c,null),e(s,{classNameModifiers:[],label:I.get("ach.bankAccount.title")},e(u,{placeholder:j?.accountTypeSelector,onSelect:k("selectedAccountType"),selectedAccountType:q.selectedAccountType,disabled:_,errorMessage:!!D.selectedAccountType&&I.get(D.selectedAccountType.errorMessage)}),w&&e(m,{label:I.get("ach.accountHolderNameField.title"),errorMessage:!!D.ownerName&&I.get(D.ownerName.errorMessage),isValid:!!P.ownerName,name:"ownerName"},e(d,{disabled:_,name:"ownerName",placeholder:j?.ownerName,value:q.ownerName,onInput:k("ownerName","input"),onBlur:k("ownerName","blur"),required:!0})),e(m,{label:I.get("ach.routingNumber.label"),classNameModifiers:["col-60"],errorMessage:!!D.routingNumber&&I.get(D.routingNumber.errorMessage),name:"routingNumber",isValid:!!P.routingNumber},e(d,{disabled:_,name:"routingNumber",placeholder:j?.routingNumber,value:q.routingNumber,onInput:k("routingNumber","input"),onBlur:k("routingNumber","blur"),required:!0,maxlength:9})),e(m,{label:I.get("ach.bankAccountNumber.label"),classNameModifiers:["col-40"],errorMessage:!!D.accountNumber&&I.get(D.accountNumber.errorMessage),isValid:!!P.accountNumber,name:"accountNumber"},e(d,{disabled:_,name:"accountNumber",placeholder:j?.accountNumber,value:q.accountNumber,onInput:G,onBlur:k("accountNumber","blur"),required:!0,maxlength:17})),e(m,{label:I.get("ach.bankAccountNumberVerification.label"),errorMessage:!!D.accountNumberVerification&&I.get(D.accountNumberVerification.errorMessage),name:"accountNumberVerification",isValid:!!P.accountNumberVerification},e(d,{disabled:_,name:"accountNumberVerification",placeholder:j?.accountNumberVerification,value:q.accountNumberVerification,onInput:k("accountNumberVerification","input"),onBlur:k("accountNumberVerification","blur"),required:!0,maxlength:17}))),v&&e(p,{disabled:_,onChange:R}),M&&F({status:S,icon:x({imageFolder:"components/"})(`${h}lock`)}))}export{V as default};
|
|
2
2
|
//# sourceMappingURL=AchComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AchComponent.js","sources":["../../../../../src/components/Ach/components/AchComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { AccountTypeSelector } from './AccountTypeSelector';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { achValidationRules, achFormatters } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\nimport useSRPanelForAchErrors from './useSRPanelForACHErrors';\nimport useImage from '../../../core/Context/useImage';\nimport { PREFIX } from '../../internal/Icon/constants';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { AchPlaceholders } from '../types';\nimport type { AchStateErrors } from './useSRPanelForACHErrors';\n\ntype AchForm = {\n selectedAccountType: string;\n ownerName: string;\n routingNumber: string;\n accountNumber: string;\n accountNumberVerification: string;\n};\n\ninterface AchComponentProps {\n onChange({\n data,\n valid,\n errors,\n isValid,\n storePaymentMethod\n }: {\n data: AchForm;\n valid: { [key: string]: boolean };\n errors: { [key: string]: any };\n isValid: boolean;\n storePaymentMethod: boolean;\n }): void;\n payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n hasHolderName: boolean;\n showPayButton: boolean;\n enableStoreDetails: boolean;\n placeholders?: AchPlaceholders;\n}\n\nfunction AchComponent({ onChange, payButton, showPayButton, placeholders, hasHolderName, setComponentRef, enableStoreDetails }: AchComponentProps) {\n const getImage = useImage();\n const schema = useMemo(\n () => ['selectedAccountType', 'routingNumber', 'accountNumber', 'accountNumberVerification', ...(hasHolderName ? ['ownerName'] : [])],\n [hasHolderName]\n );\n const { i18n } = useCoreContext();\n const [status, setStatus] = useState('ready');\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<AchForm>({\n schema,\n rules: achValidationRules,\n formatters: achFormatters\n });\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n const isFormDisabled = status === 'loading';\n\n const isValidating = useRef(false);\n\n const achRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n isValidating.current = true;\n triggerValidation();\n }\n });\n\n useEffect(() => {\n setComponentRef(achRef.current);\n }, [setComponentRef, achRef.current]);\n\n useSRPanelForAchErrors({ errors: errors as AchStateErrors, data, isValidating });\n\n useEffect(() => {\n onChange({ data, valid, errors, isValid, storePaymentMethod });\n }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n /**\n * If the \"Verify account number\" field has errors, we want to trigger\n * its validation when there is any change done to the \"Account number\" field\n */\n const onAccountNumberInput = useCallback(\n (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n handleChangeFor('accountNumber', 'input')(event);\n\n const hasAccountVerificationError = !!errors.accountNumberVerification;\n if (hasAccountVerificationError) {\n triggerValidation(['accountNumberVerification']);\n }\n },\n [handleChangeFor, triggerValidation, data.accountNumberVerification, errors.accountNumberVerification]\n );\n\n return (\n <div className=\"adyen-checkout__ach\">\n <FormInstruction />\n\n <Fieldset classNameModifiers={[]} label={i18n.get('ach.bankAccount.title')}>\n <AccountTypeSelector\n placeholder={placeholders?.accountTypeSelector}\n onSelect={handleChangeFor('selectedAccountType')}\n selectedAccountType={data.selectedAccountType}\n disabled={isFormDisabled}\n errorMessage={!!errors.selectedAccountType && i18n.get(errors.selectedAccountType.errorMessage)}\n />\n\n {hasHolderName && (\n <Field\n label={i18n.get('ach.accountHolderNameField.title')}\n errorMessage={!!errors.ownerName && i18n.get(errors.ownerName.errorMessage)}\n isValid={!!valid.ownerName}\n name={'ownerName'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'ownerName'}\n placeholder={placeholders?.ownerName}\n value={data.ownerName}\n onInput={handleChangeFor('ownerName', 'input')}\n onBlur={handleChangeFor('ownerName', 'blur')}\n required={true}\n />\n </Field>\n )}\n\n <Field\n label={i18n.get('ach.routingNumber.label')}\n classNameModifiers={['col-60']}\n errorMessage={!!errors.routingNumber && i18n.get(errors.routingNumber.errorMessage)}\n name={'routingNumber'}\n isValid={!!valid.routingNumber}\n >\n <InputText\n disabled={isFormDisabled}\n name={'routingNumber'}\n placeholder={placeholders?.routingNumber}\n value={data.routingNumber}\n onInput={handleChangeFor('routingNumber', 'input')}\n onBlur={handleChangeFor('routingNumber', 'blur')}\n required={true}\n maxlength={9}\n />\n </Field>\n\n <Field\n label={i18n.get('ach.bankAccountNumber.label')}\n classNameModifiers={['col-40']}\n errorMessage={!!errors.accountNumber && i18n.get(errors.accountNumber.errorMessage)}\n isValid={!!valid.accountNumber}\n name={'accountNumber'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'accountNumber'}\n placeholder={placeholders?.accountNumber}\n value={data.accountNumber}\n onInput={onAccountNumberInput}\n onBlur={handleChangeFor('accountNumber', 'blur')}\n required={true}\n maxlength={17}\n />\n </Field>\n\n <Field\n label={i18n.get('ach.bankAccountNumberVerification.label')}\n errorMessage={!!errors.accountNumberVerification && i18n.get(errors.accountNumberVerification.errorMessage)}\n name={'accountNumberVerification'}\n isValid={!!valid.accountNumberVerification}\n >\n <InputText\n disabled={isFormDisabled}\n name={'accountNumberVerification'}\n placeholder={placeholders?.accountNumberVerification}\n value={data.accountNumberVerification}\n onInput={handleChangeFor('accountNumberVerification', 'input')}\n onBlur={handleChangeFor('accountNumberVerification', 'blur')}\n required={true}\n maxlength={17}\n />\n </Field>\n </Fieldset>\n\n {enableStoreDetails && <StoreDetails disabled={isFormDisabled} onChange={setStorePaymentMethod} />}\n\n {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`) })}\n </div>\n );\n}\n\nexport default AchComponent;\n"],"names":["AchComponent","onChange","payButton","showPayButton","placeholders","hasHolderName","setComponentRef","enableStoreDetails","getImage","useImage","schema","useMemo","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","data","errors","valid","isValid","useForm","rules","achValidationRules","formatters","achFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","isValidating","useRef","achRef","showValidation","current","useEffect","useSRPanelForAchErrors","onAccountNumberInput","useCallback","event","accountNumberVerification","h","div","className","FormInstruction","Fieldset","classNameModifiers","label","get","AccountTypeSelector","placeholder","accountTypeSelector","onSelect","selectedAccountType","disabled","errorMessage","Field","ownerName","name","InputText","value","onInput","onBlur","required","routingNumber","maxlength","accountNumber","StoreDetails","icon","imageFolder","PREFIX"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AchComponent.js","sources":["../../../../../src/components/Ach/components/AchComponent.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport FormInstruction from '../../internal/FormInstruction';\nimport { AccountTypeSelector } from './AccountTypeSelector';\nimport Fieldset from '../../internal/FormFields/Fieldset';\nimport useForm from '../../../utils/useForm';\nimport Field from '../../internal/FormFields/Field';\nimport InputText from '../../internal/FormFields/InputText';\nimport { achValidationRules, achFormatters } from './validate';\nimport StoreDetails from '../../internal/StoreDetails';\nimport useSRPanelForAchErrors from './useSRPanelForACHErrors';\nimport useImage from '../../../core/Context/useImage';\nimport { PREFIX } from '../../internal/Icon/constants';\n\nimport type { PayButtonProps } from '../../internal/PayButton/PayButton';\nimport type { ComponentMethodsRef } from '../../internal/UIElement/types';\nimport type { AchPlaceholders } from '../types';\nimport type { AchStateErrors } from './useSRPanelForACHErrors';\n\ntype AchForm = {\n selectedAccountType: string;\n ownerName: string;\n routingNumber: string;\n accountNumber: string;\n accountNumberVerification: string;\n};\n\nexport type AchFormPrefillData = Partial<Pick<AchForm, 'ownerName'>>;\n\ninterface AchComponentProps {\n onChange({\n data,\n valid,\n errors,\n isValid,\n storePaymentMethod\n }: {\n data: AchForm;\n valid: { [key: string]: boolean };\n errors: { [key: string]: any };\n isValid: boolean;\n storePaymentMethod: boolean;\n }): void;\n payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;\n setComponentRef: (ref: ComponentMethodsRef) => void;\n hasHolderName: boolean;\n showPayButton: boolean;\n enableStoreDetails: boolean;\n placeholders?: AchPlaceholders;\n data?: AchFormPrefillData;\n}\n\nfunction AchComponent({\n onChange,\n payButton,\n showPayButton,\n placeholders,\n data: defaultData,\n hasHolderName,\n setComponentRef,\n enableStoreDetails\n}: AchComponentProps) {\n const getImage = useImage();\n const schema = useMemo(\n () => ['selectedAccountType', 'routingNumber', 'accountNumber', 'accountNumberVerification', ...(hasHolderName ? ['ownerName'] : [])],\n [hasHolderName]\n );\n const { i18n } = useCoreContext();\n const [status, setStatus] = useState('ready');\n const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = useForm<AchForm>({\n schema,\n defaultData,\n rules: achValidationRules,\n formatters: achFormatters\n });\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n const isFormDisabled = status === 'loading';\n\n const isValidating = useRef(false);\n\n const achRef = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n isValidating.current = true;\n triggerValidation();\n }\n });\n\n useEffect(() => {\n setComponentRef(achRef.current);\n }, [setComponentRef, achRef.current]);\n\n useSRPanelForAchErrors({ errors: errors as AchStateErrors, data, isValidating });\n\n useEffect(() => {\n onChange({ data, valid, errors, isValid, storePaymentMethod });\n }, [onChange, data, valid, errors, isValid, storePaymentMethod]);\n\n /**\n * If the \"Verify account number\" field has errors, we want to trigger\n * its validation when there is any change done to the \"Account number\" field\n */\n const onAccountNumberInput = useCallback(\n (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n handleChangeFor('accountNumber', 'input')(event);\n\n const hasAccountVerificationError = !!errors.accountNumberVerification;\n if (hasAccountVerificationError) {\n triggerValidation(['accountNumberVerification']);\n }\n },\n [handleChangeFor, triggerValidation, data.accountNumberVerification, errors.accountNumberVerification]\n );\n\n return (\n <div className=\"adyen-checkout__ach\">\n <FormInstruction />\n\n <Fieldset classNameModifiers={[]} label={i18n.get('ach.bankAccount.title')}>\n <AccountTypeSelector\n placeholder={placeholders?.accountTypeSelector}\n onSelect={handleChangeFor('selectedAccountType')}\n selectedAccountType={data.selectedAccountType}\n disabled={isFormDisabled}\n errorMessage={!!errors.selectedAccountType && i18n.get(errors.selectedAccountType.errorMessage)}\n />\n\n {hasHolderName && (\n <Field\n label={i18n.get('ach.accountHolderNameField.title')}\n errorMessage={!!errors.ownerName && i18n.get(errors.ownerName.errorMessage)}\n isValid={!!valid.ownerName}\n name={'ownerName'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'ownerName'}\n placeholder={placeholders?.ownerName}\n value={data.ownerName}\n onInput={handleChangeFor('ownerName', 'input')}\n onBlur={handleChangeFor('ownerName', 'blur')}\n required={true}\n />\n </Field>\n )}\n\n <Field\n label={i18n.get('ach.routingNumber.label')}\n classNameModifiers={['col-60']}\n errorMessage={!!errors.routingNumber && i18n.get(errors.routingNumber.errorMessage)}\n name={'routingNumber'}\n isValid={!!valid.routingNumber}\n >\n <InputText\n disabled={isFormDisabled}\n name={'routingNumber'}\n placeholder={placeholders?.routingNumber}\n value={data.routingNumber}\n onInput={handleChangeFor('routingNumber', 'input')}\n onBlur={handleChangeFor('routingNumber', 'blur')}\n required={true}\n maxlength={9}\n />\n </Field>\n\n <Field\n label={i18n.get('ach.bankAccountNumber.label')}\n classNameModifiers={['col-40']}\n errorMessage={!!errors.accountNumber && i18n.get(errors.accountNumber.errorMessage)}\n isValid={!!valid.accountNumber}\n name={'accountNumber'}\n >\n <InputText\n disabled={isFormDisabled}\n name={'accountNumber'}\n placeholder={placeholders?.accountNumber}\n value={data.accountNumber}\n onInput={onAccountNumberInput}\n onBlur={handleChangeFor('accountNumber', 'blur')}\n required={true}\n maxlength={17}\n />\n </Field>\n\n <Field\n label={i18n.get('ach.bankAccountNumberVerification.label')}\n errorMessage={!!errors.accountNumberVerification && i18n.get(errors.accountNumberVerification.errorMessage)}\n name={'accountNumberVerification'}\n isValid={!!valid.accountNumberVerification}\n >\n <InputText\n disabled={isFormDisabled}\n name={'accountNumberVerification'}\n placeholder={placeholders?.accountNumberVerification}\n value={data.accountNumberVerification}\n onInput={handleChangeFor('accountNumberVerification', 'input')}\n onBlur={handleChangeFor('accountNumberVerification', 'blur')}\n required={true}\n maxlength={17}\n />\n </Field>\n </Fieldset>\n\n {enableStoreDetails && <StoreDetails disabled={isFormDisabled} onChange={setStorePaymentMethod} />}\n\n {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`) })}\n </div>\n );\n}\n\nexport default AchComponent;\n"],"names":["AchComponent","onChange","payButton","showPayButton","placeholders","data","defaultData","hasHolderName","setComponentRef","enableStoreDetails","getImage","useImage","schema","useMemo","i18n","useCoreContext","status","setStatus","useState","handleChangeFor","triggerValidation","errors","valid","isValid","useForm","rules","achValidationRules","formatters","achFormatters","storePaymentMethod","setStorePaymentMethod","isFormDisabled","isValidating","useRef","achRef","showValidation","current","useEffect","useSRPanelForAchErrors","onAccountNumberInput","useCallback","event","accountNumberVerification","h","div","className","FormInstruction","Fieldset","classNameModifiers","label","get","AccountTypeSelector","placeholder","accountTypeSelector","onSelect","selectedAccountType","disabled","errorMessage","Field","ownerName","name","InputText","value","onInput","onBlur","required","routingNumber","maxlength","accountNumber","StoreDetails","icon","imageFolder","PREFIX"],"mappings":"o4BAqDA,SAASA,GAAaC,SAClBA,EAAQC,UACRA,EAASC,cACTA,EAAaC,aACbA,EACAC,KAAMC,EAAWC,cACjBA,EAAaC,gBACbA,EAAeC,mBACfA,IAEA,MAAMC,EAAWC,IACXC,EAASC,EACX,IAAM,CAAC,sBAAuB,gBAAiB,gBAAiB,+BAAiCN,EAAgB,CAAC,aAAe,IACjI,CAACA,KAECO,KAAEA,GAASC,KACVC,EAAQC,GAAaC,EAAS,UAC/BC,gBAAEA,EAAeC,kBAAEA,EAAiBf,KAAEA,EAAIgB,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,GAAYC,EAAiB,CAC1FZ,SACAN,cACAmB,MAAOC,EACPC,WAAYC,KAETC,EAAoBC,GAAyBZ,GAAS,GACvDa,EAA4B,YAAXf,EAEjBgB,EAAeC,GAAO,GAEtBC,EAASD,EAA4B,CACvChB,UAAWA,EACXkB,eAAgB,KACZH,EAAaI,SAAU,EACvBhB,OAIRiB,EAAU,KACN7B,EAAgB0B,EAAOE,UACxB,CAAC5B,EAAiB0B,EAAOE,UAE5BE,EAAuB,CAAEjB,OAAQA,EAA0BhB,OAAM2B,iBAEjEK,EAAU,KACNpC,EAAS,CAAEI,OAAMiB,QAAOD,SAAQE,UAASM,wBAC1C,CAAC5B,EAAUI,EAAMiB,EAAOD,EAAQE,EAASM,IAM5C,MAAMU,EAAuBC,EACxBC,IACGtB,EAAgB,gBAAiB,QAAjCA,CAA0CsB,KAEJpB,EAAOqB,2BAEzCtB,EAAkB,CAAC,+BAG3B,CAACD,EAAiBC,EAAmBf,EAAKqC,0BAA2BrB,EAAOqB,4BAGhF,OACIC,EAACC,MAAAA,CAAIC,UAAU,uBACXF,EAACG,QAEDH,EAACI,EAAAA,CAASC,mBAAoB,GAAIC,MAAOnC,EAAKoC,IAAI,0BAC9CP,EAACQ,EAAAA,CACGC,YAAahD,GAAciD,oBAC3BC,SAAUnC,EAAgB,uBAC1BoC,oBAAqBlD,EAAKkD,oBAC1BC,SAAUzB,EACV0B,eAAgBpC,EAAOkC,qBAAuBzC,EAAKoC,IAAI7B,EAAOkC,oBAAoBE,gBAGrFlD,GACGoC,EAACe,EAAAA,CACGT,MAAOnC,EAAKoC,IAAI,oCAChBO,eAAgBpC,EAAOsC,WAAa7C,EAAKoC,IAAI7B,EAAOsC,UAAUF,cAC9DlC,UAAWD,EAAMqC,UACjBC,KAAM,aAENjB,EAACkB,EAAAA,CACGL,SAAUzB,EACV6B,KAAM,YACNR,YAAahD,GAAcuD,UAC3BG,MAAOzD,EAAKsD,UACZI,QAAS5C,EAAgB,YAAa,SACtC6C,OAAQ7C,EAAgB,YAAa,QACrC8C,UAAU,KAKtBtB,EAACe,EAAAA,CACGT,MAAOnC,EAAKoC,IAAI,2BAChBF,mBAAoB,CAAC,UACrBS,eAAgBpC,EAAO6C,eAAiBpD,EAAKoC,IAAI7B,EAAO6C,cAAcT,cACtEG,KAAM,gBACNrC,UAAWD,EAAM4C,eAEjBvB,EAACkB,EAAAA,CACGL,SAAUzB,EACV6B,KAAM,gBACNR,YAAahD,GAAc8D,cAC3BJ,MAAOzD,EAAK6D,cACZH,QAAS5C,EAAgB,gBAAiB,SAC1C6C,OAAQ7C,EAAgB,gBAAiB,QACzC8C,UAAU,EACVE,UAAW,KAInBxB,EAACe,EAAAA,CACGT,MAAOnC,EAAKoC,IAAI,+BAChBF,mBAAoB,CAAC,UACrBS,eAAgBpC,EAAO+C,eAAiBtD,EAAKoC,IAAI7B,EAAO+C,cAAcX,cACtElC,UAAWD,EAAM8C,cACjBR,KAAM,iBAENjB,EAACkB,EAAAA,CACGL,SAAUzB,EACV6B,KAAM,gBACNR,YAAahD,GAAcgE,cAC3BN,MAAOzD,EAAK+D,cACZL,QAASxB,EACTyB,OAAQ7C,EAAgB,gBAAiB,QACzC8C,UAAU,EACVE,UAAW,MAInBxB,EAACe,EAAAA,CACGT,MAAOnC,EAAKoC,IAAI,2CAChBO,eAAgBpC,EAAOqB,2BAA6B5B,EAAKoC,IAAI7B,EAAOqB,0BAA0Be,cAC9FG,KAAM,4BACNrC,UAAWD,EAAMoB,2BAEjBC,EAACkB,EAAAA,CACGL,SAAUzB,EACV6B,KAAM,4BACNR,YAAahD,GAAcsC,0BAC3BoB,MAAOzD,EAAKqC,0BACZqB,QAAS5C,EAAgB,4BAA6B,SACtD6C,OAAQ7C,EAAgB,4BAA6B,QACrD8C,UAAU,EACVE,UAAW,OAKtB1D,GAAsBkC,EAAC0B,EAAAA,CAAab,SAAUzB,EAAgB9B,SAAU6B,IAExE3B,GAAiBD,EAAU,CAAEc,SAAQsD,KAAM5D,EAAS,CAAE6D,YAAa,eAAxB7D,CAAyC,GAAG8D,WAGpG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSRPanelForACHErrors.js","sources":["../../../../../src/components/Ach/components/useSRPanelForACHErrors.ts"],"sourcesContent":["import { useEffect, useState, MutableRef } from 'preact/hooks';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface AchStateErrors {\n selectedAccountType: ValidationRuleResult;\n ownerName: ValidationRuleResult;\n routingNumber: ValidationRuleResult;\n accountNumber: ValidationRuleResult;\n accountNumberVerification: ValidationRuleResult;\n}\n\ninterface UseSRPanelForErrorsProps {\n errors: AchStateErrors;\n data: AchStateData;\n isValidating: MutableRef<boolean>;\n}\n\ninterface AchStateData {\n selectedAccountType: string;\n ownerName: string;\n routingNumber: string;\n accountNumber: string;\n accountNumberVerification: string;\n}\n\nconst useSRPanelForACHErrors = ({ errors, data, isValidating }: UseSRPanelForErrorsProps) => {\n // Relates to onBlur errors\n const [sortedErrorList, setSortedErrorList] = useState(null);\n // Get the previous value (Relates to onBlur errors)\n const previousSortedErrors = usePrevious(sortedErrorList);\n const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n // Fixed layout for the ACH comp\n const layout = ['selectedAccountType', 'ownerName', 'routingNumber', 'accountNumber', 'accountNumberVerification'];\n\n useEffect(() => {\n try {\n const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: isValidating.current, layout });\n\n // Relates to onBlur errors\n const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\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);\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 field in error, if required\n if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__ach', 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 /**\n * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n */\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 // In the case of the ACH form currently all the fields validate on blur\n const isBlurBasedError = true;\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 break;\n }\n default:\n break;\n }\n } catch (_) {\n // We don't handle the error related to the sr panel, let it fail silently.\n }\n }, [errors, data]);\n};\n\nexport default useSRPanelForACHErrors;\n"],"names":["useSRPanelForACHErrors","errors","data","isValidating","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","layout","useEffect","srPanelResp","current","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorMessage","_"],"mappings":"ubAgCA,MAAMA,EAAyB,EAAGC,SAAQC,OAAMC,mBAE5C,MAAOC,EAAiBC,GAAsBC,EAAS,MAEjDC,EAAuBC,EAAYJ,IACnCK,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAC1FC,EAAuCL,IAA2B,IAGlEM,EAAS,CAAC,sBAAuB,YAAa,gBAAiB,gBAAiB,6BAEtFC,EAAU,KACN,IACI,MAAMC,EAAyCH,IAAgB,CAAEb,SAAQE,aAAcA,EAAae,QAASH,WAGvGI,EAA8BF,GAAaE,4BAOjD,OALAd,EAAmBc,GAKXF,GAAaG,QAEjB,KAAKC,EAEGT,GAAmBU,EAAgB,uBAAwBL,EAAYM,cAE3EC,WAAW,KACPrB,EAAae,SAAU,GACxB,KACH,MAKJ,KAAKO,EAA4B,CAC7B,MAAMC,EAAaC,EAAoBR,EAA6BZ,EAAsB,SAEpFqB,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAGhB,MAGMC,GAHmB,EAGgBD,EAAeE,aAAe,KACvEpB,EAAyBmB,
|
|
1
|
+
{"version":3,"file":"useSRPanelForACHErrors.js","sources":["../../../../../src/components/Ach/components/useSRPanelForACHErrors.ts"],"sourcesContent":["import { useEffect, useState, MutableRef } from 'preact/hooks';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { usePrevious } from '../../../utils/hookUtils';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport { getArrayDifferences } from '../../../utils/arrayUtils';\nimport { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult';\n\nexport interface AchStateErrors {\n selectedAccountType: ValidationRuleResult;\n ownerName: ValidationRuleResult;\n routingNumber: ValidationRuleResult;\n accountNumber: ValidationRuleResult;\n accountNumberVerification: ValidationRuleResult;\n}\n\ninterface UseSRPanelForErrorsProps {\n errors: AchStateErrors;\n data: AchStateData;\n isValidating: MutableRef<boolean>;\n}\n\ninterface AchStateData {\n selectedAccountType: string;\n ownerName: string;\n routingNumber: string;\n accountNumber: string;\n accountNumberVerification: string;\n}\n\nconst useSRPanelForACHErrors = ({ errors, data, isValidating }: UseSRPanelForErrorsProps) => {\n // Relates to onBlur errors\n const [sortedErrorList, setSortedErrorList] = useState(null);\n // Get the previous value (Relates to onBlur errors)\n const previousSortedErrors = usePrevious(sortedErrorList);\n const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n // Fixed layout for the ACH comp\n const layout = ['selectedAccountType', 'ownerName', 'routingNumber', 'accountNumber', 'accountNumberVerification'];\n\n useEffect(() => {\n try {\n const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: isValidating.current, layout });\n\n // Relates to onBlur errors\n const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\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);\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 field in error, if required\n if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__ach', 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 /**\n * Relates to errors triggered by a field blurring (some pm forms have this, some don't) - check if there is an error to either set or to clear\n */\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 // In the case of the ACH form currently all the fields validate on blur\n const isBlurBasedError = true;\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 break;\n }\n default:\n break;\n }\n } catch (_) {\n // We don't handle the error related to the sr panel, let it fail silently.\n }\n }, [errors, data]);\n};\n\nexport default useSRPanelForACHErrors;\n"],"names":["useSRPanelForACHErrors","errors","data","isValidating","sortedErrorList","setSortedErrorList","useState","previousSortedErrors","usePrevious","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","layout","useEffect","srPanelResp","current","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","errorMessage","_"],"mappings":"ubAgCA,MAAMA,EAAyB,EAAGC,SAAQC,OAAMC,mBAE5C,MAAOC,EAAiBC,GAAsBC,EAAS,MAEjDC,EAAuBC,EAAYJ,IACnCK,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAC1FC,EAAuCL,IAA2B,IAGlEM,EAAS,CAAC,sBAAuB,YAAa,gBAAiB,gBAAiB,6BAEtFC,EAAU,KACN,IACI,MAAMC,EAAyCH,IAAgB,CAAEb,SAAQE,aAAcA,EAAae,QAASH,WAGvGI,EAA8BF,GAAaE,4BAOjD,OALAd,EAAmBc,GAKXF,GAAaG,QAEjB,KAAKC,EAEGT,GAAmBU,EAAgB,uBAAwBL,EAAYM,cAE3EC,WAAW,KACPrB,EAAae,SAAU,GACxB,KACH,MAKJ,KAAKO,EAA4B,CAC7B,MAAMC,EAAaC,EAAoBR,EAA6BZ,EAAsB,SAEpFqB,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAGhB,MAGMC,GAHmB,EAGgBD,EAAeE,aAAe,KACvEpB,EAAyBmB,EAC7B,MAEIlB,IAEJ,KACJ,EAIR,CAAE,MAAOoB,GAET,GACD,CAAC9B,EAAQC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as t}from"../../external/preact/dist/preact.js";import e from"./components/CardInput/CardInput.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import s from"../../utils/browserInfo.js";import i from"../internal/SecuredFields/binLookup/triggerBinLookUp.js";import{fieldTypeToSnakeCase as r}from"../internal/SecuredFields/utils.js";import{reject as n}from"../../utils/commonUtils.js";import{hasValidInstallmentsObject as a,getCardConfigData as p}from"./components/CardInput/utils.js";import c from"../internal/ClickToPay/services/create-clicktopay-service.js";import l from"./components/ClickToPayWrapper.js";import u from"../../core/Errors/SRPanelProvider.js";import{TxVariants as d}from"../tx-variants.js";import{UIElement as h}from"../internal/UIElement/UIElement.js";import m from"../internal/PayButton/PayButton.js";import{ANALYTICS_RENDERED_STR as y,ANALYTICS_CONFIGURED_STR as f,ANALYTICS_FOCUS_STR as b,ANALYTICS_UNFOCUS_STR as g}from"../../core/Analytics/constants.js";import{ALL_SECURED_FIELDS as P}from"../internal/SecuredFields/lib/constants.js";import{hasOwnProperty as C}from"../../utils/hasOwnProperty.js";import S,{IMPLEMENTATION_ERROR as k}from"../../core/Errors/AdyenCheckoutError.js";import R from"./components/CardInput/defaultProps.js";import{AnalyticsInfoEvent as T}from"../../core/Analytics/AnalyticsInfoEvent.js";function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}
|
|
1
|
+
import{createElement as t}from"../../external/preact/dist/preact.js";import e from"./components/CardInput/CardInput.js";import{CoreProvider as o}from"../../core/Context/CoreProvider.js";import s from"../../utils/browserInfo.js";import i from"../internal/SecuredFields/binLookup/triggerBinLookUp.js";import{fieldTypeToSnakeCase as r}from"../internal/SecuredFields/utils.js";import{reject as n}from"../../utils/commonUtils.js";import{hasValidInstallmentsObject as a,getCardConfigData as p}from"./components/CardInput/utils.js";import c from"../internal/ClickToPay/services/create-clicktopay-service.js";import l from"./components/ClickToPayWrapper.js";import u from"../../core/Errors/SRPanelProvider.js";import{TxVariants as d}from"../tx-variants.js";import{UIElement as h}from"../internal/UIElement/UIElement.js";import m from"../internal/PayButton/PayButton.js";import{ANALYTICS_RENDERED_STR as y,ANALYTICS_CONFIGURED_STR as f,ANALYTICS_FOCUS_STR as b,ANALYTICS_UNFOCUS_STR as g}from"../../core/Analytics/constants.js";import{ALL_SECURED_FIELDS as P}from"../internal/SecuredFields/lib/constants.js";import{hasOwnProperty as C}from"../../utils/hasOwnProperty.js";import S,{IMPLEMENTATION_ERROR as k}from"../../core/Errors/AdyenCheckoutError.js";import R from"./components/CardInput/defaultProps.js";import{AnalyticsInfoEvent as T}from"../../core/Analytics/AnalyticsInfoEvent.js";function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const I=["cartebancaire","bcmc","dankort"];class A extends h{setStatus(t,e){return this.componentRef?.setStatus&&this.componentRef.setStatus(t,e),this.clickToPayRef?.setStatus&&this.clickToPayRef.setStatus(t,e),this}formatProps(t){const e=t.session?.configuration?.enableStoreDetails??t.enableStoreDetails,o=!(0===t.amount?.value)&&e,s=t.storedPaymentMethodId||t.id,i=s&&t?.supportedShopperInteractions?.includes("Ecommerce");if(s&&!i)throw new S(k,"You are trying to create a storedCard from a stored PM that does not support Ecommerce interactions");return{...t,holderNameRequired:!!t.hasHolderName&&t.holderNameRequired,hasCVC:!(t.brand&&"bcmc"===t.brand||t.hideCVC),billingAddressRequired:!t.storedPaymentMethodId&&t.billingAddressRequired,billingAddressMode:t.onAddressLookup?R.billingAddressMode:t.billingAddressMode,brand:t.brand??d.card,countryCode:t.countryCode?t.countryCode.toLowerCase():null,configuration:{...t.configuration,socialSecurityNumberMode:t.configuration?.socialSecurityNumberMode??"auto"},brandsConfiguration:t.brandsConfiguration||t.configuration?.brandsConfiguration||{},icon:t.icon||t.configuration?.icon,installmentOptions:t.session?.configuration?.installmentOptions||t.installmentOptions,enableStoreDetails:e,showStoreDetailsCheckbox:o,clickToPayConfiguration:{...t.clickToPayConfiguration,disableOtpAutoFocus:t.clickToPayConfiguration?.disableOtpAutoFocus||!1,shopperEmail:t.clickToPayConfiguration?.shopperEmail||this.core.options?.session?.shopperEmail,telephoneNumber:t.clickToPayConfiguration?.telephoneNumber||this.core.options?.session?.telephoneNumber,locale:t.clickToPayConfiguration?.locale||t.i18n?.locale?.replace("-","_")},...s&&{storedPaymentMethodId:s}}}formatData(){const t=this.state.selectedBrandValue;return{paymentMethod:{type:A.type,...this.state.data,...this.props.storedPaymentMethodId&&{storedPaymentMethodId:this.props.storedPaymentMethodId,holderName:this.props.holderName??""},...t&&{brand:t},...this.props.fundingSource&&{fundingSource:this.props.fundingSource},...this.state.fastlaneData&&{fastlaneData:btoa(JSON.stringify(this.state.fastlaneData))}},...this.state.billingAddress&&{billingAddress:this.state.billingAddress},...this.state.socialSecurityNumber&&{socialSecurityNumber:this.state.socialSecurityNumber},...this.storePaymentMethodPayload,...a(this.state.installments)&&{installments:this.state.installments},browserInfo:this.browserInfo,origin:!!window&&window.location.origin}}updateStyles(t){return this.componentRef?.updateStyles&&this.componentRef.updateStyles(t),this}setFocusOn(t){return this.componentRef?.setFocusOn&&this.componentRef.setFocusOn(t),this}processBinLookupResponse(t,e=!1){return this.componentRef?.processBinLookupResponse&&this.componentRef.processBinLookupResponse(t,e),this}handleUnsupportedCard(t){return this.componentRef?.handleUnsupportedCard&&this.componentRef.handleUnsupportedCard(t),this}onBinLookup(t){if(!t.isReset){const e=n("supportedBrandsRaw").from(t);this.props.onBinLookup?.(e)}}submitAnalytics(t){const e=t instanceof T;(e&&t.type===y||e&&t.type===f)&&("scheme"===this.constructor.type&&C(this.props,"supportedShopperInteractions")&&(t.isStoredPaymentMethod=!0,t.brand=this.props.brand),e&&t.type===y&&(t.configData=p(this.props))),super.submitAnalytics(t)}get storePaymentMethodPayload(){if(this.props.storedPaymentMethodId?.length>0)return{};if(0===this.props.amount?.value)return this.props.enableStoreDetails?{storePaymentMethod:!0}:{};return this.props.showStoreDetailsCheckbox&&void 0!==this.state.storePaymentMethod?{storePaymentMethod:Boolean(this.state.storePaymentMethod)}:{}}get isValid(){return!!this.state.isValid}get icon(){return this.props.icon??this.resources.getImage()(this.props.brand)}get brands(){const{brands:t,brandsConfiguration:e}=this.props;return t?t.map(t=>({icon:e[t]?.icon??this.props.modules.resources.getImage()(t),name:t})):[]}get displayName(){return this.props.storedPaymentMethodId?`•••• ${this.props.lastFour}`:this.props.name||A.type}get accessibleName(){return(this.props.name||A.type)+(this.props.storedPaymentMethodId?" "+this.props.i18n.get("creditCard.storedCard.description.ariaLabel").replace("%@",this.props.lastFour):"")}get browserInfo(){return s()}renderCardInput(o=!0){return t(e,{setComponentRef:this.setComponentRef,...this.props,...this.state,onSubmitAnalytics:this.submitAnalytics,onChange:this.setState,onSubmit:this.submit,handleKeyPress:this.handleKeyPress,payButton:this.payButton,onBrand:this.onBrand,onBinValue:this.onBinValue,brand:this.props.brand,brandsIcons:this.brands,isPayButtonPrimaryVariant:o,resources:this.resources,onFocus:this.onFocus,onBlur:this.onBlur,onConfigSuccess:this.onConfigSuccess})}render(){return t(o,{i18n:this.props.i18n,loadingContext:this.props.loadingContext,resources:this.resources},t(u,{srPanel:this.props.modules.srPanel},t(l,{amount:this.props.amount,configuration:this.props.clickToPayConfiguration,clickToPayService:this.clickToPayService,isStandaloneComponent:!1,setClickToPayRef:this.setClickToPayRef,onSetStatus:this.setElementStatus,onSubmit:this.handleClickToPaySubmit,onError:this.handleError},t=>this.renderCardInput(t))))}constructor(e,o){super(e,o),B(this,"clickToPayService",void 0),B(this,"clickToPayRef",null),B(this,"setClickToPayRef",t=>{this.clickToPayRef=t}),B(this,"onBrand",t=>{this.props.onBrand?.(t)}),B(this,"handleClickToPaySubmit",t=>{this.setState({data:{...t},valid:{},errors:{},isValid:!0}),this.submit()}),B(this,"onConfigSuccess",t=>{const e=new T({type:f});this.submitAnalytics(e),this.props.onConfigSuccess?.(t)}),B(this,"onFocus",t=>{const e=new T({type:b,target:r(t.fieldType)});this.submitAnalytics(e),P.includes(t.fieldType)?this.props.onFocus?.(t.event):this.props.onFocus?.(t)}),B(this,"onBlur",t=>{const e=new T({type:g,target:r(t.fieldType)});this.submitAnalytics(e),P.includes(t.fieldType)?this.props.onBlur?.(t.event):this.props.onBlur?.(t)}),B(this,"onBinValue",i(this)),B(this,"payButton",e=>{const o=0===this.props.amount?.value,s=this.props.storedPaymentMethodId?.length>0;return t(m,{...e,amount:this.props.amount,secondaryAmount:this.props.secondaryAmount,label:o&&!s?this.props.i18n.get("payButton.saveDetails"):"",onClick:this.submit})}),o&&!o._disableClickToPay&&(this.clickToPayService=c(this.props.configuration,this.props.clickToPayConfiguration,this.props.environment),this.clickToPayService?.initialize())}}B(A,"type",d.scheme),B(A,"defaultProps",{showFormInstruction:!0,_disableClickToPay:!1,doBinLookup:!0,...n(["type","setComponentRef"]).from(R)});export{A as CardElement,I as DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM,A as default};
|
|
2
2
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { h } from 'preact';\nimport CardInput from './components/CardInput';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport collectBrowserInfo from '../../utils/browserInfo';\nimport { BinLookupResponse, CardElementData, CardConfiguration } from './types';\nimport triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';\nimport { CardBinLookupData, CardConfigSuccessData, CardFocusData } from '../internal/SecuredFields/lib/types';\nimport { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';\nimport { reject } from '../../utils/commonUtils';\nimport { hasValidInstallmentsObject } from './components/CardInput/utils';\nimport createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service';\nimport { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types';\nimport ClickToPayWrapper from './components/ClickToPayWrapper';\nimport { ComponentFocusObject } from '../../types/global-types';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\nimport { TxVariants } from '../tx-variants';\nimport type { PayButtonFunctionProps, UIElementStatus } from '../internal/UIElement/types';\nimport UIElement from '../internal/UIElement';\nimport PayButton from '../internal/PayButton';\nimport type { ICore } from '../../core/types';\nimport { ANALYTICS_FOCUS_STR, ANALYTICS_CONFIGURED_STR, ANALYTICS_UNFOCUS_STR, ANALYTICS_RENDERED_STR } from '../../core/Analytics/constants';\nimport { ALL_SECURED_FIELDS } from '../internal/SecuredFields/lib/constants';\nimport { hasOwnProperty } from '../../utils/hasOwnProperty';\nimport AdyenCheckoutError, { IMPLEMENTATION_ERROR } from '../../core/Errors/AdyenCheckoutError';\nimport CardInputDefaultProps from './components/CardInput/defaultProps';\nimport { getCardConfigData } from './components/CardInput/utils';\nimport { AnalyticsEvent } from '../../core/Analytics/AnalyticsEvent';\nimport { AnalyticsInfoEvent } from '../../core/Analytics/AnalyticsInfoEvent';\n\nexport class CardElement extends UIElement<CardConfiguration> {\n public static type = TxVariants.scheme;\n\n private readonly clickToPayService: IClickToPayService | null;\n\n /**\n * Reference to the 'ClickToPayComponent'\n */\n private clickToPayRef = null;\n\n constructor(checkout: ICore, props?: CardConfiguration) {\n super(checkout, props);\n\n if (props && !props._disableClickToPay) {\n this.clickToPayService = createClickToPayService(this.props.configuration, this.props.clickToPayConfiguration, this.props.environment);\n void this.clickToPayService?.initialize();\n }\n }\n\n protected static defaultProps = {\n showFormInstruction: true,\n _disableClickToPay: false,\n doBinLookup: true,\n // Merge most of CardInput's defaultProps\n ...reject(['type', 'setComponentRef']).from(CardInputDefaultProps)\n };\n\n public setStatus(status: UIElementStatus, props?): this {\n if (this.componentRef?.setStatus) {\n this.componentRef.setStatus(status, props);\n }\n if (this.clickToPayRef?.setStatus) {\n this.clickToPayRef.setStatus(status, props);\n }\n return this;\n }\n\n private setClickToPayRef = ref => {\n this.clickToPayRef = ref;\n };\n\n formatProps(props: CardConfiguration): CardConfiguration {\n // The value from a session should be used, before falling back to the merchant configuration\n const enableStoreDetails = props.session?.configuration?.enableStoreDetails ?? props.enableStoreDetails;\n\n const isZeroAuth = props.amount?.value === 0;\n const showStoreDetailsCheckbox = isZeroAuth ? false : enableStoreDetails;\n\n const storedCardID = props.storedPaymentMethodId || props.id; // check if we've been passed a (checkout) processed storedCard or one that merchant has pulled from the PMs response\n const isEcommerceStoredCard = storedCardID && props?.supportedShopperInteractions?.includes('Ecommerce'); // If we have a storedCard does it support Ecommerce (it might not if the merchant has pulled it from the PMs response)\n\n // If we have a storedPM but it doesn't support Ecommerce - we can't make a storedCard component from it\n if (storedCardID && !isEcommerceStoredCard) {\n // TODO - Decide if an error is too severe? Would a console.warning suffice?\n throw new AdyenCheckoutError(\n IMPLEMENTATION_ERROR,\n 'You are trying to create a storedCard from a stored PM that does not support Ecommerce interactions'\n );\n }\n\n return {\n ...props,\n // Mismatch between hasHolderName & holderNameRequired which can mean card can never be valid\n holderNameRequired: !props.hasHolderName ? false : props.holderNameRequired,\n // False for *stored* BCMC cards & if merchant explicitly wants to hide the CVC field\n hasCVC: !((props.brand && props.brand === 'bcmc') || props.hideCVC),\n // billingAddressRequired only available for non-stored cards\n billingAddressRequired: props.storedPaymentMethodId ? false : props.billingAddressRequired,\n // edge case where merchant has defined both an onAddressLookup callback AND set billingAddressMode: 'partial' - which leads to some strange behaviour in the address UI\n billingAddressMode: props.onAddressLookup ? CardInputDefaultProps.billingAddressMode : props.billingAddressMode,\n /** props.brand will be specified in the case of a StoredCard or a Bancontact component, for a regular Card we default it to 'card' */\n brand: props.brand ?? TxVariants.card,\n countryCode: props.countryCode ? props.countryCode.toLowerCase() : null,\n // Required for transition period (until configuration object becomes the norm)\n // - if merchant has defined value directly in props, use this instead\n configuration: {\n ...props.configuration,\n socialSecurityNumberMode: props.configuration?.socialSecurityNumberMode ?? 'auto'\n },\n brandsConfiguration: props.brandsConfiguration || props.configuration?.brandsConfiguration || {},\n icon: props.icon || props.configuration?.icon,\n // installmentOptions of a session should be used before falling back to the merchant configuration\n installmentOptions: props.session?.configuration?.installmentOptions || props.installmentOptions,\n enableStoreDetails,\n showStoreDetailsCheckbox,\n /**\n * Click to Pay configuration\n * - If email is set explicitly in the configuration, then it can override the one used in the session creation\n */\n clickToPayConfiguration: {\n ...props.clickToPayConfiguration,\n disableOtpAutoFocus: props.clickToPayConfiguration?.disableOtpAutoFocus || false,\n shopperEmail: props.clickToPayConfiguration?.shopperEmail || this.core.options?.session?.shopperEmail,\n telephoneNumber: props.clickToPayConfiguration?.telephoneNumber || this.core.options?.session?.telephoneNumber,\n locale: props.clickToPayConfiguration?.locale || props.i18n?.locale?.replace('-', '_')\n },\n ...(storedCardID && { storedPaymentMethodId: storedCardID })\n };\n }\n\n /**\n * Formats the component data output\n */\n formatData(): CardElementData {\n /**\n * this.state.selectedBrandValue will be set when:\n * - /binLookup detects a single brand,\n * - when /binLookup detects a dual-branded card and the shopper makes a brand selection\n * - or, in the case of a storedCard\n */\n const cardBrand = this.state.selectedBrandValue;\n\n return {\n paymentMethod: {\n type: CardElement.type,\n ...this.state.data,\n ...(this.props.storedPaymentMethodId && {\n storedPaymentMethodId: this.props.storedPaymentMethodId,\n holderName: this.props.holderName ?? ''\n }),\n ...(cardBrand && { brand: cardBrand }),\n ...(this.props.fundingSource && { fundingSource: this.props.fundingSource }),\n ...(this.state.fastlaneData && { fastlaneData: btoa(JSON.stringify(this.state.fastlaneData)) })\n },\n ...(this.state.billingAddress && { billingAddress: this.state.billingAddress }),\n ...(this.state.socialSecurityNumber && { socialSecurityNumber: this.state.socialSecurityNumber }),\n ...this.storePaymentMethodPayload,\n ...(hasValidInstallmentsObject(this.state.installments) && { installments: this.state.installments }),\n browserInfo: this.browserInfo,\n origin: !!window && window.location.origin\n };\n }\n\n updateStyles(stylesObj) {\n if (this.componentRef?.updateStyles) this.componentRef.updateStyles(stylesObj);\n return this;\n }\n\n setFocusOn(fieldName) {\n if (this.componentRef?.setFocusOn) this.componentRef.setFocusOn(fieldName);\n return this;\n }\n\n public onBrand = event => {\n this.props.onBrand?.(event);\n };\n\n processBinLookupResponse(binLookupResponse: BinLookupResponse, isReset = false) {\n if (this.componentRef?.processBinLookupResponse) this.componentRef.processBinLookupResponse(binLookupResponse, isReset);\n return this;\n }\n\n handleUnsupportedCard(errObj) {\n if (this.componentRef?.handleUnsupportedCard) this.componentRef.handleUnsupportedCard(errObj);\n return this;\n }\n\n private handleClickToPaySubmit = (payload: ClickToPayCheckoutPayload) => {\n this.setState({ data: { ...payload }, valid: {}, errors: {}, isValid: true });\n this.submit();\n };\n\n onBinLookup(obj: CardBinLookupData) {\n // Handler for regular card comp doesn't need this 'raw' data or to know about 'resets'\n if (!obj.isReset) {\n const nuObj = reject('supportedBrandsRaw').from(obj);\n this.props.onBinLookup?.(nuObj);\n }\n }\n\n protected submitAnalytics(analyticsObj: AnalyticsEvent) {\n const isInfoType = analyticsObj instanceof AnalyticsInfoEvent;\n\n if ((isInfoType && analyticsObj.type === ANALYTICS_RENDERED_STR) || (isInfoType && analyticsObj.type === ANALYTICS_CONFIGURED_STR)) {\n // Check if it's a storedCard\n if (this.constructor['type'] === 'scheme') {\n if (hasOwnProperty(this.props, 'supportedShopperInteractions')) {\n analyticsObj.isStoredPaymentMethod = true;\n analyticsObj.brand = this.props.brand;\n }\n }\n\n // Add config data\n if (isInfoType && analyticsObj.type === ANALYTICS_RENDERED_STR) {\n analyticsObj.configData = getCardConfigData(this.props);\n }\n }\n\n super.submitAnalytics(analyticsObj);\n }\n\n private onConfigSuccess = (obj: CardConfigSuccessData) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_CONFIGURED_STR });\n this.submitAnalytics(event);\n\n this.props.onConfigSuccess?.(obj);\n };\n\n private onFocus = (obj: ComponentFocusObject) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_FOCUS_STR, target: fieldTypeToSnakeCase(obj.fieldType) });\n this.submitAnalytics(event);\n\n // Call merchant defined callback\n if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {\n this.props.onFocus?.(obj.event as CardFocusData);\n } else {\n this.props.onFocus?.(obj);\n }\n };\n\n private onBlur = (obj: ComponentFocusObject) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_UNFOCUS_STR, target: fieldTypeToSnakeCase(obj.fieldType) });\n this.submitAnalytics(event);\n\n // Call merchant defined callback\n if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {\n this.props.onBlur?.(obj.event as CardFocusData);\n } else {\n this.props.onBlur?.(obj);\n }\n };\n\n public onBinValue = triggerBinLookUp(this);\n\n get storePaymentMethodPayload() {\n const isStoredCard = this.props.storedPaymentMethodId?.length > 0;\n if (isStoredCard) {\n return {};\n }\n\n /**\n * For regular card, zero auth payments, we store the payment method, *if* the configuration says we should:\n * - For sessions, this means if the session has been created with storePaymentMethodMode: 'askForConsent'\n * - For the advanced flow, this means if the merchant has still set enableStoreDetails: true\n *\n * What we are doing is.. if for a normal payment we would show the \"Save for my next payment\" checkbox,\n * for a zero-auth payment we effectively click the checkbox on behalf of the shopper.\n */\n const isZeroAuth = this.props.amount?.value === 0;\n if (isZeroAuth) {\n return this.props.enableStoreDetails ? { storePaymentMethod: true } : {};\n }\n\n // For regular card, non-zero auth payments, we store the payment method based on the checkbox value.\n const includeStorePaymentMethod = this.props.showStoreDetailsCheckbox && typeof this.state.storePaymentMethod !== 'undefined';\n return includeStorePaymentMethod ? { storePaymentMethod: Boolean(this.state.storePaymentMethod) } : {};\n }\n\n get isValid() {\n return !!this.state.isValid;\n }\n\n get icon() {\n return this.props.icon ?? this.resources.getImage()(this.props.brand);\n }\n\n get brands(): { icon: any; name: string }[] {\n const { brands, brandsConfiguration } = this.props;\n if (brands) {\n return brands.map(brand => {\n const brandIcon = brandsConfiguration[brand]?.icon ?? this.props.modules.resources.getImage()(brand);\n return { icon: brandIcon, name: brand };\n });\n }\n\n return [];\n }\n\n get displayName(): string {\n if (this.props.storedPaymentMethodId) {\n return `•••• ${this.props.lastFour}`;\n }\n\n return this.props.name || CardElement.type;\n }\n\n get accessibleName(): string {\n // Use display name, unless it's a stored payment method, there inform user\n return (\n (this.props.name || CardElement.type) +\n (this.props.storedPaymentMethodId\n ? ' ' + this.props.i18n.get('creditCard.storedCard.description.ariaLabel').replace('%@', this.props.lastFour)\n : '')\n );\n }\n\n get browserInfo() {\n return collectBrowserInfo();\n }\n\n protected override payButton = (props: PayButtonFunctionProps) => {\n const isZeroAuth = this.props.amount?.value === 0;\n const isStoredCard = this.props.storedPaymentMethodId?.length > 0;\n return (\n <PayButton\n {...props}\n amount={this.props.amount}\n secondaryAmount={this.props.secondaryAmount}\n label={isZeroAuth && !isStoredCard ? this.props.i18n.get('payButton.saveDetails') : ''}\n onClick={this.submit}\n />\n );\n };\n\n private renderCardInput(isCardPrimaryInput = true): h.JSX.Element {\n return (\n <CardInput\n setComponentRef={this.setComponentRef}\n {...this.props}\n {...this.state}\n onSubmitAnalytics={this.submitAnalytics}\n onChange={this.setState}\n onSubmit={this.submit}\n handleKeyPress={this.handleKeyPress}\n payButton={this.payButton}\n onBrand={this.onBrand}\n onBinValue={this.onBinValue}\n brand={this.props.brand}\n brandsIcons={this.brands}\n isPayButtonPrimaryVariant={isCardPrimaryInput}\n resources={this.resources}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onConfigSuccess={this.onConfigSuccess}\n />\n );\n }\n\n render() {\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n <SRPanelProvider srPanel={this.props.modules.srPanel}>\n <ClickToPayWrapper\n amount={this.props.amount}\n configuration={this.props.clickToPayConfiguration}\n clickToPayService={this.clickToPayService}\n isStandaloneComponent={false}\n setClickToPayRef={this.setClickToPayRef}\n onSetStatus={this.setElementStatus}\n onSubmit={this.handleClickToPaySubmit}\n onError={this.handleError}\n >\n {isCardPrimaryInput => this.renderCardInput(isCardPrimaryInput)}\n </ClickToPayWrapper>\n </SRPanelProvider>\n </CoreProvider>\n );\n }\n}\n\nexport default CardElement;\n"],"names":["CardElement","UIElement","setStatus","status","props","this","componentRef","clickToPayRef","formatProps","enableStoreDetails","session","configuration","showStoreDetailsCheckbox","amount","value","storedCardID","storedPaymentMethodId","id","isEcommerceStoredCard","supportedShopperInteractions","includes","AdyenCheckoutError","IMPLEMENTATION_ERROR","holderNameRequired","hasHolderName","hasCVC","brand","hideCVC","billingAddressRequired","billingAddressMode","onAddressLookup","CardInputDefaultProps","TxVariants","card","countryCode","toLowerCase","socialSecurityNumberMode","brandsConfiguration","icon","installmentOptions","clickToPayConfiguration","disableOtpAutoFocus","shopperEmail","core","options","telephoneNumber","locale","i18n","replace","formatData","cardBrand","state","selectedBrandValue","paymentMethod","type","data","holderName","fundingSource","fastlaneData","btoa","JSON","stringify","billingAddress","socialSecurityNumber","storePaymentMethodPayload","hasValidInstallmentsObject","installments","browserInfo","origin","window","location","updateStyles","stylesObj","setFocusOn","fieldName","processBinLookupResponse","binLookupResponse","isReset","handleUnsupportedCard","errObj","onBinLookup","obj","nuObj","reject","from","submitAnalytics","analyticsObj","isInfoType","AnalyticsInfoEvent","ANALYTICS_RENDERED_STR","ANALYTICS_CONFIGURED_STR","constructor","hasOwnProperty","isStoredPaymentMethod","configData","getCardConfigData","super","length","storePaymentMethod","Boolean","isValid","resources","getImage","brands","map","modules","name","displayName","lastFour","accessibleName","get","collectBrowserInfo","renderCardInput","isCardPrimaryInput","h","CardInput","setComponentRef","onSubmitAnalytics","onChange","setState","onSubmit","submit","handleKeyPress","payButton","onBrand","onBinValue","brandsIcons","isPayButtonPrimaryVariant","onFocus","onBlur","onConfigSuccess","render","CoreProvider","loadingContext","SRPanelProvider","srPanel","ClickToPayWrapper","clickToPayService","isStandaloneComponent","setClickToPayRef","onSetStatus","setElementStatus","handleClickToPaySubmit","onError","handleError","checkout","_define_property","ref","event","payload","valid","errors","ANALYTICS_FOCUS_STR","target","fieldTypeToSnakeCase","fieldType","ALL_SECURED_FIELDS","ANALYTICS_UNFOCUS_STR","triggerBinLookUp","isZeroAuth","isStoredCard","PayButton","secondaryAmount","label","onClick","_disableClickToPay","createClickToPayService","environment","initialize","scheme","defaultProps","showFormInstruction","doBinLookup"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { h } from 'preact';\nimport CardInput from './components/CardInput';\nimport { CoreProvider } from '../../core/Context/CoreProvider';\nimport collectBrowserInfo from '../../utils/browserInfo';\nimport { BinLookupResponse, CardElementData, CardConfiguration } from './types';\nimport triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';\nimport { CardBinLookupData, CardConfigSuccessData, CardFocusData } from '../internal/SecuredFields/lib/types';\nimport { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';\nimport { reject } from '../../utils/commonUtils';\nimport { hasValidInstallmentsObject } from './components/CardInput/utils';\nimport createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service';\nimport { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types';\nimport ClickToPayWrapper from './components/ClickToPayWrapper';\nimport { ComponentFocusObject } from '../../types/global-types';\nimport SRPanelProvider from '../../core/Errors/SRPanelProvider';\nimport { TxVariants } from '../tx-variants';\nimport type { PayButtonFunctionProps, UIElementStatus } from '../internal/UIElement/types';\nimport UIElement from '../internal/UIElement';\nimport PayButton from '../internal/PayButton';\nimport type { ICore } from '../../core/types';\nimport { ANALYTICS_FOCUS_STR, ANALYTICS_CONFIGURED_STR, ANALYTICS_UNFOCUS_STR, ANALYTICS_RENDERED_STR } from '../../core/Analytics/constants';\nimport { ALL_SECURED_FIELDS } from '../internal/SecuredFields/lib/constants';\nimport { hasOwnProperty } from '../../utils/hasOwnProperty';\nimport AdyenCheckoutError, { IMPLEMENTATION_ERROR } from '../../core/Errors/AdyenCheckoutError';\nimport CardInputDefaultProps from './components/CardInput/defaultProps';\nimport { getCardConfigData } from './components/CardInput/utils';\nimport { AnalyticsEvent } from '../../core/Analytics/AnalyticsEvent';\nimport { AnalyticsInfoEvent } from '../../core/Analytics/AnalyticsInfoEvent';\n\nexport const DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM = ['cartebancaire', 'bcmc', 'dankort'];\n\nexport class CardElement extends UIElement<CardConfiguration> {\n public static type = TxVariants.scheme;\n\n private readonly clickToPayService: IClickToPayService | null;\n\n /**\n * Reference to the 'ClickToPayComponent'\n */\n private clickToPayRef = null;\n\n constructor(checkout: ICore, props?: CardConfiguration) {\n super(checkout, props);\n\n if (props && !props._disableClickToPay) {\n this.clickToPayService = createClickToPayService(this.props.configuration, this.props.clickToPayConfiguration, this.props.environment);\n void this.clickToPayService?.initialize();\n }\n }\n\n protected static defaultProps = {\n showFormInstruction: true,\n _disableClickToPay: false,\n doBinLookup: true,\n // Merge most of CardInput's defaultProps\n ...reject(['type', 'setComponentRef']).from(CardInputDefaultProps)\n };\n\n public setStatus(status: UIElementStatus, props?): this {\n if (this.componentRef?.setStatus) {\n this.componentRef.setStatus(status, props);\n }\n if (this.clickToPayRef?.setStatus) {\n this.clickToPayRef.setStatus(status, props);\n }\n return this;\n }\n\n private setClickToPayRef = ref => {\n this.clickToPayRef = ref;\n };\n\n formatProps(props: CardConfiguration): CardConfiguration {\n // The value from a session should be used, before falling back to the merchant configuration\n const enableStoreDetails = props.session?.configuration?.enableStoreDetails ?? props.enableStoreDetails;\n\n const isZeroAuth = props.amount?.value === 0;\n const showStoreDetailsCheckbox = isZeroAuth ? false : enableStoreDetails;\n\n const storedCardID = props.storedPaymentMethodId || props.id; // check if we've been passed a (checkout) processed storedCard or one that merchant has pulled from the PMs response\n const isEcommerceStoredCard = storedCardID && props?.supportedShopperInteractions?.includes('Ecommerce'); // If we have a storedCard does it support Ecommerce (it might not if the merchant has pulled it from the PMs response)\n\n // If we have a storedPM but it doesn't support Ecommerce - we can't make a storedCard component from it\n if (storedCardID && !isEcommerceStoredCard) {\n // TODO - Decide if an error is too severe? Would a console.warning suffice?\n throw new AdyenCheckoutError(\n IMPLEMENTATION_ERROR,\n 'You are trying to create a storedCard from a stored PM that does not support Ecommerce interactions'\n );\n }\n\n return {\n ...props,\n // Mismatch between hasHolderName & holderNameRequired which can mean card can never be valid\n holderNameRequired: !props.hasHolderName ? false : props.holderNameRequired,\n // False for *stored* BCMC cards & if merchant explicitly wants to hide the CVC field\n hasCVC: !((props.brand && props.brand === 'bcmc') || props.hideCVC),\n // billingAddressRequired only available for non-stored cards\n billingAddressRequired: props.storedPaymentMethodId ? false : props.billingAddressRequired,\n // edge case where merchant has defined both an onAddressLookup callback AND set billingAddressMode: 'partial' - which leads to some strange behaviour in the address UI\n billingAddressMode: props.onAddressLookup ? CardInputDefaultProps.billingAddressMode : props.billingAddressMode,\n /** props.brand will be specified in the case of a StoredCard or a Bancontact component, for a regular Card we default it to 'card' */\n brand: props.brand ?? TxVariants.card,\n countryCode: props.countryCode ? props.countryCode.toLowerCase() : null,\n // Required for transition period (until configuration object becomes the norm)\n // - if merchant has defined value directly in props, use this instead\n configuration: {\n ...props.configuration,\n socialSecurityNumberMode: props.configuration?.socialSecurityNumberMode ?? 'auto'\n },\n brandsConfiguration: props.brandsConfiguration || props.configuration?.brandsConfiguration || {},\n icon: props.icon || props.configuration?.icon,\n // installmentOptions of a session should be used before falling back to the merchant configuration\n installmentOptions: props.session?.configuration?.installmentOptions || props.installmentOptions,\n enableStoreDetails,\n showStoreDetailsCheckbox,\n /**\n * Click to Pay configuration\n * - If email is set explicitly in the configuration, then it can override the one used in the session creation\n */\n clickToPayConfiguration: {\n ...props.clickToPayConfiguration,\n disableOtpAutoFocus: props.clickToPayConfiguration?.disableOtpAutoFocus || false,\n shopperEmail: props.clickToPayConfiguration?.shopperEmail || this.core.options?.session?.shopperEmail,\n telephoneNumber: props.clickToPayConfiguration?.telephoneNumber || this.core.options?.session?.telephoneNumber,\n locale: props.clickToPayConfiguration?.locale || props.i18n?.locale?.replace('-', '_')\n },\n ...(storedCardID && { storedPaymentMethodId: storedCardID })\n };\n }\n\n /**\n * Formats the component data output\n */\n formatData(): CardElementData {\n /**\n * this.state.selectedBrandValue will be set when:\n * - /binLookup detects a single brand,\n * - when /binLookup detects a dual-branded card and the shopper makes a brand selection\n * - or, in the case of a storedCard\n */\n const cardBrand = this.state.selectedBrandValue;\n\n return {\n paymentMethod: {\n type: CardElement.type,\n ...this.state.data,\n ...(this.props.storedPaymentMethodId && {\n storedPaymentMethodId: this.props.storedPaymentMethodId,\n holderName: this.props.holderName ?? ''\n }),\n ...(cardBrand && { brand: cardBrand }),\n ...(this.props.fundingSource && { fundingSource: this.props.fundingSource }),\n ...(this.state.fastlaneData && { fastlaneData: btoa(JSON.stringify(this.state.fastlaneData)) })\n },\n ...(this.state.billingAddress && { billingAddress: this.state.billingAddress }),\n ...(this.state.socialSecurityNumber && { socialSecurityNumber: this.state.socialSecurityNumber }),\n ...this.storePaymentMethodPayload,\n ...(hasValidInstallmentsObject(this.state.installments) && { installments: this.state.installments }),\n browserInfo: this.browserInfo,\n origin: !!window && window.location.origin\n };\n }\n\n updateStyles(stylesObj) {\n if (this.componentRef?.updateStyles) this.componentRef.updateStyles(stylesObj);\n return this;\n }\n\n setFocusOn(fieldName) {\n if (this.componentRef?.setFocusOn) this.componentRef.setFocusOn(fieldName);\n return this;\n }\n\n public onBrand = event => {\n this.props.onBrand?.(event);\n };\n\n processBinLookupResponse(binLookupResponse: BinLookupResponse, isReset = false) {\n if (this.componentRef?.processBinLookupResponse) this.componentRef.processBinLookupResponse(binLookupResponse, isReset);\n return this;\n }\n\n handleUnsupportedCard(errObj) {\n if (this.componentRef?.handleUnsupportedCard) this.componentRef.handleUnsupportedCard(errObj);\n return this;\n }\n\n private handleClickToPaySubmit = (payload: ClickToPayCheckoutPayload) => {\n this.setState({ data: { ...payload }, valid: {}, errors: {}, isValid: true });\n this.submit();\n };\n\n onBinLookup(obj: CardBinLookupData) {\n // Handler for regular card comp doesn't need this 'raw' data or to know about 'resets'\n if (!obj.isReset) {\n const nuObj = reject('supportedBrandsRaw').from(obj);\n this.props.onBinLookup?.(nuObj);\n }\n }\n\n protected submitAnalytics(analyticsObj: AnalyticsEvent) {\n const isInfoType = analyticsObj instanceof AnalyticsInfoEvent;\n\n if ((isInfoType && analyticsObj.type === ANALYTICS_RENDERED_STR) || (isInfoType && analyticsObj.type === ANALYTICS_CONFIGURED_STR)) {\n // Check if it's a storedCard\n if (this.constructor['type'] === 'scheme') {\n if (hasOwnProperty(this.props, 'supportedShopperInteractions')) {\n analyticsObj.isStoredPaymentMethod = true;\n analyticsObj.brand = this.props.brand;\n }\n }\n\n // Add config data\n if (isInfoType && analyticsObj.type === ANALYTICS_RENDERED_STR) {\n analyticsObj.configData = getCardConfigData(this.props);\n }\n }\n\n super.submitAnalytics(analyticsObj);\n }\n\n private onConfigSuccess = (obj: CardConfigSuccessData) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_CONFIGURED_STR });\n this.submitAnalytics(event);\n\n this.props.onConfigSuccess?.(obj);\n };\n\n private onFocus = (obj: ComponentFocusObject) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_FOCUS_STR, target: fieldTypeToSnakeCase(obj.fieldType) });\n this.submitAnalytics(event);\n\n // Call merchant defined callback\n if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {\n this.props.onFocus?.(obj.event as CardFocusData);\n } else {\n this.props.onFocus?.(obj);\n }\n };\n\n private onBlur = (obj: ComponentFocusObject) => {\n const event = new AnalyticsInfoEvent({ type: ANALYTICS_UNFOCUS_STR, target: fieldTypeToSnakeCase(obj.fieldType) });\n this.submitAnalytics(event);\n\n // Call merchant defined callback\n if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {\n this.props.onBlur?.(obj.event as CardFocusData);\n } else {\n this.props.onBlur?.(obj);\n }\n };\n\n public onBinValue = triggerBinLookUp(this);\n\n get storePaymentMethodPayload() {\n const isStoredCard = this.props.storedPaymentMethodId?.length > 0;\n if (isStoredCard) {\n return {};\n }\n\n /**\n * For regular card, zero auth payments, we store the payment method, *if* the configuration says we should:\n * - For sessions, this means if the session has been created with storePaymentMethodMode: 'askForConsent'\n * - For the advanced flow, this means if the merchant has still set enableStoreDetails: true\n *\n * What we are doing is.. if for a normal payment we would show the \"Save for my next payment\" checkbox,\n * for a zero-auth payment we effectively click the checkbox on behalf of the shopper.\n */\n const isZeroAuth = this.props.amount?.value === 0;\n if (isZeroAuth) {\n return this.props.enableStoreDetails ? { storePaymentMethod: true } : {};\n }\n\n // For regular card, non-zero auth payments, we store the payment method based on the checkbox value.\n const includeStorePaymentMethod = this.props.showStoreDetailsCheckbox && typeof this.state.storePaymentMethod !== 'undefined';\n return includeStorePaymentMethod ? { storePaymentMethod: Boolean(this.state.storePaymentMethod) } : {};\n }\n\n get isValid() {\n return !!this.state.isValid;\n }\n\n get icon() {\n return this.props.icon ?? this.resources.getImage()(this.props.brand);\n }\n\n get brands(): { icon: any; name: string }[] {\n const { brands, brandsConfiguration } = this.props;\n if (brands) {\n return brands.map(brand => {\n const brandIcon = brandsConfiguration[brand]?.icon ?? this.props.modules.resources.getImage()(brand);\n return { icon: brandIcon, name: brand };\n });\n }\n\n return [];\n }\n\n get displayName(): string {\n if (this.props.storedPaymentMethodId) {\n return `•••• ${this.props.lastFour}`;\n }\n\n return this.props.name || CardElement.type;\n }\n\n get accessibleName(): string {\n // Use display name, unless it's a stored payment method, there inform user\n return (\n (this.props.name || CardElement.type) +\n (this.props.storedPaymentMethodId\n ? ' ' + this.props.i18n.get('creditCard.storedCard.description.ariaLabel').replace('%@', this.props.lastFour)\n : '')\n );\n }\n\n get browserInfo() {\n return collectBrowserInfo();\n }\n\n protected override payButton = (props: PayButtonFunctionProps) => {\n const isZeroAuth = this.props.amount?.value === 0;\n const isStoredCard = this.props.storedPaymentMethodId?.length > 0;\n return (\n <PayButton\n {...props}\n amount={this.props.amount}\n secondaryAmount={this.props.secondaryAmount}\n label={isZeroAuth && !isStoredCard ? this.props.i18n.get('payButton.saveDetails') : ''}\n onClick={this.submit}\n />\n );\n };\n\n private renderCardInput(isCardPrimaryInput = true): h.JSX.Element {\n return (\n <CardInput\n setComponentRef={this.setComponentRef}\n {...this.props}\n {...this.state}\n onSubmitAnalytics={this.submitAnalytics}\n onChange={this.setState}\n onSubmit={this.submit}\n handleKeyPress={this.handleKeyPress}\n payButton={this.payButton}\n onBrand={this.onBrand}\n onBinValue={this.onBinValue}\n brand={this.props.brand}\n brandsIcons={this.brands}\n isPayButtonPrimaryVariant={isCardPrimaryInput}\n resources={this.resources}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onConfigSuccess={this.onConfigSuccess}\n />\n );\n }\n\n render() {\n return (\n <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>\n <SRPanelProvider srPanel={this.props.modules.srPanel}>\n <ClickToPayWrapper\n amount={this.props.amount}\n configuration={this.props.clickToPayConfiguration}\n clickToPayService={this.clickToPayService}\n isStandaloneComponent={false}\n setClickToPayRef={this.setClickToPayRef}\n onSetStatus={this.setElementStatus}\n onSubmit={this.handleClickToPaySubmit}\n onError={this.handleError}\n >\n {isCardPrimaryInput => this.renderCardInput(isCardPrimaryInput)}\n </ClickToPayWrapper>\n </SRPanelProvider>\n </CoreProvider>\n );\n }\n}\n\nexport default CardElement;\n"],"names":["DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","CardElement","UIElement","setStatus","status","props","this","componentRef","clickToPayRef","formatProps","enableStoreDetails","session","configuration","showStoreDetailsCheckbox","amount","value","storedCardID","storedPaymentMethodId","id","isEcommerceStoredCard","supportedShopperInteractions","includes","AdyenCheckoutError","IMPLEMENTATION_ERROR","holderNameRequired","hasHolderName","hasCVC","brand","hideCVC","billingAddressRequired","billingAddressMode","onAddressLookup","CardInputDefaultProps","TxVariants","card","countryCode","toLowerCase","socialSecurityNumberMode","brandsConfiguration","icon","installmentOptions","clickToPayConfiguration","disableOtpAutoFocus","shopperEmail","core","options","telephoneNumber","locale","i18n","replace","formatData","cardBrand","state","selectedBrandValue","paymentMethod","type","data","holderName","fundingSource","fastlaneData","btoa","JSON","stringify","billingAddress","socialSecurityNumber","storePaymentMethodPayload","hasValidInstallmentsObject","installments","browserInfo","origin","window","location","updateStyles","stylesObj","setFocusOn","fieldName","processBinLookupResponse","binLookupResponse","isReset","handleUnsupportedCard","errObj","onBinLookup","obj","nuObj","reject","from","submitAnalytics","analyticsObj","isInfoType","AnalyticsInfoEvent","ANALYTICS_RENDERED_STR","ANALYTICS_CONFIGURED_STR","constructor","hasOwnProperty","isStoredPaymentMethod","configData","getCardConfigData","super","length","storePaymentMethod","Boolean","isValid","resources","getImage","brands","map","modules","name","displayName","lastFour","accessibleName","get","collectBrowserInfo","renderCardInput","isCardPrimaryInput","h","CardInput","setComponentRef","onSubmitAnalytics","onChange","setState","onSubmit","submit","handleKeyPress","payButton","onBrand","onBinValue","brandsIcons","isPayButtonPrimaryVariant","onFocus","onBlur","onConfigSuccess","render","CoreProvider","loadingContext","SRPanelProvider","srPanel","ClickToPayWrapper","clickToPayService","isStandaloneComponent","setClickToPayRef","onSetStatus","setElementStatus","handleClickToPaySubmit","onError","handleError","checkout","_define_property","ref","event","payload","valid","errors","ANALYTICS_FOCUS_STR","target","fieldTypeToSnakeCase","fieldType","ALL_SECURED_FIELDS","ANALYTICS_UNFOCUS_STR","triggerBinLookUp","isZeroAuth","isStoredCard","PayButton","secondaryAmount","label","onClick","_disableClickToPay","createClickToPayService","environment","initialize","scheme","defaultProps","showFormInstruction","doBinLookup"],"mappings":"g+CA6BaA,EAA4C,CAAC,gBAAiB,OAAQ,WAE5E,MAAMC,UAAoBC,EA2BtBC,SAAAA,CAAUC,EAAyBC,GAOtC,OANIC,KAAKC,cAAcJ,WACnBG,KAAKC,aAAaJ,UAAUC,EAAQC,GAEpCC,KAAKE,eAAeL,WACpBG,KAAKE,cAAcL,UAAUC,EAAQC,GAElCC,IACX,CAMAG,WAAAA,CAAYJ,GAER,MAAMK,EAAqBL,EAAMM,SAASC,eAAeF,oBAAsBL,EAAMK,mBAG/EG,IADqC,IAAxBR,EAAMS,QAAQC,QACqBL,EAEhDM,EAAeX,EAAMY,uBAAyBZ,EAAMa,GACpDC,EAAwBH,GAAgBX,GAAOe,8BAA8BC,SAAS,aAG5F,GAAIL,IAAiBG,EAEjB,MAAM,IAAIG,EACNC,EACA,uGAIR,MAAO,IACAlB,EAEHmB,qBAAqBnB,EAAMoB,eAAwBpB,EAAMmB,mBAEzDE,SAAUrB,EAAOsB,OAAyB,SAAhBtB,EAAMsB,OAAqBtB,EAAMuB,SAE3DC,wBAAwBxB,EAAMY,uBAAgCZ,EAAMwB,uBAEpEC,mBAAoBzB,EAAM0B,gBAAkBC,EAAsBF,mBAAqBzB,EAAMyB,mBAE7FH,MAAOtB,EAAMsB,OAASM,EAAWC,KACjCC,YAAa9B,EAAM8B,YAAc9B,EAAM8B,YAAYC,cAAgB,KAGnExB,cAAe,IACRP,EAAMO,cACTyB,yBAA0BhC,EAAMO,eAAeyB,0BAA4B,QAE/EC,oBAAqBjC,EAAMiC,qBAAuBjC,EAAMO,eAAe0B,qBAAuB,CAAA,EAC9FC,KAAMlC,EAAMkC,MAAQlC,EAAMO,eAAe2B,KAEzCC,mBAAoBnC,EAAMM,SAASC,eAAe4B,oBAAsBnC,EAAMmC,mBAC9E9B,qBACAG,2BAKA4B,wBAAyB,IAClBpC,EAAMoC,wBACTC,oBAAqBrC,EAAMoC,yBAAyBC,sBAAuB,EAC3EC,aAActC,EAAMoC,yBAAyBE,cAAgBrC,KAAKsC,KAAKC,SAASlC,SAASgC,aACzFG,gBAAiBzC,EAAMoC,yBAAyBK,iBAAmBxC,KAAKsC,KAAKC,SAASlC,SAASmC,gBAC/FC,OAAQ1C,EAAMoC,yBAAyBM,QAAU1C,EAAM2C,MAAMD,QAAQE,QAAQ,IAAK,SAElFjC,GAAgB,CAAEC,sBAAuBD,GAErD,CAKAkC,UAAAA,GAOI,MAAMC,EAAY7C,KAAK8C,MAAMC,mBAE7B,MAAO,CACHC,cAAe,CACXC,KAAMtD,EAAYsD,QACfjD,KAAK8C,MAAMI,QACVlD,KAAKD,MAAMY,uBAAyB,CACpCA,sBAAuBX,KAAKD,MAAMY,sBAClCwC,WAAYnD,KAAKD,MAAMoD,YAAc,OAErCN,GAAa,CAAExB,MAAOwB,MACtB7C,KAAKD,MAAMqD,eAAiB,CAAEA,cAAepD,KAAKD,MAAMqD,kBACxDpD,KAAK8C,MAAMO,cAAgB,CAAEA,aAAcC,KAAKC,KAAKC,UAAUxD,KAAK8C,MAAMO,oBAE9ErD,KAAK8C,MAAMW,gBAAkB,CAAEA,eAAgBzD,KAAK8C,MAAMW,mBAC1DzD,KAAK8C,MAAMY,sBAAwB,CAAEA,qBAAsB1D,KAAK8C,MAAMY,yBACvE1D,KAAK2D,6BACJC,EAA2B5D,KAAK8C,MAAMe,eAAiB,CAAEA,aAAc7D,KAAK8C,MAAMe,cACtFC,YAAa9D,KAAK8D,YAClBC,SAAUC,QAAUA,OAAOC,SAASF,OAE5C,CAEAG,YAAAA,CAAaC,GAET,OADInE,KAAKC,cAAciE,cAAclE,KAAKC,aAAaiE,aAAaC,GAC7DnE,IACX,CAEAoE,UAAAA,CAAWC,GAEP,OADIrE,KAAKC,cAAcmE,YAAYpE,KAAKC,aAAamE,WAAWC,GACzDrE,IACX,CAMAsE,wBAAAA,CAAyBC,EAAsCC,GAAU,GAErE,OADIxE,KAAKC,cAAcqE,0BAA0BtE,KAAKC,aAAaqE,yBAAyBC,EAAmBC,GACxGxE,IACX,CAEAyE,qBAAAA,CAAsBC,GAElB,OADI1E,KAAKC,cAAcwE,uBAAuBzE,KAAKC,aAAawE,sBAAsBC,GAC/E1E,IACX,CAOA2E,WAAAA,CAAYC,GAER,IAAKA,EAAIJ,QAAS,CACd,MAAMK,EAAQC,EAAO,sBAAsBC,KAAKH,GAChD5E,KAAKD,MAAM4E,cAAcE,EAC7B,CACJ,CAEUG,eAAAA,CAAgBC,GACtB,MAAMC,EAAaD,aAAwBE,GAEtCD,GAAcD,EAAahC,OAASmC,GAA4BF,GAAcD,EAAahC,OAASoC,KAEpE,WAA7BrF,KAAKsF,YAAY,MACbC,EAAevF,KAAKD,MAAO,kCAC3BkF,EAAaO,uBAAwB,EACrCP,EAAa5D,MAAQrB,KAAKD,MAAMsB,OAKpC6D,GAAcD,EAAahC,OAASmC,IACpCH,EAAaQ,WAAaC,EAAkB1F,KAAKD,SAIzD4F,MAAMX,gBAAgBC,EAC1B,CAmCA,6BAAItB,GAEA,GADqB3D,KAAKD,MAAMY,uBAAuBiF,OAAS,EAE5D,MAAO,CAAA,EAYX,GADgD,IAA7B5F,KAAKD,MAAMS,QAAQC,MAElC,OAAOT,KAAKD,MAAMK,mBAAqB,CAAEyF,oBAAoB,GAAS,CAAA,EAK1E,OADkC7F,KAAKD,MAAMQ,+BAAqE,IAAlCP,KAAK8C,MAAM+C,mBACxD,CAAEA,mBAAoBC,QAAQ9F,KAAK8C,MAAM+C,qBAAwB,CAAA,CACxG,CAEA,WAAIE,GACA,QAAS/F,KAAK8C,MAAMiD,OACxB,CAEA,QAAI9D,GACA,OAAOjC,KAAKD,MAAMkC,MAAQjC,KAAKgG,UAAUC,UAAfjG,CAA0BA,KAAKD,MAAMsB,MACnE,CAEA,UAAI6E,GACA,MAAMA,OAAEA,EAAMlE,oBAAEA,GAAwBhC,KAAKD,MAC7C,OAAImG,EACOA,EAAOC,IAAI9E,IAEP,CAAEY,KADSD,EAAoBX,IAAQY,MAAQjC,KAAKD,MAAMqG,QAAQJ,UAAUC,UAA7BjG,CAAwCqB,GACpEgF,KAAMhF,KAIjC,EACX,CAEA,eAAIiF,GACA,OAAItG,KAAKD,MAAMY,sBACJ,QAAQX,KAAKD,MAAMwG,WAGvBvG,KAAKD,MAAMsG,MAAQ1G,EAAYsD,IAC1C,CAEA,kBAAIuD,GAEA,OACKxG,KAAKD,MAAMsG,MAAQ1G,EAAYsD,OAC/BjD,KAAKD,MAAMY,sBACN,IAAMX,KAAKD,MAAM2C,KAAK+D,IAAI,+CAA+C9D,QAAQ,KAAM3C,KAAKD,MAAMwG,UAClG,GAEd,CAEA,eAAIzC,GACA,OAAO4C,GACX,CAgBQC,eAAAA,CAAgBC,GAAqB,GACzC,OACIC,EAACC,EAAAA,CACGC,gBAAiB/G,KAAK+G,mBAClB/G,KAAKD,SACLC,KAAK8C,MACTkE,kBAAmBhH,KAAKgF,gBACxBiC,SAAUjH,KAAKkH,SACfC,SAAUnH,KAAKoH,OACfC,eAAgBrH,KAAKqH,eACrBC,UAAWtH,KAAKsH,UAChBC,QAASvH,KAAKuH,QACdC,WAAYxH,KAAKwH,WACjBnG,MAAOrB,KAAKD,MAAMsB,MAClBoG,YAAazH,KAAKkG,OAClBwB,0BAA2Bd,EAC3BZ,UAAWhG,KAAKgG,UAChB2B,QAAS3H,KAAK2H,QACdC,OAAQ5H,KAAK4H,OACbC,gBAAiB7H,KAAK6H,iBAGlC,CAEAC,MAAAA,GACI,OACIjB,EAACkB,EAAAA,CAAarF,KAAM1C,KAAKD,MAAM2C,KAAMsF,eAAgBhI,KAAKD,MAAMiI,eAAgBhC,UAAWhG,KAAKgG,WAC5Fa,EAACoB,EAAAA,CAAgBC,QAASlI,KAAKD,MAAMqG,QAAQ8B,SACzCrB,EAACsB,EAAAA,CACG3H,OAAQR,KAAKD,MAAMS,OACnBF,cAAeN,KAAKD,MAAMoC,wBAC1BiG,kBAAmBpI,KAAKoI,kBACxBC,uBAAuB,EACvBC,iBAAkBtI,KAAKsI,iBACvBC,YAAavI,KAAKwI,iBAClBrB,SAAUnH,KAAKyI,uBACfC,QAAS1I,KAAK2I,aAEb/B,GAAsB5G,KAAK2G,gBAAgBC,KAKhE,CAjVA,WAAAtB,CAAYsD,EAAiB7I,GACzB4F,MAAMiD,EAAU7I,GARpB8I,EAAA7I,KAAiBoI,yBAAjB,GAKAS,EAAA7I,KAAQE,gBAAgB,MA6BxB2I,EAAA7I,KAAQsI,mBAAmBQ,IACvB9I,KAAKE,cAAgB4I,IAyGzBD,EAAA7I,KAAOuH,UAAUwB,IACb/I,KAAKD,MAAMwH,UAAUwB,KAazBF,EAAA7I,KAAQyI,yBAA0BO,IAC9BhJ,KAAKkH,SAAS,CAAEhE,KAAM,IAAK8F,GAAWC,MAAO,CAAA,EAAIC,OAAQ,CAAA,EAAInD,SAAS,IACtE/F,KAAKoH,WAgCTyB,EAAA7I,KAAQ6H,kBAAmBjD,IACvB,MAAMmE,EAAQ,IAAI5D,EAAmB,CAAElC,KAAMoC,IAC7CrF,KAAKgF,gBAAgB+D,GAErB/I,KAAKD,MAAM8H,kBAAkBjD,KAGjCiE,EAAA7I,KAAQ2H,UAAW/C,IACf,MAAMmE,EAAQ,IAAI5D,EAAmB,CAAElC,KAAMkG,EAAqBC,OAAQC,EAAqBzE,EAAI0E,aACnGtJ,KAAKgF,gBAAgB+D,GAGjBQ,EAAmBxI,SAAS6D,EAAI0E,WAChCtJ,KAAKD,MAAM4H,UAAU/C,EAAImE,OAEzB/I,KAAKD,MAAM4H,UAAU/C,KAI7BiE,EAAA7I,KAAQ4H,SAAUhD,IACd,MAAMmE,EAAQ,IAAI5D,EAAmB,CAAElC,KAAMuG,EAAuBJ,OAAQC,EAAqBzE,EAAI0E,aACrGtJ,KAAKgF,gBAAgB+D,GAGjBQ,EAAmBxI,SAAS6D,EAAI0E,WAChCtJ,KAAKD,MAAM6H,SAAShD,EAAImE,OAExB/I,KAAKD,MAAM6H,SAAShD,KAI5BiE,OAAOrB,aAAaiC,EAAiBzJ,OAoErC6I,EAAA7I,KAAmBsH,YAAavH,IAC5B,MAAM2J,EAA0C,IAA7B1J,KAAKD,MAAMS,QAAQC,MAChCkJ,EAAe3J,KAAKD,MAAMY,uBAAuBiF,OAAS,EAChE,OACIiB,EAAC+C,EAAAA,IACO7J,EACJS,OAAQR,KAAKD,MAAMS,OACnBqJ,gBAAiB7J,KAAKD,MAAM8J,gBAC5BC,MAAOJ,IAAeC,EAAe3J,KAAKD,MAAM2C,KAAK+D,IAAI,yBAA2B,GACpFsD,QAAS/J,KAAKoH,WA9RlBrH,IAAUA,EAAMiK,qBAChBhK,KAAKoI,kBAAoB6B,EAAwBjK,KAAKD,MAAMO,cAAeN,KAAKD,MAAMoC,wBAAyBnC,KAAKD,MAAMmK,aACrHlK,KAAKoI,mBAAmB+B,aAErC,EAhBAtB,EADSlJ,EACKsD,OAAOtB,EAAWyI,QAkBhCvB,EAnBSlJ,EAmBQ0K,eAAe,CAC5BC,qBAAqB,EACrBN,oBAAoB,EACpBO,aAAa,KAEVzF,EAAO,CAAC,OAAQ,oBAAoBC,KAAKrD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"../../../../internal/LoadingWrapper/LoadingWrapper.js";import
|
|
1
|
+
import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"../../../../internal/LoadingWrapper/LoadingWrapper.js";import s from"./CardFields.js";import a from"./KCPAuthentication.js";import l from"../../../../internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.js";import o from"../../../../internal/StoreDetails/StoreDetails.js";import i from"../../../../internal/Address/Address.js";import n from"./CardHolderName.js";import t from"./Installments/Installments.js";import d from"../../../../internal/DisclaimerMessage/DisclaimerMessage.js";import u from"../../../../internal/FormFields/RadioGroupExtended/RadioGroupExtended.js";import{mustHandleDualBrandingAccordingToEURegulations as c,mapDualBrandButtons as m}from"../utils.js";import p from"../../../../internal/FormFields/Fieldset/Fieldset.js";import{useCoreContext as h}from"../../../../../core/Context/CoreProvider.js";import{DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM as b}from"../../../Card.js";const F=({data:F,valid:y,errors:N,handleChangeFor:S,sfpState:f,setFocusOn:A,cvcPolicy:C,focusedElement:g,hasInstallments:x,handleInstallments:B,showAmountsInInstallments:w,brandsIcons:j,formData:v,formErrors:D,formValid:I,expiryDatePolicy:E,dualBrandSelectElements:P,extensions:k,selectedBrandValue:O,showKCP:R,showBrazilianSSN:q,socialSecurityNumber:V,handleOnStoreDetails:M,billingAddress:T,handleAddress:L,setAddressRef:_,partialAddressSchema:z,onAddressLookup:H,onAddressSelected:G,addressSearchDebounceMs:K,amount:W,billingAddressRequired:$,billingAddressRequiredFields:J,billingAddressAllowedCountries:Q,billingAddressValidationRules:U=null,brandsConfiguration:X,showStoreDetailsCheckbox:Y,hasCVC:Z,hasHolderName:ee,holderNameRequired:re,installmentOptions:se,placeholders:ae,positionHolderNameOnTop:le,showBrandIcon:oe,showContextualElement:ie,iOSFocusedField:ne,disclaimerMessage:te,onFieldFocusAnalytics:de,onFieldBlurAnalytics:ue})=>{const{i18n:ce}=h(),me=e(n,{required:re,placeholder:ae.holderName,value:v.holderName,error:!!D.holderName&&re,isValid:!!I.holderName,onBlur:S("holderName","blur"),onInput:S("holderName","input"),disabled:ne&&"holderName"!==ne,onFieldFocusAnalytics:de,onFieldBlurAnalytics:ue}),pe=c(b,P,"id");return e(r,{status:f.status},ee&&le&&me,e(s,{showBrandIcon:oe,showContextualElement:ie,brand:f.brand,brandsIcons:j,brandsConfiguration:X,focusedElement:g,onFocusField:A,hasCVC:Z,cvcPolicy:C,expiryDatePolicy:E,errors:f.errors,valid:f.valid,dualBrandingElements:P.length>0&&P}),ee&&!le&&me,pe&&P.length>0&&P&&e(p,{classNameModifiers:["dual-brand-switcher"],label:ce.get("creditCard.dualBrand.title")},e("p",{className:"adyen-checkout-form-instruction"},ce.get("creditCard.dualBrand.description")),e(u,{name:"dualBrandSwitcher",value:O,items:m(P,X),onChange:k.handleDualBrandSelection,required:!0,showSelectedTick:!0})),R&&e(a,{onFocusField:A,focusedElement:g,encryptedPasswordState:{data:f.encryptedPassword,valid:!!f.valid&&f.valid.encryptedPassword,errors:!!f.errors&&f.errors.encryptedPassword},value:F.taxNumber,error:!!N.taxNumber,isValid:!!y.taxNumber,onBlur:S("taxNumber","blur"),onInput:S("taxNumber","input"),disabled:ne&&"kcpTaxNumberOrDOB"!==ne,placeholder:ae.taxNumber,onFieldFocusAnalytics:de,onFieldBlurAnalytics:ue}),q&&e("div",{className:"adyen-checkout__card__socialSecurityNumber"},e(l,{onBlur:S("socialSecurityNumber","blur"),onInput:S("socialSecurityNumber","input"),error:N?.socialSecurityNumber,valid:y?.socialSecurityNumber,data:V,required:!0,disabled:ne&&"socialSecurityNumber"!==ne,onFieldFocusAnalytics:de,onFieldBlurAnalytics:ue})),Y&&e(o,{onChange:M}),x&&e(t,{amount:W,brand:f.brand,installmentOptions:se,onChange:B,type:w?"amount":"months"}),$&&e(i,{label:"billingAddress",data:T,onChange:L,allowedCountries:Q,requiredFields:J,setComponentRef:_,validationRules:U,specifications:z,iOSFocusedField:ne,onAddressLookup:H,showContextualElement:ie,onAddressSelected:G,addressSearchDebounceMs:K,onFieldFocusAnalytics:de,onFieldBlurAnalytics:ue}),te&&e(d,{message:te.message.replace("%{linkText}",`%#${te.linkText}%#`),urls:[te.link]}))};export{F as CardFieldsWrapper};
|
|
2
2
|
//# sourceMappingURL=CardFieldsWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardFieldsWrapper.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx"],"sourcesContent":["import { h } from 'preact';\nimport LoadingWrapper from '../../../../internal/LoadingWrapper';\nimport CardFields from './CardFields';\nimport KCPAuthentication from './KCPAuthentication';\nimport SocialSecurityNumberBrazil from '../../../../internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil';\nimport StoreDetails from '../../../../internal/StoreDetails';\nimport Address from '../../../../internal/Address';\nimport CardHolderName from './CardHolderName';\nimport Installments from './Installments';\nimport DisclaimerMessage from '../../../../internal/DisclaimerMessage';\nimport RadioGroupExtended from '../../../../internal/FormFields/RadioGroupExtended';\nimport { mapDualBrandButtons } from '../utils';\nimport Fieldset from '../../../../internal/FormFields/Fieldset';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\n\nexport const CardFieldsWrapper = ({\n // vars created in CardInput:\n // base (shared)\n data,\n valid,\n errors,\n handleChangeFor,\n sfpState,\n setFocusOn,\n cvcPolicy,\n focusedElement,\n hasInstallments,\n handleInstallments,\n showAmountsInInstallments,\n // Card\n brandsIcons,\n formData,\n formErrors,\n formValid,\n expiryDatePolicy,\n dualBrandSelectElements,\n extensions,\n selectedBrandValue,\n // KCP\n showKCP,\n // SSN\n showBrazilianSSN,\n socialSecurityNumber,\n // Store details\n handleOnStoreDetails,\n // Address\n billingAddress,\n handleAddress,\n setAddressRef,\n partialAddressSchema,\n onAddressLookup,\n onAddressSelected,\n addressSearchDebounceMs,\n // For this comp (props passed through from CardInput)\n amount,\n billingAddressRequired,\n billingAddressRequiredFields,\n billingAddressAllowedCountries,\n billingAddressValidationRules = null,\n brandsConfiguration,\n showStoreDetailsCheckbox,\n hasCVC,\n hasHolderName,\n holderNameRequired,\n installmentOptions,\n placeholders,\n positionHolderNameOnTop,\n // For CardFields > CardNumber\n showBrandIcon,\n showContextualElement,\n //\n iOSFocusedField,\n disclaimerMessage,\n //\n onFieldFocusAnalytics,\n onFieldBlurAnalytics\n}) => {\n const { i18n } = useCoreContext();\n\n const cardHolderField = (\n <CardHolderName\n required={holderNameRequired}\n placeholder={placeholders.holderName}\n value={formData.holderName}\n error={!!formErrors.holderName && holderNameRequired}\n isValid={!!formValid.holderName}\n onBlur={handleChangeFor('holderName', 'blur')}\n onInput={handleChangeFor('holderName', 'input')}\n disabled={iOSFocusedField && iOSFocusedField !== 'holderName'}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n );\n\n // Only if these brands are present in the binLookup response should we show the UI to choose between brands\n const dualBrandsThatNeedSelectionMechanism = ['cartebancaire', 'bcmc', 'dankort'];\n // If the filter array contains anything - then we need to show the choice UI\n const showDualBrandSelectElements = !!dualBrandSelectElements.filter(item => dualBrandsThatNeedSelectionMechanism.includes(item.id)).length;\n\n return (\n <LoadingWrapper status={sfpState.status}>\n {hasHolderName && positionHolderNameOnTop && cardHolderField}\n\n <CardFields\n showBrandIcon={showBrandIcon}\n showContextualElement={showContextualElement}\n brand={sfpState.brand}\n brandsIcons={brandsIcons}\n brandsConfiguration={brandsConfiguration}\n focusedElement={focusedElement}\n onFocusField={setFocusOn}\n hasCVC={hasCVC}\n cvcPolicy={cvcPolicy}\n expiryDatePolicy={expiryDatePolicy}\n errors={sfpState.errors}\n valid={sfpState.valid}\n dualBrandingElements={dualBrandSelectElements.length > 0 && dualBrandSelectElements}\n />\n\n {hasHolderName && !positionHolderNameOnTop && cardHolderField}\n\n {showDualBrandSelectElements && dualBrandSelectElements.length > 0 && dualBrandSelectElements && (\n <Fieldset classNameModifiers={['dual-brand-switcher']} label={i18n.get('creditCard.dualBrand.title')}>\n <p className={'adyen-checkout-form-instruction'}>{i18n.get('creditCard.dualBrand.description')}</p>\n <RadioGroupExtended\n name={'dualBrandSwitcher'}\n value={selectedBrandValue} // Set which button is in a selected (checked) state\n items={mapDualBrandButtons(dualBrandSelectElements, brandsConfiguration)}\n onChange={extensions.handleDualBrandSelection}\n required={true}\n showSelectedTick={true}\n />\n </Fieldset>\n )}\n\n {showKCP && (\n <KCPAuthentication\n onFocusField={setFocusOn}\n focusedElement={focusedElement}\n encryptedPasswordState={{\n data: sfpState.encryptedPassword,\n valid: sfpState.valid ? sfpState.valid.encryptedPassword : false,\n errors: sfpState.errors ? sfpState.errors.encryptedPassword : false\n }}\n value={data.taxNumber}\n error={!!errors.taxNumber}\n isValid={!!valid.taxNumber}\n onBlur={handleChangeFor('taxNumber', 'blur')}\n onInput={handleChangeFor('taxNumber', 'input')}\n disabled={iOSFocusedField && iOSFocusedField !== 'kcpTaxNumberOrDOB'}\n placeholder={placeholders.taxNumber}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n )}\n\n {showBrazilianSSN && (\n <div className=\"adyen-checkout__card__socialSecurityNumber\">\n <SocialSecurityNumberBrazil\n onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n onInput={handleChangeFor('socialSecurityNumber', 'input')}\n error={errors?.socialSecurityNumber}\n valid={valid?.socialSecurityNumber}\n data={socialSecurityNumber}\n required={true}\n disabled={iOSFocusedField && iOSFocusedField !== 'socialSecurityNumber'}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n </div>\n )}\n\n {showStoreDetailsCheckbox && <StoreDetails onChange={handleOnStoreDetails} />}\n\n {hasInstallments && (\n <Installments\n amount={amount}\n brand={sfpState.brand}\n installmentOptions={installmentOptions}\n onChange={handleInstallments}\n type={showAmountsInInstallments ? 'amount' : 'months'}\n />\n )}\n\n {billingAddressRequired && (\n <Address\n label=\"billingAddress\"\n data={billingAddress}\n onChange={handleAddress}\n allowedCountries={billingAddressAllowedCountries}\n requiredFields={billingAddressRequiredFields}\n setComponentRef={setAddressRef}\n validationRules={billingAddressValidationRules}\n specifications={partialAddressSchema}\n iOSFocusedField={iOSFocusedField}\n onAddressLookup={onAddressLookup}\n showContextualElement={showContextualElement}\n onAddressSelected={onAddressSelected}\n addressSearchDebounceMs={addressSearchDebounceMs}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n )}\n\n {disclaimerMessage && (\n <DisclaimerMessage\n message={disclaimerMessage.message.replace('%{linkText}', `%#${disclaimerMessage.linkText}%#`)}\n urls={[disclaimerMessage.link]}\n />\n )}\n </LoadingWrapper>\n );\n};\n"],"names":["CardFieldsWrapper","data","valid","errors","handleChangeFor","sfpState","setFocusOn","cvcPolicy","focusedElement","hasInstallments","handleInstallments","showAmountsInInstallments","brandsIcons","formData","formErrors","formValid","expiryDatePolicy","dualBrandSelectElements","extensions","selectedBrandValue","showKCP","showBrazilianSSN","socialSecurityNumber","handleOnStoreDetails","billingAddress","handleAddress","setAddressRef","partialAddressSchema","onAddressLookup","onAddressSelected","addressSearchDebounceMs","amount","billingAddressRequired","billingAddressRequiredFields","billingAddressAllowedCountries","billingAddressValidationRules","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","hasHolderName","holderNameRequired","installmentOptions","placeholders","positionHolderNameOnTop","showBrandIcon","showContextualElement","iOSFocusedField","disclaimerMessage","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","cardHolderField","h","CardHolderName","required","placeholder","holderName","value","error","isValid","onBlur","onInput","disabled","dualBrandsThatNeedSelectionMechanism","showDualBrandSelectElements","filter","item","includes","id","length","LoadingWrapper","status","CardFields","brand","onFocusField","dualBrandingElements","Fieldset","classNameModifiers","label","get","p","className","RadioGroupExtended","name","items","mapDualBrandButtons","onChange","handleDualBrandSelection","showSelectedTick","KCPAuthentication","encryptedPasswordState","encryptedPassword","taxNumber","div","SocialSecurityNumberBrazil","StoreDetails","Installments","type","Address","allowedCountries","requiredFields","setComponentRef","validationRules","specifications","DisclaimerMessage","message","replace","linkText","urls","link"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CardFieldsWrapper.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx"],"sourcesContent":["import { h } from 'preact';\nimport LoadingWrapper from '../../../../internal/LoadingWrapper';\nimport CardFields from './CardFields';\nimport KCPAuthentication from './KCPAuthentication';\nimport SocialSecurityNumberBrazil from '../../../../internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil';\nimport StoreDetails from '../../../../internal/StoreDetails';\nimport Address from '../../../../internal/Address';\nimport CardHolderName from './CardHolderName';\nimport Installments from './Installments';\nimport DisclaimerMessage from '../../../../internal/DisclaimerMessage';\nimport RadioGroupExtended from '../../../../internal/FormFields/RadioGroupExtended';\nimport { mapDualBrandButtons, mustHandleDualBrandingAccordingToEURegulations } from '../utils';\nimport Fieldset from '../../../../internal/FormFields/Fieldset';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../../Card';\n\nexport const CardFieldsWrapper = ({\n // vars created in CardInput:\n // base (shared)\n data,\n valid,\n errors,\n handleChangeFor,\n sfpState,\n setFocusOn,\n cvcPolicy,\n focusedElement,\n hasInstallments,\n handleInstallments,\n showAmountsInInstallments,\n // Card\n brandsIcons,\n formData,\n formErrors,\n formValid,\n expiryDatePolicy,\n dualBrandSelectElements,\n extensions,\n selectedBrandValue,\n // KCP\n showKCP,\n // SSN\n showBrazilianSSN,\n socialSecurityNumber,\n // Store details\n handleOnStoreDetails,\n // Address\n billingAddress,\n handleAddress,\n setAddressRef,\n partialAddressSchema,\n onAddressLookup,\n onAddressSelected,\n addressSearchDebounceMs,\n // For this comp (props passed through from CardInput)\n amount,\n billingAddressRequired,\n billingAddressRequiredFields,\n billingAddressAllowedCountries,\n billingAddressValidationRules = null,\n brandsConfiguration,\n showStoreDetailsCheckbox,\n hasCVC,\n hasHolderName,\n holderNameRequired,\n installmentOptions,\n placeholders,\n positionHolderNameOnTop,\n // For CardFields > CardNumber\n showBrandIcon,\n showContextualElement,\n //\n iOSFocusedField,\n disclaimerMessage,\n //\n onFieldFocusAnalytics,\n onFieldBlurAnalytics\n}) => {\n const { i18n } = useCoreContext();\n\n const cardHolderField = (\n <CardHolderName\n required={holderNameRequired}\n placeholder={placeholders.holderName}\n value={formData.holderName}\n error={!!formErrors.holderName && holderNameRequired}\n isValid={!!formValid.holderName}\n onBlur={handleChangeFor('holderName', 'blur')}\n onInput={handleChangeFor('holderName', 'input')}\n disabled={iOSFocusedField && iOSFocusedField !== 'holderName'}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n );\n\n // Only if the brands in DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM are present in the binLookup response should we handle dual branding based on EU regulations\n const showDualBrandSelectElements = mustHandleDualBrandingAccordingToEURegulations(\n DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM,\n dualBrandSelectElements,\n 'id'\n );\n\n return (\n <LoadingWrapper status={sfpState.status}>\n {hasHolderName && positionHolderNameOnTop && cardHolderField}\n\n <CardFields\n showBrandIcon={showBrandIcon}\n showContextualElement={showContextualElement}\n brand={sfpState.brand}\n brandsIcons={brandsIcons}\n brandsConfiguration={brandsConfiguration}\n focusedElement={focusedElement}\n onFocusField={setFocusOn}\n hasCVC={hasCVC}\n cvcPolicy={cvcPolicy}\n expiryDatePolicy={expiryDatePolicy}\n errors={sfpState.errors}\n valid={sfpState.valid}\n dualBrandingElements={dualBrandSelectElements.length > 0 && dualBrandSelectElements}\n />\n\n {hasHolderName && !positionHolderNameOnTop && cardHolderField}\n\n {showDualBrandSelectElements && dualBrandSelectElements.length > 0 && dualBrandSelectElements && (\n <Fieldset classNameModifiers={['dual-brand-switcher']} label={i18n.get('creditCard.dualBrand.title')}>\n <p className={'adyen-checkout-form-instruction'}>{i18n.get('creditCard.dualBrand.description')}</p>\n <RadioGroupExtended\n name={'dualBrandSwitcher'}\n value={selectedBrandValue} // Set which button is in a selected (checked) state\n items={mapDualBrandButtons(dualBrandSelectElements, brandsConfiguration)}\n onChange={extensions.handleDualBrandSelection}\n required={true}\n showSelectedTick={true}\n />\n </Fieldset>\n )}\n\n {showKCP && (\n <KCPAuthentication\n onFocusField={setFocusOn}\n focusedElement={focusedElement}\n encryptedPasswordState={{\n data: sfpState.encryptedPassword,\n valid: sfpState.valid ? sfpState.valid.encryptedPassword : false,\n errors: sfpState.errors ? sfpState.errors.encryptedPassword : false\n }}\n value={data.taxNumber}\n error={!!errors.taxNumber}\n isValid={!!valid.taxNumber}\n onBlur={handleChangeFor('taxNumber', 'blur')}\n onInput={handleChangeFor('taxNumber', 'input')}\n disabled={iOSFocusedField && iOSFocusedField !== 'kcpTaxNumberOrDOB'}\n placeholder={placeholders.taxNumber}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n )}\n\n {showBrazilianSSN && (\n <div className=\"adyen-checkout__card__socialSecurityNumber\">\n <SocialSecurityNumberBrazil\n onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n onInput={handleChangeFor('socialSecurityNumber', 'input')}\n error={errors?.socialSecurityNumber}\n valid={valid?.socialSecurityNumber}\n data={socialSecurityNumber}\n required={true}\n disabled={iOSFocusedField && iOSFocusedField !== 'socialSecurityNumber'}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n </div>\n )}\n\n {showStoreDetailsCheckbox && <StoreDetails onChange={handleOnStoreDetails} />}\n\n {hasInstallments && (\n <Installments\n amount={amount}\n brand={sfpState.brand}\n installmentOptions={installmentOptions}\n onChange={handleInstallments}\n type={showAmountsInInstallments ? 'amount' : 'months'}\n />\n )}\n\n {billingAddressRequired && (\n <Address\n label=\"billingAddress\"\n data={billingAddress}\n onChange={handleAddress}\n allowedCountries={billingAddressAllowedCountries}\n requiredFields={billingAddressRequiredFields}\n setComponentRef={setAddressRef}\n validationRules={billingAddressValidationRules}\n specifications={partialAddressSchema}\n iOSFocusedField={iOSFocusedField}\n onAddressLookup={onAddressLookup}\n showContextualElement={showContextualElement}\n onAddressSelected={onAddressSelected}\n addressSearchDebounceMs={addressSearchDebounceMs}\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n )}\n\n {disclaimerMessage && (\n <DisclaimerMessage\n message={disclaimerMessage.message.replace('%{linkText}', `%#${disclaimerMessage.linkText}%#`)}\n urls={[disclaimerMessage.link]}\n />\n )}\n </LoadingWrapper>\n );\n};\n"],"names":["CardFieldsWrapper","data","valid","errors","handleChangeFor","sfpState","setFocusOn","cvcPolicy","focusedElement","hasInstallments","handleInstallments","showAmountsInInstallments","brandsIcons","formData","formErrors","formValid","expiryDatePolicy","dualBrandSelectElements","extensions","selectedBrandValue","showKCP","showBrazilianSSN","socialSecurityNumber","handleOnStoreDetails","billingAddress","handleAddress","setAddressRef","partialAddressSchema","onAddressLookup","onAddressSelected","addressSearchDebounceMs","amount","billingAddressRequired","billingAddressRequiredFields","billingAddressAllowedCountries","billingAddressValidationRules","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","hasHolderName","holderNameRequired","installmentOptions","placeholders","positionHolderNameOnTop","showBrandIcon","showContextualElement","iOSFocusedField","disclaimerMessage","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","cardHolderField","h","CardHolderName","required","placeholder","holderName","value","error","isValid","onBlur","onInput","disabled","showDualBrandSelectElements","mustHandleDualBrandingAccordingToEURegulations","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","LoadingWrapper","status","CardFields","brand","onFocusField","dualBrandingElements","length","Fieldset","classNameModifiers","label","get","p","className","RadioGroupExtended","name","items","mapDualBrandButtons","onChange","handleDualBrandSelection","showSelectedTick","KCPAuthentication","encryptedPasswordState","encryptedPassword","taxNumber","div","SocialSecurityNumberBrazil","StoreDetails","Installments","type","Address","allowedCountries","requiredFields","setComponentRef","validationRules","specifications","DisclaimerMessage","message","replace","linkText","urls","link"],"mappings":"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"}
|
package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as t}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";import{alternativeLabelContent as m}from"../FieldLabelAlternative.js";function r(r){const{i18n:u}=a(),{amount:d,brand:v,onChange:c,type:p}=r,g=r.installmentOptions[v]||r.installmentOptions.card,f=1===g?.values?.length,[b,h]=l(g?.preselectedValue||g?.values[0]),[F,C]=l("onetime"),j=g?.plans?.includes("revolving"),
|
|
1
|
+
import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as t}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";import{alternativeLabelContent as m}from"../FieldLabelAlternative.js";function r(r){const{i18n:u}=a(),{amount:d,brand:v,onChange:c,type:p}=r,g=r.installmentOptions[v]||r.installmentOptions.card,f=1===g?.values?.length,[b,h]=l(g?.preselectedValue||g?.values[0]),[F,C]=l("onetime"),j=g?.plans?.includes("revolving"),N=e=>{const l=e.target.value;h(Number(l))},_=e=>{const l=e.currentTarget.getAttribute("value");C(l)},x=e=>{let l,t;var n;return"amount"===p?(l="installmentOption",t={count:e,values:{times:e,partialValue:(n=e,u.amount(d.value/n,d.currency))}}):(l="installmentOptionMonths",t={count:e,values:{times:e}}),{id:e,name:d.value?u.get(l,t):`${e}`}};return t(()=>{g?.values?.includes(b)||h(g?.preselectedValue??g?.values[0])},[v]),t(()=>{const e={value:b,...j&&"revolving"===F&&{plan:F,value:1},...j&&"onetime"===F&&{value:1}};c(g?e:{value:null})},[b,g,F]),g?0===d.value?null:j?e("div",{className:"adyen-checkout__installments adyen-checkout__installments--revolving-plan"},e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installmentsPseudoLabel",useLabelElement:!1,showContextualElement:!1,renderAlternativeToLabel:m},e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:_,value:F,ariaLabel:u.get("installments")}),e(n,{className:"installments"!==F?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(x),selectedValue:b,onChange:N,name:"installments",disabled:"installments"!==F}))))):e("div",{className:"adyen-checkout__installments"},e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installments",showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(x),selectedValue:b,onChange:N,name:"installments",readonly:f,disabled:f,allowIdOnButton:!0}))):null}r.defaultProps={brand:"",amount:{},onChange:()=>{}};export{r as default};
|
|
2
2
|
//# sourceMappingURL=Installments.js.map
|
package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\nimport { alternativeLabelContent } from '../FieldLabelAlternative';\nimport './Installments.scss';\n\nexport interface InstallmentsObj {\n value: number;\n plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n const { i18n } = useCoreContext();\n const { amount, brand, onChange, type } = props;\n const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n const readOnly = installmentOptions?.values?.length === 1;\n const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n const onSelectInstallment = e => {\n const selectedInstallments = e.target.value;\n setInstallmentAmount(Number(selectedInstallments));\n };\n\n const onRadioSelect = e => {\n const selectedBtn = e.currentTarget.getAttribute('value');\n setRadioBtnValue(selectedBtn);\n };\n\n const installmentItemsMapper = (value: number): InstallmentsItem => {\n let translationKey;\n let translationObj;\n\n if (type === 'amount') {\n translationKey = 'installmentOption';\n translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n } else {\n translationKey = `installmentOptionMonths`;\n translationObj = { count: value, values: { times: value } };\n }\n\n return {\n id: value,\n name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n };\n };\n\n useEffect(() => {\n if (installmentOptions?.values?.includes(installmentAmount)) {\n return;\n }\n\n setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n }, [brand]);\n\n useEffect(() => {\n const stateObj: InstallmentsObj = {\n value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n };\n\n onChange(installmentOptions ? stateObj : { value: null });\n }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n if (!installmentOptions) return null;\n if (amount.value === 0) return null;\n\n // Alternate interface for installments with the possibility of a \"revolving\" plan\n if (hasRadioButtonUI) {\n return (\n <div className=\"adyen-checkout__installments\">\n <Field\n label={i18n.get('installments')}\n classNameModifiers={['installments']}\n name={'installmentsPseudoLabel'}\n useLabelElement={false}\n showContextualElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n <RadioGroup\n items={[\n { id: 'onetime', name: 'installments.oneTime' },\n { id: 'installments', name: 'installments.installments' },\n { id: 'revolving', name: 'installments.revolving' }\n ]}\n onChange={onRadioSelect}\n value={radioBtnValue}\n ariaLabel={i18n.get('installments')}\n />\n\n <Field\n className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n classNameModifiers={['revolving-plan-installments']}\n name={''}\n useLabelElement={false}\n showContextualElement={false}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n disabled={radioBtnValue !== 'installments'}\n />\n </Field>\n </Fieldset>\n </Field>\n </div>\n );\n }\n\n return (\n <div className=\"adyen-checkout__installments\">\n <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} showContextualElement={false}>\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n readonly={readOnly}\n allowIdOnButton={true}\n />\n </Field>\n </div>\n );\n}\n\nInstallments.defaultProps = {\n brand: '',\n amount: {},\n onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Field","label","classNameModifiers","useLabelElement","showContextualElement","renderAlternativeToLabel","alternativeLabelContent","Fieldset","RadioGroup","items","ariaLabel","Select","filterable","map","selectedValue","disabled","readonly","allowIdOnButton","defaultProps"],"mappings":"6lBAmBA,SAASA,EAAaC,GAClB,MAAMC,KAAEA,GAASC,KACXC,OAAEA,EAAMC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASN,EACpCO,EAAqBP,EAAMO,mBAAmBH,IAAUJ,EAAMO,mBAAmBC,KACjFC,EAAkD,IAAvCF,GAAoBG,QAAQC,QACtCC,EAAmBC,GAAwBC,EAASP,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACvHM,EAAeC,GAAoBH,EAAS,WAG7CI,EAAmBX,GAAoBY,OAAOC,SAAS,aAGvDC,EAAsBC,IACxB,MAAMC,EAAuBD,EAAEE,OAAOC,MACtCZ,EAAqBa,OAAOH,KAG1BI,EAAgBL,IAClB,MAAMM,EAAcN,EAAEO,cAAcC,aAAa,SACjDb,EAAiBW,IAGfG,EAA0BN,IAC5B,IAAIO,EACAC,EAdiB,IAACC,EAwBtB,MARa,WAAT5B,GACA0B,EAAiB,oBACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,EAAOY,cAlBvCH,EAkBsET,EAlB1CxB,EAAKE,OAAOA,EAAOsB,MAAQS,EAAS/B,EAAOmC,eAoBzFN,EAAiB,0BACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,KAG/C,CACHc,GAAId,EACJe,KAAMrC,EAAOsB,MAAQxB,EAAKwC,IAAIT,EAAgBC,GAAkB,GAAGR,MAsB3E,OAlBAiB,EAAU,KACFnC,GAAoBG,QAAQU,SAASR,IAIzCC,EAAqBN,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACzF,CAACN,IAEJsC,EAAU,KACN,MAAMC,EAA4B,CAC9BlB,MAAOb,KACHM,GAAsC,cAAlBF,GAAiC,CAAE4B,KAAM5B,EAAeS,MAAO,MACnFP,GAAsC,YAAlBF,GAA+B,CAAES,MAAO,IAGpEpB,EAASE,EAAqBoC,EAAW,CAAElB,MAAO,QACnD,CAACb,EAAmBL,EAAoBS,IAEtCT,EACgB,IAAjBJ,EAAOsB,MAAoB,
|
|
1
|
+
{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\nimport { alternativeLabelContent } from '../FieldLabelAlternative';\nimport './Installments.scss';\n\nexport interface InstallmentsObj {\n value: number;\n plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n const { i18n } = useCoreContext();\n const { amount, brand, onChange, type } = props;\n const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n const readOnly = installmentOptions?.values?.length === 1;\n const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n const onSelectInstallment = e => {\n const selectedInstallments = e.target.value;\n setInstallmentAmount(Number(selectedInstallments));\n };\n\n const onRadioSelect = e => {\n const selectedBtn = e.currentTarget.getAttribute('value');\n setRadioBtnValue(selectedBtn);\n };\n\n const installmentItemsMapper = (value: number): InstallmentsItem => {\n let translationKey;\n let translationObj;\n\n if (type === 'amount') {\n translationKey = 'installmentOption';\n translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n } else {\n translationKey = `installmentOptionMonths`;\n translationObj = { count: value, values: { times: value } };\n }\n\n return {\n id: value,\n name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n };\n };\n\n useEffect(() => {\n if (installmentOptions?.values?.includes(installmentAmount)) {\n return;\n }\n\n setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n }, [brand]);\n\n useEffect(() => {\n const stateObj: InstallmentsObj = {\n value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n };\n\n onChange(installmentOptions ? stateObj : { value: null });\n }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n if (!installmentOptions) return null;\n if (amount.value === 0) return null;\n\n // Alternate interface for installments with the possibility of a \"revolving\" plan\n if (hasRadioButtonUI) {\n return (\n <div className=\"adyen-checkout__installments adyen-checkout__installments--revolving-plan\">\n <Field\n label={i18n.get('installments')}\n classNameModifiers={['installments']}\n name={'installmentsPseudoLabel'}\n useLabelElement={false}\n showContextualElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n <RadioGroup\n items={[\n { id: 'onetime', name: 'installments.oneTime' },\n { id: 'installments', name: 'installments.installments' },\n { id: 'revolving', name: 'installments.revolving' }\n ]}\n onChange={onRadioSelect}\n value={radioBtnValue}\n ariaLabel={i18n.get('installments')}\n />\n\n <Field\n className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n classNameModifiers={['revolving-plan-installments']}\n name={''}\n useLabelElement={false}\n showContextualElement={false}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n disabled={radioBtnValue !== 'installments'}\n />\n </Field>\n </Fieldset>\n </Field>\n </div>\n );\n }\n\n return (\n <div className=\"adyen-checkout__installments\">\n <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} showContextualElement={false}>\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n readonly={readOnly}\n disabled={readOnly}\n allowIdOnButton={true}\n />\n </Field>\n </div>\n );\n}\n\nInstallments.defaultProps = {\n brand: '',\n amount: {},\n onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Field","label","classNameModifiers","useLabelElement","showContextualElement","renderAlternativeToLabel","alternativeLabelContent","Fieldset","RadioGroup","items","ariaLabel","Select","filterable","map","selectedValue","disabled","readonly","allowIdOnButton","defaultProps"],"mappings":"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"}
|