@spare-technologies/spare-link 0.1.0-beta.1 → 1.0.1

package/src/core/services/payment-flow-state.ts

@@ -1,124 +0,0 @@
-import type { ConsentResponse, CopResponse, LinkSessionResponse, ProviderSummary } from '../models';
-
-/** Phases the payment flow controller transitions through. */
-export type PaymentFlowPhase =
-  | 'idle'
-  | 'hydrating'
-  | 'bankSelection'
-  | 'consentDetails'
-  | 'redirecting'
-  | 'awaitingCallback'
-  | 'succeeded'
-  | 'failed'
-  | 'cancelled';
-
-export interface PaymentFlowState {
-  phase: PaymentFlowPhase;
-  session?: LinkSessionResponse;
-  providers: ProviderSummary[];
-  selectedProvider?: ProviderSummary;
-  consent?: ConsentResponse;
-  /** Confirmation-of-Payee result, threaded into the consentDetails phase. */
-  copResponse?: CopResponse;
-  /** True while Confirmation-of-Payee is loading for domestic SIP. */
-  isCopLoading?: boolean;
-  /**
-   * True when this session was actually eligible for Confirmation-of-Payee
-   * (UAE tenant, unverified, payment type supports it) — as opposed to
-   * merely supporting it by payment type. Lets the presenter distinguish
-   * "not applicable" from "was attempted but the response never arrived".
-   */
-  copApplicable?: boolean;
-  exchangeCode?: string;
-  linkSessionId?: string;
-  merchantRef?: string;
-  errorCode?: string;
-  errorMessage?: string;
-  providerName?: string;
-}
-
-const EMPTY_PROVIDERS: ProviderSummary[] = [];
-
-export const PaymentFlowStates = {
-  idle(): PaymentFlowState {
-    return { phase: 'idle', providers: EMPTY_PROVIDERS };
-  },
-  hydrating(): PaymentFlowState {
-    return { phase: 'hydrating', providers: EMPTY_PROVIDERS };
-  },
-  bankSelection(args: {
-    session: LinkSessionResponse;
-    providers: ProviderSummary[];
-  }): PaymentFlowState {
-    return { phase: 'bankSelection', session: args.session, providers: args.providers };
-  },
-  consentDetails(args: {
-    session: LinkSessionResponse;
-    selectedProvider: ProviderSummary;
-    copResponse?: CopResponse;
-    isCopLoading?: boolean;
-    copApplicable?: boolean;
-  }): PaymentFlowState {
-    return {
-      phase: 'consentDetails',
-      session: args.session,
-      providers: EMPTY_PROVIDERS,
-      selectedProvider: args.selectedProvider,
-      ...(args.copResponse ? { copResponse: args.copResponse } : {}),
-      ...(args.isCopLoading !== undefined ? { isCopLoading: args.isCopLoading } : {}),
-      ...(args.copApplicable !== undefined ? { copApplicable: args.copApplicable } : {}),
-    };
-  },
-  redirecting(args: {
-    consent: ConsentResponse;
-    selectedProvider?: ProviderSummary;
-  }): PaymentFlowState {
-    return {
-      phase: 'redirecting',
-      providers: EMPTY_PROVIDERS,
-      consent: args.consent,
-      ...(args.selectedProvider ? { selectedProvider: args.selectedProvider } : {}),
-    };
-  },
-  awaitingCallback(args: {
-    providerName?: string;
-    session?: LinkSessionResponse;
-    selectedProvider?: ProviderSummary;
-  }): PaymentFlowState {
-    return {
-      phase: 'awaitingCallback',
-      providers: EMPTY_PROVIDERS,
-      ...(args.providerName ? { providerName: args.providerName } : {}),
-      ...(args.session ? { session: args.session } : {}),
-      ...(args.selectedProvider ? { selectedProvider: args.selectedProvider } : {}),
-    };
-  },
-  succeeded(args: {
-    exchangeCode?: string;
-    linkSessionId?: string;
-    merchantRef?: string;
-    selectedProvider?: ProviderSummary;
-    session?: LinkSessionResponse;
-  }): PaymentFlowState {
-    return {
-      phase: 'succeeded',
-      providers: EMPTY_PROVIDERS,
-      ...(args.exchangeCode ? { exchangeCode: args.exchangeCode } : {}),
-      ...(args.linkSessionId ? { linkSessionId: args.linkSessionId } : {}),
-      ...(args.merchantRef ? { merchantRef: args.merchantRef } : {}),
-      ...(args.selectedProvider ? { selectedProvider: args.selectedProvider } : {}),
-      ...(args.session ? { session: args.session } : {}),
-    };
-  },
-  failed(args: { errorCode: string; errorMessage?: string }): PaymentFlowState {
-    return {
-      phase: 'failed',
-      providers: EMPTY_PROVIDERS,
-      errorCode: args.errorCode,
-      ...(args.errorMessage ? { errorMessage: args.errorMessage } : {}),
-    };
-  },
-  cancelled(): PaymentFlowState {
-    return { phase: 'cancelled', providers: EMPTY_PROVIDERS };
-  },
-} as const;

