From 7912676d31a15bd1926048a8be4a980ccc9a6554 Mon Sep 17 00:00:00 2001
From: kathyychenn <ktchen@ucsd.edu>
Date: Tue, 21 May 2024 15:39:35 -0700
Subject: [PATCH 1/4] contexts for step1 and step4

---
 frontend/src/components/Dropdown.tsx  |   7 +-
 frontend/src/components/Step1.tsx     |  91 ++++++++++++++-----
 frontend/src/components/Step4.tsx     | 126 +++++++++++++-------------
 frontend/src/contexts/FormContext.tsx |   2 +
 4 files changed, 137 insertions(+), 89 deletions(-)

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index acfd1d1..e264614 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import styles from "./Dropdown.module.css";
 
@@ -6,10 +6,15 @@ export function Dropdown(props: {
   options: string[];
   onSelect: (value: string) => void;
   required?: boolean;
+  defaultValue?: string;
 }) {
   const [selected, setSelected] = useState("Select One");
   const [isActive, setIsActive] = useState(false);
 
+  useEffect(() => {
+    setSelected(props.defaultValue ?? "Select One");
+  }, [props.defaultValue]);
+
   const handleOptionClick = (option: string) => {
     setSelected(option);
     setIsActive(false);
diff --git a/frontend/src/components/Step1.tsx b/frontend/src/components/Step1.tsx
index c83dc16..a3a3bfe 100644
--- a/frontend/src/components/Step1.tsx
+++ b/frontend/src/components/Step1.tsx
@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useContext } from "react";
 
 import devices from "../constants/devices.json";
 import genders from "../constants/genders.json";
+import { FormContext } from "../contexts/FormContext.tsx";
 
 import styles from "./Steps.module.css";
 import { Dropdown } from "./index.ts";
@@ -11,22 +12,36 @@ type Step1Props = {
 };
 
 export function Step1({ onSubmit }: Step1Props) {
-  const [email, setEmail] = useState<string>("");
-  const [confirmEmail, setConfirmEmail] = useState<string>("");
-  const [gender, setGender] = useState("");
-  const [phoneType, setPhoneType] = useState("");
+  const { formData, setFormData } = useContext(FormContext);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
 
   const handleGenderSelect = (option: string) => {
-    setGender(option);
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      gender: option,
+    }));
   };
 
   const handlePhoneSelect = (option: string) => {
-    setPhoneType(option);
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      deviceType: option,
+    }));
   };
 
   const handleConfirmEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setConfirmEmail(e.target.value);
