@spare-technologies/spare-link 0.1.0-beta.0

package/src/ui/consent/international-payment-summary.tsx

@@ -0,0 +1,83 @@
+import { StyleSheet, Text, View } from 'react-native';
+import type { InternationalPaymentSummaryData } from '../../core/services/consent-presenter';
+import { presentField } from '../../core/services/consent-presenter';
+import { Colors, FONT_FAMILY } from '../theme';
+import { ChargeBearerDisplay } from './charge-bearer-display';
+import { ConsentAccordion } from './consent-accordion';
+import { LabelValueRows } from './label-value-rows';
+import { TermsLink } from './terms-link';
+
+export interface InternationalPaymentSummaryProps {
+  data: InternationalPaymentSummaryData;
+}
+
+export function InternationalPaymentSummary(props: InternationalPaymentSummaryProps): JSX.Element {
+  const { data } = props;
+  return (
+    <View testID="international-payment-summary">
+      <View style={styles.card}>
+        <Text style={styles.title}>Payment Details</Text>
+        <LabelValueRows
+          paddingHorizontal={0}
+          rows={[
+            { label: 'Payment References', value: presentField(data.paymentReference) },
+            { label: 'Amount', value: data.formattedAmount },
+            { label: 'Priority', value: presentField(data.priority) },
+            { label: 'Payment Purpose', value: presentField(data.paymentPurpose) },
+          ]}
+        />
+      </View>
+      <ChargeBearerDisplay chargeBearer={data.chargeBearer} />
+      <ConsentAccordion
+        items={[
+          {
+            header: 'Payee Information',
+            children: (
+              <LabelValueRows
+                rows={[
+                  { label: 'IBAN', value: data.iban },
+                  { label: 'Payee Name', value: presentField(data.creditorName) },
+                ]}
+              />
+            ),
+          },
+          {
+            header: 'Payer Information',
+            children: (
+              <LabelValueRows rows={[{ label: 'Bank', value: presentField(data.bankName) }]} />
+            ),
+          },
+          {
+            header: 'Terms',
+            initiallyExpanded: false,
+            children: <TermsLink />,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: Colors.surfaceCard,
+    borderRadius: 16,
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    marginBottom: 14,
+    gap: 12,
+    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,
+  },
+});

package/src/ui/consent/label-value-rows.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet, Text, View } from 'react-native';
+import type { LabelValueRow } from '../../core/services/multi-payment-rules-presenter';
+import { Colors, FONT_FAMILY } from '../theme';
+
+export interface LabelValueRowsProps {
+  rows: LabelValueRow[];
+  /** Horizontal inset; Flutter defaults to 20 and uses 0 inside padded cards. */
+  paddingHorizontal?: number;
+}
+
+export function LabelValueRows(props: LabelValueRowsProps): JSX.Element {
+  const paddingHorizontal = props.paddingHorizontal ?? 20;
+  return (
+    <View style={[styles.wrap, { paddingHorizontal }]} testID="label-value-rows">
+      {props.rows.map((row, idx) => (
+        <View key={`${row.label}-${idx}`} style={styles.row} testID={`label-value-row-${idx}`}>
+          <Text style={styles.label}>{row.label}</Text>
+          <Text style={styles.value}>{row.value}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {},
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingVertical: 4,
+  },
+  label: { fontFamily: FONT_FAMILY, fontSize: 14, color: Colors.textMuted, flex: 1 },
+  value: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    color: Colors.textMuted,
+    textAlign: 'right',
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
+function present(value: string | undefined, fallback = '—'): string {
+  const v = value?.trim();
+  return v ? v : fallback;
+}
+
+export { present };

package/src/ui/consent/multi-payment-rules-list.tsx

@@ -0,0 +1,138 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { PaymentType } from '../../core/models/payment-type';
+import type { LabelValueRow } from '../../core/services/multi-payment-rules-presenter';
+import { Colors, FONT_FAMILY } from '../theme';
+import { LabelValueRows } from './label-value-rows';
+
+/** Number of defined-schedule entry cards visible before scrolling. */
+export const DEFINED_SCHEDULE_VISIBLE_ENTRY_COUNT = 3;
+
+/** Approximate height of one defined-schedule entry card (incl. spacing). */
+export const DEFINED_SCHEDULE_ENTRY_EXTENT = 96;
+
+export interface MultiPaymentRulesListProps {
+  rulesTitle?: string;
+  rules: LabelValueRow[];
+  paymentType: PaymentType;
+}
+
+export function MultiPaymentRulesList(props: MultiPaymentRulesListProps): JSX.Element {
+  const { rules, paymentType } = props;
+
+  if (rules.length === 0) {
+    return (
+      <View testID="multi-payment-rules-list">
+        {props.rulesTitle ? <Text style={styles.title}>{props.rulesTitle}</Text> : null}
+        <Text style={styles.empty}>—</Text>
+      </View>
+    );
+  }
+
+  const isDefinedSchedule =
+    paymentType === PaymentType.fixedDefinedSchedule ||
+    paymentType === PaymentType.variableDefinedSchedule;
+
+  return (
+    <View testID="multi-payment-rules-list">
+      {props.rulesTitle ? <Text style={styles.title}>{props.rulesTitle}</Text> : null}
+      {isDefinedSchedule ? (
+        <DefinedScheduleEntries rules={rules} />
+      ) : (
+        <LabelValueRows rows={rules} />
+      )}
+    </View>
+  );
+}
+
+function DefinedScheduleEntries(props: { rules: LabelValueRow[] }): JSX.Element {
+  const entries = groupDefinedScheduleEntries(props.rules);
+
+  if (entries.length <= DEFINED_SCHEDULE_VISIBLE_ENTRY_COUNT) {
+    return (
+      <>
+        {entries.map((entry, index) => (
+          <DefinedScheduleEntryCard
+            key={definedScheduleEntryKey(entry)}
+            testID={`payment-schedule-entry-${index}`}
+            rows={entry}
+          />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <ScrollView
+      testID="defined-schedule-scroll"
+      style={{ maxHeight: DEFINED_SCHEDULE_ENTRY_EXTENT * DEFINED_SCHEDULE_VISIBLE_ENTRY_COUNT }}
+      nestedScrollEnabled
+      showsVerticalScrollIndicator
+    >
+      {entries.map((entry, index) => (
+        <DefinedScheduleEntryCard
+          key={definedScheduleEntryKey(entry)}
+          testID={`payment-schedule-entry-${index}`}
+          rows={entry}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+function DefinedScheduleEntryCard(props: {
+  rows: LabelValueRow[];
+  testID: string;
+}): JSX.Element {
+  return (
+    <View style={styles.entryCard} testID={props.testID}>
+      <LabelValueRows paddingHorizontal={0} rows={props.rows} />
+    </View>
+  );
+}
+
+/** Groups flat Amount/Date row pairs into per-payment entry lists. */
+export function groupDefinedScheduleEntries(rules: LabelValueRow[]): LabelValueRow[][] {
+  const entries: LabelValueRow[][] = [];
+  for (const row of rules) {
+    if (row.label === 'Amount' || row.label === 'Max Amount') {
+      entries.push([row]);
+    } else if (row.label === 'Date' && entries.length > 0) {
+      entries[entries.length - 1]?.push(row);
+    }
+  }
+  return entries;
+}
+
+function definedScheduleEntryKey(entry: LabelValueRow[]): string {
+  return entry.map((row) => `${row.label}:${row.value}`).join('|');
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 16,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+    marginBottom: 8,
+    paddingHorizontal: 20,
+  },
+  empty: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    color: Colors.textMuted,
+    paddingHorizontal: 20,
+  },
+  entryCard: {
+    backgroundColor: Colors.surfaceCard,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginBottom: 10,
+    marginHorizontal: 20,
+    shadowColor: '#000000',
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 1,
+  },
+});

package/src/ui/consent/multi-payment-summary.tsx

@@ -0,0 +1,82 @@
+import { StyleSheet, Text, View } from 'react-native';
+import type { MultiPaymentSummaryData } from '../../core/services/consent-presenter';
+import { Colors, FONT_FAMILY } from '../theme';
+import { ConsentAccordion } from './consent-accordion';
+import { LabelValueRows, present } from './label-value-rows';
+import { MultiPaymentRulesList } from './multi-payment-rules-list';
+import { TermsLink } from './terms-link';
+
+export interface MultiPaymentSummaryProps {
+  data: MultiPaymentSummaryData;
+}
+
+export function MultiPaymentSummary(props: MultiPaymentSummaryProps): JSX.Element {
+  const { data } = props;
+  return (
+    <View testID="multi-payment-summary">
+      <View style={styles.card} testID="multi-payment-setup-card">
+        <Text style={styles.setupTitle}>Payment setup</Text>
+        <LabelValueRows
+          paddingHorizontal={0}
+          rows={[
+            { label: 'Payment to', value: present(data.creditorType) },
+            { label: 'Reference', value: present(data.externalReference) },
+            { label: 'Payment Purpose', value: present(data.paymentPurpose) },
+          ]}
+        />
+      </View>
+      <ConsentAccordion
+        items={[
+          {
+            header: data.rulesTitle,
+            children: <MultiPaymentRulesList rules={data.rules} paymentType={data.paymentType} />,
+          },
+          {
+            header: 'To account',
+            children: (
+              <LabelValueRows
+                rows={[
+                  { label: 'IBAN', value: present(data.iban) },
+                  { label: 'Payee Name', value: present(data.creditorName) },
+                ]}
+              />
+            ),
+          },
+          {
+            header: 'From account',
+            children: <LabelValueRows rows={[{ label: 'Bank', value: present(data.bankName) }]} />,
+          },
+          {
+            header: 'Terms',
+            initiallyExpanded: false,
+            children: <TermsLink />,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: Colors.surfaceCard,
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    marginBottom: 14,
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.divider,
+    shadowColor: '#000000',
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  setupTitle: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+  },
+});

package/src/ui/consent/single-payment-summary.tsx

@@ -0,0 +1,123 @@
+import { Ionicons } from '@expo/vector-icons';
+import { StyleSheet, Text, View } from 'react-native';
+import type { SinglePaymentSummaryData } from '../../core/services/consent-presenter';
+import { Colors, FONT_FAMILY, Spacing } from '../theme';
+import { ConsentAccordion } from './consent-accordion';
+import { CopInformation, CopLoadingPlaceholder } from './cop-information';
+import { LabelValueRows, present } from './label-value-rows';
+
+export interface SinglePaymentSummaryProps {
+  data: SinglePaymentSummaryData;
+}
+
+export function SinglePaymentSummary(props: SinglePaymentSummaryProps): JSX.Element {
+  const { data } = props;
+  const creditor = data.creditorName?.trim();
+
+  return (
+    <>
+      <PaymentDetailsCard
+        amount={data.formattedAmount}
+        paymentReference={data.paymentReference}
+        paymentPurpose={data.paymentPurpose}
+      />
+      <ConsentAccordion
+        items={[
+          {
+            header: 'Payee Information',
+            children: (
+              <>
+                <LabelValueRows rows={[{ label: 'IBAN', value: present(data.iban) }]} />
+                {creditor ? (
+                  <LabelValueRows rows={[{ label: 'Payee Name', value: creditor }]} />
+                ) : null}
+                {data.isCopLoading || data.copDisplay ? (
+                  <View style={styles.copSection}>
+                    <View style={styles.copDivider} testID="consent-cop-divider" />
+                    {data.isCopLoading ? (
+                      <CopLoadingPlaceholder />
+                    ) : data.copDisplay ? (
+                      <CopInformation display={data.copDisplay} />
+                    ) : null}
+                  </View>
+                ) : null}
+              </>
+            ),
+          },
+          {
+            header: 'Payer Information',
+            children: <LabelValueRows rows={[{ label: 'Bank', value: present(data.bankName) }]} />,
+          },
+        ]}
+      />
+    </>
+  );
+}
+
+function PaymentDetailsCard(props: {
+  amount: string;
+  paymentReference: string | undefined;
+  paymentPurpose: string | undefined;
+}): JSX.Element {
+  return (
+    <View style={styles.paymentCard} testID="consent-payment-details">
+      <View style={styles.rowBetween}>
+        <View style={styles.rowCenter}>
+          <Ionicons name="wallet-outline" size={18} color={Colors.textPrimary} />
+          <Text style={styles.totalLabel}>Payment Total</Text>
+        </View>
+        <Text style={styles.totalAmount} testID="consent-details-amount">
+          {props.amount}
+        </Text>
+      </View>
+      <View style={styles.rowBetween}>
+        <Text style={styles.muted}>Payment References</Text>
+        <Text style={styles.muted}>{present(props.paymentReference)}</Text>
+      </View>
+      <View style={styles.rowBetween}>
+        <Text style={styles.muted}>Payment Purpose</Text>
+        <Text style={styles.muted}>{present(props.paymentPurpose)}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  paymentCard: {
+    backgroundColor: Colors.surfaceCard,
+    borderRadius: 16,
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    marginBottom: 14,
+    gap: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.divider,
+    shadowColor: '#000000',
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  rowBetween: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  rowCenter: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm },
+  totalLabel: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+  },
+  totalAmount: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+  },
+  muted: { fontFamily: FONT_FAMILY, fontSize: 14, color: Colors.textMuted },
+  copSection: { marginTop: 4 },
+  copDivider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: Colors.divider,
+    marginHorizontal: 20,
+    marginBottom: 8,
+  },
+});

package/src/ui/consent/terms-link.tsx

@@ -0,0 +1,27 @@
+import { Linking, Pressable, StyleSheet, Text } from 'react-native';
+import { Colors, FONT_FAMILY } from '../theme';
+
+const TERMS_URL = 'https://terms.tryspare.com/ae/en';
+
+export function TermsLink(): JSX.Element {
+  return (
+    <Pressable
+      accessibilityRole="link"
+      onPress={() => void Linking.openURL(TERMS_URL)}
+      testID="consent-terms-link"
+      style={styles.wrap}
+    >
+      <Text style={styles.link}>View terms and conditions</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { paddingHorizontal: 20, paddingVertical: 4 },
+  link: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    color: Colors.spareBlue,
+    textDecorationLine: 'underline',
+  },
+});

package/src/ui/hooks/use-payment-flow-state.ts

@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from 'react';
+import type { PaymentFlowController } from '../../core/services/payment-flow-controller';
+import type { PaymentFlowState } from '../../core/services/payment-flow-state';
+
+/**
+ * React hook that bridges {@link PaymentFlowController}'s observable to the
+ * component tree via `useSyncExternalStore`. Re-renders when the controller
+ * notifies a new state.
+ */
+export function usePaymentFlowState(controller: PaymentFlowController): PaymentFlowState {
+  return useSyncExternalStore(
+    (notify) => controller.subscribe(notify),
+    () => controller.state,
+    () => controller.state,
+  );
+}