Feat: added identification hook and form

.env.example

@@ -2,7 +2,9 @@ VITE_BASHAWAY_BE_URL=https://api.staging.bashaway.sliitfoss.org
 VITE_FIREBASE_CONFIG=
 VITE_AZURE_UPLOAD_SAS_TOKEN=
 VITE_AZURE_DOWNLOAD_SAS_TOKEN=
+VITE_AZURE_GENERIC_UPLOAD_SAS_TOKEN=
 VITE_AZURE_STORAGE_ACCOUNT=
+VITE_AZURE_GENERIC_STORAGE_ACCOUNT=
 VITE_AZURE_STORAGE_CONTAINER=
 VITE_APP_ENV=local
 VITE_SENTRY_DSN=

.github/workflows/preview-build.yml

@@ -28,7 +28,9 @@ jobs:
           VITE_FIREBASE_CONFIG: ${{ secrets.STAGING_FIREBASE_CONFIG }}
           VITE_AZURE_UPLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_UPLOAD_SAS_TOKEN }}
           VITE_AZURE_DOWNLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_DOWNLOAD_SAS_TOKEN }}
+          VITE_AZURE_GENERIC_UPLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_GENERIC_UPLOAD_SAS_TOKEN }}
           VITE_AZURE_STORAGE_ACCOUNT: ${{ secrets.STAGING_AZURE_STORAGE_ACCOUNT }}
+          VITE_AZURE_GENERIC_STORAGE_ACCOUNT: ${{ secrets.STAGING_AZURE_GENERIC_STORAGE_ACCOUNT }}
           VITE_AZURE_STORAGE_CONTAINER: ${{ secrets.STAGING_AZURE_STORAGE_CONTAINER }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_APP_ENV: staging

.github/workflows/staging-deploy.yml

@@ -19,7 +19,9 @@ jobs:
           VITE_FIREBASE_CONFIG: ${{ secrets.STAGING_FIREBASE_CONFIG }}
           VITE_AZURE_UPLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_UPLOAD_SAS_TOKEN }}
           VITE_AZURE_DOWNLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_DOWNLOAD_SAS_TOKEN }}
+          VITE_AZURE_GENERIC_UPLOAD_SAS_TOKEN: ${{ secrets.STAGING_AZURE_GENERIC_UPLOAD_SAS_TOKEN }}
           VITE_AZURE_STORAGE_ACCOUNT: ${{ secrets.STAGING_AZURE_STORAGE_ACCOUNT }}
+          VITE_AZURE_GENERIC_STORAGE_ACCOUNT: ${{ secrets.STAGING_AZURE_GENERIC_STORAGE_ACCOUNT }}
           VITE_AZURE_STORAGE_CONTAINER: ${{ secrets.STAGING_AZURE_STORAGE_CONTAINER }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_APP_ENV: staging

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.5.4",
+    "@sliit-foss/bashaway-ui": "0.7.3",
     "async-mutex": "^0.4.0",
     "firebase": "10.2.0",
     "framer-motion": "10.14.0",

src/app.jsx

@@ -1,7 +1,7 @@
 import { Provider } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { motion } from "framer-motion";
-import { Footer, Header } from "@/components";
+import { Footer, Header, IdentificationForm } from "@/components";
 import { useAuth } from "@/hooks";
 import { default as AnimatedRoutes } from "@/routes";
 import { store } from "@/store";
@@ -28,6 +28,7 @@ const App = () => {
           <Footer />
           <Loader />
           <Toaster />
+          <IdentificationForm />
           <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

@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react";
+import { Paperclip } from "lucide-react";
+import { useSelector } from "react-redux";
+import { store } from "@/store";
+import { authApi, useAuthUserQuery, useUpdateProfileMutation } from "@/store/api";
+import { toggleIdentificationForm } from "@/store/reducers/ui/global";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+  Dropdown,
+  Input,
+  toast
+} from "@sliit-foss/bashaway-ui/components";
+import { gender, mealPreference } from "@sliit-foss/bashaway-ui/constants";
+
+const close = () => store.dispatch(toggleIdentificationForm(false));
+
+const IdentificationForm = () => {
+  const open = useSelector((store) => store.ui.global.showIdentificationForm);
+
+  const { data: { data: team } = {} } = useAuthUserQuery();
+
+  const [updateProfile, { isLoading }] = useUpdateProfileMutation();
+
+  const [formData, setFormData] = useState(team?.members);
+  const [idFiles, setIdFiles] = useState([]);
+
+  useEffect(() => {
+    if (team) setFormData(team.members);
+  }, [team]);
+
+  const handleSubmit = async () => {
+    await updateProfile({
+      id: team._id,
+      data: {
+        members: formData
+      }
+    })
+      .unwrap()
+      .then((data) => {
+        store.dispatch(authApi.util.upsertQueryData("authUser", undefined, { data: data?.data }));
+        close();
+        toast({ title: "Details recorded successfully" });
+      });
+  };
+
+  const onFileChange = (e, index) => {
+    setIdFiles((prev) => {
+      const newFiles = JSON.parse(JSON.stringify(prev));
+      newFiles[index] = e.target.files[0];
+      return newFiles;
+    });
+  };
+
+  const onChange = (e, index) => {
+    const newFormData = JSON.parse(JSON.stringify(formData));
+    newFormData[index][e.target.name] = e.target.value;
+    setFormData(newFormData);
+  };
+
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) close();
+      }}
+    >
+      <AlertDialogContent>
+        <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.
+            </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 *"
+                      options={mealPreference.options}
+                      className="sm:h-14"
+                      value={formData[index].meal_preference}
+                      onChange={(e) => onChange(e, index)}
+                    />
+                  </div>
+                  <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} />}
+                    readOnly
+                  />
+                  <input
+                    id={`id-upload-${index}`}
+                    type="file"
+                    className="hidden"
+                    onChange={(e) => onFileChange(e, index)}
+                  />
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+          <AlertDialogFooter className="mt-4">
+            <Button type="submit" loading={isLoading}>
+              Submit and continue
+            </Button>
+          </AlertDialogFooter>
+        </form>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default IdentificationForm;

