From 006852b68d1aedc8131c29487e7caa7dc871c7a2 Mon Sep 17 00:00:00 2001
From: Sidhant Rohatgi <rohatgisidhant@gmail.com>
Date: Thu, 18 Apr 2024 16:59:05 -0700
Subject: [PATCH] Added component for Step 3

Made Temporary path called Step 3 for visualization, Added WorkExperienceForm and Step 3 Components.
---
 frontend/src/App.tsx                          |   2 +-
 frontend/src/components/Step3.module.css      |  76 ++++++++
 frontend/src/components/Step3.tsx             | 169 ++++++++++++++++++
 .../components/WorkExperienceForm.module.css  |  97 ++++++++++
 .../src/components/WorkExperienceForm.tsx     |  94 ++++++++++
 frontend/src/components/index.ts              |   4 +
 frontend/src/pages/index.ts                   |   4 +-
 7 files changed, 444 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Step3.module.css
 create mode 100644 frontend/src/components/Step3.tsx
 create mode 100644 frontend/src/components/WorkExperienceForm.module.css
 create mode 100644 frontend/src/components/WorkExperienceForm.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e0b1eba..5c21e19 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { Outlet, Route, Routes } from "react-router-dom";
 
-import { NavBar } from "./components/index.ts";
+import { NavBar, Step3 } from "./components/index.ts";
 import { AuthProvider, FormProvider } from "./contexts/index.ts";
 import {
   Application,
diff --git a/frontend/src/components/Step3.module.css b/frontend/src/components/Step3.module.css
new file mode 100644
index 0000000..831de6e
--- /dev/null
+++ b/frontend/src/components/Step3.module.css
@@ -0,0 +1,76 @@
+.red {
+    color: var(--color-ccidc-red);
+  }
+  
+  .formContainer {
+    /* width: 100%;
+    margin: 3rem 10rem !important; */
+    background-color: var(--color-text-secondary);
+  }
+  
+  .formSection {
+    margin: 3rem auto !important;
+    width: 80%;
+  }
+  
+  .applyFacts {
+    width: 80%;
+    margin: 3rem auto !important;
+  }
+  .listText {
+    color: black;
+    margin: 0;
+  }
+  
+  .bulletPoint {
+    list-style-type: disc;
+    color: var(--color-ccidc-red);
+  }
+  
+  .warningText {
+    color: #ad281f;
+    margin: 3rem 10rem !important;
+  }
+  
+  .upload {
+    font-family: "Rubik";
+    font-size: 15px;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 48px;
+    width: 290px;
+    text-align: left;
+    align-items: center;
+    display: flex;
+    margin-top: 2rem;
+    padding: 16px;
+    justify-content: space-between;
+  }
+  
+  .uploadButton {
+    width: 24px;
+    height: 24px;
+  }
+
+  .uploadTwo {
+    font-family: "Rubik";
+    font-size: 15px;
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 40px;
+    width: 285px;
+    text-align: left;
+    align-items: center;
+    display: flex;
+    margin-left: 100px;
+    background-image: url("../assets/uploadIcon.svg");
+    background-repeat: no-repeat, repeat;
+    background-position:
+      right 2em top 50%,
+      0 0;
+    margin-bottom: 2em;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/components/Step3.tsx b/frontend/src/components/Step3.tsx
new file mode 100644
index 0000000..0de6bc6
--- /dev/null
+++ b/frontend/src/components/Step3.tsx
@@ -0,0 +1,169 @@
+import styles from "./Step3.module.css";
+import { WorkExperienceForm } from "./index.ts";
+import { Button } from "./Button.tsx";
+
+export function Step3() {
+  return (
+    <div className={styles.formContainer}>
+
+      <hr />
+
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Current Company Info"
+          formInputs={[
+            {
+              inputTitle: "Company Name",
+              defaultMessage: "Add Company Name",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Website",
+              defaultMessage: "Add your Company's Website",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Profession",
+              defaultMessage: "Add Profession Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Specialization",
+              defaultMessage: "Add Specialization Here",
+              inputType: "text",
+            },
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Work Experience"
+          formInputs={[
+            {
+              inputTitle: "Recent diversified design experience",
+              defaultMessage: "Design Experience",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "How many hours per week did you work (on average)?",
+              defaultMessage: "Number of Hours",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Name of Superviser to Contact",
+              defaultMessage: "Superviser Name",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Supervisor’s Phone Number",
+              defaultMessage: "Enter Phone Number",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Supervisor’s Email Address",
+              defaultMessage: "Enter Supervisor’s Email Address",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Company Name",
+              defaultMessage: "Add Company Name",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Address",
+              defaultMessage: "Enter Address",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "City",
+              defaultMessage: "Enter City",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "State",
+              defaultMessage: "Enter State",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Zip",
+              defaultMessage: "Enter Zip",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Country",
+              defaultMessage: "Enter Country",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Hire Date",
+              defaultMessage: "mm/dd/yyyy",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Last Date Worked",
+              defaultMessage: "mm/dd/yyyy",
+              inputType: "text",
+              required: false,
+            },
+          ]}
+          add={true}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Total Work Experience"
+          formInputs={[
+            {
+              inputTitle: "Total Hours Work Experience",
+              defaultMessage: "Number of Hours",
+              inputType: "text",
+              required: true,
+            },
+            {
+              inputTitle: "Total Years Work Experience",
+              defaultMessage: "Number of Years",
+              inputType: "text",
+              required: true,
+            },
+
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Upload Proof of Diversified Interior Design Experience (5+ years of experience)"
+          formInputs={[
+          ]}
+          
+        />
+        <p className={styles.note}>
+        i. IF YOU ARE SELF-EMPLOYED – Complete the _______ and include Tax Returns that claims yourself as an Interior Designer in the occupation section going back the amount of years you are claiming experience for or letter from a CPA or Attorney.
+        </p>
+        <p className={styles.note}>
+        ii. IF YOU ARE NOT SELF-EMPLOYED – Fill out the ________ must be signed by Candidate and Employer.
+        </p>
+
+        <Button onClick={undefined} additionalStyle={styles.uploadTwo}>
+            Upload Employment Verification Form
+        </Button>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/WorkExperienceForm.module.css b/frontend/src/components/WorkExperienceForm.module.css
new file mode 100644
index 0000000..3742d04
--- /dev/null
+++ b/frontend/src/components/WorkExperienceForm.module.css
@@ -0,0 +1,97 @@
+.formSectionContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 4rem;
+  }
+  
+  .sectionName {
+    margin: 0;
+    font-size: 18px !important;
+  }
+  
+  .inputBox {
+    margin-top: 1rem;
+  }
+  
+  .inputTitle {
+    font-size: 12px;
+    color: #6c6c6c;
+  }
+  
+  ::placeholder {
+    color: var(--color-accent);
+    opacity: 1; /* Firefox */
+  }
+  
+  .inputText {
+    width: 100%;
+    padding: 8px 48px 8px 16px;
+    margin-top: 4px;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--color-text-primary);
+    font: var(--font-body);
+    border: 1px solid var(--color-shadow);
+    border-radius: 5px;
+  }
+  
+  /* .inputTextSelected {
+    width: 100%;
+    padding: 8px 48px 8px 16px;
+    margin-top: 4px;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--color-accent);
+    font: var(--font-body);
+    border: 1px solid var(--color-shadow);
+    border-radius: 5px;
+  } */
+  
+  select.inputText {
+    /* Arrow */
+    appearance: none;
+    background-image: url("../assets/dropArrow.svg");
+    background-repeat: no-repeat;
+    background-position: right top 50%;
+    cursor: pointer;
+    /* color: var(--color-accent); */
+  }
+  .selectInput {
+    border: 0;
+    vertical-align: middle;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    padding-left: 5px;
+  }
+  
+  .optionDefault {
+    color: var(--color-accent);
+  }
+  
+  .optionSelected {
+    color: var(--color-text-primary);
+  }
+  
+  .nameWithAdd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .nameWithAdd h2 {
+    align-self: center;
+  }
+  
+  .add {
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 40px;
+    width: 94px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    padding: 8px 16px 8px 16px;
+  }
diff --git a/frontend/src/components/WorkExperienceForm.tsx b/frontend/src/components/WorkExperienceForm.tsx
new file mode 100644
index 0000000..5ecee0c
--- /dev/null
+++ b/frontend/src/components/WorkExperienceForm.tsx
@@ -0,0 +1,94 @@
+import React, { ReactNode } from "react";
+
+import plus from "../assets/plusIcon.svg";
+
+import styles from "./WorkExperienceForm.module.css"; // Import CSS styles for Pathway component
+
+export type FormInput = {
+  inputTitle: string;
+  defaultMessage: string;
+  inputType: "text" | "dropdown" | "checkbox"; // Add other input types as needed
+  dropdownOptions?: string[];
+  required?: boolean;
+};
+
+export type FormSectionProps = {
+  sectionName: string;
+  formInputs: FormInput[];
+  add?: boolean;
+  children?: ReactNode;
+};
+
+export const WorkExperienceForm: React.FC<FormSectionProps> = ({ sectionName, formInputs, add }) => {
+  return (
+    <div>
+      {add ? (
+        <div className={styles.nameWithAdd}>
+          <h3 className={styles.sectionName}>{sectionName}</h3>
+          <button className={styles.add}>
+            <span>Add</span>
+            <img src={plus} alt="buttonpng" height="14px" />
+          </button>
+        </div>
+      ) : (
+        <h3 className={styles.sectionName}>{sectionName}</h3>
+      )}
+
+      <div className={styles.formSectionContainer}>
+        {formInputs.map((formInput, index) => (
+          <div className={styles.inputBox} key={index}>
+            <div className={styles.inputTitle}>{formInput.inputTitle}</div>
+            {formInput.inputType === "text" &&
+              (formInput.required ? (
+                <input
+                  required
+                  type="text"
+                  className={styles.inputText}
+                  placeholder={formInput.defaultMessage}
+                />
+              ) : (
+                <input
+                  type="text"
+                  className={styles.inputText}
+                  placeholder={formInput.defaultMessage}
+                />
+              ))}
+            {formInput.inputType === "dropdown" &&
+              formInput.dropdownOptions &&
+              (formInput.required ? (
+                <select className={styles.inputText} id="drop">
+                  <option value="" className={styles.optionDefault} selected disabled>
+                    Select One
+                  </option>
+                  {formInput.dropdownOptions.map((dropOption, dropIndex) => (
+                    <option
+                      key={dropIndex}
+                      value={dropOption}
+                      className={dropOption ? styles.optionSelected : styles.optionDefault}
+                    >
+                      {dropOption}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <select required className={styles.inputText} id="drop">
+                  <option value="" className={styles.optionDefault} selected disabled>
+                    Select One
+                  </option>
+                  {formInput.dropdownOptions.map((dropOption, dropIndex) => (
+                    <option
+                      key={dropIndex}
+                      value={dropOption}
+                      className={dropOption ? styles.optionSelected : styles.optionDefault}
+                    >
+                      {dropOption}
+                    </option>
+                  ))}
+                </select>
+              ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index b86c1cb..fba555f 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -16,6 +16,8 @@ import { PathwayTimeline } from "./PathwayTimeline.tsx";
 import { Step1 } from "./Step1.tsx";
 import { Step2 } from "./Step2.tsx";
 import { Step4 } from "./Step4.tsx";
+import { WorkExperienceForm } from "./WorkExperienceForm.tsx"
+import { Step3 } from "./Step3.tsx"
 
 export {
   Page,
@@ -34,4 +36,6 @@ export {
   ConfirmSubmissionModal,
   CongratulationsModal,
   RequirementsNotMetModal,
+  WorkExperienceForm,
+  Step3,
 };
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index aa4ab4f..3f7d885 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -4,4 +4,6 @@ import { Login } from "./Login.tsx";
 import { PrescreeningForm } from "./PrescreeningForm.tsx";
 import { TestModals } from "./TestModals.tsx";
 import { ThankyouForApplying } from "./ThankyouForApplying.tsx";
-export { Application, Candidates, ThankyouForApplying, PrescreeningForm, Login, TestModals };
+
+export { Application, Candidates, TestCongratulations,, ThankyouForApplying, PrescreeningForm, Login, TestModals };
+