@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-WVKKJA6U.js → chunk-CPTOADB2.js}

@@ -1,20 +1,53 @@
-import { OTP } from './chunk-52X2VYTD.js';
-import { SecurePayLabel } from './chunk-7CFF4HXS.js';
-import { Amount } from './chunk-VBOXAEPI.js';
-import { DescriptionList } from './chunk-TUTI5HOZ.js';
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { OTP } from './chunk-67IZZ2MJ.js';
+import { SecurePayLabel } from './chunk-JV5YOTOB.js';
+import { Amount } from './chunk-QHAITQIF.js';
+import { DescriptionList } from './chunk-QIKT7LIB.js';
+import { Spinner } from './chunk-KQZ3GLHR.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React4 from 'react';
 import { Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { STATES, isTerminal, recoveryActions, declineHeadline, NOTHING_CHARGED, THREE_DS_TIMEOUT_SECONDS } from '@btndprojects/loam-pay';
+import { STATES, stateText, isTerminal, declineText, recoveryActions, declineHeadline, nothingChargedText, THREE_DS_TIMEOUT_SECONDS } from '@btndprojects/loam-pay';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { icons } from '@btndprojects/loam-icons';
 
+// src/payment-status/payment-status-labels.ts
+var DEFAULT_LABELS = {
+  inProgress: "Payment in progress",
+  headlineAsync: "Your payment is on its way",
+  headlineSync: "Taking your payment",
+  cancelPayment: "Cancel payment",
+  reference: "Reference",
+  processingStatus: (headline, step) => `${headline}. ${step}.`,
+  receiptTitle: "Payment complete",
+  method: "Method",
+  date: "Date",
+  receipt: "Receipt",
+  sentTo: "Sent to",
+  receiptStatus: (title, id) => `${title}. Receipt ${id}.`,
+  chromeLabel: "Your bank is verifying this payment",
+  cancelAndGoBack: "Cancel and go back",
+  approve: "Approve",
+  authorise: "Authorise",
+  codeSent: (contact) => `We sent a code to ${contact}.`,
+  codeGroup: (digits) => `${digits}-digit verification code`,
+  digit: (index, total) => `Digit ${index} of ${total}`,
+  detailsForSupport: "Details for support",
+  nextStep: "Next step",
+  declineCode: "decline_code",
+  network: "network",
+  soft: "soft",
+  hard: "hard",
+  attempt: "attempt",
+  attemptOf: (attempt, allowed) => `${attempt} of ${allowed}`,
+  intent: "intent"
+};
 var TONE_VARIANT = {
   good: "good",
   warn: "warn",
@@ -26,13 +59,15 @@ function StatePill({
   label,
   showCode = false,
   pulse = true,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet);
+  const pay = usePayLabels(labelsProp);
   const def = STATES[state];
   const pulsing = pulse && state === "processing";
-  const words = label ?? def.label;
+  const words = label ?? stateText(state, pay).label;
   const dim = React4.useRef(new Animated.Value(1)).current;
   React4.useEffect(() => {
     if (!pulsing || theme.reduceMotion) {
@@ -78,7 +113,7 @@ function ProcessingStepRow({
   status,
   style
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet);
   const currentAttr = status === "active" ? { "aria-current": "step" } : {};
   return /* @__PURE__ */ jsxs(
@@ -129,57 +164,53 @@ function ProcessingPanel({
   reference,
   reservedUntil,
   onCancel,
-  cancelLabel = "Cancel payment",
-  locale,
+  cancelLabel,
+  locale: localeProp,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet);
-  const resolvedHeadline = headline ?? (isAsync ? "Your payment is on its way" : "Taking your payment");
+  const resolvedHeadline = headline ?? (isAsync ? labels.headlineAsync : labels.headlineSync);
   const active = steps.find((step) => step.status === "active");
   const showAsyncBlock = isAsync && Boolean(asyncNote || reference || reservedUntil);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      role: "region",
-      accessibilityLabel: resolvedHeadline,
-      style: [styles.panel, style],
-      children: [
-        /* @__PURE__ */ jsx(Spinner, { size: "xl", accessibilityLabel: "Payment in progress" }),
-        /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
-          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headline, children: resolvedHeadline }),
-          eta ? /* @__PURE__ */ jsx(Text, { style: styles.eta, children: eta }) : null
-        ] }),
-        /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
-          /* @__PURE__ */ jsx(Amount, { minor: amount, currency, size: "lg", weight: "bold", locale }),
-          /* @__PURE__ */ jsx(Text, { style: styles.method, children: methodLabel })
-        ] }),
-        steps.length > 0 ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.ladder, children: steps.map((step) => /* @__PURE__ */ jsx(ProcessingStepRow, { label: step.label, status: step.status }, step.label)) }) : null,
-        showAsyncBlock ? /* @__PURE__ */ jsxs(View, { style: styles.asyncBlock, children: [
-          asyncNote ? /* @__PURE__ */ jsx(Text, { style: styles.asyncBody, children: asyncNote }) : null,
-          reference ? /* @__PURE__ */ jsxs(View, { style: styles.referenceRow, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.asyncOverline, children: "Reference" }),
-            /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.reference, children: reference })
-          ] }) : null,
-          reservedUntil ? /* @__PURE__ */ jsxs(View, { style: styles.reservedRow, children: [
-            /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.infoOnSoft }),
-            /* @__PURE__ */ jsx(Text, { style: styles.reserved, children: reservedUntil })
-          ] }) : null
-        ] }) : null,
-        onCancel ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel }) : null,
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            role: "status",
-            accessibilityLiveRegion: "polite",
-            style: styles.srOnly,
-            ...{ "aria-live": "polite" },
-            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: active ? `${resolvedHeadline}. ${active.label}.` : resolvedHeadline })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: resolvedHeadline, style: [styles.panel, style], children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "xl", accessibilityLabel: labels.inProgress }),
+    /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headline, children: resolvedHeadline }),
+      eta ? /* @__PURE__ */ jsx(Text, { style: styles.eta, children: eta }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
+      /* @__PURE__ */ jsx(Amount, { minor: amount, currency, size: "lg", weight: "bold", locale }),
+      /* @__PURE__ */ jsx(Text, { style: styles.method, children: methodLabel })
+    ] }),
+    steps.length > 0 ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.ladder, children: steps.map((step) => /* @__PURE__ */ jsx(ProcessingStepRow, { label: step.label, status: step.status }, step.label)) }) : null,
+    showAsyncBlock ? /* @__PURE__ */ jsxs(View, { style: styles.asyncBlock, children: [
+      asyncNote ? /* @__PURE__ */ jsx(Text, { style: styles.asyncBody, children: asyncNote }) : null,
+      reference ? /* @__PURE__ */ jsxs(View, { style: styles.referenceRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.asyncOverline, children: labels.reference }),
+        /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.reference, children: reference })
+      ] }) : null,
+      reservedUntil ? /* @__PURE__ */ jsxs(View, { style: styles.reservedRow, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.infoOnSoft }),
+        /* @__PURE__ */ jsx(Text, { style: styles.reserved, children: reservedUntil })
+      ] }) : null
+    ] }) : null,
+    onCancel ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel ?? labels.cancelPayment }) : null,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        accessibilityLiveRegion: "polite",
+        style: styles.srOnly,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: active ? labels.processingStatus(resolvedHeadline, active.label) : resolvedHeadline })
+      }
+    )
+  ] });
 }
 var sheet = createStyleSheet((theme) => ({
   pillRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
@@ -315,14 +346,18 @@ function formatTime(seconds) {
 function ThreeDSFrame({
   origin,
   secondsLeft,
-  timeoutNote = "If the bank does not answer in time we will bring you back here. Nothing has been charged.",
-  chromeLabel = "Your bank is verifying this payment",
-  cancelLabel = "Cancel and go back",
+  timeoutNote,
+  chromeLabel: chromeLabelProp,
+  cancelLabel: cancelLabelProp,
   children,
+  labels: labelsProp,
   style,
   onCancel
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const chromeLabel = chromeLabelProp ?? labels.chromeLabel;
+  const cancelLabel = cancelLabelProp ?? labels.cancelAndGoBack;
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet2);
   const clamped = Math.max(0, Math.min(secondsLeft, THREE_DS_TIMEOUT_SECONDS));
   return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: chromeLabel, style: [styles.frame, style], children: [
@@ -335,7 +370,7 @@ function ThreeDSFrame({
     /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
       /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.text3 }),
       /* @__PURE__ */ jsx(Text, { role: "timer", style: styles.clock, children: formatTime(clamped) }),
-      /* @__PURE__ */ jsx(Text, { style: styles.timeoutNote, children: timeoutNote })
+      timeoutNote ? /* @__PURE__ */ jsx(Text, { style: styles.timeoutNote, children: timeoutNote }) : null
     ] })
   ] });
 }
