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

package/src/ui/theme/typography.ts

@@ -0,0 +1,47 @@
+import type { TextStyle } from 'react-native';
+import { Colors } from './colors';
+import { linkFontFamilyForWeight } from './fonts';
+
+export { FONT_FAMILY, linkFontFamilyForWeight, useLinkFonts, LINK_FONT_MAP } from './fonts';
+
+function withFont(weight: TextStyle['fontWeight'], style: TextStyle): TextStyle {
+  return { ...style, fontFamily: linkFontFamilyForWeight(weight) };
+}
+
+export const Typography = {
+  title: withFont('700', {
+    fontSize: 18,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+  }),
+  bodyMuted: withFont('400', {
+    fontSize: 14,
+    fontWeight: '400',
+    color: Colors.textMuted,
+  }),
+  label: withFont('500', {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.textLabel,
+  }),
+  value: withFont('500', {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.textPrimary,
+  }),
+  amount: withFont('700', {
+    fontSize: 28,
+    fontWeight: '700',
+    color: Colors.textPrimary,
+  }),
+  creditor: withFont('500', {
+    fontSize: 16,
+    fontWeight: '500',
+    color: Colors.textPrimary,
+  }),
+  button: withFont('600', {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  }),
+} as const;

package/src/ui/widgets/footer.tsx

