@phosra/connect 0.1.0

package/src/native/PhosraConnect.native.tsx

@@ -0,0 +1,719 @@
+/**
+ * PhosraConnect (React Native) — styled drop-in. Mirrors web/PhosraConnect.tsx
+ * exactly: same PhosraConnectProps shape, same two intro steps, same states, and
+ * the same honesty-contract copy verbatim. Uses react-native primitives +
+ * StyleSheet.create with the same design tokens from connect.css.
+ *
+ * Drop this into a bottom-sheet, modal, or full-screen route in the PCA app.
+ * All ceremony logic runs via the shared ConnectController (useConnect hook) —
+ * nothing is re-implemented here.
+ */
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import { useConnect } from '../core/useConnect.js';
+import type {
+  AgeHint,
+  AuthorizeOpener,
+  BindResult,
+  ConnectError,
+  ConnectPlatform,
+  ConnectRule,
+  ConnectTransport,
+} from '../core/types.js';
+import { createNativeAuthorizeOpener } from './openAuthorizeUrl.native.js';
+import {
+  Spark,
+  PhosraWordmark,
+  OcssMark,
+  PlatformGlyph,
+  CheckIcon,
+  ArrowIcon,
+} from './assets.native.js';
+
+// ---- Props ---------------------------------------------------------------
+
+export interface PhosraConnectProps {
+  /** The enforcement platform being connected (e.g. { did, name: 'Snaptr' }). */
+  platform: ConnectPlatform;
+  /** The safety rules previewed as "what {platform} will apply & confirm". */
+  rules: ConnectRule[];
+  /** OCSS rule categories the grant authorizes. */
+  grantedScope: string[];
+  /** The 3 BFF calls (implemented by the PCA around @phosra/link). */
+  transport: ConnectTransport;
+  /** The PCA-registered deep-link / app-scheme redirect URL (e.g. myapp://cb). */
+  redirectUri: string;
+  childId?: string;
+  ageHint?: AgeHint;
+  /** Override the in-app browser opener (defaults to expo-web-browser). */
+  openAuthorizeUrl?: AuthorizeOpener;
+  /**
+   * The platform's own logo node (an Image or react-native-svg component).
+   * Defaults to the generic chat-bubble glyph.
+   */
+  platformGlyph?: React.ReactNode;
+  onSuccess?(r: BindResult): void;
+  onError?(e: ConnectError): void;
+  /** Called when the parent closes / cancels / finishes — the PCA dismisses the sheet. */
+  onExit?(): void;
+}
+
+// ---- Design tokens (translate of connect.css) ----------------------------
+
+const ink = '#0c110e';
+const muted = '#6b7772';
+const faint = '#9aa5a0';
+const line = '#eaedeb';
+const signal = '#00d47e';
+const deep = '#00794a';
+const green600 = '#00b568';
+const paper = '#ffffff';
+const phosraCircle = '#eafbf3';
+
+// ---- Main component ------------------------------------------------------
+
+/**
+ * Styled, drop-in Connect screen for React Native. Renders in the PCA app's
+ * own trust boundary (no Phosra-hosted page). Drives the shared ConnectController;
+ * shows the honesty contract in-UX (never a fake green: "Enforced"/verified only
+ * after the server confirms + verifies to the OCSS root).
+ */
+export function PhosraConnect(props: PhosraConnectProps): React.ReactElement {
+  const opener = React.useMemo(
+    () => props.openAuthorizeUrl ?? createNativeAuthorizeOpener(),
+    [props.openAuthorizeUrl],
+  );
+
+  const { state, open, selectChild, retry, cancel } = useConnect({
+    transport: props.transport,
+    openAuthorizeUrl: opener,
+    redirectUri: props.redirectUri,
+    platform: props.platform,
+    grantedScope: props.grantedScope,
+    childId: props.childId,
+    ageHint: props.ageHint,
+    onSuccess: props.onSuccess,
+    onError: props.onError,
+    onExit: props.onExit,
+  });
+
+  // Two intro screens (0 = intro + accreditation chip, 1 = rules preview) shown
+  // before the ceremony begins. Presentation-only — the controller never sees it.
+  const [introStep, setIntroStep] = React.useState<0 | 1>(0);
+  const platformGlyph = props.platformGlyph ?? <PlatformGlyph />;
+  const status = state.status;
+  const inIntro = status === 'idle';
+
+  const handleClose = () => {
+    if (status === 'success' || status === 'canceled') {
+      props.onExit?.();
+    } else {
+      cancel();
+    }
+  };
+
+  const handleBack = () => {
+    if (inIntro && introStep === 1) {
+      setIntroStep(0);
+    } else {
+      handleClose();
+    }
+  };
+
+  // ---- Header (shown on every screen) ------------------------------------
+  const Header = (
+    <View style={styles.header}>
+      <Pressable
+        onPress={handleBack}
+        style={styles.navButton}
+        accessibilityLabel="Back"
+        accessibilityRole="button"
+      >
+        <Text style={styles.navText}>{'‹'}</Text>
+      </Pressable>
+
+      {/* Centered brand — absolutely positioned so it doesn't push the side buttons */}
+      <View style={styles.brandCenter} pointerEvents="none">
+        <PhosraWordmark height={18} />
+        <View style={styles.divider} />
+        <View style={styles.ocssRow}>
+          <OcssMark size={14} stroke="#37433d" />
+          <Text style={styles.ocssLabel}>OCSS</Text>
+        </View>
+      </View>
+
+      <Pressable
+        onPress={handleClose}
+        style={styles.navButton}
+        accessibilityLabel="Close"
+        accessibilityRole="button"
+      >
+        <Text style={styles.navText}>{'✕'}</Text>
+      </Pressable>
+    </View>
+  );
+
+  // ---- Logos row (shared by most screens) --------------------------------
+  const Logos = (
+    <View style={styles.logosRow}>
+      <View style={[styles.logoBubble, styles.logoBubblePhosra]}>
+        <Spark size={34} fill={green600} />
+      </View>
+      <View style={[styles.logoBubble, styles.logoBubblePlatform]}>
+        {platformGlyph}
+      </View>
+    </View>
+  );
+
+  // ---- Screen bodies -----------------------------------------------------
+
+  let body: React.ReactNode;
+  let actions: React.ReactNode = null;
+
+  if (inIntro && introStep === 0) {
+    // Step 0 — intro + accreditation chip
+    body = (
+      <ScrollView
+        style={styles.body}
+        contentContainerStyle={styles.bodyContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {Logos}
+        <Text style={styles.title}>Connect {props.platform.name}</Text>
+        <Text style={styles.sub}>
+          {'You\'ll go to '}{props.platform.name}{' to securely approve these safety rules for your child\'s account.'}
+        </Text>
+        <View style={styles.chipRow}>
+          <View style={styles.chip}>
+            <OcssMark size={16} stroke={deep} />
+            <Text style={styles.chipLabel}>Accredited on the OCSS Trust List</Text>
+          </View>
+        </View>
+        <View style={styles.spacer} />
+        <Text style={styles.footnote}>
+          {'Phosra verifies enforcement with '}{props.platform.name}{' and can\'t read messages.'}
+        </Text>
+      </ScrollView>
+    );
+    actions = (
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.primaryBtn}
+          onPress={() => setIntroStep(1)}
+          accessibilityRole="button"
+        >
+          <Text style={styles.primaryBtnText}>Continue</Text>
+          <ArrowIcon size={15} />
+        </Pressable>
+      </View>
+    );
+  } else if (inIntro && introStep === 1) {
+    // Step 1 — rules preview
+    body = (
+      <ScrollView
+        style={styles.body}
+        contentContainerStyle={styles.bodyContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {Logos}
+        <Text style={styles.title}>Connect {props.platform.name}</Text>
+        <Text style={styles.sub}>
+          {'After you connect, '}
+          <Text style={styles.subBold}>{props.platform.name}{' applies and confirms'}</Text>
+          {' these rules:'}
+        </Text>
+        <View style={styles.rulesList}>
+          <Text style={styles.eyebrow}>
+            {'APPLIED & VERIFIED ON '}{props.platform.name.toUpperCase()}
+          </Text>
+          {props.rules.map((rule, idx) => (
+            <View
+              key={rule.category}
+              style={[styles.ruleRow, idx === 0 && styles.ruleRowFirst]}
+            >
+              <View style={styles.tick}>
+                <CheckIcon />
+              </View>
+              <Text style={styles.ruleLabel}>{rule.label}</Text>
+            </View>
+          ))}
+        </View>
+        <View style={styles.spacer} />
+        <Text style={styles.footnote}>
+          {'Shown as "Enforced" only after '}{props.platform.name}{' confirms — never a fake green.'}
+        </Text>
+      </ScrollView>
+    );
+    actions = (
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.primaryBtn}
+          onPress={() => void open()}
+          accessibilityRole="button"
+        >
+          <Text style={styles.primaryBtnText}>Continue</Text>
+          <ArrowIcon size={15} />
+        </Pressable>
+      </View>
+    );
+  } else if (status === 'authorizing' || status === 'exchanging') {
+    body = (
+      <View style={styles.body}>
+        {Logos}
+        <View style={styles.statusBlock}>
+          <ActivityIndicator color={green600} size="large" />
+          <Text style={styles.statusLabel}>
+            {status === 'authorizing'
+              ? `Waiting for ${props.platform.name}…`
+              : 'Finishing up…'}
+          </Text>
+        </View>
+        <View style={styles.spacer} />
+      </View>
+    );
+  } else if (status === 'selecting') {
+    body = (
+      <View style={styles.body}>
+        {Logos}
+        <Text style={styles.title}>Choose an account</Text>
+        <Text style={styles.sub}>
+          {'Which '}{props.platform.name}{' account should these rules protect?'}
+        </Text>
+        <View style={styles.picker}>
+          {(state.childProfiles ?? []).map((profile, idx) => (
+            <Pressable
+              key={profile.id}
+              style={[styles.pickerRow, idx === 0 && styles.pickerRowFirst]}
+              onPress={() => void selectChild(profile.id)}
+              accessibilityRole="button"
+            >
+              <Text style={styles.pickerRowText}>{profile.displayName}</Text>
+              <Text style={styles.pickerChevron}>{'›'}</Text>
+            </Pressable>
+          ))}
+        </View>
+        <View style={styles.spacer} />
+      </View>
+    );
+  } else if (status === 'binding') {
+    body = (
+      <View style={styles.body}>
+        {Logos}
+        <View style={styles.statusBlock}>
+          <ActivityIndicator color={green600} size="large" />
+          <Text style={styles.statusLabel}>
+            {'Applying rules on '}{props.platform.name}{'…'}
+          </Text>
+        </View>
+        <View style={styles.spacer} />
+      </View>
+    );
+  } else if (status === 'success') {
+    body = (
+      <View style={styles.body}>
+        <View style={styles.successBlock}>
+          <View style={styles.successBadge}>
+            <CheckIcon size={26} stroke={deep} />
+          </View>
+          <Text style={styles.successTitle}>{props.platform.name}{' connected'}</Text>
+          <Text style={styles.sub}>
+            {'These rules are now enforced on '}{props.platform.name}{'.'}
+          </Text>
+          <View style={styles.verifiedRow}>
+            <OcssMark size={14} stroke={deep} />
+            <Text style={styles.verifiedLabel}>{'Verified on the OCSS Trust List'}</Text>
+          </View>
+        </View>
+        <View style={styles.spacer} />
+      </View>
+    );
+    actions = (
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.primaryBtn}
+          onPress={() => props.onExit?.()}
+          accessibilityRole="button"
+        >
+          <Text style={styles.primaryBtnText}>Done</Text>
+        </Pressable>
+      </View>
+    );
+  } else if (status === 'error') {
+    body = (
+      <View style={styles.body}>
+        {Logos}
+        <View style={styles.errorBlock} accessibilityRole="alert" accessibilityLiveRegion="polite">
+          <Text style={styles.errorTitle}>
+            {'Couldn\'t connect '}{props.platform.name}
+          </Text>
+          <Text style={styles.errorMsg}>
+            {state.error?.message ?? 'Something went wrong.'}{' No rules were changed — you can try again.'}
+          </Text>
+        </View>
+        <View style={styles.spacer} />
+      </View>
+    );
+    actions = (
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.primaryBtn}
+          onPress={() => void retry()}
+          accessibilityRole="button"
+        >
+          <Text style={styles.primaryBtnText}>Try again</Text>
+        </Pressable>
+        <Pressable
+          style={styles.ghostBtn}
+          onPress={handleClose}
+          accessibilityRole="button"
+        >
+          <Text style={styles.ghostBtnText}>Cancel</Text>
+        </Pressable>
+      </View>
+    );
+  } else {
+    // canceled
+    body = <View style={styles.body} />;
+  }
+
+  return (
+    <View style={styles.root}>
+      {Header}
+      {body}
+      {actions}
+    </View>
+  );
+}
+
+// ---- Styles (translate of connect.css tokens) ----------------------------
+
+const styles = StyleSheet.create({
+  // Root container
+  root: {
+    flex: 1,
+    backgroundColor: paper,
+    paddingHorizontal: 26,
+    paddingTop: 14,
+    paddingBottom: 14,
+  },
+
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 46,
+    position: 'relative',
+  },
+  navButton: {
+    width: 26,
+    height: 26,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  navText: {
+    fontSize: 22,
+    lineHeight: 26,
+    color: ink,
+    fontWeight: '400',
+  },
+  brandCenter: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 9,
+  },
+  divider: {
+    width: 1,
+    height: 15,
+    backgroundColor: '#d7ddd9',
+  },
+  ocssRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    opacity: 0.72,
+  },
+  ocssLabel: {
+    fontSize: 10,
+    fontWeight: '800',
+    letterSpacing: 1.2,
+    color: '#37433d',
+  },
+
+  // Body
+  body: {
+    flex: 1,
+  },
+  bodyContent: {
+    flexGrow: 1,
+  },
+
+  // Logos
+  logosRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 48,
+  },
+  logoBubble: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoBubblePhosra: {
+    backgroundColor: phosraCircle,
+  },
+  logoBubblePlatform: {
+    backgroundColor: paper,
+    borderWidth: 1.5,
+    borderColor: line,
+    marginLeft: -14,
+    shadowColor: '#101820',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.09,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+
+  // Typography
+  title: {
+    textAlign: 'center',
+    fontSize: 25,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+    color: ink,
+    marginTop: 30,
+  },
+  sub: {
+    textAlign: 'center',
+    fontSize: 15,
+    lineHeight: 22,
+    color: muted,
+    marginTop: 12,
+    paddingHorizontal: 6,
+  },
+  subBold: {
+    color: ink,
+    fontWeight: '700',
+  },
+
+  // Accreditation chip
+  chipRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 20,
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    paddingVertical: 7,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+    borderColor: '#d7ece1',
+    backgroundColor: '#f3fbf7',
+    borderRadius: 22,
+  },
+  chipLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: deep,
+  },
+
+  // Rules list
+  rulesList: {
+    borderWidth: 1,
+    borderColor: line,
+    borderRadius: 16,
+    marginTop: 28,
+    overflow: 'hidden',
+  },
+  eyebrow: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 1.2,
+    color: muted,
+    paddingTop: 15,
+    paddingBottom: 11,
+    paddingHorizontal: 18,
+  },
+  ruleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 13,
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderTopWidth: 1,
+    borderTopColor: line,
+  },
+  ruleRowFirst: {
+    borderTopWidth: 1,
+    borderTopColor: line,
+  },
+  tick: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    backgroundColor: '#e7f5ee',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ruleLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: ink,
+    flex: 1,
+  },
+
+  // Child picker
+  picker: {
+    marginTop: 26,
+    borderWidth: 1,
+    borderColor: line,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  pickerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 18,
+    borderTopWidth: 1,
+    borderTopColor: line,
+    backgroundColor: paper,
+  },
+  pickerRowFirst: {
+    borderTopWidth: 0,
+  },
+  pickerRowText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: ink,
+  },
+  pickerChevron: {
+    fontSize: 20,
+    color: faint,
+  },
+
+  // Status / spinner
+  statusBlock: {
+    alignItems: 'center',
+    gap: 14,
+    marginTop: 40,
+  },
+  statusLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: muted,
+    marginTop: 14,
+  },
+
+  // Success
+  successBlock: {
+    alignItems: 'center',
+    gap: 14,
+    marginTop: 34,
+  },
+  successBadge: {
+    width: 62,
+    height: 62,
+    borderRadius: 31,
+    backgroundColor: phosraCircle,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  successTitle: {
+    fontSize: 23,
+    fontWeight: '800',
+    letterSpacing: -0.4,
+    color: ink,
+    textAlign: 'center',
+  },
+  verifiedRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  verifiedLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: deep,
+  },
+
+  // Error
+  errorBlock: {
+    alignItems: 'center',
+    gap: 10,
+    marginTop: 40,
+  },
+  errorTitle: {
+    fontSize: 19,
+    fontWeight: '800',
+    color: ink,
+    textAlign: 'center',
+  },
+  errorMsg: {
+    fontSize: 14,
+    color: muted,
+    lineHeight: 21,
+    textAlign: 'center',
+    maxWidth: 300,
+  },
+
+  // Footer
+  spacer: {
+    flex: 1,
+    minHeight: 20,
+  },
+  footnote: {
+    textAlign: 'center',
+    fontSize: 11,
+    color: faint,
+    lineHeight: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 11,
+  },
+
+  // Actions
+  actions: {
+    gap: 8,
+  },
+  primaryBtn: {
+    backgroundColor: signal,
+    borderRadius: 16,
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  primaryBtnText: {
+    fontSize: 17,
+    fontWeight: '800',
+    color: '#04150d',
+  },
+  ghostBtn: {
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ghostBtnText: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: muted,
+  },
+});