Signing templates

app/atoms/assign-custody-user.ts

@@ -0,0 +1,18 @@
+import { atom } from "jotai";
+
+export const assignCustodyUser = atom<User | null>(null);
+
+type User = {
+  id: string;
+  name: string;
+  userId: string;
+};
+
+assignCustodyUser.onMount = (setAtom) => {
+  setAtom(null);
+};
+
+export const updateSelectedCustodyUserAtom = atom(
+  null,
+  (_get, set, event: User | null) => set(assignCustodyUser, event)
+);

app/atoms/file.ts

@@ -1,8 +1,12 @@
 import type { ChangeEvent } from "react";
 import { atom } from "jotai";
-import { verifyAccept } from "~/utils";
+import { formatBytes, verifyAccept } from "~/utils";
 
 export const fileErrorAtom = atom<string | undefined>(undefined);
+fileErrorAtom.onMount = (setAtom) => {
+  setAtom("");
+};
+export const MAX_SIZE = 4_000_000; // 4MB
 
 /** Validates the file atom */
 export const validateFileAtom = atom(
@@ -12,17 +16,19 @@ export const validateFileAtom = atom(
       const file = event?.target?.files?.[0];
       if (file) {
         const allowedType = verifyAccept(file.type, event.target.accept);
-        const allowedSize = file.size < 4_000_000;
+        const allowedSize = file.size < MAX_SIZE;
 
         if (!allowedType) {
           event.target.value = "";
-          return `Allowed file types are: PNG, JPG or JPEG`;
+          return `Allowed file types are: ${
+            event.target.accept === "pdf" ? "PDF" : "PNG, JPG or JPEG"
+          }`;
         }
 
         if (!allowedSize) {
           /** Clean the field */
           event.target.value = "";
-          return "Max file size is 4MB";
+          return `Max file size is ${formatBytes(MAX_SIZE)}`;
         }
 
         return undefined;

app/components/assets/actions-dropdown.tsx

@@ -23,6 +23,7 @@ import { Button } from "../shared";
 const ConditionalActionsDropdown = () => {
   const { asset } = useLoaderData<typeof loader>();
   const assetCanBeReleased = asset.custody;
+
   let [searchParams] = useSearchParams();
   const refIsQrScan = searchParams.get("ref") === "qr";
   const defaultOpen = window.innerWidth <= 640 && refIsQrScan;
@@ -85,8 +86,7 @@ const ConditionalActionsDropdown = () => {
                   to="release-custody"
                   role="link"
                   variant="link"
-                  className="justify-start whitespace-nowrap
-                px-4 py-3  text-gray-700 hover:text-gray-700"
+                  className="justify-start whitespace-nowrap px-4 py-3  text-gray-700 hover:text-gray-700"
                   width="full"
                   onClick={() => setOpen(false)}
                 >
@@ -99,7 +99,7 @@ const ConditionalActionsDropdown = () => {
                   to="give-custody"
                   role="link"
                   variant="link"
-                  className="justify-start px-4 py-3  text-gray-700 hover:text-gray-700"
+                  className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
                   width="full"
                   onClick={() => setOpen(false)}
                 >

app/components/custody/custodian-select.tsx

@@ -1,6 +1,8 @@
 import { useLoaderData } from "@remix-run/react";
+import { useAtom } from "jotai";
 import type { loader } from "~/routes/_layout+/assets.$assetId.give-custody";
 import { tw } from "~/utils";
+import { updateSelectedCustodyUserAtom } from "../../atoms/assign-custody-user";
 import {
   Select,
   SelectTrigger,
@@ -32,6 +34,7 @@ export default function CustodianSelect(
   }
 ) {
   const { teamMembers } = useLoaderData<typeof loader>();
+  const [, updateSelectedCustodyUser] = useAtom(updateSelectedCustodyUserAtom);
 
   let defaultValue = undefined;
 
@@ -43,6 +46,7 @@ export default function CustodianSelect(
         ?.name,
       userId: teamMembers.find((member) => member.id === defaultCustodianId)
         ?.userId,
+      email: null,
     });
   } else if (defaultTeamMemberId) {
     // In the case of team member id passed, we set that to id and find the rest in the teamMembers array
@@ -52,12 +56,19 @@ export default function CustodianSelect(
       name: teamMembers.find((member) => member.userId === defaultTeamMemberId)
         ?.name,
       userId: defaultTeamMemberId,
+      email: teamMembers.find((member) => member.userId === defaultTeamMemberId)
+        ?.user?.email,
     });
   }
 
   return (
     <div className="relative w-full">
-      <Select name="custodian" defaultValue={defaultValue} disabled={disabled}>
+      <Select
+        onValueChange={(value) => updateSelectedCustodyUser(JSON.parse(value))}
+        name="custodian"
+        disabled={disabled}
+        defaultValue={defaultValue}
+      >
         <SelectTrigger
           className={tw(disabled ? "cursor-not-allowed" : "", className)}
         >
@@ -77,11 +88,12 @@ export default function CustodianSelect(
                 {teamMembers.map((member) => (
                   <SelectItem
                     key={member.id}
-                    value={`${JSON.stringify({
+                    value={JSON.stringify({
                       id: member.id,
                       name: member.name,
                       userId: member?.userId,
-                    })}`}
+                      email: member.user?.email,
+                    })}
                   >
                     {member.user ? (
                       <div className="flex items-center gap-3 truncate py-3.5 pr-1">

app/components/custody/template-select.tsx

@@ -0,0 +1,64 @@
+import { Link, useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/assets.$assetId.give-custody";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "../forms";
+import { Button } from "../shared";
+
+export default function TemplateSelect() {
+  const { templates } = useLoaderData<typeof loader>();
+  return (
+    <div className="relative w-full">
+      <Select name="template">
+        <SelectTrigger>
+          <SelectValue placeholder="Select a PDF template" />
+        </SelectTrigger>
+        <div>
+          <SelectContent
+            className="w-[352px]"
+            position="popper"
+            align="start"
+            ref={(ref) =>
+              ref?.addEventListener("touchend", (e) => e.preventDefault())
+            }
+          >
+            {templates.length > 0 ? (
+              <div className=" max-h-[320px] overflow-auto">
+                {templates.map((template) => (
+                  <SelectItem
+                    key={template.id}
+                    value={JSON.stringify({
+                      id: template.id,
+                      name: template.name,
+                    })}
+                  >
+                    <span className=" flex-1 font-medium text-gray-900">
+                      {template.name}
+                    </span>
+                  </SelectItem>
+                ))}
+              </div>
+            ) : (
+              <div>
+                No team PDF templates found.{" "}
+                <Button to={"/settings/template"} variant="link">
+                  Create PDF template
+                </Button>
+              </div>
+            )}
+          </SelectContent>
+        </div>
+      </Select>
+      <div className="mt-2 text-sm text-gray-500">
+        Manage PDF templates in{" "}
+        <Link className="text-gray-800 underline" to={"/settings/template"}>
+          settings
+        </Link>
+      </div>
+    </div>
+  );
+}