@@ -0,0 +1,138 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { FONT_FAMILY } from '../theme';
+import { Assets } from '../theme/assets';
+
+export interface FooterProps {
+  onContinue?: () => void;
+  onCancel?: () => void;
+  /** Continue button label. Defaults to "Proceed using Altareq". */
+  continueButtonText?: string;
+  disabledContinueButton?: boolean;
+  /** When true the continue button shows a spinner and cannot be tapped. */
+  isLoading?: boolean;
+  /** Show the gradient-bordered Cancel button. Defaults to true. */
+  showCancelButton?: boolean;
+  /** testID for the continue button. Defaults to "footer-continue-btn". */
+  continueTestID?: string;
+  /** testID for the cancel button. Defaults to "footer-cancel-btn". */
+  cancelTestID?: string;
+}
+
+const DEFAULT_CONTINUE_TEXT = 'Proceed using Altareq';
+
+// CBUAE-approved gradient — copied verbatim from Flutter `Footer`
+// (#00C8AF → #015AD7 → #000 at stops 0 / 0.41 / 0.82).
+const CONTINUE_GRADIENT = ['#00C8AF', '#015AD7', '#000000'] as const;
+const CONTINUE_GRADIENT_STOPS = [0, 0.41, 0.82] as const;
+const CANCEL_BORDER_GRADIENT = ['#00C8AF', '#015AD7'] as const;
+
+/**
+ * Shared flow-screen footer. Port of Flutter `Footer`
+ * (`lib/src/ui/widgets/footer.dart`): a full-width gradient "Proceed using
+ * Altareq" pill with the Altareq mini icon, plus an optional gradient-bordered
+ * white "Cancel" pill.
+ */
+export function Footer(props: FooterProps): JSX.Element {
+  const showCancel = props.showCancelButton ?? true;
+  const continueText = props.continueButtonText ?? DEFAULT_CONTINUE_TEXT;
+  const isContinueEnabled =
+    !props.disabledContinueButton && !props.isLoading && props.onContinue != null;
+
+  return (
+    <View>
+      <Pressable
+        testID={props.continueTestID ?? 'footer-continue-btn'}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !isContinueEnabled }}
+        onPress={isContinueEnabled ? props.onContinue : undefined}
+        disabled={!isContinueEnabled}
+        style={{ opacity: isContinueEnabled ? 1 : 0.4 }}
+      >
+        <LinearGradient
+          colors={CONTINUE_GRADIENT}
+          locations={CONTINUE_GRADIENT_STOPS}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={styles.continueGradient}
+        >
+          {props.isLoading ? (
+            <ActivityIndicator testID="footer-continue-spinner" size="small" color="#FFFFFF" />
+          ) : (
+            <View style={styles.continueContent}>
+              <Image
+                source={Assets.altareqIconMini}
+                style={styles.miniIcon}
+                resizeMode="contain"
+                accessibilityRole="image"
+                accessibilityLabel="Altareq"
+              />
+              <Text style={styles.continueText}>{continueText}</Text>
+            </View>
+          )}
+        </LinearGradient>
+      </Pressable>
+
+      {showCancel ? (
+        <View style={styles.cancelSpacer}>
+          <LinearGradient
+            colors={CANCEL_BORDER_GRADIENT}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={styles.cancelBorder}
+          >
+            <Pressable
+              testID={props.cancelTestID ?? 'footer-cancel-btn'}
+              accessibilityRole="button"
+              onPress={props.onCancel}
+              style={styles.cancelInner}
+            >
+              <Text style={styles.cancelText}>Cancel</Text>
+            </Pressable>
+          </LinearGradient>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const BUTTON_HEIGHT = 48;
+const BUTTON_RADIUS = 40;
+
+const styles = StyleSheet.create({
+  continueGradient: {
+    height: BUTTON_HEIGHT,
+    borderRadius: BUTTON_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  continueContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  miniIcon: { width: 24, height: 24, marginRight: 10 },
+  continueText: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 16,
+    color: '#FFFFFF',
+  },
+  cancelSpacer: { marginTop: 8 },
+  cancelBorder: {
+    height: BUTTON_HEIGHT,
+    borderRadius: BUTTON_RADIUS,
+    padding: 2, // border thickness
+  },
+  cancelInner: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    borderRadius: BUTTON_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelText: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 16,
+    color: 'rgba(0,0,0,0.87)',
+  },
+});

package/src/ui/widgets/gradient-spinner.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, UIManager, View } from 'react-native';
+import { HandoffGradient } from '../theme/colors';
+
+export interface GradientSpinnerProps {
+  size?: number;
+  strokeWidth?: number;
+  testID?: string;
+}
+
+/** Flutter `drawArc` sweep: `math.pi * 1.7` radians. */
+const ARC_SWEEP_FRACTION = 1.7 / 2;
+
+function isRNSVGAvailable(): boolean {
+  if (Platform.OS === 'web') return false;
+  return (
+    typeof UIManager.getViewManagerConfig === 'function' &&
+    UIManager.getViewManagerConfig('RNSVGCircle') != null
+  );
+}
+
+function useSpinAnimation(): Animated.AnimatedInterpolation<string> {
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [rotation]);
+
+  return rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+}
+
+/**
+ * Thin stroked arc with sweep gradient — mirrors Flutter `GradientSpinner`.
+ */
+function SvgGradientSpinner({
+  size,
+  strokeWidth,
+  testID,
+  spin,
+}: {
+  size: number;
+  strokeWidth: number;
+  testID: string;
+  spin: Animated.AnimatedInterpolation<string>;
+}): JSX.Element {
+  const Svg = require('react-native-svg').default as typeof import('react-native-svg').default;
+  const {
+    Circle,
+    Defs,
+    LinearGradient: SvgLinearGradient,
+    Stop,
+  } = require('react-native-svg') as typeof import('react-native-svg');
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = circumference * ARC_SWEEP_FRACTION;
+  const gapLength = circumference - arcLength;
+  const gradientId = 'gradient-spinner-stroke';
+
+  return (
+    <View style={{ width: size, height: size }} testID={testID} collapsable={false}>
+      <Animated.View style={{ transform: [{ rotate: spin }] }}>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Defs>
+            <SvgLinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+              <Stop offset="0%" stopColor="#FFFFFF" />
+              <Stop offset="60%" stopColor="#00C8AF" />
+              <Stop offset="100%" stopColor="#FFFFFF" />
+            </SvgLinearGradient>
+          </Defs>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={`url(#${gradientId})`}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            fill="none"
+            strokeDasharray={`${arcLength} ${gapLength}`}
+            rotation={-90}
+            origin={`${size / 2}, ${size / 2}`}
+          />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}
+
+/**
+ * Fallback when `react-native-svg` is not linked — thin rotating highlight arc.
+ * Inactive quadrants use handoff mid-blue so the open arc blends on the screen.
+ */
+function BorderGradientSpinner({
+  size,
+  strokeWidth,
+  testID,
+  spin,
+}: {
+  size: number;
+  strokeWidth: number;
+  testID: string;
+  spin: Animated.AnimatedInterpolation<string>;
+}): JSX.Element {
+  const blend = HandoffGradient.mid;
+
+  return (
+    <View style={{ width: size, height: size }} testID={testID} collapsable={false}>
+      <Animated.View
+        collapsable={false}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderTopColor: '#FFFFFF',
+          borderRightColor: '#00C8AF',
+          borderBottomColor: blend,
+          borderLeftColor: blend,
+          transform: [{ rotate: spin }],
+        }}
+      />
+    </View>
+  );
+}
+
+/**
+ * Spinning gradient arc — mirrors Flutter `GradientSpinner`.
+ *
+ * Prefer the SVG stroked arc (requires `react-native-svg` in the native build).
+ * Falls back to a border arc when SVG is not linked.
+ */
+export function GradientSpinner({
+  size = 56,
+  strokeWidth = 3,
+  testID = 'gradient-spinner',
+}: GradientSpinnerProps): JSX.Element {
+  const spin = useSpinAnimation();
+  const shared = { size, strokeWidth, testID, spin };
+
+  if (isRNSVGAvailable()) {
+    return <SvgGradientSpinner {...shared} />;
+  }
+  return <BorderGradientSpinner {...shared} />;
+}