package/src/core/services/payment-result-mapper.ts

@@ -1,41 +0,0 @@
-import type { PaymentResult } from '../../public/payment-result';
-import {
-  paymentAbandoned,
-  paymentCancelled,
-  paymentFailed,
-  paymentSuccess,
-} from '../../public/payment-result';
-import type { PaymentFlowState } from './payment-flow-state';
-
-/** Map a terminal controller state to a {@link PaymentResult}. */
-export function paymentResultFromFlowState(
-  state: PaymentFlowState,
-  linkToken: string,
-  bankId?: string,
-): PaymentResult | null {
-  const resolvedBankId = bankId ?? state.selectedProvider?.id;
-  switch (state.phase) {
-    case 'succeeded':
-      return paymentSuccess({
-        linkToken,
-        ...(state.exchangeCode ? { exchangeCode: state.exchangeCode } : {}),
-        ...(state.linkSessionId ? { linkSessionId: state.linkSessionId } : {}),
-        ...(state.merchantRef ? { merchantRef: state.merchantRef } : {}),
-        ...(resolvedBankId ? { bankId: resolvedBankId } : {}),
-        resolvedAtMs: Date.now(),
-      });
-    case 'failed':
-      return paymentFailed({
-        linkToken,
-        errorCode: state.errorCode ?? 'unknown_error',
-        resolvedAtMs: Date.now(),
-      });
-    case 'cancelled':
-      return paymentCancelled({
-        linkToken,
-        ...(resolvedBankId ? { bankId: resolvedBankId } : {}),
-        resolvedAtMs: Date.now(),
-      });
-  }
-  return paymentAbandoned({ linkToken, resolvedAtMs: Date.now() });
-}

package/src/core/services/presentation-utils.ts

@@ -1,4 +0,0 @@
-export function formatAmount(value: { amount: string; currency: string } | undefined): string {
-  if (!value) return '—';
-  return `${value.amount} ${value.currency}`;
-}

package/src/core/services/redirect-buffer.ts

@@ -1,34 +0,0 @@
-/** Module-level buffer for a bank-return URI received before a flow is active. */
-interface BufferedRedirect {
-  uri: string;
-}
-
-let buffered: BufferedRedirect | null = null;
-/** Fingerprint of the last consumed URI — blocks re-buffer after consume / double-delivery. */
-let lastHandledUri: string | null = null;
-
-export function setBufferedRedirect(uri: string): void {
-  if (uri === buffered?.uri || uri === lastHandledUri) {
-    return;
-  }
-  buffered = { uri };
-}
-
-export function peekBufferedRedirect(): string | null {
-  return buffered?.uri ?? null;
-}
-
-export function consumeBufferedRedirect(): string | null {
-  const value = buffered?.uri ?? null;
-  buffered = null;
-  if (value) {
-    lastHandledUri = value;
-  }
-  return value;
-}
-
-/** @internal Clears buffer state between tests. */
-export function resetRedirectBufferForTests(): void {
-  buffered = null;
-  lastHandledUri = null;
-}

