feat(open-spark): ui implementation

apps/open-spark/components/header/index.tsx

@@ -27,7 +27,7 @@ const Header = () => {
     <Box>
       {renderTopHeader && (
         <TopHeader
-          appLogo={'/images/taxi_hub.svg'}
+          appLogo={'/images/OpenSparkTopLogo.svg'}
           t={key => t[key]}
           headerConstants={{
             blackList: {

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

@@ -2,12 +2,11 @@ import React, { useState, useMemo } from 'react'
 import { BecknAuth } from '@beckn-ui/becknified-components'
 import { FormErrors, SignInFormProps } from '@beckn-ui/common/lib/types'
 import { signInValidateForm } from '@beckn-ui/common'
-import energyIcon from '@public/images/energy-icon.svg'
+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 { accountType } from '@utils/auth'
 
 const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
   const [formData, setFormData] = useState<SignInFormProps>(initialFormData)
@@ -16,7 +15,6 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
   const [bppLogin, { isLoading: bppLoading }] = useBppTradeLoginMutation()
   const { t } = useLanguage()
 
-  // Handle input change and validation
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target
 
@@ -37,14 +35,12 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
     }))
   }
 
-  // Check if form is filled
   const isFormFilled = useMemo(() => {
     return (
       Object.values(formData).every(value => value !== '') && Object.values(formErrors).every(value => value === '')
     )
   }, [formData, formErrors])
 
-  // Handle sign-in action
   const handleSignIn = async () => {
     const signInData = {
       email: formData.email,
@@ -56,26 +52,25 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
       Router.push('/')
     } catch (error) {
       console.error('An error occurred:', error)
-      // Handle error state or display error message
     }
   }
 
   const handleSignUp = () => {
     Router.push('/signUp')
   }
 
-  const handleChooseAuthType = (id: string) => {}
+  const handleProducer = () => {
+    Router.push('/producerLogin')
+  }
 
   return (
     <Box>
       <BecknAuth
         schema={{
           logo: {
-            src: energyIcon,
-            alt: 'energy-logo'
+            src: openSpark,
+            alt: 'openSpark-logo'
           },
-          chooseAuthType: accountType,
-          handleAccountType: handleChooseAuthType,
           buttons: [
             {
               text: t.signIn,
@@ -114,6 +109,15 @@ const SignIn = ({ initialFormData = { email: '', password: '' } }) => {
               error: formErrors.password,
               dataTest: 'input-password'
             }
+          ],
+          socialButtons: [
+            {
+              text: 'Sign In as Producer',
+              handleClick: handleProducer,
+              variant: 'outline',
+              colorScheme: 'primary',
+              dataTest: 'producer-button'
+            }
           ]
         }}
       />

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

@@ -1,17 +1,18 @@
 import React, { useMemo, useState } from 'react'
 import { BecknAuth } from '@beckn-ui/becknified-components'
-import { Box, useBreakpoint } from '@chakra-ui/react'
+import { Box, useBreakpoint, theme } 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 energyIcon from '@public/images/energy-icon.svg'
+import openSpark from '@public/images/openSparkLogo.svg'
 import { useLanguage } from '@hooks/useLanguage'
 import { CustomFormErrorProps, signUpValidateForm } from '@utils/form-utils'
 import { accountType } from '@utils/auth'
 
 interface RegisterFormProps extends SignUpFormProps {
   utilityCompany: string
+  address: string
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_STRAPI_URL
@@ -20,6 +21,7 @@ const SignUp = () => {
   const [formData, setFormData] = useState<RegisterFormProps>({
     email: '',
     password: '',
+    address: '',
     mobileNumber: '',
     name: '',
     utilityCompany: ''
@@ -36,6 +38,7 @@ const SignUp = () => {
   const [bapTradeRegister, { isLoading: bapLoading }] = useBapTradeRegisterMutation()
   const [bppTradeRegister, { isLoading: bppLoading }] = useBppTradeRegisterMutation()
   const { t } = useLanguage()
+  const [termsAccepted, setTermsAccepted] = useState(false)
 
   // Handle input change and validation
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -141,8 +144,6 @@ const SignUp = () => {
     Router.push('/signIn')
   }
 
-  const handleChooseAuthType = (id: string) => {}
-
   return (
     <Box
       mt={'30px'}
@@ -153,16 +154,14 @@ const SignUp = () => {
       <BecknAuth
         schema={{
           logo: {
-            src: energyIcon,
-            alt: 'energy-logo'
+            src: openSpark,
+            alt: 'openSpark-logo'
           },
-          chooseAuthType: accountType,
-          handleAccountType: handleChooseAuthType,
           buttons: [
             {
               text: t.signUp,
               handleClick: handleSignUp,
-              disabled: !isFormFilled,
+              disabled: !isFormFilled || !termsAccepted,
               variant: 'solid',
               colorScheme: 'primary',
               isLoading: bapLoading || bppLoading
@@ -193,12 +192,11 @@ const SignUp = () => {
               error: formErrors.email
             },
             {
-              type: 'password',
-              name: 'password',
-              value: formData.password,
+              type: 'text',
+              name: 'address',
+              value: formData.address,
               handleChange: handleInputChange,
-              label: t.enterPassword,
-              error: formErrors.password
+              label: t.enterAddrees
             },
             {
               type: 'number',
@@ -220,8 +218,27 @@ const SignUp = () => {
               handleChange: handleSelectChange,
               label: t.selectUtilityCompany,
               error: formErrors.utilityCompany
+            },
+            {
+              type: 'password',
+              name: 'password',
+              value: formData.password,
+              handleChange: handleInputChange,
+              label: t.enterPassword,
+              error: formErrors.password
+            }
+          ],
+          showTermsCheckbox: true,
+          termsCheckboxProps: {
+            isChecked: termsAccepted,
+            color: '#4498E8',
+            onChange: e => setTermsAccepted(e.target.checked),
+            termsText: {
+              serviceName: 'Open Spark',
+              termsLink: '/terms',
+              privacyLink: '/privacy'
             }
-          ]
+          }
         }}
       />
     </Box>

apps/open-spark/locales/en.ts

@@ -29,11 +29,12 @@ const en: { [key: string]: string } = {
   formAddress: 'Complete Address',
   formZipCode: 'Zip Code',
   name: 'Name',
-  fullName: 'Enter Your Full Name',
+  fullName: 'Enter Your Full Name / Company Name',
   password: 'Password',
   enterPassword: 'Enter Password',
   email: 'Email',
   enterEmailID: 'Enter Email ID',
+  enterAddrees: 'Enter Address',
   enterYourPassword: 'Please Enter Your Password',
   enterYourEmail: 'Please Enter Your Email',
   doHaveAnAccount: "Don't You Have An Account? ",

apps/open-spark/pages/_app.tsx

@@ -21,7 +21,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <BecknProvider
       theme={{
         color: {
-          primary: '#ABD4FA',
+          primary: '#4498E8',
           secondary: '#D22323',
           textPrimary: '#1A202C',
           textSecondary: '#37474F'

apps/open-spark/pages/welcome.tsx

@@ -0,0 +1,56 @@
+import BecknButton from '@beckn-ui/molecules/src/components/button'
+import { Box, Flex, Image, Text } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import React from 'react'
+import welcomeLogo from '../public/images/welcome.svg'
+
+const welcome = () => {
+  const router = useRouter()
+  return (
+    <Box>
+      <Flex
+        flexDir={'column'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        marginBottom={'100px'}
+      >
+        <Image
+          src={welcomeLogo}
+          alt="welcome_logo"
+        />
+        <Text
+          fontSize="24px"
+          fontWeight={400}
+        >
+          Hello,
+        </Text>
+        <Text
+          fontSize="24px"
+          fontWeight={400}
+        >
+          Welcome to Open Spark
+        </Text>
+      </Flex>
+      <Flex
+        margin={{ base: '0px', lg: '150px', md: '100px' }}
+        flexDir={'column'}
+        rowGap={'10px'}
+      >
+        <BecknButton
+          dataTest={'consumer_button'}
+          children="I am a Consumer"
+          handleClick={() => router.push('/consumer')}
+          variant="solid"
+        />
+        <BecknButton
+          dataTest={'producer_button'}
+          children="I am a Producer"
+          handleClick={() => router.push('/producer')}
+          variant="outline"
+        />
+      </Flex>
+    </Box>
+  )
+}
+
+export default welcome