@primer-io/react-native 2.45.0 → 3.0.0-beta.0

package/src/Components/internal/currency/currency-metadata.ts

@@ -0,0 +1,57 @@
+import bundledCurrencies from './currencies.json';
+
+interface CurrencyEntry {
+  c: string;
+  m: number;
+}
+
+const DEFAULT_FRACTION_DIGITS = 2;
+
+/** In-memory currency map: code → fractionDigits */
+let currencyMap: Map<string, number> | null = null;
+
+function ensureLoaded(): Map<string, number> {
+  if (currencyMap) return currencyMap;
+
+  currencyMap = new Map<string, number>();
+  for (const entry of bundledCurrencies as CurrencyEntry[]) {
+    currencyMap.set(entry.c, entry.m);
+  }
+  return currencyMap;
+}
+
+/**
+ * Returns the number of minor unit digits for a given currency code.
+ * Looks up from bundled currency data (same source as native iOS/Android SDKs).
+ * Falls back to 2 for unknown currencies.
+ */
+export function getMinorUnitDigits(currencyCode: string): number {
+  const map = ensureLoaded();
+  return map.get(currencyCode.toUpperCase()) ?? DEFAULT_FRACTION_DIGITS;
+}
+
+// TODO: Enable once assetsUrl is exposed from native SDK bridge (ACC-6926)
+// /**
+//  * Fetches latest currency data from the Primer API and updates the in-memory cache.
+//  * Called during configure() flow once assetsUrl is available from native bridge.
+//  *
+//  * @param assetsUrl - Base URL from API configuration (e.g., "https://assets.production.core.primer.io")
+//  */
+// export async function fetchCurrencyData(assetsUrl: string): Promise<void> {
+//   const url = `${assetsUrl}/currency-information/v1/data.json`;
+//   try {
+//     const response = await fetch(url);
+//     if (!response.ok) {
+//       console.warn(`[Primer] Failed to fetch currency data: ${response.status}`);
+//       return;
+//     }
+//     const data: CurrencyEntry[] = await response.json();
+//     const freshMap = new Map<string, number>();
+//     for (const entry of data) {
+//       freshMap.set(entry.c, entry.m);
+//     }
+//     currencyMap = freshMap;
+//   } catch (error) {
+//     console.warn('[Primer] Failed to fetch currency data, using bundled fallback', error);
+//   }
+// }

package/src/Components/internal/currency/formatting.ts

@@ -0,0 +1,26 @@
+import { getMinorUnitDigits } from './currency-metadata';
+
+/**
+ * Formats a currency amount for display.
+ *
+ * @param amountInMinorUnits - Amount in minor units (e.g., 123456 cents = $1,234.56)
+ * @param currencyCode - ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
+ * @param locale - BCP 47 locale tag (e.g., "en-US", "de-DE")
+ * @returns Formatted currency string (e.g., "$1,234.56", "1.234,56 €")
+ */
+export function formatCurrency(amountInMinorUnits: number, currencyCode: string, locale: string): string {
+  const digits = getMinorUnitDigits(currencyCode);
+  const majorUnits = digits === 0 ? amountInMinorUnits : amountInMinorUnits / Math.pow(10, digits);
+
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode.toUpperCase(),
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+    }).format(majorUnits);
+  } catch (error) {
+    console.warn(`[Primer] Failed to format currency "${currencyCode}" for locale "${locale}"`, error);
+    return `${majorUnits.toFixed(digits)} ${currencyCode.toUpperCase()}`;
+  }
+}

package/src/Components/internal/currency/index.ts

@@ -0,0 +1,2 @@
+export { formatCurrency } from './formatting';
+export { getMinorUnitDigits } from './currency-metadata';

package/src/Components/internal/debug.ts

@@ -0,0 +1,12 @@
+/** Single-line formatter for console logs. Handles Error stacks and JSON circular refs. */
+export function fmt(value: unknown): string {
+  if (value instanceof Error) {
+    return value.stack ? `${value.message}\n${value.stack}` : value.message;
+  }
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}

package/src/Components/internal/flags.ts

@@ -0,0 +1,20 @@
+// Maps an ISO 3166-1 alpha-2 code to its regional-indicator emoji flag. Works
+// out of the box on iOS and Android 8+ via the system emoji font. Returns an
+// empty string for falsy / non-2-letter codes so callers can render a neutral
+// fallback without branching.
+
+const REGIONAL_INDICATOR_A = 0x1f1e6;
+const UPPERCASE_A = 'A'.charCodeAt(0);
+
+export function flagEmoji(code: string | undefined | null): string {
+  if (!code || code.length !== 2) return '';
+  const upper = code.toUpperCase();
+  const first = upper.charCodeAt(0);
+  const second = upper.charCodeAt(1);
+  if (first < UPPERCASE_A || first > UPPERCASE_A + 25) return '';
+  if (second < UPPERCASE_A || second > UPPERCASE_A + 25) return '';
+  return (
+    String.fromCodePoint(REGIONAL_INDICATOR_A + (first - UPPERCASE_A)) +
+    String.fromCodePoint(REGIONAL_INDICATOR_A + (second - UPPERCASE_A))
+  );
+}

