Feature/leo3friedman/update timeline

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()}>

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;
   }
 }

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,15 +39,15 @@ 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;
 
   return (
     <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>

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);
     }
   };
 

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 };