Improve types for CustomCard (#3068)

* Improve types for CustomCard

* Renaming SF callback data objects in line with naming elsewhere in the core types

* Fully export SecuredField callback data types

* Added changeset file

Author: sponglord

.changeset/sharp-worms-rescue.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Improve types for CustomCard

packages/lib/src/components/Card/Card.tsx

@@ -4,7 +4,7 @@ import { CoreProvider } from '../../core/Context/CoreProvider';
 import collectBrowserInfo from '../../utils/browserInfo';
 import { BinLookupResponse, CardElementData, CardConfiguration } from './types';
 import triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';
-import { CbObjOnBinLookup, CbObjOnConfigSuccess, CbObjOnFocus } from '../internal/SecuredFields/lib/types';
+import { CardBinLookupData, CardConfigSuccessData, CardFocusData } from '../internal/SecuredFields/lib/types';
 import { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';
 import { reject } from '../../utils/commonUtils';
 import { hasValidInstallmentsObject } from './components/CardInput/utils';
@@ -194,7 +194,7 @@ export class CardElement extends UIElement<CardConfiguration> {
         this.submit();
     };
 
-    onBinLookup(obj: CbObjOnBinLookup) {
+    onBinLookup(obj: CardBinLookupData) {
         // Handler for regular card comp doesn't need this 'raw' data or to know about 'resets'
         if (!obj.isReset) {
             const nuObj = reject('supportedBrandsRaw').from(obj);
@@ -218,7 +218,7 @@ export class CardElement extends UIElement<CardConfiguration> {
         super.submitAnalytics(analyticsObj, this.props);
     }
 
-    private onConfigSuccess = (obj: CbObjOnConfigSuccess) => {
+    private onConfigSuccess = (obj: CardConfigSuccessData) => {
         this.submitAnalytics({
             type: ANALYTICS_CONFIGURED_STR
         });
@@ -234,7 +234,7 @@ export class CardElement extends UIElement<CardConfiguration> {
 
         // Call merchant defined callback
         if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {
-            this.props.onFocus?.(obj.event as CbObjOnFocus);
+            this.props.onFocus?.(obj.event as CardFocusData);
         } else {
             this.props.onFocus?.(obj);
         }
@@ -248,7 +248,7 @@ export class CardElement extends UIElement<CardConfiguration> {
 
         // Call merchant defined callback
         if (ALL_SECURED_FIELDS.includes(obj.fieldType)) {
-            this.props.onBlur?.(obj.event as CbObjOnFocus);
+            this.props.onBlur?.(obj.event as CardFocusData);
         } else {
             this.props.onBlur?.(obj);
         }

packages/lib/src/components/Card/components/CardInput/CardInput.tsx

@@ -24,7 +24,7 @@ import useImage from '../../../../core/Context/useImage';
 import { getArrayDifferences } from '../../../../utils/arrayUtils';
 import FormInstruction from '../../../internal/FormInstruction';
 import { AddressData } from '../../../../types/global-types';
-import { CbObjOnBrand, CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';
+import { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';
 import { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';
 import { PREFIX } from '../../../internal/Icon/constants';
 import useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';
@@ -136,14 +136,14 @@ const CardInput = (props: CardInputProps) => {
      * HANDLERS
      */
     // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx
-    const onFieldFocusAnalytics = (who: string, e: Event | CbObjOnFocus) => {
+    const onFieldFocusAnalytics = (who: string, e: Event | CardFocusData) => {
         props.onFocus({ fieldType: who, event: e });
     };
-    const onFieldBlurAnalytics = (who: string, e: Event | CbObjOnFocus) => {
+    const onFieldBlurAnalytics = (who: string, e: Event | CardFocusData) => {
         props.onBlur({ fieldType: who, event: e });
     };
 
-    const onBrand = useCallback((obj: CbObjOnBrand) => {
+    const onBrand = useCallback((obj: CardBrandData) => {
         setInternallyDetectedBrand(obj.brand);
         props.onBrand(obj);
     }, []);

packages/lib/src/components/Card/components/CardInput/handlers.ts

@@ -1,6 +1,6 @@
 import { ENCRYPTED_CARD_NUMBER, CREDIT_CARD_SF_FIELDS } from '../../../internal/SecuredFields/lib/constants';
 import { selectOne } from '../../../internal/SecuredFields/lib/utilities/dom';
-import { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';
+import { CardFocusData } from '../../../internal/SecuredFields/lib/types';
 
 /**
  * Helper for CardInput - gets a field name and sets focus on it
@@ -28,7 +28,7 @@ export const getAddressHandler = (setFormData, setFormValid, setFormErrors) => {
 
 export const getFocusHandler = (setFocusedElement, onFocus, onBlur) => {
     // Return Handler fn:
-    return (e: CbObjOnFocus) => {
+    return (e: CardFocusData) => {
         setFocusedElement(e.currentFocusObject);
         e.focus === true ? onFocus(e.fieldType, e) : onBlur(e.fieldType, e);
     };

packages/lib/src/components/Card/components/CardInput/types.ts

@@ -3,19 +3,19 @@ import { BinLookupResponse, BrandConfiguration, CardBrandsConfiguration, CardBac
 import { InstallmentOptions } from './components/types';
 import { ValidationResult } from '../../../internal/PersonalDetails/types';
 import {
-    CbObjOnAllValid,
-    CbObjOnAutoComplete,
-    CbObjOnBinValue,
-    CbObjOnBrand,
-    CbObjOnConfigSuccess,
-    CbObjOnFieldValid,
-    CbObjOnLoad,
+    CardAllValidData,
+    CardAutoCompleteData,
+    CardBinValueData,
+    CardBrandData,
+    CardConfigSuccessData,
+    CardFieldValidData,
+    CardLoadData,
     CVCPolicyType,
     DatePolicyType
 } from '../../../internal/SecuredFields/lib/types';
 import Specifications from '../../../internal/Address/Specifications';
 import { AddressSchema } from '../../../internal/Address/types';
-import { CbObjOnError, StylesObject } from '../../../internal/SecuredFields/lib/types';
+import { CardErrorData, StylesObject } from '../../../internal/SecuredFields/lib/types';
 import { Resources } from '../../../../core/Context/Resources';
 import { SRPanel } from '../../../../core/Errors/SRPanel';
 import RiskElement from '../../../../core/RiskModule';
@@ -114,17 +114,17 @@ export interface CardInputProps {
     };
     onAdditionalSFConfig?: () => {};
     onAdditionalSFRemoved?: () => {};
-    onAllValid?: (o: CbObjOnAllValid) => {};
-    onAutoComplete?: (o: CbObjOnAutoComplete) => {};
-    onBinValue?: (o: CbObjOnBinValue) => {};
+    onAllValid?: (o: CardAllValidData) => {};
+    onAutoComplete?: (o: CardAutoCompleteData) => {};
+    onBinValue?: (o: CardBinValueData) => {};
     onBlur?: (e) => {};
-    onBrand?: (o: CbObjOnBrand) => {};
-    onConfigSuccess?: (O: CbObjOnConfigSuccess) => {};
+    onBrand?: (o: CardBrandData) => {};
+    onConfigSuccess?: (O: CardConfigSuccessData) => {};
     onChange?: (state) => {};
     onError?: () => {};
-    onFieldValid?: (o: CbObjOnFieldValid) => {};
+    onFieldValid?: (o: CardFieldValidData) => {};
     onFocus?: (e) => {};
-    onLoad?: (o: CbObjOnLoad) => {};
+    onLoad?: (o: CardLoadData) => {};
     handleKeyPress?: (obj: KeyboardEvent) => void;
     onAddressLookup?: OnAddressLookupType;
     onAddressSelected?: OnAddressSelectedType;
@@ -174,7 +174,7 @@ export interface CardInputRef extends ComponentMethodsRef {
     setFocusOn?: (who) => void;
     processBinLookupResponse?: (binLookupResponse: BinLookupResponse, isReset: boolean) => void;
     updateStyles?: (stylesObj: StylesObject) => void;
-    handleUnsupportedCard?: (errObj: CbObjOnError) => boolean;
+    handleUnsupportedCard?: (errObj: CardErrorData) => boolean;
 }
 
 export interface FieldError {

packages/lib/src/components/Card/types.ts

@@ -1,15 +1,15 @@
 import { ComponentFocusObject, AddressData, BrowserInfo } from '../../types/global-types';
 import {
-    CbObjOnBinValue,
-    CbObjOnBrand,
-    CbObjOnConfigSuccess,
-    CbObjOnFieldValid,
-    CbObjOnFocus,
-    CbObjOnLoad,
-    CbObjOnBinLookup,
+    CardBinValueData,
+    CardBrandData,
+    CardConfigSuccessData,
+    CardFieldValidData,
+    CardFocusData,
+    CardLoadData,
+    CardBinLookupData,
     StylesObject
 } from '../internal/SecuredFields/lib/types';
-import { CVCPolicyType, DatePolicyType, CbObjOnAllValid } from '../internal/SecuredFields/lib/types';
+import { CVCPolicyType, DatePolicyType, CardAllValidData } from '../internal/SecuredFields/lib/types';
 import { ClickToPayProps } from '../internal/ClickToPay/types';
 import { InstallmentOptions } from './components/CardInput/components/types';
 import { DisclaimerMsgObject } from '../internal/DisclaimerMessage/DisclaimerMessage';
@@ -274,56 +274,56 @@ export interface CardConfiguration extends UIElementProps {
      * After binLookup call - provides the brand(s) we detect the user is entering, and if we support the brand(s)
      * - merchant set config option
      */
-    onBinLookup?: (event: CbObjOnBinLookup) => void;
+    onBinLookup?: (event: CardBinLookupData) => void;
 
     /**
      * Provides the BIN Number of the card (up to 6 digits), called as the user types in the PAN.
      * - merchant set config option
      */
-    onBinValue?: (event: CbObjOnBinValue) => void;
+    onBinValue?: (event: CardBinValueData) => void;
 
     /**
      * Called when a field loses focus.
      * - merchant set config option
      */
-    onBlur?: (event: CbObjOnFocus | ComponentFocusObject) => void;
+    onBlur?: (event: CardFocusData | ComponentFocusObject) => void;
 
     /**
      * Called once we detect the card brand.
      * - merchant set config option
      */
-    onBrand?: (event: CbObjOnBrand) => void;
+    onBrand?: (event: CardBrandData) => void;
 
     /**
      * Called once the card input fields are ready to use.
      * - merchant set config option
      */
-    onConfigSuccess?: (event: CbObjOnConfigSuccess) => void;
+    onConfigSuccess?: (event: CardConfigSuccessData) => void;
 
     /**
      * Called when *all* the securedFields becomes valid
      *  Also called again if one of the fields moves out of validity.
      */
-    onAllValid?: (event: CbObjOnAllValid) => void;
+    onAllValid?: (event: CardAllValidData) => void;
 
     /**
      * Called when a field becomes valid and also if a valid field changes and becomes invalid.
      * For the card number field, it returns the last 4 digits of the card number.
      * - merchant set config option
      */
-    onFieldValid?: (event: CbObjOnFieldValid) => void;
+    onFieldValid?: (event: CardFieldValidData) => void;
 
     /**
      * Called when a field gains focus.
      * - merchant set config option
      */
-    onFocus?: (event: CbObjOnFocus | ComponentFocusObject) => void;
+    onFocus?: (event: CardFocusData | ComponentFocusObject) => void;
 
     /**
      * Called once all the card input fields have been created but are not yet ready to use.
      * - merchant set config option
      */
-    onLoad?: (event: CbObjOnLoad) => void;
+    onLoad?: (event: CardLoadData) => void;
 
     /**
      * Configure placeholder text for holderName, cardNumber, expirationDate, securityCode and password.

packages/lib/src/components/CustomCard/CustomCard.tsx

@@ -4,19 +4,14 @@ import CustomCardInput from './CustomCardInput';
 import { CoreProvider } from '../../core/Context/CoreProvider';
 import collectBrowserInfo from '../../utils/browserInfo';
 import triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';
-import { CbObjOnBinLookup, CbObjOnFocus } from '../internal/SecuredFields/lib/types';
+import { CardBinLookupData, CardFocusData } from '../internal/SecuredFields/lib/types';
 import { BrandObject } from '../Card/types';
 import { getCardImageUrl, fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';
 import { TxVariants } from '../tx-variants';
 import { CustomCardConfiguration } from './types';
 import { ANALYTICS_FOCUS_STR, ANALYTICS_UNFOCUS_STR } from '../../core/Analytics/constants';
 import { SendAnalyticsObject } from '../../core/Analytics/types';
 
-// TODO questions about
-// brand - does a merchant ever make a custom stored card?
-// type
-// countryCode
-
 export class CustomCard extends UIElement<CustomCardConfiguration> {
     public static type = TxVariants.customCard;
 
@@ -27,11 +22,12 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
         brandsConfiguration: {}
     };
 
+    private brand = TxVariants.card;
+
     formatProps(props: CustomCardConfiguration) {
         return {
             ...props,
-            type: TxVariants.customCard,
-            brand: TxVariants.card
+            type: TxVariants.customCard
         };
     }
 
@@ -80,7 +76,7 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
         return this;
     }
 
-    onBinLookup(obj: CbObjOnBinLookup) {
+    onBinLookup(obj: CardBinLookupData) {
         const nuObj = { ...obj };
         nuObj.rootNode = this._node;
 
@@ -105,7 +101,7 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
         return collectBrowserInfo();
     }
 
-    private onFocus = (obj: CbObjOnFocus) => {
+    private onFocus = (obj: CardFocusData) => {
         this.submitAnalytics({
             type: obj.focus === true ? ANALYTICS_FOCUS_STR : ANALYTICS_UNFOCUS_STR,
             target: fieldTypeToSnakeCase(obj.fieldType)
@@ -134,7 +130,7 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
                     onBinValue={this.onBinValue}
                     implementationType={'custom'}
                     resources={this.resources}
-                    brand={this.props.brand}
+                    brand={this.brand}
                     onFocus={this.onFocus}
                 />
             </CoreProvider>

packages/lib/src/components/CustomCard/CustomCardInput/CustomCardInput.tsx

@@ -17,6 +17,7 @@ interface SecuredFieldsProps {
     brandsConfiguration?: CardBrandsConfiguration;
     clientKey?: string;
     countryCode?: string;
+    forceCompat?: boolean;
     i18n: Language;
     implementationType?: string;
     keypadFix?: boolean;
@@ -164,6 +165,7 @@ const extractPropsForSFP = (props: SecuredFieldsProps) => {
         brands: props.brands,
         brandsConfiguration: props.brandsConfiguration,
         clientKey: props.clientKey,
+        forceCompat: props.forceCompat,
         // countryCode: props.countryCode, // only used for korean cards when koreanAuthenticationRequired is true
         i18n: props.i18n,
         implementationType: props.implementationType,