refactor(useCardForm): always collect cardholderName (ACC-6925)

Author: OnurVar

src/Components/hooks/useCardForm.ts

@@ -31,8 +31,16 @@ function stripCardNumberForNative(formatted: string): string {
   return formatted.replace(/\s/g, '');
 }
 
+// Display is MM/YY but Android's validator requires MM/YYYY; iOS accepts both.
+// Expand only once the year is fully typed (4-char "MM/YY"); partial edits
+// pass through unchanged so native can keep reporting "cannot be blank".
+function expandExpiryYearForNative(formatted: string): string {
+  const match = /^(\d{2})\/(\d{2})$/.exec(formatted);
+  return match ? `${match[1]}/20${match[2]}` : formatted;
+}
+
 export function useCardForm(options: UseCardFormOptions = {}): UseCardFormReturn {
-  const { collectCardholderName = false, onValidationChange, onMetadataChange, onBinDataChange } = options;
+  const { onValidationChange, onMetadataChange, onBinDataChange } = options;
   const { isReady } = usePrimerCheckout();
 
   // Field state
@@ -80,12 +88,12 @@ export function useCardForm(options: UseCardFormOptions = {}): UseCardFormReturn
   });
 
   // Debounced sync to native
-  const debouncedRef = useRef<
-    DebouncedFunction<(data: { cardNumber: string; expiryDate: string; cvv: string; cardholderName?: string }) => void>
-  >(null as any);
+  const debouncedRef = useRef<DebouncedFunction<
+    (data: { cardNumber: string; expiryDate: string; cvv: string; cardholderName: string }) => void
+  > | null>(null);
   useEffect(() => {
     debouncedRef.current = debounce(
-      (data: { cardNumber: string; expiryDate: string; cvv: string; cardholderName?: string }) => {
+      (data: { cardNumber: string; expiryDate: string; cvv: string; cardholderName: string }) => {
         bridge.setRawData(data).catch(() => {});
       },
       DEBOUNCE_MS
@@ -98,16 +106,13 @@ export function useCardForm(options: UseCardFormOptions = {}): UseCardFormReturn
 
   const syncToNative = useCallback(() => {
     const fields = fieldsRef.current;
-    const data: { cardNumber: string; expiryDate: string; cvv: string; cardholderName?: string } = {
+    debouncedRef.current?.({
       cardNumber: stripCardNumberForNative(fields.cardNumber),
-      expiryDate: fields.expiryDate,
+      expiryDate: expandExpiryYearForNative(fields.expiryDate),
       cvv: fields.cvv,
-    };
-    if (collectCardholderName) {
-      data.cardholderName = fields.cardholderName;
-    }
-    debouncedRef.current?.(data);
-  }, [collectCardholderName]);
+      cardholderName: fields.cardholderName,
+    });
+  }, []);
 
   // Updaters
   const updateCardNumber = useCallback(
@@ -197,7 +202,7 @@ export function useCardForm(options: UseCardFormOptions = {}): UseCardFormReturn
     setBinData(null);
     fieldsRef.current = { cardNumber: '', expiryDate: '', cvv: '', cardholderName: '' };
     debouncedRef.current?.cancel();
-    bridge.setRawData({ cardNumber: '', expiryDate: '', cvv: '' }).catch(() => {});
+    bridge.setRawData({ cardNumber: '', expiryDate: '', cvv: '', cardholderName: '' }).catch(() => {});
   }, [bridge.setRawData]);
 
   return {

src/Components/types/CardFormTypes.ts

@@ -6,8 +6,6 @@ export type CardFormField = 'cardNumber' | 'expiryDate' | 'cvv' | 'cardholderNam
 export type CardFormErrors = Partial<Record<CardFormField, string>>;
 
 export interface UseCardFormOptions {
-  /** Whether to collect cardholder name. Default: false */
-  collectCardholderName?: boolean;
   /** Called when validation state changes */
   onValidationChange?: (isValid: boolean, errors: CardFormErrors) => void;
   /** Called when card metadata changes (e.g., network detection) */
@@ -17,42 +15,37 @@ export interface UseCardFormOptions {
 }
 
 export interface UseCardFormReturn {
-  /** Formatted card number (with spaces) */
+  /** Formatted card number (with spaces). */
   cardNumber: string;
-  /** Formatted expiry (MM/YY) */
+  /** Formatted expiry as MM/YY. */
   expiryDate: string;
-  /** CVV digits */
   cvv: string;
-  /** Cardholder name */
   cardholderName: string;
 
-  /** Update card number (auto-formats with spaces) */
+  /** Auto-formats with spaces. */
   updateCardNumber: (value: string) => void;
-  /** Update expiry date (auto-formats MM/YY) */
+  /** Auto-formats as MM/YY. */
   updateExpiryDate: (value: string) => void;
-  /** Update CVV */
   updateCVV: (value: string) => void;
-  /** Update cardholder name */
   updateCardholderName: (value: string) => void;
 
-  /** Overall form validity from native SDK */
+  /** Overall form validity as reported by the native SDK. */
   isValid: boolean;
-  /** Per-field errors (only for touched fields) */
+  /** Per-field errors, surfaced only for touched fields. */
   errors: CardFormErrors;
-  /** Mark a field as touched (show errors after blur) */
+  /** Marks a field as touched so its error can appear on blur. */
   markFieldTouched: (field: CardFormField) => void;
 
-  /** Trigger tokenization. No-op if invalid or already submitting */
+  /** Trigger tokenization. No-op if invalid or already submitting. */
   submit: () => Promise<void>;
-  /** Whether submission is in progress */
   isSubmitting: boolean;
 
-  /** Required fields from merchant configuration */
+  /** Fields the active client session requires. */
   requiredFields: PrimerInputElementType[];
 
-  /** Card network detection data */
+  /** BIN / card network data from the native SDK. */
   binData: PrimerBinData | null;
 
-  /** Clear all fields and state */
+  /** Clear all fields and reset local state. */
   reset: () => void;
 }