From aeeb319d483d4c50ed81a470b06ca116050a18ed Mon Sep 17 00:00:00 2001
From: Ar Rakin <68149013+virtual-designer@users.noreply.github.com>
Date: Mon, 2 Sep 2024 16:34:47 +0000
Subject: [PATCH] feat: add more fields to GeneralHelpForm

Signed-off-by: GitHub <noreply@github.com>
---
 src/features/SupportForm/GeneralHelpForm.tsx  | 150 +++++++++++++++++-
 .../SupportForm/SupportFormSchemas.ts         |  23 ++-
 2 files changed, 170 insertions(+), 3 deletions(-)

diff --git a/src/features/SupportForm/GeneralHelpForm.tsx b/src/features/SupportForm/GeneralHelpForm.tsx
index 6ac4210..e9a1d52 100644
--- a/src/features/SupportForm/GeneralHelpForm.tsx
+++ b/src/features/SupportForm/GeneralHelpForm.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Input, Select, SelectItem, Spacer, Textarea } from "@nextui-org/react";
 import { type FC } from "react";
-import { Form, useForm } from "react-hook-form";
+import { Controller, Form, useForm } from "react-hook-form";
 import { z } from "zod";
 import CommonFields from "./CommonFields";
 import SubmitButton from "./SubmitButton";
@@ -9,7 +10,7 @@ import { GeneralHelpFormSchema } from "./SupportFormSchemas";
 type GeneralHelpFormProps = {};
 
 const GeneralHelpForm: FC<GeneralHelpFormProps> = (props) => {
-    const { control, register, formState } = useForm<
+    const { control, register, formState, watch } = useForm<
         z.infer<typeof GeneralHelpFormSchema>
     >({
         resolver: zodResolver(GeneralHelpFormSchema),
@@ -22,6 +23,151 @@ const GeneralHelpForm: FC<GeneralHelpFormProps> = (props) => {
                 register={register}
                 formState={formState}
             />
+
+            <Controller
+                name="type"
+                control={control}
+                render={({ field, fieldState }) => (
+                    <Select
+                        label="What type of help do you need?"
+                        name="type"
+                        selectionMode="single"
+                        defaultSelectedKeys={field.value}
+                        onSelectionChange={(keys) =>
+                            field.onChange(
+                                Array.from(keys as unknown as Set<string>)[0] ||
+                                    null,
+                            )
+                        }
+                        isInvalid={fieldState.invalid}
+                        errorMessage={fieldState.error?.message?.toString()}
+                    >
+                        <SelectItem key="getting_started">
+                            Getting started or Setting up SudoBot
+                        </SelectItem>
+                        <SelectItem key="troubleshooting">
+                            Troubleshooting or General Support
+                        </SelectItem>
+                        <SelectItem key="other">Other</SelectItem>
+                    </Select>
+                )}
+            />
+
+            <Spacer y={2} />
+
+            <Input
+                label="Subject"
+                isInvalid={Boolean(formState.errors.subject)}
+                errorMessage={formState.errors.subject?.message?.toString()}
+                placeholder="How can we help you?"
+                {...register("subject")}
+            />
+
+            <Spacer y={2} />
+
+            {watch("type") !== "other" && (
+                <>
+                    <Controller
+                        name="platform"
+                        control={control}
+                        render={({ field, fieldState }) => (
+                            <Select
+                                label="Platform"
+                                name="platform"
+                                selectionMode="single"
+                                defaultSelectedKeys={field.value}
+                                onSelectionChange={(keys) =>
+                                    field.onChange(
+                                        Array.from(
+                                            keys as unknown as Set<string>,
+                                        )[0] || null,
+                                    )
+                                }
+                                isInvalid={fieldState.invalid}
+                                errorMessage={fieldState.error?.message?.toString()}
+                            >
+                                <SelectItem key="linux-x86_64">
+                                    Linux x86_64
+                                </SelectItem>
+
+                                <SelectItem key="linux-i386">
+                                    Linux i386
+                                </SelectItem>
+
+                                <SelectItem key="linux-arm64">
+                                    Linux arm64
+                                </SelectItem>
+
+                                <SelectItem key="linux-armhf">
+                                    Linux armhf
+                                </SelectItem>
+
+                                <SelectItem key="darwin-x86_64">
+                                    macOS x86_64
+                                </SelectItem>
+
+                                <SelectItem key="darwin-arm64">
+                                    macOS arm64 (Apple Silicon)
+                                </SelectItem>
+
+                                <SelectItem key="windows-x86_64">
+                                    Windows x64 (64-bit)
+                                </SelectItem>
+
+                                <SelectItem key="windows-i386">
+                                    Windows x86 (32-bit)
+                                </SelectItem>
+
+                                <SelectItem key="windows-arm64">
+                                    Windows arm64
+                                </SelectItem>
+
+                                <SelectItem key="other">
+                                    Other (please specify in description)
+                                </SelectItem>
+                            </Select>
+                        )}
+                    />
+
+                    <Spacer y={2} />
+
+                    <Controller
+                        name="interpreter"
+                        control={control}
+                        render={({ field, fieldState }) => (
+                            <Select
+                                label="JavaScript Interpreter"
+                                name="interpreter"
+                                selectionMode="single"
+                                defaultSelectedKeys={field.value}
+                                onSelectionChange={(keys) =>
+                                    field.onChange(
+                                        Array.from(
+                                            keys as unknown as Set<string>,
+                                        )[0] || null,
+                                    )
+                                }
+                                isInvalid={fieldState.invalid}
+                                errorMessage={fieldState.error?.message?.toString()}
+                            >
+                                <SelectItem key="bun">Bun</SelectItem>
+                                <SelectItem key="node">Node.js</SelectItem>
+                            </Select>
+                        )}
+                    />
+
+                    <Spacer y={2} />
+                </>
+            )}
+
+            <Textarea
+                label="Description"
+                isInvalid={Boolean(formState.errors.description)}
+                errorMessage={formState.errors.description?.message?.toString()}
+                placeholder="Describe your issue or question in detail"
+                {...register("description")}
+            />
+
             <SubmitButton />
         </Form>
     );
diff --git a/src/features/SupportForm/SupportFormSchemas.ts b/src/features/SupportForm/SupportFormSchemas.ts
index d51e21c..028aa56 100644
--- a/src/features/SupportForm/SupportFormSchemas.ts
+++ b/src/features/SupportForm/SupportFormSchemas.ts
@@ -11,7 +11,28 @@ const CommonSchema = z.object({
         .max(255, "Email is too long!"),
 });
 
-export const GeneralHelpFormSchema = CommonSchema.extend({});
+export const GeneralHelpFormSchema = CommonSchema.extend({
+    subject: z
+        .string({ message: "Please enter the subject!" })
+        .min(1, "Please enter the subject!")
+        .max(255, "Subject is too long!"),
+    type: z
+        .string({ message: "Please select a type!" })
+        .min(1, "Please select a type!")
+        .max(255, "Type is too long!"),
+    description: z
+        .string({ message: "Please enter the description!" })
+        .min(1, "Please enter the description!")
+        .max(1024 * 16, "Description is too long!"),
+    platform: z
+        .string({ message: "Please select a platform!" })
+        .min(1, "Please select a platform!")
+        .max(255, "Platform is too long!"),
+    interpreter: z
+        .string({ message: "Please select an interpreter!" })
+        .min(1, "Please select an interpreter!")
+        .max(255, "Interpreter is too long!"),
+});
 export const DMCAFormSchema = CommonSchema.extend({
     infringingURLs: z
         .array(