Merge pull request #234 from AmakrushAI/feat/kalia-flow

Added KALIA flow
AmakrushAI · Mar 8, 2024 · 9b95549 · 9b95549
2 parents 4dde2e3 + b96549e
commit 9b95549
Show file tree

Hide file tree

Showing 15 changed files with 530 additions and 115 deletions.
diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json
@@ -35,6 +35,14 @@
     "label.speak": "Speak",
     "label.tap_to_speak": "Tap to speak",
     "label.manual": "User Manual - For VAWs",
+    "lable.disclaimer": "Disclaimer",
+    "label.grievance_disclaimer": "If a grievance is pending, please Contact the officer for verification",
+    "label.eleg_disclaimer": "If not eligible, please apply for a grievance via KALIA Portal",
+    "label.disbursal_disclaimer": "If the payment status is failed, please link your bank account with Aadhar.",
+    "label.kalia_status": "KALIA Status",
+    "label.plant_protection":"Plant Protection",
+    "label.weather_advisory":"Weather Advisory",
+    "table.personalDetails": "Personal Details",
     "table.header_date": "Date",
     "table.header_temp_max": "Temp Max",
     "table.header_temp_min": "Temp Min",

diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json
@@ -35,6 +35,13 @@
     "label.speak":"କଥା ହୁଅନ୍ତୁ",
     "label.tap_to_speak": "କହିବାକୁ ଟ୍ୟାପ୍ କରନ୍ତୁ",
     "label.manual":"ବ୍ୟବହାରକାରୀ ମାନୁଆଲ - VAWs ପାଇଁ",
+    "lable.disclaimer": "ଧ୍ୟାନ ଦିଅନ୍ତୁ",
+    "label.grievance_disclaimer": "ଯଦି କୌଣସି ଅଭିଯୋଗ ବିଚାରାଧୀନ ଅଛି, ଦୟାକରି ଯାଞ୍ଚ ପାଇଁ ଅଧିକାରୀଙ୍କ ସହିତ ଯୋଗାଯୋଗ କରନ୍ତୁ |",
+    "label.eleg_disclaimer": "ଯଦି ଯୋଗ୍ୟ ନୁହେଁ, ଦୟାକରି କାଳିଆ ପୋର୍ଟାଲ ମାଧ୍ୟମରେ ଅଭିଯୋଗ ପାଇଁ ଆବେଦନ କରନ୍ତୁ |",
+    "label.disbursal_disclaimer": "ଯଦି ଦେୟ ସ୍ଥିତି ବିଫଳ ହୁଏ, ଦୟାକରି ଆପଣଙ୍କର ବ୍ୟାଙ୍କ ଆକାଉଣ୍ଟକୁ ଆଧାର ସହିତ ଲିଙ୍କ୍ କରନ୍ତୁ |",
+    "label.kalia_status": "କାଳିଆ ସ୍ଥିତି",
+    "label.plant_protection":"ଉଦ୍ଭିଦ ସୁରକ୍ଷା",
+    "label.weather_advisory":"ପାଣିପାଗ ପରାମର୍ଶଦାତା",
     "table.header_date": "ତାରିଖ",
     "table.header_temp_max":"ସର୍ବାଧିକ ତାପମାତ୍ରା",
     "table.header_temp_min": "ସାର୍ବନିମ୍ନ ତାପମାତ୍ରା ",

diff --git a/apps/amakrushi/src/assets/images/kalia_status.png b/apps/amakrushi/src/assets/images/kalia_status.png
diff --git a/apps/amakrushi/src/assets/images/plant_protection.png b/apps/amakrushi/src/assets/images/plant_protection.png
diff --git a/apps/amakrushi/src/assets/images/weather_advisory.png b/apps/amakrushi/src/assets/images/weather_advisory.png
diff --git a/apps/amakrushi/src/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -4,6 +4,14 @@
   color: var(--secondarygreen);
 }
 
+.kaliaImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
 .disconnected {
   padding-top: 0.5vh;
   display: flex;
@@ -19,20 +27,58 @@
   width: 57%;
   margin: auto;
   position: relative;
-  top: 10%;
+  top: 3%;
   text-align: center;
   font-family: 'Mulish-Bold';
   font-size: 3.5vh;
   font-weight: 700;
 }
 