@@ -347,12 +382,14 @@ function ChallengeSurface({
   code,
   error,
   busy = false,
-  note = "Codes expire after 8 minutes.",
-  submitLabel = "Approve",
+  note,
+  submitLabel,
+  labels: labelsProp,
   style,
   onChangeCode,
   onSubmit
 }) {
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet2);
   const errorId = React4.useId();
   return /* @__PURE__ */ jsxs(
@@ -363,10 +400,10 @@ function ChallengeSurface({
         /* @__PURE__ */ jsxs(View, { style: styles.challengeHead, children: [
           /* @__PURE__ */ jsx(Text, { style: styles.bankName, children: bankName }),
           /* @__PURE__ */ jsxs(View, { style: styles.authoriseRow, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.authorise, children: "Authorise" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.authorise, children: labels.authorise }),
             amountLabel
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: styles.sentTo, children: `We sent a code to ${maskedContact}.` })
+          /* @__PURE__ */ jsx(Text, { style: styles.sentTo, children: labels.codeSent(maskedContact) })
         ] }),
         /* @__PURE__ */ jsx(View, { role: "group", "aria-describedby": error ? errorId : void 0, children: /* @__PURE__ */ jsx(
           OTP,
@@ -374,13 +411,22 @@ function ChallengeSurface({
             length: digits,
             value: code,
             error: error !== void 0,
-            accessibilityLabel: `${digits}-digit verification code`,
+            accessibilityLabel: labels.codeGroup(digits),
             onChangeText: onChangeCode
           }
         ) }),
-        error ? /* @__PURE__ */ jsx(Text, { nativeID: errorId, role: "alert", accessibilityLiveRegion: "assertive", style: styles.error, children: error }) : null,
-        /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, loading: busy, onPress: () => onSubmit(code), children: submitLabel }),
-        /* @__PURE__ */ jsx(Text, { style: styles.note, children: note })
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            nativeID: errorId,
+            role: "alert",
+            accessibilityLiveRegion: "assertive",
+            style: styles.error,
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, loading: busy, onPress: () => onSubmit(code), children: submitLabel ?? labels.approve }),
+        note ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: note }) : null
       ]
     }
   );