package/src/ui/widgets/handoff-screen-layout.tsx

@@ -0,0 +1,70 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import type { ReactNode } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Assets } from '../theme/assets';
+import { HandoffGradient } from '../theme/colors';
+import { linkFontFamilyForWeight } from '../theme/fonts';
+
+export interface HandoffScreenLayoutProps {
+  children: ReactNode;
+  testID?: string;
+}
+
+/**
+ * Full-screen teal→navy gradient with a bottom "Powered by Altareq" footer.
+ * Shared by redirect-handoff and resume-processing screens (Flutter parity).
+ */
+export function HandoffScreenLayout({ children, testID }: HandoffScreenLayoutProps): JSX.Element {
+  return (
+    <LinearGradient
+      colors={[HandoffGradient.start, HandoffGradient.mid, HandoffGradient.end]}
+      locations={[0, 0.45, 1]}
+      style={styles.fill}
+    >
+      <SafeAreaView style={styles.fill} testID={testID}>
+        <View style={styles.center}>{children}</View>
+        <PoweredByFooter />
+      </SafeAreaView>
+    </LinearGradient>
+  );
+}
+
+function PoweredByFooter(): JSX.Element {
+  return (
+    <View style={styles.footer} testID="handoff-powered-by">
+      <Text style={styles.poweredByLabel}>Powered by</Text>
+      <Image
+        source={Assets.altareqLogoTransparentBg}
+        style={styles.logo}
+        resizeMode="contain"
+        accessibilityLabel="Altareq"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 40,
+  },
+  footer: {
+    alignItems: 'center',
+    paddingBottom: 36,
+    gap: 8,
+  },
+  poweredByLabel: {
+    fontFamily: linkFontFamilyForWeight('400'),
+    fontSize: 14,
+    color: 'rgba(255,255,255,0.7)',
+  },
+  logo: {
+    height: 40,
+    width: 160,
+    tintColor: '#FFFFFF',
+  },
+});

package/src/ui/widgets/index.ts

