@mr.dj2u/library-registry 0.2.0 → 0.3.0

package/assets/mds/src/features/legal/legal-update-screen.tsx

@@ -0,0 +1,297 @@
+import { useRouter } from 'expo-router';
+import { useMemo, useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { LegalDocumentModal } from './legal-document-modal';
+import { getLegalDocument, type LegalDocumentId } from './legal-documents';
+import {
+  useLegalUpdateGateSnapshot,
+  type RequiredLegalDocument,
+} from './legal-acceptance-adapter';
+
+function LegalUpdateRow({
+  document,
+  saving,
+  onOpen,
+}: {
+  document: RequiredLegalDocument;
+  saving: boolean;
+  onOpen: () => void;
+}) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onOpen}
+      style={[
+        styles.documentCard,
+        {
+          backgroundColor: colors.surface,
+          borderColor: colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <View style={styles.documentText}>
+        <Text style={[styles.documentTitle, { color: colors.text }]}>{document.title}</Text>
+        <Text style={[styles.documentMeta, { color: colors.text }]}>
+          Version {document.acceptanceVersion}
+        </Text>
+        <Text style={[styles.documentSummary, { color: colors.text }]}>
+          {document.changeSummary}
+        </Text>
+      </View>
+      <Text style={[styles.documentAction, { color: colors.primary }]}>
+        {saving ? 'Saving' : 'Review'}
+      </Text>
+    </Pressable>
+  );
+}
+
+export default function LegalUpdateScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+  const disabledForeground = getReadableTextColor(colors.surface, theme.colors.light.text);
+  const [activeDocumentId, setActiveDocumentId] = useState<LegalDocumentId | null>(null);
+  const { snapshot, refresh, acceptDocument, savingDocumentId } = useLegalUpdateGateSnapshot();
+  const activeRequiredDocument = useMemo(
+    () => snapshot.requiredDocuments.find((document) => document.documentId === activeDocumentId),
+    [activeDocumentId, snapshot.requiredDocuments],
+  );
+  const hasRequiredDocuments = snapshot.requiredDocuments.length > 0;
+  const isChecking = snapshot.status === 'checking';
+  const isComplete = snapshot.status === 'complete';
+  const canContinue = isComplete && !isChecking;
+
+  const closeModal = () => setActiveDocumentId(null);
+  const acceptActiveDocument = async () => {
+    if (!activeRequiredDocument) {
+      closeModal();
+      return;
+    }
+
+    await acceptDocument(activeRequiredDocument);
+    closeModal();
+  };
+  const continueToApp = () => {
+    if (canContinue) {
+      router.replace('/');
+    }
+  };
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text style={[styles.kicker, { color: colors.primary }]}>Legal Update</Text>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontTitle,
+            },
+          ]}>
+          Review required document updates
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>
+          Review and accept the current material legal document versions before entering the app.
+        </Text>
+      </View>
+
+      {snapshot.status === 'error' ? (
+        <View
+          style={[
+            styles.statusCard,
+            {
+              backgroundColor: colors.surface,
+              borderColor: colors.warning,
+              borderRadius: theme.layout.radius,
+            },
+          ]}>
+          <Text style={[styles.statusTitle, { color: colors.text }]}>Unable to check acceptance</Text>
+          <Text style={[styles.statusBody, { color: colors.text }]}>
+            {snapshot.error ?? 'Try again before continuing.'}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => void refresh()}
+            style={[
+              styles.secondaryButton,
+              { borderColor: colors.primary, borderRadius: theme.layout.radius },
+            ]}>
+            <Text style={[styles.secondaryButtonText, { color: colors.primary }]}>Retry</Text>
+          </Pressable>
+        </View>
+      ) : null}
+
+      {isChecking ? (
+        <Text style={[styles.statusBody, { color: colors.text }]}>Checking legal acceptance...</Text>
+      ) : null}
+
+      {!isChecking && !hasRequiredDocuments && snapshot.status !== 'error' ? (
+        <View
+          style={[
+            styles.statusCard,
+            {
+              backgroundColor: colors.surface,
+              borderColor: colors.success,
+              borderRadius: theme.layout.radius,
+            },
+          ]}>
+          <Text style={[styles.statusTitle, { color: colors.text }]}>
+            Legal documents are current
+          </Text>
+          <Text style={[styles.statusBody, { color: colors.text }]}>
+            No required legal updates are waiting on this account.
+          </Text>
+        </View>
+      ) : null}
+
+      {hasRequiredDocuments ? (
+        <View style={styles.stack}>
+          {snapshot.requiredDocuments.map((document) => (
+            <LegalUpdateRow
+              document={document}
+              key={`${document.documentId}-${document.acceptanceVersion}`}
+              onOpen={() => setActiveDocumentId(document.documentId)}
+              saving={savingDocumentId === document.documentId}
+            />
+          ))}
+        </View>
+      ) : null}
+
+      <Pressable
+        accessibilityRole="button"
+        disabled={!canContinue}
+        onPress={continueToApp}
+        style={[
+          styles.primaryButton,
+          {
+            backgroundColor: canContinue ? colors.primary : colors.surface,
+            borderRadius: theme.layout.radius,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.primaryButtonText,
+            { color: canContinue ? primaryForeground : disabledForeground },
+          ]}>
+          Continue to app
+        </Text>
+      </Pressable>
+
+      {activeRequiredDocument ? (
+        <LegalDocumentModal
+          documentId={activeRequiredDocument.documentId}
+          onClose={closeModal}
+          onPrimaryAction={() => void acceptActiveDocument()}
+          primaryActionLabel={`Accept ${getLegalDocument(activeRequiredDocument.documentId).title}`}
+          visible
+        />
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    gap: 18,
+    justifyContent: 'center',
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 84 : 28,
+  },
+  header: {
+    gap: 8,
+  },
+  kicker: {
+    fontSize: 13,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+    lineHeight: 34,
+    maxWidth: 780,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    maxWidth: 720,
+  },
+  stack: {
+    gap: 12,
+  },
+  documentCard: {
+    alignItems: 'center',
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 16,
+  },
+  documentText: {
+    flex: 1,
+    gap: 4,
+  },
+  documentTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  documentMeta: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  documentSummary: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  documentAction: {
+    fontSize: 13,
+    fontWeight: '900',
+  },
+  statusCard: {
+    borderWidth: 1,
+    gap: 8,
+    padding: 16,
+  },
+  statusTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  statusBody: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    marginTop: 4,
+    paddingVertical: 15,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  secondaryButton: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  secondaryButtonText: {
+    fontSize: 14,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/legal/use-legal-acceptance.ts

@@ -1,42 +1,5 @@
-import { useMemo, useState } from 'react';
-
 import type { LegalDocumentId } from './legal-documents';
 
 export type LegalAcceptanceRecord = Record<LegalDocumentId, boolean>;
 
-const defaultAcceptance: LegalAcceptanceRecord = {
-  terms: false,
-  privacy: false,
-};
-
-export function useLegalAcceptance(initialAcceptance: Partial<LegalAcceptanceRecord> = {}) {
-  const [acceptedDocuments, setAcceptedDocuments] = useState<LegalAcceptanceRecord>({
-    ...defaultAcceptance,
-    ...initialAcceptance,
-  });
-
-  const hasAcceptedRequiredDocuments = useMemo(
-    () => acceptedDocuments.terms && acceptedDocuments.privacy,
-    [acceptedDocuments.privacy, acceptedDocuments.terms],
-  );
-
-  const acceptDocument = (documentId: LegalDocumentId) => {
-    setAcceptedDocuments((current) => ({ ...current, [documentId]: true }));
-  };
-
-  const revokeDocument = (documentId: LegalDocumentId) => {
-    setAcceptedDocuments((current) => ({ ...current, [documentId]: false }));
-  };
-
-  const resetLegalAcceptance = () => {
-    setAcceptedDocuments(defaultAcceptance);
-  };
-
-  return {
-    acceptedDocuments,
-    hasAcceptedRequiredDocuments,
-    acceptDocument,
-    revokeDocument,
-    resetLegalAcceptance,
-  };
-}
+export { useLegalAcceptance } from './legal-acceptance-adapter';

package/assets/mds/src/features/onboarding/complete-screen.tsx

@@ -0,0 +1,138 @@
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { markOnboardingComplete } from '../onboarding-state/onboarding-state';
+import { onboardingConfig } from './onboarding-config';
+
+export default function OnboardingCompleteScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+  const [isSaving, setIsSaving] = useState(false);
+  const [completionError, setCompletionError] = useState<string | null>(null);
+
+  const finishOnboarding = async () => {
+    if (isSaving) {
+      return;
+    }
+    setIsSaving(true);
+    setCompletionError(null);
+    try {
+      await markOnboardingComplete();
+      setTimeout(() => router.replace(onboardingConfig.completion.route), 0);
+    } catch (error) {
+      setCompletionError(
+        error instanceof Error ? error.message : 'Unable to finish onboarding. Please try again.'
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View
+        style={[
+          styles.panel,
+          {
+            backgroundColor: colors.surface,
+            borderColor: colors.primary,
+            borderRadius: theme.layout.radius,
+          },
+        ]}>
+        <Text style={[styles.kicker, { color: colors.primary }]}>
+          {onboardingConfig.completion.mode}
+        </Text>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontTitle,
+            },
+          ]}>
+          {onboardingConfig.completeTitle}
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>{onboardingConfig.completeBody}</Text>
+        <Text style={[styles.helper, { color: colors.text }]}>
+          {onboardingConfig.completion.helperText}
+        </Text>
+        {completionError ? (
+          <Text style={[styles.errorText, { color: colors.warning }]}>{completionError}</Text>
+        ) : null}
+        <Pressable
+          accessibilityRole="button"
+          disabled={isSaving}
+          onPress={() => void finishOnboarding()}
+          style={[
+            styles.primaryButton,
+            { backgroundColor: colors.primary, borderRadius: theme.layout.radius },
+          ]}>
+          <Text style={[styles.primaryButtonText, { color: primaryForeground }]}>
+            {isSaving ? 'Completing...' : onboardingConfig.completion.label}
+          </Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 84 : 28,
+  },
+  panel: {
+    alignSelf: 'center',
+    borderWidth: 1,
+    gap: 12,
+    maxWidth: 760,
+    padding: 18,
+    width: '100%',
+  },
+  kicker: {
+    fontSize: 12,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+    lineHeight: 34,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  helper: {
+    fontSize: 13,
+    lineHeight: 19,
+    opacity: 0.86,
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: '800',
+    lineHeight: 19,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    marginTop: 4,
+    paddingVertical: 15,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/onboarding/features-screen.tsx

@@ -0,0 +1,129 @@
+import { Link } from 'expo-router';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { onboardingConfig } from './onboarding-config';
+
+export default function OnboardingFeaturesScreen() {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text style={[styles.kicker, { color: colors.primary }]}>
+          {onboardingConfig.featuresEyebrow}
+        </Text>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontTitle,
+            },
+          ]}>
+          {onboardingConfig.featuresTitle}
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>{onboardingConfig.featuresBody}</Text>
+      </View>
+
+      <View style={styles.stack}>
+        {onboardingConfig.featureHighlights.map((feature) => (
+          <View
+            key={feature.id}
+            style={[
+              styles.featureCard,
+              {
+                backgroundColor: colors.surface,
+                borderColor: colors.primary,
+                borderRadius: theme.layout.radius,
+              },
+            ]}>
+            {feature.badge ? (
+              <Text style={[styles.badge, { color: colors.primary }]}>{feature.badge}</Text>
+            ) : null}
+            <Text style={[styles.featureTitle, { color: colors.text }]}>{feature.title}</Text>
+            <Text style={[styles.featureBody, { color: colors.text }]}>{feature.body}</Text>
+          </View>
+        ))}
+      </View>
+
+      <Link href={onboardingConfig.nextRouteAfterFeatures} asChild>
+        <Pressable
+          accessibilityRole="button"
+          style={StyleSheet.flatten([
+            styles.primaryButton,
+            { backgroundColor: colors.primary, borderRadius: theme.layout.radius },
+          ])}>
+          <Text style={[styles.primaryButtonText, { color: primaryForeground }]}>Continue</Text>
+        </Pressable>
+      </Link>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    gap: 18,
+    justifyContent: 'center',
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 84 : 28,
+  },
+  header: {
+    gap: 8,
+  },
+  kicker: {
+    fontSize: 13,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+    lineHeight: 34,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    maxWidth: 720,
+  },
+  stack: {
+    gap: 12,
+  },
+  featureCard: {
+    borderWidth: 1,
+    gap: 7,
+    padding: 16,
+  },
+  badge: {
+    fontSize: 11,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  featureTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  featureBody: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    marginTop: 4,
+    paddingVertical: 15,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});