Merge pull request #3078 from beckn/feat/issue-3039

feat(open-spark): chnges for enhnc. of single login/register for all …

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

@@ -1,10 +1,10 @@
 type PathnameObjectType = Record<string, string>
 
 // -------------------------------- Top Header constants --------------------------------
-const appLogoBlackList = ['/signIn', '/signUp', '/welcome']
-const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/welcome']
+const appLogoBlackList = ['/signIn', '/signUp']
+const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/OTPVerification']
 const menuIconWhiteList = ['/', '/profile', '/myRides', '/buyingPreference', '/sellingPreference', '/myDers']
-const topHeaderBlackList: string[] = ['/welcome']
+const topHeaderBlackList: string[] = []
 const languageIconWhiteList: string[] = []
 
 // -------------------------------- Sub Header constants --------------------------------
@@ -20,7 +20,8 @@ const headerNames: PathnameObjectType = {
   '/buyingPreference': 'Buying Preferences',
   '/sellingPreference': 'Selling Preferences',
   '/myDers': 'My DERs',
-  '/tradeDetails': 'No. of Units Sold'
+  '/tradeDetails': 'No. of Units Sold',
+  '/OTPVerification': 'Verify Yourself'
 }
 
 const headerFrenchNames: PathnameObjectType = {
@@ -34,16 +35,16 @@ const headerBlackList = [
   '/profile',
   '/signIn',
   '/signUp',
-  '/welcome',
   '/myCredentials',
   '/myTrades',
   '/buyingPreference',
   '/sellingPreference',
   '/myDers',
-  '/tradeDetails'
+  '/tradeDetails',
+  '/OTPVerification'
 ]
 
-const bottomHeaderBlackList = ['/orderConfirmation', '/', '/feedback', '/welcome']
+const bottomHeaderBlackList = ['/orderConfirmation', '/', '/feedback']
 const orderIconList = ['/orderDetails']
 const editIconList: string[] = ['/profile']
 const profileSectionIcon = ['/buyingPreference']

apps/open-spark/components/signIn/SignIn.tsx

@@ -6,7 +6,7 @@ import openSpark from '@public/images/openSparkLogo.svg'
 import { useLanguage } from '@hooks/useLanguage'
 import { Box } from '@chakra-ui/react'
 import Router from 'next/router'
-import { useBapTradeLoginMutation, useBppTradeLoginMutation } from '@services/UserService'
+import { useTradeLoginMutation } from '@services/UserService'
 import { useDispatch, useSelector } from 'react-redux'
 import { AuthRootState, setRole } from '@store/auth-slice'
 import { ROLE } from '@lib/config'
@@ -16,8 +16,7 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
   const [formErrors, setFormErrors] = useState<FormErrors>({ email: '', password: '' })
 
   const { role } = useSelector((state: AuthRootState) => state.auth)
-  const [bapTradeLogin, { isLoading: bapLoading }] = useBapTradeLoginMutation()
-  const [bppTradeLogin, { isLoading: bppLoading }] = useBppTradeLoginMutation()
+  const [tradeLogin, { isLoading }] = useTradeLoginMutation()
   const { t } = useLanguage()
   const dispatch = useDispatch()
 
@@ -54,23 +53,7 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
     }
 
     try {
-      let roleType: ROLE | null = null
-      if (role === ROLE.CONSUMER) {
-        const res = await bapTradeLogin(signInData).unwrap()
-        if (res.user.role?.type.toUpperCase() === ROLE.CONSUMER) {
-          roleType = ROLE.CONSUMER
-        } else if (res.user.role?.type.toUpperCase() === ROLE.ADMIN) {
-          roleType = ROLE.ADMIN
-        }
-      }
-      if (role === ROLE.PRODUCER) {
-        await bppTradeLogin(signInData).unwrap()
-        roleType = ROLE.PRODUCER
-      }
-      if (roleType) {
-        dispatch(setRole({ role: roleType! }))
-        Router.push('/')
-      }
+      await tradeLogin(signInData).unwrap()
     } catch (error) {
       console.error('An error occurred:', error)
     }
@@ -99,15 +82,15 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
               disabled: !isFormFilled,
               variant: 'solid',
               colorScheme: 'primary',
-              isLoading: bapLoading || bppLoading,
+              isLoading: isLoading,
               dataTest: 'login-button'
             },
             {
               text: t.signUp,
               handleClick: handleSignUp,
               variant: 'outline',
               colorScheme: 'primary',
-              disabled: bapLoading || bppLoading,
+              disabled: isLoading,
               dataTest: 'register-button'
             }
           ],
@@ -130,15 +113,6 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
               error: formErrors.password,
               dataTest: 'input-password'
             }
-          ],
-          socialButtons: [
-            {
-              text: role === ROLE.CONSUMER ? 'Sign In as Producer' : 'Sign In as Consumer',
-              handleClick: () => handleOnRoleChange(role === ROLE.CONSUMER ? ROLE.PRODUCER : ROLE.CONSUMER),
-              variant: 'outline',
-              colorScheme: 'primary',
-              dataTest: 'producer-button'
-            }
           ]
         }}
       />

apps/open-spark/components/signIn/otp.module.css

