Add back button to PDP onboarding

Allow exiting the degree plan onboarding flow back to the most recent plan when degree plans already exist.

Made-with: Cursor

Author: ronitkapoor0106

frontend/degree-plan/components/FourYearPlanPage.tsx

@@ -220,6 +220,7 @@ const FourYearPlanPage = ({ updateUser, user }: FourYearPlanPageProps) => {
                   <OnboardingPage
                     setShowOnboardingModal={setShowOnboardingModal}
                     setActiveDegreeplan={setActiveDegreeplan}
+                    canExit={!!degreeplans?.length}
                   />
                 ) : (
                   <Row>

frontend/degree-plan/components/OnboardingPanels/CreateWithTranscriptPanel.tsx

@@ -51,6 +51,8 @@ type WelcomeLayoutProps = {
   inputtedSchools: SchoolOption[];
   inputtedMajors: MajorOption[];
   setShowOnboardingModal: (arg0: boolean) => void;
+  canExit?: boolean;
+  onExit?: () => void;
 };
 
 export default function CreateWithTranscriptPanel({
@@ -62,6 +64,8 @@ export default function CreateWithTranscriptPanel({
   inputtedSchools,
   inputtedMajors,
   setShowOnboardingModal,
+  canExit = false,
+  onExit,
 }: WelcomeLayoutProps) {
   const [startingYear, setStartingYear] = useState<{
     label: any;
@@ -211,15 +215,31 @@ export default function CreateWithTranscriptPanel({
   return (
     <CenteredFlexContainer>
       <PanelContainer $maxWidth="90%" $minWidth="90%">
-        <TextButton
-          onClick={() => {
-            setCurrentPage(0);
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginLeft: "5%",
+            marginRight: "5%",
+            marginTop: "3%",
           }}
-          style={{ marginLeft: "5%", marginTop: "3%" }}
         >
-          <ArrowLeftIcon />
-          <p>Back</p>
-        </TextButton>
+          <TextButton
+            onClick={() => {
+              setCurrentPage(0);
+            }}
+          >
+            <ArrowLeftIcon />
+            <p>Back</p>
+          </TextButton>
+
+          {canExit && onExit && (
+            <TextButton onClick={onExit}>
+              <p>Back to plan</p>
+            </TextButton>
+          )}
+        </div>
         <ColumnsContainer>
           <Column>
             <h1 style={{ paddingTop: "1.25%" }}>Enter your degree(s):</h1>

frontend/degree-plan/components/OnboardingPanels/WelcomePanel.tsx

@@ -1,4 +1,4 @@
-import { ArrowRightIcon, UploadIcon } from "@radix-ui/react-icons";
+import { ArrowLeftIcon, ArrowRightIcon, UploadIcon } from "@radix-ui/react-icons";
 import { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { Document, Page } from "react-pdf";
 import {
@@ -21,6 +21,8 @@ type WelcomeLayoutProps = {
   transcriptDetected: MutableRefObject<boolean | null>;
   startingYear: { label: any; value: number } | null;
   setCurrentPage: Dispatch<SetStateAction<number>>;
+  canExit?: boolean;
+  onExit?: () => void;
 };
 
 export default function WelcomeLayout({
@@ -33,10 +35,25 @@ export default function WelcomeLayout({
   transcriptDetected,
   startingYear,
   setCurrentPage,
+  canExit = false,
+  onExit,
 }: WelcomeLayoutProps) {
   return (
     <CenteredFlexContainer>
       <ChooseContainer $maxWidth="90%" $minWidth="90%">
+        {canExit && onExit && (
+          <TextButton
+            onClick={onExit}
+            style={{
+              position: "absolute",
+              left: "5%",
+              top: "3%",
+            }}
+          >
+            <ArrowLeftIcon />
+            <p>Back</p>
+          </TextButton>
+        )}
         <div style={{ display: "none" }}>
           <Document
             file={PDF}

frontend/degree-plan/pages/OnboardingPage.tsx

@@ -20,9 +20,11 @@ pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/l
 const OnboardingPage = ({
   setShowOnboardingModal,
   setActiveDegreeplan,
+  canExit = false,
 }: {
   setShowOnboardingModal: (arg0: boolean) => void;
   setActiveDegreeplan: (arg0: DegreePlan) => void;
+  canExit?: boolean;
 }) => {
   const [startingYear, setStartingYear] = useState<{
     label: any;
@@ -100,6 +102,12 @@ const OnboardingPage = ({
     setGraduationYear(null);
   };
 
+  const exitOnboarding = () => {
+    resetParser();
+    setCurrentPage(0);
+    setShowOnboardingModal(false);
+  };
+
   if (currentPage === 0)
     return (
       <WelcomeLayout
@@ -112,6 +120,8 @@ const OnboardingPage = ({
         transcriptDetected={transcriptDetected}
         startingYear={startingYear}
         setCurrentPage={setCurrentPage}
+        canExit={canExit}
+        onExit={exitOnboarding}
       />
     );
 
@@ -125,6 +135,8 @@ const OnboardingPage = ({
       inputtedSchools={schools}
       inputtedMajors={majors}
       setShowOnboardingModal={setShowOnboardingModal}
+      canExit={canExit}
+      onExit={exitOnboarding}
     />
   );
 };