package/src/Components/internal/form-state/BillingAddressFormStateProvider.tsx

@@ -0,0 +1,283 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { usePrimerCheckout } from '../../hooks/usePrimerCheckout';
+import { debounce, type DebouncedFunction } from '../../../utils/debounce';
+import { fmt } from '../debug';
+import { getBillingAddressVisibility } from '../billingAddressOptions';
+import type { PrimerAddress } from '../../../models/PrimerClientSession';
+import type {
+  BillingAddressField,
+  BillingAddressFormErrors,
+  UsePrimerBillingAddressFormReturn,
+} from '../../types/BillingAddressFormTypes';
+
+const LOG = '[BillingAddressFormState]';
+const DEBOUNCE_MS = 275;
+
+interface BillingFields {
+  firstName: string;
+  lastName: string;
+  addressLine1: string;
+  addressLine2: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  countryCode: string;
+}
+
+const EMPTY_FIELDS: BillingFields = {
+  firstName: '',
+  lastName: '',
+  addressLine1: '',
+  addressLine2: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  countryCode: '',
+};
+
+const EMPTY_TOUCHED: Record<BillingAddressField, boolean> = {
+  firstName: false,
+  lastName: false,
+  addressLine1: false,
+  addressLine2: false,
+  city: false,
+  state: false,
+  postalCode: false,
+  countryCode: false,
+};
+
+const REQUIRED_FIELDS: BillingAddressField[] = [
+  'firstName',
+  'lastName',
+  'addressLine1',
+  'city',
+  'state',
+  'postalCode',
+  'countryCode',
+];
+
+function fieldsToAddress(fields: BillingFields): PrimerAddress {
+  return {
+    firstName: fields.firstName || undefined,
+    lastName: fields.lastName || undefined,
+    addressLine1: fields.addressLine1 || undefined,
+    addressLine2: fields.addressLine2 || undefined,
+    city: fields.city || undefined,
+    state: fields.state || undefined,
+    postalCode: fields.postalCode || undefined,
+    countryCode: fields.countryCode || undefined,
+  };
+}
+
+const BillingAddressFormStateContext = createContext<UsePrimerBillingAddressFormReturn | null>(null);
+
+/**
+ * Holds billing-address state above the navigation stack so values survive screen
+ * unmounts (specifically: CardFormScreen unmounts when CountrySelectorScreen is
+ * pushed on top). Also means every `usePrimerBillingAddressForm()` call shares the same
+ * state — the country selector can write while the form screen reads.
+ */
+export function BillingAddressFormStateProvider({ children }: { children: ReactNode }) {
+  const { setBillingAddress: providerSetBillingAddress, clientSession } = usePrimerCheckout();
+
+  const { fields: visibleFields, sectionVisible } = useMemo(
+    () => getBillingAddressVisibility(clientSession),
+    [clientSession]
+  );
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [addressLine1, setAddressLine1] = useState('');
+  const [addressLine2, setAddressLine2] = useState('');
+  const [city, setCity] = useState('');
+  const [stateValue, setStateValue] = useState('');
+  const [postalCode, setPostalCode] = useState('');
+  const [countryCode, setCountryCode] = useState('');
+  const [touched, setTouched] = useState<Record<BillingAddressField, boolean>>(EMPTY_TOUCHED);
+
+  const fieldsRef = useRef<BillingFields>({ ...EMPTY_FIELDS });
+  const debouncedRef = useRef<DebouncedFunction<(address: PrimerAddress) => void> | null>(null);
+  // Prefill from clientSession.customer.billingAddress runs at most once per provider
+  // lifecycle. Subsequent client-session updates do not re-seed fields — otherwise the
+  // shopper's edits would be clobbered every time the session refreshes.
+  const hasPrefilledRef = useRef(false);
+
+  useEffect(() => {
+    if (hasPrefilledRef.current) return;
+    const initial = clientSession?.customer?.billingAddress;
+    if (!initial) return;
+
+    const next: BillingFields = { ...fieldsRef.current };
+    let changed = false;
+    (Object.keys(EMPTY_FIELDS) as BillingAddressField[]).forEach((field) => {
+      const value = initial[field];
+      if (typeof value === 'string' && value.length > 0 && next[field] === '') {
+        next[field] = value;
+        changed = true;
+      }
+    });
+    if (!changed) return;
+
+    fieldsRef.current = next;
+    setFirstName(next.firstName);
+    setLastName(next.lastName);
+    setAddressLine1(next.addressLine1);
+    setAddressLine2(next.addressLine2);
+    setCity(next.city);
+    setStateValue(next.state);
+    setPostalCode(next.postalCode);
+    setCountryCode(next.countryCode);
+    hasPrefilledRef.current = true;
+  }, [clientSession]);
+
+  useEffect(() => {
+    debouncedRef.current = debounce((address: PrimerAddress) => {
+      providerSetBillingAddress(address).catch((err) => {
+        console.warn(`${LOG} setBillingAddress error ${fmt(err)}`);
+      });
+    }, DEBOUNCE_MS);
+    return () => debouncedRef.current?.cancel();
+  }, [providerSetBillingAddress]);
+
+  const syncToNative = useCallback(() => {
+    debouncedRef.current?.(fieldsToAddress(fieldsRef.current));
+  }, []);
+
+  const makeUpdater = useCallback(
+    (field: BillingAddressField, setState: (value: string) => void) => {
+      return (value: string) => {
+        setState(value);
+        fieldsRef.current = { ...fieldsRef.current, [field]: value };
+        syncToNative();
+      };
+    },
+    [syncToNative]
+  );
+
+  const updateFirstName = useMemo(() => makeUpdater('firstName', setFirstName), [makeUpdater]);
+  const updateLastName = useMemo(() => makeUpdater('lastName', setLastName), [makeUpdater]);
+  const updateAddressLine1 = useMemo(() => makeUpdater('addressLine1', setAddressLine1), [makeUpdater]);
+  const updateAddressLine2 = useMemo(() => makeUpdater('addressLine2', setAddressLine2), [makeUpdater]);
+  const updateCity = useMemo(() => makeUpdater('city', setCity), [makeUpdater]);
+  const updateState = useMemo(() => makeUpdater('state', setStateValue), [makeUpdater]);
+  const updatePostalCode = useMemo(() => makeUpdater('postalCode', setPostalCode), [makeUpdater]);
+  const updateCountryCode = useMemo(() => makeUpdater('countryCode', setCountryCode), [makeUpdater]);
+
+  const markFieldTouched = useCallback((field: BillingAddressField) => {
+    setTouched((prev) => (prev[field] ? prev : { ...prev, [field]: true }));
+  }, []);
+
+  const currentFields: BillingFields = {
+    firstName,
+    lastName,
+    addressLine1,
+    addressLine2,
+    city,
+    state: stateValue,
+    postalCode,
+    countryCode,
+  };
+
+  const effectiveRequired = useMemo(() => REQUIRED_FIELDS.filter((f) => visibleFields[f]), [visibleFields]);
+
+  const isValid = useMemo(
+    () => effectiveRequired.every((f) => currentFields[f].trim().length > 0),
+    [effectiveRequired, firstName, lastName, addressLine1, city, stateValue, postalCode, countryCode]
+  );
+
+  const errors = useMemo(() => {
+    const visible: BillingAddressFormErrors = {};
+    for (const field of effectiveRequired) {
+      if (touched[field] && currentFields[field].trim().length === 0) {
+        visible[field] = 'required';
+      }
+    }
+    return visible;
+  }, [effectiveRequired, touched, firstName, lastName, addressLine1, city, stateValue, postalCode, countryCode]);
+
+  const flush = useCallback(async () => {
+    debouncedRef.current?.flush();
+    try {
+      await providerSetBillingAddress(fieldsToAddress(fieldsRef.current));
+    } catch (err) {
+      console.warn(`${LOG} flush error ${fmt(err)}`);
+    }
+  }, [providerSetBillingAddress]);
+
+  const getAddress = useCallback((): PrimerAddress => fieldsToAddress(fieldsRef.current), []);
+
+  const reset = useCallback(() => {
+    setFirstName('');
+    setLastName('');
+    setAddressLine1('');
+    setAddressLine2('');
+    setCity('');
+    setStateValue('');
+    setPostalCode('');
+    setCountryCode('');
+    setTouched(EMPTY_TOUCHED);
+    fieldsRef.current = { ...EMPTY_FIELDS };
+    debouncedRef.current?.cancel();
+  }, []);
+
+  const value = useMemo<UsePrimerBillingAddressFormReturn>(
+    () => ({
+      firstName,
+      lastName,
+      addressLine1,
+      addressLine2,
+      city,
+      state: stateValue,
+      postalCode,
+      countryCode,
+      updateFirstName,
+      updateLastName,
+      updateAddressLine1,
+      updateAddressLine2,
+      updateCity,
+      updateState,
+      updatePostalCode,
+      updateCountryCode,
+      isValid,
+      errors,
+      markFieldTouched,
+      visibleFields,
+      sectionVisible,
+      flush,
+      getAddress,
+      reset,
+    }),
+    [
+      firstName,
+      lastName,
+      addressLine1,
+      addressLine2,
+      city,
+      stateValue,
+      postalCode,
+      countryCode,
+      updateFirstName,
+      updateLastName,
+      updateAddressLine1,
+      updateAddressLine2,
+      updateCity,
+      updateState,
+      updatePostalCode,
+      updateCountryCode,
+      isValid,
+      errors,
+      markFieldTouched,
+      visibleFields,
+      sectionVisible,
+      flush,
+      getAddress,
+      reset,
+    ]
+  );
+
+  return <BillingAddressFormStateContext.Provider value={value}>{children}</BillingAddressFormStateContext.Provider>;
+}
+
+export function useBillingAddressFormStateContext(): UsePrimerBillingAddressFormReturn | null {
+  return useContext(BillingAddressFormStateContext);
+}