add: signup-membership state

f-lab-edu · Jan 27, 2025 · cd75d80 · cd75d80
1 parent e852475
commit cd75d80
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/components/pages/Signup/platform.tsx b/src/components/pages/Signup/platform.tsx
@@ -1,10 +1,13 @@
 import type { NextPageWithLayout } from '@/pages/_app';
+import { useAtom } from 'jotai';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import SignupLayout from '@/components/layout/SignupLayout';
 import ConditionalRender from '@/components/ui/utils/ConditionalRender';
+import useJWTs from '@/hooks/account/useJWTs';
 import useWindowResize from '@/hooks/useWindowResize';
+import { signupMembershipTier } from '@/state/Signup';
 import StepHeader from './component/StepHeader';
 import PlatformDetailLarge from './component/platform/PlatfomDetailLarge';
 import PlatformDetailSlim from './component/platform/PlatfomDetailSlim';
@@ -14,6 +17,8 @@ import { SignupPlatformContentCss, SignupPlatformContentLargeCss } from './style
 const PlatformPage: NextPageWithLayout = () => {
   const { t } = useTranslation(['page-signup'])
 
+  const { hasLogin } = useJWTs()
+  const [, setMembershipTier] = useAtom(signupMembershipTier)
   // on resize display width > over 1050px change contents as full width mode
   const {
     isLarge
@@ -24,9 +29,13 @@ const PlatformPage: NextPageWithLayout = () => {
   useEffect(() => {
     setIsClient(true)
   }, [])
+
+  const goNextAction = () => {
+    setMembershipTier(selectedType)
+  }
   return <>
     <div css={[SignupPlatformContentCss, isLarge ? SignupPlatformContentLargeCss : {}]}>
-      <StepHeader css={{ marginBottom: '.5rem' }} step={1} title={t('page-signup:platform.title')} />
+      <StepHeader css={{ marginBottom: '.5rem' }} step={2} title={t('page-signup:platform.title')} />
       <ConditionalRender.Boolean
         condition={isClient}
         render={{
@@ -41,7 +50,7 @@ const PlatformPage: NextPageWithLayout = () => {
       />
     </div>
     <div css={[SignupMainContentCss, { marginTop: '24px' }]}>
-      <Link css={SignupMainNextButtonCss} href="/signup/registration">
+      <Link css={SignupMainNextButtonCss} href={hasLogin ? '/signup/payment/regist/' : '/signup/registration'} onClick={goNextAction}>
         Next
       </Link>
     </div>

diff --git a/src/components/pages/Signup/registration.tsx b/src/components/pages/Signup/registration.tsx
@@ -12,7 +12,7 @@ const RegistrationPage: NextPageWithLayout = () => {
     <div css={SignupMainContentCss}>
       <div css={[RegistrationLogoImageCss, StepLogoPositionCss]}>
       </div>
-      <StepHeader title={t('page-signup:registration.title')} step={3} />
+      <StepHeader title={t('page-signup:registration.title')} step={2} />
       <div>{t('page-signup:registration.desc')}</div>
     </div>
     <div css={[SignupMainContentCss, { marginTop: '24px' }]}>

diff --git a/src/lib/network/utils.ts b/src/lib/network/utils.ts
@@ -3,4 +3,6 @@ export const REFRESH_TOKEN_KEY = 'refresh-token'
 
 export const SIGNIN_EMAIL_OR_PHONE = 'signin-emailOrPhone'
 
-export const SIGNIN_CURRENT_PROFILE = 'profile-current-position'
+export const SIGNIN_CURRENT_PROFILE = 'profile-current-position'
+
+export const SIGNUP_MEMBERSHIP_TIER = 'signup-membership-tier'
diff --git a/src/state/Signup.ts b/src/state/Signup.ts
@@ -0,0 +1,5 @@
+import { atomWithStorage } from 'jotai/utils';
+import { SIGNUP_MEMBERSHIP_TIER } from '@/lib/network/utils';
+import { JotaiSessionStorage } from './util/Storage';
+
+export const signupMembershipTier = atomWithStorage(SIGNUP_MEMBERSHIP_TIER, undefined, JotaiSessionStorage<MembershipPlanTier | undefined>())