@@ -0,0 +1,70 @@
+.container {
+  margin-top: 10px;
+}
+.did_floating_label_content {
+  position: relative;
+  margin-bottom: 35px;
+}
+.did_floating_label {
+  font-size: 14px;
+  position: absolute;
+  pointer-events: none;
+  top: 11px;
+  background: #fff;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+.did_floating_input {
+  font-size: 15px;
+  display: block;
+  padding: 15px 0 0 0;
+  width: 100%;
+  height: 36px;
+  background: #fff;
+  border-bottom: 1px solid #43464e;
+  box-sizing: border-box;
+}
+.otp_number {
+  left: 0;
+}
+.did_floating_input:focus {
+  outline: none;
+  border-color: rgba(var(--color-primary));
+}
+.did_floating_input.otp_number_input:focus {
+  outline: none;
+  border-color: #000;
+}
+.did_floating_input:focus ~ .did_floating_label {
+  top: -8px;
+  font-size: 14px;
+  color: rgba(var(--color-primary));
+}
+.did_floating_input:focus ~ .did_floating_label.otp_number {
+  top: -8px;
+  font-size: 14px;
+  color: #000;
+}
+.did_floating_input:focus ~ .did_floating_label.otp_number {
+  top: -12px;
+  font-size: 14px;
+  color: #000;
+}
+
+.did_floating_input:not(:placeholder-shown) ~ .did_floating_label {
+  top: -8px;
+  font-size: 14px;
+}
+.did_floating_input:not(:placeholder-shown) ~ .did_floating_label.otp_number {
+  top: -12px;
+  font-size: 14px;
+}
+.error {
+  font-size: 10px;
+  color: rgba(var(--color-primary));
+}
+
+.did_floating_label_content:has(.error) {
+  margin-bottom: 25px;
+}

apps/open-spark/components/signUp/signUp.tsx

@@ -3,8 +3,8 @@ import { BecknAuth } from '@beckn-ui/becknified-components'
 import { Box } from '@chakra-ui/react'
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import Router from 'next/router'
-import { FormErrors, SignInResponse, SignUpFormProps } from '@beckn-ui/common/lib/types'
-import { useBapTradeRegisterMutation, useBppTradeRegisterMutation } from '@services/UserService'
+import { FormErrors, SignUpFormProps } from '@beckn-ui/common/lib/types'
+import { useTradeRegisterMutation } from '@services/UserService'
 import openSpark from '@public/images/openSparkLogo.svg'
 import { useLanguage } from '@hooks/useLanguage'
 import { CustomFormErrorProps, signUpValidateForm } from '@utils/form-utils'
@@ -43,8 +43,7 @@ const SignUp = () => {
   const [utilities, setUtilities] = useState<any[]>([])
 
   const { role } = useSelector((state: AuthRootState) => state.auth)
-  const [bapTradeRegister, { isLoading: bapLoading }] = useBapTradeRegisterMutation()
-  const [bppTradeRegister, { isLoading: bppLoading }] = useBppTradeRegisterMutation()
+  const [tradeRegister, { isLoading }] = useTradeRegisterMutation()
   const { t } = useLanguage()
   const [termsAccepted, setTermsAccepted] = useState(false)
 
@@ -153,14 +152,11 @@ const SignUp = () => {
       try {
         let registerResponse: any = null
         let catalogueSuccess: any = null
-        if (role === ROLE.CONSUMER) {
-          registerResponse = await bapTradeRegister(signUpData)
-          catalogueSuccess = true
-        }
-        if (role === ROLE.PRODUCER) {
-          registerResponse = await bppTradeRegister(signUpData)
-          catalogueSuccess = await createTradeCatalogue()
-        }
+
+        registerResponse = await tradeRegister(signUpData)
+        // for PRODUCER to create default catalogue
+        catalogueSuccess = await createTradeCatalogue()
+
         console.log(registerResponse)
         if (!registerResponse || (registerResponse as { error: FetchBaseQueryError })?.error)
           throw new Error('Could not register')
@@ -216,14 +212,14 @@ const SignUp = () => {
               disabled: !isFormFilled || !termsAccepted,
               variant: 'solid',
               colorScheme: 'primary',
-              isLoading: bapLoading || bppLoading
+              isLoading: isLoading
             },
             {
               text: t.signIn,
               handleClick: handleSignIn,
               variant: 'outline',
               colorScheme: 'primary',
-              disabled: bapLoading || bppLoading
+              disabled: isLoading
             }
           ],
           inputs: [

apps/open-spark/middleware.ts

@@ -4,30 +4,23 @@ 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 isVerified = req.cookies.get('isVerified')?.value === 'true'
   const { pathname } = req.nextUrl
   const response = NextResponse.next()
   response.headers.set('Cache-Control', 'no-store')
 
-  if (role && loggedin && (pathname === '/signIn' || pathname === '/signUp' || pathname === '/welcome')) {
-    return NextResponse.redirect(new URL('/', req.url))
+  if (loggedin && !isVerified && !['/signIn', '/signUp', '/OTPVerification'].includes(pathname)) {
+    return NextResponse.redirect(new URL('/signIn', req.url))
   }
 
-  if (!role && !loggedin && pathname !== '/welcome') {
-    const signInRoute = '/welcome'
-
-    return NextResponse.redirect(new URL(signInRoute, req.url))
+  if (loggedin && isVerified && ['/signIn', '/signUp', '/OTPVerification'].includes(pathname)) {
+    return NextResponse.redirect(new URL('/', 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))
+  if (!loggedin && !['/signIn', '/signUp', '/OTPVerification'].includes(pathname)) {
+    return NextResponse.redirect(new URL('/signIn', req.url))
   }
 
-  // It's important to return a response for all paths, you might want to return `undefined` or `NextResponse.next()`
-  // for other cases to let the request continue.
   return response
 }