package/src/core/services/user-friendly-messages.ts

@@ -1,39 +0,0 @@
-/**
- * Maps machine-readable error codes to safe user-facing copy.
- * Raw backend or bank messages must never be shown directly.
- */
-export function userFriendlyMessageFor(errorCode: string): string {
-  switch (errorCode) {
-    case 'network_timeout':
-      return 'Connection timed out. Please check your connection and try again.';
-    case 'session_expired':
-      return 'Your payment session has expired. Please start again.';
-    case 'session_cancelled':
-      return 'The payment was cancelled.';
-    case 'session_already_completed':
-      return 'This payment has already been completed.';
-    case 'invalid_token':
-      return 'The payment link is invalid or has expired.';
-    case 'bank_unavailable':
-      return 'Your bank is temporarily unavailable. Please try again later.';
-    case 'consent_creation_failed':
-      return 'Unable to initiate the payment. Please try again.';
-    case 'rate_limit_exceeded':
-      return 'Too many attempts. Please wait a moment and try again.';
-    case 'redirect_failed':
-    case 'bank_launch_failed':
-      return 'Unable to open your bank app. Please try again.';
-    case 'session_timeout':
-      return 'The payment timed out waiting for your bank. Please try again.';
-    case 'recovery_exhausted':
-      return 'This payment session could not be recovered. Please start again.';
-    case 'hydration_error':
-    case 'network_error':
-    case 'SP500':
-      return 'Your bank could not complete the payment. Please try again.';
-    case 'authorize_failed':
-      return 'Payment could not be completed. Please try again.';
-    default:
-      return 'Something went wrong. Please try again.';
-  }
-}

package/src/internal/telemetry-collector.ts

@@ -1,90 +0,0 @@
-/**
- * Best-effort device + geolocation telemetry collector. Each call site catches
- * runtime failures so a permission denial or missing native module degrades
- * to a partial payload instead of throwing.
- */
-import { Platform } from 'react-native';
-import { SDK_VERSION } from '../version';
-import { createLogger } from './logger';
-
-const log = createLogger('TelemetryCollector');
-
-const LOCATION_TIMEOUT_MS = 5_000;
-
-interface DeviceLike {
-  modelName?: string | null;
-  osVersion?: string | null;
-}
-
-interface LocationLike {
-  requestForegroundPermissionsAsync(): Promise<{ status: 'granted' | 'denied' | 'undetermined' }>;
-  getCurrentPositionAsync(opts: { accuracy?: number }): Promise<{
-    coords: { latitude: number; longitude: number; accuracy: number | null };
-  }>;
-}
-
-async function loadDevice(): Promise<DeviceLike | null> {
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    return require('expo-device') as DeviceLike;
-  } catch {
-    return null;
-  }
-}
-
-async function loadLocation(): Promise<LocationLike | null> {
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    return require('expo-location') as LocationLike;
-  } catch {
-    return null;
-  }
-}
-
-export async function collectTelemetry(): Promise<Record<string, unknown>> {
-  log.fine('collect: gathering device telemetry');
-  const [deviceMod, locationMod] = await Promise.all([loadDevice(), loadLocation()]);
-
-  const payload: Record<string, unknown> = {
-    platform: 'react_native',
-    sdk_version: SDK_VERSION,
-    os: Platform.OS,
-  };
-
-  const model = deviceMod?.modelName ?? null;
-  const osVersion = deviceMod?.osVersion ?? null;
-  if (model && osVersion) {
-    payload.device_fingerprint = `${model}_${osVersion}`;
-  }
-
-  if (locationMod) {
-    try {
-      const permission = await locationMod.requestForegroundPermissionsAsync();
-      if (permission.status === 'granted') {
-        const position = await Promise.race<{
-          coords: { latitude: number; longitude: number; accuracy: number | null };
-        } | null>([
-          locationMod.getCurrentPositionAsync({ accuracy: 3 }),
-          new Promise((resolve) => setTimeout(() => resolve(null), LOCATION_TIMEOUT_MS)),
-        ]);
-        if (position) {
-          payload.geolocation = {
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude,
-            accuracy_m: position.coords.accuracy,
-          };
-        } else {
-          payload.geolocation = { unavailable: 'timeout' };
-        }
-      } else {
-        payload.geolocation = { unavailable: 'permission_denied' };
-      }
-    } catch (e) {
-      log.warning(`collect: geolocation failed — ${e instanceof Error ? e.message : String(e)}`);
-      payload.geolocation = { unavailable: 'error' };
-    }
-  }
-
-  log.fine(`collect: payload keys=${Object.keys(payload).join(',')}`);
-  return payload;
-}

