feat: add/update title of the document (#663)

packages/ui/primitives/document-flow/add-signers.tsx

@@ -9,7 +9,8 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, Recipient, SendStatus } from '@documenso/prisma/client';
+import { DocumentStatus, Field, Recipient, SendStatus } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
@@ -29,6 +30,7 @@ export type AddSignersFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
+  document: DocumentWithData;
   numberOfSteps: number;
   onSubmit: (_data: TAddSignersFormSchema) => void;
 };
@@ -37,6 +39,7 @@ export const AddSignersFormPartial = ({
   documentFlow,
   numberOfSteps,
   recipients,
+  document,
   fields: _fields,
   onSubmit,
 }: AddSignersFormProps) => {
@@ -223,6 +226,7 @@ export const AddSignersFormPartial = ({
         />
 
         <DocumentFlowFormContainerActions
+          canGoBack={document.status === DocumentStatus.DRAFT}
           loading={isSubmitting}
           disabled={isSubmitting}
           onGoBackClick={documentFlow.onBackStep}

packages/ui/primitives/document-flow/add-title.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+
+import type { Field, Recipient } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+
+import type { TAddTitleFormSchema } from './add-title.types';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from './document-flow-root';
+import type { DocumentFlowStep } from './types';
+
+export type AddTitleFormProps = {
+  documentFlow: DocumentFlowStep;
+  recipients: Recipient[];
+  fields: Field[];
+  document: DocumentWithData;
+  numberOfSteps: number;
+  onSubmit: (_data: TAddTitleFormSchema) => void;
+};
+
+export const AddTitleFormPartial = ({
+  documentFlow,
+  recipients: _recipients,
+  fields: _fields,
+  document,
+  numberOfSteps,
+  onSubmit,
+}: AddTitleFormProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddTitleFormSchema>({
+    defaultValues: {
+      title: document.title,
+    },
+  });
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  return (
+    <>
+      <DocumentFlowFormContainerContent>
+        <div className="flex flex-col">
+          <div className="flex flex-col gap-y-4">
+            <div>
+              <Label htmlFor="title">
+                Title<span className="text-destructive ml-1 inline-block font-medium">*</span>
+              </Label>
+
+              <Input
+                id="title"
+                className="bg-background mt-2"
+                disabled={isSubmitting}
+                {...register('title', { required: "Title can't be empty" })}
+              />
+
+              <FormErrorMessage className="mt-2" error={errors.title} />
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoBackClick={documentFlow.onBackStep}
+          onGoNextClick={() => void onFormSubmit()}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/document-flow/add-title.types.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const ZAddTitleFormSchema = z.object({
+  title: z.string().min(1),
+});
+
+export type TAddTitleFormSchema = z.infer<typeof ZAddTitleFormSchema>;

packages/ui/primitives/document-flow/types.ts

@@ -3,6 +3,8 @@ import { z } from 'zod';
 import { FieldType } from '@documenso/prisma/client';
 
 export const ZDocumentFlowFormSchema = z.object({
+  title: z.string().min(1),
+
   signers: z
     .array(
       z.object({
@@ -52,6 +54,6 @@ export interface DocumentFlowStep {
   title: string;
   description: string;
   stepIndex: number;
-  onBackStep?: () => void;
-  onNextStep?: () => void;
+  onBackStep?: () => unknown;
+  onNextStep?: () => unknown;
 }