Feat/new molecule (#172)

* feat: new branch added * feat: add input, loader, spinner molecules * feat:modal, blinker added * feat:modal is completed * added new molecules for share buttons sidebar navbar * feat: transliteral input box added * added login input and login form component * fix: styling of all new molecule * chore: added newNavbar style props * style: newSidebar * style: added newshare buttons * voiceRecorder Implementation * feat: feedback and list * chore: added feedback component * feat: new loginComponent * fix: loader * update new project * fix: bot version * fix: molecule version * exam section and accordian card added * feat: langu picker * fix: update feedback molecule * feat: table to json and blincker * have implemented new sidebar navbar sharebutton with props in kisai * Profile molecules adding * feat: add transliteration input * feat: voice recorder added * feat: updated login page * fix: pages of all molecule app * fix: downtime page updated * fix: feedback page updated * fix: comming soon page updated * fix: faq page * fix: home-page updated * fix: launch page updated * fix: login and launch page * onboarding updated * fixed otp component * fix: update login molecule * fix: update the molecules * fix: merge config update locally * fix: remove weather api * remove user onbording and bot and org id * fix: env variable removed * fix: update the molecules * feat: update all molecuels --------- Co-authored-by: Ankit Patidar <[email protected]> Co-authored-by: riya-2206 <[email protected]> Co-authored-by: biratdatta <[email protected]> Co-authored-by: Tirth Gajjar <[email protected]>
SamagraX-Stencil · Sep 4, 2024 · f9bd4d8 · f9bd4d8
1 parent 08e1f85
commit f9bd4d8
Show file tree

Hide file tree

Showing 376 changed files with 24,142 additions and 3,407 deletions.
diff --git a/apps/all-molecule-app/app/app.tsx b/apps/all-molecule-app/app/app.tsx
@@ -1,12 +1,223 @@
 'use client'
 
-import { LoginMobileAadharPage } from '@samagra-x/stencil-pages'
+import React, { useCallback, useState } from 'react'
+import styles from './index.module.css'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+import { toast } from 'react-hot-toast'
+import { useColorPalates } from './../provider/theme-provider/hooks'
+import { useConfig } from './../provider/config-provider/hook'
+const App: React.FC = () => {
+  const [isAadharClicked, setIsAadharClicked] = useState(false)
+  const [input, setInput] = useState('')
+  const [valid, setValid] = useState(true)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+  const theme = useColorPalates()
+  const config = useConfig('component', 'loginMobileAadharPage')
+
+  const handleInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let reg
+      let maxLength
+      let errorMessage = ''
+
+      const inputValue = e.target.value
+      const numericInput = inputValue.replace(/[^0-9]/g, '')
+
+      // Update the input value with the numeric value
+      setInput(numericInput)
+
+      if (isAadharClicked) {
+        reg = /^\d{0,12}$/ // Allow up to 12 digits for Aadhar
+        maxLength = 12
+        errorMessage = 'Please enter a valid Aadhar number'
+      } else {
+        reg = /^\d{0,10}$/ // Allow up to 10 digits for Phone Number
+        maxLength = 10
+        errorMessage = 'Please enter a valid mobile number'
+      }
+
+      const isValid = reg.test(numericInput)
+      setValid(isValid)
+
+      if (isValid || numericInput === '') {
+        setInput(numericInput)
+      } else {
+        // Truncate input if it exceeds maximum length
+        setInput(numericInput.slice(0, maxLength))
+      }
+
+      if (numericInput.length > maxLength) {
+        // If input length exceeds maximum allowed digits
+        setValid(false)
+        setInput(numericInput.slice(0, maxLength))
+        errorMessage = isAadharClicked
+          ? `Please enter a valid Aadhar number`
+          : `Please enter a valid mobile number`
+      }
+
+      setErrorMessage(errorMessage)
+    },
+    [isAadharClicked]
+  )
+
+  const handleAadharClick = useCallback(() => {
+    setIsAadharClicked((prop) => !prop)
+  }, [])
+
+  const handleRegistration = () => {
+    // Register User
+  }
+
+  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (
+      (isAadharClicked && input.length === 12) ||
+      (!isAadharClicked && input.length === 10)
+    ) {
+      setLoading(true)
+      setTimeout(() => {
+        setLoading(false)
+        toast.success(`Successfully sent OTP`)
+      }, 2000)
+    } else {
+      console.log(input.length)
+      toast.error(`Please enter a valid input`)
+    }
+  }
 