@@ -0,0 +1,5 @@
+export { CustomStepper, type CustomStepperProps } from './stepper';
+export { LayoutWHeader, type LayoutWHeaderProps } from './layout-w-header';
+export { Footer, type FooterProps } from './footer';
+export { GradientSpinner, type GradientSpinnerProps } from './gradient-spinner';
+export { HandoffScreenLayout, type HandoffScreenLayoutProps } from './handoff-screen-layout';

package/src/ui/widgets/layout-w-header.tsx

@@ -0,0 +1,89 @@
+import { Ionicons } from '@expo/vector-icons';
+import type { ReactNode } from 'react';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+import { Colors } from '../theme';
+import { Assets } from '../theme/assets';
+import { CustomStepper } from './stepper';
+
+export interface LayoutWHeaderProps {
+  children: ReactNode;
+  /** Stepper progress (0 .. 2). Defaults to 0.5, matching Flutter. */
+  progress?: number;
+  /** When set, shows a leading back arrow like Flutter's AppBar. */
+  onBackPress?: () => void;
+  /** Disables the back arrow while async work is in-flight. */
+  backDisabled?: boolean;
+}
+
+/**
+ * Shared flow-screen chrome. Port of Flutter `LayoutWHeader`
+ * (`lib/src/ui/widgets/layout_w_header.dart`): a white page with a centered
+ * Spare logo header, the Altareq white-background logo, a {@link CustomStepper}
+ * progress bar, and 22px body padding wrapping the screen content.
+ *
+ * CBUAE-approved chrome — copy/dimensions match the Flutter SDK exactly.
+ */
+export function LayoutWHeader(props: LayoutWHeaderProps): JSX.Element {
+  const showBack = props.onBackPress != null;
+  return (
+    <View style={styles.page} testID="layout-w-header">
+      <View style={styles.appBar}>
+        {showBack ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Back"
+            testID="layout-w-header-back"
+            onPress={props.onBackPress}
+            disabled={props.backDisabled}
+            hitSlop={8}
+            style={[styles.backButton, props.backDisabled && styles.backButtonDisabled]}
+          >
+            <Ionicons name="arrow-back" size={24} color={Colors.textPrimary} />
+          </Pressable>
+        ) : null}
+        <Image
+          source={Assets.spareLogo}
+          style={styles.spareLogo}
+          resizeMode="contain"
+          accessibilityRole="image"
+          accessibilityLabel="Spare"
+        />
+      </View>
+      <Image
+        source={Assets.altareqLogoWhiteBg}
+        style={styles.altareqLogo}
+        resizeMode="contain"
+        accessibilityRole="image"
+        accessibilityLabel="Altareq"
+      />
+      <View style={styles.stepperWrap}>
+        <CustomStepper progress={props.progress ?? 0.5} />
+      </View>
+      <View style={styles.body}>{props.children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: '#FFFFFF' },
+  appBar: {
+    height: 56,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 8,
+  },
+  backButton: {
+    position: 'absolute',
+    left: 8,
+    top: 8,
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backButtonDisabled: { opacity: 0.4 },
+  spareLogo: { height: 18, width: 120 },
+  altareqLogo: { height: 45, width: '100%', alignSelf: 'center' },
+  stepperWrap: { paddingHorizontal: 22, paddingVertical: 16 },
+  body: { flex: 1, padding: 22 },
+});

package/src/ui/widgets/modal-dismiss-button.tsx

@@ -0,0 +1,44 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Colors } from '../theme';
+
+export interface ModalDismissButtonProps {
+  visible: boolean;
+  onPress: () => void;
+}
+
+export function ModalDismissButton(props: ModalDismissButtonProps): JSX.Element | null {
+  if (!props.visible) return null;
+  return (
+    <View style={styles.dismissBar}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        testID="spare-link-modal-dismiss"
+        onPress={props.onPress}
+        hitSlop={16}
+        style={styles.dismissPressable}
+      >
+        <Ionicons name="close" size={18} color={Colors.textPrimary} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dismissBar: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  dismissPressable: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    backgroundColor: Colors.surfaceMuted,
+  },
+});