@@ -503,17 +549,21 @@ function DeclineNotice({
   intentId,
   actions,
   showSupportDetails = false,
-  detailsLabel = "Details for support",
-  nextLabel = "Next step",
+  detailsLabel,
+  nextLabel,
+  labels: labelsProp,
   style,
   onAction,
   onToggleDetails
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet3);
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const text = declineText(decline, pay);
   const detailsId = React4.useId();
-  const ladder = actions ?? recoveryActions(decline);
-  const headline = declineHeadline(decline);
+  const ladder = actions ?? recoveryActions(decline, pay);
+  const headline = declineHeadline(decline, pay);
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -528,14 +578,14 @@ function DeclineNotice({
           /* @__PURE__ */ jsxs(View, { style: styles.headBody, children: [
             /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headline, children: headline }),
             /* @__PURE__ */ jsxs(Text, { style: styles.explain, children: [
-              `${decline.user} `,
-              /* @__PURE__ */ jsx(Text, { style: styles.nothingCharged, children: NOTHING_CHARGED })
+              `${text.user} `,
+              /* @__PURE__ */ jsx(Text, { style: styles.nothingCharged, children: nothingChargedText(pay) })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs(View, { style: styles.nextBox, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: nextLabel }),
-          /* @__PURE__ */ jsx(Text, { style: styles.nextBody, children: decline.next })
+          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: nextLabel ?? labels.nextStep }),
+          /* @__PURE__ */ jsx(Text, { style: styles.nextBody, children: text.next })
         ] }),
         /* @__PURE__ */ jsx(View, { style: styles.ladder, children: ladder.map((action) => /* @__PURE__ */ jsx(
           Button,
@@ -567,15 +617,15 @@ function DeclineNotice({
                     color: theme.color.text2
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { style: styles.drawerLabel, children: detailsLabel })
+                /* @__PURE__ */ jsx(Text, { style: styles.drawerLabel, children: detailsLabel ?? labels.detailsForSupport })
               ]
             }
           ),
           showSupportDetails ? /* @__PURE__ */ jsxs(View, { nativeID: detailsId, style: styles.details, children: [
-            /* @__PURE__ */ jsx(DetailRow, { term: "decline_code", value: decline.code }),
-            /* @__PURE__ */ jsx(DetailRow, { term: "network", value: decline.soft ? "soft" : "hard" }),
-            /* @__PURE__ */ jsx(DetailRow, { term: "attempt", value: `${attempt} of ${attemptsAllowed}`, tabular: true }),
-            /* @__PURE__ */ jsx(DetailRow, { term: "intent", value: intentId })
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.declineCode, value: decline.code }),
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.network, value: decline.soft ? labels.soft : labels.hard }),
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.attempt, value: labels.attemptOf(attempt, attemptsAllowed), tabular: true }),
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.intent, value: intentId })
           ] }) : null
         ] }) : null
       ]
