Refactor package.json and package-lock.json to add @types/react-select-country-list dependency

2025-12-18 21:44:06 +01:00 · 2024-10-17 13:07:12 +07:00 · 2024-10-17 13:07:12 +07:00 · 47baae84fb
commit 47baae84fb
parent 327bf34267
5 changed files with 102 additions and 55 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -59,6 +59,7 @@
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
+        "@types/react-select-country-list": "^2.2.3",
        "eslint": "^8",
        "eslint-config-next": "14.2.5",
        "postcss": "^8",
@ -2320,6 +2321,12 @@
        "@types/webpack": "^4"
      }
    },
+    "node_modules/@types/react-select-country-list": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-select-country-list/-/react-select-country-list-2.2.3.tgz",
+      "integrity": "sha512-nffcYOwuun+5B0EWqubK+amHpPdK9Xj20xkLYNqYrzmESd8FnpLwHsS79ClLAWA9y+icVA8gWPkbwBp1gpjSwA==",
+      "dev": true
+    },
    "node_modules/@types/source-list-map": {
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
--- a/package.json
+++ b/package.json
@ -60,6 +60,7 @@
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "@types/react-select-country-list": "^2.2.3",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@ -2,46 +2,31 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm, SubmitHandler } from "react-hook-form";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DualOptionSelector } from "@/components/dualSelector";
-import { MultipleOptionSelector } from "@/components/multipleSelector";
 import BusinessForm from "@/components/BusinessForm";
 import { businessFormSchema } from "@/types/schemas/application.schema";

 type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
-  const form1 = useForm();
  const [industry, setIndustry] = useState<string[]>([]);
  const [projectType, setProjectType] = useState<string[]>([]);
  const [projectPitch, setProjectPitch] = useState("text");
  const [applyProject, setApplyProject] = useState(false);
  const [selectedImages, setSelectedImages] = useState<File[]>([]);
-  const [businessPitchFile, setBusinessPitchFile] = useState("");
  const [projectPitchFile, setProjectPitchFile] = useState("");
  const MAX_FILE_SIZE = 5000000;
  const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];

-  const handleSubmit: SubmitHandler<any> = (data) => {
-    console.log("Submitted Data:", data);
-    // add api logic
-  };

  const onSubmit: SubmitHandler<businessSchema> = async (data) => {
-    // Your submit logic here
-    console.log(data);
-    // e.g. submit the data to an API
+    const transformedData = transformChoice(data);
+    console.log(transformedData);
+    
  };

  const createPitchDeckSchema = (inputType: string) => {
@ -383,28 +368,14 @@ export default function Apply() {
      </div>
      {/* form */}
      {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
-      <BusinessForm industry={industry} onSubmit={onSubmit} />
+      <BusinessForm
+        industry={industry}
+        onSubmit={onSubmit}
+        applyProject={applyProject}
+        setApplyProject={setApplyProject}
+      />
+

-      <div className="flex space-x-5">
-        <Switch onCheckedChange={() => setApplyProject(!applyProject)}></Switch>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
-                Would you like to apply for your first fundraising project as
-                well?
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-[11px]">
-                Toggling this option allows you to begin your first project,{" "}
-                <br /> which is crucial for unlocking the tools necessary to
-                raise funds.
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
      {/* </div>
        </div> */}

--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { DualOptionSelector } from "@/components/dualSelector";
@ -16,15 +16,21 @@ import { Input } from "@/components/ui/input";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Label } from "@radix-ui/react-label";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip"; 

 type businessSchema = z.infer<typeof businessFormSchema>;

 interface BusinessFormProps {
  industry: string[];
+  applyProject: boolean;
+  setApplyProject: Function;
  onSubmit: SubmitHandler<businessSchema>;
 }
 const BusinessForm = ({
+  applyProject,
+  setApplyProject,
  onSubmit,
  industry,
 }: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
@ -43,14 +49,22 @@ const BusinessForm = ({
  });
  const [businessPitch, setBusinessPitch] = useState("text");
  const [businessPitchFile, setBusinessPitchFile] = useState("");
-
+  const [countries, setCountries] = useState([]);
+  useEffect(() => {
+    fetch("https://restcountries.com/v3.1/all")
+      .then((response) => response.json())
+      .then((data) => {
+        const countryList = data.map((country: { name: { common: any; }; }) => country.name.common);
+        setCountries(countryList.sort());
+      });
+  }, []);
  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit as SubmitHandler<businessSchema>)}
        className="space-y-8"
      >
-        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 md:ml-[0%] ">
          <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
          <p className="ml-96 mt-5 text-neutral-500">
            <span className="text-red-500 font-bold">**</span>All requested
@ -87,6 +101,31 @@ const BusinessForm = ({
                </FormItem>
              )}
            />
+            {/* Country */}
+            <FormField
+              control={form.control}
+              name="country"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Country</>}
+                      fieldName="country"
+                      choices={countries}
+                      handleFunction={(selectedValues: string) => {
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>Select the country where your business is based.</>
+                      }
+                      placeholder="Select a country"
+                      selectLabel="Country"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />

            {/* Industry */}
            <FormField
@ -293,15 +332,17 @@ const BusinessForm = ({
                              businessPitch === "file" ? ".md" : undefined
                            }
                            onChange={(e) => {
-                              field.onChange(e);
+                              const value = e.target;
+                              if (businessPitch === "file") {
+                                const file = value.files?.[0];
+                                field.onChange(file || "");
+                              } else {
+                                field.onChange(value.value);
+                              }
                            }}
                            className="w-96 mt-5"
-                            value={
-                              businessPitch === "file"
-                                ? ""
-                                : (field.value as string)
-                            }
                          />
+
                          <span className="text-[12px] text-neutral-500 self-center">
                            Your pitch deck and other application info will be
                            used for <br />
@ -365,12 +406,36 @@ const BusinessForm = ({
                </FormItem>
              )}
            />
-            <Button
-              className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-              type="submit"
-            >
-              Submit application
-            </Button>
+            <div className="flex space-x-5">
+              <Switch
+                onCheckedChange={() => setApplyProject(!applyProject)}
+              ></Switch>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
+                      Would you like to apply for your first fundraising project
+                      as well?
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-[11px]">
+                      Toggling this option allows you to begin your first
+                      project, <br /> which is crucial for unlocking the tools
+                      necessary to raise funds.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <center>
+              <Button
+                className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+                type="submit"
+              >
+                Submit application
+              </Button>
+            </center>
          </div>
        </div>
      </form>
--- a/src/types/schemas/application.schema.ts
+++ b/src/types/schemas/application.schema.ts
@ -150,6 +150,9 @@ const businessFormSchema = z.object({
        message: "File must be a markdown file (.md).",
      }),
  ]),
+  country: z.string({
+    required_error: "Please select one of the option",
+  }),
 });

 export { businessFormSchema, projectFormSchema };