chore: refactor

apps/web/src/components/forms/send-confirmation-email.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZSendConfirmationEmailFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;
+
+export type SendConfirmationEmailFormProps = {
+  className?: string;
+};
+
+export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFormProps) => {
+  const { toast } = useToast();
+
+  const form = useForm<TSendConfirmationEmailFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZSendConfirmationEmailFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onFormSubmit = async ({ email }: TSendConfirmationEmailFormSchema) => {
+    try {
+      await sendConfirmationEmail({ email });
+
+      toast({
+        title: 'Confirmation email sent',
+        description:
+          'A confirmation email has been sent, and it should arrive in your inbox shortly.',
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: 'An error occurred while sending your confirmation email',
+        description: 'Please try again and make sure you enter the correct email address.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Form {...form}>
+        <form
+          className={cn('mt-6 flex w-full flex-col gap-y-4', className)}
+          onSubmit={form.handleSubmit(onFormSubmit)}
+        >
+          <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email address</FormLabel>
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </fieldset>
+          <Button size="lg" type="submit">
+            Send confirmation email
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};

apps/web/src/components/forms/signup.tsx

@@ -67,7 +67,7 @@ export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) =
     try {
       await signup({ name, email, password, signature });
 
-      router.push(`/unverified-account}`);
+      router.push(`/unverified-account`);
 
       toast({
         title: 'Registration Successful',