package/src/ui/widgets/stepper.tsx

@@ -0,0 +1,126 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { FONT_FAMILY } from '../theme';
+
+const TOTAL_STEPS = 3;
+const STEP_LABELS = ['Consent', 'Authorize', 'Complete'] as const;
+
+export interface CustomStepperProps {
+  /**
+   * Current step index in the range `0 .. TOTAL_STEPS - 1` (0 → 2 for 3 steps).
+   * Matches Flutter's `CustomStepper.progress`.
+   */
+  progress: number;
+}
+
+/**
+ * Three-step progress indicator. Port of Flutter `CustomStepper`
+ * (`lib/src/ui/widgets/stepper.dart`): a grey baseline with a black fill up to
+ * the current step, numbered circles, and "Consent / Authorize / Complete"
+ * labels.
+ */
+export function CustomStepper(props: CustomStepperProps): JSX.Element {
+  const maxProgress = TOTAL_STEPS - 1;
+  const progressPercent = Math.min(1, Math.max(0, props.progress / maxProgress));
+
+  return (
+    <View testID="custom-stepper">
+      <View style={styles.track}>
+        <View style={styles.lineArea}>
+          {/* Background baseline */}
+          <View style={styles.baseline} />
+          {/* Filled progress line — width is a percent of the inset lineArea
+              (not the padded track), so it stays aligned with the baseline and
+              never overshoots the last circle. */}
+          <View style={[styles.fill, { width: `${progressPercent * 100}%` }]} />
+          {/* Numbered circles */}
+          <View style={styles.circlesRow}>
+            {STEP_LABELS.map((label, index) => {
+              const isFilled = props.progress >= index;
+              return (
+                <View
+                  key={label}
+                  testID={`stepper-circle-${index}`}
+                  style={[styles.circle, isFilled ? styles.circleFilled : styles.circleEmpty]}
+                >
+                  <Text style={[styles.circleText, isFilled && styles.circleTextFilled]}>
+                    {index + 1}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+      <View style={styles.labelsRow}>
+        {STEP_LABELS.map((label) => (
+          <Text key={label} style={styles.label}>
+            {label}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const LINE_COLOR_BG = '#D6D6DB'; // Colors.grey.shade300
+const CIRCLE_SIZE = 32;
+
+const styles = StyleSheet.create({
+  track: {
+    height: 40,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  // Inset content box (track width − 24). The baseline and the percent-width
+  // fill are positioned relative to this, so they share one reference span.
+  lineArea: {
+    justifyContent: 'center',
+  },
+  baseline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 18,
+    height: 4,
+    backgroundColor: LINE_COLOR_BG,
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 18,
+    height: 4,
+    backgroundColor: '#000000',
+    borderTopRightRadius: 12,
+    borderBottomRightRadius: 12,
+  },
+  circlesRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  circle: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleFilled: { backgroundColor: '#000000' },
+  circleEmpty: { backgroundColor: LINE_COLOR_BG },
+  circleText: {
+    fontFamily: FONT_FAMILY,
+    fontWeight: '700',
+    color: '#000000',
+  },
+  circleTextFilled: { color: '#FFFFFF' },
+  labelsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 4,
+  },
+  label: {
+    fontFamily: FONT_FAMILY,
+    fontSize: 14,
+    color: '#000000',
+  },
+});

package/src/version.ts

@@ -0,0 +1,7 @@
+/**
+ * SDK version reported in telemetry and the default User-Agent. This file is
+ * regenerated from `package.json` by the root `version` npm script on every
+ * release bump (see the `version` script in the repo-root package.json), so it
+ * always matches the published version — do not edit the literal by hand.
+ */
+export const SDK_VERSION = '0.1.0-beta.0' as const;