feat: improve UX for marathon registration

daodaoedu · Dec 13, 2024 · d7718cd · d7718cd
1 parent 7eac8a0
commit d7718cd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/components/Marathon/Banner/index.jsx b/components/Marathon/Banner/index.jsx
@@ -1,9 +1,10 @@
+import { useRouter } from 'next/navigation';
 import styled from '@emotion/styled';
 import Button from '@/shared/components/Button';
 import groupBannerImg from '@/public/assets/group-banner.png';
 import Image from '@/shared/components/Image';
 import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
-import { useAuthDispatch } from '@/contexts/Auth';
+import { useAuth, useAuthDispatch } from '@/contexts/Auth';
 
 const StyledBanner = styled.div`
   position: relative;
@@ -47,8 +48,18 @@ const StyledBannerContent = styled.div`
 `;
 
 const Banner = () => {
+  const router = useRouter();
+  const { isLoggedIn, isTemporary } = useAuth();
   const { openLoginModal } = useAuthDispatch();
 
+  const handleClick = () => {
+    if (isLoggedIn || isTemporary) {
+      router.push('/learning-marathon/signup');
+    } else {
+      openLoginModal('/learning-marathon/signup');
+    }
+  };
+
   return (
     <StyledBanner>
       <picture>
@@ -64,7 +75,7 @@ const Banner = () => {
         <h1>島島盃 - 學習馬拉松 2025 春季賽</h1>
         <p>註冊並加入我們，立即報名！</p>
         <InfoCompletionGuard>
-          <Button onClick={() => openLoginModal({ redirectUrl: '/learning-marathon/signup' })}>立即報名</Button>
+          <Button onClick={handleClick}>立即報名</Button>
         </InfoCompletionGuard>
       </StyledBannerContent>
     </StyledBanner>

diff --git a/components/Marathon/SignUp/UserProfileForm.jsx b/components/Marathon/SignUp/UserProfileForm.jsx
@@ -116,9 +116,6 @@ export default function UserProfileForm({
   };
 
   useEffect(() => {
-    if (!user._id && (user.userType !== 'no_data')) {
-      router.push('/');
-    }
     if (user._id) {
       Object.entries(user).forEach(([key, value]) => {
         if (key === 'contactList') {

diff --git a/pages/learning-marathon/signup/index.jsx b/pages/learning-marathon/signup/index.jsx
@@ -14,6 +14,7 @@ import SaveBar from '@/components/Marathon/SignUp/SaveBar';
 import UserProfileForm from '@/components/Marathon/SignUp/UserProfileForm';
 import MarathonForm from '@/components/Marathon/SignUp/MarathonForm';
 import ConfirmForm from '@/components/Marathon/SignUp/ConfirmForm';
+import { ProtectedComponent } from '@/contexts/Auth';
 
 const HomePageWrapper = styled.div`
   --section-height: calc(100vh - 80px);
@@ -99,7 +100,7 @@ const LearningMarathonSignUp = () => {
     });
   }, [currentStep]);
   return (
-    <>
+    <ProtectedComponent redirectOnCancel="/learning-marathon" onlyCheckToken>
       <SEOConfig data={SEOData} />
       <SaveBar currentStep={currentStep} />
       <FormWrapper sx={{
@@ -121,7 +122,7 @@ const LearningMarathonSignUp = () => {
           </ContentWrapper>
         </LocalizationProvider>
       </FormWrapper>
-    </>
+    </ProtectedComponent>
   );
 };