From e4d12f796bb942c5bec095109e4c6a33c1ecef72 Mon Sep 17 00:00:00 2001
From: leo3friedman <73138942+leo3friedman@users.noreply.github.com>
Date: Sun, 2 Jun 2024 21:37:44 -0700
Subject: [PATCH 1/2] remove search from header, hook cart icon up to payments

---
 frontend/src/components/NavBar.tsx | 10 ++++------
 frontend/src/pages/index.ts        | 11 +----------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index 453fc68..575b02a 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -3,7 +3,6 @@ import { NavLink } from "react-router-dom";
 
 import cartIcon from "../assets/cart.svg";
 import logo from "../assets/logo.svg";
-import searchIcon from "../assets/search.svg";
 import { AuthContext } from "../contexts/AuthContext.tsx";
 
 import styles from "./NavBar.module.css";
@@ -17,6 +16,7 @@ export function NavBar() {
     resources: "https://ccidc.org/", // resources nav item on ccidc.org does not have link address
     contactUs: "https://ccidc.org/contact-ccidc/",
     login: "https://ccidc.org/wp-login.php",
+    payment: "https://ccidc.org/product-category/idex/",
   };
 
   const { isLoggedIn, logout } = useContext(AuthContext);
@@ -65,14 +65,12 @@ export function NavBar() {
           </li>
           {isLoggedIn && (
             <li>
-              <img src={cartIcon} className={styles.navIcon} alt="shop"></img>
+              <a href={destinations.payment}>
+                <img src={cartIcon} className={styles.navIcon} alt="shop"></img>
+              </a>
             </li>
           )}
 
-          <li>
-            <img src={searchIcon} className={styles.navIcon} alt="search"></img>
-          </li>
-
           <li>
             {isLoggedIn ? (
               <button className={styles.logInOutButton} onClick={() => void logout()}>
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index bb0d988..aa4ab4f 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -2,15 +2,6 @@ import { Application } from "./Application.tsx";
 import { Candidates } from "./Candidates.tsx";
 import { Login } from "./Login.tsx";
 import { PrescreeningForm } from "./PrescreeningForm.tsx";
-import { TestCongratulations } from "./TestCongratulations.tsx";
 import { TestModals } from "./TestModals.tsx";
 import { ThankyouForApplying } from "./ThankyouForApplying.tsx";
-export {
-  Application,
-  Candidates,
-  TestCongratulations,
-  ThankyouForApplying,
-  PrescreeningForm,
-  Login,
-  TestModals,
-};
+export { Application, Candidates, ThankyouForApplying, PrescreeningForm, Login, TestModals };

From 91a965e2a8859badabf403f69f57d90a7b8653fd Mon Sep 17 00:00:00 2001
From: leo3friedman <73138942+leo3friedman@users.noreply.github.com>
Date: Mon, 3 Jun 2024 12:12:34 -0700
Subject: [PATCH 2/2] update timeline to remove payment spot

---
 .../src/assets/timelinePointCompleted.svg     | 13 ++++-
 .../src/assets/timelinePointInProgress.svg    | 13 ++++-
 .../src/assets/timelinePointUncompleted.svg   |  4 +-
 .../src/components/PathwayTimeline.module.css | 57 +++++++------------
 frontend/src/components/PathwayTimeline.tsx   |  9 +--
 frontend/src/pages/Application.tsx            | 14 ++---
 6 files changed, 52 insertions(+), 58 deletions(-)

diff --git a/frontend/src/assets/timelinePointCompleted.svg b/frontend/src/assets/timelinePointCompleted.svg
index 0f7f6ff..01f9544 100644
--- a/frontend/src/assets/timelinePointCompleted.svg
+++ b/frontend/src/assets/timelinePointCompleted.svg
@@ -1,4 +1,11 @@
-<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="15.3828" r="15" fill="#AD281F"/>
-<path d="M20.2375 8.73586C20.5948 8.31473 21.2259 8.26301 21.647 8.62032C22.0357 8.95015 22.1097 9.51322 21.8377 9.92912L21.7625 10.0298L12.4292 21.0298C12.0795 21.442 11.4727 21.497 11.0563 21.1751L10.9638 21.0941L7.29712 17.4709C6.90428 17.0828 6.9005 16.4496 7.28869 16.0568C7.64702 15.6941 8.21407 15.663 8.60818 15.9657L8.70288 16.0483L11.602 18.9128L20.2375 8.73586Z" fill="#EBEBEB"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_12)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#AD281F"/>
+<path d="M21.5867 9.96444C21.9678 9.52972 22.641 9.47633 23.0901 9.84517C23.5048 10.1856 23.5837 10.7669 23.2936 11.1962L23.2133 11.3001L13.2578 22.655C12.8848 23.0805 12.2376 23.1372 11.7934 22.8049L11.6947 22.7213L7.7836 18.9813C7.36457 18.5806 7.36054 17.927 7.77461 17.5215C8.15683 17.1471 8.76168 17.115 9.18207 17.4275L9.28308 17.5128L12.3755 20.4697L21.5867 9.96444Z" fill="#EBEBEB"/>
+</g>
+<defs>
+<clipPath id="clip0_1_12">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/frontend/src/assets/timelinePointInProgress.svg b/frontend/src/assets/timelinePointInProgress.svg
index e3de0d9..a6211da 100644
--- a/frontend/src/assets/timelinePointInProgress.svg
+++ b/frontend/src/assets/timelinePointInProgress.svg
@@ -1,4 +1,11 @@
-<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="15.3828" r="15" fill="#AD281F"/>
-<circle cx="15" cy="15.3828" r="7" fill="white"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_9)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#AD281F"/>
+<path d="M16 23.4667C20.1237 23.4667 23.4667 20.1237 23.4667 16C23.4667 11.8763 20.1237 8.53333 16 8.53333C11.8763 8.53333 8.53333 11.8763 8.53333 16C8.53333 20.1237 11.8763 23.4667 16 23.4667Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_9">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/frontend/src/assets/timelinePointUncompleted.svg b/frontend/src/assets/timelinePointUncompleted.svg
index e3c062b..b17c421 100644
--- a/frontend/src/assets/timelinePointUncompleted.svg
+++ b/frontend/src/assets/timelinePointUncompleted.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="10" cy="10.3828" r="9.5" fill="white" stroke="#AD281F"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" fill="white" stroke="#AD281F"/>
 </svg>
diff --git a/frontend/src/components/PathwayTimeline.module.css b/frontend/src/components/PathwayTimeline.module.css
index 079e11c..e7d04d2 100644
--- a/frontend/src/components/PathwayTimeline.module.css
+++ b/frontend/src/components/PathwayTimeline.module.css
@@ -1,12 +1,8 @@
-:root {
-  --timeline-width: 830px;
-}
-
 .pathwayContainer {
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  padding: 2rem;
+  padding: 2rem 10rem;
   box-shadow: 0px 4px 4px 0px #00000040;
   background-color: white;
 }
@@ -28,34 +24,37 @@
 .timelineContainer {
   display: flex;
   justify-content: center;
-  margin-left: 10em;
-  margin-right: 10em;
+  padding: 2rem;
 }
 
 .timeline {
   display: flex;
   position: relative;
   justify-content: space-between;
-  width: var(--timeline-width);
-  min-width: var(--timeline-width);
-  overflow: hidden;
+  width: 100%;
 }
+
 .timelinePoint {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   z-index: 5;
+  width: 1px;
 }
 .timelinePointIcon {
   display: flex;
   justify-content: center;
-  width: 30px;
-  aspect-ratio: 1/1;
+  width: 32px;
+  height: 32px;
+  overflow: visible;
 }
-.timelinePointIcon img.uncompleted {
-  width: 20px;
+
+.timelinePointIcon img {
+  width: 32px;
+  height: 32px;
 }
+
 .timelinePointDescription {
   text-align: center;
   max-width: 9rem;
@@ -73,31 +72,19 @@
   position: absolute;
   margin: 0;
   padding: 0;
-  width: 700px;
-  top: 14px;
-  left: 64px;
+  width: 100%;
+  top: 15px;
   border: solid 2px var(--color-ccidc-red);
 }
 
-@media screen and (max-width: 1000px) {
-  :root {
-    --timeline-width: 100%;
-  }
-
-  .timelineContainer {
-    justify-content: flex-start;
-    margin-left: 0;
-    margin-right: 0;
-    overflow-x: auto;
-  }
-
-  .timeline {
-    justify-content: flex-start;
-    width: auto;
-    min-width: auto;
+@media screen and (max-width: 1300px) {
+  .pathwayContainer {
+    padding: 2rem 5rem;
   }
+}
 
-  .timelineLine {
-    width: 525px;
+@media screen and (max-width: 950px) {
+  .pathwayContainer {
+    padding: 2rem 2.5rem;
   }
 }
diff --git a/frontend/src/components/PathwayTimeline.tsx b/frontend/src/components/PathwayTimeline.tsx
index 7f635f5..e260730 100644
--- a/frontend/src/components/PathwayTimeline.tsx
+++ b/frontend/src/components/PathwayTimeline.tsx
@@ -9,7 +9,7 @@ import styles from "./PathwayTimeline.module.css";
 type TimelinePointProps = {
   completed: boolean;
   inProgress: boolean;
-  children: string;
+  children: React.ReactNode;
 };
 function TimelinePoint(props: TimelinePointProps) {
   const { completed, inProgress, children } = props;
@@ -39,7 +39,7 @@ function TimelinePoint(props: TimelinePointProps) {
   );
 }
 
-type PathwayProps = { path: 1 | 2 | 3 | 4; progress: 0 | 1 | 2 | 3 | 4 | 5 };
+type PathwayProps = { path: 1 | 2 | 3 | 4; progress: 0 | 1 | 2 | 3 | 4 };
 export function PathwayTimeline(props: PathwayProps) {
   const { path, progress } = props;
 
@@ -47,7 +47,7 @@ export function PathwayTimeline(props: PathwayProps) {
     <div className={styles.pathwayContainer}>
       <h2 className={styles.timelineHeader}>Path {path} Application</h2>
       <p className={styles.timelineDescription}>
-        You must complete all 5 steps in order for your application to be reviewed and to qualify
+        You must complete all 4 steps in order for your application to be reviewed and to qualify
         for examination.
       </p>
 
@@ -65,9 +65,6 @@ export function PathwayTimeline(props: PathwayProps) {
           <TimelinePoint completed={progress > 3} inProgress={progress === 3}>
             Additional Information
           </TimelinePoint>
-          <TimelinePoint completed={progress > 4} inProgress={progress === 4}>
-            Payment Information
-          </TimelinePoint>
           <hr className={styles.timelineLine} />
         </div>
       </div>
diff --git a/frontend/src/pages/Application.tsx b/frontend/src/pages/Application.tsx
index 707fba5..1f64c99 100644
--- a/frontend/src/pages/Application.tsx
+++ b/frontend/src/pages/Application.tsx
@@ -20,7 +20,7 @@ export type ApplicationProps = {
 };
 
 export const Application: React.FC<ApplicationProps> = ({ path }: ApplicationProps) => {
-  const [pageNum, setPageNum] = useState<0 | 1 | 2 | 3 | 4 | 5>(0);
+  const [pageNum, setPageNum] = useState<0 | 1 | 2 | 3 | 4>(0);
   const { isLoggedIn, isLoading } = useContext(AuthContext);
   const navigate = useNavigate();
 
@@ -34,23 +34,19 @@ export const Application: React.FC<ApplicationProps> = ({ path }: ApplicationPro
   const [confirmSubmissionModalOpen, setConfirmSubmissionModalOpen] = useState(false);
 
   const next = () => {
-    if (pageNum < 5) {
-      setPageNum((newPageNum) => (newPageNum + 1) as 0 | 1 | 2 | 3 | 4 | 5);
+    if (pageNum < 4) {
+      setPageNum((newPageNum) => (newPageNum + 1) as 0 | 1 | 2 | 3 | 4);
       window.scrollTo({ top: 0, behavior: "instant" });
     }
 
-    if (pageNum === 5) {
-      setConfirmSubmissionModalOpen(true);
-    }
-
-    if (pageNum === 5) {
+    if (pageNum === 4) {
       setConfirmSubmissionModalOpen(true);
     }
   };
 
   const back = () => {
     if (pageNum > 0) {
-      setPageNum((newPageNum) => (newPageNum - 1) as 0 | 1 | 2 | 3 | 4 | 5);
+      setPageNum((newPageNum) => (newPageNum - 1) as 0 | 1 | 2 | 3 | 4);
     }
   };