Ask for fullName on NDA signing

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/trust/src/components/NDADialog.tsx

@@ -1,27 +1,34 @@
-import { Button, Card, Logo, Spinner } from "@probo/ui";
+import { Button, Card, Field, Logo, Spinner } from "@probo/ui";
 import { sprintf } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { useEffect } from "react";
+import { use, useEffect } from "react";
 import { PDFPreview } from "./PDFPreview";
 import { useWindowSize } from "usehooks-ts";
 import clsx from "clsx";
 import { graphql } from "relay-runtime";
 import { useMutationWithToasts } from "/hooks/useMutationWithToast";
+import z from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { Viewer } from "/providers/Viewer";
 
 const signMutation = graphql`
-  mutation NDADialogSignMutation {
-    acceptNonDisclosureAgreement {
+  mutation NDADialogSignMutation($input: AcceptNonDisclosureAgreementInput!) {
+    acceptNonDisclosureAgreement(input: $input) {
       success
     }
   }
 `;
 
+const schema = z.object({
+  fullName: z.string(),
+});
+
 export function NDADialog({
-  name,
+  organizationName,
   url,
   fileName,
 }: {
-  name: string;
+  organizationName: string;
   url?: string | null;
   fileName?: string | null;
 }) {
@@ -35,12 +42,34 @@ export function NDADialog({
   const { width } = useWindowSize();
   const isMobile = width < 1100;
   const isDesktop = !isMobile;
+  const viewer = use(Viewer);
+
+  const {
+    handleSubmit: handleSubmitWrapper,
+    register,
+    formState,
+  } = useFormWithSchema(schema, {
+    defaultValues: {
+      fullName: viewer?.fullName,
+    },
+  });
+
   const [commitSigning, isSigning] = useMutationWithToasts(signMutation, {
     onSuccess: () => {
       window.location.reload();
     },
   });
 
+  const handleSubmit = handleSubmitWrapper(({ fullName }) => {
+    commitSigning({
+      variables: {
+        input: {
+          fullName,
+        },
+      },
+    });
+  });
+
   return (
     <div className="fixed inset-0 bg-level-2 z-100 flex flex-col lg:h-screen">
       <header className="flex items-center h-12 justify-between border-b border-border-solid px-4 flex-none">
@@ -56,7 +85,7 @@ export function NDADialog({
               __(
                 "Access to %s Trust Center documents requires signing a Non-Disclosure Agreement (NDA). Please review the agreement below. Once signed, you’ll receive immediate access to the requested documents.",
               ),
-              name,
+              organizationName,
             )}
           </p>
           {isMobile && url && (
@@ -69,14 +98,25 @@ export function NDADialog({
               </Button>
             </Card>
           )}
-          <Button
-            onClick={() => commitSigning({ variables: {} })}
-            className="h-10 w-full my-8"
-            disabled={isSigning}
-            icon={isSigning ? Spinner : undefined}
-          >
-            {__("Review & Sign")}
-          </Button>
+          <form onSubmit={handleSubmit}>
+            <div className="mt-4">
+              <Field
+                required
+                label={__("Full name")}
+                placeholder="John Doe"
+                {...register("fullName")}
+                type="text"
+              />
+              <Button
+                type="submit"
+                className="h-10 w-full my-8"
+                disabled={formState.isSubmitting || !formState.isValid}
+                icon={isSigning ? Spinner : undefined}
+              >
+                {__("Review & Sign")}
+              </Button>
+            </div>
+          </form>
           <p className="text-xs text-txt-secondary">
             {__(
               "By clicking Review & Sign, you agree to the terms of this NDA. If you have questions about the NDA, please contact security@probo.com.",

apps/trust/src/components/__generated__/NDADialogSignMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3ef589b34a5cb80406c517d6e5eb938c>>
+ * @generated SignedSource<<22d97ce5cead5a1cc6c23e89fca72cb1>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,11 +9,16 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type NDADialogSignMutation$variables = Record<PropertyKey, never>;
+export type AcceptNonDisclosureAgreementInput = {
+  fullName: string;
+};
+export type NDADialogSignMutation$variables = {
+  input: AcceptNonDisclosureAgreementInput;
+};
 export type NDADialogSignMutation$data = {
   readonly acceptNonDisclosureAgreement: {
     readonly success: boolean;
-  };
+  } | null | undefined;
 };
 export type NDADialogSignMutation = {
   response: NDADialogSignMutation$data;
@@ -22,9 +27,22 @@ export type NDADialogSignMutation = {
 
 const node: ConcreteRequest = (function(){
 var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
   {
     "alias": null,
-    "args": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
     "concreteType": "AcceptNonDisclosureAgreementPayload",
     "kind": "LinkedField",
     "name": "acceptNonDisclosureAgreement",
@@ -43,32 +61,32 @@ var v0 = [
 ];
 return {
   "fragment": {
-    "argumentDefinitions": [],
+    "argumentDefinitions": (v0/*: any*/),
     "kind": "Fragment",
     "metadata": null,
     "name": "NDADialogSignMutation",
-    "selections": (v0/*: any*/),
+    "selections": (v1/*: any*/),
     "type": "Mutation",
     "abstractKey": null
   },
   "kind": "Request",
   "operation": {
-    "argumentDefinitions": [],
+    "argumentDefinitions": (v0/*: any*/),
     "kind": "Operation",
     "name": "NDADialogSignMutation",
-    "selections": (v0/*: any*/)
+    "selections": (v1/*: any*/)
   },
   "params": {
-    "cacheID": "bca0dcb3f227c89d8339b0238aa2e42a",
+    "cacheID": "130cfc307dca0525194e0103a0548bd0",
     "id": null,
     "metadata": {},
     "name": "NDADialogSignMutation",
     "operationKind": "mutation",
-    "text": "mutation NDADialogSignMutation {\n  acceptNonDisclosureAgreement {\n    success\n  }\n}\n"
+    "text": "mutation NDADialogSignMutation(\n  $input: AcceptNonDisclosureAgreementInput!\n) {\n  acceptNonDisclosureAgreement(input: $input) {\n    success\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "814a623444a446730f260e6b7bbf0083";
+(node as any).hash = "1b9447e5cbb2ec7dce4f3f9c68493555";
 
 export default node;

apps/trust/src/layouts/MainLayout.tsx

@@ -30,7 +30,7 @@ export function MainLayout(props: Props) {
       <TrustCenterProvider trustCenter={trustCenter}>
         {showNDADialog && (
           <NDADialog
-            name={trustCenter.organization.name}
+            organizationName={trustCenter.organization.name}
             url={trustCenter.ndaFileUrl}
             fileName={trustCenter.ndaFileName}
           />