package/src/public/constants.ts

@@ -1,14 +0,0 @@
-/**
- * Max non-terminal `resumeIfNeeded` recovery attempts before the SDK gives up
- * and resolves the flow as failed with code `recovery_exhausted`.
- */
-export const kMaxRecoveryAttempts = 3 as const;
-
-/** Default per-request HTTP timeout in milliseconds (15s). */
-export const DEFAULT_REQUEST_TIMEOUT_MS = 15_000 as const;
-
-/** How long the SDK waits for a bank callback before auto-failing with `session_timeout`. */
-export const DEFAULT_AWAITING_CALLBACK_TIMEOUT_MS = 5 * 60 * 1000;
-
-/** Polling interval while the flow is in awaitingCallback (status endpoint). */
-export const DEFAULT_AWAITING_CALLBACK_POLL_MS = 10_000;

package/src/public/spare-link-callbacks.ts

@@ -1,20 +0,0 @@
-import type { PaymentResult } from './payment-result';
-import type { SpareLinkEventType } from './spare-link-event';
-
-/** Called on successful payment. Both args may be null when recovered. */
-export type SpareLinkSuccessCallback = (
-  exchangeCode: string | undefined,
-  linkSessionId: string | undefined,
-) => void;
-
-/** Called when the flow resolves to any terminal state (success or failure). */
-export type SpareLinkExitCallback = (result: PaymentResult) => void;
-
-/** Called for intermediate lifecycle events (string tag). Best-effort — exceptions are caught. */
-export type SpareLinkEventCallback = (event: SpareLinkEventType) => void;
-
-export interface SpareLinkCallbacks {
-  onSuccess?: SpareLinkSuccessCallback;
-  onExit?: SpareLinkExitCallback;
-  onEvent?: SpareLinkEventCallback;
-}

package/src/ui/consent/charge-bearer-display.tsx

