@myazahq/kyc-sdk-react-native 2.4.0 → 2.6.0

package/src/screens/address/IntroDisclosures.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon, type IconName } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+import { useReduceMotion } from '../../components/StaggerIn';
+
+// ---------------------------------------------------------------------------
+// The intro screen's three plain-language disclosures — the OkHi-patterned
+// consent copy a data protection review asks to see — as a single-open
+// accordion.
+//
+// The body stays MOUNTED inside a clipped Animated.View so its natural height
+// can be measured by onLayout and then animated; RN has no auto-height
+// transition, and LayoutAnimation needs an experimental opt-in on Android.
+// This uses the SDK's own Animated idiom and works the same on both platforms.
+//
+// Keep this copy in lockstep with the web and Flutter SDKs.
+// ---------------------------------------------------------------------------
+
+const HOW_IT_WORKS = {
+  foreground:
+    'After you finish, your device periodically confirms it is at this address over the coming days. Only day-level summaries ever leave your phone, never your movements.',
+  background:
+    'After you finish, your phone confirms it is at this address over the coming days, even when the app is closed. Only day-level summaries ever leave your phone, never your movements.',
+} as const;
+
+const disclosuresFor = (
+  background: boolean,
+): Array<{ icon: IconName; title: string; body: string }> => [
+  {
+    icon: 'circle-help',
+    title: 'How it works',
+    body: background ? HOW_IT_WORKS.background : HOW_IT_WORKS.foreground,
+  },
+  {
+    icon: 'sliders',
+    title: 'You stay in control',
+    body: 'You can turn location off at any time in your device settings. An unfinished check simply expires. It never counts against you.',
+  },
+  {
+    icon: 'shield',
+    title: 'Your data is protected',
+    body: "Location summaries are used only to confirm this address and are handled under your country's data protection rules.",
+  },
+];
+
+export function IntroDisclosures({
+  background = false,
+}: {
+  /** The workflow opts into OS geofencing: the copy says the app can be closed. */
+  background?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [openIdx, setOpenIdx] = useState<number | null>(null);
+  const DISCLOSURES = disclosuresFor(background);
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+      }}
+    >
+      {DISCLOSURES.map((d, i) => (
+        <DisclosureRow
+          key={d.title}
+          icon={d.icon}
+          title={d.title}
+          body={d.body}
+          open={openIdx === i}
+          divider={i < DISCLOSURES.length - 1}
+          onToggle={() => setOpenIdx(openIdx === i ? null : i)}
+        />
+      ))}
+    </View>
+  );
+}
+
+function DisclosureRow({
+  icon,
+  title,
+  body,
+  open,
+  divider,
+  onToggle,
+}: {
+  icon: IconName;
+  title: string;
+  body: string;
+  open: boolean;
+  divider: boolean;
+  onToggle: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const reduceMotion = useReduceMotion();
+  const [bodyHeight, setBodyHeight] = useState(0);
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (reduceMotion) {
+      progress.setValue(open ? 1 : 0);
+      return;
+    }
+    Animated.timing(progress, {
+      toValue: open ? 1 : 0,
+      duration: 240,
+      // Height cannot be driven natively, and the chevron rides the same value
+      // so the two stay in step.
+      useNativeDriver: false,
+    }).start();
+  }, [open, progress, reduceMotion]);
+
+  return (
+    <View style={divider ? { borderBottomWidth: 1, borderBottomColor: colors.border } : undefined}>
+      <Pressable
+        onPress={onToggle}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open }}
+        accessibilityLabel={title}
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.sm,
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.md - 2,
+          backgroundColor: pressed ? colors.backgroundSecondary : 'transparent',
+        })}
+      >
+        <View
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: radius.xs,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: open ? colors.primary100 : colors.backgroundSecondary,
+          }}
+        >
+          <Icon name={icon} size={15} color={open ? colors.primary : colors.textSecondary} />
+        </View>
+        <MyazaText variant="bodyMedium" style={{ flex: 1, fontWeight: '500' }}>
+          {title}
+        </MyazaText>
+        <Animated.View
+          style={{
+            transform: [
+              {
+                rotate: progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0deg', '180deg'],
+                }),
+              },
+            ],
+          }}
+        >
+          <Icon name="chevron-down" size={16} color={colors.textSecondary} />
+        </Animated.View>
+      </Pressable>
+
+      <Animated.View
+        style={{
+          overflow: 'hidden',
+          opacity: progress,
+          // 0 until the body has been measured, so nothing flashes on the
+          // first frame.
+          height: progress.interpolate({ inputRange: [0, 1], outputRange: [0, bodyHeight] }),
+        }}
+      >
+        <View
+          // Text, never a target — and out of flow it would otherwise sit over
+          // the rows below on any platform that declines to clip it.
+          pointerEvents="none"
+          // POSITIONED ABSOLUTELY, and that is the whole trick. A plain child
+          // of this clipped, zero-height box reports its natural height, which
+          // is why the pattern looks safe — but TEXT does not: it is measured
+          // inside a bounded box, so the available height of zero clamps it to
+          // zero. The row then animated open to the padding alone and every
+          // disclosure expanded to an empty strip. Out of flow the text is
+          // measured with no height constraint at all, so what comes back is
+          // the real thing.
+          onLayout={(e) => {
+            const measured = Math.round(e.nativeEvent.layout.height);
+            if (measured > 0 && measured !== bodyHeight) setBodyHeight(measured);
+          }}
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            paddingLeft: spacing.md + 28 + spacing.sm,
+            paddingRight: spacing.md,
+            paddingBottom: spacing.md,
+          }}
+        >
+          <MyazaText
+            variant="bodyMedium"
+            color={colors.textSecondary}
+            style={{ lineHeight: 21 }}
+          >
+            {body}
+          </MyazaText>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}

