Feat: fixed accordion animation

package.json

@@ -13,7 +13,7 @@
     "@azure/storage-blob": "12.15.0",
     "@reduxjs/toolkit": "1.9.5",
     "@sentry/react": "7.69.0",
-    "@sliit-foss/bashaway-ui": "0.7.3",
+    "@sliit-foss/bashaway-ui": "0.8.0",
     "async-mutex": "^0.4.0",
     "firebase": "10.2.0",
     "framer-motion": "10.14.0",

src/app.jsx

@@ -1,12 +1,15 @@
+import { Suspense, lazy } from "react";
 import { Provider } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { motion } from "framer-motion";
-import { Footer, Header, IdentificationForm } from "@/components";
+import { Footer, Header } from "@/components";
 import { useAuth } from "@/hooks";
 import { default as AnimatedRoutes } from "@/routes";
 import { store } from "@/store";
 import { ErrorBoundary, Loader, Toaster, TooltipProvider } from "@sliit-foss/bashaway-ui/components";
 
+const IdentificationForm = lazy(() => import("@/components/identification-form"));
+
 const App = () => {
   const location = useLocation();
   const completed = useAuth();
@@ -28,7 +31,9 @@ const App = () => {
           <Footer />
           <Loader />
           <Toaster />
-          <IdentificationForm />
+          <Suspense>
+            <IdentificationForm />
+          </Suspense>
           <div
             className={`fixed inset-0 h-screen w-full bg-white z-50 transition-all duration-long ${
               completed ? "opacity-0 pointer-events-none" : "opacity-100"

src/components/identification-form.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Paperclip } from "lucide-react";
 import { useSelector } from "react-redux";
+import { uploadIdCard } from "@/services";
 import { store } from "@/store";
 import { authApi, useAuthUserQuery, useUpdateProfileMutation } from "@/store/api";
 import { toggleIdentificationForm } from "@/store/reducers/ui/global";
@@ -38,12 +39,22 @@ const IdentificationForm = () => {
     if (team) setFormData(team.members);
   }, [team]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (
+      formData.find(({ nic, meal_preference, gender }, index) => !nic || !idFiles[index] || !meal_preference || !gender)
+    ) {
+      return toast({ variant: "destructive", title: "Please make sure that all required fields are filled" });
+    }
+    const members = await Promise.all(
+      formData.map(async (member, index) => {
+        member["student_id_url"] = await uploadIdCard(team.name, member.name, idFiles[index]);
+        return member;
+      })
+    );
     await updateProfile({
       id: team._id,
-      data: {
-        members: formData
-      }
+      data: { members }
     })
       .unwrap()
       .then((data) => {
@@ -55,14 +66,14 @@ const IdentificationForm = () => {
 
   const onFileChange = (e, index) => {
     setIdFiles((prev) => {
-      const newFiles = JSON.parse(JSON.stringify(prev));
+      const newFiles = [...prev];
       newFiles[index] = e.target.files[0];
       return newFiles;
     });
   };
 
   const onChange = (e, index) => {
-    const newFormData = JSON.parse(JSON.stringify(formData));
+    const newFormData = [...formData];
     newFormData[index][e.target.name] = e.target.value;
     setFormData(newFormData);
   };
@@ -74,36 +85,24 @@ const IdentificationForm = () => {
         if (!open) close();
       }}
     >
-      <AlertDialogContent>
+      <AlertDialogContent
+        className="max-h-[100vh] overflow-y-auto z-[200]"
+        overlayClassName="bg-white/80 backdrop-blur-md z-[200]"
+      >
         <form onSubmit={handleSubmit} className="flex flex-col gap-3">
           <AlertDialogHeader>
             <AlertDialogTitle>Hello there!</AlertDialogTitle>
             <AlertDialogDescription>
-              Congratulations on being selected to the final round of Bashaway 2023. However, before you can continue to
-              use this platform to compete further, please fill in the following details.
+              Congratulations on making it to the final round of Bashaway 2023. However, before you can compete further,
+              please fill in the following details.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <Accordion type="single" collapsible>
             {formData?.map((member, index) => (
               <AccordionItem key={index} value={`member-${index}`}>
                 <AccordionTrigger>{member.name}</AccordionTrigger>
                 <AccordionContent containerClassName="flex flex-col gap-3">
-                  <Input
-                    placeholder="NIC *"
-                    name="nic"
-                    required
-                    className="sm:h-14"
-                    onChange={(e) => onChange(e, index)}
-                  />
                   <div className="flex flex-col md:flex-row gap-3">
-                    <Dropdown
-                      filterkey="gender"
-                      label="Gender *"
-                      options={gender.options}
-                      className="sm:h-14"
-                      value={formData[index].gender}
-                      onChange={(e) => onChange(e, index)}
-                    />
                     <Dropdown
                       filterkey="meal_preference"
                       label="Meal Preference *"
@@ -112,12 +111,27 @@ const IdentificationForm = () => {
                       value={formData[index].meal_preference}
                       onChange={(e) => onChange(e, index)}
                     />
+                    <Dropdown
+                      filterkey="gender"
+                      label="Gender *"
+                      options={gender.options}
+                      className="sm:h-14"
+                      contentClassName="max-h-[8.5rem] overflow-y-auto invisible-scroll"
+                      value={formData[index].gender}
+                      onChange={(e) => onChange(e, index)}
+                    />
                   </div>
+                  <Input
+                    placeholder="NIC *"
+                    name="nic"
+                    value={formData[index].nic}
+                    className="sm:h-14"
+                    onChange={(e) => onChange(e, index)}
+                  />
                   <Input
                     placeholder="University ID (both sides) *"
                     name="student_id_url"
                     value={idFiles[index] ? idFiles[index].name : formData.student_id_url}
-                    required
                     className="sm:h-14 cursor-pointer"
                     onClick={() => document.getElementById(`id-upload-${index}`).click()}
                     suffixIcon={<Paperclip className="text-gray-400 pointer-events-none" size={21} />}

src/hooks/identification.jsx

@@ -21,7 +21,7 @@ const useIdentification = () => {
     ) {
       store.dispatch(toggleIdentificationForm(true));
     }
-  }, [settings]);
+  }, [settings, team]);
 };
 
 export default useIdentification;

src/styles/animations/index.css

@@ -0,0 +1 @@
+@import "keyframes.css";

src/styles/animations/keyframes.css

@@ -0,0 +1,21 @@
+@media (max-width: 768px) {
+  @keyframes accordion-down {
+    from {
+      height: 0px;
+    }
+    to {
+      height: 276px;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  @keyframes accordion-down {
+    from {
+      height: 0px;
+    }
+    to {
+      height: 208px;
+    }
+  }
+}

src/styles/index.css

@@ -1,6 +1,8 @@
 @import "fonts.css";
+@import "animations/index.css";
 @import "@sliit-foss/bashaway-ui/styles";
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+

tailwind.config.js

@@ -59,10 +59,6 @@ export default {
         sm: "calc(var(--radius) - 4px)"
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" }
-        },
         "accordion-up": {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 }