-    e.target.setCustomValidity(""); // Reset custom validity on input change
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      confirmEmail: e.target.value,
+    }));
+    e.target.setCustomValidity("");
   };
 
   const handleInvalid = (event: React.InvalidEvent<HTMLInputElement>) => {
@@ -103,6 +118,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter First Name Here"
                 name="firstName"
+                value={formData.firstName}
+                onChange={handleInputChange}
                 required
               />
             </label>
@@ -115,6 +132,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter Middle Name Here"
                 name="middleName"
+                onChange={handleInputChange}
+                value={formData.middleName}
               />
             </label>
           </div>
@@ -126,6 +145,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter Last Name Here"
                 name="lastName"
+                onChange={handleInputChange}
+                value={formData.lastName}
                 required
               />
             </label>
@@ -138,19 +159,26 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter 2nd Last Name Here"
                 name="maidenName"
+                onChange={handleInputChange}
+                value={formData.maidenName}
               />
             </label>
           </div>
           <div className={styles.inputBox}>
             <label htmlFor="gender" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
               Gender<span className={styles.boldRed}>*</span>
-              <Dropdown options={genders} onSelect={handleGenderSelect}></Dropdown>
+              <Dropdown
+                options={genders}
+                onSelect={handleGenderSelect}
+                defaultValue={formData.gender || undefined}
+              ></Dropdown>
               <input
                 className={styles.customDropDown}
                 type="text"
                 id="gender"
                 name="gender"
-                defaultValue={gender}
+                value={formData.gender}
+                onChange={handleInputChange}
                 required
               ></input>
             </label>
@@ -172,10 +200,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 className={styles.inputText}
                 type="email"
                 name="email"
-                value={email}
-                onChange={(e) => {
-                  setEmail(e.target.value);
-                }}
+                value={formData.email}
+                onChange={handleInputChange}
                 placeholder="Enter Email Address"
                 autoComplete="email"
                 required
@@ -183,15 +209,20 @@ export function Step1({ onSubmit }: Step1Props) {
             </label>
           </div>
           <div className={styles.inputBox}>
-            <label htmlFor="phoneType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
+            <label htmlFor="deviceType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
               Phone Type<span className={styles.boldRed}>*</span>
-              <Dropdown options={devices} onSelect={handlePhoneSelect}></Dropdown>
+              <Dropdown
+                options={devices}
+                onSelect={handlePhoneSelect}
+                defaultValue={formData.deviceType || undefined}
+              ></Dropdown>
               <input
                 className={styles.customDropDown}
                 type="text"
-                id="phoneType"
-                name="phoneType"
-                defaultValue={phoneType}
+                id="deviceType"
+                name="deviceType"
+                value={formData.deviceType}
+                onChange={handleInputChange}
                 required
               ></input>
             </label>
@@ -204,10 +235,10 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="email"
                 name="confirmEmail"
                 placeholder="Enter Email Address"
-                value={confirmEmail}
+                value={formData.confirmEmail}
                 onInvalid={handleInvalid}
                 onChange={handleConfirmEmailChange}
-                pattern={email}
+                pattern={formData.email}
                 required
               />
             </label>
@@ -221,8 +252,10 @@ export function Step1({ onSubmit }: Step1Props) {
                 placeholder="Enter Phone Number"
                 pattern="^\d+$"
                 autoComplete="tel"
+                value={formData.phoneNumber}
                 required
-                name="phone"
+                onChange={handleInputChange}
+                name="phoneNumber"
               />
             </label>
           </div>
@@ -246,6 +279,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 required
                 name="address"
                 autoComplete="street-address"
+                onChange={handleInputChange}
+                value={formData.address}
               />
             </label>
           </div>
@@ -258,6 +293,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 placeholder="Enter City"
                 name="city"
                 required
+                onChange={handleInputChange}
+                value={formData.city}
               />
             </label>
           </div>
@@ -269,6 +306,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter State"
                 name="state"
+                value={formData.state}
+                onChange={handleInputChange}
                 required
               />
             </label>
@@ -281,7 +320,9 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter Country"
                 name="country"
+                value={formData.country}
                 required
+                onChange={handleInputChange}
                 autoComplete="country"
               />
             </label>
@@ -294,6 +335,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter County"
                 name="county"
+                onChange={handleInputChange}
+                value={formData.county}
               />
             </label>
           </div>
@@ -305,6 +348,8 @@ export function Step1({ onSubmit }: Step1Props) {
                 type="text"
                 placeholder="Enter Zip Code"
                 name="zip"
+                onChange={handleInputChange}
+                value={formData.zip}
               />
             </label>
           </div>
diff --git a/frontend/src/components/Step4.tsx b/frontend/src/components/Step4.tsx
index fbad106..2664190 100644
--- a/frontend/src/components/Step4.tsx
+++ b/frontend/src/components/Step4.tsx
@@ -1,32 +1,34 @@
-import { useState } from "react";
+import { useContext } from "react";
 
 import upload from "../assets/uploadIcon.svg";
+import { FormContext } from "../contexts/FormContext.tsx";
 
 import styles from "./Step4.module.css";
 import { Dropdown } from "./index.ts";
 
-// Pass in Application's next function
 export type StepProps = {
   next: () => void;
 };
 
 export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
-  const [certified, setCertified] = useState("");
-  const [licenseNumber, setLicenseNumber] = useState("");
-  const [state, setState] = useState("");
-  const [licenseExpiration, setLicenseExpiration] = useState("");
-  const [certificationExam, setCertificationExam] = useState("");
-  const [selectedFelonyCharge, setSelectedFelonyCharge] = useState("");
-  const [dateOfCertificationExam, setDateOfCertificationExam] = useState("");
-  const [eplanation, setExplanation] = useState("");
-
-  // Stores the Selected Option Value
+  const { formData, setFormData } = useContext(FormContext);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
+
   const handleSelect = (option: string) => {
-    setSelectedFelonyCharge(option);
-    console.log({ selectedFelonyCharge });
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      convictedOfFelony: option,
+    }));
+    console.log(formData.convictedOfFelony);
   };
 
-  // Checks if all Required Inputs are filled before moving on to next step
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -47,17 +49,15 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
 
           <div className={styles.formSectionContainer}>
             <div className={styles.inputBox}>
-              <label htmlFor="license" className={styles.inputTitle}>
+              <label htmlFor="certifiedJurisdiction" className={styles.inputTitle}>
                 Certified/Registered/Licensed in any other Jurisdiction
                 <input
                   className={styles.inputText}
                   type="text"
-                  id="license"
-                  name="license"
-                  value={certified}
-                  onChange={(e) => {
-                    setCertified(e.target.value);
-                  }}
+                  id="certifiedJurisdiction"
+                  name="certifiedJurisdiction"
+                  value={formData.certifiedJurisdiction}
+                  onChange={handleInputChange}
                   placeholder="Enter Certified/Registered/Licensed in any other Jurisdiction"
                 />
               </label>
@@ -71,44 +71,39 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                   type="text"
                   name="licenseNumber"
                   id="licenseNumber"
-                  value={licenseNumber}
-                  onChange={(e) => {
-                    setLicenseNumber(e.target.value);
-                  }}
+                  value={formData.licenseNumber}
+                  onChange={handleInputChange}
                   placeholder="Enter Certified/Registered/License Number"
                 />
               </label>
             </div>
 
             <div className={styles.inputBox}>
-              <label htmlFor="state" className={styles.inputTitle}>
+              <label htmlFor="jurisdictionName" className={styles.inputTitle}>
                 Name of State/Jurisdiction
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="state"
-                  id="state"
-                  value={state}
-                  onChange={(e) => {
-                    setState(e.target.value);
-                  }}
+                  name="jurisdictionName"
+                  id="jurisdictionName"
+                  value={formData.jurisdictionName}
+                  onChange={handleInputChange}
                   placeholder="Enter Name of State/Jurisdiction"
                 />
               </label>
             </div>
 
             <div className={styles.inputBox}>
-              <label htmlFor="licenseExpiration" className={styles.inputTitle}>
+              <label htmlFor="dateCertified" className={styles.inputTitle}>
                 Date Certified/Registered/License Expires
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="licenseExpiration"
-                  id="licenseExpiration"
-                  value={licenseExpiration}
-                  onChange={(e) => {
-                    setLicenseExpiration(e.target.value);
-                  }}
+                  name="dateCertified"
+                  id="dateCertified"
+                  value={formData.dateCertified}
+                  onChange={handleInputChange}
+                  pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
                   placeholder="Enter Date Certified/Registered/License Expires"
                 />
               </label>
@@ -122,61 +117,62 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                   type="text"
                   name="certificationExam"
                   id="certificationExam"
-                  value={certificationExam}
-                  onChange={(e) => {
-                    setCertificationExam(e.target.value);
-                  }}
+                  value={formData.certificationExam}
+                  onChange={handleInputChange}
                   placeholder="Enter Certification Exam"
                 />
               </label>
             </div>
             <div className={styles.inputBox}>
-              <label htmlFor="dropDown" className={`${styles.inputTitle} ${styles.felonyLabel}`}>
+              <label
+                htmlFor="dropconvictedOfFelonyDown"
+                className={`${styles.inputTitle} ${styles.felonyLabel}`}
+              >
                 Have you ever been convicted of a Felony?<span className={styles.boldRed}>*</span>
-                <Dropdown options={["Yes", "No"]} onSelect={handleSelect}></Dropdown>
-                {/* Add if dropDown Required */}
+                <Dropdown
+                  options={["Yes", "No"]}
+                  onSelect={handleSelect}
+                  defaultValue={formData.convictedOfFelony || undefined}
+                ></Dropdown>
                 <input
                   className={styles.customDropDown}
                   type="text"
-                  id="dropDown"
-                  name="dropDown"
-                  defaultValue={selectedFelonyCharge}
+                  id="convictedOfFelony"
+                  name="convictedOfFelony"
+                  value={formData.convictedOfFelony}
+                  onChange={handleInputChange}
                   required
                 ></input>
               </label>
             </div>
 
             <div className={styles.inputBox}>
-              <label htmlFor="dateOfCertificationExam" className={styles.inputTitle}>
+              <label htmlFor="dateOfExam" className={styles.inputTitle}>
                 Date of Certification Exam
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="dateOfCertificationExam"
+                  name="dateOfExam"
                   placeholder="mm/dd/yyyy"
-                  id="dateOfCertificationExam"
-                  pattern="\d{2}-\d{2}-\d{4}"
-                  value={dateOfCertificationExam}
-                  onChange={(e) => {
-                    setDateOfCertificationExam(e.target.value);
-                  }}
+                  id="dateOfExam"
+                  pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
+                  value={formData.dateOfExam}
+                  onChange={handleInputChange}
                 />
               </label>
             </div>
 
             <div className={styles.inputBox}>
-              <label htmlFor="explanation" className={styles.inputTitle}>
+              <label htmlFor="extraExplanation" className={styles.inputTitle}>
                 If yes, please explain
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="explanation"
-                  id="explanation"
+                  name="extraExplanation"
+                  id="extraExplanation"
                   placeholder="Please explain here"
-                  value={eplanation}
-                  onChange={(e) => {
-                    setExplanation(e.target.value);
-                  }}
+                  value={formData.extraExplanation}
+                  onChange={handleInputChange}
                 />
               </label>
             </div>
diff --git a/frontend/src/contexts/FormContext.tsx b/frontend/src/contexts/FormContext.tsx
index 1fee584..a55fb1c 100644
--- a/frontend/src/contexts/FormContext.tsx
+++ b/frontend/src/contexts/FormContext.tsx
@@ -51,6 +51,7 @@ type FormData = {
   maidenName: string;
   gender: string;
   email: string;
+  confirmEmail: string;
   deviceType: string;
   phoneNumber: string;
   address: string;
@@ -96,6 +97,7 @@ const initialFormData: FormData = {
   maidenName: "",
   gender: "",
   email: "",
+  confirmEmail: "",
   deviceType: "",
   phoneNumber: "",
   address: "",

From 08d369179b4cd69f54f800d4f6fac406b2d469fa Mon Sep 17 00:00:00 2001
From: kathyychenn <ktchen@ucsd.edu>
Date: Tue, 21 May 2024 16:08:19 -0700
Subject: [PATCH 2/4] save if rules read to context step4

---
 frontend/src/components/Step4.tsx     | 27 +++++++++++++++++++++------
 frontend/src/contexts/FormContext.tsx |  2 ++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Step4.tsx b/frontend/src/components/Step4.tsx
index 2664190..8d0ca3e 100644
--- a/frontend/src/components/Step4.tsx
+++ b/frontend/src/components/Step4.tsx
@@ -14,11 +14,18 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
   const { formData, setFormData } = useContext(FormContext);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData((prevFormData) => ({
-      ...prevFormData,
-      [name]: value,
-    }));
+    const { name, value, type, checked } = e.target;
+    if (type === "checkbox") {
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        [name]: checked,
+      }));
+    } else {
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        [name]: value,
+      }));
+    }
   };
 
   const handleSelect = (option: string) => {
@@ -199,7 +206,15 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
           </p>
 
           <label htmlFor="select" className={styles.checkboxLabel}>
-            <input className={styles.select} type="checkbox" id="select" required />
+            <input
+              className={styles.select}
+              name="readRules"
+              type="checkbox"
+              id="select"
+              onChange={handleInputChange}
+              checked={formData.readRules}
+              required
+            />
             <span>
               Click here to acknowledge you have read and understood the rules and regulations
             </span>
diff --git a/frontend/src/contexts/FormContext.tsx b/frontend/src/contexts/FormContext.tsx
index a55fb1c..7d506a6 100644
--- a/frontend/src/contexts/FormContext.tsx
+++ b/frontend/src/contexts/FormContext.tsx
@@ -77,6 +77,7 @@ type FormData = {
   dateCertified: string;
   convictedOfFelony: string;
   extraExplanation: string;
+  readRules: boolean;
 
   SchoolsAttended: SchoolsAttended[];
   ProfessionalMemberships: ProfessionalMemberships[];
@@ -123,6 +124,7 @@ const initialFormData: FormData = {
   dateCertified: "",
   convictedOfFelony: "",
   extraExplanation: "",
+  readRules: false,
 
   SchoolsAttended: [],
   ProfessionalMemberships: [],

From f0f414d729cc60c49159d60ec4632149e4e0da1a Mon Sep 17 00:00:00 2001
From: kathyychenn <ktchen@ucsd.edu>
Date: Tue, 4 Jun 2024 15:44:25 -0700
Subject: [PATCH 3/4] remove console.log and change to dateCertifiedExpires

---
 frontend/src/components/Step4.tsx     | 8 ++++----
 frontend/src/contexts/FormContext.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Step4.tsx b/frontend/src/components/Step4.tsx
index 8d0ca3e..1b5ece2 100644
--- a/frontend/src/components/Step4.tsx
+++ b/frontend/src/components/Step4.tsx
@@ -101,14 +101,14 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
             </div>
 
             <div className={styles.inputBox}>
-              <label htmlFor="dateCertified" className={styles.inputTitle}>
+              <label htmlFor="dateCertifiedExpires" className={styles.inputTitle}>
                 Date Certified/Registered/License Expires
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="dateCertified"
-                  id="dateCertified"
-                  value={formData.dateCertified}
+                  name="dateCertifiedExpires"
+                  id="dateCertifiedExpires"
+                  value={formData.dateCertifiedExpires}
                   onChange={handleInputChange}
                   pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
                   placeholder="Enter Date Certified/Registered/License Expires"
diff --git a/frontend/src/contexts/FormContext.tsx b/frontend/src/contexts/FormContext.tsx
index 7d506a6..e23e846 100644
--- a/frontend/src/contexts/FormContext.tsx
+++ b/frontend/src/contexts/FormContext.tsx
@@ -74,7 +74,7 @@ type FormData = {
   certificationExam: string;
   dateOfExam: string;
   licenseNumber: string;
-  dateCertified: string;
+  dateCertifiedExpires: string;
   convictedOfFelony: string;
   extraExplanation: string;
   readRules: boolean;
@@ -121,7 +121,7 @@ const initialFormData: FormData = {
   certificationExam: "",
   dateOfExam: "",
   licenseNumber: "",
-  dateCertified: "",
+  dateCertifiedExpires: "",
   convictedOfFelony: "",
   extraExplanation: "",
   readRules: false,

From dbabf03ef50ecea356f1a8c8512a5a2e8fb994de Mon Sep 17 00:00:00 2001
From: kathyychenn <ktchen@ucsd.edu>
Date: Fri, 7 Jun 2024 00:52:54 -0700
Subject: [PATCH 4/4] add payment information section & new input fields

---
 frontend/src/components/Step4.module.css |   2 +-
 frontend/src/components/Step4.tsx        | 126 ++++++++++++++---------
 2 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/Step4.module.css b/frontend/src/components/Step4.module.css
index d6af2cf..770e4fa 100644
--- a/frontend/src/components/Step4.module.css
+++ b/frontend/src/components/Step4.module.css
@@ -161,7 +161,7 @@ input[type="checkbox"]:hover {
 .checkboxLabel {
   display: block;
   white-space: nowrap;
-  margin: 10px 0;
+  margin: 2rem 0;
 }
 
 .checkboxLabel input {
diff --git a/frontend/src/components/Step4.tsx b/frontend/src/components/Step4.tsx
index 1b5ece2..a7a7e60 100644
--- a/frontend/src/components/Step4.tsx
+++ b/frontend/src/components/Step4.tsx
@@ -69,22 +69,20 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                 />
               </label>
             </div>
-
             <div className={styles.inputBox}>
-              <label htmlFor="licenseNumber" className={styles.inputTitle}>
-                Certified/Registered/License Number
+              <label htmlFor="certificationExam" className={styles.inputTitle}>
+                Certification Exam
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="licenseNumber"
-                  id="licenseNumber"
-                  value={formData.licenseNumber}
+                  name="certificationExam"
+                  id="certificationExam"
+                  value={"IDEX"}
                   onChange={handleInputChange}
-                  placeholder="Enter Certified/Registered/License Number"
+                  placeholder="Enter Certification Exam"
                 />
               </label>
             </div>
-
             <div className={styles.inputBox}>
               <label htmlFor="jurisdictionName" className={styles.inputTitle}>
                 Name of State/Jurisdiction
@@ -99,37 +97,6 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                 />
               </label>
             </div>
-
-            <div className={styles.inputBox}>
-              <label htmlFor="dateCertifiedExpires" className={styles.inputTitle}>
-                Date Certified/Registered/License Expires
-                <input
-                  className={styles.inputText}
-                  type="text"
-                  name="dateCertifiedExpires"
-                  id="dateCertifiedExpires"
-                  value={formData.dateCertifiedExpires}
-                  onChange={handleInputChange}
-                  pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
-                  placeholder="Enter Date Certified/Registered/License Expires"
-                />
-              </label>
-            </div>
-
-            <div className={styles.inputBox}>
-              <label htmlFor="certificationExam" className={styles.inputTitle}>
-                Certification Exam
-                <input
-                  className={styles.inputText}
-                  type="text"
-                  name="certificationExam"
-                  id="certificationExam"
-                  value={formData.certificationExam}
-                  onChange={handleInputChange}
-                  placeholder="Enter Certification Exam"
-                />
-              </label>
-            </div>
             <div className={styles.inputBox}>
               <label
                 htmlFor="dropconvictedOfFelonyDown"
@@ -152,26 +119,23 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                 ></input>
               </label>
             </div>
-
             <div className={styles.inputBox}>
-              <label htmlFor="dateOfExam" className={styles.inputTitle}>
-                Date of Certification Exam
+              <label htmlFor="licenseNumber" className={styles.inputTitle}>
+                Certified/Registered/License Number
                 <input
                   className={styles.inputText}
                   type="text"
-                  name="dateOfExam"
-                  placeholder="mm/dd/yyyy"
-                  id="dateOfExam"
-                  pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
-                  value={formData.dateOfExam}
+                  name="licenseNumber"
+                  id="licenseNumber"
+                  value={formData.licenseNumber}
                   onChange={handleInputChange}
+                  placeholder="Enter Certified/Registered/License Number"
                 />
               </label>
             </div>
-
             <div className={styles.inputBox}>
               <label htmlFor="extraExplanation" className={styles.inputTitle}>
-                If yes, please explain
+                If yes, please explain here
                 <input
                   className={styles.inputText}
                   type="text"
@@ -183,6 +147,21 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
                 />
               </label>
             </div>
+            <div className={styles.inputBox}>
+              <label htmlFor="dateCertifiedExpires" className={styles.inputTitle}>
+                Date Certified/Registered/License Expires
+                <input
+                  className={styles.inputText}
+                  type="text"
+                  name="dateCertifiedExpires"
+                  id="dateCertifiedExpires"
+                  value={formData.dateCertifiedExpires}
+                  onChange={handleInputChange}
+                  pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
+                  placeholder="Enter Date Certified/Registered/License Expires"
+                />
+              </label>
+            </div>
           </div>
         </div>
 
@@ -237,10 +216,57 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
           </p>
 
           <button className={styles.upload}>
-            Upload Proof of National Exam
+            Upload Signed Code of Ethics
             <img src={upload} className={styles.uploadButton} alt="buttonpng" />
           </button>
         </div>
+        <hr />
+        <div className={styles.formSection}>
+          <div className={styles.titleContainer}>
+            <h2 className={styles.sectionTitle}>
+              Payment Information<span className={styles.boldRed}>*</span>
+            </h2>
+          </div>
+
+          <p className={styles.note}>
+            After submitting your application, you will be navigated to pay via{" "}
+            <b className={styles.boldRed}>credit card</b> through the Payment Portal <br />
+            <u>Please Note:</u> In the required “Invoice” field, please enter: IDEX - Candidates
+            Name
+          </p>
+
+          <p className={styles.note}>
+            To <b className={styles.boldRed}>mail checks</b>, please send them to: CCIDC, Inc. - 365
+            W. Second Ave, Suite 221, Escondido, CA 92025
+          </p>
+
+          <p className={styles.boldRed}>
+            Total Fees due with application (Includes Application Fee + IDEX Exam Fee + Testing
+            Center Fee)**: <b className={styles.boldRed}>$700 Total*</b>
+          </p>
+
+          <p className={styles.note}>
+            <span className={styles.boldRed}>*</span>Fee is nonrefundable
+            <br />
+            <span className={styles.boldRed}>**</span>Application fees must be submitted with
+            application.
+          </p>
+
+          <label htmlFor="select" className={styles.checkboxLabel}>
+            <input
+              className={styles.select}
+              name="readRules"
+              type="checkbox"
+              id="select"
+              onChange={handleInputChange}
+              checked={formData.readRules}
+              required
+            />
+            <span>
+              Click here to acknowledge you have read the information on how to pay for your pathway{" "}
+            </span>
+          </label>
+        </div>
         <hr className={styles.bottomLine} />
       </form>
     </>