@terreno/ui 0.9.3 → 0.11.0

package/src/Common.ts

@@ -2066,7 +2066,7 @@ export interface PaginationProps {
  * Data Table
  */
 export interface DataTableCellData {
-  value: any;
+  value: unknown;
   highlight?: SurfaceColor;
   textSize?: "sm" | "md" | "lg";
 }
@@ -2085,7 +2085,7 @@ export interface DataTableColumn {
 }
 
 export interface DataTableProps {
-  data: {value: any; highlight?: SurfaceColor; textSize?: "sm" | "md" | "lg"}[][];
+  data: DataTableCellData[][];
   columns: DataTableColumn[];
   alternateRowBackground?: boolean;
   totalPages?: number;
@@ -2100,19 +2100,21 @@ export interface DataTableProps {
   /**
    * When tapping the eye icon, a modal is shown with more info about the row.
    */
-  moreContentComponent?: React.ComponentType<{
-    column: DataTableColumn;
-    rowData: any[];
-    rowIndex: number;
-  }>;
+  moreContentComponent?: React.ComponentType<
+    {
+      column: DataTableColumn;
+      rowData: DataTableCellData[];
+      rowIndex: number;
+    } & Record<string, unknown>
+  >;
   // Extra data to pass to the more modal.
-  moreContentExtraData?: any[];
+  moreContentExtraData?: Record<string, unknown>[];
   // Allows handling of custom column types.
   customColumnComponentMap?: DataTableCustomComponentMap;
 }
 
 export interface DataTableCellProps {
-  value: any;
+  value: DataTableCellData;
   columnDef: DataTableColumn;
   colIndex: number;
   isPinnedHorizontal: boolean;

package/src/ConsentFormScreen.test.tsx

@@ -0,0 +1,167 @@
+import {afterAll, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import {Text as RNText} from "react-native";
+
+// Capture the real MarkdownView export before mocking so we can restore it in
+// afterAll and avoid leaking a test-only mock to sibling test files.
+const RealMarkdownViewModule = require("./MarkdownView");
+
+// Mock MarkdownView with a simple Text passthrough so we can assert on the
+// rendered (variable-substituted) content without depending on
+// react-native-markdown-display's tokenization.
+mock.module("./MarkdownView", () => ({
+  MarkdownView: ({children}: {children: string}) => (
+    <RNText testID="markdown-view">{children}</RNText>
+  ),
+}));
+
+import {ConsentFormScreen} from "./ConsentFormScreen";
+import {renderWithTheme} from "./test-utils";
+import type {ConsentFormPublic} from "./useConsentForms";
+
+// Restore the real MarkdownView so downstream test files (e.g.
+// MarkdownView.test.tsx) see the un-mocked module regardless of test order.
+afterAll(() => {
+  mock.module("./MarkdownView", () => RealMarkdownViewModule);
+});
+
+const baseForm: ConsentFormPublic = {
+  active: true,
+  agreeButtonText: "I agree",
+  allowDecline: true,
+  captureSignature: false,
+  checkboxes: [],
+  content: {en: "Consent body", es: "Cuerpo de consentimiento"},
+  declineButtonText: "Decline",
+  defaultLocale: "en",
+  id: "consent-1",
+  order: 0,
+  required: true,
+  requireScrollToBottom: false,
+  slug: "consent",
+  title: "Consent",
+  type: "tos",
+  version: 1,
+};
+
+describe("ConsentFormScreen", () => {
+  it("renders with default state and a locale fallback", () => {
+    const onAgree = mock(() => {});
+    const {getByTestId, getByText} = renderWithTheme(
+      <ConsentFormScreen
+        form={{...baseForm, content: {en: "Hello"}}}
+        locale="fr"
+        onAgree={onAgree}
+      />
+    );
+    expect(getByTestId("consent-form-scroll-view")).toBeTruthy();
+    expect(getByText("I agree")).toBeTruthy();
+  });
+
+  it("substitutes variables in content and preserves unknown placeholders", () => {
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen
+        form={{...baseForm, content: {en: "Hello {{name}}, {{missing}} stays"}}}
+        locale="en"
+        onAgree={() => {}}
+        variables={{name: "Ada"}}
+      />
+    );
+    expect(getByTestId("markdown-view").props.children).toBe("Hello Ada, {{missing}} stays");
+  });
+
+  it("invokes onAgree with signature and checkbox values", () => {
+    const onAgree = mock(() => {});
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      captureSignature: false,
+      checkboxes: [
+        {label: "Required box", required: true},
+        {label: "Optional box", required: false},
+      ],
+    };
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={onAgree} />
+    );
+    // Toggle the required checkbox on and the optional one off/on
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+      fireEvent.press(getByTestId("consent-form-checkbox-1"));
+      fireEvent.press(getByTestId("consent-form-checkbox-1"));
+    });
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+    // Button has a debounce; wait briefly.
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        expect(onAgree).toHaveBeenCalledTimes(1);
+        const call = onAgree.mock.calls[0]?.[0] as {
+          checkboxValues: Record<string, boolean>;
+          signature?: string;
+        };
+        expect(call.checkboxValues["0"]).toBe(true);
+        expect(call.signature).toBeUndefined();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("opens and confirms the confirmation modal before toggling checkbox on", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      checkboxes: [{confirmationPrompt: "Really?", label: "Tricky", required: true}],
+    };
+    const {getByTestId, queryByText} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+    });
+    expect(queryByText("Really?")).toBeTruthy();
+  });
+
+  it("fires onDecline when decline is pressed", () => {
+    const onDecline = mock(() => {});
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={baseForm} locale="en" onAgree={() => {}} onDecline={onDecline} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-decline-button"));
+    });
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        expect(onDecline).toHaveBeenCalled();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("fires scroll handlers without crashing", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const scroll = getByTestId("consent-form-scroll-view");
+    act(() => {
+      fireEvent(scroll, "contentSizeChange", 0, 300);
+      fireEvent(scroll, "layout", {nativeEvent: {layout: {height: 400}}});
+      fireEvent(scroll, "scroll", {
+        nativeEvent: {
+          contentOffset: {y: 100},
+          contentSize: {height: 300},
+          layoutMeasurement: {height: 210},
+        },
+      });
+    });
+    expect(scroll).toBeTruthy();
+  });
+
+  it("shows the scroll hint when content is still scrollable", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    expect(getByTestId("consent-form-scroll-hint")).toBeTruthy();
+  });
+});

