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

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

@@ -1,83 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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,
-  );
-}