@@ -677,7 +727,7 @@ var RING_TO = 1.6;
 function ReceiptPanel({
   amount,
   currency,
-  title = "Payment complete",
+  title: titleProp,
   methodLabel,
   dateLabel,
   receiptId,
@@ -685,13 +735,18 @@ function ReceiptPanel({
   nextNote,
   actions,
   motion = "full",
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   style,
   onAction
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const title = titleProp ?? labels.receiptTitle;
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet4);
-  const resolved = useResolvedMotion(motion);
+  const resolved = useResolvedMotion(motion, "payment-status");
   const drawing = resolved === "full";
   const plate = React4.useRef(new Animated.Value(drawing ? 0 : 1)).current;
   const ring = React4.useRef(new Animated.Value(0)).current;
@@ -720,14 +775,14 @@ function ReceiptPanel({
     return () => anim.stop();
   }, [drawing, plate, ring, theme.easing.out, theme.duration.slow, theme.duration.slower]);
   const facts = [
-    { term: "Method", description: methodLabel },
-    { term: "Date", description: dateLabel },
+    { term: labels.method, description: methodLabel },
+    { term: labels.date, description: dateLabel },
     {
-      term: "Receipt",
+      term: labels.receipt,
       description: /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.mono, children: receiptId })
     }
   ];
-  if (email) facts.push({ term: "Sent to", description: email });
+  if (email) facts.push({ term: labels.sentTo, description: email });
   return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.panel, style], children: [
     /* @__PURE__ */ jsxs(
       View,
@@ -786,7 +841,7 @@ function ReceiptPanel({
         accessibilityLiveRegion: "polite",
         style: styles.srOnly,
         ...{ "aria-live": "polite" },
-        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: `${title}. Receipt ${receiptId}.` })
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: labels.receiptStatus(title, receiptId) })
       }
     )
   ] });