src/components/index.jsx

@@ -3,3 +3,5 @@ export * from "./layout";
 export * from "./question-details";
 export * from "./register";
 export * from "./submissions";
+
+export { default as IdentificationForm } from "./identification-form";

src/hooks/identification.jsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { store } from "@/store";
+import { useAuthUserQuery, useGetSettingsQuery } from "@/store/api";
+import { toggleIdentificationForm } from "@/store/reducers/ui/global";
+
+const useIdentification = () => {
+  const { data: { data: settings } = {} } = useGetSettingsQuery();
+  const { data: { data: team } = {} } = useAuthUserQuery();
+
+  const open = useSelector((store) => store.ui.global.showIdentificationForm);
+
+  useEffect(() => {
+    if (
+      team &&
+      settings?.round_breakpoint &&
+      new Date() > new Date(settings?.round_breakpoint) &&
+      !team.eliminated &&
+      team.members.find((member) => !member.nic) &&
+      !open
+    ) {
+      store.dispatch(toggleIdentificationForm(true));
+    }
+  }, [settings]);
+};
+
+export default useIdentification;

src/hooks/index.jsx

@@ -1,4 +1,5 @@
 export { default as useAuth } from "./auth";
 export { default as useBreakpoint } from "./breakpoint";
 export { default as useEffectOnce } from "./effect-once";
+export { default as useIdentification } from "./identification";
 export { default as useTitle } from "./title";

src/pages/question-details.jsx

@@ -9,7 +9,7 @@ import { default as startCase } from "lodash/startCase";
 import { twMerge } from "tailwind-merge";
 import { ActionButtons } from "@/components/question-details";
 import { useEffectOnce, useTitle } from "@/hooks";
-import { tracker, uploadFile } from "@/services";
+import { tracker, uploadSubmission } from "@/services";
 import { store } from "@/store";
 import {
   selectQuestionById,
@@ -42,7 +42,7 @@ export default function QuestionDetails() {
           return toast({ variant: "destructive", title: "Submission size should be less than 25MB" });
         if (!["zip"].includes(file.name?.split(".").pop()))
           return toast({ variant: "destructive", title: "Submission should be a zip archive" });
-        const url = await uploadFile(file);
+        const url = await uploadSubmission(file);
         await addSubmission({ question: id, link: url })
           .unwrap()
           .then(() => {

src/routes/index.jsx

@@ -1,5 +1,6 @@
 import { Route, Routes, useLocation } from "react-router-dom";
 import { AnimatePresence } from "framer-motion";
+import { useIdentification } from "@/hooks";
 import {
   ChangePassword,
   ForgotPassword,
@@ -15,6 +16,7 @@ import {
 
 const AnimatedRoutes = () => {
   const location = useLocation();
+  useIdentification();
   return (
     <AnimatePresence>
       <Routes location={location}>