+.imgButtons{
+  position: relative;
+  top: 7%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.imgBtn {
+  background-color: white;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  padding: 10px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  width: 110px;
+  height: 110px;
+}
+
+.imgBtn:active{
+  transform: scale(0.9);
+}
+
+.imgBtn img{
+  min-width: 80% !important;
+}
+
+.imgBtn p{
+  color: var(--font);
+  font-family: 'Mulish-bold';
+  text-align: center;
+  line-height: 1;
+  margin-bottom: 5px;
+}
+
 .voiceRecorder {
   position: relative;
   margin: auto;
-  top: 25%;
+  top: 11%;
   text-align: center;
-  height: 18vh;
-  width: 18vh;
+  height: 15vh;
+  width: 15vh;
 }
 
 .exampleMessages {
@@ -116,7 +162,7 @@
   position: absolute;
   left: 50%;
   right: 50%;
-  bottom: 1vh;
+  bottom: 0;
   transform: translateX(-50%);
   color: var(--font);
   width: 70%;

diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -28,6 +28,9 @@ import RenderVoiceRecorder from '../recorder/RenderVoiceRecorder';
 import { useFlags } from 'flagsmith/react';
 import DownTimePage from '../down-time-page';
 import { recordUserLocation } from '../../utils/location';
+import kaliaStatusImg from '../../assets/images/kalia_status.png';
+import plantProtectionImg from '../../assets/images/plant_protection.png';
+import weatherAdvisoryImg from '../../assets/images/weather_advisory.png';
 
 const HomePage: NextPage = () => {
   const context = useContext(AppContext);
@@ -65,7 +68,7 @@ const HomePage: NextPage = () => {
   };
 
   useEffect(() => {
-    if (inputMsg.length > 0 && !(localStorage.getItem('locale') === 'en')) {
+    if (inputMsg.length > 0 && !(localStorage.getItem('locale') === 'en') && !context?.kaliaClicked) {
       if (suggestionClicked) {
         setSuggestionClicked(false);
         return;
@@ -200,7 +203,6 @@ const HomePage: NextPage = () => {
     }
     recordUserLocation();
 
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -214,7 +216,9 @@ const HomePage: NextPage = () => {
         console.log('clearing mssgs');
         context?.setMessages([]);
         router.push('/chat');
-        context?.sendMessage(msg);
+        if (context?.kaliaClicked) {
+          context?.sendMessage("Aadhar number - " + msg, null, true, null, true);
+        } else context?.sendMessage(msg);
       } else {
         toast.error(t('error.disconnected'));
         return;
@@ -225,8 +229,12 @@ const HomePage: NextPage = () => {
 
   const handleInputChange = (e: any) => {
     const inputValue = e.target.value;
-    setInputMsg(inputValue);
-    // Store the cursor position
+    if (context?.kaliaClicked) {
+      if (!/^[0-9]*$/.test(inputValue) || inputValue.length > 12) {
+        toast.error('Please enter valid aadhaar number');
+        // setInputMsg(inputValue.slice(0, 12));
+      } else setInputMsg(inputValue);
+    } else setInputMsg(inputValue);
     const cursorPosition = e.target.selectionStart;
     setCursorPosition(cursorPosition);
     // setShowExampleMessages(inputValue.length === 0);
@@ -351,11 +359,60 @@ const HomePage: NextPage = () => {
     return (
       <>
         <div className={styles.main} onClick={handleDocumentClick}>
-          <div className={styles.title}>{t('label.ask_me')}</div>
-          <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
-            <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
-          </div>
-          <div
+          {context?.kaliaClicked ? <div className={styles.kaliaImg}>
+            <Image
+              src={kaliaStatusImg}
+              width={180}
+              height={120}
+              alt="kaliastatus"
+            />
+          </div> : <><div className={styles.title}>{t('label.ask_me')}</div>
+            <div className={styles.imgButtons}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-evenly',
+                  width: '100%',
+                  maxWidth: '500px',
+                }}>
+                <div className={styles.imgBtn} onClick={() => { context?.setKaliaClicked((props: boolean) => !props); }}>
+                  <p>{t('label.kalia_status')}</p>
+                  <Image
+                    src={kaliaStatusImg}
+                    width={80}
+                    height={57}
+                    alt="kaliastatus"
+                  />
+                </div>
+                <div className={styles.imgBtn} onClick={() => {
+                  toast('Coming Soon!')
+                }}>
+                  <p>{t('label.plant_protection')}</p>
+                  <Image
+                    src={plantProtectionImg}
+                    width={60}
+                    height={60}
+                    alt="plantprotection"
+                  />
+                </div>
+              </div>
+              <div className={styles.imgBtn} style={{ marginTop: '20px' }} onClick={() => {
+                sendMessage('weather advisory');
+              }}>
+                <p>{t('label.weather_advisory')}</p>
+                <Image
+                  src={weatherAdvisoryImg}
+                  width={50}
+                  height={70}
+                  alt="weatheradvisory"
+                />
+              </div>
+            </div>
+            <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
+              <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
+            </div></>}
+
+          {/* <div
             className={
               styles.exampleMessages +
               (showExampleMessages
@@ -380,46 +437,47 @@ const HomePage: NextPage = () => {
                     style={{ marginRight: '2px' }}
                   />
                   {choice.text}
-                  {/* <div className={styles.rightIcon}>
+                  <div className={styles.rightIcon}>
                     <RightIcon width="35px" color="var(--secondarygreen)" />
-                  </div> */}
+                  </div>
                 </button>
               );
             })}
-          </div>
-
-          <form onSubmit={(event) => event?.preventDefault()}>
-            <div
-              ref={chatBoxButton}
-              className={`${`${styles.inputBox} ${styles.inputBoxOpen}`}`}>
-              <div className={styles.suggestions}>
-                {suggestions.map((elem, index) => {
-                  return (
-                    <div
-                      key={index}
-                      onClick={() => suggestionClickHandler(elem)}
-                      className={`${styles.suggestion} ${activeSuggestion === index ? styles.active : ''
-                        }`}
-                      onMouseEnter={(e) => suggestionHandler(e, index)}>
-                      {elem}
-                    </div>
-                  );
-                })}
-              </div>
-              <textarea
-                ref={inputRef}
-                rows={1}
-                value={inputMsg}
-                onChange={handleInputChange}
-                placeholder={placeholder}
-              />
-              <button
-                type="submit"
-                className={styles.sendButton}>
-                <Image src={SendIcon} width={50} height={50} alt="sendIcon" onClick={() => sendMessage(inputMsg)} />
-              </button>
+          </div> */}
+          <div
+            ref={chatBoxButton}
+            className={`${`${styles.inputBox} ${styles.inputBoxOpen}`}`}>
+            <div className={styles.suggestions}>
+              {suggestions.map((elem, index) => {
+                return (
+                  <div
+                    key={index}
+                    onClick={() => suggestionClickHandler(elem)}
+                    className={`${styles.suggestion} ${activeSuggestion === index ? styles.active : ''
+                      }`}
+                    onMouseEnter={(e) => suggestionHandler(e, index)}>
+                    {elem}
+                  </div>
+                );
+              })}
             </div>
-          </form>
+            <textarea
+              ref={inputRef}
+              rows={1}
+              value={inputMsg}
+              onChange={handleInputChange}
+              placeholder={!context?.kaliaClicked ? placeholder : 'Enter you Aadhar number'}
+            />
+            <button type="submit" className={styles.sendButton}>
+              <Image
+                src={SendIcon}
+                width={50}
+                height={50}
+                alt="sendIcon"
+                onClick={() => sendMessage(inputMsg)}
+              />
+            </button>
+          </div>
         </div>
       </>
     );

diff --git a/apps/amakrushi/src/components/NavBar/index.module.css b/apps/amakrushi/src/components/NavBar/index.module.css
@@ -2,9 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 5px;
   background-color: var(--bg-color);
-  height: 100px;
+  height: 85px;
   border-bottom: 1px solid #dbdbdb;
 }
 

diff --git a/apps/amakrushi/src/components/NavBar/index.tsx b/apps/amakrushi/src/components/NavBar/index.tsx
@@ -125,14 +125,15 @@ function NavBar() {
             {/* <div> */}
             <Sidemenu />
             {/* </div> */}
-            {router.pathname !== '/chat' && router.pathname !== '/' ? (
+            {router.pathname !== '/chat' && router.pathname !== '/' || (router.pathname === '/' && context?.kaliaClicked) ? (
               <div style={{ paddingLeft: '15px' }}>
                 <Image
                   src={homeIcon}
                   alt=""
                   width={30}
                   height={30}
                   onClick={() => {
+                    if(context?.kaliaClicked) context?.setKaliaClicked(false);
                     router.push('/');
                   }}
                 />