Merge pull request #2632 from beckn/feat/login-functionality

feat(open-spark): added UI signIn, signUp functionality

apps/open-spark/components/header/constants/index.ts

@@ -1,10 +1,10 @@
 type PathnameObjectType = Record<string, string>
 
 // -------------------------------- 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 {

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<SignInFormProps>(initialFormData)
   const [formErrors, setFormErrors] = useState<FormErrors>({ 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<HTMLInputElement>) => {
     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'

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()

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))

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 (
     <Box>
       <Flex
@@ -39,13 +50,13 @@ const welcome = () => {
         <BecknButton
           dataTest={'consumer_button'}
           children="I am a Consumer"
-          handleClick={() => router.push('/consumer')}
+          handleClick={() => handleClick('consumer')}
           variant="solid"
         />
         <BecknButton
           dataTest={'producer_button'}
           children="I am a Producer"
-          handleClick={() => router.push('/producer')}
+          handleClick={() => handleClick('producer')}
           variant="outline"
         />
       </Flex>

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