Improve types for CustomCard

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

@@ -12,11 +12,6 @@ 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
         };
     }
 
@@ -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,

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

@@ -1,28 +1,174 @@
-import { CardConfiguration } from '../Card/types';
-import { SFError } from '../Card/components/CardInput/types';
+import { CardBrandsConfiguration } from '../Card/types';
+import { Placeholders, SFError } from '../Card/components/CardInput/types';
 import UIElement from '../internal/UIElement';
+import {
+    CbObjOnAllValid,
+    CbObjOnBinLookup,
+    CbObjOnBinValue,
+    CbObjOnBrand,
+    CbObjOnConfigSuccess,
+    CbObjOnFieldValid,
+    CbObjOnFocus,
+    CbObjOnLoad,
+    StylesObject
+} from '../internal/SecuredFields/lib/types';
+import Language from '../../language';
 
-export type CustomCardConfiguration = Omit<
-    CardConfiguration,
-    | 'clickToPayConfiguration'
-    | '_disableClickToPay'
-    | 'fundingSource'
-    | 'positionHolderNameOnTop'
-    | 'showBrandIcon'
-    | 'enableStoreDetails'
-    | 'hideCVC'
-    | 'hasCVC'
-    | 'hasHolderName'
-    | 'holderNameRequired'
-    | 'billingAddressRequired'
-    | 'billingAddressRequiredFields'
-    | 'billingAddressAllowedCountries'
-    | 'installmentOptions'
-    | 'showInstallmentAmounts'
-    | 'configuration'
-> & {
-    onValidationError?: (validationErrors: ValidationError[]) => void;
+export type CustomCardConfiguration = {
+    /**
+     * Automatically shift the focus from one field to another. Usually happens from a valid Expiry Date field to the Security Code field,
+     * but some BINS also allow us to know that the PAN is complete, in which case we can shift focus to the date field
+     * @defaultValue `true`
+     *
+     * - merchant set config option
+     */
+    autoFocus?: boolean;
+
+    /**
+     * List of brands accepted by the component
+     * @internal
+     * - but can also be overwritten by merchant config option
+     */
+    brands?: string[];
+
+    /**
+     * Configuration specific to brands
+     * - merchant set config option
+     */
+    brandsConfiguration?: CardBrandsConfiguration;
+
+    /**
+     * Defines the size of the challenge Component
+     *
+     * 01: [250px, 400px]
+     * 02: [390px, 400px]
+     * 03: [500px, 600px]
+     * 04: [600px, 400px]
+     * 05: [100%, 100%]
+     *
+     * @defaultValue '02'
+     *
+     * - merchant set config option
+     */
+    challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
+
+    /**
+     * Turn on the procedure to force the arrow keys on an iOS soft keyboard to always be disabled
+     * @defaultValue `false`
+     *
+     * - merchant set config option
+     */
+    disableIOSArrowKeys?: boolean;
+
+    /**
+     * Allow binLookup process to occur
+     * @defaultValue `true`
+     *
+     * - merchant set config option
+     */
+    doBinLookup?: boolean;
+
+    /** @internal */
+    i18n?: Language;
+
+    /**
+     * For some scenarios make the card input fields (PAN, Expiry Date, Security Code) have type="tel" rather than type="text" inputmode="numeric"
+     * @defaultValue `false`
+     *
+     * - merchant set config option
+     */
+    legacyInputMode?: boolean;
+
+    /** @internal */
+    loadingContext?: string;
+
+    /**
+     * Adds type="password" to the Security code input field, causing its value to be masked
+     * @defaultValue `false`
+     *
+     * - merchant set config option
+     */
+    maskSecurityCode?: boolean;
+
+    /**
+     * Specify the minimum expiry date that will be considered valid
+     *
+     * - merchant set config option
+     */
+    minimumExpiryDate?: string;
+
+    /**
+     * 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;
+
+    /**
+     * 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;
+
+    /**
+     * Called once we detect the card brand.
+     * - merchant set config option
+     */
+    onBrand?: (event: CbObjOnBrand) => void;
+
+    /**
+     * Called once the card input fields are ready to use.
+     * - merchant set config option
+     */
+    onConfigSuccess?: (event: CbObjOnConfigSuccess) => void;
+
+    /**
+     * Called when *all* the securedFields becomes valid
+     *  Also called again if one of the fields moves out of validity.
+     */
+    onAllValid?: (event: CbObjOnAllValid) => 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;
+
+    /**
+     * Called when a field gains focus.
+     * - merchant set config option
+     */
+    onFocus?: (event: CbObjOnFocus) => 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;
+
+    /**
+     * Called when a Component is told by a SecuredField that the Enter key has been pressed.
+     * - merchant set config option
+     */
     onEnterKeyPressed?: (activeElement: Element, component: UIElement) => void;
+
+    /**
+     * Called as errors are detected within the securedFields
+     * - merchant set config option
+     */
+    onValidationError?: (validationErrors: ValidationError[]) => void;
+
+    /**
+     * Configure placeholder text for holderName, cardNumber, expirationDate, securityCode and password.
+     * - merchant set config option
+     */
+    placeholders?: Placeholders;
+
+    /**
+     * Object to configure the styling of the inputs in the iframes that are used to present the PAN, Expiry Date & Security Code fields
+     * - merchant set config option
+     */
+    styles?: StylesObject;
 };
 
 export type ValidationError = SFError & {