start onboarding after checking in

src/components/common/LinkButton/index.tsx

@@ -9,10 +9,18 @@ interface IProps {
   destructive?: boolean;
   href: URL;
   size?: 'default' | 'small';
+  onClick?: () => void;
 }
 
 const LinkButton = (props: PropsWithChildren<IProps>) => {
-  const { variant = 'primary', destructive = false, href, size = 'default', children } = props;
+  const {
+    variant = 'primary',
+    destructive = false,
+    href,
+    size = 'default',
+    onClick,
+    children,
+  } = props;
 
   return (
     <Link
@@ -21,6 +29,7 @@ const LinkButton = (props: PropsWithChildren<IProps>) => {
       data-destructive={destructive}
       data-size={size}
       href={href}
+      onClick={onClick}
     >
       <Typography variant="h5/medium" component="span">
         {children}

src/components/layout/Navbar/index.tsx

@@ -49,7 +49,7 @@ const Navbar = ({ accessType, quiet }: NavbarProps) => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
 
-  if (!accessType) {
+  if (!accessType || quiet) {
     return (
       <header className={styles.header}>
         <div className={`${styles.content} ${quiet ? styles.quiet : ''}`}>

src/components/onboarding/OnboardingScreen/index.tsx

@@ -110,12 +110,12 @@ const OnboardingScreen = ({ user, onDismiss, onFinish }: OnboardingScreenProps)
         >
           {step > 0 ? 'Back' : 'Maybe later'}
         </Button>
-        {!onFinish && step === steps.length - 1 ? (
-          <LinkButton href={config.profile.editRoute}>Finish</LinkButton>
+        {step === steps.length - 1 ? (
+          <LinkButton href={config.profile.editRoute} onClick={onFinish}>
+            Set up
+          </LinkButton>
         ) : (
-          <Button onClick={step < steps.length - 1 ? () => setStep(step => step + 1) : onFinish}>
-            {step < steps.length - 1 ? 'Next' : 'Finish'}
-          </Button>
+          <Button onClick={() => setStep(step => step + 1)}>Next</Button>
         )}
       </div>
     </div>

src/lib/config.ts

@@ -131,6 +131,7 @@ const config = {
     MAX_COLLECTION_PHOTO_SIZE_KB: 1024,
     MAX_RESUME_SIZE_KB: isDevelopment ? 256 : 2048,
   },
+  tempLocalOnboardingKey: 'onboarding',
 };
 
 export default config;

src/pages/index.tsx

@@ -13,6 +13,7 @@ import WavesGraphic from '@/public/assets/graphics/portal/waves.svg';
 import CheckMark from '@/public/assets/icons/check-mark.svg';
 import styles from '@/styles/pages/Home.module.scss';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 interface HomePageProps {
@@ -41,6 +42,7 @@ const PortalHomePage = ({
   attendances,
   checkInResponse,
 }: HomePageProps) => {
+  const router = useRouter();
   const [points, setPoints] = useState<number>(user.points);
   const [checkinEvent, setCheckinEvent] = useState<PublicEvent | undefined>(undefined);
   const [checkinModalVisible, setCheckinModalVisible] = useState<boolean>(false);
@@ -91,7 +93,19 @@ const PortalHomePage = ({
       <CheckInModal
         open={checkinModalVisible}
         event={checkinEvent}
-        onClose={() => setCheckinModalVisible(false)}
+        onClose={() => {
+          setCheckinModalVisible(false);
+
+          // Start onboarding after checking in
+          // TEMP: This should be saved server-side in the future
+          const onboardingState = localStorage.getItem(config.tempLocalOnboardingKey);
+          if (onboardingState === 'onboarded') {
+            return;
+          }
+          router.push(
+            `${config.onboardRoute}?${new URLSearchParams({ destination: config.homeRoute })}`
+          );
+        }}
       />
 
       <div className={styles.hero}>

src/pages/onboard.tsx

@@ -21,7 +21,13 @@ const OnboardPage: NextPage<OnboardProps> = ({ user, destination }) => {
 
   return (
     <div style={{ minHeight: 'calc(100vh - 8.25rem)', display: 'flex', flexDirection: 'column' }}>
-      <OnboardingScreen user={user} onDismiss={handleExit} />
+      <OnboardingScreen
+        user={user}
+        onDismiss={handleExit}
+        onFinish={() => {
+          localStorage.setItem(config.tempLocalOnboardingKey, 'onboarded');
+        }}
+      />
     </div>
   );
 };