package/src/screens/address/LabelDecisionRow.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+
+/**
+ * The keep-or-update decision after a pin move.
+ *
+ * A picked address is never silently replaced by a reverse geocode, and never
+ * silently kept against the applicant's wishes either. They choose. Rendered on
+ * the pin step only while the question is open (shouldAskLabelDecision).
+ */
+export function LabelDecisionRow({
+  label,
+  onKeep,
+  onAdopt,
+}: {
+  /** The picked address line under question. */
+  label: string;
+  onKeep: () => void;
+  onAdopt: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      // Web's `border-primary/25 bg-primary/[0.05]`, as Flutter draws it.
+      style={{
+        borderWidth: 1,
+        borderColor: `${colors.primary}40`,
+        borderRadius: radius.md,
+        backgroundColor: `${colors.primary}0D`,
+        paddingHorizontal: spacing.md - 2,
+        paddingVertical: spacing.md - 4,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: spacing.sm + 2 }}>
+        <View
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: radius.full,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: `${colors.primary}1A`,
+          }}
+        >
+          <Icon name="map-pinned" size={16} color={colors.primary} />
+        </View>
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
+            You moved the pin
+          </MyazaText>
+          <MyazaText variant="bodySmall" color={colors.textSecondary}>
+            Keep{' '}
+            <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
+              {label}
+            </MyazaText>{' '}
+            as your address, or update it to match the new spot?
+          </MyazaText>
+        </View>
+      </View>
+
+      {/* Indented under the text (web pl-11). */}
+      <View style={{ flexDirection: 'row', gap: spacing.sm, marginTop: spacing.sm + 4, paddingLeft: 44 }}>
+        <DecisionButton label="Keep this address" primary onPress={onKeep} />
+        <DecisionButton label="Use the pin’s address" onPress={onAdopt} />
+      </View>
+    </View>
+  );
+}
+
+function DecisionButton({
+  label,
+  primary,
+  onPress,
+}: {
+  label: string;
+  primary?: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={({ pressed }) => ({
+        flex: 1,
+        height: 36,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: spacing.sm,
+        borderRadius: radius.xs,
+        borderWidth: primary ? 0 : 1,
+        borderColor: colors.primary,
+        backgroundColor: primary ? colors.primary : colors.background,
+        opacity: pressed ? 0.8 : 1,
+      })}
+    >
+      <MyazaText
+        variant="bodySmall"
+        color={primary ? colors.onPrimary : colors.primary}
+        style={{ fontWeight: '500' }}
+        numberOfLines={1}
+      >
+        {label}
+      </MyazaText>
+    </Pressable>
+  );
+}

