feat: provide card-form state via PrimerCardFormProvider context

Author: OnurVar

src/Components/PrimerCardForm.tsx

@@ -7,16 +7,17 @@ import { PrimerExpiryDateInput } from './inputs/PrimerExpiryDateInput';
 import { PrimerCVVInput } from './inputs/PrimerCVVInput';
 import { PrimerCardholderNameInput } from './inputs/PrimerCardholderNameInput';
 import { PrimerAcceptedCardNetworks } from './PrimerAcceptedCardNetworks';
+import { usePrimerCardForm } from './hooks/usePrimerCardForm';
 import type { PrimerTextInputRef } from './types/CardInputTypes';
 import type { PrimerCardFormProps } from './types/PrimerCardFormTypes';
 
 export function PrimerCardForm({
-  cardForm,
   onSubmit,
   autoFocus = false,
   style,
   testID = 'primer-card-form',
 }: PrimerCardFormProps) {
+  const cardForm = usePrimerCardForm();
   const tokens = usePrimerTheme();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
@@ -40,7 +41,6 @@ export function PrimerCardForm({
       <PrimerAcceptedCardNetworks testID={`${testID}-accepted-networks`} />
       <PrimerCardNumberInput
         ref={cardRef}
-        cardForm={cardForm}
         editable={!disabled}
         returnKeyType="next"
         onSubmitEditing={() => expiryRef.current?.focus()}
@@ -51,7 +51,6 @@ export function PrimerCardForm({
         <View style={styles.halfField}>
           <PrimerExpiryDateInput
             ref={expiryRef}
-            cardForm={cardForm}
             editable={!disabled}
             returnKeyType="next"
             onSubmitEditing={() => cvvRef.current?.focus()}
@@ -61,7 +60,6 @@ export function PrimerCardForm({
         <View style={styles.halfField}>
           <PrimerCVVInput
             ref={cvvRef}
-            cardForm={cardForm}
             editable={!disabled}
             returnKeyType={cardForm.isCardholderNameVisible ? 'next' : 'done'}
             onSubmitEditing={cardForm.isCardholderNameVisible ? () => nameRef.current?.focus() : onSubmit}
@@ -74,7 +72,6 @@ export function PrimerCardForm({
       {cardForm.isCardholderNameVisible && (
         <PrimerCardholderNameInput
           ref={nameRef}
-          cardForm={cardForm}
           editable={!disabled}
           returnKeyType="done"
           onSubmitEditing={onSubmit}

src/Components/PrimerCheckoutProvider.tsx

@@ -59,6 +59,8 @@ interface InternalState {
   vaultedError: Error | null;
   activeVaultedMethodId: string | null;
   vaultDisplayOverride: 'expanded' | null;
+  // Shopper-picked co-badged card network. Null until the user makes a
+  // selection in the popover. Persists across re-renders / hook callers.
   selectedCardNetwork: CardNetworkId | null;
   requiresVaultedCardCvv: boolean;
   cvvInputVisible: boolean;

src/Components/hooks/usePrimerCardForm.ts

@@ -4,19 +4,19 @@ import { usePrimerCheckout } from './usePrimerCheckout';
 import type { UseCardFormOptions, UsePrimerCardFormReturn } from '../types/CardFormTypes';
 
 /**
- * Card form adapter hook. Thin wrapper over `CardFormStateProvider` — the
+ * Card form adapter hook. Thin wrapper over `PrimerCardFormProvider` — the
  * provider owns the field state, focus tracking, debouncer, and submit lifecycle.
  * This hook reads the shared state and wires per-caller option callbacks
  * (`onValidationChange`, `onBinDataChange`, `onMetadataChange`).
  *
  * Must be used inside a `<PrimerCheckoutProvider>` tree that also mounts
- * `<CardFormStateProvider>` (the drop-in `CheckoutFlow` does this for you).
+ * `<PrimerCardFormProvider>` (the drop-in `CheckoutFlow` does this for you).
  */
 export function usePrimerCardForm(options: UseCardFormOptions = {}): UsePrimerCardFormReturn {
   const state = useCardFormStateContext();
   if (!state) {
     throw new Error(
-      'usePrimerCardForm must be used within a <CardFormStateProvider>. ' +
+      'usePrimerCardForm must be used within a <PrimerCardFormProvider>. ' +
         'The built-in <PrimerCheckoutSheet>/<CheckoutFlow> wires this automatically.'
     );
   }

src/Components/hooks/usePrimerCardNetworkSelection.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { usePrimerCheckout } from './usePrimerCheckout';
 import type { CardNetworkDetails, UsePrimerCardNetworkSelectionReturn } from '../types/CardNetworkSelection';
 import type { CardNetworkId } from '../internal/cardNetwork';
-import type { PrimerCardNetwork } from '../../models/PrimerBinData';
+import type { PrimerCardNetwork as PrimerBinCardNetwork } from '../../models/PrimerBinData';
 
 const LOG = '[usePrimerCardNetworkSelection]';
 
@@ -13,13 +13,13 @@ const NON_SELECTABLE_NETWORKS = new Set<string>(['EFTPOS']);
 // A card is co-badged when the BIN resolves to at least this many networks.
 const MIN_COBADGE_NETWORKS = 2;
 
-function toCardNetwork(raw: PrimerCardNetwork): CardNetworkDetails {
+function toCardNetwork(raw: PrimerBinCardNetwork): CardNetworkDetails {
   // Native emits the closed set of CardNetworkId strings; cast is faithful to that contract.
   const identifier = raw.network as CardNetworkId;
   return {
     identifier,
     displayName: raw.displayName,
-    // `allowed` is iOS-only on PrimerCardNetwork. undefined → treat as allowed.
+    // `allowed` is iOS-only on PrimerBinCardNetwork. undefined → treat as allowed.
     logoUri: null,
     allowed: raw.allowed !== false,
     allowsUserSelection: !NON_SELECTABLE_NETWORKS.has(identifier),
@@ -34,7 +34,7 @@ export function usePrimerCardNetworkSelection(): UsePrimerCardNetworkSelectionRe
     if (!binData) {
       return [];
     }
-    const all: PrimerCardNetwork[] = binData.preferred
+    const all: PrimerBinCardNetwork[] = binData.preferred
       ? [binData.preferred, ...binData.alternatives]
       : [...binData.alternatives];
     return all.map(toCardNetwork).filter((n) => n.allowed);

src/Components/index.ts

@@ -45,6 +45,7 @@ export { PrimerCheckoutSheet } from './PrimerCheckoutSheet';
 export type { PrimerCheckoutSheetProps } from './PrimerCheckoutSheet';
 export { PrimerCardForm } from './PrimerCardForm';
 export type { PrimerCardFormProps } from './types/PrimerCardFormTypes';
+export { PrimerCardFormProvider } from './internal/form-state';
 export { PrimerAcceptedCardNetworks } from './PrimerAcceptedCardNetworks';
 export type { PrimerAcceptedCardNetworksProps } from './PrimerAcceptedCardNetworks';
 export { PrimerBillingAddressForm } from './PrimerBillingAddressForm';

src/Components/inputs/PrimerCVVInput.tsx

@@ -3,14 +3,16 @@ import { Image, StyleSheet } from 'react-native';
 import { PrimerTextInput } from './PrimerTextInput';
 import { TRAILING_ICON_MARGIN, TRAILING_ICON_SIZE } from './dimensions';
 import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
 import type { PrimerCVVInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
 
 const cvvSource = require('../../assets/images/ic-cvv-hint.png');
 
 export const PrimerCVVInput = forwardRef<PrimerTextInputRef, PrimerCVVInputProps>(function PrimerCVVInput(
-  { cardForm, placeholder, label, ...rest },
+  { placeholder, label, ...rest },
   ref
 ) {
+  const cardForm = usePrimerCardForm();
   const { t } = usePrimerLocalization();
   const resolvedLabel = label ?? t('primer_card_form_label_cvv');
   const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_cvv');

src/Components/inputs/PrimerCardNumberInput.tsx

@@ -5,6 +5,7 @@ import { caretFromDigitIndex, countDigits, countDigitsBefore, targetDigitIndex }
 import { PLACEHOLDER_ICON_HEIGHT, PLACEHOLDER_ICON_WIDTH, TRAILING_ICON_MARGIN } from './dimensions';
 import { usePrimerLocalization } from '../internal/localization';
 import { usePrimerTheme } from '../internal/theme';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
 import { usePrimerCardNetwork } from '../hooks/usePrimerCardNetwork';
 import { usePrimerCardNetworkSelection } from '../hooks/usePrimerCardNetworkSelection';
 import { PrimerCardNetworkSelector } from '../PrimerCardNetworkSelector';
@@ -16,7 +17,8 @@ type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
 const placeholderSource = require('../../assets/images/ic-card-placeholder.png');
 
 export const PrimerCardNumberInput = forwardRef<PrimerTextInputRef, PrimerCardNumberInputProps>(
-  function PrimerCardNumberInput({ cardForm, placeholder, label, ...rest }, ref) {
+  function PrimerCardNumberInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
     const { t } = usePrimerLocalization();
     const resolvedLabel = label ?? t('primer_card_form_label_number');
     const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_number');

src/Components/inputs/PrimerCardholderNameInput.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react';
 import { PrimerTextInput } from './PrimerTextInput';
 import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
 import type { PrimerCardholderNameInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
 
 export const PrimerCardholderNameInput = forwardRef<PrimerTextInputRef, PrimerCardholderNameInputProps>(
-  function PrimerCardholderNameInput({ cardForm, placeholder, label, ...rest }, ref) {
+  function PrimerCardholderNameInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
     const { t } = usePrimerLocalization();
     const resolvedLabel = label ?? t('primer_card_form_label_name');
     const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_name');

src/Components/inputs/PrimerExpiryDateInput.tsx

@@ -4,14 +4,16 @@ import { PrimerTextInput } from './PrimerTextInput';
 import { caretFromDigitIndex, countDigits, countDigitsBefore, targetDigitIndex } from './caret';
 import { TRAILING_ICON_MARGIN, TRAILING_ICON_SIZE } from './dimensions';
 import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
 import type { PrimerExpiryDateInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
 
 type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
 
 const calendarSource = require('../../assets/images/ic-expiry-calendar.png');
 
 export const PrimerExpiryDateInput = forwardRef<PrimerTextInputRef, PrimerExpiryDateInputProps>(
-  function PrimerExpiryDateInput({ cardForm, placeholder, label, ...rest }, ref) {
+  function PrimerExpiryDateInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
     const { t } = usePrimerLocalization();
     const resolvedLabel = label ?? t('primer_card_form_label_expiry');
     const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_expiry');

src/Components/internal/checkout-flow/CheckoutFlow.tsx

@@ -12,7 +12,7 @@ import { CountrySelectorScreen } from '../screens/CountrySelectorScreen';
 import { ErrorScreen } from '../screens/ErrorScreen';
 import { SuccessScreen } from '../screens/SuccessScreen';
 import { VaultedMethodsScreen } from '../screens/VaultedMethodsScreen';
-import { CardFormStateProvider, BillingAddressFormStateProvider } from '../form-state';
+import { PrimerCardFormProvider, BillingAddressFormStateProvider } from '../form-state';
 import { CheckoutFlowContext } from './CheckoutFlowContext';
 
 const SUCCESS_AUTO_DISMISS_MS = 3000;
@@ -113,11 +113,11 @@ export function CheckoutFlow({ onCancel }: CheckoutFlowProps = {}) {
       <NavigationProvider initialRoute={CheckoutRoute.splash}>
         <ReadinessTransitioner />
         <PaymentOutcomeTransitioner />
-        <CardFormStateProvider>
+        <PrimerCardFormProvider>
           <BillingAddressFormStateProvider>
             <NavigationContainer screenMap={screenMap} />
           </BillingAddressFormStateProvider>
-        </CardFormStateProvider>
+        </PrimerCardFormProvider>
       </NavigationProvider>
     </CheckoutFlowContext.Provider>
   );