package/src/ConsentHistory.tsx

@@ -17,7 +17,7 @@ import type {ConsentHistoryEntry} from "./useConsentHistory";
 import {useConsentHistory} from "./useConsentHistory";
 
 interface ConsentHistoryProps {
-  api: any;
+  api: Parameters<typeof useConsentHistory>[0];
   baseUrl?: string;
   title?: string;
 }

package/src/ConsentNavigator.test.tsx

@@ -33,7 +33,7 @@ const createMockApi = (forms: ConsentFormPublic[]) => {
   mockSubmitMutation.mockReturnValue({unwrap: mockUnwrap});
 
   const innerApi = {
-    injectEndpoints: mock((_config: any) => ({
+    injectEndpoints: mock((_config: unknown) => ({
       useGetPendingConsentsQuery: mock(() => ({
         data: {data: forms},
         error: undefined,
@@ -48,13 +48,13 @@ const createMockApi = (forms: ConsentFormPublic[]) => {
   };
 
   return {
-    enhanceEndpoints: mock((_config: any) => innerApi),
+    enhanceEndpoints: mock((_config: unknown) => innerApi),
   };
 };
 
 const createLoadingMockApi = () => {
   const innerApi = {
-    injectEndpoints: mock((_config: any) => ({
+    injectEndpoints: mock((_config: unknown) => ({
       useGetPendingConsentsQuery: mock(() => ({
         data: undefined,
         error: undefined,
@@ -69,7 +69,7 @@ const createLoadingMockApi = () => {
   };
 
   return {
-    enhanceEndpoints: mock((_config: any) => innerApi),
+    enhanceEndpoints: mock((_config: unknown) => innerApi),
   };
 };
 
@@ -164,4 +164,210 @@ describe("ConsentNavigator", () => {
     // The extra screen should have a working next button (onNext was injected)
     expect(getByTestId("extra-screen-next")).toBeTruthy();
   });
+
+  it("renders children when error is auth (401)", () => {
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {status: 401},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("renders children when error is auth (403)", () => {
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {originalStatus: 403},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("renders error screen with retry button for non-auth errors", () => {
+    const onError = mock(() => {});
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {message: "Server error", status: 500},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId, getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any} onError={onError}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByTestId("consent-navigator-error")).toBeTruthy();
+    expect(getByText("Failed to load consent forms")).toBeTruthy();
+    expect(onError).toHaveBeenCalled();
+  });
+
+  it("renders without error when no extra screens provided", () => {
+    const api = createMockApi([]);
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("calls submit and refetch when user agrees to a consent form", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm();
+    const unwrap = mock(() => Promise.resolve({agreed: true, id: "r-1"}));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    await act(async () => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+
+    expect(submitMutation).toHaveBeenCalled();
+  });
+
+  it("invokes onError when consent submission fails on agree", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm();
+    const onError = mock(() => {});
+    const unwrap = mock(() => Promise.reject(new Error("submit failed")));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any} onError={onError}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    await act(async () => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(onError).toHaveBeenCalled();
+  });
+
+  it("calls submit with agreed=false when user declines an optional consent form", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm({allowDecline: true, required: false});
+    const unwrap = mock(() => Promise.resolve({agreed: false, id: "r-2"}));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    const declineBtn = getByTestId("consent-form-decline-button");
+    await act(async () => {
+      fireEvent.press(declineBtn);
+    });
+    expect(submitMutation).toHaveBeenCalled();
+  });
 });

package/src/DataTable.tsx

@@ -32,23 +32,21 @@ import {TableTitle} from "./table/TableTitle";
 // easily.
 
 const TextCell: FC<{
-  cellData: {value: string; textSize?: "sm" | "md" | "lg"};
+  cellData: DataTableCellData;
   column: DataTableColumn;
 }> = ({cellData}) => {
   return (
     <Box flex="grow" justifyContent="center">
-      <Text size={cellData.textSize || "md"}>{cellData.value}</Text>
+      <Text size={cellData.textSize || "md"}>{String(cellData.value ?? "")}</Text>
     </Box>
   );
 };
 
-const CheckedCell: FC<{cellData: {value: boolean}; column: DataTableColumn}> = ({cellData}) => {
+const CheckedCell: FC<{cellData: DataTableCellData; column: DataTableColumn}> = ({cellData}) => {
+  const isChecked = Boolean(cellData.value);
   return (
     <Box flex="grow" justifyContent="center" width="100%">
-      <Icon
-        color={cellData.value ? "success" : "secondaryDark"}
-        iconName={cellData.value ? "check" : "x"}
-      />
+      <Icon color={isChecked ? "success" : "secondaryDark"} iconName={isChecked ? "check" : "x"} />
     </Box>
   );
 };
@@ -71,7 +69,7 @@ const DataTableCell: FC<DataTableCellProps> = ({
   // Default to TextCell
   let Component: React.ComponentType<{
     column: DataTableColumn;
-    cellData: {value: any; highlight?: SurfaceColor};
+    cellData: DataTableCellData;
   }> = TextCell;
   if (customColumnComponentMap?.[columnDef.columnType]) {
     Component = customColumnComponentMap[columnDef.columnType];
@@ -401,20 +399,22 @@ const DataTableHeader: FC<DataTableHeaderProps> = ({
 };
 
 interface DataTableContentProps {
-  data: any[][];
+  data: DataTableCellData[][];
   columns: DataTableColumn[];
   pinnedColumns: number;
   alternateRowBackground: boolean;
   columnWidths: number[];
   bodyScrollRef: React.RefObject<ScrollView | null>;
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>, isHeader: boolean) => void;
-  moreContentComponent?: React.ComponentType<{
-    column: DataTableColumn;
-    rowData: any[];
-    rowIndex: number;
-  }>;
+  moreContentComponent?: React.ComponentType<
+    {
+      column: DataTableColumn;
+      rowData: DataTableCellData[];
+      rowIndex: number;
+    } & Record<string, unknown>
+  >;
   // Extra props to pass to the more modal, one per row.
-  moreContentExtraData?: any[];
+  moreContentExtraData?: Record<string, unknown>[];
   moreContentSize?: "sm" | "md" | "lg";
   customColumnComponentMap?: DataTableCustomComponentMap;
   rowHeight: number;

package/src/DateUtilities.test.ts

@@ -25,9 +25,11 @@ describe("DateUtilities", () => {
 
   describe("humanDate", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(() => humanDate(undefined as any, {timezone: "America/New_York"})).toThrow(
-        "humanDate: Passed undefined"
-      );
+      expect(() =>
+        humanDate(undefined as unknown as Parameters<typeof humanDate>[0], {
+          timezone: "America/New_York",
+        })
+      ).toThrow("humanDate: Passed undefined");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -95,9 +97,11 @@ describe("DateUtilities", () => {
 
   describe("humanDateTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(() => humanDateAndTime(undefined as any, {timezone: "America/New_York"})).toThrow(
-        "humanDateAndTime: Passed undefined"
-      );
+      expect(() =>
+        humanDateAndTime(undefined as unknown as Parameters<typeof humanDateAndTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toThrow("humanDateAndTime: Passed undefined");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -232,7 +236,9 @@ describe("DateUtilities", () => {
 
   describe("printDate", () => {
     it("should throw an error if date is undefined", () => {
-      expect(printDate(undefined as any)).toBe("Invalid Date");
+      expect(printDate(undefined as unknown as Parameters<typeof printDate>[0])).toBe(
+        "Invalid Date"
+      );
     });
 
     it("should throw an error if date is invalid", () => {
@@ -270,11 +276,17 @@ describe("DateUtilities", () => {
 
   describe("printOnlyDate", () => {
     it("should print invalid if no date and no default", () => {
-      expect(printOnlyDate(undefined as any)).toBe("Invalid Date");
+      expect(printOnlyDate(undefined as unknown as Parameters<typeof printOnlyDate>[0])).toBe(
+        "Invalid Date"
+      );
     });
 
     it("should print default if no date and default", () => {
-      expect(printOnlyDate(undefined as any, {defaultValue: "default"})).toBe("default");
+      expect(
+        printOnlyDate(undefined as unknown as Parameters<typeof printOnlyDate>[0], {
+          defaultValue: "default",
+        })
+      ).toBe("default");
     });
 
     it("should print the date in the default format", () => {
@@ -287,9 +299,11 @@ describe("DateUtilities", () => {
 
   describe("printDateTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(printDateAndTime(undefined as any, {timezone: "America/New_York"})).toBe(
-        "Invalid Datetime"
-      );
+      expect(
+        printDateAndTime(undefined as unknown as Parameters<typeof printDateAndTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toBe("Invalid Datetime");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -339,7 +353,11 @@ describe("DateUtilities", () => {
 
   describe("printTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(printTime(undefined as any, {timezone: "America/New_York"})).toBe("Invalid Date");
+      expect(
+        printTime(undefined as unknown as Parameters<typeof printTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toBe("Invalid Date");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -349,9 +367,9 @@ describe("DateUtilities", () => {
     });
 
     it("should throw an error with no timezone", () => {
-      expect(() => printTime("2022-12-24T12:00:00.000Z", {} as any)).toThrow(
-        "printTime: timezone is required"
-      );
+      expect(() =>
+        printTime("2022-12-24T12:00:00.000Z", {} as unknown as Parameters<typeof printTime>[1])
+      ).toThrow("printTime: timezone is required");
     });
 
     it("should return the time in the default format", () => {