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

package/src/Components/internal/screens/CardFormScreen.tsx

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import type { TextStyle } from 'react-native';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+import { NavigationHeader } from '../navigation/NavigationHeader';
+import { useNavigation } from '../navigation/useNavigation';
+import { CheckoutRoute } from '../navigation/types';
+import { usePrimerLocalization } from '../localization';
+import { useCheckoutFlow } from '../checkout-flow/CheckoutFlowContext';
+import { PrimerCardForm } from '../../PrimerCardForm';
+import { PrimerBillingAddressForm } from '../../PrimerBillingAddressForm';
+import { usePrimerCardForm } from '../../hooks/usePrimerCardForm';
+import { usePrimerBillingAddressForm } from '../../hooks/usePrimerBillingAddressForm';
+import { useSheetHeight } from '../checkout-sheet';
+import { useBottomSafeArea } from './useBottomSafeArea';
+import { useKeyboardPadding } from './useKeyboardPadding';
+
+// CheckoutSheet drag-handle chrome above our content: paddingTop(12) + handle(4) + paddingBottom(4).
+const DRAG_HANDLE_AREA = 20;
+// Matches CheckoutSheet's DEFAULT_HEIGHT_RATIO — the sheet never exceeds 92% of the screen.
+const MAX_SHEET_HEIGHT_RATIO = 0.92;
+
+export function CardFormScreen() {
+  const tokens = usePrimerTheme();
+  const { t } = usePrimerLocalization();
+  const { pop, replace, canGoBack } = useNavigation();
+  const { onCancel } = useCheckoutFlow();
+  const cardForm = usePrimerCardForm();
+  const billingForm = usePrimerBillingAddressForm();
+  const bottomInset = useBottomSafeArea();
+  const keyboardPadding = useKeyboardPadding();
+  const { height: screenHeight } = useWindowDimensions();
+  const { requestHeight } = useSheetHeight();
+
+  // Measured so the sheet can shrink to fit a short form (92% height is just the cap).
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = useState(0);
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  // Re-request even with the keyboard open: `scrollContentHeight` already inflates by
+  // `keyboardPadding`, so the sheet grows by the keyboard height and the portion above
+  // the keyboard fits header + form + Pay button exactly.
+  useEffect(() => {
+    if (headerHeight === 0 || scrollContentHeight === 0 || footerHeight === 0) return;
+    const desired = DRAG_HANDLE_AREA + headerHeight + scrollContentHeight + footerHeight;
+    const max = screenHeight * MAX_SHEET_HEIGHT_RATIO;
+    const release = requestHeight(Math.min(desired, max));
+    return release;
+  }, [headerHeight, scrollContentHeight, footerHeight, screenHeight, requestHeight]);
+  // Gap between the Pay button and the keyboard / system inset:
+  //   - keyboard closed: max(bottomInset, spacing.large) — clears home indicator / gesture pill.
+  //   - iOS keyboard open: spacing.large (16). `keyboard.endCoordinates.height` already
+  //     includes the home-indicator area, so the bottom inset isn't needed.
+  //   - Android keyboard open: spacing.large + bottomInset (≈40). Android reports just the
+  //     keys area in `endCoordinates.height`, NOT the suggestion / GIF strip above. The extra
+  //     `bottomInset` compensates so the visible gap matches iOS.
+  const footerPaddingBottom =
+    keyboardPadding === 0
+      ? Math.max(bottomInset, tokens.spacing.large)
+      : Platform.OS === 'ios'
+        ? tokens.spacing.large
+        : tokens.spacing.large + Math.max(bottomInset, tokens.spacing.large);
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const canSubmit = cardForm.isValid && billingForm.isValid && !cardForm.isSubmitting;
+
+  // Flush pending billing-address debounce before navigating so native has the full address;
+  // if anything fails before submit dispatches, the user stays on the form instead of stranded
+  // on the processing screen with nothing in flight.
+  const handlePay = useCallback(async () => {
+    if (!canSubmit) return;
+    if (billingForm.sectionVisible) {
+      await billingForm.flush();
+    }
+    replace(CheckoutRoute.processing);
+    void cardForm.submit();
+  }, [canSubmit, cardForm, billingForm, replace]);
+
+  return (
+    <View style={styles.root}>
+      <View onLayout={(e) => setHeaderHeight(e.nativeEvent.layout.height)}>
+        <NavigationHeader
+          title={t('primer_card_form_title')}
+          showBackButton={canGoBack}
+          backLabel={t('primer_common_back')}
+          onBackPress={pop}
+          rightAction={{ label: t('primer_common_button_cancel'), onPress: onCancel }}
+        />
+      </View>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: tokens.spacing.medium + keyboardPadding }]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        onContentSizeChange={(_, h) => setScrollContentHeight(h)}
+      >
+        <PrimerCardForm autoFocus onSubmit={handlePay} />
+        {billingForm.sectionVisible && (
+          <>
+            <View style={styles.divider} />
+            <Text style={styles.sectionTitle}>{t('primer_card_form_billing_address_title')}</Text>
+            <PrimerBillingAddressForm billingForm={billingForm} />
+          </>
+        )}
+      </ScrollView>
+      {/* Opaque overlay over the keyboard's area so form fields don't show through the
+        translucent iOS keyboard. Absolute so it stays out of the flex layout. */}
+      {keyboardPadding > 0 && (
+        <View pointerEvents="none" style={[styles.keyboardOverlay, { height: keyboardPadding }]} />
+      )}
+      <View
+        onLayout={(e) => setFooterHeight(e.nativeEvent.layout.height)}
+        style={[
+          styles.footer,
+          {
+            paddingBottom: footerPaddingBottom,
+            transform: [{ translateY: -keyboardPadding }],
+          },
+        ]}
+      >
+        <TouchableOpacity
+          onPress={handlePay}
+          disabled={!canSubmit}
+          activeOpacity={0.7}
+          style={[styles.payButton, !canSubmit && styles.payButtonDisabled]}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: !canSubmit, busy: cardForm.isSubmitting }}
+          accessibilityLabel={t('accessibility_card_form_submit_label')}
+          accessibilityHint={
+            cardForm.isSubmitting
+              ? t('accessibility_card_form_submit_loading')
+              : canSubmit
+                ? t('accessibility_card_form_submit_hint')
+                : t('accessibility_card_form_submit_disabled')
+          }
+          testID="primer-card-form-submit"
+        >
+          {cardForm.isSubmitting ? (
+            <ActivityIndicator color={tokens.colors.background} />
+          ) : (
+            <Text style={styles.payButtonText}>{t('primer_common_button_pay')}</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, radii, spacing, typography } = tokens;
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    divider: {
+      backgroundColor: colors.border,
+      height: StyleSheet.hairlineWidth,
+      marginVertical: spacing.small,
+    },
+    footer: {
+      backgroundColor: colors.background,
+      paddingHorizontal: spacing.large,
+      paddingTop: spacing.small,
+    },
+    keyboardOverlay: {
+      backgroundColor: colors.background,
+      bottom: 0,
+      left: 0,
+      position: 'absolute',
+      right: 0,
+    },
+    payButton: {
+      alignItems: 'center',
+      backgroundColor: colors.primary,
+      borderRadius: radii.medium,
+      justifyContent: 'center',
+      minHeight: 44,
+      padding: spacing.medium,
+      width: '100%',
+    },
+    payButtonDisabled: {
+      opacity: 0.5,
+    },
+    payButtonText: {
+      color: colors.background,
+      fontFamily: typography.titleLarge.fontFamily,
+      fontSize: typography.titleLarge.fontSize,
+      fontWeight: typography.titleLarge.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.titleLarge.letterSpacing,
+      lineHeight: typography.titleLarge.lineHeight,
+      textAlign: 'center',
+    },
+    root: {
+      flex: 1,
+    },
+    scrollContent: {
+      gap: spacing.medium,
+      paddingBottom: spacing.medium,
+      paddingHorizontal: spacing.large,
+      paddingTop: spacing.large,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    sectionTitle: {
+      color: colors.textPrimary,
+      fontFamily: typography.titleLarge.fontFamily,
+      fontSize: typography.titleLarge.fontSize,
+      fontWeight: typography.titleLarge.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.titleLarge.letterSpacing,
+      lineHeight: typography.titleLarge.lineHeight,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}

package/src/Components/internal/screens/CountrySelectorScreen.tsx

@@ -0,0 +1,253 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { ListRenderItemInfo, TextStyle } from 'react-native';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+import { NavigationHeader } from '../navigation/NavigationHeader';
+import { useNavigation } from '../navigation/useNavigation';
+import { useRoute } from '../navigation/useRoute';
+import { CheckoutRoute } from '../navigation/types';
+import { usePrimerLocalization } from '../localization';
+import { useCheckoutFlow } from '../checkout-flow/CheckoutFlowContext';
+import { PrimerTextInput } from '../../inputs/PrimerTextInput';
+import type { PrimerTextInputRef } from '../../types/CardInputTypes';
+import { usePrimerBillingAddressForm } from '../../hooks/usePrimerBillingAddressForm';
+import { COUNTRIES, getLocalizedCountryName, type CountryCode } from '../countries';
+import { flagEmoji } from '../flags';
+
+const ROW_HEIGHT = 44;
+
+// Row shape used inside the picker: code + the (localized) display name plus
+// the English fallback we keep for searching while the locale is non-English.
+interface CountryListItem {
+  code: CountryCode;
+  englishName: string;
+  name: string;
+}
+
+export function CountrySelectorScreen() {
+  const tokens = usePrimerTheme();
+  const { t, locale } = usePrimerLocalization();
+  const { pop, canGoBack, isAnimating } = useNavigation();
+  const { onCancel } = useCheckoutFlow();
+  const { params } = useRoute<CheckoutRoute.countrySelector>();
+  const billingForm = usePrimerBillingAddressForm();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const initialSelected = params?.selectedCountryCode ?? '';
+  const [query, setQuery] = useState('');
+  const listRef = useRef<FlatList<CountryListItem>>(null);
+  const searchRef = useRef<PrimerTextInputRef>(null);
+
+  // Focus the search input once the push transition finishes — opening the
+  // keyboard mid-slide jumps the layout. We wait for isAnimating to flip back
+  // to false after a true tick (parent starts the transition in its post-mount
+  // effect, which fires after this one).
+  const wasAnimatingRef = useRef(false);
+  useEffect(() => {
+    if (isAnimating) {
+      wasAnimatingRef.current = true;
+      return;
+    }
+    if (wasAnimatingRef.current) {
+      searchRef.current?.focus();
+    }
+  }, [isAnimating]);
+
+  // Build a locale-aware list once per locale: name comes from Intl.DisplayNames with
+  // English fallback, and sort uses Intl.Collator so the order matches the active locale.
+  const localized = useMemo(() => {
+    const collator = new Intl.Collator(locale, { sensitivity: 'base' });
+    return COUNTRIES.map((c) => ({
+      code: c.code,
+      englishName: c.name,
+      name: getLocalizedCountryName(c.code, locale) ?? c.name,
+    })).sort((a, b) => collator.compare(a.name, b.name));
+  }, [locale]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return localized;
+    return localized.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) || c.englishName.toLowerCase().includes(q) || c.code.toLowerCase().includes(q)
+    );
+  }, [query, localized]);
+
+  const initialScrollIndex = useMemo(() => {
+    if (!initialSelected) return 0;
+    const idx = filtered.findIndex((c) => c.code === initialSelected);
+    return idx > 0 ? idx : 0;
+  }, [initialSelected, filtered]);
+
+  const handleSelect = useCallback(
+    (code: CountryCode) => {
+      billingForm.updateCountryCode(code);
+      pop();
+    },
+    [billingForm, pop]
+  );
+
+  const handleClearSearch = useCallback(() => setQuery(''), []);
+
+  const keyExtractor = useCallback((item: CountryListItem) => item.code, []);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<CountryListItem>) => {
+      const isSelected = item.code === initialSelected;
+      return (
+        <TouchableOpacity
+          onPress={() => handleSelect(item.code)}
+          activeOpacity={0.7}
+          style={[styles.row, isSelected && styles.rowSelected]}
+          accessibilityRole="button"
+          accessibilityLabel={t('accessibility_country_selection_item', { countryName: item.name })}
+          accessibilityState={{ selected: isSelected }}
+          testID={`primer-country-selector-row-${item.code}`}
+        >
+          <Text style={styles.flag} accessibilityElementsHidden>
+            {flagEmoji(item.code)}
+          </Text>
+          <Text style={styles.rowLabel} numberOfLines={1}>
+            {item.name}
+          </Text>
+          {isSelected && (
+            <Text style={styles.check} accessibilityElementsHidden>
+              ✓
+            </Text>
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [handleSelect, initialSelected, styles, t]
+  );
+
+  const getItemLayout = useCallback(
+    (_: ArrayLike<CountryListItem> | null | undefined, index: number) => ({
+      length: ROW_HEIGHT,
+      offset: ROW_HEIGHT * index,
+      index,
+    }),
+    []
+  );
+
+  const emptyState = (
+    <View style={styles.empty}>
+      <Text style={styles.emptyText}>{t('primer_country_no_results')}</Text>
+    </View>
+  );
+
+  const searchClearButton =
+    query.length > 0 ? (
+      <TouchableOpacity
+        onPress={handleClearSearch}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        accessibilityRole="button"
+        accessibilityLabel={t('accessibility_country_selection_clear')}
+        testID="primer-country-selector-clear"
+      >
+        <Text style={styles.clear} accessibilityElementsHidden>
+          ✕
+        </Text>
+      </TouchableOpacity>
+    ) : null;
+
+  return (
+    <View style={styles.root}>
+      <NavigationHeader
+        title={t('primer_country_title')}
+        showBackButton={canGoBack}
+        backLabel={t('primer_common_back')}
+        onBackPress={pop}
+        rightAction={{ label: t('primer_common_button_cancel'), onPress: onCancel }}
+      />
+      <View style={styles.searchWrapper}>
+        <PrimerTextInput
+          ref={searchRef}
+          value={query}
+          onChangeText={setQuery}
+          label=""
+          showLabel={false}
+          placeholder={t('primer_country_placeholder_search')}
+          autoCapitalize="none"
+          autoComplete="off"
+          trailingContent={searchClearButton}
+          testID="primer-country-selector-search"
+        />
+      </View>
+      <FlatList
+        ref={listRef}
+        data={filtered}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        initialScrollIndex={initialScrollIndex}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        automaticallyAdjustKeyboardInsets
+        contentContainerStyle={styles.listContent}
+        ListEmptyComponent={emptyState}
+      />
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, radii, spacing, typography } = tokens;
+  return StyleSheet.create({
+    check: {
+      color: colors.iconPrimary,
+      fontSize: typography.bodyLarge.fontSize,
+      marginLeft: spacing.small,
+    },
+    clear: {
+      color: colors.textSecondary,
+      fontSize: typography.bodyLarge.fontSize,
+    },
+    empty: {
+      alignItems: 'center',
+      paddingVertical: spacing.xlarge,
+    },
+    emptyText: {
+      color: colors.textSecondary,
+      fontFamily: typography.fontFamily,
+      fontSize: typography.bodyLarge.fontSize,
+    },
+    flag: {
+      fontSize: typography.bodyLarge.fontSize + 4,
+      marginRight: spacing.small,
+      minWidth: 28,
+    },
+    listContent: {
+      paddingBottom: spacing.large,
+      paddingHorizontal: spacing.large,
+    },
+    root: {
+      flex: 1,
+      paddingTop: spacing.large,
+    },
+    row: {
+      alignItems: 'center',
+      borderRadius: radii.small,
+      flexDirection: 'row',
+      height: ROW_HEIGHT,
+      paddingHorizontal: spacing.medium,
+    },
+    rowLabel: {
+      color: colors.textPrimary,
+      flex: 1,
+      fontFamily: typography.fontFamily,
+      fontSize: typography.bodyLarge.fontSize,
+      letterSpacing: typography.bodyLarge.letterSpacing,
+      lineHeight: typography.bodyLarge.lineHeight,
+    },
+    rowSelected: {
+      backgroundColor: colors.surface,
+    },
+    searchWrapper: {
+      paddingBottom: spacing.medium,
+      paddingHorizontal: spacing.large,
+      paddingTop: spacing.medium,
+    },
+  } satisfies Record<string, TextStyle | object>);
+}

package/src/Components/internal/screens/ErrorScreen.tsx

@@ -0,0 +1,57 @@
+import { View } from 'react-native';
+import { usePrimerTheme } from '../theme';
+import { usePrimerLocalization } from '../localization';
+import { CheckoutRoute, useNavigation, useRoute } from '../navigation';
+import { PrimerErrorScreen } from '../../status';
+import { useStatusScreenHeight } from './useStatusScreenHeight';
+import { useBottomSafeArea } from './useBottomSafeArea';
+import { usePrimerCheckout } from '../../hooks/usePrimerCheckout';
+import { fmt } from '../debug';
+import { PrimerError } from '../../../models/PrimerError';
+
+const LOG = '[ErrorScreen]';
+const CONTENT_HEIGHT = 282;
+const TOP_PADDING = 34;
+
+export function ErrorScreen() {
+  const tokens = usePrimerTheme();
+  const { t } = usePrimerLocalization();
+  const { replace } = useNavigation();
+  const { params } = useRoute<CheckoutRoute.error>();
+  const { retry, clearPaymentOutcome, requestExpandedVaultDisplay } = usePrimerCheckout();
+  const rawBottomInset = useBottomSafeArea();
+  const bottomInset = Math.max(rawBottomInset, tokens.spacing.large);
+  const sheetHeight = TOP_PADDING + CONTENT_HEIGHT + bottomInset;
+  useStatusScreenHeight(sheetHeight);
+
+  const title = params?.title ?? t('primer_checkout_error_title');
+  const subtitle = params?.subtitle ?? params?.error?.description ?? t('primer_checkout_error_subtitle');
+
+  const onRetry = () => {
+    // Navigate to processing first so the user sees an immediate spinner;
+    // the outcome transitioner replaces with success/error when retry resolves.
+    replace(CheckoutRoute.processing);
+    retry().catch((err) => {
+      console.warn(`${LOG} retry error ${fmt(err)}`);
+      // JS-side failures (e.g. configure/setRawData rejecting) never reach the
+      // native onError callback, so paymentOutcome stays null — without this
+      // the user is stuck on the processing spinner.
+      replace(CheckoutRoute.error, err instanceof PrimerError ? { error: err } : undefined);
+    });
+  };
+
+  const onChooseOther = () => {
+    // Flip the vault block to expanded layout (so APMs and the full method list
+    // are visible again) but keep the shopper's selected vault id intact —
+    // they may still want to retry the same vault method, just from the full menu.
+    requestExpandedVaultDisplay();
+    clearPaymentOutcome();
+    replace(CheckoutRoute.methodSelection);
+  };
+
+  return (
+    <View style={{ height: sheetHeight, paddingTop: TOP_PADDING, paddingBottom: bottomInset }}>
+      <PrimerErrorScreen title={title} subtitle={subtitle} onRetry={onRetry} onChooseOtherMethod={onChooseOther} />
+    </View>
+  );
+}

package/src/Components/internal/screens/LoadingScreen.tsx

@@ -0,0 +1,43 @@
+import { View } from 'react-native';
+
+import { usePrimerTheme } from '../theme';
+import { usePrimerLocalization } from '../localization';
+import { CheckoutRoute, useRoute } from '../navigation';
+import { PrimerLoadingScreen } from '../../status';
+import { useStatusScreenHeight } from './useStatusScreenHeight';
+import { useBottomSafeArea } from './useBottomSafeArea';
+
+const CONTENT_HEIGHT = 246;
+
+export function LoadingScreen() {
+  const tokens = usePrimerTheme();
+  const { t } = usePrimerLocalization();
+  const { route, params } = useRoute<CheckoutRoute.splash | CheckoutRoute.loading | CheckoutRoute.processing>();
+  const rawBottomInset = useBottomSafeArea();
+  const bottomInset = Math.max(rawBottomInset, tokens.spacing.large);
+  const sheetHeight = CONTENT_HEIGHT + bottomInset;
+  useStatusScreenHeight(sheetHeight);
+
+  const defaultTitleKey =
+    route === CheckoutRoute.splash
+      ? 'primer_checkout_splash_title'
+      : route === CheckoutRoute.processing
+        ? 'primer_checkout_processing_title'
+        : 'primer_checkout_loading_indicator';
+  const defaultSubtitleKey =
+    route === CheckoutRoute.splash
+      ? 'primer_checkout_splash_subtitle'
+      : route === CheckoutRoute.processing
+        ? 'primer_checkout_processing_subtitle'
+        : 'primer_checkout_loading_subtitle';
+
+  const title = params?.title ?? t(defaultTitleKey);
+  const subtitle = params?.subtitle ?? t(defaultSubtitleKey);
+
+  return (
+    /* eslint-disable-next-line react-native/no-inline-styles -- screen-level layout with fixed height */
+    <View style={{ height: sheetHeight, justifyContent: 'center', paddingBottom: bottomInset }}>
+      <PrimerLoadingScreen title={title} subtitle={subtitle} />
+    </View>
+  );
+}