@terreno/ui 0.7.1 → 0.8.0

package/src/generateConsentHistoryPdf.ts

@@ -0,0 +1,211 @@
+import {jsPDF} from "jspdf";
+import {DateTime} from "luxon";
+
+import type {ConsentHistoryEntry} from "./useConsentHistory";
+
+const PAGE_WIDTH = 210;
+const MARGIN_LEFT = 20;
+const MARGIN_RIGHT = 20;
+const CONTENT_WIDTH = PAGE_WIDTH - MARGIN_LEFT - MARGIN_RIGHT;
+const PAGE_HEIGHT = 297;
+const MARGIN_BOTTOM = 20;
+
+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_FULL);
+};
+
+const ensureSpace = (doc: jsPDF, y: number, needed: number): number => {
+  if (y + needed > PAGE_HEIGHT - MARGIN_BOTTOM) {
+    doc.addPage();
+    return 20;
+  }
+  return y;
+};
+
+export const generateConsentHistoryPdf = async (entry: ConsentHistoryEntry): Promise<void> => {
+  const doc = new jsPDF({format: "a4", orientation: "portrait", unit: "mm"});
+
+  const formTitle = entry.form?.title ?? "Unknown Form";
+  const formSlug = entry.form?.slug ?? "";
+  const formType = entry.form?.type ?? "";
+  const formVersion = entry.form?.version ?? entry.formVersionSnapshot;
+
+  let y = 20;
+
+  // Title
+  doc.setFontSize(18);
+  doc.setFont("helvetica", "bold");
+  doc.text("Consent Record", MARGIN_LEFT, y);
+  y += 10;
+
+  // Form title
+  doc.setFontSize(14);
+  doc.setFont("helvetica", "normal");
+  doc.text(formTitle, MARGIN_LEFT, y);
+  y += 10;
+
+  // Separator
+  doc.setDrawColor(200, 200, 200);
+  doc.line(MARGIN_LEFT, y, PAGE_WIDTH - MARGIN_RIGHT, y);
+  y += 8;
+
+  // Helper to add a labeled field
+  const addField = (label: string, value: string) => {
+    y = ensureSpace(doc, y, 8);
+    doc.setFontSize(9);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(100, 100, 100);
+    doc.text(label, MARGIN_LEFT, y);
+    doc.setFont("helvetica", "normal");
+    doc.setTextColor(0, 0, 0);
+    doc.setFontSize(10);
+    doc.text(value, MARGIN_LEFT + 45, y);
+    y += 6;
+  };
+
+  // Response Details
+  doc.setFontSize(12);
+  doc.setFont("helvetica", "bold");
+  doc.setTextColor(0, 0, 0);
+  doc.text("Response Details", MARGIN_LEFT, y);
+  y += 8;
+
+  if (formSlug) {
+    addField("Form Slug:", formSlug);
+  }
+  if (formType) {
+    addField("Form Type:", formType);
+  }
+  if (formVersion !== undefined) {
+    addField("Form Version:", String(formVersion));
+  }
+  addField("Decision:", entry.agreed ? "Agreed" : "Declined");
+  if (entry.agreedAt) {
+    addField("Agreed At:", formatDate(entry.agreedAt));
+  }
+  if (entry.locale) {
+    addField("Locale:", entry.locale);
+  }
+
+  y += 4;
+
+  // Checkbox Values
+  const checkboxEntries =
+    entry.checkboxValues && typeof entry.checkboxValues === "object"
+      ? Object.entries(entry.checkboxValues)
+      : [];
+
+  if (checkboxEntries.length > 0) {
+    y = ensureSpace(doc, y, 12 + checkboxEntries.length * 6);
+    doc.setFontSize(12);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(0, 0, 0);
+    doc.text("Checkbox Responses", MARGIN_LEFT, y);
+    y += 8;
+
+    for (const [index, checked] of checkboxEntries) {
+      y = ensureSpace(doc, y, 6);
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      const label = entry.form?.checkboxes?.[Number(index)]?.label;
+      const checkmark = checked ? "[x]" : "[ ]";
+      doc.text(`${checkmark} ${label ?? `Checkbox ${index}`}`, MARGIN_LEFT + 4, y);
+      y += 6;
+    }
+    y += 4;
+  }
+
+  // Audit Trail
+  const hasAuditTrail = entry.ipAddress || entry.userAgent || entry.formVersionSnapshot;
+
+  if (hasAuditTrail) {
+    y = ensureSpace(doc, y, 20);
+    doc.setFontSize(12);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(0, 0, 0);
+    doc.text("Audit Trail", MARGIN_LEFT, y);
+    y += 8;
+
+    if (entry.ipAddress) {
+      addField("IP Address:", entry.ipAddress);
+    }
+    if (entry.userAgent) {
+      addField("User Agent:", entry.userAgent);
+    }
+    if (entry.formVersionSnapshot !== undefined) {
+      addField("Form Version:", String(entry.formVersionSnapshot));
+    }
+    if (entry.signedAt) {
+      addField("Signed At:", formatDate(entry.signedAt));
+    }
+    y += 4;
+  }
+
+  // Signature
+  if (entry.signature) {
+    y = ensureSpace(doc, y, 50);
+    doc.setFontSize(12);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(0, 0, 0);
+    doc.text("Signature", MARGIN_LEFT, y);
+    y += 6;
+
+    try {
+      const format = entry.signature.includes("image/png") ? "PNG" : "JPEG";
+      doc.addImage(entry.signature, format, MARGIN_LEFT, y, 80, 30);
+      y += 34;
+    } catch {
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "italic");
+      doc.text("(Signature image could not be embedded)", MARGIN_LEFT, y);
+      y += 6;
+    }
+    y += 4;
+  }
+
+  // Content Snapshot
+  if (entry.contentSnapshot) {
+    y = ensureSpace(doc, y, 20);
+    doc.setFontSize(12);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(0, 0, 0);
+    doc.text("Content Snapshot", MARGIN_LEFT, y);
+    y += 8;
+
+    doc.setFontSize(9);
+    doc.setFont("helvetica", "normal");
+    doc.setTextColor(50, 50, 50);
+
+    const lines = doc.splitTextToSize(entry.contentSnapshot, CONTENT_WIDTH);
+    for (const line of lines) {
+      y = ensureSpace(doc, y, 5);
+      doc.text(line, MARGIN_LEFT, y);
+      y += 4;
+    }
+  }
+
+  // Footer
+  y = ensureSpace(doc, y, 20);
+  y += 8;
+  doc.setDrawColor(200, 200, 200);
+  doc.line(MARGIN_LEFT, y, PAGE_WIDTH - MARGIN_RIGHT, y);
+  y += 6;
+  doc.setFontSize(8);
+  doc.setFont("helvetica", "italic");
+  doc.setTextColor(150, 150, 150);
+  doc.text(`Generated ${DateTime.now().toLocaleString(DateTime.DATETIME_FULL)}`, MARGIN_LEFT, y);
+  if (entry._id) {
+    doc.text(`Response ID: ${entry._id}`, PAGE_WIDTH - MARGIN_RIGHT, y, {align: "right"});
+  }
+
+  // Download
+  const filename = `consent-${formSlug || "response"}-${DateTime.now().toFormat("yyyy-MM-dd")}.pdf`;
+  doc.save(filename);
+};

