@terreno/ui 0.7.2 → 0.8.1

package/src/ConsentFormScreen.tsx

@@ -0,0 +1,216 @@
+import React, {useState} from "react";
+import {Pressable, ScrollView} from "react-native";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {CheckBox} from "./CheckBox";
+import {MarkdownView} from "./MarkdownView";
+import {Modal} from "./Modal";
+import {Page} from "./Page";
+import {SignatureField} from "./SignatureField";
+import {Text} from "./Text";
+import type {ConsentFormPublic} from "./useConsentForms";
+
+interface ConsentFormScreenProps {
+  form: ConsentFormPublic;
+  isSubmitting?: boolean;
+  locale: string;
+  onAgree: (data: {checkboxValues: Record<string, boolean>; signature?: string}) => void;
+  onDecline?: () => void;
+}
+
+export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
+  form,
+  isSubmitting = false,
+  locale,
+  onAgree,
+  onDecline,
+}) => {
+  const [checkboxValues, setCheckboxValues] = useState<Record<string, boolean>>({});
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(!form.requireScrollToBottom);
+  const [signatureValue, setSignatureValue] = useState<string | undefined>(undefined);
+  const [confirmModalVisible, setConfirmModalVisible] = useState(false);
+  const [confirmModalCheckboxIndex, setConfirmModalCheckboxIndex] = useState<number | null>(null);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [layoutHeight, setLayoutHeight] = useState(0);
+
+  const content = form.content[locale] ?? form.content[form.defaultLocale] ?? "";
+
+  const allRequiredCheckboxesChecked = form.checkboxes.every((checkbox, index) => {
+    if (!checkbox.required) {
+      return true;
+    }
+    return checkboxValues[index.toString()] === true;
+  });
+
+  const signatureProvided = !form.captureSignature || Boolean(signatureValue);
+
+  const canAgree = hasScrolledToBottom && allRequiredCheckboxesChecked && signatureProvided;
+
+  // Auto-satisfy scroll requirement when content fits within the viewport
+  const handleContentSizeChange = (_w: number, h: number) => {
+    setContentHeight(h);
+    if (!hasScrolledToBottom && h > 0 && layoutHeight > 0 && h <= layoutHeight) {
+      setHasScrolledToBottom(true);
+    }
+  };
+
+  const handleLayout = (event: any) => {
+    const h = event.nativeEvent.layout.height;
+    setLayoutHeight(h);
+    if (!hasScrolledToBottom && contentHeight > 0 && h > 0 && contentHeight <= h) {
+      setHasScrolledToBottom(true);
+    }
+  };
+
+  const handleScroll = (event: any) => {
+    if (hasScrolledToBottom) {
+      return;
+    }
+    const {contentOffset, contentSize, layoutMeasurement} = event.nativeEvent;
+    const distanceFromBottom = contentSize.height - layoutMeasurement.height - contentOffset.y;
+    if (distanceFromBottom <= 20) {
+      setHasScrolledToBottom(true);
+    }
+  };
+
+  const handleCheckboxPress = (index: number) => {
+    const checkbox = form.checkboxes[index];
+    const key = index.toString();
+    const currentValue = checkboxValues[key] ?? false;
+
+    if (checkbox.confirmationPrompt && !currentValue) {
+      // Show confirmation modal before toggling on
+      setConfirmModalCheckboxIndex(index);
+      setConfirmModalVisible(true);
+    } else {
+      setCheckboxValues((prev) => ({...prev, [key]: !currentValue}));
+    }
+  };
+
+  const handleConfirmModalConfirm = () => {
+    if (confirmModalCheckboxIndex !== null) {
+      const key = confirmModalCheckboxIndex.toString();
+      setCheckboxValues((prev) => ({...prev, [key]: true}));
+    }
+    setConfirmModalVisible(false);
+    setConfirmModalCheckboxIndex(null);
+  };
+
+  const handleConfirmModalDismiss = () => {
+    setConfirmModalVisible(false);
+    setConfirmModalCheckboxIndex(null);
+  };
+
+  const handleAgree = () => {
+    onAgree({checkboxValues, signature: signatureValue});
+  };
+
+  const confirmingCheckbox =
+    confirmModalCheckboxIndex !== null ? form.checkboxes[confirmModalCheckboxIndex] : null;
+
+  const footer = (
+    <Box direction="column" gap={2} paddingY={2} testID="consent-form-footer" width="100%">
+      {Boolean(form.allowDecline && onDecline) && (
+        <Box width="100%">
+          <Button
+            fullWidth
+            onClick={onDecline!}
+            testID="consent-form-decline-button"
+            text={form.declineButtonText}
+            variant="muted"
+          />
+        </Box>
+      )}
+      <Box width="100%">
+        <Button
+          disabled={!canAgree}
+          fullWidth
+          loading={isSubmitting}
+          onClick={handleAgree}
+          testID="consent-form-agree-button"
+          text={form.agreeButtonText}
+        />
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Page footer={footer} scroll={false} title={form.title}>
+      <ScrollView
+        onContentSizeChange={handleContentSizeChange}
+        onLayout={handleLayout}
+        onScroll={handleScroll}
+        scrollEnabled={scrollEnabled}
+        scrollEventThrottle={16}
+        style={{flex: 1}}
+        testID="consent-form-scroll-view"
+      >
+        <Box direction="column" gap={3} paddingY={2}>
+          <MarkdownView>{content}</MarkdownView>
+
+          {form.checkboxes.length > 0 && (
+            <Box direction="column" gap={2} testID="consent-form-checkboxes">
+              {form.checkboxes.map((checkbox, index) => {
+                const key = index.toString();
+                const isChecked = checkboxValues[key] ?? false;
+
+                return (
+                  <Pressable
+                    key={key}
+                    onPress={() => handleCheckboxPress(index)}
+                    testID={`consent-form-checkbox-${index}`}
+                  >
+                    <Box alignItems="center" direction="row" gap={2}>
+                      <CheckBox selected={isChecked} size="md" />
+                      <Box flex="grow">
+                        <Text size="md">
+                          {checkbox.label}
+                          {checkbox.required && " *"}
+                        </Text>
+                      </Box>
+                    </Box>
+                  </Pressable>
+                );
+              })}
+            </Box>
+          )}
+
+          {Boolean(form.captureSignature) && (
+            <Box direction="column" gap={2} testID="consent-form-signature">
+              <SignatureField
+                onChange={(value) => setSignatureValue(value)}
+                onEnd={() => setScrollEnabled(true)}
+                onStart={() => setScrollEnabled(false)}
+                title="Signature"
+                value={signatureValue}
+              />
+            </Box>
+          )}
+
+          {Boolean(form.requireScrollToBottom && !hasScrolledToBottom) && (
+            <Box paddingY={2} testID="consent-form-scroll-hint">
+              <Text color="secondaryDark" size="sm">
+                Please scroll to the bottom to continue.
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </ScrollView>
+
+      {confirmingCheckbox && (
+        <Modal
+          onDismiss={handleConfirmModalDismiss}
+          primaryButtonOnClick={handleConfirmModalConfirm}
+          primaryButtonText="Confirm"
+          secondaryButtonOnClick={handleConfirmModalDismiss}
+          secondaryButtonText="Cancel"
+          text={confirmingCheckbox.confirmationPrompt}
+          title="Please confirm"
+          visible={confirmModalVisible}
+        />
+      )}
+    </Page>
+  );
+};

package/src/ConsentHistory.tsx

@@ -0,0 +1,249 @@
+import {DateTime} from "luxon";
+import React, {useCallback, useState} from "react";
+import {Image, Pressable} from "react-native";
+
+import {Badge} from "./Badge";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Card} from "./Card";
+import {generateConsentHistoryPdf} from "./generateConsentHistoryPdf";
+import {Icon} from "./Icon";
+import {IconButton} from "./IconButton";
+import {MarkdownView} from "./MarkdownView";
+import {Page} from "./Page";
+import {Spinner} from "./Spinner";
+import {Text} from "./Text";
+import type {ConsentHistoryEntry} from "./useConsentHistory";
+import {useConsentHistory} from "./useConsentHistory";
+
+interface ConsentHistoryProps {
+  api: any;
+  baseUrl?: string;
+  title?: string;
+}
+
+const formatDate = (value: unknown): string => {
+  if (!value) {
+    return "";
+  }
+  const dt = DateTime.fromISO(String(value));
+  if (!dt.isValid) {
+    return String(value);
+  }
+  return dt.toLocaleString(DateTime.DATETIME_MED);
+};
+
+const ConsentHistoryItem: React.FC<{entry: ConsentHistoryEntry}> = ({entry}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const toggle = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const handleDownload = useCallback(async () => {
+    setIsDownloading(true);
+    try {
+      await generateConsentHistoryPdf(entry);
+    } catch (err) {
+      console.error("Failed to generate PDF", err);
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [entry]);
+
+  const formTitle = entry.form?.title ?? "Unknown Form";
+  const formType = entry.form?.type ?? "";
+
+  const checkboxEntries =
+    entry.checkboxValues && typeof entry.checkboxValues === "object"
+      ? Object.entries(entry.checkboxValues)
+      : [];
+
+  return (
+    <Card padding={0} testID={`consent-history-item-${entry._id}`}>
+      <Pressable onPress={toggle} testID={`consent-history-item-toggle-${entry._id}`}>
+        <Box direction="row" gap={3} padding={4}>
+          <Box flex="grow" gap={1}>
+            <Box alignItems="center" direction="row" gap={2}>
+              <Text bold size="md">
+                {formTitle}
+              </Text>
+              {formType ? <Badge status="neutral" value={formType} /> : null}
+            </Box>
+            <Box alignItems="center" direction="row" gap={2}>
+              <Badge
+                status={entry.agreed ? "success" : "error"}
+                value={entry.agreed ? "Agreed" : "Declined"}
+              />
+              <Text color="secondaryDark" size="sm">
+                {formatDate(entry.agreedAt)}
+              </Text>
+            </Box>
+          </Box>
+          <Box alignItems="center" justifyContent="center">
+            <Icon
+              color="secondaryDark"
+              iconName={expanded ? "chevron-up" : "chevron-down"}
+              size="sm"
+            />
+          </Box>
+        </Box>
+      </Pressable>
+
+      {expanded && (
+        <Box gap={3} padding={4} testID={`consent-history-item-details-${entry._id}`}>
+          <Box alignItems="center" direction="row" justifyContent="between">
+            <Box color="disabled" flex="grow" height={1} />
+            <Box marginLeft={2}>
+              <IconButton
+                accessibilityLabel="Download PDF"
+                iconName="download"
+                loading={isDownloading}
+                onClick={handleDownload}
+                testID={`consent-history-download-${entry._id}`}
+                tooltipText="Download PDF"
+              />
+            </Box>
+          </Box>
+
+          {entry.form?.version !== undefined && (
+            <Box alignItems="center" direction="row" gap={2}>
+              <Text color="secondaryDark" size="sm">
+                Version:
+              </Text>
+              <Text size="sm">{entry.form.version}</Text>
+            </Box>
+          )}
+
+          {entry.locale && (
+            <Box alignItems="center" direction="row" gap={2}>
+              <Text color="secondaryDark" size="sm">
+                Locale:
+              </Text>
+              <Text size="sm">{entry.locale}</Text>
+            </Box>
+          )}
+
+          {entry.signedAt && (
+            <Box alignItems="center" direction="row" gap={2}>
+              <Text color="secondaryDark" size="sm">
+                Signed:
+              </Text>
+              <Text size="sm">{formatDate(entry.signedAt)}</Text>
+            </Box>
+          )}
+
+          {entry.ipAddress && (
+            <Box alignItems="center" direction="row" gap={2}>
+              <Text color="secondaryDark" size="sm">
+                IP Address:
+              </Text>
+              <Text size="sm">{entry.ipAddress}</Text>
+            </Box>
+          )}
+
+          {checkboxEntries.length > 0 && (
+            <Box gap={2}>
+              <Text bold color="secondaryDark" size="sm">
+                Checkboxes
+              </Text>
+              {checkboxEntries.map(([index, checked]) => {
+                const label = entry.form?.checkboxes?.[Number(index)]?.label;
+                return (
+                  <Box alignItems="center" direction="row" gap={2} key={index}>
+                    <Badge
+                      status={checked ? "success" : "neutral"}
+                      value={checked ? "Yes" : "No"}
+                    />
+                    <Text size="sm">{label ?? `Checkbox ${index}`}</Text>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+
+          {entry.signature && (
+            <Box gap={2}>
+              <Text bold color="secondaryDark" size="sm">
+                Signature
+              </Text>
+              <Box border="default" padding={2} rounding="sm">
+                <Image
+                  accessibilityLabel="Your signature"
+                  accessible
+                  resizeMode="contain"
+                  source={{uri: entry.signature}}
+                  style={{height: 80, width: "100%"}}
+                  testID={`consent-history-signature-${entry._id}`}
+                />
+              </Box>
+            </Box>
+          )}
+
+          {entry.contentSnapshot && (
+            <Box gap={2}>
+              <Text bold color="secondaryDark" size="sm">
+                Form Content
+              </Text>
+              <Box border="default" padding={3} rounding="sm">
+                <MarkdownView>{entry.contentSnapshot}</MarkdownView>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Card>
+  );
+};
+
+export const ConsentHistory: React.FC<ConsentHistoryProps> = ({
+  api,
+  baseUrl,
+  title = "My Consents",
+}) => {
+  const {entries, isLoading, error, refetch} = useConsentHistory(api, baseUrl);
+
+  if (isLoading) {
+    return (
+      <Page maxWidth={800} title={title}>
+        <Box alignItems="center" justifyContent="center" padding={6}>
+          <Spinner />
+        </Box>
+      </Page>
+    );
+  }
+
+  if (error) {
+    return (
+      <Page maxWidth={800} title={title}>
+        <Box alignItems="center" direction="column" gap={3} padding={6}>
+          <Text color="error" size="lg">
+            Failed to load consent history
+          </Text>
+          <Button onClick={refetch} text="Retry" />
+        </Box>
+      </Page>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <Page maxWidth={800} title={title}>
+        <Box alignItems="center" padding={6}>
+          <Text color="secondaryDark">No consent records found.</Text>
+        </Box>
+      </Page>
+    );
+  }
+
+  return (
+    <Page maxWidth={800} scroll title={title}>
+      <Box gap={3} padding={4} testID="consent-history-list">
+        {entries.map((entry) => (
+          <ConsentHistoryItem entry={entry} key={entry._id} />
+        ))}
+      </Box>
+    </Page>
+  );
+};

package/src/ConsentNavigator.test.tsx

@@ -0,0 +1,111 @@
+import {describe, expect, it, mock} from "bun:test";
+import React from "react";
+import {ConsentNavigator} from "./ConsentNavigator";
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+import type {ConsentFormPublic} from "./useConsentForms";
+
+const makeForm = (overrides: Partial<ConsentFormPublic> = {}): ConsentFormPublic => ({
+  active: true,
+  agreeButtonText: "I Agree",
+  allowDecline: false,
+  captureSignature: false,
+  checkboxes: [],
+  content: {en: "# Terms\n\nPlease read these terms."},
+  declineButtonText: "Decline",
+  defaultLocale: "en",
+  id: "form-1",
+  order: 1,
+  required: true,
+  requireScrollToBottom: false,
+  slug: "tos",
+  title: "Terms of Service",
+  type: "terms",
+  version: 1,
+  ...overrides,
+});
+
+const createMockApi = (forms: ConsentFormPublic[]) => {
+  const mockSubmitMutation = mock(() => Promise.resolve({data: {agreed: true, id: "response-1"}}));
+  const mockUnwrap = mock(() => Promise.resolve({agreed: true, id: "response-1"}));
+  mockSubmitMutation.mockReturnValue({unwrap: mockUnwrap});
+
+  const innerApi = {
+    injectEndpoints: mock((_config: any) => ({
+      useGetPendingConsentsQuery: mock(() => ({
+        data: {data: forms},
+        error: undefined,
+        isLoading: false,
+        refetch: mock(() => Promise.resolve()),
+      })),
+      useSubmitConsentResponseMutation: mock(() => [
+        mockSubmitMutation,
+        {error: undefined, isLoading: false},
+      ]),
+    })),
+  };
+
+  return {
+    enhanceEndpoints: mock((_config: any) => innerApi),
+  };
+};
+
+const createLoadingMockApi = () => {
+  const innerApi = {
+    injectEndpoints: mock((_config: any) => ({
+      useGetPendingConsentsQuery: mock(() => ({
+        data: undefined,
+        error: undefined,
+        isLoading: true,
+        refetch: mock(() => Promise.resolve()),
+      })),
+      useSubmitConsentResponseMutation: mock(() => [
+        mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+        {error: undefined, isLoading: false},
+      ]),
+    })),
+  };
+
+  return {
+    enhanceEndpoints: mock((_config: any) => innerApi),
+  };
+};
+
+describe("ConsentNavigator", () => {
+  it("renders children when there are no pending consent forms", async () => {
+    const api = createMockApi([]);
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("shows ConsentFormScreen when there are pending forms", async () => {
+    const form = makeForm();
+    const api = createMockApi([form]);
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    // The agree button is rendered inside ConsentFormScreen
+    expect(getByTestId("consent-form-agree-button")).toBeTruthy();
+  });
+
+  it("shows loading spinner while fetching consent forms", async () => {
+    const api = createLoadingMockApi();
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    expect(getByTestId("consent-navigator-loading")).toBeTruthy();
+  });
+});

package/src/ConsentNavigator.tsx

@@ -0,0 +1,128 @@
+import React, {useState} from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {ConsentFormScreen} from "./ConsentFormScreen";
+import {Spinner} from "./Spinner";
+import {Text} from "./Text";
+import {detectLocale, useConsentForms} from "./useConsentForms";
+import type {SubmitConsentBody} from "./useSubmitConsent";
+import {useSubmitConsent} from "./useSubmitConsent";
+
+interface ConsentNavigatorProps {
+  api: any;
+  baseUrl?: string;
+  children: React.ReactNode;
+  onError?: (error: any) => void;
+}
+
+export const ConsentNavigator: React.FC<ConsentNavigatorProps> = ({
+  api,
+  baseUrl,
+  children,
+  onError,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const {forms, isLoading, error, refetch} = useConsentForms(api, baseUrl);
+  const {submit, isSubmitting} = useSubmitConsent(api, baseUrl);
+  const locale = detectLocale();
+
+  if (isLoading) {
+    console.debug("[ConsentNavigator] Loading pending consents...");
+    return (
+      <Box
+        alignItems="center"
+        flex="grow"
+        justifyContent="center"
+        testID="consent-navigator-loading"
+      >
+        <Spinner />
+      </Box>
+    );
+  }
+
+  if (error) {
+    const status = (error as any)?.status ?? (error as any)?.originalStatus;
+    console.warn("[ConsentNavigator] Error fetching pending consents:", {error, status});
+    // On auth errors, pass through to let the app handle re-authentication
+    if (status === 401 || status === 403) {
+      return <>{children}</>;
+    }
+    onError?.(error);
+    return (
+      <Box
+        alignItems="center"
+        direction="column"
+        flex="grow"
+        gap={3}
+        justifyContent="center"
+        padding={6}
+        testID="consent-navigator-error"
+      >
+        <Text align="center" color="error" size="lg">
+          Failed to load consent forms
+        </Text>
+        <Button onClick={refetch} text="Retry" />
+      </Box>
+    );
+  }
+
+  if (forms.length === 0 || currentIndex >= forms.length) {
+    console.debug("[ConsentNavigator] No pending consents, showing app");
+    return <>{children}</>;
+  }
+
+  console.info(
+    `[ConsentNavigator] Showing consent form ${currentIndex + 1}/${forms.length}: ${forms[currentIndex]?.title}`
+  );
+
+  const currentForm = forms[currentIndex];
+
+  const handleAgree = async (data: {
+    checkboxValues: Record<string, boolean>;
+    signature?: string;
+  }) => {
+    const body: SubmitConsentBody = {
+      agreed: true,
+      checkboxValues: data.checkboxValues,
+      consentFormId: currentForm.id,
+      locale,
+      signature: data.signature,
+    };
+
+    try {
+      await submit(body);
+      // Always refetch and reset so we pick up the updated pending list.
+      // Advancing currentIndex is racy because invalidatesTags shrinks
+      // the forms array in the background.
+      setCurrentIndex(0);
+      await refetch();
+    } catch (err) {
+      onError?.(err);
+    }
+  };
+
+  const handleDecline = async () => {
+    try {
+      await submit({
+        agreed: false,
+        consentFormId: currentForm.id,
+        locale,
+      });
+      setCurrentIndex(0);
+      await refetch();
+    } catch (err) {
+      onError?.(err);
+    }
+  };
+
+  return (
+    <ConsentFormScreen
+      form={currentForm}
+      isSubmitting={isSubmitting}
+      locale={locale}
+      onAgree={handleAgree}
+      onDecline={currentForm.required ? undefined : handleDecline}
+    />
+  );
+};