From 55b8d8759b884c6e5ab4575d7b4ce9cfb31cf869 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 17:06:19 +0700
Subject: [PATCH] Refactor Apply page component to use Selector component for
 handling yes/no choices

---
 src/app/business/apply/page.tsx | 131 ++++++++++++--------------------
 src/components/selector.tsx     |  46 +++++++++++
 2 files changed, 93 insertions(+), 84 deletions(-)
 create mode 100644 src/components/selector.tsx

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 309900c..a6bf7a3 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Selector } from "@/components/selector";
 
 export default function Apply() {
   const formSchema = z.object({
@@ -237,104 +238,66 @@ export default function Apply() {
               </div>
             </div>
             {/* Is your company incorporated in the United States? */}
-            <div className="space-y-5">
-              <Label htmlFor="isInUS" className="font-bold text-lg">
-                Is your company incorporated in the <br />
-                United States?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isInUS === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isInUS", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isInUS === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isInUS", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                  <input type="hidden" value={isInUS} {...register("isInUS")} />
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={
+                <>
+                  Is your company incorporated in the <br />
+                  United States?
+                </>
+              }
+              name="isInUS"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only companies that are incorporated or formed in the US are{" "}
                   <br />
                   eligible to raise via Reg CF. If your company is incorporated{" "}
                   <br />
                   outside the US, we still encourage you to apply.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isInUS}
+            />
 
             {/* Is your product available (for sale) in market? */}
-            <div className="space-y-5">
-              <Label htmlFor="isForSale" className="font-bold text-lg">
-                Is your product available (for sale) <br />
-                in market?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isForSale === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isForSale", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isForSale === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isForSale", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={
+                <>
+                  Is your product available (for sale) <br />
+                  in market?
+                </>
+              }
+              name="isForSale"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only check this box if customers can access, use, or buy your{" "}
                   <br />
                   product today.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isForSale}
+            />
 
             {/* Is your company generating revenue?*/}
-            <div className="space-y-5">
-              <Label htmlFor="isGenerating" className="font-bold text-lg">
-                Is your company generating revenue?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isGenerating === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isGenerating", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isGenerating === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isGenerating", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={<>Is your company generating revenue?</>}
+              name="isGenerating"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only check this box if your company is making money. <br />
                   Please elaborate on revenue and other traction below.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isGenerating}
+            />
 
             {/* Pitch deck */}
             <div className="space-y-5">
diff --git a/src/components/selector.tsx b/src/components/selector.tsx
new file mode 100644
index 0000000..d0e0206
--- /dev/null
+++ b/src/components/selector.tsx
@@ -0,0 +1,46 @@
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { ReactElement } from "react";
+
+interface SelectorInterface {
+  label: ReactElement;
+  name: string;
+  choice1: string;
+  choice2: string;
+  handleFunction: Function;
+  value: string;
+  description: ReactElement;
+}
+
+export function Selector(props: SelectorInterface) {
+  return (
+    <div className="space-y-5">
+      <Label htmlFor={props.name} className="font-bold text-lg">
+        {props.label}
+      </Label>
+      <div className="flex space-x-5">
+        <div className="flex space-x-2 w-96">
+          <Button
+            type="button"
+            variant={props.value === props.choice1 ? "default" : "outline"}
+            onClick={() => props.handleFunction(props.name, props.choice1)}
+            className="w-20 h-12 text-base"
+          >
+            {props.choice1}
+          </Button>
+          <Button
+            type="button"
+            variant={props.value === props.choice2 ? "default" : "outline"}
+            onClick={() => props.handleFunction(props.name, props.choice2)}
+            className="w-20 h-12 text-base"
+          >
+            {props.choice2}
+          </Button>
+        </div>
+        <span className="text-[12px] text-neutral-500 self-center">
+          {props.description}
+        </span>
+      </div>
+    </div>
+  );
+}