package/src/index.tsx

@@ -16,6 +16,9 @@ export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
 export * from "./Common";
+export * from "./ConsentFormScreen";
+export * from "./ConsentHistory";
+export * from "./ConsentNavigator";
 export * from "./Constants";
 export * from "./CustomSelectField";
 export * from "./DataTable";
@@ -24,6 +27,7 @@ export * from "./DateTimeField";
 export * from "./DateUtilities";
 export * from "./DecimalRangeActionSheet";
 export * from "./DismissButton";
+export {DraggableList} from "./DraggableList";
 export * from "./EmailField";
 export {default as EmojiSelector} from "./EmojiSelector";
 export * from "./ErrorBoundary";
@@ -44,7 +48,7 @@ export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./login";
-
+export * from "./MarkdownEditor";
 export * from "./MarkdownEditorField";
 export * from "./MarkdownView";
 export * from "./MediaQuery";
@@ -97,9 +101,13 @@ export * from "./table/TableTitle";
 export * from "./table/tableContext";
 export * from "./UnifiedAddressAutoComplete";
 export * from "./Unifier";
+export * from "./UpgradeRequiredScreen";
 export * from "./UserInactivity";
 export * from "./Utilities";
+export * from "./useConsentForms";
+export * from "./useConsentHistory";
 export * from "./useStoredState";
+export * from "./useSubmitConsent";
 export * from "./WebAddressAutocomplete";
 
 // export * from "./Layout";

package/src/useConsentForms.ts