@@ -1,68 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { StyleSheet, Text, View } from 'react-native';
-import { Colors, FONT_FAMILY } from '../theme';
-
-export interface ChargeBearerDisplayProps {
-  chargeBearer: string | undefined;
-}
-
-const OPTIONS = [
-  { label: 'Shared', apiValue: 'Shared' },
-  { label: 'Debtor', apiValue: 'BorneByDebtor' },
-  { label: 'Creditor', apiValue: 'BorneByCreditor' },
-] as const;
-
-export function ChargeBearerDisplay(props: ChargeBearerDisplayProps): JSX.Element {
-  const bearer = props.chargeBearer?.trim();
-  return (
-    <View style={styles.card} testID="charge-bearer-display">
-      <Text style={styles.title}>Charges model</Text>
-      <View style={styles.options}>
-        {OPTIONS.map((option) => {
-          const selected = bearer === option.apiValue;
-          return (
-            <View key={option.apiValue} style={styles.option}>
-              {selected ? (
-                <Ionicons name="checkmark-circle" size={20} color={Colors.spareBlue} />
-              ) : (
-                <View style={styles.unselectedMarker} />
-              )}
-              <Text style={[styles.optionLabel, selected && styles.optionLabelSelected]}>
-                {option.label}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: Colors.surfaceCard,
-    borderRadius: 16,
-    paddingVertical: 14,
-    paddingHorizontal: 20,
-    marginBottom: 14,
-    gap: 16,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.divider,
-    shadowColor: '#000000',
-    shadowOpacity: 0.06,
-    shadowRadius: 6,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  title: {
-    fontFamily: FONT_FAMILY,
-    fontSize: 14,
-    fontWeight: '700',
-    color: Colors.textPrimary,
-  },
-  options: { flexDirection: 'row', flexWrap: 'wrap', gap: 24 },
-  option: { flexDirection: 'row', alignItems: 'center', gap: 4 },
-  unselectedMarker: { width: 20, height: 20 },
-  optionLabel: { fontFamily: FONT_FAMILY, fontSize: 14, color: Colors.textMuted },
-  optionLabelSelected: { color: Colors.textPrimary, fontWeight: '600' },
-});

package/src/ui/consent/consent-accordion.tsx

@@ -1,89 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Colors } from '../theme';
-import { linkFontFamilyForWeight } from '../theme/fonts';
-
-export interface ConsentAccordionItem {
-  header: string;
-  children: React.ReactNode;
-  initiallyExpanded?: boolean;
-}
-
-export interface ConsentAccordionProps {
-  items: ConsentAccordionItem[];
-}
-
-export function ConsentAccordion(props: ConsentAccordionProps): JSX.Element {
-  return (
-    <View style={styles.wrap} testID="consent-accordion">
-      {props.items.map((item, index) => (
-        <View key={item.header}>
-          <AccordionSection {...item} />
-          {index < props.items.length - 1 ? (
-            <View style={styles.divider} testID="consent-accordion-divider" />
-          ) : null}
-        </View>
-      ))}
-    </View>
-  );
-}
-
-function AccordionSection(props: ConsentAccordionItem): JSX.Element {
-  const [expanded, setExpanded] = useState(props.initiallyExpanded ?? true);
-  return (
-    <View style={styles.section}>
-      <Pressable
-        accessibilityRole="button"
-        onPress={() => setExpanded((e) => !e)}
-        style={styles.header}
-      >
-        <Text style={styles.headerText}>{props.header}</Text>
-        <Ionicons
-          name={expanded ? 'chevron-up' : 'chevron-down'}
-          size={18}
-          color={Colors.spareBlue}
-        />
-      </Pressable>
-      {expanded ? <View style={styles.body}>{props.children}</View> : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  wrap: {
-    backgroundColor: Colors.cardMutedBg,
-    borderRadius: 16,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    marginBottom: 14,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.divider,
-    shadowColor: '#404029',
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 1 },
-    elevation: 2,
-  },
-  section: { paddingVertical: 8 },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    minHeight: 48,
-  },
-  headerText: {
-    fontFamily: linkFontFamilyForWeight('700'),
-    fontSize: 16,
-    fontWeight: '700',
-    color: Colors.textPrimary,
-  },
-  body: { paddingTop: 4, paddingBottom: 12 },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: Colors.divider,
-    marginHorizontal: 20,
-    marginVertical: 4,
-  },
-});

package/src/ui/consent/consent-summary-section.tsx

@@ -1,19 +0,0 @@
-import type { ConsentSummaryData } from '../../core/services/consent-presenter';
-import { InternationalPaymentSummary } from './international-payment-summary';
-import { MultiPaymentSummary } from './multi-payment-summary';
-import { SinglePaymentSummary } from './single-payment-summary';
-
-export interface ConsentSummarySectionProps {
-  data: ConsentSummaryData;
-}
-
-export function ConsentSummarySection(props: ConsentSummarySectionProps): JSX.Element {
-  switch (props.data.variant) {
-    case 'singlePayment':
-      return <SinglePaymentSummary data={props.data} />;
-    case 'international':
-      return <InternationalPaymentSummary data={props.data} />;
-    case 'multiPayment':
-      return <MultiPaymentSummary data={props.data} />;
-  }
-}

package/src/ui/consent/cop-information.tsx

@@ -1,121 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, Text, View } from 'react-native';
-import type { CopDisplayData, CopMatchIndicator } from '../../core/services/consent-presenter';
-import { Colors, FONT_FAMILY } from '../theme';
-
-/** Matches {@link LabelValueRows} default horizontal inset inside accordions. */
-const ACCORDION_BODY_INSET = 20;
-
-const COP_COLORS: Record<CopMatchIndicator, string> = {
-  match: '#81C784',
-  partialMatch: '#E57373',
-  noMatch: '#FFB74D',
-  unknown: Colors.textMuted,
-};
-
-const COP_ICONS: Record<CopMatchIndicator, keyof typeof Ionicons.glyphMap> = {
-  match: 'checkmark-circle-outline',
-  partialMatch: 'warning-outline',
-  noMatch: 'close-circle-outline',
-  unknown: 'information-circle-outline',
-};
-
-export function CopLoadingPlaceholder(): JSX.Element {
-  const opacity = useRef(new Animated.Value(0.35)).current;
-
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 1, duration: 450, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 0.35, duration: 450, useNativeDriver: true }),
-      ]),
-    );
-    animation.start();
-    return () => animation.stop();
-  }, [opacity]);
-
-  return (
-    <View style={styles.loadingRow} testID="consent-cop-loading">
-      <Animated.View style={[styles.loadingBar, styles.loadingBarWide, { opacity }]} />
-      <Animated.View style={[styles.loadingBar, styles.loadingBarNarrow, { opacity }]} />
-    </View>
-  );
-}
-
-export function CopInformation(props: { display: CopDisplayData }): JSX.Element {
-  const { display } = props;
-  const color = COP_COLORS[display.indicator];
-  const icon = COP_ICONS[display.indicator];
-
-  if (display.indicator === 'match') {
-    return (
-      <View style={styles.matchRow} testID="consent-cop-information">
-        <Text style={[styles.statusLabel, { color }]}>{display.statusLabel}</Text>
-        <Ionicons name={icon} size={18} color={color} />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.column} testID="consent-cop-information">
-      <View style={styles.statusRow}>
-        <View style={styles.statusLeft}>
-          <Ionicons name={icon} size={18} color={color} />
-          <Text style={[styles.statusLabel, { color }]}>{display.statusLabel}</Text>
-        </View>
-        {display.maskedName ? <Text style={styles.maskedName}>{display.maskedName}</Text> : null}
-      </View>
-      {display.paragraphs.map((paragraph) => (
-        <Text key={paragraph} style={[styles.paragraph, { color }]}>
-          {paragraph}
-        </Text>
-      ))}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  loadingRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: 4,
-    paddingHorizontal: ACCORDION_BODY_INSET,
-  },
-  loadingBar: {
-    height: 12,
-    backgroundColor: '#E5E7EB',
-    borderRadius: 4,
-  },
-  loadingBarWide: { width: 96 },
-  loadingBarNarrow: { width: 48 },
-  matchRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: 4,
-    paddingHorizontal: ACCORDION_BODY_INSET,
-  },
-  column: {
-    gap: 8,
-    paddingTop: 4,
-    paddingHorizontal: ACCORDION_BODY_INSET,
-  },
-  statusRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: 8,
-  },
-  statusLeft: { flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1 },
-  statusLabel: { fontFamily: FONT_FAMILY, fontSize: 14, fontWeight: '500' },
-  maskedName: {
-    fontFamily: FONT_FAMILY,
-    fontSize: 14,
-    color: Colors.textMuted,
-    textAlign: 'right',
-    flex: 1,
-  },
-  paragraph: { fontFamily: FONT_FAMILY, fontSize: 14, lineHeight: 22, fontWeight: '400' },
-});