package/src/screens/address/PinSummaryRow.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+import { LineReveal, LineSkeleton } from '../../components/LineSkeleton';
+import { ADDRESS_LINE_PENDING, ADDRESS_LINE_UNAVAILABLE } from '../../lib/address-line';
+import { detailCount } from './DetailsSheet';
+
+/**
+ * What the pin currently says, and the way into the details sheet.
+ *
+ * The line is the composed one (displayAddressLine), the same string the review
+ * step heads its card with, so the applicant confirms exactly what they were
+ * shown here.
+ */
+export function PinSummaryRow({
+  line,
+  labelling,
+  values,
+  disabled,
+  onPress,
+}: {
+  /** The composed line; '' while the pin has no readable address yet, and
+   *  null when no pin has been placed at all. */
+  line: string | null;
+  /** A reverse geocode is out, so '' means "coming" rather than "none". */
+  labelling: boolean;
+  values: Parameters<typeof detailCount>[0];
+  disabled: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const count = detailCount(values);
+  // Three states, and none of them is a coordinate pair: no pin at all, a pin
+  // whose address is still being read (a skeleton line at the text's own
+  // height, so nothing moves when the words land), and a pin the geocoder had
+  // no address for.
+  const pending = line === '' && labelling;
+  const title = line === null ? 'No pin placed yet' : line || ADDRESS_LINE_UNAVAILABLE;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        paddingHorizontal: spacing.md - 2,
+        paddingVertical: spacing.sm + 4,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.md,
+        backgroundColor: colors.backgroundSecondary,
+      }}
+    >
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {pending ? (
+          <LineSkeleton label={ADDRESS_LINE_PENDING} variant="bodyMedium" textStyle={{ fontWeight: '600' }} />
+        ) : (
+          <LineReveal key={title}>
+            <MyazaText
+              variant="bodyMedium"
+              style={{ fontWeight: '600' }}
+              color={line ? undefined : colors.textSecondary}
+              numberOfLines={1}
+            >
+              {title}
+            </MyazaText>
+          </LineReveal>
+        )}
+        <MyazaText variant="bodySmall" color={colors.textSecondary} numberOfLines={1}>
+          {count > 0
+            ? `${count} detail${count === 1 ? '' : 's'} added`
+            : 'A house number and directions help someone find it'}
+        </MyazaText>
+      </View>
+
+      <Pressable
+        onPress={disabled ? undefined : onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel="Edit details"
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.xs + 2,
+          height: 36,
+          paddingHorizontal: spacing.sm + 4,
+          borderRadius: radius.xs,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: pressed ? colors.primary50 : colors.background,
+          opacity: disabled ? 0.5 : 1,
+        })}
+      >
+        <Icon name="pencil-line" size={14} color={colors.primary} />
+        <MyazaText variant="bodyMedium" color={colors.primary} style={{ fontWeight: '600' }}>
+          Edit details
+        </MyazaText>
+      </Pressable>
+    </View>
+  );
+}

