diff --git a/packages/lib/config/rollup.prod.js b/packages/lib/config/rollup.prod.js index d448545df1..b10ff70083 100644 --- a/packages/lib/config/rollup.prod.js +++ b/packages/lib/config/rollup.prod.js @@ -122,7 +122,7 @@ export default () => { // Types CJS { - input: 'dist/temp-types/index.d.ts', + input: 'dist/temp-types/types.d.ts', output: [{ file: './dist/cjs/index.d.cts', format: 'commonjs' }], external: [/\.scss$/u], plugins: [generateTypes()] @@ -130,9 +130,9 @@ export default () => { // Types ES { - input: 'dist/temp-types/index.d.ts', + input: 'dist/temp-types/types.d.ts', output: [{ file: './dist/es/index.d.ts', format: 'es' }], - external: [/\.scss$/u], + external: [/\.scss$/u, /\.json$/u], plugins: [generateTypes()] } ]; diff --git a/packages/lib/src/components/ANCV/ANCV.tsx b/packages/lib/src/components/ANCV/ANCV.tsx index 2fe027cad8..31f184eca5 100644 --- a/packages/lib/src/components/ANCV/ANCV.tsx +++ b/packages/lib/src/components/ANCV/ANCV.tsx @@ -1,26 +1,16 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import ANCVInput from './components/ANCVInput'; import CoreProvider from '../../core/Context/CoreProvider'; import config from './components/ANCVAwait/config'; import Await from '../../components/internal/Await'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; -import { PaymentResponse, UIElementProps } from '../types'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; import PayButton from '../internal/PayButton'; +import { ANCVConfiguration } from './types'; +import { PaymentResponseData } from '../../types/global-types'; -export interface ANCVProps extends UIElementProps { - paymentData?: any; - data: ANCVDataState; - onOrderRequest?: any; - onOrderCreated?: any; -} - -export interface ANCVDataState { - beneficiaryId: string; -} - -export class ANCVElement extends UIElement { +export class ANCVElement extends UIElement { public static type = 'ancv'; /** @@ -46,7 +36,7 @@ export class ANCVElement extends UIElement { } }; - protected handleOrder = ({ order }: PaymentResponse) => { + protected handleOrder = ({ order }: PaymentResponseData) => { this.updateParent({ order }); if (this.props.session && this.props.onOrderCreated) { return this.props.onOrderCreated(order); diff --git a/packages/lib/src/components/ANCV/components/ANCVInput.tsx b/packages/lib/src/components/ANCV/components/ANCVInput.tsx index f17d27bdbd..080b5dbde6 100644 --- a/packages/lib/src/components/ANCV/components/ANCVInput.tsx +++ b/packages/lib/src/components/ANCV/components/ANCVInput.tsx @@ -5,9 +5,9 @@ import LoadingWrapper from '../../internal/LoadingWrapper'; import InputText from '../../internal/FormFields/InputText'; import Field from '../../internal/FormFields/Field'; import useForm from '../../../utils/useForm'; -import { UIElementProps } from '../../types'; import { ancvValidationRules } from '../validate'; -import { ANCVDataState } from '../ANCV'; +import { ANCVDataState } from '../types'; +import { UIElementProps } from '../../internal/UIElement/types'; export interface ANCVInputProps extends UIElementProps { ref?: any; diff --git a/packages/lib/src/components/ANCV/types.ts b/packages/lib/src/components/ANCV/types.ts new file mode 100644 index 0000000000..a500dfd92d --- /dev/null +++ b/packages/lib/src/components/ANCV/types.ts @@ -0,0 +1,12 @@ +import { UIElementProps } from '../internal/UIElement/types'; + +export interface ANCVConfiguration extends UIElementProps { + paymentData?: any; + data: ANCVDataState; + onOrderRequest?: any; + onOrderCreated?: any; +} + +export interface ANCVDataState { + beneficiaryId: string; +} diff --git a/packages/lib/src/components/Ach/Ach.tsx b/packages/lib/src/components/Ach/Ach.tsx index cc4eab95f3..139c908beb 100644 --- a/packages/lib/src/components/Ach/Ach.tsx +++ b/packages/lib/src/components/Ach/Ach.tsx @@ -1,15 +1,15 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import AchInput from './components/AchInput'; import CoreProvider from '../../core/Context/CoreProvider'; import RedirectButton from '../internal/RedirectButton'; -import { AchElementProps } from './types'; +import { AchConfiguration } from './types'; import { TxVariants } from '../tx-variants'; -export class AchElement extends UIElement { +export class AchElement extends UIElement { public static type = TxVariants.ach; - formatProps(props: AchElementProps) { + formatProps(props: AchConfiguration) { return { ...props, // Fix mismatch between passed hasHolderName & holderNameRequired props diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx index ec90562de0..9a74ef379a 100644 --- a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx +++ b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx @@ -12,9 +12,9 @@ import useCoreContext from '../../../../core/Context/useCoreContext'; import './AchInput.scss'; import { ACHInputDataState, ACHInputProps, ACHInputStateError, ACHInputStateValid } from './types'; import StoreDetails from '../../../internal/StoreDetails'; -import { ComponentMethodsRef } from '../../../types'; import InputText from '../../../internal/FormFields/InputText'; import FormInstruction from '../../../internal/FormInstruction'; +import { ComponentMethodsRef } from '../../../internal/UIElement/types'; function validateHolderName(holderName, holderNameRequired = false) { if (holderNameRequired) { diff --git a/packages/lib/src/components/Ach/components/AchInput/types.ts b/packages/lib/src/components/Ach/components/AchInput/types.ts index f38e0595b0..711c3a538c 100644 --- a/packages/lib/src/components/Ach/components/AchInput/types.ts +++ b/packages/lib/src/components/Ach/components/AchInput/types.ts @@ -1,6 +1,6 @@ import Language from '../../../../language/Language'; import { StylesObject } from '../../../internal/SecuredFields/lib/types'; -import UIElement from '../../../UIElement'; +import UIElement from '../../../internal/UIElement/UIElement'; import { Resources } from '../../../../core/Context/Resources'; export interface ACHInputStateValid { diff --git a/packages/lib/src/components/Ach/index.ts b/packages/lib/src/components/Ach/index.ts index 91948b16e5..91cae5e490 100644 --- a/packages/lib/src/components/Ach/index.ts +++ b/packages/lib/src/components/Ach/index.ts @@ -1 +1,2 @@ export { default } from './Ach'; +export * from './types'; diff --git a/packages/lib/src/components/Ach/types.ts b/packages/lib/src/components/Ach/types.ts index 3ad178d738..5cf17a1d36 100644 --- a/packages/lib/src/components/Ach/types.ts +++ b/packages/lib/src/components/Ach/types.ts @@ -1,7 +1,7 @@ -import { UIElementProps } from '../types'; import { Placeholders } from './components/AchInput/types'; +import { UIElementProps } from '../internal/UIElement/types'; -export interface AchElementProps extends UIElementProps { +export interface AchConfiguration extends UIElementProps { storedPaymentMethodId?: string; holderNameRequired?: boolean; hasHolderName?: boolean; diff --git a/packages/lib/src/components/Address/Address.tsx b/packages/lib/src/components/Address/Address.tsx index 7d7c687523..c0b9eab5b2 100644 --- a/packages/lib/src/components/Address/Address.tsx +++ b/packages/lib/src/components/Address/Address.tsx @@ -1,5 +1,5 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import Address from '../internal/Address'; import CoreProvider from '../../core/Context/CoreProvider'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/AfterPay/AfterPayB2B.tsx b/packages/lib/src/components/AfterPay/AfterPayB2B.tsx index 7b8ab9b43f..9f8bf74ae1 100644 --- a/packages/lib/src/components/AfterPay/AfterPayB2B.tsx +++ b/packages/lib/src/components/AfterPay/AfterPayB2B.tsx @@ -2,13 +2,13 @@ import { h } from 'preact'; import OpenInvoiceContainer from '../helpers/OpenInvoiceContainer'; import ConsentCheckboxLabel from './components/ConsentCheckboxLabel'; import { AFTERPAY_B2B_CONSENT_URL, ALLOWED_COUNTRIES } from './config'; -import { OpenInvoiceContainerProps } from '../helpers/OpenInvoiceContainer/OpenInvoiceContainer'; import { TxVariants } from '../tx-variants'; +import { OpenInvoiceConfiguration } from '../helpers/OpenInvoiceContainer/types'; export default class AfterPayB2B extends OpenInvoiceContainer { public static type = TxVariants.afterpay_b2b; - protected static defaultProps: Partial = { + protected static defaultProps: Partial = { onChange: () => {}, data: { companyDetails: {}, personalDetails: {}, billingAddress: {}, deliveryAddress: {} }, visibility: { diff --git a/packages/lib/src/components/AmazonPay/AmazonPay.test.tsx b/packages/lib/src/components/AmazonPay/AmazonPay.test.tsx index 29b28caef4..2a9404cd71 100644 --- a/packages/lib/src/components/AmazonPay/AmazonPay.test.tsx +++ b/packages/lib/src/components/AmazonPay/AmazonPay.test.tsx @@ -2,7 +2,7 @@ import AmazonPay from './AmazonPay'; import defaultProps from './defaultProps'; import { httpPost } from '../../core/Services/http'; import { mock } from 'jest-mock-extended'; -import { AmazonPayElementProps } from './types'; +import { AmazonPayConfiguration } from './types'; jest.mock('../../core/Services/http'); @@ -13,7 +13,7 @@ const declineFlowMock = { const spyFetch = (httpPost as jest.Mock).mockImplementation(jest.fn(() => Promise.resolve(declineFlowMock))); describe('AmazonPay', () => { - const amazonProps = mock(); + const amazonProps = mock(); const getElement = (props = {}) => new AmazonPay({ ...defaultProps, diff --git a/packages/lib/src/components/AmazonPay/AmazonPay.tsx b/packages/lib/src/components/AmazonPay/AmazonPay.tsx index 1d97106c2b..b9398a1671 100644 --- a/packages/lib/src/components/AmazonPay/AmazonPay.tsx +++ b/packages/lib/src/components/AmazonPay/AmazonPay.tsx @@ -1,15 +1,15 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; import collectBrowserInfo from '../../utils/browserInfo'; import AmazonPayComponent from './components/AmazonPayComponent'; -import { AmazonPayElementData, AmazonPayElementProps, CheckoutDetailsRequest } from './types'; +import { AmazonPayElementData, AmazonPayConfiguration, CheckoutDetailsRequest } from './types'; import defaultProps from './defaultProps'; import { getCheckoutDetails } from './services'; import './AmazonPay.scss'; import { TxVariants } from '../tx-variants'; -export class AmazonPayElement extends UIElement { +export class AmazonPayElement extends UIElement { public static type = TxVariants.amazonpay; protected static defaultProps = defaultProps; diff --git a/packages/lib/src/components/AmazonPay/defaultProps.ts b/packages/lib/src/components/AmazonPay/defaultProps.ts index e94ed8d8d8..fbfb38e42f 100644 --- a/packages/lib/src/components/AmazonPay/defaultProps.ts +++ b/packages/lib/src/components/AmazonPay/defaultProps.ts @@ -1,6 +1,6 @@ -import { AmazonPayElementProps } from './types'; +import { AmazonPayConfiguration } from './types'; -const defaultProps: Partial = { +const defaultProps: Partial = { cancelUrl: typeof window !== 'undefined' ? window.location.href : '', configuration: {}, environment: 'TEST', diff --git a/packages/lib/src/components/AmazonPay/index.ts b/packages/lib/src/components/AmazonPay/index.ts index b01be020ad..3120752164 100644 --- a/packages/lib/src/components/AmazonPay/index.ts +++ b/packages/lib/src/components/AmazonPay/index.ts @@ -1 +1,2 @@ export { default } from './AmazonPay'; +// export * from './types'; diff --git a/packages/lib/src/components/AmazonPay/types.ts b/packages/lib/src/components/AmazonPay/types.ts index d6fc6a8811..4e912ce462 100644 --- a/packages/lib/src/components/AmazonPay/types.ts +++ b/packages/lib/src/components/AmazonPay/types.ts @@ -1,8 +1,8 @@ import Language from '../../language/Language'; import { SUPPORTED_LOCALES_EU, SUPPORTED_LOCALES_US } from './config'; -import { BrowserInfo, PaymentAmount } from '../../types'; -import UIElement from '../UIElement'; -import { UIElementProps } from '../types'; +import UIElement from '../internal/UIElement/UIElement'; +import { UIElementProps } from '../internal/UIElement/types'; +import { BrowserInfo, PaymentAmount } from '../../types/global-types'; declare global { interface Window { @@ -30,14 +30,14 @@ export interface RecurringMetadata { }; } -export interface AmazonPayConfiguration { +export interface AmazonPayBackendConfiguration { merchantId?: string; publicKeyId?: string; region?: Region; storeId?: string; } -export interface AmazonPayElementProps extends UIElementProps { +export interface AmazonPayConfiguration extends UIElementProps { addressDetails?: AddressDetails; amazonPayToken?: string; amazonCheckoutSessionId?: string; @@ -46,7 +46,7 @@ export interface AmazonPayElementProps extends UIElementProps { cancelUrl?: string; chargePermissionType?: ChargePermissionType; clientKey?: string; - configuration?: AmazonPayConfiguration; + configuration?: AmazonPayBackendConfiguration; currency?: Currency; deliverySpecifications?: DeliverySpecifications; environment?: string; @@ -70,7 +70,7 @@ export interface AmazonPayElementProps extends UIElementProps { onSignOut: (resolve, reject) => Promise; } -export interface AmazonPayComponentProps extends AmazonPayElementProps { +export interface AmazonPayComponentProps extends AmazonPayConfiguration { ref: any; } @@ -81,7 +81,7 @@ export interface AmazonPayButtonProps { cancelUrl?: string; chargePermissionType?: ChargePermissionType; clientKey?: string; - configuration?: AmazonPayConfiguration; + configuration?: AmazonPayBackendConfiguration; currency?: Currency; deliverySpecifications?: DeliverySpecifications; design?: string; diff --git a/packages/lib/src/components/AmazonPay/utils.ts b/packages/lib/src/components/AmazonPay/utils.ts index 2d61f5d6fd..9849b9c765 100644 --- a/packages/lib/src/components/AmazonPay/utils.ts +++ b/packages/lib/src/components/AmazonPay/utils.ts @@ -8,7 +8,7 @@ import { SUPPORTED_LOCALES_US } from './config'; import { AmazonPayButtonProps, AmazonPayButtonSettings, ChargeAmount, Currency, PayloadJSON, Region, SupportedLocale } from './types'; -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; import { getDecimalAmount } from '../../utils/amount-util'; /** diff --git a/packages/lib/src/components/ApplePay/ApplePay.tsx b/packages/lib/src/components/ApplePay/ApplePay.tsx index eced99ddf4..74b92bcd68 100644 --- a/packages/lib/src/components/ApplePay/ApplePay.tsx +++ b/packages/lib/src/components/ApplePay/ApplePay.tsx @@ -1,5 +1,5 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import ApplePayButton from './components/ApplePayButton'; import ApplePayService from './ApplePayService'; import base64 from '../../utils/base64'; @@ -8,17 +8,17 @@ import { httpPost } from '../../core/Services/http'; import { APPLEPAY_SESSION_ENDPOINT } from './config'; import { preparePaymentRequest } from './payment-request'; import { resolveSupportedVersion, mapBrands } from './utils'; -import { ApplePayElementProps, ApplePayElementData, ApplePaySessionRequest, OnAuthorizedCallback } from './types'; +import { ApplePayConfiguration, ApplePayElementData, ApplePaySessionRequest, OnAuthorizedCallback } from './types'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; import { TxVariants } from '../tx-variants'; const latestSupportedVersion = 14; -class ApplePayElement extends UIElement { +class ApplePayElement extends UIElement { public static type = TxVariants.applepay; protected static defaultProps = defaultProps; - constructor(props: ApplePayElementProps) { + constructor(props: ApplePayConfiguration) { super(props); this.startSession = this.startSession.bind(this); this.submit = this.submit.bind(this); diff --git a/packages/lib/src/components/ApplePay/payment-request.ts b/packages/lib/src/components/ApplePay/payment-request.ts index 7673b519db..a151b477a4 100644 --- a/packages/lib/src/components/ApplePay/payment-request.ts +++ b/packages/lib/src/components/ApplePay/payment-request.ts @@ -1,5 +1,5 @@ import { getDecimalAmount } from '../../utils/amount-util'; -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; const formatAmount = (amount: PaymentAmount) => String(getDecimalAmount(amount.value, amount.currency)); diff --git a/packages/lib/src/components/ApplePay/types.ts b/packages/lib/src/components/ApplePay/types.ts index eb633a0115..fa5f626818 100644 --- a/packages/lib/src/components/ApplePay/types.ts +++ b/packages/lib/src/components/ApplePay/types.ts @@ -1,6 +1,6 @@ -import { UIElementProps } from '../types'; - // eslint-disable-next-line @typescript-eslint/no-unused-vars +import { UIElementProps } from '../internal/UIElement/types'; + declare global { interface Window { ApplePaySession: ApplePaySession; @@ -31,7 +31,7 @@ export type OnAuthorizedCallback = ( event: ApplePayJS.ApplePayPaymentAuthorizedEvent ) => void; -export interface ApplePayElementProps extends UIElementProps { +export interface ApplePayConfiguration extends UIElementProps { /** * The Apple Pay version number your website supports. * @default highest supported version by the shopper device diff --git a/packages/lib/src/components/BacsDD/BacsDD.tsx b/packages/lib/src/components/BacsDD/BacsDD.tsx index 703fd1afa6..d4252da263 100644 --- a/packages/lib/src/components/BacsDD/BacsDD.tsx +++ b/packages/lib/src/components/BacsDD/BacsDD.tsx @@ -1,23 +1,14 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import BacsInput from './components/BacsInput'; import CoreProvider from '../../core/Context/CoreProvider'; import BacsResult from './components/BacsResult'; import PayButton from '../internal/PayButton'; import { TxVariants } from '../tx-variants'; -import { VoucherActionElement } from '../types'; +import { VoucherConfiguration } from '../internal/Voucher/types'; +import { BacsElementData } from './types'; -interface BacsElementData { - paymentMethod: { - type: string; - holderName: string; - bankAccountNumber: string; - bankLocationId: string; - }; - shopperEmail: string; -} - -class BacsElement extends UIElement { +class BacsElement extends UIElement { public static type = TxVariants.directdebit_GB; protected static defaultProps = { diff --git a/packages/lib/src/components/BacsDD/components/types.ts b/packages/lib/src/components/BacsDD/components/types.ts index 29e63a16ce..944908d9da 100644 --- a/packages/lib/src/components/BacsDD/components/types.ts +++ b/packages/lib/src/components/BacsDD/components/types.ts @@ -1,4 +1,4 @@ -import { UIElementProps } from '../../types'; +import { UIElementProps } from '../../internal/UIElement/types'; export interface BacsInputData { holderName?: string; diff --git a/packages/lib/src/components/BacsDD/types.ts b/packages/lib/src/components/BacsDD/types.ts new file mode 100644 index 0000000000..0129cff453 --- /dev/null +++ b/packages/lib/src/components/BacsDD/types.ts @@ -0,0 +1,9 @@ +export interface BacsElementData { + paymentMethod: { + type: string; + holderName: string; + bankAccountNumber: string; + bankLocationId: string; + }; + shopperEmail: string; +} diff --git a/packages/lib/src/components/BankTransfer/BankTransfer.tsx b/packages/lib/src/components/BankTransfer/BankTransfer.tsx index 18b64dbd7a..e13b1ed056 100644 --- a/packages/lib/src/components/BankTransfer/BankTransfer.tsx +++ b/packages/lib/src/components/BankTransfer/BankTransfer.tsx @@ -1,13 +1,13 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; import RedirectButton from '../internal/RedirectButton'; -import { BankTransferProps, BankTransferState } from './types'; +import { BankTransferConfiguration, BankTransferState } from './types'; import BankTransferResult from './components/BankTransferResult'; import BankTransferInput from './components/BankTransferInput'; import { TxVariants } from '../tx-variants'; -export class BankTransferElement extends UIElement { +export class BankTransferElement extends UIElement { public static type = TxVariants.bankTransfer_IBAN; public static defaultProps = { diff --git a/packages/lib/src/components/BankTransfer/types.ts b/packages/lib/src/components/BankTransfer/types.ts index 023cf9a5a9..75cfc2d0a5 100644 --- a/packages/lib/src/components/BankTransfer/types.ts +++ b/packages/lib/src/components/BankTransfer/types.ts @@ -1,6 +1,6 @@ -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; -export interface BankTransferProps extends UIElementProps { +export interface BankTransferConfiguration extends UIElementProps { reference?: string; /** diff --git a/packages/lib/src/components/BcmcMobile/BcmcMobile.ts b/packages/lib/src/components/BcmcMobile/BcmcMobile.ts index afbe6a54f0..c240756d48 100644 --- a/packages/lib/src/components/BcmcMobile/BcmcMobile.ts +++ b/packages/lib/src/components/BcmcMobile/BcmcMobile.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { STATUS_INTERVAL, COUNTDOWN_MINUTES } from './config'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/BillDesk/BillDeskOnline.ts b/packages/lib/src/components/BillDesk/BillDeskOnline.ts index a248133fc6..d35daa0596 100644 --- a/packages/lib/src/components/BillDesk/BillDeskOnline.ts +++ b/packages/lib/src/components/BillDesk/BillDeskOnline.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class BillDeskOnlineElement extends IssuerListContainer { diff --git a/packages/lib/src/components/BillDesk/BillDeskWallet.ts b/packages/lib/src/components/BillDesk/BillDeskWallet.ts index c985aa0bab..5cfd0f4664 100644 --- a/packages/lib/src/components/BillDesk/BillDeskWallet.ts +++ b/packages/lib/src/components/BillDesk/BillDeskWallet.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class BillDeskWalletElement extends IssuerListContainer { diff --git a/packages/lib/src/components/Blik/Blik.tsx b/packages/lib/src/components/Blik/Blik.tsx index 06ed13d6a5..0aa1860516 100644 --- a/packages/lib/src/components/Blik/Blik.tsx +++ b/packages/lib/src/components/Blik/Blik.tsx @@ -1,5 +1,5 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import BlikInput from '../../components/Blik/components/BlikInput'; import Await from '../internal/Await'; import CoreProvider from '../../core/Context/CoreProvider'; @@ -7,7 +7,7 @@ import config from './config'; import RedirectButton from '../../components/internal/RedirectButton'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; import { TxVariants } from '../tx-variants'; -import { AwaitActionElement } from '../types'; +import { AwaitConfiguration } from '../internal/Await/types'; interface BlikElementData { paymentMethod: { @@ -16,7 +16,7 @@ interface BlikElementData { }; } -class BlikElement extends UIElement { +class BlikElement extends UIElement { public static type = TxVariants.blik; formatData(): BlikElementData { diff --git a/packages/lib/src/components/Blik/components/BlikInput.tsx b/packages/lib/src/components/Blik/components/BlikInput.tsx index 3e7e896392..469824cbbc 100644 --- a/packages/lib/src/components/Blik/components/BlikInput.tsx +++ b/packages/lib/src/components/Blik/components/BlikInput.tsx @@ -2,13 +2,12 @@ import { h } from 'preact'; import { useState, useEffect } from 'preact/hooks'; import useCoreContext from '../../../core/Context/useCoreContext'; import Field from '../../internal/FormFields/Field'; - -import { UIElementProps } from '../../types'; import './BlikInput.scss'; import useForm from '../../../utils/useForm'; import { digitsOnlyFormatter } from '../../../utils/Formatters/formatters'; import useImage from '../../../core/Context/useImage'; import InputText from '../../internal/FormFields/InputText'; +import { UIElementProps } from '../../internal/UIElement/types'; interface BlikInputProps extends UIElementProps { data?: BlikInputDataState; diff --git a/packages/lib/src/components/Boleto/Boleto.tsx b/packages/lib/src/components/Boleto/Boleto.tsx index 0076d847d3..9e27d7882b 100644 --- a/packages/lib/src/components/Boleto/Boleto.tsx +++ b/packages/lib/src/components/Boleto/Boleto.tsx @@ -1,13 +1,13 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import BoletoInput from './components/BoletoInput'; import { cleanCPFCNPJ } from '../internal/SocialSecurityNumberBrazil/utils'; import BoletoVoucherResult from './components/BoletoVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; import { TxVariants } from '../tx-variants'; -import { VoucherActionElement } from '../types'; +import { VoucherConfiguration } from '../internal/Voucher/types'; -export class BoletoElement extends UIElement { +export class BoletoElement extends UIElement { public static type = TxVariants.boletobancario; public static txVariants = [ diff --git a/packages/lib/src/components/Boleto/components/BoletoInput/BoletoInput.tsx b/packages/lib/src/components/Boleto/components/BoletoInput/BoletoInput.tsx index 6a01a1c1bc..6b526d4c67 100644 --- a/packages/lib/src/components/Boleto/components/BoletoInput/BoletoInput.tsx +++ b/packages/lib/src/components/Boleto/components/BoletoInput/BoletoInput.tsx @@ -8,8 +8,8 @@ import useCoreContext from '../../../../core/Context/useCoreContext'; import { BoletoInputDataState } from '../../types'; import useForm from '../../../../utils/useForm'; import { BrazilPersonalDetail } from '../../../internal/SocialSecurityNumberBrazil/BrazilPersonalDetail'; -import { ComponentMethodsRef } from '../../../types'; import FormInstruction from '../../../internal/FormInstruction'; +import { ComponentMethodsRef } from '../../../internal/UIElement/types'; interface BoletoInputProps { onChange(data: any): void; diff --git a/packages/lib/src/components/Boleto/types.ts b/packages/lib/src/components/Boleto/types.ts index 906169c086..71f0554dbf 100644 --- a/packages/lib/src/components/Boleto/types.ts +++ b/packages/lib/src/components/Boleto/types.ts @@ -1,5 +1,5 @@ import Language from '../../language/Language'; -import { AddressData } from '../../types'; +import { AddressData } from '../../types/global-types'; export interface BoletoElementProps { type: string; diff --git a/packages/lib/src/components/Card/Bancontact.ts b/packages/lib/src/components/Card/Bancontact.ts index 13e3ca5d86..d5a1d6cada 100644 --- a/packages/lib/src/components/Card/Bancontact.ts +++ b/packages/lib/src/components/Card/Bancontact.ts @@ -1,12 +1,12 @@ import { CardElement } from './Card'; -import { CardElementData, CardElementProps } from './types'; +import { CardElementData, CardConfiguration } from './types'; import { CVC_POLICY_HIDDEN } from '../internal/SecuredFields/lib/configuration/constants'; import { TxVariants } from '../tx-variants'; class BancontactElement extends CardElement { public static type = TxVariants.bcmc; - constructor(props: CardElementProps) { + constructor(props: CardConfiguration) { super(props); } @@ -27,7 +27,7 @@ class BancontactElement extends CardElement { * At the same time we can't treat it as a regular 'card' component - because it needs to hide the CVC field at at startup, * as well as show the BCMC logo in the number field and ignore any of the internal, regEx driven, brand detection. */ - formatProps(props: CardElementProps) { + formatProps(props: CardConfiguration) { return { ...super.formatProps(props), /** diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx index ee8e0cbd9d..cc374e410e 100644 --- a/packages/lib/src/components/Card/Card.tsx +++ b/packages/lib/src/components/Card/Card.tsx @@ -1,9 +1,9 @@ import { h } from 'preact'; -import { UIElement } from '../UIElement'; +import { UIElement } from '../internal/UIElement/UIElement'; import CardInput from './components/CardInput'; import CoreProvider from '../../core/Context/CoreProvider'; import collectBrowserInfo from '../../utils/browserInfo'; -import { BinLookupResponse, CardElementData, CardElementProps } from './types'; +import { BinLookupResponse, CardElementData, CardConfiguration } from './types'; import triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp'; import { CbObjOnBinLookup } from '../internal/SecuredFields/lib/types'; import { reject } from '../internal/SecuredFields/utils'; @@ -11,11 +11,11 @@ import { hasValidInstallmentsObject } from './components/CardInput/utils'; import createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service'; import { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types'; import ClickToPayWrapper from './components/ClickToPayWrapper'; -import { UIElementStatus } from '../types'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; import { TxVariants } from '../tx-variants'; +import { UIElementStatus } from '../internal/UIElement/types'; -export class CardElement extends UIElement { +export class CardElement extends UIElement { public static type = TxVariants.scheme; private readonly clickToPayService: IClickToPayService | null; @@ -25,7 +25,7 @@ export class CardElement extends UIElement { */ private clickToPayRef = null; - constructor(props: CardElementProps) { + constructor(props: CardConfiguration) { super(props); if (props && !props._disableClickToPay) { @@ -55,7 +55,7 @@ export class CardElement extends UIElement { this.clickToPayRef = ref; }; - formatProps(props: CardElementProps) { + formatProps(props: CardConfiguration) { return { ...props, // Mismatch between hasHolderName & holderNameRequired which can mean card can never be valid diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx index 2d5ac50710..2f1bf6f2f4 100644 --- a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx +++ b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx @@ -13,7 +13,6 @@ import useForm from '../../../../utils/useForm'; import { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types'; import { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout, lookupBlurBasedErrors, mapFieldKey } from './utils'; import { usePrevious } from '../../../../utils/hookUtils'; -import { AddressData } from '../../../../types'; import Specifications from '../../../internal/Address/Specifications'; import { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper'; import { CardFieldsWrapper } from './components/CardFieldsWrapper'; @@ -28,6 +27,7 @@ import { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider'; import useImage from '../../../../core/Context/useImage'; import { getArrayDifferences } from '../../../../utils/arrayUtils'; import FormInstruction from '../../../internal/FormInstruction'; +import { AddressData } from '../../../../types/global-types'; const CardInput = (props: CardInputProps) => { const sfp = useRef(null); diff --git a/packages/lib/src/components/Card/components/CardInput/components/types.ts b/packages/lib/src/components/Card/components/CardInput/components/types.ts index 9c07525cf6..9462a5b270 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/types.ts +++ b/packages/lib/src/components/Card/components/CardInput/components/types.ts @@ -1,4 +1,4 @@ -import { PaymentAmount } from '../../../../../types'; +import { PaymentAmount } from '../../../../../types/global-types'; import { BrandConfiguration, CardBrandsConfiguration } from '../../../types'; import { ComponentChildren } from 'preact'; import { CVCPolicyType, DatePolicyType } from '../../../../internal/SecuredFields/lib/types'; diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts index 70fd6e9ebb..4fd459364f 100644 --- a/packages/lib/src/components/Card/components/CardInput/types.ts +++ b/packages/lib/src/components/Card/components/CardInput/types.ts @@ -1,6 +1,5 @@ import Language from '../../../../language/Language'; -import { BinLookupResponse, BrandConfiguration, CardBrandsConfiguration, CardConfiguration, DualBrandSelectElement } from '../../types'; -import { AddressData, PaymentAmount } from '../../../../types'; +import { BinLookupResponse, BrandConfiguration, CardBrandsConfiguration, CardBackendConfiguration, DualBrandSelectElement } from '../../types'; import { InstallmentOptions } from './components/types'; import { ValidationResult } from '../../../internal/PersonalDetails/types'; import { CVCPolicyType, DatePolicyType } from '../../../internal/SecuredFields/lib/types'; @@ -11,9 +10,10 @@ import { Resources } from '../../../../core/Context/Resources'; import { SRPanel } from '../../../../core/Errors/SRPanel'; import Analytics from '../../../../core/Analytics'; import RiskElement from '../../../../core/RiskModule'; -import { ComponentMethodsRef } from '../../../types'; import { DisclaimerMsgObject } from '../../../internal/DisclaimerMessage/DisclaimerMessage'; import { OnAddressLookupType } from '../../../internal/Address/components/AddressSearch'; +import { ComponentMethodsRef } from '../../../internal/UIElement/types'; +import { AddressData, PaymentAmount } from '../../../../types/global-types'; export interface CardInputValidState { holderName?: boolean; @@ -73,7 +73,7 @@ export interface CardInputProps { brandsConfiguration?: CardBrandsConfiguration; brandsIcons: Array; clientKey: string; - configuration?: CardConfiguration; + configuration?: CardBackendConfiguration; countryCode?: string; cvcPolicy?: CVCPolicyType; data?: CardInputDataState; diff --git a/packages/lib/src/components/Card/types.ts b/packages/lib/src/components/Card/types.ts index 582e8f4ac9..89aeff4824 100644 --- a/packages/lib/src/components/Card/types.ts +++ b/packages/lib/src/components/Card/types.ts @@ -1,5 +1,4 @@ -import { UIElementProps } from '../types'; -import { AddressData, BrowserInfo } from '../../types'; +import { AddressData, BrowserInfo } from '../../types/global-types'; import { CbObjOnBinValue, CbObjOnBrand, @@ -12,12 +11,13 @@ import { StylesObject } from '../internal/SecuredFields/lib/types'; import { CVCPolicyType, DatePolicyType } from '../internal/SecuredFields/lib/types'; -import { ClickToPayConfiguration } from '../internal/ClickToPay/types'; +import { ClickToPayProps } from '../internal/ClickToPay/types'; import { InstallmentOptions } from './components/CardInput/components/types'; import { DisclaimerMsgObject } from '../internal/DisclaimerMessage/DisclaimerMessage'; import { Placeholders } from './components/CardInput/types'; +import { UIElementProps } from '../internal/UIElement/types'; -export interface CardElementProps extends UIElementProps { +export interface CardConfiguration extends UIElementProps { /** * Only set for a stored card, * brand is never set for a generic card component OR a single-branded card @@ -32,7 +32,7 @@ export interface CardElementProps extends UIElementProps { /** * Configuration for Click to Pay */ - clickToPayConfiguration?: ClickToPayConfiguration; + clickToPayConfiguration?: ClickToPayProps; /** * Disable Click to Pay for testing purposes @@ -106,7 +106,7 @@ export interface CardElementProps extends UIElementProps { holderNameRequired?: boolean; /** An object sent in the /paymentMethods response */ - configuration?: CardConfiguration; + configuration?: CardBackendConfiguration; /** Configure placeholder text for holderName, cardNumber, expirationDate, securityCode and password. */ placeholders?: Placeholders; @@ -279,7 +279,7 @@ export type SocialSecurityMode = 'show' | 'hide' | 'auto'; // TODO clarify exact properties that can be in this object // - should only be ones that can be sent in the configuration object in the /paymentMethods response /** If the merchant wishes to set any of these properties in their local config they should do so via a "configuration" object */ -export interface CardConfiguration { +export interface CardBackendConfiguration { // Click to Pay visaSrciDpaId?: string; visaSrcInitiatorId?: string; diff --git a/packages/lib/src/components/CashAppPay/CashAppPay.tsx b/packages/lib/src/components/CashAppPay/CashAppPay.tsx index 9784c7fcbe..86e9c6887a 100644 --- a/packages/lib/src/components/CashAppPay/CashAppPay.tsx +++ b/packages/lib/src/components/CashAppPay/CashAppPay.tsx @@ -1,24 +1,24 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; import { CashAppComponent } from './components/CashAppComponent'; import CashAppService from './services/CashAppService'; import { CashAppSdkLoader } from './services/CashAppSdkLoader'; -import { CashAppPayElementData, CashAppPayElementProps, CashAppPayEventData } from './types'; +import { CashAppPayElementData, CashAppPayConfiguration, CashAppPayEventData } from './types'; import { ICashAppService } from './services/types'; import defaultProps from './defaultProps'; import RedirectButton from '../internal/RedirectButton'; import { payAmountLabel } from '../internal/PayButton'; import { TxVariants } from '../tx-variants'; -export class CashAppPay extends UIElement { +export class CashAppPay extends UIElement { public static type = TxVariants.cashapp; private readonly cashAppService: ICashAppService | undefined; protected static defaultProps = defaultProps; - constructor(props: CashAppPayElementProps) { + constructor(props: CashAppPayConfiguration) { super(props); if (this.props.enableStoreDetails && this.props.storePaymentMethod) { @@ -44,7 +44,7 @@ export class CashAppPay extends UIElement { }); } - public formatProps(props: CashAppPayElementProps) { + public formatProps(props: CashAppPayConfiguration) { return { ...props, enableStoreDetails: props.session?.configuration?.enableStoreDetails || props.enableStoreDetails diff --git a/packages/lib/src/components/CashAppPay/components/CashAppComponent.tsx b/packages/lib/src/components/CashAppPay/components/CashAppComponent.tsx index fff61edfde..fa89a4c0aa 100644 --- a/packages/lib/src/components/CashAppPay/components/CashAppComponent.tsx +++ b/packages/lib/src/components/CashAppPay/components/CashAppComponent.tsx @@ -1,25 +1,20 @@ import { h, RefObject } from 'preact'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError'; -import { UIElementStatus } from '../../types'; import Spinner from '../../internal/Spinner'; import { CashAppPayEvents, ICashAppService } from '../services/types'; import { CashAppPayEventData } from '../types'; import StoreDetails from '../../internal/StoreDetails'; import './CashAppComponent.scss'; +import { UIElementStatus } from '../../internal/UIElement/types'; interface CashAppComponentProps { enableStoreDetails?: boolean; cashAppService: ICashAppService; - onClick(): void; - onChangeStoreDetails(data: any): void; - onAuthorize(payEventData: CashAppPayEventData): void; - onError(error: AdyenCheckoutError): void; - ref(ref: RefObject): void; } diff --git a/packages/lib/src/components/CashAppPay/services/types.ts b/packages/lib/src/components/CashAppPay/services/types.ts index d99d3fca11..f5fe25907e 100644 --- a/packages/lib/src/components/CashAppPay/services/types.ts +++ b/packages/lib/src/components/CashAppPay/services/types.ts @@ -1,4 +1,4 @@ -import { PaymentAmount } from '../../../types'; +import { PaymentAmount } from '../../../types/global-types'; export interface ICashAppWindowObject { pay({ clientId }: { clientId: string }): Promise; diff --git a/packages/lib/src/components/CashAppPay/types.ts b/packages/lib/src/components/CashAppPay/types.ts index 2c35b87df4..0e93e45a9c 100644 --- a/packages/lib/src/components/CashAppPay/types.ts +++ b/packages/lib/src/components/CashAppPay/types.ts @@ -1,6 +1,6 @@ -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; -export interface CashAppPayElementProps extends UIElementProps { +export interface CashAppPayConfiguration extends UIElementProps { /** * Indicates that the payment must be stored (Ex: in case there is no checkbox but merchant wants to store it) */ diff --git a/packages/lib/src/components/ClickToPay/ClickToPay.test.ts b/packages/lib/src/components/ClickToPay/ClickToPay.test.ts index 244a035f35..2c75fe2439 100644 --- a/packages/lib/src/components/ClickToPay/ClickToPay.test.ts +++ b/packages/lib/src/components/ClickToPay/ClickToPay.test.ts @@ -1,6 +1,6 @@ import { mock } from 'jest-mock-extended'; import { ClickToPayElement } from './ClickToPay'; -import { ClickToPayConfiguration } from '../internal/ClickToPay/types'; +import { ClickToPayProps } from '../internal/ClickToPay/types'; import createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service'; import { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types'; import { CtpState } from '../internal/ClickToPay/services/ClickToPayService'; @@ -17,7 +17,7 @@ test('should initialize ClickToPayService when creating the element', () => { visaSrcInitiatorId: '$123456$', visaSrciDpaId: '$654321$' }; - const ctpConfiguration: ClickToPayConfiguration = { + const ctpConfiguration: ClickToPayProps = { shopperEmail: 'shopper@example.com' }; diff --git a/packages/lib/src/components/ClickToPay/ClickToPay.tsx b/packages/lib/src/components/ClickToPay/ClickToPay.tsx index 966ea0da20..5d2e9eaf25 100644 --- a/packages/lib/src/components/ClickToPay/ClickToPay.tsx +++ b/packages/lib/src/components/ClickToPay/ClickToPay.tsx @@ -1,10 +1,10 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; -import { ClickToPayElementProps, ClickToPayPaymentData } from './types'; +import { ClickToPayConfiguration, ClickToPayPaymentData } from './types'; import collectBrowserInfo from '../../utils/browserInfo'; import { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types'; -import { ClickToPayConfiguration } from '../internal/ClickToPay/types'; +import { ClickToPayProps } from '../internal/ClickToPay/types'; import createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service'; import { CtpState } from '../internal/ClickToPay/services/ClickToPayService'; import ClickToPayProvider from '../internal/ClickToPay/context/ClickToPayProvider'; @@ -12,13 +12,13 @@ import ClickToPayComponent from '../internal/ClickToPay'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; import { TxVariants } from '../tx-variants'; -export class ClickToPayElement extends UIElement { +export class ClickToPayElement extends UIElement { public static type = TxVariants.clicktopay; private readonly clickToPayService: IClickToPayService | null; - private readonly ctpConfiguration: ClickToPayConfiguration; + private readonly ctpConfiguration: ClickToPayProps; - constructor(props: ClickToPayElementProps) { + constructor(props: ClickToPayConfiguration) { super(props); this.ctpConfiguration = { @@ -64,7 +64,7 @@ export class ClickToPayElement extends UIElement { }; } - protected formatProps(props: ClickToPayElementProps) { + protected formatProps(props: ClickToPayConfiguration) { return { ...props, disableOtpAutoFocus: props.disableOtpAutoFocus || false, diff --git a/packages/lib/src/components/ClickToPay/types.ts b/packages/lib/src/components/ClickToPay/types.ts index 8eac8580c2..f366f7c0d4 100644 --- a/packages/lib/src/components/ClickToPay/types.ts +++ b/packages/lib/src/components/ClickToPay/types.ts @@ -1,10 +1,10 @@ -import { UIElementProps } from '../types'; -import { BrowserInfo } from '../../types'; -import { ClickToPayConfiguration } from '../internal/ClickToPay/types'; +import { BrowserInfo } from '../../types/global-types'; +import { ClickToPayProps as ClickToPayProps } from '../internal/ClickToPay/types'; import { ClickToPayCheckoutPayload } from '../internal/ClickToPay/services/types'; +import { UIElementProps } from '../internal/UIElement/types'; -export type ClickToPayElementProps = UIElementProps & - ClickToPayConfiguration & { +export type ClickToPayConfiguration = UIElementProps & + ClickToPayProps & { /** * ClickToPay configuration sent by the /paymentMethods response */ diff --git a/packages/lib/src/components/CustomCard/CustomCard.tsx b/packages/lib/src/components/CustomCard/CustomCard.tsx index 8981b25728..c7c32d9c6f 100644 --- a/packages/lib/src/components/CustomCard/CustomCard.tsx +++ b/packages/lib/src/components/CustomCard/CustomCard.tsx @@ -1,42 +1,21 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement'; import CustomCardInput from './CustomCardInput'; import CoreProvider from '../../core/Context/CoreProvider'; import collectBrowserInfo from '../../utils/browserInfo'; import triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp'; import { CbObjOnBinLookup } from '../internal/SecuredFields/lib/types'; -import { BrandObject, CardElementProps } from '../Card/types'; +import { BrandObject } from '../Card/types'; import { getCardImageUrl } from '../internal/SecuredFields/utils'; import { TxVariants } from '../tx-variants'; - -type CustomCardProps = Omit< - CardElementProps, - | 'clickToPayConfiguration' - | '_disableClickToPay' - | 'fundingSource' - | 'showBrandsUnderCardNumber' - | 'positionHolderNameOnTop' - | 'showBrandIcon' - | 'showFormInstruction' - | 'enableStoreDetails' - | 'hideCVC' - | 'hasCVC' - | 'hasHolderName' - | 'holderNameRequired' - | 'billingAddressRequired' - | 'billingAddressRequiredFields' - | 'billingAddressAllowedCountries' - | 'installmentOptions' - | 'showInstallmentAmounts' - | 'configuration' ->; +import { CustomCardConfiguration } from './types'; // TODO questions about // brand - does a merchant ever make a custom stored card? // type // countryCode -export class CustomCard extends UIElement { +export class CustomCard extends UIElement { public static type = TxVariants.customCard; public static analyticsType = 'custom-scheme'; @@ -46,7 +25,7 @@ export class CustomCard extends UIElement { brandsConfiguration: {} }; - formatProps(props: CustomCardProps) { + formatProps(props: CustomCardConfiguration) { return { ...props, type: TxVariants.customCard, diff --git a/packages/lib/src/components/CustomCard/types.ts b/packages/lib/src/components/CustomCard/types.ts new file mode 100644 index 0000000000..4afa259d82 --- /dev/null +++ b/packages/lib/src/components/CustomCard/types.ts @@ -0,0 +1,23 @@ +import { CardConfiguration } from '../Card/types'; + +export type CustomCardConfiguration = Omit< + CardConfiguration, + | 'clickToPayConfiguration' + | '_disableClickToPay' + | 'fundingSource' + | 'showBrandsUnderCardNumber' + | 'positionHolderNameOnTop' + | 'showBrandIcon' + | 'showFormInstruction' + | 'enableStoreDetails' + | 'hideCVC' + | 'hasCVC' + | 'hasHolderName' + | 'holderNameRequired' + | 'billingAddressRequired' + | 'billingAddressRequiredFields' + | 'billingAddressAllowedCountries' + | 'installmentOptions' + | 'showInstallmentAmounts' + | 'configuration' +>; diff --git a/packages/lib/src/components/Doku/Doku.tsx b/packages/lib/src/components/Doku/Doku.tsx index 995d42b32b..291b2bb628 100644 --- a/packages/lib/src/components/Doku/Doku.tsx +++ b/packages/lib/src/components/Doku/Doku.tsx @@ -1,12 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import DokuInput from './components/DokuInput'; import DokuVoucherResult from './components/DokuVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; import { TxVariants } from '../tx-variants'; -import { VoucherActionElement } from '../types'; +import { VoucherConfiguration } from '../internal/Voucher/types'; -export class DokuElement extends UIElement { +export class DokuElement extends UIElement { public static type = TxVariants.doku; public static txVariants = [ TxVariants.doku, diff --git a/packages/lib/src/components/Doku/components/DokuInput/DokuInput.tsx b/packages/lib/src/components/Doku/components/DokuInput/DokuInput.tsx index 4fcde417d5..20c7a47734 100644 --- a/packages/lib/src/components/Doku/components/DokuInput/DokuInput.tsx +++ b/packages/lib/src/components/Doku/components/DokuInput/DokuInput.tsx @@ -2,8 +2,8 @@ import { h } from 'preact'; import { useRef, useState } from 'preact/hooks'; import PersonalDetails from '../../../internal/PersonalDetails/PersonalDetails'; import useCoreContext from '../../../../core/Context/useCoreContext'; -import { ComponentMethodsRef } from '../../../types'; import FormInstruction from '../../../internal/FormInstruction'; +import { ComponentMethodsRef } from '../../../internal/UIElement/types'; export default function DokuInput(props) { const personalDetailsRef = useRef(null); diff --git a/packages/lib/src/components/Doku/types.ts b/packages/lib/src/components/Doku/types.ts index 6b391bdf13..4f9491e291 100644 --- a/packages/lib/src/components/Doku/types.ts +++ b/packages/lib/src/components/Doku/types.ts @@ -1,4 +1,4 @@ -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; export interface DokuVoucherResultProps { reference?: string; @@ -12,9 +12,3 @@ export interface DokuVoucherResultProps { outputDetails?: any; ref?: any; } - -export interface DokuInputSchema { - firstName?: string; - lastName?: string; - shopperEmail?: string; -} diff --git a/packages/lib/src/components/Donation/Donation.tsx b/packages/lib/src/components/Donation/Donation.tsx index ad7234ca91..8dac85db76 100644 --- a/packages/lib/src/components/Donation/Donation.tsx +++ b/packages/lib/src/components/Donation/Donation.tsx @@ -1,21 +1,14 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; import DonationComponent from './components/DonationComponent'; import { TxVariants } from '../tx-variants'; -import { UIElementProps } from '../types'; +import { DonationConfiguration } from './types'; -interface DonationProps extends UIElementProps { - onDonate(data: any, component: DonationElement): void; -} - -/** - * DonationElement - */ -class DonationElement extends UIElement { +class DonationElement extends UIElement { public static type = TxVariants.donation; - constructor(props: DonationProps) { + constructor(props: DonationConfiguration) { super(props); this.donate = this.donate.bind(this); } diff --git a/packages/lib/src/components/Donation/types.ts b/packages/lib/src/components/Donation/types.ts new file mode 100644 index 0000000000..340606389b --- /dev/null +++ b/packages/lib/src/components/Donation/types.ts @@ -0,0 +1,6 @@ +import { UIElementProps } from '../internal/UIElement/types'; +import DonationElement from './Donation'; + +export interface DonationConfiguration extends UIElementProps { + onDonate(data: any, component: DonationElement): void; +} diff --git a/packages/lib/src/components/Dotpay/index.ts b/packages/lib/src/components/Dotpay/index.ts index 4fd7c363cc..a767c84d9e 100644 --- a/packages/lib/src/components/Dotpay/index.ts +++ b/packages/lib/src/components/Dotpay/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class DotpayElement extends IssuerListContainer { diff --git a/packages/lib/src/components/Dragonpay/Dragonpay.tsx b/packages/lib/src/components/Dragonpay/Dragonpay.tsx index 7176b90316..006b0bab1a 100644 --- a/packages/lib/src/components/Dragonpay/Dragonpay.tsx +++ b/packages/lib/src/components/Dragonpay/Dragonpay.tsx @@ -1,12 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import DragonpayInput from './components/DragonpayInput'; import DragonpayVoucherResult from './components/DragonpayVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; -import { DragonpayElementProps } from './types'; +import { DragonpayConfiguraton } from './types'; import { TxVariants } from '../tx-variants'; -export class DragonpayElement extends UIElement { +export class DragonpayElement extends UIElement { public static type = TxVariants.dragonpay; public static txVariants = [ @@ -36,7 +36,7 @@ export class DragonpayElement extends UIElement { }; } - protected formatProps(props: DragonpayElementProps) { + protected formatProps(props: DragonpayConfiguraton) { return { ...props, issuers: props.details?.find(detail => detail.key === 'issuer')?.items ?? props.issuers diff --git a/packages/lib/src/components/Dragonpay/types.ts b/packages/lib/src/components/Dragonpay/types.ts index a64d90a878..2d280c99e0 100644 --- a/packages/lib/src/components/Dragonpay/types.ts +++ b/packages/lib/src/components/Dragonpay/types.ts @@ -1,6 +1,6 @@ -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; import Language from '../../language/Language'; -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; export interface DragonpayInputIssuerItem { id: string; @@ -8,7 +8,7 @@ export interface DragonpayInputIssuerItem { icon?: string; } -export interface DragonpayElementProps extends UIElementProps { +export interface DragonpayConfiguraton extends UIElementProps { type?: string; issuers?: DragonpayInputIssuerItem[]; diff --git a/packages/lib/src/components/Dropin/Dropin.tsx b/packages/lib/src/components/Dropin/Dropin.tsx index fa5745a8ad..15aecaee6b 100644 --- a/packages/lib/src/components/Dropin/Dropin.tsx +++ b/packages/lib/src/components/Dropin/Dropin.tsx @@ -1,21 +1,20 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import defaultProps from './defaultProps'; import DropinComponent from '../../components/Dropin/components/DropinComponent'; import CoreProvider from '../../core/Context/CoreProvider'; -import { PaymentAction } from '../../types'; -import { DropinElementProps, InstantPaymentTypes } from './types'; +import { PaymentAction, PaymentResponseData } from '../../types/global-types'; +import { DropinConfiguration, InstantPaymentTypes, PaymentMethodsConfiguration } from './types'; import { getCommonProps } from './components/utils'; import { createElements, createStoredElements } from './elements'; import createInstantPaymentElements from './elements/createInstantPaymentElements'; import { hasOwnProperty } from '../../utils/hasOwnProperty'; -import { PaymentMethodsConfiguration, PaymentResponse } from '../types'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; import splitPaymentMethods from './elements/splitPaymentMethods'; const SUPPORTED_INSTANT_PAYMENTS = ['paywithgoogle', 'googlepay', 'applepay']; -class DropinElement extends UIElement { +class DropinElement extends UIElement { protected static defaultProps = defaultProps; public dropinRef = null; @@ -26,7 +25,7 @@ class DropinElement extends UIElement { */ public componentFromAction?: UIElement; - constructor(props: DropinElementProps) { + constructor(props: DropinConfiguration) { super(props); this.submit = this.submit.bind(this); this.handleAction = this.handleAction.bind(this); @@ -156,7 +155,7 @@ class DropinElement extends UIElement { * handleOrder is implemented so we don't trigger a callback like in the components * @param response - PaymentResponse */ - protected handleOrder = ({ order }: PaymentResponse): void => { + protected handleOrder = ({ order }: PaymentResponseData): void => { this.updateParent({ order }); }; diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx index a95551527f..e459d12f0c 100644 --- a/packages/lib/src/components/Dropin/components/DropinComponent.tsx +++ b/packages/lib/src/components/Dropin/components/DropinComponent.tsx @@ -4,7 +4,7 @@ import Status from './status'; import getOrderStatus from '../../../core/Services/order-status'; import { DropinComponentProps, DropinComponentState, DropinStatusProps, onOrderCancelData } from '../types'; import './DropinComponent.scss'; -import { UIElementStatus } from '../../types'; +import { UIElementStatus } from '../../internal/UIElement/types'; export class DropinComponent extends Component { public state: DropinComponentState = { diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/InstantPaymentMethods.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/InstantPaymentMethods.tsx index 717a83c1dc..c891b7d3aa 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/InstantPaymentMethods.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/InstantPaymentMethods.tsx @@ -1,7 +1,7 @@ import { Fragment, h } from 'preact'; import ContentSeparator from '../../../internal/ContentSeparator'; import useCoreContext from '../../../../core/Context/useCoreContext'; -import UIElement from '../../../UIElement'; +import UIElement from '../../../internal/UIElement/UIElement'; interface InstantPaymentMethodsProps { paymentMethods: UIElement[]; diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx index 939ae241db..0efb4cab46 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx @@ -5,7 +5,7 @@ import PaymentMethodIcon from './PaymentMethodIcon'; import DisableOneClickConfirmation from './DisableOneClickConfirmation'; import './PaymentMethodItem.scss'; import useCoreContext from '../../../../core/Context/useCoreContext'; -import UIElement from '../../../UIElement'; +import UIElement from '../../../internal/UIElement/UIElement'; import PaymentMethodBrands from './PaymentMethodBrands/PaymentMethodBrands'; import { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../internal/SecuredFields/lib/configuration/constants'; import PaymentMethodName from './PaymentMethodName'; diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx index 6d8392da75..a7d9ba7f53 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx @@ -2,7 +2,7 @@ import { ComponentChildren, h } from 'preact'; import PaymentMethodList from './PaymentMethodList'; import { render, screen, within } from '@testing-library/preact'; import { mock } from 'jest-mock-extended'; -import UIElement from '../../../UIElement'; +import UIElement from '../../../internal/UIElement/UIElement'; import EventEmitter from '../../../EventEmitter'; import userEvent from '@testing-library/user-event'; import Giftcard from '../../../Giftcard'; diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx index ee2b7fb21c..72e180fca3 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx @@ -2,8 +2,8 @@ import { Fragment, h } from 'preact'; import classNames from 'classnames'; import PaymentMethodItem from './PaymentMethodItem'; import getProp from '../../../../utils/getProp'; -import UIElement from '../../../UIElement'; -import { Order, OrderStatus } from '../../../../types'; +import UIElement from '../../../internal/UIElement/UIElement'; +import { Order, OrderStatus } from '../../../../types/global-types'; import OrderPaymentMethods from './OrderPaymentMethods'; import InstantPaymentMethods from './InstantPaymentMethods'; import useCoreContext from '../../../../core/Context/useCoreContext'; diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts b/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts index 456e35c958..352c311146 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'preact/hooks'; -import UIElement from '../../../UIElement'; +import UIElement from '../../../internal/UIElement/UIElement'; type BrandLogoConfiguration = { [key: string]: string; diff --git a/packages/lib/src/components/Dropin/elements/createElements.ts b/packages/lib/src/components/Dropin/elements/createElements.ts index 7d46a7fb21..31ec5447b3 100644 --- a/packages/lib/src/components/Dropin/elements/createElements.ts +++ b/packages/lib/src/components/Dropin/elements/createElements.ts @@ -1,9 +1,9 @@ import { filterUnsupported, filterPresent, filterAvailable } from './filters'; -import { PaymentMethod, StoredPaymentMethod } from '../../../types'; +import { PaymentMethod, StoredPaymentMethod } from '../../../types/global-types'; import { getComponentConfiguration } from './getComponentConfiguration'; -import { PaymentMethodsConfiguration } from '../../types'; import { ICore } from '../../../core/types'; -import UIElement from '../../UIElement'; +import UIElement from '../../internal/UIElement/UIElement'; +import { PaymentMethodsConfiguration } from '../types'; /** * Returns a filtered (available) list of component Elements diff --git a/packages/lib/src/components/Dropin/elements/createInstantPaymentElements.ts b/packages/lib/src/components/Dropin/elements/createInstantPaymentElements.ts index 61706540b4..bf8494fcd7 100644 --- a/packages/lib/src/components/Dropin/elements/createInstantPaymentElements.ts +++ b/packages/lib/src/components/Dropin/elements/createInstantPaymentElements.ts @@ -1,8 +1,8 @@ import createElements from './createElements'; -import { PaymentMethod } from '../../../types'; -import UIElement from '../../UIElement'; -import { PaymentMethodsConfiguration } from '../../types'; +import { PaymentMethod } from '../../../types/global-types'; +import UIElement from '../../internal/UIElement/UIElement'; import { ICore } from '../../../core/types'; +import { PaymentMethodsConfiguration } from '../types'; /** * Returns a filtered (available) list of InstantPaymentMethods Elements diff --git a/packages/lib/src/components/Dropin/elements/createStoredElements.ts b/packages/lib/src/components/Dropin/elements/createStoredElements.ts index 59b047e67c..ea7035915c 100644 --- a/packages/lib/src/components/Dropin/elements/createStoredElements.ts +++ b/packages/lib/src/components/Dropin/elements/createStoredElements.ts @@ -1,8 +1,8 @@ import createElements from './createElements'; -import { StoredPaymentMethod } from '../../../types'; -import { PaymentMethodsConfiguration } from '../../types'; +import { StoredPaymentMethod } from '../../../types/global-types'; import { ICore } from '../../../core/types'; -import UIElement from '../../UIElement'; +import UIElement from '../../internal/UIElement/UIElement'; +import { PaymentMethodsConfiguration } from '../types'; /** * Returns a filtered (available) list of oneClick paymentMethod Elements diff --git a/packages/lib/src/components/Dropin/elements/filters.test.ts b/packages/lib/src/components/Dropin/elements/filters.test.ts index ab9dc37249..b5df1718bb 100644 --- a/packages/lib/src/components/Dropin/elements/filters.test.ts +++ b/packages/lib/src/components/Dropin/elements/filters.test.ts @@ -1,6 +1,6 @@ import { filterPresent, filterAvailable } from './filters'; import { mock } from 'jest-mock-extended'; -import UIElement from '../../UIElement'; +import UIElement from '../../internal/UIElement/UIElement'; describe('Elements filters', () => { describe('filterPresent', () => { diff --git a/packages/lib/src/components/Dropin/elements/filters.ts b/packages/lib/src/components/Dropin/elements/filters.ts index 0577257d4b..6dce64f3f1 100644 --- a/packages/lib/src/components/Dropin/elements/filters.ts +++ b/packages/lib/src/components/Dropin/elements/filters.ts @@ -1,5 +1,5 @@ import promiseTimeout from '../../../utils/promiseTimeout'; -import UIElement from '../../UIElement'; +import UIElement from '../../internal/UIElement/UIElement'; export const UNSUPPORTED_PAYMENT_METHODS = ['androidpay', 'samsungpay', 'clicktopay']; diff --git a/packages/lib/src/components/Dropin/elements/getComponentConfiguration.ts b/packages/lib/src/components/Dropin/elements/getComponentConfiguration.ts index d3f4447b55..cd87e72a07 100644 --- a/packages/lib/src/components/Dropin/elements/getComponentConfiguration.ts +++ b/packages/lib/src/components/Dropin/elements/getComponentConfiguration.ts @@ -1,4 +1,4 @@ -import { PaymentMethodsConfiguration } from '../../types'; +import { PaymentMethodsConfiguration } from '../types'; export const getComponentConfiguration = (type: string, paymentMethodsConfiguration: PaymentMethodsConfiguration = {}, isStoredCard = false) => { const pmType = type === 'scheme' ? 'card' : type; diff --git a/packages/lib/src/components/Dropin/types.ts b/packages/lib/src/components/Dropin/types.ts index 3f48718d19..558612cef6 100644 --- a/packages/lib/src/components/Dropin/types.ts +++ b/packages/lib/src/components/Dropin/types.ts @@ -1,11 +1,244 @@ -import { Order, OrderStatus } from '../../types'; -import UIElement from '../UIElement'; -import { PaymentMethodsConfiguration, UIElementProps, UIElementStatus } from '../types'; +import { Order, OrderStatus, PaymentActionsType } from '../../types/global-types'; +import UIElement from '../internal/UIElement/UIElement'; import { NewableComponent } from '../../core/core.registry'; +import { UIElementProps, UIElementStatus } from '../internal/UIElement/types'; + +/** Components */ +import AfterPay from '../AfterPay'; +import AfterPayB2B from '../AfterPay/AfterPayB2B'; +import AmazonPay from '../AmazonPay'; +import ApplePay from '../ApplePay'; +import Atome from '../Atome'; +import { BillDeskOnline, BillDeskWallet } from '../BillDesk'; +import Card from '../Card'; +import CashAppPay from '../CashAppPay'; +import ClickToPay from '../ClickToPay'; +import Bancontact from '../Card/Bancontact'; +import Donation from '../Donation'; +import Giropay from '../Giropay'; +import GooglePay from '../GooglePay'; +import Econtext from '../Econtext'; +import { FacilyPay3x, FacilyPay4x, FacilyPay6x, FacilyPay10x, FacilyPay12x } from '../FacilyPay'; +import Ideal from '../Ideal'; +import PayPal from '../PayPal'; +import Redirect from '../Redirect'; +import CustomCard from '../CustomCard'; +import Sepa from '../Sepa'; +import WeChat from '../WeChat'; +import PayNow from '../PayNow'; +import BcmcMobile from '../BcmcMobile'; +import { MolPayEBankingMY, MolPayEBankingTH, MolPayEBankingVN } from '../MolPayEBanking'; +import Dragonpay from '../Dragonpay'; +import Doku from '../Doku'; +import Boleto from '../Boleto'; +import Oxxo from '../Oxxo'; +import Multibanco from '../Multibanco'; +import Dotpay from '../Dotpay'; +import Eps from '../EPS'; +import Giftcard from '../Giftcard'; +import Vipps from '../Vipps'; +import { PayuCashcard, PayuNetBanking } from '../PayU'; +import RatePay from '../RatePay'; +import Swish from '../Swish'; +import Ach from '../Ach'; +import MBWay from '../MBWay'; +import Blik from '../Blik'; +import BankTransfer from '../BankTransfer'; +import Affirm from '../Affirm'; +import Pix from '../Pix'; +import BacsDD from '../BacsDD'; +import Address from '../Address'; +import PersonalDetails from '../PersonalDetails'; +import Klarna from '../Klarna'; +import Twint from '../Twint'; +import MealVoucherFR from '../MealVoucherFR'; +import OnlineBankingINElement from '../OnlineBankingIN'; +import OnlinebankingPL from '../OnlinebankingPL'; +import RatePayDirectDebit from '../RatePay/RatePayDirectDebit'; +import UPI from '../UPI'; +import WalletINElement from '../WalletIN'; +import OnlineBankingCZElement from '../OnlineBankingCZ'; +import OnlineBankingSKElement from '../OnlineBankingSK'; +import PayByBank from '../PayByBank'; +import PromptPay from '../PromptPay'; +import Duitnow from '../DuitNow'; +import Trustly from '../Trustly'; +import { TxVariants } from '../tx-variants'; + +/** + * Maps each component with a Component element. + */ +const componentsMap = { + /** internal */ + [TxVariants.address]: Address, + [TxVariants.bankTransfer_IBAN]: BankTransfer, + [TxVariants.donation]: Donation, + [TxVariants.personal_details]: PersonalDetails, + /** internal */ + + /** Card */ + [TxVariants.bcmc]: Bancontact, + [TxVariants.card]: Card, + [TxVariants.scheme]: Card, + [TxVariants.storedCard]: Card, + [TxVariants.customCard]: CustomCard, + /** Card */ + + /** Direct debit */ + [TxVariants.ach]: Ach, + [TxVariants.directdebit_GB]: BacsDD, + [TxVariants.sepadirectdebit]: Sepa, + /** Direct debit */ + + /** Open Invoice */ + [TxVariants.affirm]: Affirm, + [TxVariants.afterpay]: AfterPay, + [TxVariants.afterpay_default]: AfterPay, + [TxVariants.afterpay_b2b]: AfterPayB2B, + [TxVariants.atome]: Atome, + [TxVariants.facilypay_3x]: FacilyPay3x, + [TxVariants.facilypay_4x]: FacilyPay4x, + [TxVariants.facilypay_6x]: FacilyPay6x, + [TxVariants.facilypay_10x]: FacilyPay10x, + [TxVariants.facilypay_12x]: FacilyPay12x, + [TxVariants.ratepay]: RatePay, + [TxVariants.ratepay_directdebit]: RatePayDirectDebit, + /** Open Invoice */ + + /** Wallets */ + [TxVariants.amazonpay]: AmazonPay, + [TxVariants.applepay]: ApplePay, + [TxVariants.cashapp]: CashAppPay, + [TxVariants.clicktopay]: ClickToPay, + [TxVariants.googlepay]: GooglePay, + [TxVariants.paypal]: PayPal, + [TxVariants.paywithgoogle]: GooglePay, + /** Wallets */ + + /** Voucher */ + [TxVariants.boletobancario]: Boleto, + [TxVariants.boletobancario_itau]: Boleto, + [TxVariants.boletobancario_santander]: Boleto, + [TxVariants.doku]: Doku, + [TxVariants.doku_alfamart]: Doku, + [TxVariants.doku_permata_lite_atm]: Doku, + [TxVariants.doku_indomaret]: Doku, + [TxVariants.doku_atm_mandiri_va]: Doku, + [TxVariants.doku_sinarmas_va]: Doku, + [TxVariants.doku_mandiri_va]: Doku, + [TxVariants.doku_cimb_va]: Doku, + [TxVariants.doku_danamon_va]: Doku, + [TxVariants.doku_bri_va]: Doku, + [TxVariants.doku_bni_va]: Doku, + [TxVariants.doku_bca_va]: Doku, + [TxVariants.doku_wallet]: Doku, + [TxVariants.oxxo]: Oxxo, + [TxVariants.primeiropay_boleto]: Boleto, + /** Voucher */ + + /** issuerList */ + [TxVariants.billdesk_online]: BillDeskOnline, + [TxVariants.billdesk_wallet]: BillDeskWallet, + [TxVariants.dotpay]: Dotpay, + [TxVariants.eps]: Eps, + [TxVariants.ideal]: Ideal, + [TxVariants.molpay_ebanking_fpx_MY]: MolPayEBankingMY, + [TxVariants.molpay_ebanking_TH]: MolPayEBankingTH, + [TxVariants.molpay_ebanking_VN]: MolPayEBankingVN, + [TxVariants.onlineBanking_CZ]: OnlineBankingCZElement, + [TxVariants.onlinebanking_IN]: OnlineBankingINElement, // NOTE ]: the txVariant does have a lowercase "b" + [TxVariants.onlineBanking_PL]: OnlinebankingPL, + [TxVariants.onlineBanking_SK]: OnlineBankingSKElement, + [TxVariants.paybybank]: PayByBank, + [TxVariants.payu_IN_cashcard]: PayuCashcard, + [TxVariants.payu_IN_nb]: PayuNetBanking, + [TxVariants.wallet_IN]: WalletINElement, + /** issuerList */ + + /** Dragonpay */ + [TxVariants.dragonpay_ebanking]: Dragonpay, + [TxVariants.dragonpay_otc_banking]: Dragonpay, + [TxVariants.dragonpay_otc_non_banking]: Dragonpay, + [TxVariants.dragonpay_otc_philippines]: Dragonpay, + /** Dragonpay */ + + /** Econtext */ + [TxVariants.econtext_atm]: Econtext, + [TxVariants.econtext_online]: Econtext, + [TxVariants.econtext_seven_eleven]: Econtext, + [TxVariants.econtext_stores]: Econtext, + /** Econtext */ + + /** Redirect */ + [TxVariants.giropay]: Giropay, + [TxVariants.multibanco]: Multibanco, + [TxVariants.redirect]: Redirect, + [TxVariants.twint]: Twint, + [TxVariants.vipps]: Vipps, + [TxVariants.trustly]: Trustly, + /** Redirect */ + + /** Klarna */ + [TxVariants.klarna]: Klarna, + [TxVariants.klarna_account]: Klarna, + [TxVariants.klarna_paynow]: Klarna, + /** Klarna */ + + /** QRLoader */ + [TxVariants.bcmc_mobile]: BcmcMobile, + [TxVariants.bcmc_mobile_QR]: BcmcMobile, + [TxVariants.pix]: Pix, + [TxVariants.swish]: Swish, + [TxVariants.wechatpay]: WeChat, + [TxVariants.wechatpayQR]: WeChat, + [TxVariants.promptpay]: PromptPay, + [TxVariants.paynow]: PayNow, + [TxVariants.duitnow]: Duitnow, + /** QRLoader */ + + /** Await */ + [TxVariants.blik]: Blik, + [TxVariants.mbway]: MBWay, + [TxVariants.upi]: UPI, // also QR + [TxVariants.upi_qr]: UPI, // also QR + [TxVariants.upi_collect]: UPI, // also QR + /** Await */ + + /** Giftcard */ + [TxVariants.giftcard]: Giftcard, + [TxVariants.mealVoucher_FR_natixis]: MealVoucherFR, + [TxVariants.mealVoucher_FR_sodexo]: MealVoucherFR, + [TxVariants.mealVoucher_FR_groupeup]: MealVoucherFR + /** Giftcard */ +}; + +/** + * Available components + */ +type PaymentMethods = typeof componentsMap; + +/** + * Options for a component + */ +type PaymentMethodOptions

= InstanceType['props']; +type PaymentMethodsConfigurationMap = { + [key in keyof PaymentMethods]?: Partial>; +}; +type PaymentActionTypesMap = { + [key in PaymentActionsType]?: Partial; +}; +/** + * Type must be loose, otherwise it will take priority over the rest + */ +type NonMappedPaymentMethodsMap = { + [key: string]: any; +}; + +export type PaymentMethodsConfiguration = PaymentMethodsConfigurationMap & PaymentActionTypesMap & NonMappedPaymentMethodsMap; export type InstantPaymentTypes = 'paywithgoogle' | 'googlepay' | 'applepay'; -export interface DropinElementProps extends UIElementProps { +export interface DropinConfiguration extends UIElementProps { /** * Configure each payment method displayed on the Drop-in */ @@ -46,7 +279,7 @@ export interface DropinElementProps extends UIElementProps { /** * Show/Hide the remove payment method button on stored payment methods - * Requires {@link DropinElementProps.onDisableStoredPaymentMethod} + * Requires {@link DropinConfiguration.onDisableStoredPaymentMethod} * @defaultValue false */ showRemovePaymentMethodButton?: boolean; @@ -64,7 +297,7 @@ export interface onOrderCancelData { order: Order; } -export interface DropinComponentProps extends DropinElementProps { +export interface DropinComponentProps extends DropinConfiguration { onCreateElements: any; onChange: (newState?: object) => void; onOrderCancel?: (data: onOrderCancelData) => void; diff --git a/packages/lib/src/components/DuitNow/DuitNow.ts b/packages/lib/src/components/DuitNow/DuitNow.ts index f0b6bb61c0..e77e4a0d7a 100644 --- a/packages/lib/src/components/DuitNow/DuitNow.ts +++ b/packages/lib/src/components/DuitNow/DuitNow.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/EPS/index.ts b/packages/lib/src/components/EPS/index.ts index 02105a67e0..64c4c8a266 100644 --- a/packages/lib/src/components/EPS/index.ts +++ b/packages/lib/src/components/EPS/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class EPSElement extends IssuerListContainer { diff --git a/packages/lib/src/components/Econtext/Econtext.tsx b/packages/lib/src/components/Econtext/Econtext.tsx index 8f08b8febe..d21746fd3a 100644 --- a/packages/lib/src/components/Econtext/Econtext.tsx +++ b/packages/lib/src/components/Econtext/Econtext.tsx @@ -1,20 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import EcontextInput from './components/EcontextInput'; import EcontextVoucherResult from './components/EcontextVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; -import { UIElementProps } from '../types'; -import { PersonalDetailsSchema } from '../../types'; import { TxVariants } from '../tx-variants'; +import { EcontextConfiguration } from './types'; -interface EcontextElementProps extends UIElementProps { - reference?: string; - personalDetailsRequired?: boolean; - data?: PersonalDetailsSchema; - showFormInstruction?: boolean; -} - -export class EcontextElement extends UIElement { +export class EcontextElement extends UIElement { public static type = TxVariants.econtext; public static txVariants = [ TxVariants.econtext, diff --git a/packages/lib/src/components/Econtext/components/EcontextInput/EcontextInput.tsx b/packages/lib/src/components/Econtext/components/EcontextInput/EcontextInput.tsx index d93ed81a3b..af801efe96 100644 --- a/packages/lib/src/components/Econtext/components/EcontextInput/EcontextInput.tsx +++ b/packages/lib/src/components/Econtext/components/EcontextInput/EcontextInput.tsx @@ -3,10 +3,10 @@ import { useRef, useState } from 'preact/hooks'; import PersonalDetails from '../../../internal/PersonalDetails/PersonalDetails'; import useCoreContext from '../../../../core/Context/useCoreContext'; import { econtextValidationRules } from '../../validate'; -import { PersonalDetailsSchema } from '../../../../types'; +import { PersonalDetailsSchema } from '../../../../types/global-types'; import './EcontextInput.scss'; -import { ComponentMethodsRef } from '../../../types'; import FormInstruction from '../../../internal/FormInstruction'; +import { ComponentMethodsRef } from '../../../internal/UIElement/types'; interface EcontextInputProps { personalDetailsRequired?: boolean; diff --git a/packages/lib/src/components/Econtext/types.ts b/packages/lib/src/components/Econtext/types.ts index 28dbd31172..f022341d8f 100644 --- a/packages/lib/src/components/Econtext/types.ts +++ b/packages/lib/src/components/Econtext/types.ts @@ -1,4 +1,5 @@ -import { PaymentAmount } from '../../types'; +import { PaymentAmount, PersonalDetailsSchema } from '../../types/global-types'; +import { UIElementProps } from '../internal/UIElement/types'; export interface EcontextVoucherResultProps { reference?: string; @@ -17,3 +18,10 @@ export interface EcontextInputSchema { telephoneNumber?: string; shopperEmail?: string; } + +export interface EcontextConfiguration extends UIElementProps { + reference?: string; + personalDetailsRequired?: boolean; + data?: PersonalDetailsSchema; + showFormInstruction?: boolean; +} diff --git a/packages/lib/src/components/Giftcard/Giftcard.tsx b/packages/lib/src/components/Giftcard/Giftcard.tsx index d814fc135a..76e0abef19 100644 --- a/packages/lib/src/components/Giftcard/Giftcard.tsx +++ b/packages/lib/src/components/Giftcard/Giftcard.tsx @@ -1,15 +1,14 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import GiftcardComponent from './components/GiftcardComponent'; import CoreProvider from '../../core/Context/CoreProvider'; import PayButton from '../internal/PayButton'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; -import { PaymentAmount } from '../../types'; -import { PaymentResponse } from '../types'; -import { GiftCardElementData, GiftCardProps } from './types'; +import { PaymentAmount, PaymentResponseData } from '../../types//global-types'; +import { GiftCardElementData, GiftCardConfiguration } from './types'; import { TxVariants } from '../tx-variants'; -export class GiftcardElement extends UIElement { +export class GiftcardElement extends UIElement { public static type = TxVariants.giftcard; protected static defaultProps = { @@ -69,7 +68,7 @@ export class GiftcardElement extends UIElement { } }; - protected handleOrder = ({ order }: PaymentResponse) => { + protected handleOrder = ({ order }: PaymentResponseData) => { this.updateParent({ order }); if (this.props.session && this.props.onOrderCreated) { return this.props.onOrderCreated(order); diff --git a/packages/lib/src/components/Giftcard/components/GiftcardComponent.tsx b/packages/lib/src/components/Giftcard/components/GiftcardComponent.tsx index 7bfc5cb4d9..f01a58bb65 100644 --- a/packages/lib/src/components/Giftcard/components/GiftcardComponent.tsx +++ b/packages/lib/src/components/Giftcard/components/GiftcardComponent.tsx @@ -3,7 +3,7 @@ import SecuredFieldsProvider from '../../internal/SecuredFields/SFP/SecuredField import Alert from '../../internal/Alert'; import GiftcardResult from './GiftcardResult'; import useCoreContext from '../../../core/Context/useCoreContext'; -import { PaymentAmount } from '../../../types'; +import { PaymentAmount } from '../../../types/global-types'; import { GIFT_CARD } from '../../internal/SecuredFields/lib/configuration/constants'; import { GiftCardFields } from './GiftcardFields'; import { GiftcardFieldsProps, Placeholders } from './types'; diff --git a/packages/lib/src/components/Giftcard/types.ts b/packages/lib/src/components/Giftcard/types.ts index 182ce5b2b5..36f5c7cf35 100644 --- a/packages/lib/src/components/Giftcard/types.ts +++ b/packages/lib/src/components/Giftcard/types.ts @@ -1,6 +1,6 @@ -import { UIElementProps } from '../types'; import { FunctionComponent } from 'preact'; import { GiftcardFieldsProps } from './components/types'; +import { UIElementProps } from '../internal/UIElement/types'; export interface GiftCardElementData { paymentMethod: { @@ -12,7 +12,7 @@ export interface GiftCardElementData { } // TODO: Fix these types -export interface GiftCardProps extends UIElementProps { +export interface GiftCardConfiguration extends UIElementProps { pinRequired?: boolean; expiryDateRequired?: boolean; brandsConfiguration?: any; diff --git a/packages/lib/src/components/GooglePay/GooglePay.tsx b/packages/lib/src/components/GooglePay/GooglePay.tsx index 1f4d2e1f58..10bb45995a 100644 --- a/packages/lib/src/components/GooglePay/GooglePay.tsx +++ b/packages/lib/src/components/GooglePay/GooglePay.tsx @@ -1,15 +1,15 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import GooglePayService from './GooglePayService'; import GooglePayButton from './components/GooglePayButton'; import defaultProps from './defaultProps'; -import { GooglePayProps } from './types'; +import { GooglePayConfiguration } from './types'; import { mapBrands, getGooglePayLocale } from './utils'; import collectBrowserInfo from '../../utils/browserInfo'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; import { TxVariants } from '../tx-variants'; -class GooglePay extends UIElement { +class GooglePay extends UIElement { public static type = TxVariants.googlepay; public static txVariants = [TxVariants.googlepay, TxVariants.paywithgoogle]; public static defaultProps = defaultProps; @@ -20,7 +20,7 @@ class GooglePay extends UIElement { * Formats the component data input * For legacy support - maps configuration.merchantIdentifier to configuration.merchantId */ - formatProps(props): GooglePayProps { + formatProps(props): GooglePayConfiguration { const allowedCardNetworks = props.brands?.length ? mapBrands(props.brands) : props.allowedCardNetworks; const buttonSizeMode = props.buttonSizeMode ?? (props.isDropin ? 'fill' : 'static'); const buttonLocale = getGooglePayLocale(props.buttonLocale ?? props.i18n?.locale); diff --git a/packages/lib/src/components/GooglePay/requests.ts b/packages/lib/src/components/GooglePay/requests.ts index 24060b0127..6fcdd851e0 100644 --- a/packages/lib/src/components/GooglePay/requests.ts +++ b/packages/lib/src/components/GooglePay/requests.ts @@ -1,6 +1,6 @@ import { getDecimalAmount } from '../../utils/amount-util'; import config from './config'; -import { GooglePaymentDataRequest, GooglePayProps } from './types'; +import { GooglePaymentDataRequest, GooglePayConfiguration } from './types'; /** * Configure your site's support for payment methods supported by the Google Pay API. @@ -44,7 +44,7 @@ export function getTransactionInfo({ countryCode = 'US', totalPriceStatus = 'FINAL', ...props -}: Omit): google.payments.api.TransactionInfo { +}: Omit): google.payments.api.TransactionInfo { const formattedPrice = String(getDecimalAmount(amount.value, amount.currency)); return { @@ -56,7 +56,7 @@ export function getTransactionInfo({ }; } -export function initiatePaymentRequest({ configuration, ...props }: Omit): GooglePaymentDataRequest { +export function initiatePaymentRequest({ configuration, ...props }: Omit): GooglePaymentDataRequest { return { apiVersion: config.API_VERSION, apiVersionMinor: config.API_VERSION_MINOR, diff --git a/packages/lib/src/components/GooglePay/types.ts b/packages/lib/src/components/GooglePay/types.ts index ec0ad1b216..95c44b6ca8 100644 --- a/packages/lib/src/components/GooglePay/types.ts +++ b/packages/lib/src/components/GooglePay/types.ts @@ -1,4 +1,4 @@ -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; export interface GooglePayPropsConfiguration { /** @@ -32,7 +32,7 @@ export interface GooglePayPropsConfiguration { authJwt?: string; } -export interface GooglePayProps extends UIElementProps { +export interface GooglePayConfiguration extends UIElementProps { type?: 'googlepay' | 'paywithgoogle'; environment?: google.payments.api.Environment | string; diff --git a/packages/lib/src/components/Ideal/index.ts b/packages/lib/src/components/Ideal/index.ts index 2fcf438e93..03fcc8727a 100644 --- a/packages/lib/src/components/Ideal/index.ts +++ b/packages/lib/src/components/Ideal/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class IdealElement extends IssuerListContainer { diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx index ca3158e335..98dfadd346 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.tsx +++ b/packages/lib/src/components/Klarna/KlarnaPayments.tsx @@ -1,13 +1,13 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; -import { KlarnaPaymentsProps } from './types'; +import { KlarnConfiguration } from './types'; import PayButton from '../internal/PayButton'; import { KlarnaContainer } from './components/KlarnaContainer/KlarnaContainer'; -import { PaymentAction } from '../../types'; +import { PaymentAction } from '../../types/global-types'; import { TxVariants } from '../tx-variants'; -class KlarnaPayments extends UIElement { +class KlarnaPayments extends UIElement { public static type = TxVariants.klarna; public static txVariants = [TxVariants.klarna, TxVariants.klarna_account, TxVariants.klarna_paynow]; @@ -15,7 +15,7 @@ class KlarnaPayments extends UIElement { useKlarnaWidget: false }; - constructor(props: KlarnaPaymentsProps) { + constructor(props: KlarnConfiguration) { super(props); this.onComplete = this.onComplete.bind(this); diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts index 6c2b0370b4..dbbcdeeaad 100644 --- a/packages/lib/src/components/Klarna/types.ts +++ b/packages/lib/src/components/Klarna/types.ts @@ -1,6 +1,6 @@ -import { UIElementProps } from '../types'; - // eslint-disable-next-line @typescript-eslint/no-unused-vars +import { UIElementProps } from '../internal/UIElement/types'; + declare global { interface Window { Klarna: any; @@ -40,7 +40,7 @@ export interface KlarnaWidgetProps extends KlarnaPaymentsShared { onError: (error) => void; } -export type KlarnaPaymentsProps = UIElementProps & +export type KlarnConfiguration = UIElementProps & KlarnaPaymentsShared & { useKlarnaWidget?: boolean; }; diff --git a/packages/lib/src/components/MBWay/MBWay.tsx b/packages/lib/src/components/MBWay/MBWay.tsx index b3ffa3b6d5..c508302952 100644 --- a/packages/lib/src/components/MBWay/MBWay.tsx +++ b/packages/lib/src/components/MBWay/MBWay.tsx @@ -1,14 +1,14 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import MBWayInput from './components/MBWayInput'; import CoreProvider from '../../core/Context/CoreProvider'; import config from './components/MBWayAwait/config'; import Await from '../../components/internal/Await'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; import { TxVariants } from '../tx-variants'; -import { AwaitActionElement } from '../types'; +import { AwaitConfiguration } from '../internal/Await/types'; -export class MBWayElement extends UIElement { +export class MBWayElement extends UIElement { public static type = TxVariants.mbway; formatProps(props) { diff --git a/packages/lib/src/components/MBWay/components/MBWayInput/types.ts b/packages/lib/src/components/MBWay/components/MBWayInput/types.ts index e4a9b00d4a..704ea04f85 100644 --- a/packages/lib/src/components/MBWay/components/MBWayInput/types.ts +++ b/packages/lib/src/components/MBWay/components/MBWayInput/types.ts @@ -1,4 +1,4 @@ -import { UIElementProps } from '../../../types'; +import { UIElementProps } from '../../../internal/UIElement/types'; export interface MBWayInputData { telephoneNumber?: string; diff --git a/packages/lib/src/components/MealVoucherFR/MealVoucherFR.tsx b/packages/lib/src/components/MealVoucherFR/MealVoucherFR.tsx index 467f6f1b85..41da59f674 100644 --- a/packages/lib/src/components/MealVoucherFR/MealVoucherFR.tsx +++ b/packages/lib/src/components/MealVoucherFR/MealVoucherFR.tsx @@ -1,7 +1,7 @@ import GiftcardElement from '../Giftcard/Giftcard'; import { MealVoucherFields } from './components/MealVoucherFields'; import { TxVariants } from '../tx-variants'; -import { GiftCardProps } from '../Giftcard/types'; +import { GiftCardConfiguration } from '../Giftcard/types'; export class MealVoucherFRElement extends GiftcardElement { public static type = TxVariants.mealVoucher_FR; @@ -12,7 +12,7 @@ export class MealVoucherFRElement extends GiftcardElement { TxVariants.mealVoucher_FR_groupeup ]; - constructor(props: GiftCardProps) { + constructor(props: GiftCardConfiguration) { super({ ...props, pinRequired: true, diff --git a/packages/lib/src/components/MolPayEBanking/MolPayEBankingMY.ts b/packages/lib/src/components/MolPayEBanking/MolPayEBankingMY.ts index 6c7db63ce2..f71636b0d1 100644 --- a/packages/lib/src/components/MolPayEBanking/MolPayEBankingMY.ts +++ b/packages/lib/src/components/MolPayEBanking/MolPayEBankingMY.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class MolPayEBankingMYElement extends IssuerListContainer { diff --git a/packages/lib/src/components/MolPayEBanking/MolPayEBankingTH.ts b/packages/lib/src/components/MolPayEBanking/MolPayEBankingTH.ts index 77ff71ac4b..23f1cd3391 100644 --- a/packages/lib/src/components/MolPayEBanking/MolPayEBankingTH.ts +++ b/packages/lib/src/components/MolPayEBanking/MolPayEBankingTH.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class MolPayEBankingTHElement extends IssuerListContainer { diff --git a/packages/lib/src/components/MolPayEBanking/MolPayEBankingVN.ts b/packages/lib/src/components/MolPayEBanking/MolPayEBankingVN.ts index 7b1d5e9faa..b3f34446df 100644 --- a/packages/lib/src/components/MolPayEBanking/MolPayEBankingVN.ts +++ b/packages/lib/src/components/MolPayEBanking/MolPayEBankingVN.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class MolPayEbankingVNElement extends IssuerListContainer { diff --git a/packages/lib/src/components/Multibanco/Multibanco.tsx b/packages/lib/src/components/Multibanco/Multibanco.tsx index 9ea0f0455d..35982e5da5 100644 --- a/packages/lib/src/components/Multibanco/Multibanco.tsx +++ b/packages/lib/src/components/Multibanco/Multibanco.tsx @@ -1,12 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import MultibancoVoucherResult from './components/MultibancoVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; import RedirectButton from '../internal/RedirectButton'; import { TxVariants } from '../tx-variants'; -import { VoucherActionElement } from '../types'; +import { VoucherConfiguration } from '../internal/Voucher/types'; -export class MultibancoElement extends UIElement { +export class MultibancoElement extends UIElement { public static type = TxVariants.multibanco; public static defaultProps = { showPayButton: true }; diff --git a/packages/lib/src/components/Multibanco/types.ts b/packages/lib/src/components/Multibanco/types.ts index 8a878a4977..3c94e266d1 100644 --- a/packages/lib/src/components/Multibanco/types.ts +++ b/packages/lib/src/components/Multibanco/types.ts @@ -1,4 +1,4 @@ -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; export interface MultibancoVoucherResultProps { entity?: string; diff --git a/packages/lib/src/components/OnlineBankingCZ/index.ts b/packages/lib/src/components/OnlineBankingCZ/index.ts index 540503165b..fcd87818f5 100644 --- a/packages/lib/src/components/OnlineBankingCZ/index.ts +++ b/packages/lib/src/components/OnlineBankingCZ/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; const TERMS_AND_CONDITIONS = 'https://static.payu.com/sites/terms/files/payu_privacy_policy_cs.pdf'; diff --git a/packages/lib/src/components/OnlineBankingIN/index.ts b/packages/lib/src/components/OnlineBankingIN/index.ts index 2c628da6c5..70c2d162cc 100644 --- a/packages/lib/src/components/OnlineBankingIN/index.ts +++ b/packages/lib/src/components/OnlineBankingIN/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import collectBrowserInfo from '../../utils/browserInfo'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/OnlineBankingSK/index.ts b/packages/lib/src/components/OnlineBankingSK/index.ts index b1a63dfd58..d2213d4221 100644 --- a/packages/lib/src/components/OnlineBankingSK/index.ts +++ b/packages/lib/src/components/OnlineBankingSK/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; const TERMS_AND_CONDITIONS = 'https://static.payu.com/sites/terms/files/payu_privacy_policy_sk.pdf'; diff --git a/packages/lib/src/components/OnlinebankingPL/OnlineBankingPL.tsx b/packages/lib/src/components/OnlinebankingPL/OnlineBankingPL.tsx index 627408d1ee..e9e01c1305 100644 --- a/packages/lib/src/components/OnlinebankingPL/OnlineBankingPL.tsx +++ b/packages/lib/src/components/OnlinebankingPL/OnlineBankingPL.tsx @@ -1,5 +1,6 @@ -import IssuerListContainer, { IssuerListContainerProps } from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; +import { IssuerListConfiguration } from '../helpers/IssuerListContainer/types'; class OnlineBankingPL extends IssuerListContainer { public static type = TxVariants.onlineBanking_PL; @@ -14,7 +15,7 @@ class OnlineBankingPL extends IssuerListContainer { urls: [OnlineBankingPL.disclaimerUrlsMap.regulation, OnlineBankingPL.disclaimerUrlsMap.obligation] }; - constructor(props: IssuerListContainerProps) { + constructor(props: IssuerListConfiguration) { super({ ...props, termsAndConditions: OnlineBankingPL.termsAndConditions }); } } diff --git a/packages/lib/src/components/Oxxo/Oxxo.tsx b/packages/lib/src/components/Oxxo/Oxxo.tsx index caea424005..bb2f5ca9b0 100644 --- a/packages/lib/src/components/Oxxo/Oxxo.tsx +++ b/packages/lib/src/components/Oxxo/Oxxo.tsx @@ -1,12 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import OxxoVoucherResult from './components/OxxoVoucherResult'; import CoreProvider from '../../core/Context/CoreProvider'; import { OxxoElementData } from './types'; import { TxVariants } from '../tx-variants'; -import { VoucherActionElement } from '../types'; +import { VoucherConfiguration } from '../internal/Voucher/types'; -export class OxxoElement extends UIElement { +export class OxxoElement extends UIElement { public static type = TxVariants.oxxo; protected static defaultProps = { diff --git a/packages/lib/src/components/Oxxo/types.ts b/packages/lib/src/components/Oxxo/types.ts index 8531a0220b..a5226b4d9f 100644 --- a/packages/lib/src/components/Oxxo/types.ts +++ b/packages/lib/src/components/Oxxo/types.ts @@ -1,4 +1,4 @@ -import { PaymentAmount } from '../../types'; +import { PaymentAmount } from '../../types/global-types'; export interface OxxoVoucherResultProps { alternativeReference?: string; diff --git a/packages/lib/src/components/PayByBank/PayByBank.tsx b/packages/lib/src/components/PayByBank/PayByBank.tsx index 30a56e3915..01a9fbae2c 100644 --- a/packages/lib/src/components/PayByBank/PayByBank.tsx +++ b/packages/lib/src/components/PayByBank/PayByBank.tsx @@ -1,10 +1,11 @@ -import IssuerListContainer, { IssuerListContainerProps } from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; +import { IssuerListConfiguration } from '../helpers/IssuerListContainer/types'; class PayByBank extends IssuerListContainer { public static type = TxVariants.paybybank; - constructor(props: IssuerListContainerProps) { + constructor(props: IssuerListConfiguration) { super({ ...props, showPaymentMethodItemImages: true }); } } diff --git a/packages/lib/src/components/PayNow/PayNow.ts b/packages/lib/src/components/PayNow/PayNow.ts index d302783cd5..e52ccfff21 100644 --- a/packages/lib/src/components/PayNow/PayNow.ts +++ b/packages/lib/src/components/PayNow/PayNow.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/PayPal/Paypal.tsx b/packages/lib/src/components/PayPal/Paypal.tsx index f1e48fafc5..55517faf0f 100644 --- a/packages/lib/src/components/PayPal/Paypal.tsx +++ b/packages/lib/src/components/PayPal/Paypal.tsx @@ -1,9 +1,9 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import PaypalComponent from './components/PaypalComponent'; import defaultProps from './defaultProps'; -import { PaymentAction } from '../../types'; -import { Intent, PayPalElementProps } from './types'; +import { PaymentAction } from '../../types/global-types'; +import { Intent, PayPalConfiguration } from './types'; import './Paypal.scss'; import CoreProvider from '../../core/Context/CoreProvider'; import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError'; @@ -11,7 +11,7 @@ import { ERRORS } from './constants'; import { createShopperDetails } from './utils/create-shopper-details'; import { TxVariants } from '../tx-variants'; -class PaypalElement extends UIElement { +class PaypalElement extends UIElement { public static type = TxVariants.paypal; public static subtype = 'sdk'; private paymentData = null; @@ -20,12 +20,12 @@ class PaypalElement extends UIElement { protected static defaultProps = defaultProps; - constructor(props: PayPalElementProps) { + constructor(props: PayPalConfiguration) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } - formatProps(props: PayPalElementProps): PayPalElementProps { + formatProps(props: PayPalConfiguration): PayPalConfiguration { const { merchantId, intent: intentFromConfig } = props.configuration; const isZeroAuth = props.amount?.value === 0; diff --git a/packages/lib/src/components/PayPal/defaultProps.ts b/packages/lib/src/components/PayPal/defaultProps.ts index bf27273c72..db140fa7cb 100644 --- a/packages/lib/src/components/PayPal/defaultProps.ts +++ b/packages/lib/src/components/PayPal/defaultProps.ts @@ -1,6 +1,6 @@ -import { PayPalElementProps } from './types'; +import { PayPalConfiguration } from './types'; -const defaultProps: Partial = { +const defaultProps: Partial = { environment: 'TEST', status: 'loading', diff --git a/packages/lib/src/components/PayPal/types.ts b/packages/lib/src/components/PayPal/types.ts index 65f2e96a5f..232c5c2df7 100644 --- a/packages/lib/src/components/PayPal/types.ts +++ b/packages/lib/src/components/PayPal/types.ts @@ -1,7 +1,7 @@ -import { PaymentAmount, PaymentMethod, ShopperDetails } from '../../types'; -import UIElement from '../UIElement'; -import { UIElementProps } from '../types'; +import { PaymentAmount, PaymentMethod, ShopperDetails } from '../../types/global-types'; +import UIElement from '../internal/UIElement/UIElement'; import { SUPPORTED_LOCALES } from './config'; +import { UIElementProps } from '../internal/UIElement/types'; // eslint-disable-next-line @typescript-eslint/no-unused-vars declare global { @@ -168,7 +168,7 @@ export interface PayPalConfig { intent?: Intent; } -export interface PayPalElementProps extends PayPalCommonProps, UIElementProps { +export interface PayPalConfiguration extends PayPalCommonProps, UIElementProps { onSubmit?: (state: any, element: UIElement) => void; onComplete?: (state, element?: UIElement) => void; onAdditionalDetails?: (state: any, element: UIElement) => void; @@ -208,4 +208,4 @@ export interface PaypalSettings { components: string; } -export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]; +export type PayPalSupportedLocale = (typeof SUPPORTED_LOCALES)[number]; diff --git a/packages/lib/src/components/PayPal/utils.ts b/packages/lib/src/components/PayPal/utils.ts index 9299283611..bd4c3834cc 100644 --- a/packages/lib/src/components/PayPal/utils.ts +++ b/packages/lib/src/components/PayPal/utils.ts @@ -1,5 +1,5 @@ import { ADYEN_CLIENTID_TEST, ADYEN_CLIENTID_LIVE, INTEGRATION_DATE, PAYPAL_JS_URL, SUPPORTED_LOCALES, SUPPORTED_COLORS_FOR_CREDIT } from './config'; -import { PaypalSettings, SupportedLocale, FundingSource, PayPalComponentProps } from './types'; +import { PaypalSettings, PayPalSupportedLocale, FundingSource, PayPalComponentProps } from './types'; /** * Processes and returns a new style object. @@ -19,10 +19,10 @@ const getStyle = (fundingSource: FundingSource, style = {}) => { /** * Returns either a locale supported by PayPal or null, in order to let the PayPal SDK auto-detect the shopper locale. */ -const getSupportedLocale = (locale: string): SupportedLocale => { +const getSupportedLocale = (locale: string): PayPalSupportedLocale => { const formattedLocale = locale ? locale.replace('-', '_') : null; - const supportedLocale = SUPPORTED_LOCALES.includes(formattedLocale as SupportedLocale) ? formattedLocale : null; - return supportedLocale as SupportedLocale; + const supportedLocale = SUPPORTED_LOCALES.includes(formattedLocale as PayPalSupportedLocale) ? formattedLocale : null; + return supportedLocale as PayPalSupportedLocale; }; /** @@ -39,7 +39,7 @@ const getPaypalSettings = ({ vault, enableMessages }: Partial): PaypalSettings => { - const shopperLocale: SupportedLocale = getSupportedLocale(locale); + const shopperLocale: PayPalSupportedLocale = getSupportedLocale(locale); const currency: string = amount ? amount.currency : null; const isTestEnvironment: boolean = environment.toLowerCase() === 'test'; const clientId: string = isTestEnvironment ? ADYEN_CLIENTID_TEST : ADYEN_CLIENTID_LIVE; diff --git a/packages/lib/src/components/PayPal/utils/create-shopper-details.ts b/packages/lib/src/components/PayPal/utils/create-shopper-details.ts index d5ecab1b01..edbd788669 100644 --- a/packages/lib/src/components/PayPal/utils/create-shopper-details.ts +++ b/packages/lib/src/components/PayPal/utils/create-shopper-details.ts @@ -1,4 +1,4 @@ -import { AddressData, ShopperDetails } from '../../../types'; +import { AddressData, ShopperDetails } from '../../../types/global-types'; /** * Parses the Order data from PayPal, and create the shopper details object according to how Adyen expects diff --git a/packages/lib/src/components/PayU/PayuCashcard.tsx b/packages/lib/src/components/PayU/PayuCashcard.tsx index 2fb42ff8a7..15fd6dce4d 100644 --- a/packages/lib/src/components/PayU/PayuCashcard.tsx +++ b/packages/lib/src/components/PayU/PayuCashcard.tsx @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class PayuNetCashcardElement extends IssuerListContainer { diff --git a/packages/lib/src/components/PayU/PayuNetBanking.tsx b/packages/lib/src/components/PayU/PayuNetBanking.tsx index 465e8188af..dea93b4c5a 100644 --- a/packages/lib/src/components/PayU/PayuNetBanking.tsx +++ b/packages/lib/src/components/PayU/PayuNetBanking.tsx @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import { TxVariants } from '../tx-variants'; class PayuNetBankingElement extends IssuerListContainer { diff --git a/packages/lib/src/components/PersonalDetails/PersonalDetails.tsx b/packages/lib/src/components/PersonalDetails/PersonalDetails.tsx index 7d44d9cf5f..312ba7a3f5 100644 --- a/packages/lib/src/components/PersonalDetails/PersonalDetails.tsx +++ b/packages/lib/src/components/PersonalDetails/PersonalDetails.tsx @@ -1,16 +1,16 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import PersonalDetails from '../internal/PersonalDetails'; import CoreProvider from '../../core/Context/CoreProvider'; import { TxVariants } from '../tx-variants'; import FormInstruction from '../internal/FormInstruction'; -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; -interface PersonalDetailsProps extends UIElementProps { +interface PersonalDetailsConfiguration extends UIElementProps { showFormInstruction?: boolean; } -export class PersonalDetailsElement extends UIElement { +export class PersonalDetailsElement extends UIElement { public static type = TxVariants.personal_details; protected static defaultProps = { diff --git a/packages/lib/src/components/Pix/Pix.tsx b/packages/lib/src/components/Pix/Pix.tsx index 1ac83c8de8..173cc18d24 100644 --- a/packages/lib/src/components/Pix/Pix.tsx +++ b/packages/lib/src/components/Pix/Pix.tsx @@ -1,12 +1,12 @@ import { h } from 'preact'; -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import CoreProvider from '../../core/Context/CoreProvider'; import PixInput from './PixInput'; import { cleanCPFCNPJ } from '../internal/SocialSecurityNumberBrazil/utils'; -import { PixElementData, PixProps } from './types'; +import { PixElementData, PixConfiguration } from './types'; import { TxVariants } from '../tx-variants'; -class PixElement extends QRLoaderContainer { +class PixElement extends QRLoaderContainer { public static type = TxVariants.pix; public static defaultProps = { @@ -21,7 +21,7 @@ class PixElement extends QRLoaderContainer { return !!this.state.isValid; } - formatProps(props): PixProps { + formatProps(props): PixConfiguration { return { copyBtn: true, introduction: 'pix.instructions', diff --git a/packages/lib/src/components/Pix/PixInput/types.ts b/packages/lib/src/components/Pix/PixInput/types.ts index c9dd599f44..081dec0fd1 100644 --- a/packages/lib/src/components/Pix/PixInput/types.ts +++ b/packages/lib/src/components/Pix/PixInput/types.ts @@ -1,6 +1,6 @@ import { h, RefObject } from 'preact'; -import { PayButtonFunctionProps } from '../../types'; import PixInput from './PixInput'; +import { PayButtonFunctionProps } from '../../internal/UIElement/types'; export interface PixInputDataState { firstName?: string; diff --git a/packages/lib/src/components/Pix/types.ts b/packages/lib/src/components/Pix/types.ts index b2d546a3d3..ee6b20a554 100644 --- a/packages/lib/src/components/Pix/types.ts +++ b/packages/lib/src/components/Pix/types.ts @@ -1,6 +1,6 @@ -import { QRLoaderContainerProps } from '../helpers/QRLoaderContainer'; +import { QRLoaderConfiguration } from '../helpers/QRLoaderContainer/types'; -export interface PixProps extends QRLoaderContainerProps { +export interface PixConfiguration extends QRLoaderConfiguration { personalDetailsRequired?: boolean; } diff --git a/packages/lib/src/components/PromptPay/PromptPay.ts b/packages/lib/src/components/PromptPay/PromptPay.ts index 25219b359a..131794cd9d 100644 --- a/packages/lib/src/components/PromptPay/PromptPay.ts +++ b/packages/lib/src/components/PromptPay/PromptPay.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/Redirect/Redirect.tsx b/packages/lib/src/components/Redirect/Redirect.tsx index d0f84b4cb9..3ec54315c9 100644 --- a/packages/lib/src/components/Redirect/Redirect.tsx +++ b/packages/lib/src/components/Redirect/Redirect.tsx @@ -1,19 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import CoreProvider from '../../core/Context/CoreProvider'; import RedirectShopper from './components/RedirectShopper'; import RedirectButton from '../internal/RedirectButton'; import { TxVariants } from '../tx-variants'; -import { UIElementProps } from '../types'; +import { RedirectConfiguration } from './types'; -export interface RedirectProps extends UIElementProps { - type?: string; - url?: string; - method?: 'GET' | 'POST'; - beforeRedirect?: (resolve, reject, url) => Promise; -} - -class RedirectElement extends UIElement { +class RedirectElement extends UIElement { public static type = TxVariants.redirect; public static defaultProps = { diff --git a/packages/lib/src/components/Redirect/types.ts b/packages/lib/src/components/Redirect/types.ts new file mode 100644 index 0000000000..fc71b40b13 --- /dev/null +++ b/packages/lib/src/components/Redirect/types.ts @@ -0,0 +1,8 @@ +import { UIElementProps } from '../internal/UIElement/types'; + +export interface RedirectConfiguration extends UIElementProps { + type?: string; + url?: string; + method?: 'GET' | 'POST'; + beforeRedirect?: (resolve, reject, url) => Promise; +} diff --git a/packages/lib/src/components/Sepa/Sepa.tsx b/packages/lib/src/components/Sepa/Sepa.tsx index 3bb061ad5a..37baf567a9 100644 --- a/packages/lib/src/components/Sepa/Sepa.tsx +++ b/packages/lib/src/components/Sepa/Sepa.tsx @@ -1,19 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import IbanInput from '../internal/IbanInput'; import CoreProvider from '../../core/Context/CoreProvider'; -import { SepaElementData } from './types'; +import { SepaElementData, SepaConfiguration } from './types'; import { TxVariants } from '../tx-variants'; import FormInstruction from '../internal/FormInstruction'; -import { UIElementProps } from '../types'; -interface SepaProps extends UIElementProps { - showFormInstruction?: boolean; -} -/** - * SepaElement - */ -class SepaElement extends UIElement { +class SepaElement extends UIElement { public static type = TxVariants.sepadirectdebit; protected static defaultProps = { diff --git a/packages/lib/src/components/Sepa/types.ts b/packages/lib/src/components/Sepa/types.ts index bc8bb4963d..5a3d8a112a 100644 --- a/packages/lib/src/components/Sepa/types.ts +++ b/packages/lib/src/components/Sepa/types.ts @@ -1,3 +1,5 @@ +import { UIElementProps } from '../internal/UIElement/types'; + export interface SepaElementData { paymentMethod: { type: string; @@ -5,3 +7,7 @@ export interface SepaElementData { ownerName: string; }; } + +export interface SepaConfiguration extends UIElementProps { + showFormInstruction?: boolean; +} diff --git a/packages/lib/src/components/Swish/Swish.ts b/packages/lib/src/components/Swish/Swish.ts index 543ea72392..162186f72d 100644 --- a/packages/lib/src/components/Swish/Swish.ts +++ b/packages/lib/src/components/Swish/Swish.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { TxVariants } from '../tx-variants'; class SwishElement extends QRLoaderContainer { diff --git a/packages/lib/src/components/ThreeDS2/ThreeDS2Challenge.tsx b/packages/lib/src/components/ThreeDS2/ThreeDS2Challenge.tsx index 5b43fde06d..a386f96a77 100644 --- a/packages/lib/src/components/ThreeDS2/ThreeDS2Challenge.tsx +++ b/packages/lib/src/components/ThreeDS2/ThreeDS2Challenge.tsx @@ -1,32 +1,13 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import PrepareChallenge from './components/Challenge'; -import { ErrorCodeObject } from './components/utils'; import { DEFAULT_CHALLENGE_WINDOW_SIZE } from './config'; import { existy } from '../internal/SecuredFields/lib/utilities/commonUtils'; import { hasOwnProperty } from '../../utils/hasOwnProperty'; -import Language from '../../language'; -import { ActionHandledReturnObject } from '../types'; import { TxVariants } from '../tx-variants'; -import { ICore } from '../../core/types'; +import { ThreeDS2ChallengeConfiguration } from './types'; -export interface ThreeDS2ChallengeProps { - core: ICore; - token?: string; - dataKey?: string; - notificationURL?: string; - onError?: (error: string | ErrorCodeObject) => void; - paymentData?: string; - size?: string; - challengeWindowSize?: '01' | '02' | '03' | '04' | '05'; - type?: string; - loadingContext?: string; - isMDFlow?: boolean; - i18n?: Language; - onActionHandled: (rtnObj: ActionHandledReturnObject) => void; -} - -class ThreeDS2Challenge extends UIElement { +class ThreeDS2Challenge extends UIElement { public static type = TxVariants.threeDS2Challenge; public static defaultProps = { diff --git a/packages/lib/src/components/ThreeDS2/ThreeDS2DeviceFingerprint.tsx b/packages/lib/src/components/ThreeDS2/ThreeDS2DeviceFingerprint.tsx index 3fe4d84b70..5949051e9b 100644 --- a/packages/lib/src/components/ThreeDS2/ThreeDS2DeviceFingerprint.tsx +++ b/packages/lib/src/components/ThreeDS2/ThreeDS2DeviceFingerprint.tsx @@ -1,30 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import PrepareFingerprint from './components/DeviceFingerprint'; -import { ErrorCodeObject } from './components/utils'; import callSubmit3DS2Fingerprint from './callSubmit3DS2Fingerprint'; import { existy } from '../internal/SecuredFields/lib/utilities/commonUtils'; -import { ActionHandledReturnObject } from '../types'; import { TxVariants } from '../tx-variants'; -import { ICore } from '../../core/types'; +import { ThreeDS2DeviceFingerprintConfiguration } from './types'; -export interface ThreeDS2DeviceFingerprintProps { - core: ICore; - dataKey: string; - token: string; - notificationURL: string; - onError: (error?: string | ErrorCodeObject) => void; - paymentData: string; - showSpinner: boolean; - type: string; - isMDFlow?: boolean; - loadingContext?: string; - clientKey?: string; - elementRef?: UIElement; - onActionHandled: (rtnObj: ActionHandledReturnObject) => void; -} - -class ThreeDS2DeviceFingerprint extends UIElement { +class ThreeDS2DeviceFingerprint extends UIElement { public static type = TxVariants.threeDS2Fingerprint; public static defaultProps = { diff --git a/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts b/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts index 309f692bcf..3080e240d1 100644 --- a/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts +++ b/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts @@ -1,7 +1,6 @@ -import { ChallengeData, ThreeDS2FlowObject } from '../../types'; +import { ChallengeData, ThreeDS2ChallengeConfiguration, ThreeDS2FlowObject } from '../../types'; import { ChallengeResolveData } from '../utils'; -import { ThreeDS2ChallengeProps } from '../../ThreeDS2Challenge'; -import { ActionHandledReturnObject } from '../../../types'; +import { ActionHandledReturnObject } from '../../../../types/global-types'; export interface DoChallenge3DS2Props extends ChallengeData { onCompleteChallenge: (resolveObject: ThreeDS2FlowObject) => void; @@ -14,7 +13,7 @@ export interface DoChallenge3DS2State { status?: string; } -export interface PrepareChallenge3DS2Props extends ThreeDS2ChallengeProps { +export interface PrepareChallenge3DS2Props extends ThreeDS2ChallengeConfiguration { onComplete?: (data: ChallengeResolveData) => void; } diff --git a/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts b/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts index d57ae43091..0cf332a473 100644 --- a/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts +++ b/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts @@ -1,7 +1,6 @@ -import { ThreeDS2FlowObject, FingerPrintData } from '../../types'; -import { ThreeDS2DeviceFingerprintProps } from '../../ThreeDS2DeviceFingerprint'; +import { ThreeDS2FlowObject, FingerPrintData, ThreeDS2DeviceFingerprintConfiguration } from '../../types'; import { FingerprintResolveData } from '../utils'; -import { ActionHandledReturnObject } from '../../../types'; +import { ActionHandledReturnObject } from '../../../../types/global-types'; export interface DoFingerprint3DS2Props extends FingerPrintData { onCompleteFingerprint: (resolveObject: ThreeDS2FlowObject) => void; @@ -14,7 +13,7 @@ export interface DoFingerprint3DS2State { base64URLencodedData: string; } -export interface PrepareFingerprint3DS2Props extends ThreeDS2DeviceFingerprintProps { +export interface PrepareFingerprint3DS2Props extends ThreeDS2DeviceFingerprintConfiguration { onComplete: (data: FingerprintResolveData) => void; } diff --git a/packages/lib/src/components/ThreeDS2/types.ts b/packages/lib/src/components/ThreeDS2/types.ts index 3d12980cfe..d06279fb04 100644 --- a/packages/lib/src/components/ThreeDS2/types.ts +++ b/packages/lib/src/components/ThreeDS2/types.ts @@ -1,3 +1,41 @@ +import { ICore } from '../../core/types'; +import { ErrorCodeObject } from './components/utils'; +import UIElement from '../internal/UIElement'; +import { ActionHandledReturnObject } from '../../types/global-types'; +import Language from '../../language'; + +export interface ThreeDS2DeviceFingerprintConfiguration { + core: ICore; + dataKey: string; + token: string; + notificationURL: string; + onError: (error?: string | ErrorCodeObject) => void; + paymentData: string; + showSpinner: boolean; + type: string; + isMDFlow?: boolean; + loadingContext?: string; + clientKey?: string; + elementRef?: UIElement; + onActionHandled: (rtnObj: ActionHandledReturnObject) => void; +} + +export interface ThreeDS2ChallengeConfiguration { + core: ICore; + token?: string; + dataKey?: string; + notificationURL?: string; + onError?: (error: string | ErrorCodeObject) => void; + paymentData?: string; + size?: string; + challengeWindowSize?: '01' | '02' | '03' | '04' | '05'; + type?: string; + loadingContext?: string; + isMDFlow?: boolean; + i18n?: Language; + onActionHandled: (rtnObj: ActionHandledReturnObject) => void; +} + /** * See * https://docs.adyen.com/checkout/3d-secure/api-reference#threeds2result diff --git a/packages/lib/src/components/Twint/Twint.tsx b/packages/lib/src/components/Twint/Twint.tsx index d063cd830a..12663824d6 100644 --- a/packages/lib/src/components/Twint/Twint.tsx +++ b/packages/lib/src/components/Twint/Twint.tsx @@ -3,10 +3,6 @@ import PayButton, { payAmountLabel } from '../internal/PayButton'; import { h } from 'preact'; import { TxVariants } from '../tx-variants'; -/** - * TwintElement - */ - class TwintElement extends RedirectElement { public static type = TxVariants.twint; diff --git a/packages/lib/src/components/UPI/UPI.tsx b/packages/lib/src/components/UPI/UPI.tsx index a222a3c513..ee6c9b46ab 100644 --- a/packages/lib/src/components/UPI/UPI.tsx +++ b/packages/lib/src/components/UPI/UPI.tsx @@ -1,14 +1,14 @@ import { h, RefObject } from 'preact'; -import UIElement from '../UIElement'; +import UIElement from '../internal/UIElement/UIElement'; import UPIComponent from './components/UPIComponent'; import CoreProvider from '../../core/Context/CoreProvider'; import Await from '../internal/Await'; import QRLoader from '../internal/QRLoader'; -import { UPIElementProps, UpiMode, UpiPaymentData } from './types'; +import { UPIConfiguration, UpiMode, UpiPaymentData } from './types'; import SRPanelProvider from '../../core/Errors/SRPanelProvider'; import { TxVariants } from '../tx-variants'; -class UPI extends UIElement { +class UPI extends UIElement { public static type = TxVariants.upi; public static txVariants = [TxVariants.upi, TxVariants.upi_qr, TxVariants.upi_collect]; diff --git a/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx b/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx index 561d5b79c5..fc97e00f63 100644 --- a/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx +++ b/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx @@ -1,7 +1,6 @@ import { Fragment, h, RefObject } from 'preact'; import { useCallback, useState } from 'preact/hooks'; import useCoreContext from '../../../../core/Context/useCoreContext'; -import { PayButtonFunctionProps, UIElementStatus } from '../../../types'; import { VpaInputDataState, VpaInputHandlers } from '../VpaInput/VpaInput'; import VpaInput from '../VpaInput'; import SegmentedControl from '../../../internal/SegmentedControl'; @@ -9,6 +8,7 @@ import { UpiMode } from '../../types'; import './UPIComponent.scss'; import isMobile from '../../../../utils/isMobile'; import useImage from '../../../../core/Context/useImage'; +import { PayButtonFunctionProps, UIElementStatus } from '../../../internal/UIElement/types'; type OnChangeProps = { data: VpaInputDataState; valid; errors; isValid: boolean }; diff --git a/packages/lib/src/components/UPI/types.ts b/packages/lib/src/components/UPI/types.ts index d8a037fafd..af18af1c24 100644 --- a/packages/lib/src/components/UPI/types.ts +++ b/packages/lib/src/components/UPI/types.ts @@ -1,4 +1,4 @@ -import { UIElementProps } from '../types'; +import { UIElementProps } from '../internal/UIElement/types'; export type UpiPaymentData = { paymentMethod: { @@ -9,7 +9,7 @@ export type UpiPaymentData = { export type UpiMode = 'vpa' | 'qrCode'; -export interface UPIElementProps extends UIElementProps { +export interface UPIConfiguration extends UIElementProps { /** * Define which view is displayed initially when the Component renders * @defaultValue vpa diff --git a/packages/lib/src/components/WalletIN/index.ts b/packages/lib/src/components/WalletIN/index.ts index 1a1555b4cc..4b6e0d2253 100644 --- a/packages/lib/src/components/WalletIN/index.ts +++ b/packages/lib/src/components/WalletIN/index.ts @@ -1,4 +1,4 @@ -import IssuerListContainer from '../helpers/IssuerListContainer'; +import IssuerListContainer from '../helpers/IssuerListContainer/IssuerListContainer'; import collectBrowserInfo from '../../utils/browserInfo'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/WeChat/WeChat.ts b/packages/lib/src/components/WeChat/WeChat.ts index 863f9c495c..958865c41f 100644 --- a/packages/lib/src/components/WeChat/WeChat.ts +++ b/packages/lib/src/components/WeChat/WeChat.ts @@ -1,4 +1,4 @@ -import QRLoaderContainer from '../helpers/QRLoaderContainer'; +import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; diff --git a/packages/lib/src/components/helpers/IssuerListContainer.tsx b/packages/lib/src/components/helpers/IssuerListContainer/IssuerListContainer.tsx similarity index 77% rename from packages/lib/src/components/helpers/IssuerListContainer.tsx rename to packages/lib/src/components/helpers/IssuerListContainer/IssuerListContainer.tsx index 3ea5f83517..2d180e5a63 100644 --- a/packages/lib/src/components/helpers/IssuerListContainer.tsx +++ b/packages/lib/src/components/helpers/IssuerListContainer/IssuerListContainer.tsx @@ -1,33 +1,14 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; -import { UIElementProps } from '../types'; -import IssuerList from '../internal/IssuerList'; -import getIssuerImageUrl from '../../utils/get-issuer-image'; -import { FALLBACK_CONTEXT } from '../../core/config'; -import CoreProvider from '../../core/Context/CoreProvider'; -import { IssuerItem, TermsAndConditions } from '../internal/IssuerList/types'; -import RedirectButton from '../internal/RedirectButton'; -import SRPanelProvider from '../../core/Errors/SRPanelProvider'; +import UIElement from '../../internal/UIElement/UIElement'; +import IssuerList from '../../internal/IssuerList'; +import getIssuerImageUrl from '../../../utils/get-issuer-image'; +import { FALLBACK_CONTEXT } from '../../../core/config'; +import CoreProvider from '../../../core/Context/CoreProvider'; +import RedirectButton from '../../internal/RedirectButton'; +import SRPanelProvider from '../../../core/Errors/SRPanelProvider'; +import { IssuerListConfiguration, IssuerListData } from './types'; -export interface IssuerListContainerProps extends UIElementProps { - showImage?: boolean; - placeholder?: string; - issuers?: IssuerItem[]; - highlightedIssuers?: string[]; - showPaymentMethodItemImages?: boolean; - showPayButton?: boolean; - termsAndConditions?: TermsAndConditions; - showContextualElement?: boolean; -} - -interface IssuerListData { - paymentMethod: { - type: string; - issuer: string; - }; -} - -class IssuerListContainer extends UIElement { +class IssuerListContainer extends UIElement { protected static defaultProps = { showImage: true, onValid: () => {}, @@ -37,7 +18,7 @@ class IssuerListContainer extends UIElement { showPaymentMethodItemImages: false }; - constructor(props: IssuerListContainerProps) { + constructor(props: IssuerListConfiguration) { super(props); const getImage = props => this.resources.getImage(props); diff --git a/packages/lib/src/components/helpers/IssuerListContainer/index.ts b/packages/lib/src/components/helpers/IssuerListContainer/index.ts new file mode 100644 index 0000000000..10cd325d8c --- /dev/null +++ b/packages/lib/src/components/helpers/IssuerListContainer/index.ts @@ -0,0 +1 @@ +export { default } from './IssuerListContainer'; diff --git a/packages/lib/src/components/helpers/IssuerListContainer/types.ts b/packages/lib/src/components/helpers/IssuerListContainer/types.ts new file mode 100644 index 0000000000..4a06fbb592 --- /dev/null +++ b/packages/lib/src/components/helpers/IssuerListContainer/types.ts @@ -0,0 +1,20 @@ +import { UIElementProps } from '../../internal/UIElement/types'; +import { IssuerItem, TermsAndConditions } from '../../internal/IssuerList/types'; + +export interface IssuerListConfiguration extends UIElementProps { + showImage?: boolean; + placeholder?: string; + issuers?: IssuerItem[]; + highlightedIssuers?: string[]; + showPaymentMethodItemImages?: boolean; + showPayButton?: boolean; + termsAndConditions?: TermsAndConditions; + showContextualElement?: boolean; +} + +export interface IssuerListData { + paymentMethod: { + type: string; + issuer: string; + }; +} diff --git a/packages/lib/src/components/helpers/OpenInvoiceContainer/OpenInvoiceContainer.tsx b/packages/lib/src/components/helpers/OpenInvoiceContainer/OpenInvoiceContainer.tsx index 7762191cd9..8ed2507be6 100644 --- a/packages/lib/src/components/helpers/OpenInvoiceContainer/OpenInvoiceContainer.tsx +++ b/packages/lib/src/components/helpers/OpenInvoiceContainer/OpenInvoiceContainer.tsx @@ -1,21 +1,12 @@ import { h } from 'preact'; -import UIElement from '../../UIElement'; +import UIElement from '../../internal/UIElement/UIElement'; import OpenInvoice from '../../internal/OpenInvoice'; import CoreProvider from '../../../core/Context/CoreProvider'; -import { OpenInvoiceProps } from '../../internal/OpenInvoice/types'; -import { AddressSpecifications } from '../../internal/Address/types'; import SRPanelProvider from '../../../core/Errors/SRPanelProvider'; -import { ICore } from '../../../core/types'; +import { OpenInvoiceConfiguration } from './types'; -export interface OpenInvoiceContainerProps extends Partial { - core: ICore; - consentCheckboxLabel?: h.JSX.Element; - billingAddressRequiredFields?: string[]; - billingAddressSpecification?: AddressSpecifications; -} - -export default class OpenInvoiceContainer extends UIElement { - protected static defaultProps: Partial = { +export default class OpenInvoiceContainer extends UIElement { + protected static defaultProps: Partial = { onChange: () => {}, data: { companyDetails: {}, personalDetails: {}, billingAddress: {}, deliveryAddress: {}, bankAccount: {} }, visibility: { diff --git a/packages/lib/src/components/helpers/OpenInvoiceContainer/types.ts b/packages/lib/src/components/helpers/OpenInvoiceContainer/types.ts new file mode 100644 index 0000000000..620a36406c --- /dev/null +++ b/packages/lib/src/components/helpers/OpenInvoiceContainer/types.ts @@ -0,0 +1,11 @@ +import { OpenInvoiceProps } from '../../internal/OpenInvoice/types'; +import { ICore } from '../../../core/types'; +import { h } from 'preact'; +import { AddressSpecifications } from '../../internal/Address/types'; + +export interface OpenInvoiceConfiguration extends Partial { + core: ICore; + consentCheckboxLabel?: h.JSX.Element; + billingAddressRequiredFields?: string[]; + billingAddressSpecification?: AddressSpecifications; +} diff --git a/packages/lib/src/components/helpers/QRLoaderContainer.tsx b/packages/lib/src/components/helpers/QRLoaderContainer/QRLoaderContainer.tsx similarity index 72% rename from packages/lib/src/components/helpers/QRLoaderContainer.tsx rename to packages/lib/src/components/helpers/QRLoaderContainer/QRLoaderContainer.tsx index dad92ca50f..d9e49a2773 100644 --- a/packages/lib/src/components/helpers/QRLoaderContainer.tsx +++ b/packages/lib/src/components/helpers/QRLoaderContainer/QRLoaderContainer.tsx @@ -1,33 +1,12 @@ import { h } from 'preact'; -import UIElement from '../UIElement'; -import { UIElementProps } from '../types'; -import QRLoader from '../internal/QRLoader'; -import CoreProvider from '../../core/Context/CoreProvider'; -import RedirectButton from '../internal/RedirectButton'; -import SRPanelProvider from '../../core/Errors/SRPanelProvider'; +import UIElement from '../../internal/UIElement/UIElement'; +import QRLoader from '../../internal/QRLoader'; +import CoreProvider from '../../../core/Context/CoreProvider'; +import RedirectButton from '../../internal/RedirectButton'; +import SRPanelProvider from '../../../core/Errors/SRPanelProvider'; +import { QRLoaderConfiguration } from './types'; -export interface QRLoaderContainerProps extends UIElementProps { - /** - * Number of miliseconds that the component will wait in between status calls - */ - delay?: number; - - /** - * Number of minutes that the component should keep on loading - */ - countdownTime?: number; - - type?: string; - brandLogo?: string; - buttonLabel?: string; - qrCodeImage?: string; - paymentData?: string; - introduction?: string; - instructions?: string; - copyBtn?: boolean; -} - -class QRLoaderContainer extends UIElement { +class QRLoaderContainer extends UIElement { // Using the generic here allow to fully extend the QRLoaderContainer (including its props) protected static defaultProps = { qrCodeImage: '', diff --git a/packages/lib/src/components/helpers/QRLoaderContainer/index.ts b/packages/lib/src/components/helpers/QRLoaderContainer/index.ts new file mode 100644 index 0000000000..d01a25da9e --- /dev/null +++ b/packages/lib/src/components/helpers/QRLoaderContainer/index.ts @@ -0,0 +1 @@ +export { default } from './QRLoaderContainer'; diff --git a/packages/lib/src/components/helpers/QRLoaderContainer/types.ts b/packages/lib/src/components/helpers/QRLoaderContainer/types.ts new file mode 100644 index 0000000000..1aee1fc5f6 --- /dev/null +++ b/packages/lib/src/components/helpers/QRLoaderContainer/types.ts @@ -0,0 +1,22 @@ +import { UIElementProps } from '../../internal/UIElement/types'; + +export interface QRLoaderConfiguration extends UIElementProps { + /** + * Number of miliseconds that the component will wait in between status calls + */ + delay?: number; + + /** + * Number of minutes that the component should keep on loading + */ + countdownTime?: number; + + type?: string; + brandLogo?: string; + buttonLabel?: string; + qrCodeImage?: string; + paymentData?: string; + introduction?: string; + instructions?: string; + copyBtn?: boolean; +} diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index adbc9124fd..4ea83bb6eb 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -5,15 +5,15 @@ import ReadOnlyAddress from './components/ReadOnlyAddress'; import { getAddressValidationRules } from './validate'; import { addressFormatters, countrySpecificFormatters } from './validate.formats'; import { AddressProps } from './types'; -import { AddressData } from '../../../types'; +import { AddressData } from '../../../types/global-types'; import FieldContainer from './components/FieldContainer'; import useForm from '../../../utils/useForm'; import Specifications from './Specifications'; import { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants'; import { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils'; import useCoreContext from '../../../core/Context/useCoreContext'; -import { ComponentMethodsRef } from '../../types'; import AddressSearch from './components/AddressSearch'; +import { ComponentMethodsRef } from '../UIElement/types'; export default function Address(props: AddressProps) { const { i18n } = useCoreContext(); diff --git a/packages/lib/src/components/internal/Address/Specifications.ts b/packages/lib/src/components/internal/Address/Specifications.ts index e17555a43e..7c3dbe822c 100644 --- a/packages/lib/src/components/internal/Address/Specifications.ts +++ b/packages/lib/src/components/internal/Address/Specifications.ts @@ -1,6 +1,6 @@ import { AddressSchema, AddressSpecifications, StringObject } from './types'; import { ADDRESS_SPECIFICATIONS } from './constants'; -import { AddressField } from '../../../types'; +import { AddressField } from '../../../types/global-types'; const SCHEMA_MAX_DEPTH = 2; diff --git a/packages/lib/src/components/internal/Address/types.ts b/packages/lib/src/components/internal/Address/types.ts index e4533b2635..885a01ad7e 100644 --- a/packages/lib/src/components/internal/Address/types.ts +++ b/packages/lib/src/components/internal/Address/types.ts @@ -1,4 +1,4 @@ -import { AddressField, AddressData } from '../../../types'; +import { AddressField, AddressData } from '../../../types/global-types'; import Specifications from './Specifications'; import { ValidatorRules } from '../../../utils/Validator/types'; import { ValidationRuleResult } from '../../../utils/Validator/ValidationRuleResult'; diff --git a/packages/lib/src/components/internal/Address/utils.ts b/packages/lib/src/components/internal/Address/utils.ts index 590ab2dc13..7ec55dfe75 100644 --- a/packages/lib/src/components/internal/Address/utils.ts +++ b/packages/lib/src/components/internal/Address/utils.ts @@ -1,6 +1,6 @@ import Language from '../../../language'; import { ADDRESS_SCHEMA } from './constants'; -import { AddressField } from '../../../types'; +import { AddressField } from '../../../types/global-types'; import { StringObject } from './types'; export const DEFAULT_DEBOUNCE_TIME_MS = 300; diff --git a/packages/lib/src/components/internal/Await/types.ts b/packages/lib/src/components/internal/Await/types.ts index 838d1bc354..639d058da0 100644 --- a/packages/lib/src/components/internal/Await/types.ts +++ b/packages/lib/src/components/internal/Await/types.ts @@ -1,4 +1,5 @@ -import { ActionHandledReturnObject } from '../../types'; +import { UIElementProps } from '../UIElement/types'; +import { ActionHandledReturnObject } from '../../../types/global-types'; interface StatusObjectProps { payload: string; @@ -30,3 +31,10 @@ export interface AwaitComponentProps { ref: any; onActionHandled: (rtnObj: ActionHandledReturnObject) => void; } + +export interface AwaitConfiguration extends UIElementProps { + paymentData?: string; + paymentMethoType?: string; + type?: string; + url?: string; +} diff --git a/packages/lib/src/components/BaseElement.test.ts b/packages/lib/src/components/internal/BaseElement/BaseElement.test.ts similarity index 97% rename from packages/lib/src/components/BaseElement.test.ts rename to packages/lib/src/components/internal/BaseElement/BaseElement.test.ts index 81109131d2..cb6b9b17e7 100644 --- a/packages/lib/src/components/BaseElement.test.ts +++ b/packages/lib/src/components/internal/BaseElement/BaseElement.test.ts @@ -1,7 +1,7 @@ import BaseElement from './BaseElement'; import { BaseElementProps } from './types'; import { mock } from 'jest-mock-extended'; -import { ICore } from '../core/types'; +import { ICore } from '../../../core/types'; describe('BaseElement', () => { let MyElement; diff --git a/packages/lib/src/components/BaseElement.ts b/packages/lib/src/components/internal/BaseElement/BaseElement.ts similarity index 93% rename from packages/lib/src/components/BaseElement.ts rename to packages/lib/src/components/internal/BaseElement/BaseElement.ts index b7557e90aa..677bf82dbc 100644 --- a/packages/lib/src/components/BaseElement.ts +++ b/packages/lib/src/components/internal/BaseElement/BaseElement.ts @@ -1,10 +1,11 @@ import { ComponentChild, render } from 'preact'; -import getProp from '../utils/getProp'; -import EventEmitter from './EventEmitter'; -import uuid from '../utils/uuid'; -import { BaseElementProps, IBaseElement, PaymentData } from './types'; -import AdyenCheckoutError from '../core/Errors/AdyenCheckoutError'; -import { ICore } from '../core/types'; +import getProp from '../../../utils/getProp'; +import EventEmitter from '../../EventEmitter'; +import uuid from '../../../utils/uuid'; +import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError'; +import { ICore } from '../../../core/types'; +import { BaseElementProps, IBaseElement } from './types'; +import { PaymentData } from '../../../types/global-types'; class BaseElement

implements IBaseElement { public readonly _id = `${this.constructor['type']}-${uuid()}`; diff --git a/packages/lib/src/components/internal/BaseElement/index.ts b/packages/lib/src/components/internal/BaseElement/index.ts new file mode 100644 index 0000000000..57c7a53d14 --- /dev/null +++ b/packages/lib/src/components/internal/BaseElement/index.ts @@ -0,0 +1 @@ +export { default } from './BaseElement'; diff --git a/packages/lib/src/components/internal/BaseElement/types.ts b/packages/lib/src/components/internal/BaseElement/types.ts new file mode 100644 index 0000000000..15d226e983 --- /dev/null +++ b/packages/lib/src/components/internal/BaseElement/types.ts @@ -0,0 +1,33 @@ +import { ICore } from '../../../core/types'; +import { Order } from '../../../types/global-types'; +import { SRPanel } from '../../../core/Errors/SRPanel'; +import Analytics from '../../../core/Analytics'; +import { Resources } from '../../../core/Context/Resources'; +import RiskElement from '../../../core/RiskModule'; +import { ComponentChild } from 'preact'; + +export interface BaseElementProps { + core: ICore; + order?: Order; + modules?: { + srPanel?: SRPanel; + analytics?: Analytics; + resources?: Resources; + risk?: RiskElement; + }; + isDropin?: boolean; +} + +export interface IBaseElement { + data: object; + state: any; + props: any; + _id: string; + _component: any; + render(): ComponentChild | Error; + mount(domNode: HTMLElement | string): IBaseElement; + update(props): IBaseElement; + remount(component): IBaseElement; + unmount(): IBaseElement; + remove(): void; +} diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx b/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx index 28fd7b8173..b3869ca63e 100644 --- a/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx +++ b/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx @@ -14,7 +14,7 @@ import useImage from '../../../../../core/Context/useImage'; import useCoreContext from '../../../../../core/Context/useCoreContext'; import isMobile from '../../../../../utils/isMobile'; import Language from '../../../../../language'; -import { PaymentAmount } from '../../../../../types'; +import { PaymentAmount } from '../../../../../types/global-types'; import './CtPCards.scss'; type CtPCardsProps = { diff --git a/packages/lib/src/components/internal/ClickToPay/context/ClickToPayContext.ts b/packages/lib/src/components/internal/ClickToPay/context/ClickToPayContext.ts index 4bee65d829..82fd483a01 100644 --- a/packages/lib/src/components/internal/ClickToPay/context/ClickToPayContext.ts +++ b/packages/lib/src/components/internal/ClickToPay/context/ClickToPayContext.ts @@ -2,10 +2,10 @@ import { createContext } from 'preact'; import { CtpState } from '../services/ClickToPayService'; import { ClickToPayCheckoutPayload, IClickToPayService } from '../services/types'; import ShopperCard from '../models/ShopperCard'; -import { ClickToPayConfiguration } from '../types'; -import { UIElementStatus } from '../../../types'; -import { PaymentAmount } from '../../../../types'; +import { ClickToPayProps } from '../types'; +import { PaymentAmount } from '../../../../types/global-types'; import AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError'; +import { UIElementStatus } from '../../UIElement/types'; export interface IClickToPayContext extends Pick { @@ -19,7 +19,7 @@ export interface IClickToPayContext otpMaskedContact: string; otpNetwork: string; amount: PaymentAmount; - configuration: ClickToPayConfiguration; + configuration: ClickToPayProps; status: UIElementStatus; onSubmit(payload: ClickToPayCheckoutPayload): void; onSetStatus(status: UIElementStatus): void; diff --git a/packages/lib/src/components/internal/ClickToPay/context/ClickToPayProvider.tsx b/packages/lib/src/components/internal/ClickToPay/context/ClickToPayProvider.tsx index 04b112976b..41e3da4443 100644 --- a/packages/lib/src/components/internal/ClickToPay/context/ClickToPayProvider.tsx +++ b/packages/lib/src/components/internal/ClickToPay/context/ClickToPayProvider.tsx @@ -4,10 +4,10 @@ import { ClickToPayContext } from './ClickToPayContext'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { ClickToPayCheckoutPayload, IClickToPayService, IdentityLookupParams } from '../services/types'; import ShopperCard from '../models/ShopperCard'; -import { ClickToPayConfiguration } from '../types'; +import { ClickToPayProps } from '../types'; import AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError'; -import { UIElementStatus } from '../../../types'; -import { PaymentAmount } from '../../../../types'; +import { PaymentAmount } from '../../../../types/global-types'; +import { UIElementStatus } from '../../UIElement/types'; type ClickToPayProviderRef = { setStatus?(status: UIElementStatus): void; @@ -16,7 +16,7 @@ type ClickToPayProviderRef = { export type ClickToPayProviderProps = { isStandaloneComponent: boolean; clickToPayService: IClickToPayService | null; - configuration: ClickToPayConfiguration; + configuration: ClickToPayProps; amount: PaymentAmount; children: any; setClickToPayRef(ref): void; diff --git a/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.test.ts b/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.test.ts index e90e32f1dc..044f256cea 100644 --- a/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.test.ts +++ b/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.test.ts @@ -1,7 +1,7 @@ import createClickToPayService from './create-clicktopay-service'; import { CtpState } from './ClickToPayService'; import { IClickToPayService } from './types'; -import { CardConfiguration } from '../../../Card/types'; +import { CardBackendConfiguration } from '../../../Card/types'; const ENVIRONMENT = 'test'; @@ -18,7 +18,7 @@ test('should not create the service if card `configuration` property is not prov test('should not create the service if Visa config properties are missing', () => { let service: IClickToPayService = null, - configuration: CardConfiguration = { + configuration: CardBackendConfiguration = { visaSrciDpaId: 'xxxx' }; service = createClickToPayService(configuration, null, ENVIRONMENT); @@ -33,7 +33,7 @@ test('should not create the service if Visa config properties are missing', () = test('should not create the service if MC config properties are missing', () => { let service: IClickToPayService = null, - configuration: CardConfiguration = { + configuration: CardBackendConfiguration = { mcDpaId: 'xxxx' }; service = createClickToPayService(configuration, null, ENVIRONMENT); @@ -47,7 +47,7 @@ test('should not create the service if MC config properties are missing', () => }); test('should create service if Visa config is set properly', () => { - const configuration: CardConfiguration = { + const configuration: CardBackendConfiguration = { visaSrciDpaId: 'xxx', visaSrcInitiatorId: 'yyyy' }; @@ -56,7 +56,7 @@ test('should create service if Visa config is set properly', () => { }); test('should create service if MC config is set properly', () => { - const configuration: CardConfiguration = { + const configuration: CardBackendConfiguration = { mcSrcClientId: 'xxx', mcDpaId: 'yyyy' }; @@ -65,7 +65,7 @@ test('should create service if MC config is set properly', () => { }); test('should create service if MC config is set properly', () => { - const configuration: CardConfiguration = { + const configuration: CardBackendConfiguration = { mcSrcClientId: 'xxx', mcDpaId: 'yyyy', visaSrciDpaId: 'xxx', diff --git a/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.ts b/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.ts index 8ffd1a4e2a..a3e60fcef9 100644 --- a/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.ts +++ b/packages/lib/src/components/internal/ClickToPay/services/create-clicktopay-service.ts @@ -2,15 +2,15 @@ import SrcSdkLoader from './sdks/SrcSdkLoader'; import ClickToPayService from './ClickToPayService'; import { IClickToPayService, IdentityLookupParams } from './types'; import { SrcInitParams } from './sdks/types'; -import { CardConfiguration } from '../../../Card/types'; -import { ClickToPayConfiguration, ClickToPayScheme } from '../types'; +import { CardBackendConfiguration } from '../../../Card/types'; +import { ClickToPayProps, ClickToPayScheme } from '../types'; /** * Creates the Click to Pay service in case the required configuration is provided */ export default function createClickToPayService( - configuration: CardConfiguration, - clickToPayConfiguration: ClickToPayConfiguration | undefined, + configuration: CardBackendConfiguration, + clickToPayConfiguration: ClickToPayProps | undefined, environment: string ): IClickToPayService | null { const schemesConfig = createSchemesInitConfiguration(configuration); @@ -43,7 +43,7 @@ const createShopperIdentityObject = (shopperEmail: string, telephoneNumber: stri * Parses 'configuration' object that comes from the Card payment method config, and try to create the Click to Pay * initialization object in case the values are provided. */ -const createSchemesInitConfiguration = (configuration: CardConfiguration): Record => { +const createSchemesInitConfiguration = (configuration: CardBackendConfiguration): Record => { if (!configuration) { return null; } diff --git a/packages/lib/src/components/internal/ClickToPay/types.ts b/packages/lib/src/components/internal/ClickToPay/types.ts index df6ae37200..06611d43ce 100644 --- a/packages/lib/src/components/internal/ClickToPay/types.ts +++ b/packages/lib/src/components/internal/ClickToPay/types.ts @@ -1,6 +1,6 @@ import TimeoutError from './errors/TimeoutError'; -export type ClickToPayConfiguration = { +export type ClickToPayProps = { /** * Shopper email used to be recognized with the Network schemes */ diff --git a/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx b/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx index 6ca8fa56aa..d0d6afc599 100644 --- a/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx +++ b/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx @@ -8,8 +8,8 @@ import useCoreContext from '../../../core/Context/useCoreContext'; import { getFormattedData } from './utils'; import { CompanyDetailsSchema, CompanyDetailsProps } from './types'; import useForm from '../../../utils/useForm'; -import { ComponentMethodsRef } from '../../types'; import InputText from '../FormFields/InputText'; +import { ComponentMethodsRef } from '../UIElement/types'; export const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber']; diff --git a/packages/lib/src/components/internal/CompanyDetails/types.ts b/packages/lib/src/components/internal/CompanyDetails/types.ts index 484d84a952..830a406e0c 100644 --- a/packages/lib/src/components/internal/CompanyDetails/types.ts +++ b/packages/lib/src/components/internal/CompanyDetails/types.ts @@ -1,4 +1,4 @@ -import { FieldsetVisibility } from '../../../types'; +import { FieldsetVisibility } from '../../../types/global-types'; import { ValidatorRules } from '../../../utils/Validator/types'; export interface CompanyDetailsSchema { diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx index 3af3bd57ba..1bd29a6983 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx +++ b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx @@ -17,7 +17,6 @@ import { } from './types'; import './OpenInvoice.scss'; import IbanInput from '../IbanInput'; -import { ComponentMethodsRef } from '../../types'; import { enhanceErrorObjectKeys } from '../../../core/Errors/utils'; import { GenericError, SetSRMessagesReturnObject, SortedErrorObject } from '../../../core/Errors/types'; import useSRPanelContext from '../../../core/Errors/useSRPanelContext'; @@ -31,6 +30,7 @@ import { usePrevious } from '../../../utils/hookUtils'; import { getArrayDifferences } from '../../../utils/arrayUtils'; import Field from '../FormFields/Field'; import FormInstruction from '../FormInstruction'; +import { ComponentMethodsRef } from '../UIElement/types'; const consentCBErrorObj: GenericError = { isValid: false, diff --git a/packages/lib/src/components/internal/OpenInvoice/types.ts b/packages/lib/src/components/internal/OpenInvoice/types.ts index 4877271c9d..be8508e277 100644 --- a/packages/lib/src/components/internal/OpenInvoice/types.ts +++ b/packages/lib/src/components/internal/OpenInvoice/types.ts @@ -1,9 +1,9 @@ -import { AddressData, FieldsetVisibility, PersonalDetailsSchema } from '../../../types'; +import { AddressData, FieldsetVisibility, PersonalDetailsSchema } from '../../../types/global-types'; import { CompanyDetailsSchema } from '../CompanyDetails/types'; import { AddressSpecifications } from '../Address/types'; -import { UIElementProps } from '../../types'; -import UIElement from '../../UIElement'; +import UIElement from '../UIElement/UIElement'; import { GenericError, ValidationRuleErrorObj } from '../../../core/Errors/types'; +import { UIElementProps } from '../UIElement/types'; export interface OpenInvoiceVisibility { companyDetails?: FieldsetVisibility; diff --git a/packages/lib/src/components/internal/PayButton/PayButton.tsx b/packages/lib/src/components/internal/PayButton/PayButton.tsx index 87e36abb85..fb780b5cd2 100644 --- a/packages/lib/src/components/internal/PayButton/PayButton.tsx +++ b/packages/lib/src/components/internal/PayButton/PayButton.tsx @@ -3,7 +3,7 @@ import Button from '../Button'; import useCoreContext from '../../../core/Context/useCoreContext'; import { ButtonProps } from '../Button/types'; import { payAmountLabel, secondaryAmountLabel } from './utils'; -import { PaymentAmountExtended } from '../../../types'; +import { PaymentAmountExtended } from '../../../types/global-types'; import SecondaryButtonLabel from './components/SecondaryButtonLabel'; export interface PayButtonProps extends ButtonProps { diff --git a/packages/lib/src/components/internal/PayButton/utils.ts b/packages/lib/src/components/internal/PayButton/utils.ts index 5eb7d67b7e..33449a3d41 100644 --- a/packages/lib/src/components/internal/PayButton/utils.ts +++ b/packages/lib/src/components/internal/PayButton/utils.ts @@ -1,5 +1,5 @@ import Language from '../../../language'; -import { PaymentAmountExtended } from '../../../types'; +import { PaymentAmountExtended } from '../../../types/global-types'; export const PAY_BTN_DIVIDER = '/ '; diff --git a/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx b/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx index 964b381700..7a45f70a35 100644 --- a/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx +++ b/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx @@ -7,16 +7,16 @@ import { personalDetailsValidationRules } from './validate'; import useCoreContext from '../../../core/Context/useCoreContext'; import { PersonalDetailsProps } from './types'; import { checkDateInputSupport } from '../FormFields/InputDate/utils'; -import { PersonalDetailsSchema } from '../../../types'; +import { PersonalDetailsSchema } from '../../../types/global-types'; import { getFormattedData } from './utils'; import useForm from '../../../utils/useForm'; import './PersonalDetails.scss'; -import { ComponentMethodsRef } from '../../types'; import InputText from '../FormFields/InputText'; import RadioGroup from '../FormFields/RadioGroup'; import InputDate from '../FormFields/InputDate'; import InputEmail from '../FormFields/InputEmail'; import InputTelephone from '../FormFields/InputTelephone'; +import { ComponentMethodsRef } from '../UIElement/types'; export const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'gender', 'dateOfBirth', 'shopperEmail', 'telephoneNumber']; diff --git a/packages/lib/src/components/internal/PersonalDetails/types.ts b/packages/lib/src/components/internal/PersonalDetails/types.ts index 1203a56e64..2dfbe76201 100644 --- a/packages/lib/src/components/internal/PersonalDetails/types.ts +++ b/packages/lib/src/components/internal/PersonalDetails/types.ts @@ -1,4 +1,4 @@ -import { FieldsetVisibility, PersonalDetailsSchema } from '../../../types'; +import { FieldsetVisibility, PersonalDetailsSchema } from '../../../types/global-types'; import { ValidatorRules } from '../../../utils/Validator/types'; type PersonalDetailsPlaceholders = Omit; diff --git a/packages/lib/src/components/internal/QRLoader/types.ts b/packages/lib/src/components/internal/QRLoader/types.ts index 96de95892a..abc481b44d 100644 --- a/packages/lib/src/components/internal/QRLoader/types.ts +++ b/packages/lib/src/components/internal/QRLoader/types.ts @@ -1,6 +1,5 @@ -import { PaymentAmount } from '../../../types'; +import { ActionHandledReturnObject, PaymentAmount } from '../../../types/global-types'; import Language from '../../../language/Language'; -import { ActionHandledReturnObject } from '../../types'; export interface QRLoaderProps { delay?: number; diff --git a/packages/lib/src/components/internal/SecuredFields/SFP/types.ts b/packages/lib/src/components/internal/SecuredFields/SFP/types.ts index 3206cff659..42089ff6bf 100644 --- a/packages/lib/src/components/internal/SecuredFields/SFP/types.ts +++ b/packages/lib/src/components/internal/SecuredFields/SFP/types.ts @@ -1,5 +1,5 @@ import { CVCPolicyType, DatePolicyType, StylesObject } from '../lib/types'; -import { AddressData } from '../../../../types'; +import { AddressData } from '../../../../types/global-types'; import { CardBrandsConfiguration } from '../../../Card/types'; import Language from '../../../../language'; import { Resources } from '../../../../core/Context/Resources'; diff --git a/packages/lib/src/components/UIElement.scss b/packages/lib/src/components/internal/UIElement/UIElement.scss similarity index 63% rename from packages/lib/src/components/UIElement.scss rename to packages/lib/src/components/internal/UIElement/UIElement.scss index 822eba984d..1916da02fa 100644 --- a/packages/lib/src/components/UIElement.scss +++ b/packages/lib/src/components/internal/UIElement/UIElement.scss @@ -1,7 +1,7 @@ /* Shared css variables and styles are imported once here at the root level for all UI components. */ -@use '../style/index'; -@import '../style/design-tokens'; -@import '../style/link'; +@use '../../../style/index'; +@import '../../../style/design-tokens'; +@import '../../../style/link'; [class^='adyen-checkout'] { @include index.adl-box-sizing(true); diff --git a/packages/lib/src/components/UIElement.test.ts b/packages/lib/src/components/internal/UIElement/UIElement.test.ts similarity index 99% rename from packages/lib/src/components/UIElement.test.ts rename to packages/lib/src/components/internal/UIElement/UIElement.test.ts index e1ae86e75b..5ec1c42f7d 100644 --- a/packages/lib/src/components/UIElement.test.ts +++ b/packages/lib/src/components/internal/UIElement/UIElement.test.ts @@ -1,7 +1,7 @@ import UIElement from './UIElement'; -import { ICore } from '../core/types'; +import { ICore } from '../../../core/types'; import { mockDeep, mockReset } from 'jest-mock-extended'; -import { AdyenCheckout, ThreeDS2Challenge, ThreeDS2DeviceFingerprint } from '../index'; +import { AdyenCheckout, ThreeDS2Challenge, ThreeDS2DeviceFingerprint } from '../../../index'; import { UIElementProps } from './types'; interface MyElementProps extends UIElementProps { diff --git a/packages/lib/src/components/UIElement.tsx b/packages/lib/src/components/internal/UIElement/UIElement.tsx similarity index 91% rename from packages/lib/src/components/UIElement.tsx rename to packages/lib/src/components/internal/UIElement/UIElement.tsx index 8a83a23822..165af616c5 100644 --- a/packages/lib/src/components/UIElement.tsx +++ b/packages/lib/src/components/internal/UIElement/UIElement.tsx @@ -1,18 +1,16 @@ import { h } from 'preact'; -import BaseElement from './BaseElement'; -import { PaymentAction } from '../types'; -import { ComponentMethodsRef, PaymentResponse } from './types'; -import PayButton from './internal/PayButton'; -import { IUIElement, PayButtonFunctionProps, RawPaymentResponse, UIElementProps } from './types'; +import BaseElement from '../BaseElement/BaseElement'; +import PayButton from '../PayButton'; import { getSanitizedResponse, resolveFinalResult } from './utils'; -import AdyenCheckoutError from '../core/Errors/AdyenCheckoutError'; -import { UIElementStatus } from './types'; -import { hasOwnProperty } from '../utils/hasOwnProperty'; -import DropinElement from './Dropin'; -import { CoreOptions, ICore } from '../core/types'; -import { Resources } from '../core/Context/Resources'; -import { NewableComponent } from '../core/core.registry'; +import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError'; +import { hasOwnProperty } from '../../../utils/hasOwnProperty'; +import DropinElement from '../../Dropin'; +import { CoreConfiguration, ICore } from '../../../core/types'; +import { Resources } from '../../../core/Context/Resources'; +import { NewableComponent } from '../../../core/core.registry'; import './UIElement.scss'; +import { ComponentMethodsRef, IUIElement, PayButtonFunctionProps, UIElementProps, UIElementStatus } from './types'; +import { PaymentAction, PaymentResponseData, RawPaymentResponse } from '../../../types/global-types'; export abstract class UIElement

extends BaseElement

implements IUIElement { protected componentRef: any; @@ -170,6 +168,12 @@ export abstract class UIElement

exten return this; } + /** + * Submit the payment using sessions flow + * + * @param data + * @private + */ private submitPayment(data): Promise { return this.core.session .submitPayment(data) @@ -229,13 +233,13 @@ export abstract class UIElement

exten return null; } - protected handleOrder = (response: PaymentResponse): void => { + protected handleOrder = (response: PaymentResponseData): void => { this.updateParent({ order: response.order }); // in case we receive an order in any other component then a GiftCard trigger handleFinalResult if (this.props.onPaymentCompleted) this.props.onPaymentCompleted(response, this.elementRef); }; - protected handleFinalResult = (result: PaymentResponse) => { + protected handleFinalResult = (result: PaymentResponseData) => { if (this.props.setStatusAutomatically) { const [status, statusProps] = resolveFinalResult(result); if (status) this.setElementStatus(status, statusProps); @@ -269,7 +273,7 @@ export abstract class UIElement

exten * This function exist to make safe access to the protect _parentInstance * @param options - CoreOptions */ - public updateParent(options: CoreOptions = {}): Promise { + public updateParent(options: CoreConfiguration = {}): Promise { return this.elementRef.core.update(options); } diff --git a/packages/lib/src/components/internal/UIElement/index.ts b/packages/lib/src/components/internal/UIElement/index.ts new file mode 100644 index 0000000000..c7fd46170d --- /dev/null +++ b/packages/lib/src/components/internal/UIElement/index.ts @@ -0,0 +1 @@ +export { default } from './UIElement'; diff --git a/packages/lib/src/components/internal/UIElement/types.ts b/packages/lib/src/components/internal/UIElement/types.ts new file mode 100644 index 0000000000..daaf916816 --- /dev/null +++ b/packages/lib/src/components/internal/UIElement/types.ts @@ -0,0 +1,114 @@ +import { h } from 'preact'; +import Session from '../../../core/CheckoutSession'; +import UIElement from './UIElement'; +import { ActionHandledReturnObject, PaymentAction, PaymentAmount, PaymentAmountExtended } from '../../../types/global-types'; +import Language from '../../../language'; +import { BaseElementProps, IBaseElement } from '../BaseElement/types'; +import { PayButtonProps } from '../PayButton/PayButton'; +import { CoreConfiguration, ICore } from '../../../core/types'; + +export type PayButtonFunctionProps = Omit; + +export interface UIElementProps extends BaseElementProps { + environment?: string; + session?: Session; + onChange?: (state: any, element: UIElement) => void; + onValid?: (state: any, element: UIElement) => void; + beforeSubmit?: (state: any, element: UIElement, actions: any) => Promise; + onSubmit?: (state: any, element: UIElement) => void; + onComplete?: (state, element: UIElement) => void; + onActionHandled?: (rtnObj: ActionHandledReturnObject) => void; + onAdditionalDetails?: (state: any, element: UIElement) => void; + onError?: (error, element?: UIElement) => void; + onPaymentCompleted?: (result: any, element: UIElement) => void; + beforeRedirect?: (resolve, reject, redirectData, element: UIElement) => void; + + isInstantPayment?: boolean; + + /** + * Flags if the element is Stored payment method + * @internal + */ + isStoredPaymentMethod?: boolean; + + /** + * Flag if the element is Stored payment method. + * Perhaps can be deprecated and we use the one above? + * @internal + */ + oneClick?: boolean; + + /** + * Stored payment method id + * @internal + */ + storedPaymentMethodId?: string; + + /** + * Status set when creating the Component from action + * @internal + */ + statusType?: 'redirect' | 'loading' | 'custom'; + + type?: string; + name?: string; + icon?: string; + amount?: PaymentAmount; + secondaryAmount?: PaymentAmountExtended; + + /** + * Show/Hide pay button + * @defaultValue true + */ + showPayButton?: boolean; + + /** + * Set to false to not set the Component status to 'loading' when onSubmit is triggered. + * @defaultValue true + */ + setStatusAutomatically?: boolean; + + /** @internal */ + payButton?: (options: PayButtonFunctionProps) => h.JSX.Element; + + /** @internal */ + loadingContext?: string; + + /** @internal */ + createFromAction?: (action: PaymentAction, props: object) => UIElement; + + /** @internal */ + clientKey?: string; + + /** @internal */ + elementRef?: any; + + /** @internal */ + i18n?: Language; +} + +export interface IUIElement extends IBaseElement { + isValid: boolean; + displayName: string; + accessibleName: string; + type: string; + icon: string; + elementRef: IUIElement; + submit(): void; + setComponentRef(ref): void; + updateParent(options?: CoreConfiguration): Promise; + setElementStatus(status: UIElementStatus, props: any): UIElement; + setStatus(status: UIElementStatus, props?: { message?: string; [key: string]: any }): UIElement; + handleAction(action: PaymentAction): UIElement | null; + showValidation(): void; + setState(newState: object): void; + isAvailable(): Promise; +} + +export type UIElementStatus = 'ready' | 'loading' | 'error' | 'success'; + +// An interface for the members exposed by a component to its parent UIElement +export interface ComponentMethodsRef { + showValidation?: () => void; + setStatus?(status: UIElementStatus): void; +} diff --git a/packages/lib/src/components/utils.test.ts b/packages/lib/src/components/internal/UIElement/utils.test.ts similarity index 93% rename from packages/lib/src/components/utils.test.ts rename to packages/lib/src/components/internal/UIElement/utils.test.ts index fee80a7d8b..48be59824d 100644 --- a/packages/lib/src/components/utils.test.ts +++ b/packages/lib/src/components/internal/UIElement/utils.test.ts @@ -8,7 +8,7 @@ describe('components utils', () => { test('filters unallowed properties', () => { const rawResponse = { - resultCode: 'Authorised', + resultCode: 'Authorised' as const, someBackendProperty: true, sessionResult: 'XYZ123' }; diff --git a/packages/lib/src/components/utils.ts b/packages/lib/src/components/internal/UIElement/utils.ts similarity index 73% rename from packages/lib/src/components/utils.ts rename to packages/lib/src/components/internal/UIElement/utils.ts index ae837eb1b9..ace5355f64 100644 --- a/packages/lib/src/components/utils.ts +++ b/packages/lib/src/components/internal/UIElement/utils.ts @@ -1,8 +1,9 @@ -import { PaymentResponse, RawPaymentResponse, UIElementStatus } from './types'; +import { UIElementStatus } from './types'; +import { RawPaymentResponse, PaymentResponseData } from '../../../types/global-types'; const ALLOWED_PROPERTIES = ['action', 'resultCode', 'sessionData', 'order', 'sessionResult']; -export function getSanitizedResponse(response: RawPaymentResponse): PaymentResponse { +export function getSanitizedResponse(response: RawPaymentResponse): PaymentResponseData { const removedProperties = []; const sanitizedObject = Object.keys(response).reduce((acc, cur) => { @@ -16,10 +17,10 @@ export function getSanitizedResponse(response: RawPaymentResponse): PaymentRespo if (removedProperties.length) console.warn(`The following properties should not be passed to the client: ${removedProperties.join(', ')}`); - return sanitizedObject as PaymentResponse; + return sanitizedObject as PaymentResponseData; } -export function resolveFinalResult(result: PaymentResponse): [status: UIElementStatus, statusProps?: any] { +export function resolveFinalResult(result: PaymentResponseData): [status: UIElementStatus, statusProps?: any] { switch (result.resultCode) { case 'Authorised': case 'Received': diff --git a/packages/lib/src/components/internal/Voucher/types.ts b/packages/lib/src/components/internal/Voucher/types.ts index 49b0818ee9..b83e8db32f 100644 --- a/packages/lib/src/components/internal/Voucher/types.ts +++ b/packages/lib/src/components/internal/Voucher/types.ts @@ -1,3 +1,5 @@ +import { UIElementProps } from '../UIElement/types'; + export interface VoucherDetail { label: string; value: string; @@ -46,3 +48,9 @@ export interface VoucherProps { /** Show/Hide a button to copy the payment reference. It will only show if a reference is available. */ copyBtn?: boolean; } + +export interface VoucherConfiguration extends UIElementProps { + reference?: string; + url?: string; + paymentMethodType?: string; +} diff --git a/packages/lib/src/components/types.ts b/packages/lib/src/components/types.ts index 065e1bbedc..b4f68a914c 100644 --- a/packages/lib/src/components/types.ts +++ b/packages/lib/src/components/types.ts @@ -1,465 +1,44 @@ -import { ComponentChild, h } from 'preact'; -import { Order, PaymentAction, PaymentAmount, PaymentAmountExtended } from '../types'; -import Language from '../language/Language'; -import UIElement from './UIElement'; -import Analytics from '../core/Analytics'; -import RiskElement from '../core/RiskModule'; -import { PayButtonProps } from './internal/PayButton/PayButton'; -import Session from '../core/CheckoutSession'; -import { SRPanel } from '../core/Errors/SRPanel'; -import { Resources } from '../core/Context/Resources'; - -/** Components */ -import AfterPay from './AfterPay'; -import AfterPayB2B from './AfterPay/AfterPayB2B'; -import AmazonPay from './AmazonPay'; -import ApplePay from './ApplePay'; -import Atome from './Atome'; -import { BillDeskOnline, BillDeskWallet } from './BillDesk'; -import Card from './Card'; -import CashAppPay from './CashAppPay'; -import ClickToPay from './ClickToPay'; -import Bancontact from './Card/Bancontact'; -import Donation from './Donation'; -import Giropay from './Giropay'; -import GooglePay from './GooglePay'; -import Econtext from './Econtext'; -import { FacilyPay3x, FacilyPay4x, FacilyPay6x, FacilyPay10x, FacilyPay12x } from './FacilyPay'; -import Ideal from './Ideal'; -import PayPal from './PayPal'; -import Redirect from './Redirect'; -import CustomCard from './CustomCard'; -import Sepa from './Sepa'; -import WeChat from './WeChat'; -import PayNow from './PayNow'; -import BcmcMobile from './BcmcMobile'; -import { MolPayEBankingMY, MolPayEBankingTH, MolPayEBankingVN } from './MolPayEBanking'; -import Dragonpay from './Dragonpay'; -import Doku from './Doku'; -import Boleto from './Boleto'; -import Oxxo from './Oxxo'; -import Multibanco from './Multibanco'; -import Dotpay from './Dotpay'; -import Eps from './EPS'; -import Giftcard from './Giftcard'; -import Vipps from './Vipps'; -import { PayuCashcard, PayuNetBanking } from './PayU'; -import RatePay from './RatePay'; -import Swish from './Swish'; -import Ach from './Ach'; -import MBWay from './MBWay'; -import Blik from './Blik'; -import BankTransfer from './BankTransfer'; -import Affirm from './Affirm'; -import Pix from './Pix'; -import BacsDD from './BacsDD'; -import Address from './Address'; -import PersonalDetails from './PersonalDetails'; -import Klarna from './Klarna'; -import Twint from './Twint'; -import MealVoucherFR from './MealVoucherFR'; -import OnlineBankingINElement from './OnlineBankingIN'; -import OnlinebankingPL from './OnlinebankingPL'; -import RatePayDirectDebit from './RatePay/RatePayDirectDebit'; -import UPI from './UPI'; -import WalletINElement from './WalletIN'; -import OnlineBankingCZElement from './OnlineBankingCZ'; -import OnlineBankingSKElement from './OnlineBankingSK'; -import PayByBank from './PayByBank'; -import PromptPay from './PromptPay'; -import Duitnow from './DuitNow'; -import Trustly from './Trustly'; -import { TxVariants } from './tx-variants'; -import { PaymentActionsType } from '../types'; -import { CoreOptions, ICore } from '../core/types'; - /** - * Maps each component with a Component element. + * Barrel file which exports the types exposed externally by the library */ -const componentsMap = { - /** internal */ - [TxVariants.address]: Address, - [TxVariants.bankTransfer_IBAN]: BankTransfer, - [TxVariants.donation]: Donation, - [TxVariants.personal_details]: PersonalDetails, - /** internal */ - - /** Card */ - [TxVariants.bcmc]: Bancontact, - [TxVariants.card]: Card, - [TxVariants.scheme]: Card, - [TxVariants.storedCard]: Card, - [TxVariants.customCard]: CustomCard, - /** Card */ - - /** Direct debit */ - [TxVariants.ach]: Ach, - [TxVariants.directdebit_GB]: BacsDD, - [TxVariants.sepadirectdebit]: Sepa, - /** Direct debit */ - - /** Open Invoice */ - [TxVariants.affirm]: Affirm, - [TxVariants.afterpay]: AfterPay, - [TxVariants.afterpay_default]: AfterPay, - [TxVariants.afterpay_b2b]: AfterPayB2B, - [TxVariants.atome]: Atome, - [TxVariants.facilypay_3x]: FacilyPay3x, - [TxVariants.facilypay_4x]: FacilyPay4x, - [TxVariants.facilypay_6x]: FacilyPay6x, - [TxVariants.facilypay_10x]: FacilyPay10x, - [TxVariants.facilypay_12x]: FacilyPay12x, - [TxVariants.ratepay]: RatePay, - [TxVariants.ratepay_directdebit]: RatePayDirectDebit, - /** Open Invoice */ - - /** Wallets */ - [TxVariants.amazonpay]: AmazonPay, - [TxVariants.applepay]: ApplePay, - [TxVariants.cashapp]: CashAppPay, - [TxVariants.clicktopay]: ClickToPay, - [TxVariants.googlepay]: GooglePay, - [TxVariants.paypal]: PayPal, - [TxVariants.paywithgoogle]: GooglePay, - /** Wallets */ - - /** Voucher */ - [TxVariants.boletobancario]: Boleto, - [TxVariants.boletobancario_itau]: Boleto, - [TxVariants.boletobancario_santander]: Boleto, - [TxVariants.doku]: Doku, - [TxVariants.doku_alfamart]: Doku, - [TxVariants.doku_permata_lite_atm]: Doku, - [TxVariants.doku_indomaret]: Doku, - [TxVariants.doku_atm_mandiri_va]: Doku, - [TxVariants.doku_sinarmas_va]: Doku, - [TxVariants.doku_mandiri_va]: Doku, - [TxVariants.doku_cimb_va]: Doku, - [TxVariants.doku_danamon_va]: Doku, - [TxVariants.doku_bri_va]: Doku, - [TxVariants.doku_bni_va]: Doku, - [TxVariants.doku_bca_va]: Doku, - [TxVariants.doku_wallet]: Doku, - [TxVariants.oxxo]: Oxxo, - [TxVariants.primeiropay_boleto]: Boleto, - /** Voucher */ - - /** issuerList */ - [TxVariants.billdesk_online]: BillDeskOnline, - [TxVariants.billdesk_wallet]: BillDeskWallet, - [TxVariants.dotpay]: Dotpay, - [TxVariants.eps]: Eps, - [TxVariants.ideal]: Ideal, - [TxVariants.molpay_ebanking_fpx_MY]: MolPayEBankingMY, - [TxVariants.molpay_ebanking_TH]: MolPayEBankingTH, - [TxVariants.molpay_ebanking_VN]: MolPayEBankingVN, - [TxVariants.onlineBanking_CZ]: OnlineBankingCZElement, - [TxVariants.onlinebanking_IN]: OnlineBankingINElement, // NOTE ]: the txVariant does have a lowercase "b" - [TxVariants.onlineBanking_PL]: OnlinebankingPL, - [TxVariants.onlineBanking_SK]: OnlineBankingSKElement, - [TxVariants.paybybank]: PayByBank, - [TxVariants.payu_IN_cashcard]: PayuCashcard, - [TxVariants.payu_IN_nb]: PayuNetBanking, - [TxVariants.wallet_IN]: WalletINElement, - /** issuerList */ - - /** Dragonpay */ - [TxVariants.dragonpay_ebanking]: Dragonpay, - [TxVariants.dragonpay_otc_banking]: Dragonpay, - [TxVariants.dragonpay_otc_non_banking]: Dragonpay, - [TxVariants.dragonpay_otc_philippines]: Dragonpay, - /** Dragonpay */ - - /** Econtext */ - [TxVariants.econtext_atm]: Econtext, - [TxVariants.econtext_online]: Econtext, - [TxVariants.econtext_seven_eleven]: Econtext, - [TxVariants.econtext_stores]: Econtext, - /** Econtext */ - - /** Redirect */ - [TxVariants.giropay]: Giropay, - [TxVariants.multibanco]: Multibanco, - [TxVariants.redirect]: Redirect, - [TxVariants.twint]: Twint, - [TxVariants.vipps]: Vipps, - [TxVariants.trustly]: Trustly, - /** Redirect */ - - /** Klarna */ - [TxVariants.klarna]: Klarna, - [TxVariants.klarna_account]: Klarna, - [TxVariants.klarna_paynow]: Klarna, - /** Klarna */ - - /** QRLoader */ - [TxVariants.bcmc_mobile]: BcmcMobile, - [TxVariants.bcmc_mobile_QR]: BcmcMobile, - [TxVariants.pix]: Pix, - [TxVariants.swish]: Swish, - [TxVariants.wechatpay]: WeChat, - [TxVariants.wechatpayQR]: WeChat, - [TxVariants.promptpay]: PromptPay, - [TxVariants.paynow]: PayNow, - [TxVariants.duitnow]: Duitnow, - /** QRLoader */ - - /** Await */ - [TxVariants.blik]: Blik, - [TxVariants.mbway]: MBWay, - [TxVariants.upi]: UPI, // also QR - [TxVariants.upi_qr]: UPI, // also QR - [TxVariants.upi_collect]: UPI, // also QR - /** Await */ - - /** Giftcard */ - [TxVariants.giftcard]: Giftcard, - [TxVariants.mealVoucher_FR_natixis]: MealVoucherFR, - [TxVariants.mealVoucher_FR_sodexo]: MealVoucherFR, - [TxVariants.mealVoucher_FR_groupeup]: MealVoucherFR - /** Giftcard */ -}; +export * from './Ach/types'; +export * from './AmazonPay/types'; +export * from './ANCV/types'; +export * from './ApplePay/types'; +export * from './BankTransfer/types'; +export * from './Boleto/types'; +export * from './Card/types'; +export * from './CashAppPay/types'; +export * from './ClickToPay/types'; +export * from './CustomCard/types'; +export * from './Doku/types'; +export * from './Donation/types'; +export * from './Dragonpay/types'; +export * from './Dropin/types'; +export * from './Econtext/types'; +export * from './Giftcard/types'; +export * from './GooglePay/types'; +export * from './Klarna/types'; +export * from './Multibanco/types'; +export * from './Oxxo/types'; +export * from './PayPal/types'; +export * from './Pix/types'; +export * from './Redirect/types'; +export * from './Sepa/types'; +export * from './ThreeDS2/types'; +export * from './UPI/types'; /** - * Available components + * Helpers */ -type PaymentMethods = typeof componentsMap; +export * from './helpers/IssuerListContainer/types'; +export * from './helpers/OpenInvoiceContainer/types'; +export * from './helpers/QRLoaderContainer/types'; /** - * Options for a component + * Internal */ -type PaymentMethodOptions

= InstanceType['props']; - -type PaymentMethodsConfigurationMap = { - [key in keyof PaymentMethods]?: Partial>; -}; - -type PaymentActionTypesMap = { - [key in PaymentActionsType]?: Partial; -}; - -/** - * Type must be loose, otherwise it will take priority over the rest - */ -type NonMappedPaymentMethodsMap = { - [key: string]: any; -}; - -export type PaymentMethodsConfiguration = PaymentMethodsConfigurationMap & PaymentActionTypesMap & NonMappedPaymentMethodsMap; - -export interface PaymentMethodData { - paymentMethod: { - [key: string]: any; - checkoutAttemptId?: string; - }; - browserInfo?: { - acceptHeader: string; - colorDepth: number; - javaEnabled: boolean; - language: string; - screenHeight: number; - screenWidth: number; - timeZoneOffset: number; - userAgent: string; - }; -} - -/** - * Represents the payment data that will be submitted to the /payments endpoint - */ -export interface PaymentData extends PaymentMethodData { - riskData?: { - clientData: string; - }; - order?: { - orderData: string; - pspReference: string; - }; - clientStateDataIndicator: boolean; - sessionData?: string; - storePaymentMethod?: boolean; -} - -export type ResultCode = - | 'AuthenticationFinished' - | 'AuthenticationNotRequired' - | 'Authorised' - | 'Cancelled' - | 'ChallengeShopper' - | 'Error' - | 'IdentifyShopper' - | 'PartiallyAuthorised' - | 'Pending' - | 'PresentToShopper' - | 'Received' - | 'RedirectShopper' - | 'Refused'; - -export interface OnPaymentCompletedData { - sessionData: string; - sessionResult: string; - resultCode: ResultCode; -} - -export interface PaymentResponse { - action?: PaymentAction; - resultCode: string; - sessionData?: string; - sessionResult?: string; - order?: Order; -} - -export interface RawPaymentResponse extends PaymentResponse { - [key: string]: any; -} - -export interface BaseElementProps { - core: ICore; - order?: Order; - modules?: { - srPanel?: SRPanel; - analytics?: Analytics; - resources?: Resources; - risk?: RiskElement; - }; - isDropin?: boolean; -} - -export interface IBaseElement { - data: object; - state: any; - props: any; - _id: string; - _component: any; - render(): ComponentChild | Error; - mount(domNode: HTMLElement | string): IBaseElement; - update(props): IBaseElement; - remount(component): IBaseElement; - unmount(): IBaseElement; - remove(): void; -} - -export interface IUIElement extends IBaseElement { - isValid: boolean; - displayName: string; - accessibleName: string; - type: string; - icon: string; - elementRef: IUIElement; - submit(): void; - setComponentRef(ref): void; - updateParent(options?: CoreOptions): Promise; - setElementStatus(status: UIElementStatus, props: any): UIElement; - setStatus(status: UIElementStatus, props?: { message?: string; [key: string]: any }): UIElement; - handleAction(action: PaymentAction): UIElement | null; - showValidation(): void; - setState(newState: object): void; - isAvailable(): Promise; -} - -export type UIElementStatus = 'ready' | 'loading' | 'error' | 'success'; -export type ActionDescriptionType = 'qr-code-loaded' | 'polling-started' | 'fingerprint-iframe-loaded' | 'challenge-iframe-loaded'; - -export type PayButtonFunctionProps = Omit; - -export interface ActionHandledReturnObject { - componentType: string; - actionDescription: ActionDescriptionType; -} - -export interface UIElementProps extends BaseElementProps { - environment?: string; - session?: Session; - onChange?: (state: any, element: UIElement) => void; - onValid?: (state: any, element: UIElement) => void; - beforeSubmit?: (state: any, element: UIElement, actions: any) => Promise; - onSubmit?: (state: any, element: UIElement) => void; - onComplete?: (state, element: UIElement) => void; - onActionHandled?: (rtnObj: ActionHandledReturnObject) => void; - onAdditionalDetails?: (state: any, element: UIElement) => void; - onError?: (error, element?: UIElement) => void; - onPaymentCompleted?: (result: any, element: UIElement) => void; - beforeRedirect?: (resolve, reject, redirectData, element: UIElement) => void; - - isInstantPayment?: boolean; - - /** - * Flags if the element is Stored payment method - * @internal - */ - isStoredPaymentMethod?: boolean; - - /** - * Flag if the element is Stored payment method. - * Perhaps can be deprecated and we use the one above? - * @internal - */ - oneClick?: boolean; - - /** - * Stored payment method id - * @internal - */ - storedPaymentMethodId?: string; - - /** - * Status set when creating the Component from action - * @internal - */ - statusType?: 'redirect' | 'loading' | 'custom'; - - type?: string; - name?: string; - icon?: string; - amount?: PaymentAmount; - secondaryAmount?: PaymentAmountExtended; - - /** - * Show/Hide pay button - * @defaultValue true - */ - showPayButton?: boolean; - - /** - * Set to false to not set the Component status to 'loading' when onSubmit is triggered. - * @defaultValue true - */ - setStatusAutomatically?: boolean; - - /** @internal */ - payButton?: (options: PayButtonFunctionProps) => h.JSX.Element; - - /** @internal */ - loadingContext?: string; - - /** @internal */ - createFromAction?: (action: PaymentAction, props: object) => UIElement; - - /** @internal */ - clientKey?: string; - - /** @internal */ - elementRef?: any; - - /** @internal */ - i18n?: Language; -} - -export interface AwaitActionElement extends UIElementProps { - paymentData?: string; - paymentMethoType?: string; - type?: string; - url?: string; -} - -export interface VoucherActionElement extends UIElementProps { - reference?: string; - url?: string; - paymentMethodType?: string; -} - -// An interface for the members exposed by a component to its parent UIElement -export interface ComponentMethodsRef { - showValidation?: () => void; - setStatus?(status: UIElementStatus): void; -} +export * from './internal/Await/types'; +export * from './internal/ClickToPay/types'; +export * from './internal/OpenInvoice/types'; +export * from './internal/Voucher/types'; diff --git a/packages/lib/src/AdyenCheckout.ts b/packages/lib/src/core/AdyenCheckout.ts similarity index 51% rename from packages/lib/src/AdyenCheckout.ts rename to packages/lib/src/core/AdyenCheckout.ts index ab278ad0da..8617b0c311 100644 --- a/packages/lib/src/AdyenCheckout.ts +++ b/packages/lib/src/core/AdyenCheckout.ts @@ -1,8 +1,8 @@ -import { CoreOptions } from './core/types'; -import Checkout from './core'; -import UIElement from './components/UIElement'; +import { CoreConfiguration } from './types'; +import Checkout from './index'; +import UIElement from '../components/internal/UIElement'; -async function AdyenCheckout(props: CoreOptions): Promise { +async function AdyenCheckout(props: CoreConfiguration): Promise { const checkout = new Checkout(props); return await checkout.initialize(); } diff --git a/packages/lib/src/core/Analytics/Analytics.ts b/packages/lib/src/core/Analytics/Analytics.ts index 094aa94e2f..ae9249b48d 100644 --- a/packages/lib/src/core/Analytics/Analytics.ts +++ b/packages/lib/src/core/Analytics/Analytics.ts @@ -2,9 +2,9 @@ import logEvent from '../Services/analytics/log-event'; import postTelemetry from '../Services/analytics/post-telemetry'; import collectId from '../Services/analytics/collect-id'; import EventsQueue from './EventsQueue'; -import { CoreOptions } from '../types'; +import { CoreConfiguration } from '../types'; -export type AnalyticsProps = Pick; +export type AnalyticsProps = Pick; class Analytics { private static defaultProps = { diff --git a/packages/lib/src/core/CheckoutSession/CheckoutSession.ts b/packages/lib/src/core/CheckoutSession/CheckoutSession.ts index 68e41c74f0..6cc17a4b0c 100644 --- a/packages/lib/src/core/CheckoutSession/CheckoutSession.ts +++ b/packages/lib/src/core/CheckoutSession/CheckoutSession.ts @@ -13,7 +13,7 @@ import { CheckoutSessionPaymentResponse, CheckoutSessionSetupResponse, SessionConfiguration -} from '../../types'; +} from './types'; import cancelOrder from '../Services/sessions/cancel-order'; import { onOrderCancelData } from '../../components/Dropin/types'; diff --git a/packages/lib/src/core/CheckoutSession/types.ts b/packages/lib/src/core/CheckoutSession/types.ts new file mode 100644 index 0000000000..592327e534 --- /dev/null +++ b/packages/lib/src/core/CheckoutSession/types.ts @@ -0,0 +1,58 @@ +import { InstallmentOptions } from '../../components/Card/components/CardInput/components/types'; +import { PaymentAction, PaymentAmount, ResultCode } from '../../types/global-types'; + +export type CheckoutSession = { + id: string; + sessionData: string; + shopperLocale?: string; + shopperEmail?: string; + telephoneNumber?: string; +}; + +export type SessionConfiguration = { + installmentOptions?: InstallmentOptions; + enableStoreDetails?: boolean; +}; + +export type CheckoutSessionSetupResponse = { + id: string; + sessionData: string; + + amount: PaymentAmount; + expiresAt: string; + paymentMethods: any; + returnUrl: string; + configuration: SessionConfiguration; + /** + * 'shopperLocale' set during session creation. + * @defaultValue en-US + */ + shopperLocale: string; +}; + +export type CheckoutSessionPaymentResponse = { + sessionData: string; + status?: string; + resultCode: ResultCode; + action?: PaymentAction; +}; + +export type CheckoutSessionDetailsResponse = { + sessionData: string; + sessionResult: string; + resultCode: ResultCode; + status?: string; + action?: PaymentAction; +}; + +export type CheckoutSessionBalanceResponse = { + sessionData: string; + balance?: PaymentAmount; + transactionLimit?: PaymentAmount; +}; + +export type CheckoutSessionOrdersResponse = { + sessionData: string; + orderData: string; + pspReference: string; +}; diff --git a/packages/lib/src/core/CheckoutSession/utils.ts b/packages/lib/src/core/CheckoutSession/utils.ts index 7be87c039f..b4aa607f0c 100644 --- a/packages/lib/src/core/CheckoutSession/utils.ts +++ b/packages/lib/src/core/CheckoutSession/utils.ts @@ -1,4 +1,4 @@ -import { CheckoutSession } from '../../types'; +import { CheckoutSession } from './types'; import AdyenCheckoutError from '../Errors/AdyenCheckoutError'; export function sanitizeSession(session): Partial { diff --git a/packages/lib/src/core/Errors/SRPanel.tsx b/packages/lib/src/core/Errors/SRPanel.tsx index babe76c763..6ad2dc3594 100644 --- a/packages/lib/src/core/Errors/SRPanel.tsx +++ b/packages/lib/src/core/Errors/SRPanel.tsx @@ -1,7 +1,7 @@ import { h } from 'preact'; import './SRPanel.scss'; import { AriaAttributes, SRPanelProps } from './types'; -import BaseElement from '../../components/BaseElement'; +import BaseElement from '../../components/internal/BaseElement/BaseElement'; import { SRMessages, SRMessagesRef } from './SRMessages'; /** diff --git a/packages/lib/src/core/ProcessResponse/PaymentAction/PaymentAction.ts b/packages/lib/src/core/ProcessResponse/PaymentAction/PaymentAction.ts index ac8fd6e586..99d13e892a 100644 --- a/packages/lib/src/core/ProcessResponse/PaymentAction/PaymentAction.ts +++ b/packages/lib/src/core/ProcessResponse/PaymentAction/PaymentAction.ts @@ -1,5 +1,5 @@ import actionTypes from './actionTypes'; -import { PaymentAction } from '../../../types'; +import { PaymentAction } from '../../../types/global-types'; import type { IRegistry } from '../../core.registry'; import { ICore } from '../../types'; diff --git a/packages/lib/src/core/ProcessResponse/PaymentAction/actionTypes.ts b/packages/lib/src/core/ProcessResponse/PaymentAction/actionTypes.ts index edc1bb75c5..2b24dc8ec1 100644 --- a/packages/lib/src/core/ProcessResponse/PaymentAction/actionTypes.ts +++ b/packages/lib/src/core/ProcessResponse/PaymentAction/actionTypes.ts @@ -1,4 +1,4 @@ -import { PaymentAction } from '../../../types'; +import { PaymentAction } from '../../../types/global-types'; import { get3DS2FlowProps } from '../../../components/ThreeDS2/components/utils'; import uuid from '../../../utils/uuid'; import type { IRegistry } from '../../core.registry'; diff --git a/packages/lib/src/core/ProcessResponse/PaymentMethods/PaymentMethods.ts b/packages/lib/src/core/ProcessResponse/PaymentMethods/PaymentMethods.ts index 150a1773d8..3e77e70111 100644 --- a/packages/lib/src/core/ProcessResponse/PaymentMethods/PaymentMethods.ts +++ b/packages/lib/src/core/ProcessResponse/PaymentMethods/PaymentMethods.ts @@ -1,4 +1,4 @@ -import { PaymentMethod, PaymentMethodsResponse, StoredPaymentMethod } from '../../../types'; +import { PaymentMethod, PaymentMethodsResponse, StoredPaymentMethod } from '../../../types/global-types'; import { checkPaymentMethodsResponse, processPaymentMethods, processStoredPaymentMethods } from './utils'; class PaymentMethods { diff --git a/packages/lib/src/core/ProcessResponse/PaymentMethods/utils.ts b/packages/lib/src/core/ProcessResponse/PaymentMethods/utils.ts index a1cd9f1e69..c1a170fbbe 100644 --- a/packages/lib/src/core/ProcessResponse/PaymentMethods/utils.ts +++ b/packages/lib/src/core/ProcessResponse/PaymentMethods/utils.ts @@ -1,4 +1,4 @@ -import { PaymentMethod, PaymentMethodsResponse, StoredPaymentMethod } from '../../../types'; +import { PaymentMethod, PaymentMethodsResponse, StoredPaymentMethod } from '../../../types/global-types'; import { filterAllowedPaymentMethods, filterEcomStoredPaymentMethods, diff --git a/packages/lib/src/core/ProcessResponse/process-response.test.ts b/packages/lib/src/core/ProcessResponse/process-response.test.ts index 6ba0a1e617..8fce528b0c 100644 --- a/packages/lib/src/core/ProcessResponse/process-response.test.ts +++ b/packages/lib/src/core/ProcessResponse/process-response.test.ts @@ -2,32 +2,35 @@ import { processResponse } from './process-response'; describe('processResponse', () => { test('processes a complete response', () => { - const response = { type: 'complete', resultCode: 'Authorised' }; + const response = { type: 'complete', resultCode: 'Authorised' as const }; expect(processResponse(response)).toHaveProperty('type', 'success'); }); test('processes a validation response', () => { const response = { type: 'validation', resultCode: '' }; + // @ts-ignore Testing when resultCode is empty expect(processResponse(response)).toHaveProperty('type', 'error'); }); test('processes an unknown response', () => { const response = { type: '?', resultCode: '' }; + // @ts-ignore Testing when resultCode is empty expect(processResponse(response)).toHaveProperty('type', 'error'); }); test('processes a pending response', () => { - const response = { type: 'complete', resultCode: 'pending' }; + const response = { type: 'complete', resultCode: 'Pending' as const }; expect(processResponse(response)).toHaveProperty('type', 'pending'); }); test('processes a pending response', () => { const response = { type: 'pending', resultCode: '' }; + // @ts-ignore Testing when resultCode is empty expect(processResponse(response)).toHaveProperty('type', 'pending'); }); test('processes a received response', () => { - const response = { type: 'complete', resultCode: 'received' }; + const response = { type: 'complete', resultCode: 'Received' as const }; expect(processResponse(response)).toHaveProperty('type', 'received'); }); }); diff --git a/packages/lib/src/core/ProcessResponse/process-response.ts b/packages/lib/src/core/ProcessResponse/process-response.ts index 8ba4a55d52..e2ad3af80b 100644 --- a/packages/lib/src/core/ProcessResponse/process-response.ts +++ b/packages/lib/src/core/ProcessResponse/process-response.ts @@ -1,11 +1,11 @@ -import { PaymentResponse, ProcessedResponse } from '../../types'; +import { PaymentResponseData, ProcessedResponse } from '../../types/global-types'; /** * Processes a complete response from Adyen by resultCode * @param response - to be processed * @returns a new object describing the response result (ready for onStatusChange) */ -const processCompleteResponse = (response: PaymentResponse): ProcessedResponse => { +const processCompleteResponse = (response: PaymentResponseData): ProcessedResponse => { switch (response.resultCode.toLowerCase()) { case 'refused': case 'error': @@ -28,7 +28,7 @@ const processCompleteResponse = (response: PaymentResponse): ProcessedResponse = * @param response - to be processed * @returns a new object describing the response result (ready for onStatusChange) */ -export const processResponse = (response: PaymentResponse): ProcessedResponse => { +export const processResponse = (response: PaymentResponseData): ProcessedResponse => { if (!response.type && response.resultCode) { return processCompleteResponse(response); } diff --git a/packages/lib/src/core/RiskModule/RiskModule.tsx b/packages/lib/src/core/RiskModule/RiskModule.tsx index aa3a878a78..f9e753f6a0 100644 --- a/packages/lib/src/core/RiskModule/RiskModule.tsx +++ b/packages/lib/src/core/RiskModule/RiskModule.tsx @@ -1,9 +1,9 @@ import { h } from 'preact'; -import BaseElement from '../../components/BaseElement'; -import { BaseElementProps } from '../../components/types'; +import BaseElement from '../../components/internal/BaseElement/BaseElement'; import DeviceFingerprint from './components/DeviceFingerprint'; import base64 from '../../utils/base64'; import { RISK_DATA_VERSION, DEVICE_FINGERPRINT } from './constants'; +import { BaseElementProps } from '../../components/internal/BaseElement/types'; export interface RiskModuleOptions { enabled: boolean; diff --git a/packages/lib/src/core/Services/analytics/post-telemetry.ts b/packages/lib/src/core/Services/analytics/post-telemetry.ts index ccd3a3a0d2..a46a54e42d 100644 --- a/packages/lib/src/core/Services/analytics/post-telemetry.ts +++ b/packages/lib/src/core/Services/analytics/post-telemetry.ts @@ -1,5 +1,5 @@ import { httpPost } from '../http'; -import { PaymentAmount } from '../../../types'; +import { PaymentAmount } from '../../../types/global-types'; type LogTelemetryConfig = { loadingContext: string; diff --git a/packages/lib/src/core/Services/order-status.ts b/packages/lib/src/core/Services/order-status.ts index 6bf52bc977..2f3e2a7669 100644 --- a/packages/lib/src/core/Services/order-status.ts +++ b/packages/lib/src/core/Services/order-status.ts @@ -1,5 +1,5 @@ import { httpPost } from './http'; -import { OrderStatus } from '../../types'; +import { OrderStatus } from '../../types/global-types'; /** */ diff --git a/packages/lib/src/core/Services/sessions/cancel-order.ts b/packages/lib/src/core/Services/sessions/cancel-order.ts index 0672104062..9307c97b53 100644 --- a/packages/lib/src/core/Services/sessions/cancel-order.ts +++ b/packages/lib/src/core/Services/sessions/cancel-order.ts @@ -1,7 +1,8 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionOrdersResponse, Order } from '../../../types'; +import { CheckoutSessionOrdersResponse } from '../../CheckoutSession/types'; import { API_VERSION } from './constants'; +import { Order } from '../../../types/global-types'; /** */ diff --git a/packages/lib/src/core/Services/sessions/check-balance.ts b/packages/lib/src/core/Services/sessions/check-balance.ts index 40a87065bc..a3b0510490 100644 --- a/packages/lib/src/core/Services/sessions/check-balance.ts +++ b/packages/lib/src/core/Services/sessions/check-balance.ts @@ -1,6 +1,6 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionBalanceResponse } from '../../../types'; +import { CheckoutSessionBalanceResponse } from '../../CheckoutSession/types'; import { API_VERSION } from './constants'; /** diff --git a/packages/lib/src/core/Services/sessions/create-order.ts b/packages/lib/src/core/Services/sessions/create-order.ts index aee176f7e2..9c8171c1ed 100644 --- a/packages/lib/src/core/Services/sessions/create-order.ts +++ b/packages/lib/src/core/Services/sessions/create-order.ts @@ -1,6 +1,6 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionOrdersResponse } from '../../../types'; +import { CheckoutSessionOrdersResponse } from '../../CheckoutSession/types'; import { API_VERSION } from './constants'; /** diff --git a/packages/lib/src/core/Services/sessions/make-payment.ts b/packages/lib/src/core/Services/sessions/make-payment.ts index c51b6cdae9..827a6435e4 100644 --- a/packages/lib/src/core/Services/sessions/make-payment.ts +++ b/packages/lib/src/core/Services/sessions/make-payment.ts @@ -1,6 +1,6 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionPaymentResponse } from '../../../types'; +import { CheckoutSessionPaymentResponse } from '../../CheckoutSession/types'; import { API_VERSION } from './constants'; /** diff --git a/packages/lib/src/core/Services/sessions/setup-session.ts b/packages/lib/src/core/Services/sessions/setup-session.ts index 10b8f5069e..546a2bd6aa 100644 --- a/packages/lib/src/core/Services/sessions/setup-session.ts +++ b/packages/lib/src/core/Services/sessions/setup-session.ts @@ -1,6 +1,6 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionSetupResponse } from '../../../types'; +import { CheckoutSessionSetupResponse } from '../../CheckoutSession/types'; import { API_VERSION } from './constants'; /** diff --git a/packages/lib/src/core/Services/sessions/submit-details.ts b/packages/lib/src/core/Services/sessions/submit-details.ts index 48cec4b022..f497d19bbd 100644 --- a/packages/lib/src/core/Services/sessions/submit-details.ts +++ b/packages/lib/src/core/Services/sessions/submit-details.ts @@ -1,7 +1,7 @@ import { httpPost } from '../http'; import Session from '../../CheckoutSession'; -import { CheckoutSessionDetailsResponse } from '../../../types'; import { API_VERSION } from './constants'; +import { CheckoutSessionDetailsResponse } from '../../CheckoutSession/types'; /** */ diff --git a/packages/lib/src/core/core.component.props.test.ts b/packages/lib/src/core/core.component.props.test.ts index b65de5fafb..c4c4c73be8 100644 --- a/packages/lib/src/core/core.component.props.test.ts +++ b/packages/lib/src/core/core.component.props.test.ts @@ -2,7 +2,7 @@ import { mount } from 'enzyme'; import AdyenCheckout from './core'; import { PaymentMethodsResponse } from '../types'; import { PayPal, Card, Dropin, Redirect } from '../components'; -import { CoreOptions } from './types'; +import { CoreConfiguration } from './types'; const paymentMethodsResponse: PaymentMethodsResponse = { paymentMethods: [ @@ -38,7 +38,7 @@ const paymentMethodsResponse: PaymentMethodsResponse = { ] }; -const coreOptions: CoreOptions = { +const coreOptions: CoreConfiguration = { amount: { currency: 'USD', value: 19000 diff --git a/packages/lib/src/core/core.registry.ts b/packages/lib/src/core/core.registry.ts index 20bb5fca46..aa060fedaa 100644 --- a/packages/lib/src/core/core.registry.ts +++ b/packages/lib/src/core/core.registry.ts @@ -1,4 +1,4 @@ -import UIElement from '../components/UIElement'; +import UIElement from '../components/internal/UIElement/UIElement'; import ThreeDS2Challenge from '../components/ThreeDS2/ThreeDS2Challenge'; import ThreeDS2DeviceFingerprint from '../components/ThreeDS2/ThreeDS2DeviceFingerprint'; import Redirect from '../components/Redirect'; diff --git a/packages/lib/src/core/core.test.ts b/packages/lib/src/core/core.test.ts index 63c5a911dc..9cfe719287 100644 --- a/packages/lib/src/core/core.test.ts +++ b/packages/lib/src/core/core.test.ts @@ -2,9 +2,9 @@ import { mount } from 'enzyme'; import AdyenCheckout from './core'; import BCMCMobileElement from '../components/BcmcMobile'; import Session from './CheckoutSession'; -import { CheckoutSessionSetupResponse } from '../types'; import { Dropin, Ideal } from '../components'; import { es_ES } from '../language/locales'; +import { CheckoutSessionSetupResponse } from './CheckoutSession/types'; jest.spyOn(Session.prototype, 'setupSession').mockImplementation(() => { const sessionSetupResponseMock: CheckoutSessionSetupResponse = { diff --git a/packages/lib/src/core/core.ts b/packages/lib/src/core/core.ts index 617324370f..8e43602d02 100644 --- a/packages/lib/src/core/core.ts +++ b/packages/lib/src/core/core.ts @@ -1,12 +1,12 @@ import Language from '../language'; -import UIElement from '../components/UIElement'; +import UIElement from '../components/internal/UIElement/UIElement'; import RiskModule from './RiskModule'; import PaymentMethods from './ProcessResponse/PaymentMethods'; import getComponentForAction from './ProcessResponse/PaymentAction'; import { resolveEnvironment, resolveCDNEnvironment } from './Environment'; import Analytics from './Analytics'; -import { PaymentAction } from '../types'; -import { CoreOptions, ICore } from './types'; +import { PaymentAction } from '../types/global-types'; +import { CoreConfiguration, ICore } from './types'; import { processGlobalOptions } from './utils'; import Session from './CheckoutSession'; import { hasOwnProperty } from '../utils/hasOwnProperty'; @@ -19,7 +19,7 @@ class Core implements ICore { public session?: Session; public paymentMethodsResponse: PaymentMethods; public modules: any; - public options: CoreOptions; + public options: CoreConfiguration; public loadingContext?: string; public cdnContext?: string; @@ -51,7 +51,7 @@ class Core implements ICore { return registry.getComponent(txVariant); } - constructor(props: CoreOptions) { + constructor(props: CoreConfiguration) { this.createFromAction = this.createFromAction.bind(this); this.setOptions(props); @@ -156,7 +156,7 @@ class Core implements ICore { * @param options - props to update * @returns this - the element instance */ - public update = (options: CoreOptions = {}): Promise => { + public update = (options: CoreConfiguration = {}): Promise => { this.setOptions(options); return this.initialize().then(() => { @@ -183,7 +183,7 @@ class Core implements ICore { * @internal * Create or update the config object passed when AdyenCheckout is initialised (environment, clientKey, etc...) */ - private setOptions = (options: CoreOptions): void => { + private setOptions = (options: CoreConfiguration): void => { if (hasOwnProperty(options, 'paymentMethodsConfiguration')) { console.warn('WARNING: "paymentMethodsConfiguration" is supported only by Drop-in.'); } diff --git a/packages/lib/src/core/types.ts b/packages/lib/src/core/types.ts index f8e402f3ae..c50b13937c 100644 --- a/packages/lib/src/core/types.ts +++ b/packages/lib/src/core/types.ts @@ -1,9 +1,16 @@ import { CustomTranslations, Translation } from '../language/types'; -import { PaymentAmountExtended, Order, PaymentAction, PaymentMethodsResponse } from '../types'; +import { + PaymentAmountExtended, + Order, + PaymentAction, + PaymentMethodsResponse, + ActionHandledReturnObject, + OnPaymentCompletedData, + PaymentData +} from '../types/global-types'; import { AnalyticsOptions } from './Analytics/types'; import { RiskModuleOptions } from './RiskModule/RiskModule'; -import { ActionHandledReturnObject, OnPaymentCompletedData, PaymentData } from '../components/types'; -import UIElement from '../components/UIElement'; +import UIElement from '../components/internal/UIElement/UIElement'; import AdyenCheckoutError from './Errors/AdyenCheckoutError'; import { GiftCardElementData } from '../components/Giftcard/types'; import { SRPanelConfig } from './Errors/types'; @@ -25,12 +32,12 @@ export interface ICore { getComponent(txVariant: string): NewableComponent | undefined; createFromAction(action: PaymentAction, options: any): any; storeElementReference(element: UIElement): void; - options: CoreOptions; + options: CoreConfiguration; paymentMethodsResponse: PaymentMethods; session?: Session; } -export interface CoreOptions { +export interface CoreConfiguration { session?: any; /** * Use test. When you're ready to accept live payments, change the value to one of our {@link https://docs.adyen.com/checkout/drop-in-web#testing-your-integration | live environments}. diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 45a070cb71..d529f44373 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -3,4 +3,4 @@ import * as components from './components'; export { components }; export * from './components'; export * from './language/locales'; -export * from './AdyenCheckout'; +export * from './core/AdyenCheckout'; diff --git a/packages/lib/src/index.umd.ts b/packages/lib/src/index.umd.ts index 1802f94a52..f0f9e198bf 100644 --- a/packages/lib/src/index.umd.ts +++ b/packages/lib/src/index.umd.ts @@ -1,4 +1,4 @@ -import { AdyenCheckout } from './AdyenCheckout'; +import { AdyenCheckout } from './core/AdyenCheckout'; import { NewableComponent } from './core/core.registry'; import * as components from './components'; import * as locales from './language/locales'; diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts new file mode 100644 index 0000000000..0ecc823c48 --- /dev/null +++ b/packages/lib/src/types.ts @@ -0,0 +1,4 @@ +export * from './index'; +export * from './components/types'; +export * from './core/types'; +export * from './types/global-types'; diff --git a/packages/lib/src/types/index.ts b/packages/lib/src/types/global-types.ts similarity index 80% rename from packages/lib/src/types/index.ts rename to packages/lib/src/types/global-types.ts index c52a7ef028..1e9aaa5077 100644 --- a/packages/lib/src/types/index.ts +++ b/packages/lib/src/types/global-types.ts @@ -1,7 +1,5 @@ import { ADDRESS_SCHEMA } from '../components/internal/Address/constants'; import actionTypes from '../core/ProcessResponse/PaymentAction/actionTypes'; -import { InstallmentOptions } from '../components/Card/components/CardInput/components/types'; -import { ResultCode } from '../components/types'; export type PaymentActionsType = keyof typeof actionTypes; @@ -185,12 +183,6 @@ export interface PaymentMethodGroup { type: string; } -export interface PaymentResponse { - type: string; - resultCode: string; - url?: string; -} - export interface ProcessedResponse { type: string; props?: object; @@ -289,58 +281,76 @@ export interface BrowserInfo { */ export type FieldsetVisibility = 'editable' | 'hidden' | 'readOnly'; -export type CheckoutSession = { - id: string; - sessionData: string; - shopperLocale?: string; - shopperEmail?: string; - telephoneNumber?: string; -}; - -export type SessionConfiguration = { - installmentOptions?: InstallmentOptions; - enableStoreDetails?: boolean; -}; - -export type CheckoutSessionSetupResponse = { - id: string; - sessionData: string; - - amount: PaymentAmount; - expiresAt: string; - paymentMethods: any; - returnUrl: string; - configuration: SessionConfiguration; - /** - * 'shopperLocale' set during session creation. - * @defaultValue en-US - */ - shopperLocale: string; -}; +export interface PaymentMethodData { + paymentMethod: { + [key: string]: any; + checkoutAttemptId?: string; + }; + browserInfo?: { + acceptHeader: string; + colorDepth: number; + javaEnabled: boolean; + language: string; + screenHeight: number; + screenWidth: number; + timeZoneOffset: number; + userAgent: string; + }; +} -export type CheckoutSessionPaymentResponse = { - sessionData: string; - status?: string; - resultCode: string; - action?: PaymentAction; -}; +/** + * Represents the payment data that will be submitted to the /payments endpoint + */ +export interface PaymentData extends PaymentMethodData { + riskData?: { + clientData: string; + }; + order?: { + orderData: string; + pspReference: string; + }; + clientStateDataIndicator: boolean; + sessionData?: string; + storePaymentMethod?: boolean; +} -export type CheckoutSessionDetailsResponse = { +export type ResultCode = + | 'AuthenticationFinished' + | 'AuthenticationNotRequired' + | 'Authorised' + | 'Cancelled' + | 'ChallengeShopper' + | 'Error' + | 'IdentifyShopper' + | 'PartiallyAuthorised' + | 'Pending' + | 'PresentToShopper' + | 'Received' + | 'RedirectShopper' + | 'Refused'; + +export interface OnPaymentCompletedData { sessionData: string; sessionResult: string; resultCode: ResultCode; - status?: string; +} + +export interface PaymentResponseData { + type?: string; action?: PaymentAction; -}; + resultCode: ResultCode; + sessionData?: string; + sessionResult?: string; + order?: Order; +} -export type CheckoutSessionBalanceResponse = { - sessionData: string; - balance?: PaymentAmount; - transactionLimit?: PaymentAmount; -}; +export interface RawPaymentResponse extends PaymentResponseData { + [key: string]: any; +} -export type CheckoutSessionOrdersResponse = { - sessionData: string; - orderData: string; - pspReference: string; -}; +export type ActionDescriptionType = 'qr-code-loaded' | 'polling-started' | 'fingerprint-iframe-loaded' | 'challenge-iframe-loaded'; + +export interface ActionHandledReturnObject { + componentType: string; + actionDescription: ActionDescriptionType; +} diff --git a/packages/lib/src/utils/browserInfo.ts b/packages/lib/src/utils/browserInfo.ts index 252bfe2ad8..1dc8c46681 100644 --- a/packages/lib/src/utils/browserInfo.ts +++ b/packages/lib/src/utils/browserInfo.ts @@ -1,5 +1,5 @@ import getProp from './getProp'; -import { BrowserInfo } from '../types'; +import { BrowserInfo } from '../types/global-types'; /** * Collects available frontend browser info and store it in the properties dictated by the EMVCo spec diff --git a/packages/lib/storybook/helpers/checkout-handlers.ts b/packages/lib/storybook/helpers/checkout-handlers.ts index bfec8c0bab..fa99b2780e 100644 --- a/packages/lib/storybook/helpers/checkout-handlers.ts +++ b/packages/lib/storybook/helpers/checkout-handlers.ts @@ -1,5 +1,5 @@ import { makePayment, makeDetailsCall, getPaymentMethods } from './checkout-api-calls'; -import UIElement from '../../src/components/UIElement'; +import UIElement from '../../src/components/internal/UIElement/UIElement'; import Core from '../../src/core'; function displayResultMessage(isAuthorized: boolean, resultCode: string): void { diff --git a/packages/lib/storybook/stories/cards/Bancontact.stories.tsx b/packages/lib/storybook/stories/cards/Bancontact.stories.tsx index c13b65c9d0..51475f7494 100644 --- a/packages/lib/storybook/stories/cards/Bancontact.stories.tsx +++ b/packages/lib/storybook/stories/cards/Bancontact.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { CardElementProps } from '../../../src/components/Card/types'; +import { CardConfiguration } from '../../../src/components/Card/types'; import { Bancontact } from '../../../src'; import { Container } from '../Container'; -type BancontactStory = StoryConfiguration; +type BancontactStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Cards/Bancontact' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const bancontact = new Bancontact({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/cards/Card.stories.tsx b/packages/lib/storybook/stories/cards/Card.stories.tsx index d03a1d3992..78e6060738 100644 --- a/packages/lib/storybook/stories/cards/Card.stories.tsx +++ b/packages/lib/storybook/stories/cards/Card.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { CardElementProps } from '../../../src/components/Card/types'; +import { CardConfiguration } from '../../../src/components/Card/types'; import { Card } from '../../../src'; import { Container } from '../Container'; -type CardStory = StoryConfiguration; +type CardStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Cards/Card' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const card = new Card({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/components/ANCV.stories.tsx b/packages/lib/storybook/stories/components/ANCV.stories.tsx index 84fc8b23f7..db0f800934 100644 --- a/packages/lib/storybook/stories/components/ANCV.stories.tsx +++ b/packages/lib/storybook/stories/components/ANCV.stories.tsx @@ -2,12 +2,12 @@ import { Meta, StoryObj } from '@storybook/preact'; import { PaymentMethodStoryProps } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { ANCVProps } from '../../../src/components/ANCV/ANCV'; +import { ANCVConfiguration } from '../../../src/components/ANCV/types'; import { ANCV } from '../../../src'; -type ANCVStory = StoryObj>; +type ANCVStory = StoryObj>; -const meta: Meta> = { +const meta: Meta> = { title: 'Components/ANCV' }; diff --git a/packages/lib/storybook/stories/components/Klarna.stories.tsx b/packages/lib/storybook/stories/components/Klarna.stories.tsx index f227546ce6..a190adc007 100644 --- a/packages/lib/storybook/stories/components/Klarna.stories.tsx +++ b/packages/lib/storybook/stories/components/Klarna.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { KlarnaPaymentsProps } from '../../../src/components/Klarna/types'; +import { KlarnConfiguration } from '../../../src/components/Klarna/types'; import { Klarna } from '../../../src'; -type KlarnaStory = StoryConfiguration; +type KlarnaStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Components/Klarna' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const klarna = new Klarna({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/components/Pix.stories.tsx b/packages/lib/storybook/stories/components/Pix.stories.tsx index 5fb80e32ad..0e0d48377e 100644 --- a/packages/lib/storybook/stories/components/Pix.stories.tsx +++ b/packages/lib/storybook/stories/components/Pix.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { PixProps } from '../../../src/components/Pix/types'; +import { PixConfiguration } from '../../../src/components/Pix/types'; import { Container } from '../Container'; import { Pix } from '../../../src'; -type PixStory = StoryConfiguration; +type PixStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Components/Pix' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const pix = new Pix({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/components/UPI.stories.tsx b/packages/lib/storybook/stories/components/UPI.stories.tsx index d00531cf17..bb02f69c8c 100644 --- a/packages/lib/storybook/stories/components/UPI.stories.tsx +++ b/packages/lib/storybook/stories/components/UPI.stories.tsx @@ -1,17 +1,17 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { UPIElementProps } from '../../../src/components/UPI/types'; +import { UPIConfiguration } from '../../../src/components/UPI/types'; import { Container } from '../Container'; import { UPI } from '../../../src'; -type UpiStory = StoryConfiguration; +type UpiStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Components/UPI' }; export const Default: UpiStory = { - render: (args: PaymentMethodStoryProps, context) => { + render: (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const upi = new UPI({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/dropin/Dropin.stories.tsx b/packages/lib/storybook/stories/dropin/Dropin.stories.tsx index 82ff6760fb..87bd04af02 100644 --- a/packages/lib/storybook/stories/dropin/Dropin.stories.tsx +++ b/packages/lib/storybook/stories/dropin/Dropin.stories.tsx @@ -1,12 +1,12 @@ import { Dropin as DropinComponent, AdyenCheckout, components } from '../../../src'; import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { Container } from '../Container'; -import { DropinElementProps } from '../../../src/components/Dropin/types'; +import { DropinConfiguration } from '../../../src/components/Dropin/types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -type DropinStory = StoryConfiguration; +type DropinStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Dropin/Default', argTypes: { componentConfiguration: { @@ -26,7 +26,7 @@ const meta: MetaConfiguration = { }; export const Auto: DropinStory = { - render: (args: PaymentMethodStoryProps, context) => { + render: (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; // Register all Components diff --git a/packages/lib/storybook/stories/issuer-lists/Dotpay.stories.tsx b/packages/lib/storybook/stories/issuer-lists/Dotpay.stories.tsx index 5ccb8729f6..c3b69b81c5 100644 --- a/packages/lib/storybook/stories/issuer-lists/Dotpay.stories.tsx +++ b/packages/lib/storybook/stories/issuer-lists/Dotpay.stories.tsx @@ -1,17 +1,17 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { IssuerListContainerProps } from '../../../src/components/helpers/IssuerListContainer'; +import { IssuerListConfiguration } from '../../../src/components/helpers/IssuerListContainer/types'; import { Dotpay } from '../../../src'; -type DotpayStory = StoryConfiguration; +type DotpayStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'IssuerList/Dotpay' }; export const Default: DotpayStory = { - render: (args: PaymentMethodStoryProps, context) => { + render: (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const dotpay = new Dotpay({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/issuer-lists/Ideal.stories.tsx b/packages/lib/storybook/stories/issuer-lists/Ideal.stories.tsx index 39e765da1f..5f757ddfef 100644 --- a/packages/lib/storybook/stories/issuer-lists/Ideal.stories.tsx +++ b/packages/lib/storybook/stories/issuer-lists/Ideal.stories.tsx @@ -1,12 +1,12 @@ import { MetaConfiguration, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { IssuerListContainerProps } from '../../../src/components/helpers/IssuerListContainer'; +import { IssuerListConfiguration } from '../../../src/components/helpers/IssuerListContainer/types'; import { Ideal } from '../../../src'; -type IdealStory = StoryConfiguration; +type IdealStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'IssuerList/IDEAL' }; diff --git a/packages/lib/storybook/stories/vouchers/Oxxo.stories.tsx b/packages/lib/storybook/stories/vouchers/Oxxo.stories.tsx index d87dabb877..241e1360bb 100644 --- a/packages/lib/storybook/stories/vouchers/Oxxo.stories.tsx +++ b/packages/lib/storybook/stories/vouchers/Oxxo.stories.tsx @@ -1,17 +1,17 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { VoucherActionElement } from '../../../src/components/types'; +import { VoucherConfiguration } from '../../../src/components/types'; import { Container } from '../Container'; import { Oxxo } from '../../../src'; -type OxxoStory = StoryConfiguration; +type OxxoStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Vouchers/Oxxo' }; export const Default: OxxoStory = { - render: (args: PaymentMethodStoryProps, context) => { + render: (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const oxxo = new Oxxo({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/wallets/ApplePay.stories.tsx b/packages/lib/storybook/stories/wallets/ApplePay.stories.tsx index fb337f2502..4e0f419654 100644 --- a/packages/lib/storybook/stories/wallets/ApplePay.stories.tsx +++ b/packages/lib/storybook/stories/wallets/ApplePay.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { ApplePayElementProps } from '../../../src/components/ApplePay/types'; +import { ApplePayConfiguration } from '../../../src/components/ApplePay/types'; import { ApplePay } from '../../../src'; -type ApplePayStory = StoryConfiguration; +type ApplePayStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Wallets/ApplePay' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const applepay = new ApplePay({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/wallets/ApplePayExpress.stories.tsx b/packages/lib/storybook/stories/wallets/ApplePayExpress.stories.tsx index e1a83d5419..0c13445d89 100644 --- a/packages/lib/storybook/stories/wallets/ApplePayExpress.stories.tsx +++ b/packages/lib/storybook/stories/wallets/ApplePayExpress.stories.tsx @@ -1,18 +1,18 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { ApplePayElementProps } from '../../../src/components/ApplePay/types'; +import { ApplePayConfiguration } from '../../../src/components/ApplePay/types'; import { handleSubmit } from '../../helpers/checkout-handlers'; import getCurrency from '../../utils/get-currency'; import { ApplePay } from '../../../src'; -type ApplePayStory = StoryConfiguration; +type ApplePayStory = StoryConfiguration; const COUNTRY_CODE = 'US'; const SHOPPER_LOCALE = 'en-US'; const INITIAL_AMOUNT = 10000; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Wallets/ApplePay' }; @@ -114,7 +114,7 @@ const createApplePayAmountHelper = () => { }; const ApplePayAmountHelper = createApplePayAmountHelper(); -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const applepay = new ApplePay({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/wallets/GooglePay.stories.tsx b/packages/lib/storybook/stories/wallets/GooglePay.stories.tsx index 7dd54e2932..7f2f24e648 100644 --- a/packages/lib/storybook/stories/wallets/GooglePay.stories.tsx +++ b/packages/lib/storybook/stories/wallets/GooglePay.stories.tsx @@ -1,16 +1,16 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { GooglePayProps } from '../../../src/components/GooglePay/types'; +import { GooglePayConfiguration } from '../../../src/components/GooglePay/types'; import { GooglePay } from '../../../src'; -type GooglePayStory = StoryConfiguration; +type GooglePayStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Wallets/GooglePay' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const googlepay = new GooglePay({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/wallets/GooglePayExpress.stories.tsx b/packages/lib/storybook/stories/wallets/GooglePayExpress.stories.tsx index dcd1fab616..762804c281 100644 --- a/packages/lib/storybook/stories/wallets/GooglePayExpress.stories.tsx +++ b/packages/lib/storybook/stories/wallets/GooglePayExpress.stories.tsx @@ -1,12 +1,12 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; import { Container } from '../Container'; -import { GooglePayProps } from '../../../src/components/GooglePay/types'; +import { GooglePayConfiguration } from '../../../src/components/GooglePay/types'; import { handleSubmit } from '../../helpers/checkout-handlers'; import getCurrency from '../../utils/get-currency'; import { GooglePay } from '../../../src'; -type GooglePayStory = StoryConfiguration; +type GooglePayStory = StoryConfiguration; const COUNTRY_CODE = 'US'; const SHOPPER_LOCALE = 'en-US'; @@ -14,7 +14,7 @@ const INITIAL_AMOUNT = 10000; let finalAmount = INITIAL_AMOUNT; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Wallets/GooglePay' }; @@ -128,7 +128,7 @@ function calculateNewTransactionInfo(countryCode: string, selectedShippingOption return newTransactionInfo; } -const createComponent = (args: PaymentMethodStoryProps, context) => { +const createComponent = (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const googlepay = new GooglePay({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/storybook/stories/wallets/PayPal.stories.tsx b/packages/lib/storybook/stories/wallets/PayPal.stories.tsx index e54609dc17..7f19a256d2 100644 --- a/packages/lib/storybook/stories/wallets/PayPal.stories.tsx +++ b/packages/lib/storybook/stories/wallets/PayPal.stories.tsx @@ -1,17 +1,17 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { PayPalElementProps } from '../../../src/components/PayPal/types'; +import { PayPalConfiguration } from '../../../src/components/PayPal/types'; import { Container } from '../Container'; import { PayPal } from '../../../src'; -type PayPalStory = StoryConfiguration; +type PayPalStory = StoryConfiguration; -const meta: MetaConfiguration = { +const meta: MetaConfiguration = { title: 'Wallets/Paypal' }; export const Default: PayPalStory = { - render: (args: PaymentMethodStoryProps, context) => { + render: (args: PaymentMethodStoryProps, context) => { const { componentConfiguration } = args; const checkout = getStoryContextCheckout(context); const paypal = new PayPal({ core: checkout, ...componentConfiguration }); diff --git a/packages/lib/tsconfig.json b/packages/lib/tsconfig.json index bc9604fdda..d1d9810013 100644 --- a/packages/lib/tsconfig.json +++ b/packages/lib/tsconfig.json @@ -32,7 +32,7 @@ "jsxFactory": "h", /* Include types for the browser: window, document, etc */ - "lib": ["es2022", "dom", "dom.iterable"] + "lib": ["es2022","dom", "dom.iterable"] }, "include": [ "./src/**/*",