-function App() {
   return (
     <>
-      <LoginMobileAadharPage />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      ></meta>
+      <div className={styles.main}>
+        <div
+          className={styles.leftColumn}
+          style={{ background: theme?.primary?.main }}
+        >
+          <div className={styles.logo}>
+            <img src={config.logo} width={150} height={40} alt="" />
+          </div>
+        </div>
+        <div className={styles.rightColumn}>
+          <div className={styles.topSection}>
+            <div className={styles.register}>
+              <Typography
+                variant="body2"
+                color={theme.primary?.main}
+                className={styles.registerText}
+              >
+                Don’t have an account?
+              </Typography>
+              {config.showSignUp && (
+                <Typography
+                  onClick={handleRegistration}
+                  variant="button"
+                  sx={{
+                    textTransform: 'none',
+                    color: theme.primary?.main,
+                    fontWeight: 'bold',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Register Now
+                </Typography>
+              )}
+            </div>
+          </div>
+          <div className={styles.form}>
+            {/* Form */}
+            <Typography
+              component="h1"
+              variant="h4"
+              textAlign="left"
+              width="90%"
+              color={theme.primary?.main}
+            >
+              {config.title}
+            </Typography>
+            <Box
+              component="form"
+              onSubmit={handleLogin}
+              sx={{ mt: 1, width: '90%' }}
+            >
+              <TextField
+                type="text"
+                margin="normal"
+                error={!valid}
+                required
+                fullWidth
+                value={input}
+                helperText={!valid ? errorMessage : ''}
+                onChange={handleInput}
+                label={
+                  isAadharClicked ? `Enter Aadhar Number` : `Enter Phone Number`
+                }
+                name={isAadharClicked ? 'aadhar' : 'phone'}
+                autoComplete={isAadharClicked ? 'aadhar' : 'phone'}
+                autoFocus
+              />
+              {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  sx={{
+                    textTransform: 'none',
+                    mt: 3,
+                    mb: 4,
+                    p: 1,
+                    background: theme.primary?.main,
+                    borderRadius: '10px',
+                  }}
+                  onClick={handleLogin}
+                  disabled={!valid || loading}
+                >
+                  {loading ? (
+                    <CircularProgress size={24} color="inherit" />
+                  ) : (
+                    'Login'
+                  )}
+                </Button>
+              }
+            </Box>
+            <Typography
+              variant="caption"
+              textAlign="center"
+              width="90%"
+              color={theme.primary?.main}
+              sx={{ mb: 1 }}
+            >
+              or Login using
+            </Typography>
+            <Typography
+              onClick={handleAadharClick}
+              width="90%"
+              textAlign="center"
+              variant="button"
+              sx={{
+                textTransform: 'none',
+                textDecoration: 'underline',
+                color: theme.primary?.main,
+                fontWeight: 'bold',
+                cursor: 'pointer',
+              }}
+            >
+              {!isAadharClicked ? `Aadhar Number` : `Phone Number`}
+            </Typography>
+          </div>
+        </div>
+      </div>
     </>
   )
 }
+
 export default App
diff --git a/apps/all-molecule-app/app/coming-soon-page/hourglass.tsx b/apps/all-molecule-app/app/coming-soon-page/hourglass.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface DynamicSVGProps {
+  fillColor: string;
+}
+const Hourglass: React.FC<DynamicSVGProps> = ({ fillColor }) => {
+  return (
+    <svg fill={fillColor} width="24vh" height="24vh" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <title>hourglass</title>
+      <path d="M24.5 28c0.275 0 0.5 0.224 0.5 0.5s0 1.5 0 1.5h-19c0 0 0-1.224 0-1.5s0.224-0.5 0.5-0.5h1.67c0.083-6.658 4.432-8.804 4.432-11.495 0-2.705-4.429-2.885-4.471-11.505h-1.631c-0.276 0-0.5-0.224-0.5-0.5s0-1.5 0-1.5h19c0 0 0 1.224 0 1.5s-0.225 0.5-0.5 0.5h-1.53c-0.042 8.62-4.471 8.8-4.471 11.505 0 2.691 4.35 4.837 4.433 11.495h1.568zM17.111 16.505c0-2.716 4.43-2.885 4.471-11.505h-12.063c0.041 8.62 4.471 8.789 4.471 11.505 0 2.611-4.351 4.812-4.433 11.495h0.758c0.178-0.593 0.769-1.306 1.79-1.834l1.327-0.677c0.834-0.431 1.334-0.722 1.5-0.872s0.354-0.486 0.564-1.008c0.221 0.521 0.41 0.857 0.57 1.008s0.654 0.441 1.484 0.872l1.32 0.677c1.015 0.528 1.604 1.241 1.779 1.834h0.894c-0.082-6.683-4.432-8.884-4.432-11.495zM16.070 15.037c-0.12 0.236-0.221 0.685-0.301 1.347-0.020 0.2-0.064 0.501-0.135 0.902-0.070-0.401-0.115-0.702-0.135-0.902-0.081-0.662-0.182-1.11-0.303-1.347-0.121-0.235-0.462-0.658-1.025-1.271l-1.251-1.368c-0.855-0.922-1.403-1.584-1.644-1.984 1.484 0.945 2.933 1.418 4.347 1.418s2.868-0.473 4.362-1.418c-0.25 0.4-0.8 1.062-1.649 1.984l-1.246 1.368c-0.56 0.613-0.901 1.036-1.020 1.271z"></path>
+    </svg>
+  );
+};
+
+export default Hourglass;
diff --git a/apps/all-molecule-app/app/coming-soon-page/index.module.css b/apps/all-molecule-app/app/coming-soon-page/index.module.css
@@ -0,0 +1,14 @@
+.container{
+  height: 100%;
+  min-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.backButton {
+  border-radius: 40px !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+  font-size: 2vh !important;
+}
diff --git a/apps/all-molecule-app/app/coming-soon-page/page.tsx b/apps/all-molecule-app/app/coming-soon-page/page.tsx
@@ -1,9 +1,62 @@
 'use client'
-import { ComingSoonPage } from '@samagra-x/stencil-pages'
-import React from 'react'
+import React, { useCallback } from 'react'
+import styles from './index.module.css'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Hourglass from './hourglass'
+import Typography from '@mui/material/Typography'
+import { useColorPalates } from '../../provider/theme-provider/hooks'
 
-const CommingSoon = () => {
-  return <ComingSoonPage />
+const ComingSoonPage: React.FC = () => {
+  const theme = useColorPalates()
+  const handleBack = useCallback(() => {
+    window?.history?.back()
+  }, [])
+
+  return (
+    <>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      ></meta>
+      <Box my={15} className={styles.container}>
+        <Box mt={5}>
+          <Typography
+            variant="h4"
+            sx={{
+              color: theme?.primary?.main,
+              fontWeight: '700',
+              marginTop: '50px',
+            }}
+          >
+            Coming Soon!
+            {/* {t('message.coming_soon')} */}
+          </Typography>
+        </Box>
+        <Box>
+          <Hourglass fillColor={theme?.primary?.main} />
+        </Box>
+        <Box>
+          <Typography variant="body1" sx={{ fontWeight: '600' }}>
+            We are going to launch this feature very soon. Stay tuned!
+            {/* {t('message.coming_soon_description')} */}
+          </Typography>
+        </Box>
+        <Box my={5}>
+          <Button
+            variant="contained"
+            className={styles.backButton}
+            size="large"
+            style={{ backgroundColor: theme?.primary?.main }}
+            onClick={handleBack}
+          >
+            Back
+            {/* {t('label.back')} */}
+          </Button>
+        </Box>
+      </Box>
+    </>
+  )
 }
 
-export default CommingSoon
+export default ComingSoonPage
diff --git a/apps/all-molecule-app/app/downtime-page/assets/downTimeGIF.gif b/apps/all-molecule-app/app/downtime-page/assets/downTimeGIF.gif
diff --git a/apps/all-molecule-app/app/downtime-page/index.module.css b/apps/all-molecule-app/app/downtime-page/index.module.css
@@ -0,0 +1,22 @@
+.container{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 16px;
+  font-family: sans-serif !important;
+}
+
+.imageContainer {
+  width: 48vh;
+  height: 22vh;
+  background-size: contain; 
+  background-repeat: no-repeat; 
+  background-blend-mode:multiply;
+}
+
+.roundedButton{
+  border-radius: 40px !important;
+}