@@ -0,0 +1,70 @@
+export interface ConsentFormPublic {
+  id: string;
+  title: string;
+  slug: string;
+  version: number;
+  order: number;
+  type: string;
+  content: Record<string, string>;
+  defaultLocale: string;
+  active: boolean;
+  captureSignature: boolean;
+  requireScrollToBottom: boolean;
+  checkboxes: Array<{label: string; required: boolean; confirmationPrompt?: string}>;
+  agreeButtonText: string;
+  allowDecline: boolean;
+  declineButtonText: string;
+  required: boolean;
+}
+
+import {getLocales} from "expo-localization";
+
+export const detectLocale = (): string => {
+  // Web
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language;
+  }
+
+  // Native — expo-localization
+  try {
+    const locale = getLocales()[0]?.languageTag;
+    if (locale) {
+      return locale;
+    }
+  } catch {
+    // expo-localization not available in this environment
+  }
+
+  return "en";
+};
+
+export const useConsentForms = (api: any, baseUrl?: string) => {
+  const base = baseUrl || "";
+  const apiWithConsentTags = api.enhanceEndpoints({addTagTypes: ["PendingConsents"]});
+
+  const enhancedApi = apiWithConsentTags.injectEndpoints({
+    endpoints: (build: any) => ({
+      getPendingConsents: build.query({
+        async onQueryStarted(_arg: unknown, {queryFulfilled}: {queryFulfilled: Promise<unknown>}) {
+          console.info("[useConsentForms] Fetching pending consent forms");
+          try {
+            const result = (await queryFulfilled) as {data?: ConsentFormPublic[]};
+            console.info("[useConsentForms] Pending consent forms fetched", {
+              count: result?.data?.length ?? 0,
+            });
+          } catch (error) {
+            console.warn("[useConsentForms] Failed to fetch pending consent forms", {error});
+          }
+        },
+        providesTags: ["PendingConsents"],
+        query: () => `${base}/consents/pending`,
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+  const {data, isLoading, error, refetch} = enhancedApi.useGetPendingConsentsQuery();
+  const forms: ConsentFormPublic[] = Array.isArray(data) ? data : (data?.data ?? []);
+
+  return {error, forms, isLoading, refetch};
+};

package/src/useConsentHistory.ts

@@ -0,0 +1,40 @@
+export interface ConsentHistoryEntry {
+  _id: string;
+  agreed: boolean;
+  agreedAt: string;
+  checkboxValues?: Record<string, boolean>;
+  contentSnapshot?: string;
+  form: {
+    captureSignature: boolean;
+    checkboxes: Array<{label: string; required: boolean; confirmationPrompt?: string}>;
+    slug: string;
+    title: string;
+    type: string;
+    version: number;
+  } | null;
+  formVersionSnapshot?: number;
+  ipAddress?: string;
+  locale?: string;
+  signature?: string;
+  signedAt?: string;
+  userAgent?: string;
+}
+
+export const useConsentHistory = (api: any, baseUrl?: string) => {
+  const base = baseUrl || "";
+
+  const enhancedApi = api.injectEndpoints({
+    endpoints: (build: any) => ({
+      getMyConsents: build.query({
+        providesTags: ["MyConsents"],
+        query: () => `${base}/consents/my`,
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+  const {data, isLoading, error, refetch} = enhancedApi.useGetMyConsentsQuery();
+  const entries: ConsentHistoryEntry[] = Array.isArray(data) ? data : (data?.data ?? []);
+
+  return {entries, error, isLoading, refetch};
+};

package/src/useSubmitConsent.ts

@@ -0,0 +1,35 @@
+export interface SubmitConsentBody {
+  agreed: boolean;
+  checkboxValues?: Record<string, boolean>;
+  consentFormId: string;
+  locale: string;
+  signature?: string;
+}
+
+export const useSubmitConsent = (api: any, baseUrl?: string) => {
+  const base = baseUrl || "";
+  const apiWithConsentTags = api.enhanceEndpoints({addTagTypes: ["PendingConsents"]});
+
+  const enhancedApi = apiWithConsentTags.injectEndpoints({
+    endpoints: (build: any) => ({
+      submitConsentResponse: build.mutation({
+        invalidatesTags: ["PendingConsents"],
+        query: (body: SubmitConsentBody) => ({
+          body,
+          method: "POST",
+          url: `${base}/consents/respond`,
+        }),
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+  const [submitMutation, {isLoading: isSubmitting, error}] =
+    enhancedApi.useSubmitConsentResponseMutation();
+
+  const submit = async (body: SubmitConsentBody) => {
+    return submitMutation(body).unwrap();
+  };
+
+  return {error, isSubmitting, submit};
+};