@terreno/ui 0.7.1 → 0.8.0

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}
+    />
+  );
+};

package/src/DataTable.tsx

@@ -36,7 +36,7 @@ const TextCell: FC<{
   column: DataTableColumn;
 }> = ({cellData}) => {
   return (
-    <Box flex="grow" justifyContent="center" paddingX={2}>
+    <Box flex="grow" justifyContent="center">
       <Text size={cellData.textSize || "md"}>{cellData.value}</Text>
     </Box>
   );

package/src/DateTimeActionSheet.tsx

@@ -222,7 +222,7 @@ const MobileTime = ({
             }}
           >
             {hours.map((n) => (
-              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+              <Picker.Item key={String(n)} label={String(n)} value={Number(n)} />
             ))}
           </Picker>
         </Box>
@@ -239,7 +239,7 @@ const MobileTime = ({
             }}
           >
             {minutes.map((n) => (
-              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+              <Picker.Item key={String(n)} label={String(n)} value={Number(n)} />
             ))}
           </Picker>
         </Box>
@@ -352,9 +352,14 @@ const DateCalendar = ({
   }
 
   if (date) {
-    const displayDate = timezone
-      ? DateTime.fromISO(dateString).setZone(timezone).toFormat("yyyy-MM-dd")
-      : DateTime.fromISO(dateString).toFormat("yyyy-MM-dd");
+    let displayDate: string;
+    if (type === "date") {
+      displayDate = DateTime.fromISO(dateString).toUTC().toFormat("yyyy-MM-dd");
+    } else if (timezone) {
+      displayDate = DateTime.fromISO(dateString).setZone(timezone).toFormat("yyyy-MM-dd");
+    } else {
+      displayDate = DateTime.fromISO(dateString).toFormat("yyyy-MM-dd");
+    }
     markedDates[displayDate] = {
       customStyles: {
         container: {
@@ -437,7 +442,13 @@ export const DateTimeActionSheet = ({
   useEffect(() => {
     let datetime;
     if (value) {
-      datetime = DateTime.fromISO(value).setZone(originalTimezone).set({millisecond: 0, second: 0});
+      if (type === "date") {
+        datetime = DateTime.fromISO(value).toUTC().set({millisecond: 0, second: 0});
+      } else {
+        datetime = DateTime.fromISO(value)
+          .setZone(originalTimezone)
+          .set({millisecond: 0, second: 0});
+      }
     } else {
       datetime = DateTime.now().setZone(originalTimezone).set({millisecond: 0, second: 0});
     }
@@ -456,7 +467,7 @@ export const DateTimeActionSheet = ({
     setDate(datetime.toISO());
     // Reset timezone when the sent date changes.
     setTimezone(originalTimezone);
-  }, [value, originalTimezone]);
+  }, [value, originalTimezone, type]);
 
   // TODO Support 24 hour time for time picker.
   // Note: do not call this if waiting on a state change.
@@ -469,7 +480,9 @@ export const DateTimeActionSheet = ({
       militaryHour = Number(hour) + 12;
     }
 
-    const dateTime = DateTime.fromISO(date, {zone: timezone});
+    // For type="date" the date state is always UTC midnight — parse it in UTC, not the component
+    // timezone, to avoid shifting the date when converting back to UTC.
+    const dateTime = DateTime.fromISO(date, {zone: type === "date" ? "UTC" : timezone});
 
     if (type === "date") {
       const v = dateTime.set({hour: 0, millisecond: 0, minute: 0, second: 0}).toUTC().toISO();