From b0b70f9c0be87750571372ab57b8a6042a931ed7 Mon Sep 17 00:00:00 2001
From: Akalanka <akalankaperera128@gmail.com>
Date: Fri, 13 Oct 2023 01:38:37 +0530
Subject: [PATCH] Feat: added identification hook and form

---
 .env.example                           |   2 +
 .github/workflows/preview-build.yml    |   2 +
 .github/workflows/staging-deploy.yml   |   2 +
 package.json                           |   2 +-
 pnpm-lock.yaml                         |  80 +++++++++++++-
 src/app.jsx                            |   3 +-
 src/components/identification-form.jsx | 147 +++++++++++++++++++++++++
 src/components/index.jsx               |   2 +
 src/hooks/identification.jsx           |  27 +++++
 src/hooks/index.jsx                    |   1 +
 src/pages/question-details.jsx         |   4 +-
 src/routes/index.jsx                   |   2 +
 src/services/azure.js                  |  29 ++++-
 src/store/reducers/ui/global.js        |   8 +-
 14 files changed, 295 insertions(+), 16 deletions(-)
 create mode 100644 src/components/identification-form.jsx
 create mode 100644 src/hooks/identification.jsx

diff --git a/.env.example b/.env.example
index ad824ed..925f74f 100644
--- a/.env.example
+++ b/.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=
diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml
index 6f9ba9c..667fe39 100644
--- a/.github/workflows/preview-build.yml
+++ b/.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
diff --git a/.github/workflows/staging-deploy.yml b/.github/workflows/staging-deploy.yml
index 01fef12..0751656 100644
--- a/.github/workflows/staging-deploy.yml
+++ b/.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
diff --git a/package.json b/package.json
index c1e01b8..25a62ab 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6ee7a8..d267bf0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,8 +20,8 @@ dependencies:
     specifier: 7.69.0
     version: 7.69.0(react@18.0.0)
   '@sliit-foss/bashaway-ui':
-    specifier: 0.5.4
-    version: 0.5.4(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-native@0.72.4)(redux@4.2.1)(tailwindcss@3.3.2)
+    specifier: 0.7.3
+    version: 0.7.3(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-native@0.72.4)(redux@4.2.1)(tailwindcss@3.3.2)
   async-mutex:
     specifier: ^0.4.0
     version: 0.4.0
@@ -2861,6 +2861,35 @@ packages:
       '@babel/runtime': 7.22.6
     dev: false
 
+  /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0):
+    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@types/react': 18.0.28
+      '@types/react-dom': 18.0.11
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    dev: false
+
   /@radix-ui/react-alert-dialog@1.0.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0):
     resolution: {integrity: sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==}
     peerDependencies:
@@ -2908,6 +2937,34 @@ packages:
       react-dom: 18.0.0(react@18.0.0)
     dev: false
 
+  /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0):
+    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.28)(react@18.0.0)
+      '@types/react': 18.0.28
+      '@types/react-dom': 18.0.11
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    dev: false
+
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -2994,6 +3051,20 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.0.28)(react@18.0.0)
     dev: false
 
+  /@radix-ui/react-direction@1.0.1(@types/react@18.0.28)(react@18.0.0):
+    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.0.28
+      react: 18.0.0
+    dev: false
+
   /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
@@ -3808,9 +3879,10 @@ packages:
       '@sinonjs/commons': 3.0.0
     dev: false
 
-  /@sliit-foss/bashaway-ui@0.5.4(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-native@0.72.4)(redux@4.2.1)(tailwindcss@3.3.2):
-    resolution: {integrity: sha512-HBnCEXL0mJGGcq+icNVnxhyQt7mQEhF9dW04gLjXdEhuOIiwLE6b5cBANxriADrfxFr09q+cAmFIb2ZisrEbQw==}
+  /@sliit-foss/bashaway-ui@0.7.3(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-native@0.72.4)(redux@4.2.1)(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-bUYF4+qGsPphIUZ7bC/f+bqSggSO2q+yH8iY22PubQiGZ0BUGBTqjcI4YPd9qAi/vEfS2dPSiKX97m88TWSp3w==}
     dependencies:
+      '@radix-ui/react-accordion': 1.1.2(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
       '@radix-ui/react-alert-dialog': 1.0.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
       '@radix-ui/react-toast': 1.1.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
       '@radix-ui/react-tooltip': 1.0.6(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0)
diff --git a/src/app.jsx b/src/app.jsx
index c437bfb..c6f30ab 100644
--- a/src/app.jsx
+++ b/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"
diff --git a/src/components/identification-form.jsx b/src/components/identification-form.jsx
new file mode 100644
index 0000000..6b1baf4
--- /dev/null
+++ b/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;
diff --git a/src/components/index.jsx b/src/components/index.jsx
index 352bfe5..a7cb54f 100644
--- a/src/components/index.jsx
+++ b/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";
diff --git a/src/hooks/identification.jsx b/src/hooks/identification.jsx
new file mode 100644
index 0000000..d6f28ab
--- /dev/null
+++ b/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;
diff --git a/src/hooks/index.jsx b/src/hooks/index.jsx
index 5742a3f..002c660 100644
--- a/src/hooks/index.jsx
+++ b/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";
diff --git a/src/pages/question-details.jsx b/src/pages/question-details.jsx
index 3a43acb..c66997a 100644
--- a/src/pages/question-details.jsx
+++ b/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(() => {
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 9ed18e8..590d0b0 100644
--- a/src/routes/index.jsx
+++ b/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}>
diff --git a/src/services/azure.js b/src/services/azure.js
index b9235d0..aa1e1eb 100644
--- a/src/services/azure.js
+++ b/src/services/azure.js
@@ -1,17 +1,34 @@
 import { authUser } from "@/utils";
 import { BlobServiceClient } from "@azure/storage-blob";
 
-const blobServiceClient = new BlobServiceClient(
+const secureBlobServiceClient = new BlobServiceClient(
   `https://${import.meta.env.VITE_AZURE_STORAGE_ACCOUNT}.blob.core.windows.net?${
     import.meta.env.VITE_AZURE_UPLOAD_SAS_TOKEN
   }`
 );
-const containerClient = blobServiceClient.getContainerClient(import.meta.env.VITE_AZURE_STORAGE_CONTAINER);
 
-export const uploadFile = async (file) => {
-  const blockBlobClient = containerClient.getBlockBlobClient(
-    `${authUser()?.name}/${new Date().toISOString()}/${file.name}`
-  );
+const genericBlobServiceClient = new BlobServiceClient(
+  `https://${import.meta.env.VITE_AZURE_GENERIC_STORAGE_ACCOUNT}.blob.core.windows.net?${
+    import.meta.env.VITE_AZURE_GENERIC_UPLOAD_SAS_TOKEN
+  }`
+);
+
+const secureContainerClient = secureBlobServiceClient.getContainerClient(import.meta.env.VITE_AZURE_STORAGE_CONTAINER);
+
+const genericContainerClient = genericBlobServiceClient.getContainerClient(
+  import.meta.env.VITE_AZURE_STORAGE_CONTAINER
+);
+
+const uploadFile = async (containerClient, file, path) => {
+  const blockBlobClient = containerClient.getBlockBlobClient(path);
   await blockBlobClient.uploadBrowserData(file);
   return blockBlobClient.url?.split("?")[0];
 };
+
+export const uploadSubmission = async (file) => {
+  return uploadFile(secureContainerClient, file, `${authUser()?.name}/${new Date().toISOString()}/${file.name}`);
+};
+
+export const uploadIdCard = async (teamName, userName, file) => {
+  return uploadFile(genericContainerClient, file, `identification/${teamName}-${userName}/${file.name}`);
+};
diff --git a/src/store/reducers/ui/global.js b/src/store/reducers/ui/global.js
index 1cb9888..42fc1e3 100644
--- a/src/store/reducers/ui/global.js
+++ b/src/store/reducers/ui/global.js
@@ -1,7 +1,8 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  showLoader: false
+  showLoader: false,
+  showIdentificationForm: false
 };
 
 export const slice = createSlice({
@@ -10,10 +11,13 @@ export const slice = createSlice({
   reducers: {
     toggleLoader(state, action) {
       state.showLoader = action.payload;
+    },
+    toggleIdentificationForm(state, action) {
+      state.showIdentificationForm = action.payload;
     }
   }
 });
 
-export const { toggleLoader } = slice.actions;
+export const { toggleLoader, toggleIdentificationForm } = slice.actions;
 
 export default slice.reducer;