Add coachmark (Welcome Wagon) (#732)

* Add coachmark when no plan is selected * Remove unneeded comment * Transfer courses only render when a plan is selected
sandboxnu · Apr 10, 2024 · 1e31164 · 1e31164
1 parent ba03edc
commit 1e31164
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/packages/frontend/components/Plan/AddPlanModal.tsx b/packages/frontend/components/Plan/AddPlanModal.tsx
@@ -14,6 +14,7 @@ import {
   ModalOverlay,
   VStack,
   useDisclosure,
+  Tooltip,
 } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
 import {
@@ -48,10 +49,12 @@ import { getLocalPlansLength } from "../../utils/plan/getLocalPlansLength";
 
 interface AddPlanModalProps {
   setSelectedPlanId: Dispatch<SetStateAction<number | undefined | null>>;
+  selectedPlanId: number | undefined | null;
 }
 
 export const AddPlanModal: React.FC<AddPlanModalProps> = ({
   setSelectedPlanId,
+  selectedPlanId,
 }) => {
   const router = useRouter();
   const { onOpen, onClose: onCloseDisplay, isOpen } = useDisclosure();
@@ -178,6 +181,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
   );
 
   const disableButton = isGuest && getLocalPlansLength() > 4;
+  const showCoachMark = !selectedPlanId && !isOpen;
 
   return (
     <>
@@ -186,15 +190,26 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
         shouldWrapChildren
         isDisabled={!disableButton}
       >
-        <BlueButton
-          leftIcon={<AddIcon />}
-          onClick={onOpen}
-          ml="xs"
-          size="md"
-          disabled={disableButton}
+        <Tooltip
+          shouldWrapChildren
+          label="Click here to start!"
+          hasArrow
+          fontSize="md"
+          borderRadius="sm"
+          shadow="lg"
+          isDisabled
+          isOpen={showCoachMark}
         >
-          New Plan
-        </BlueButton>
+          <BlueButton
+            leftIcon={<AddIcon />}
+            onClick={onOpen}
+            ml="xs"
+            size="md"
+            disabled={disableButton}
+          >
+            New Plan
+          </BlueButton>
+        </Tooltip>
       </GraduateToolTip>
       <Modal isOpen={isOpen} onClose={() => onCloseAddPlanModal()} size="md">
         <ModalOverlay />

diff --git a/packages/frontend/pages/home.tsx b/packages/frontend/pages/home.tsx
@@ -277,7 +277,10 @@ const HomePage: NextPage = () => {
                 setSelectedPlanId={setSelectedPlanId}
                 plans={student.plans}
               />
-              <AddPlanModal setSelectedPlanId={setSelectedPlanId} />
+              <AddPlanModal
+                setSelectedPlanId={setSelectedPlanId}
+                selectedPlanId={selectedPlanId}
+              />
               {selectedPlan && <EditPlanModal plan={selectedPlan} />}
               {selectedPlan && (
                 <DuplicatePlanButton
@@ -303,14 +306,14 @@ const HomePage: NextPage = () => {
                   setIsRemove={setIsRemove}
                 />
                 <Divider borderColor="neutral.200" borderWidth={1} />
+                <TransferCourses
+                  isExpanded={isTransferCoursesExpanded}
+                  toggleExpanded={() =>
+                    setIsTransferCoursesExpanded(!isTransferCoursesExpanded)
+                  }
+                />
               </>
             )}
-            <TransferCourses
-              isExpanded={isTransferCoursesExpanded}
-              toggleExpanded={() =>
-                setIsTransferCoursesExpanded(!isTransferCoursesExpanded)
-              }
-            />
           </Flex>
         </Box>
       </PageLayout>