diff --git a/apps/open-spark/components/header/constants/index.ts b/apps/open-spark/components/header/constants/index.ts index b74dbc50c..af9698fcc 100644 --- a/apps/open-spark/components/header/constants/index.ts +++ b/apps/open-spark/components/header/constants/index.ts @@ -1,10 +1,10 @@ type PathnameObjectType = Record // -------------------------------- Top Header constants -------------------------------- -const appLogoBlackList = ['/signIn', '/signUp'] -const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp'] +const appLogoBlackList = ['/signIn', '/signUp', '/welcome'] +const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/welcome'] const menuIconWhiteList = ['/', '/profile', '/myRides'] -const topHeaderBlackList: string[] = [] +const topHeaderBlackList: string[] = ['/welcome'] const languageIconWhiteList: string[] = [] // -------------------------------- Sub Header constants -------------------------------- @@ -24,9 +24,9 @@ const headerFrenchNames: PathnameObjectType = { '/paymentMode': 'Sélectionner la Méthode de Paiement' } -const headerBlackList = ['/myRides', '/', '/paymentMode', '/profile', '/signIn', '/signUp'] +const headerBlackList = ['/myRides', '/', '/paymentMode', '/profile', '/signIn', '/signUp', '/welcome'] -const bottomHeaderBlackList = ['/orderConfirmation', '/', '/feedback'] +const bottomHeaderBlackList = ['/orderConfirmation', '/', '/feedback', '/welcome'] const orderIconList = ['/orderDetails'] export default { diff --git a/apps/open-spark/components/signIn/SignIn.tsx b/apps/open-spark/components/signIn/SignIn.tsx index 34a755eac..73e2d66c6 100644 --- a/apps/open-spark/components/signIn/SignIn.tsx +++ b/apps/open-spark/components/signIn/SignIn.tsx @@ -7,13 +7,18 @@ import { useLanguage } from '@hooks/useLanguage' import { Box } from '@chakra-ui/react' import Router from 'next/router' import { useBapTradeLoginMutation, useBppTradeLoginMutation } from '@services/UserService' +import { useDispatch, useSelector } from 'react-redux' +import { AuthRootState, setRole } from '@store/auth-slice' const SignIn = ({ initialFormData = { email: '', password: '' } }) => { const [formData, setFormData] = useState(initialFormData) const [formErrors, setFormErrors] = useState({ email: '', password: '' }) + + const { role } = useSelector((state: AuthRootState) => state.auth) const [bapLogin, { isLoading: bapLoading }] = useBapTradeLoginMutation() const [bppLogin, { isLoading: bppLoading }] = useBppTradeLoginMutation() const { t } = useLanguage() + const dispatch = useDispatch() const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target @@ -59,8 +64,8 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => { Router.push('/signUp') } - const handleProducer = () => { - Router.push('/producerLogin') + const handleOnRoleChange = (roleType: 'producer' | 'consumer') => { + dispatch(setRole({ role: roleType })) } return ( @@ -112,8 +117,8 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => { ], socialButtons: [ { - text: 'Sign In as Producer', - handleClick: handleProducer, + text: role === 'consumer' ? 'Sign In as Producer' : 'Sign In as Consumer', + handleClick: () => handleOnRoleChange(role === 'consumer' ? 'producer' : 'consumer'), variant: 'outline', colorScheme: 'primary', dataTest: 'producer-button' diff --git a/apps/open-spark/components/signUp/signUp.tsx b/apps/open-spark/components/signUp/signUp.tsx index d389e90d7..35f171ffa 100644 --- a/apps/open-spark/components/signUp/signUp.tsx +++ b/apps/open-spark/components/signUp/signUp.tsx @@ -9,6 +9,8 @@ import openSpark from '@public/images/openSparkLogo.svg' import { useLanguage } from '@hooks/useLanguage' import { CustomFormErrorProps, signUpValidateForm } from '@utils/form-utils' import { accountType } from '@utils/auth' +import { AuthRootState } from '@store/auth-slice' +import { useSelector } from 'react-redux' interface RegisterFormProps extends SignUpFormProps { utilityCompany: string @@ -35,6 +37,7 @@ const SignUp = () => { }) const breakpoint = useBreakpoint() + const { role } = useSelector((state: AuthRootState) => state.auth) const [bapTradeRegister, { isLoading: bapLoading }] = useBapTradeRegisterMutation() const [bppTradeRegister, { isLoading: bppLoading }] = useBppTradeRegisterMutation() const { t } = useLanguage() diff --git a/apps/open-spark/middleware.ts b/apps/open-spark/middleware.ts index 1c0940fa1..3731193cc 100644 --- a/apps/open-spark/middleware.ts +++ b/apps/open-spark/middleware.ts @@ -4,13 +4,21 @@ import { NextRequest, NextResponse } from 'next/server' export default function middleware(req: NextRequest) { const loggedin = req.cookies.get('authToken') + const role = req.cookies.get('roleSelected') const { pathname } = req.nextUrl - if (loggedin && (pathname === '/signIn' || pathname === '/signUp')) { + if (role && loggedin && (pathname === '/signIn' || pathname === '/signUp')) { return NextResponse.redirect(new URL('/', req.url)) } - if (!loggedin && pathname !== '/signIn' && pathname !== '/signUp') { + if (!role && !loggedin && pathname !== '/welcome') { + const signInRoute = '/welcome' + + return NextResponse.redirect(new URL(signInRoute, req.url)) + } + + // currently not allowed to nav /welcome page once role selected, pathname !== '/welcome' + if (role && !loggedin && pathname !== '/signIn' && pathname !== '/signUp') { const signInRoute = '/signIn' return NextResponse.redirect(new URL(signInRoute, req.url)) diff --git a/apps/open-spark/pages/welcome.tsx b/apps/open-spark/pages/welcome.tsx index 60bd92543..83dbca2f4 100644 --- a/apps/open-spark/pages/welcome.tsx +++ b/apps/open-spark/pages/welcome.tsx @@ -1,11 +1,22 @@ import BecknButton from '@beckn-ui/molecules/src/components/button' import { Box, Flex, Image, Text } from '@chakra-ui/react' +import { setRole } from '@store/auth-slice' +import Cookies from 'js-cookie' import { useRouter } from 'next/router' import React from 'react' +import { useDispatch } from 'react-redux' import welcomeLogo from '../public/images/welcome.svg' const welcome = () => { const router = useRouter() + const dispatch = useDispatch() + + const handleClick = (role: 'consumer' | 'producer') => { + router.push(`/signIn`) + dispatch(setRole({ role })) + Cookies.set('roleSelected', 'yes') + } + return ( { router.push('/consumer')} + handleClick={() => handleClick('consumer')} variant="solid" /> router.push('/producer')} + handleClick={() => handleClick('producer')} variant="outline" /> diff --git a/apps/open-spark/store/auth-slice.ts b/apps/open-spark/store/auth-slice.ts index ca926b78b..985ec1b21 100644 --- a/apps/open-spark/store/auth-slice.ts +++ b/apps/open-spark/store/auth-slice.ts @@ -8,6 +8,7 @@ interface AuthState { user: null | User jwt: string | null isAuthenticated: boolean + role: string | null } export interface AuthRootState { @@ -17,7 +18,8 @@ export interface AuthRootState { const initialState: AuthState = { user: null, jwt: null, - isAuthenticated: false + isAuthenticated: false, + role: null } const slice = createSlice({ @@ -32,6 +34,9 @@ const slice = createSlice({ setCredentials: (state, { payload: { user, jwt } }: PayloadAction<{ user: User; jwt: string }>) => { state.user = user state.jwt = jwt + }, + setRole: (state, action: PayloadAction<{ role: string }>) => { + state.role = action.payload.role } }, extraReducers: builder => { @@ -64,5 +69,5 @@ const slice = createSlice({ } }) -export const { logout, setCredentials } = slice.actions +export const { logout, setCredentials, setRole } = slice.actions export default slice.reducer