package/src/screens/address/ReviewAddressBand.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { MyazaText } from '../../components/Typography';
+import { Icon } from '../../components/Icon';
+import { LineSkeleton } from '../../components/LineSkeleton';
+import { ADDRESS_LINE_PENDING, ADDRESS_LINE_UNAVAILABLE } from '../../lib/address-line';
+
+// The address band under the review card's map (200-line split from
+// AddressReviewStep): the success card's header-band language, so the
+// confirmation and the "check active" card read as one design. Web's exact
+// geometry: the band's row clears the thumbnails with pr-32 (128) and
+// min-h-[4.25rem] (68). Flutter draws the same band. EXACTLY 128: the 12 of
+// breathing room once added here starved the "Pinned address" pill on a
+// 360dp phone (the S24, 2026-09-08), so the label wrapped inside its pill
+// here and overflowed on Flutter.
+
+const BAND_CLEARANCE = 128;
+const BAND_MIN_HEIGHT = 68;
+
+export function ReviewAddressBand({
+  isBusiness,
+  hasAddress,
+  line,
+  labelling,
+  directions,
+  clearsHero,
+  onEdit,
+}: {
+  isBusiness: boolean;
+  hasAddress: boolean;
+  /** The composed line; '' while the pin has no readable address yet. */
+  line: string;
+  labelling: boolean;
+  directions: string | null;
+  /** Something hangs over the map's edge: the band clears it. */
+  clearsHero: boolean;
+  onEdit: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+        <View
+          style={{
+            backgroundColor: `${colors.primary}0F`,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.md,
+            paddingRight: clearsHero ? BAND_CLEARANCE : spacing.md,
+            minHeight: clearsHero ? BAND_MIN_HEIGHT : undefined,
+            borderBottomLeftRadius: radius.md - 1,
+            borderBottomRightRadius: radius.md - 1,
+          }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: spacing.sm }}>
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  alignSelf: 'flex-start',
+                  gap: spacing.sm,
+                  maxWidth: '100%',
+                  paddingHorizontal: spacing.sm + 2,
+                  paddingVertical: 4,
+                  borderRadius: radius.full,
+                  backgroundColor: `${colors.primary}1A`,
+                }}
+              >
+                <Icon name="map-pin" size={12} color={colors.primary} />
+                {/* One line, shrinking with an ellipsis when starved (a large
+                    text scale), as Flutter's pill does. */}
+                <MyazaText
+                  variant="bodySmall"
+                  color={colors.primary}
+                  numberOfLines={1}
+                  style={{ flexShrink: 1, fontSize: 11, fontWeight: '600', letterSpacing: 0.6, textTransform: 'uppercase' }}
+                >
+                  {isBusiness ? 'Pinned premises' : 'Pinned address'}
+                </MyazaText>
+              </View>
+
+              {/* Never coordinates: an unread pin shows a skeleton line while
+                  its address is still coming. Web's `text-base font-semibold`:
+                  the body face, not a heading. */}
+              {hasAddress && !line && labelling ? (
+                <LineSkeleton label={ADDRESS_LINE_PENDING} variant="body" barHeight={12} width="70%" style={{ marginTop: spacing.xs }} />
+              ) : (
+                <MyazaText variant="body" style={{ marginTop: spacing.xs, fontWeight: '600' }}>
+                  {!hasAddress ? 'No pin placed' : line || ADDRESS_LINE_UNAVAILABLE}
+                </MyazaText>
+              )}
+
+              {directions ? (
+                <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+                  {`“${directions}”`}
+                </MyazaText>
+              ) : null}
+            </View>
+
+            {/* A plain link (web `text-sm text-primary`); the band's right
+                padding keeps it clear of the entrance hanging over it. */}
+            <Pressable onPress={onEdit} accessibilityRole="button" accessibilityLabel="Edit" hitSlop={8}>
+              <MyazaText variant="bodyMedium" color={colors.primary}>
+                Edit
+              </MyazaText>
+            </Pressable>
+          </View>
+        </View>
+  );
+}

package/src/screens/address/ReviewEntranceThumbs.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Image, View, type ImageSourcePropType } from 'react-native';
+
+import { radius } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+
+// The entrance thumbnails on the review card (200-line split from
+// AddressReviewStep). Web's exact geometry, so the three cards are one card:
+//   hero h-28 (112) rounded-2xl shadow-xl at -bottom-10 right-4
+//   second h-20 (80) rounded-xl shadow-lg at right-36 (144)
+// Both share one bottom edge, 40 below the map. Flutter draws the same.
+
+export const HERO = 112;
+export const SECOND = 80;
+export const OVERHANG = 40;
+
+export function ReviewEntranceThumb({
+  source,
+  label,
+  size,
+  right,
+  onFailed,
+}: {
+  source: ImageSourcePropType;
+  label: string;
+  size: number;
+  right: number;
+  onFailed: (error: unknown) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  // The hero wears the card's radius (16), the smaller one a step down (12).
+  const r = size === HERO ? radius.md : radius.sm;
+  return (
+    // The shadow lives on a wrapper with a background of its own: an Image
+    // cannot cast one on Android, and iOS needs an opaque shape to draw it
+    // from. zIndex 20, as web spells it, so the half hanging over the band is
+    // not covered by it.
+    <View
+      style={{
+        position: 'absolute',
+        zIndex: 20,
+        right,
+        bottom: -OVERHANG,
+        width: size,
+        height: size,
+        borderRadius: r,
+        backgroundColor: colors.background,
+        shadowColor: colors.textDark,
+        shadowOpacity: 0.18,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 6,
+      }}
+    >
+      <Image
+        source={source}
+        accessibilityLabel={label}
+        onError={(e) => onFailed(e.nativeEvent?.error)}
+        style={{ width: size, height: size, borderRadius: r, borderWidth: 4, borderColor: colors.background }}
+        resizeMode="cover"
+      />
+    </View>
+  );
+}