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

More ui changes
AmakrushAI · Mar 9, 2024 · 313e463 · 313e463
2 parents 9b95549 + ac01574
commit 313e463
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 33 deletions.
diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json
@@ -38,7 +38,7 @@
     "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.disbursal_disclaimer": "If the payment status is failed, please link your bank account with Aadhaar.",
     "label.kalia_status": "KALIA Status",
     "label.plant_protection":"Plant Protection",
     "label.weather_advisory":"Weather Advisory",

diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json
@@ -52,6 +52,7 @@
     "table.header_windspeed": "ପବନର ବେଗ",
     "table.header_cloudcover": "ମେଘ ଆବରଣ",
     "table.header_conditions": "ସର୍ତ୍ତ",
+    "table.personalDetails": "ବ୍ୟକ୍ତିଗତ ବିବରଣୀ",
     "message.speaker": "ଶୁଣିବାକୁ କ୍ଲିକ୍ କରନ୍ତୁ",
     "message.options":"ଆପଣଙ୍କ ଫସଲ ସହ ଜଡିତ ପରାମର୍ଶ ପାଇବା ପାଇଁ, ଦୟାକରି ନିମ୍ନରେ ଥିବା ପ୍ରାସଙ୍ଗିକ ବଟନରେ କ୍ଲିକ୍ କରନ୍ତୁ:",
     "message.no_signal":"ସିଗ୍ନାଲ ନାହିଁ। \nଦୟାକରି ଆପଣଙ୍କ ଇଣ୍ଟରନେଟ ସଂଯୋଗ କୁ ଚେକ୍ କରନ୍ତ",

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/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -75,7 +75,7 @@
 .voiceRecorder {
   position: relative;
   margin: auto;
-  top: 11%;
+  top: 15%;
   text-align: center;
   height: 15vh;
   width: 15vh;

diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -217,7 +217,7 @@ const HomePage: NextPage = () => {
         context?.setMessages([]);
         router.push('/chat');
         if (context?.kaliaClicked) {
-          context?.sendMessage("Aadhar number - " + msg, null, true, null, true);
+          context?.sendMessage("Aadhaar number - " + msg, null, true, null, true);
         } else context?.sendMessage(msg);
       } else {
         toast.error(t('error.disconnected'));
@@ -397,7 +397,7 @@ const HomePage: NextPage = () => {
                 </div>
               </div>
               <div className={styles.imgBtn} style={{ marginTop: '20px' }} onClick={() => {
-                sendMessage('weather advisory');
+                sendMessage(t('label.weather_advisory'));
               }}>
                 <p>{t('label.weather_advisory')}</p>
                 <Image
@@ -409,7 +409,7 @@ const HomePage: NextPage = () => {
               </div>
             </div>
             <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
-              <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
+              <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} includeDiv={true} />
             </div></>}
 
           {/* <div
@@ -466,7 +466,7 @@ const HomePage: NextPage = () => {
               rows={1}
               value={inputMsg}
               onChange={handleInputChange}
-              placeholder={!context?.kaliaClicked ? placeholder : 'Enter you Aadhar number'}
+              placeholder={!context?.kaliaClicked ? placeholder : 'Enter you Aadhaar number'}
             />
             <button type="submit" className={styles.sendButton}>
               <Image

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -158,9 +158,9 @@
   flex-direction: column;
   margin: 0.5rem;
   gap: 0.5rem;
-  white-space: nowrap;
   color: var(--secondarygreen);
   font-weight: bold;
+  min-width: 7rem;
 }
 
 .tableHeaderKalia {
@@ -224,6 +224,10 @@
   background: #F2F2F2;
 }
 
+.tableDataCol:nth-child(even) {
+  background: #fff
+}
+
 .tableDataColKalia:nth-child(odd) {
   background: #F2F2F2;
 }
@@ -237,4 +241,27 @@
   background: rgba(0, 0, 0, 0.1);
   height: 2px;
   margin: 1rem 0rem 1rem 0rem;
+}
+
+.disbursalTable {
+  table-layout: fixed;
+  width: 100%;
+  margin-left: -100px;
+  /*ie7*/
+}
+
+.tableDataCell {
+  border-bottom: 1px solid grey;
+  width: 100%;
+  height: 3rem;
+  text-align: center;
+  padding: 0rem 0.5rem;
+}
+
+.tableDataCellHeader {
+  min-width: 10rem;
+  height: 3rem;
+  padding: 0rem 0.5rem;
+  word-wrap: break-word;
+  white-space: break-spaces;
 }
diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -931,33 +931,29 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
           <Bubble type="text">
             <div className={styles.tableContainer}>
               <div className={styles.tableHeader}
-                style={{ fontSize: '13px' }}
+                style={{ fontSize: '13px', width: '30%', wordWrap: 'break-word', wordBreak: 'break-word', display: 'flex' }}
               >
-                <div>
-                  <b>Name of<br></br> Bank</b>
-                </div>
-                <div>IFSC Code</div>
-                <div>Payment<br></br> processed Date</div>
-                <div>Saving Bank <br></br>Account No</div>
-                <div>Payment Status </div>
-                <div>UTR No</div>
+                <p className={styles.tableDataCellHeader}>Name of<br></br> Bank</p>
+                <p className={styles.tableDataCellHeader}>IFSC Code</p>
+                <p className={styles.tableDataCellHeader}>Payment <br></br>processed Date</p>
+                <p className={styles.tableDataCellHeader}>Saving Bank<br></br> Account No</p>
+                <p className={styles.tableDataCellHeader}>Payment <br></br>Status </p>
+                <p className={styles.tableDataCellHeader}>UTR No</p>
               </div>
               <div className={styles.tableData}>
                 {data?.map(
                   (el: any, idx: any) => (
                     <div
                       key={el?.['Name of Bank'] + idx}
                       className={styles.tableDataCol}
-                      style={{ fontSize: '13px' }}
+                      style={{ fontSize: '13px', padding: '0rem' }}
                     >
-                      <div>
-                        <b> {el['Name of Bank']}</b>
-                      </div>
-                      <div>{el['IFSC Code']} </div>
-                      <div>{el['Payment processed Date']}</div><br></br>
-                      <div>{el['Saving Bank Account No.']}</div>
-                      <div>{el['Payment Status']}</div>
-                      <div>{el['UTR No.']}</div>
+                      <div className={styles.tableDataCell}>{el['Name of Bank']}</div>
+                      <div className={styles.tableDataCell}>{el['IFSC Code']} </div>
+                      <div className={styles.tableDataCell}>{el['Payment processed Date']}</div>
+                      <div className={styles.tableDataCell}>{el['Saving Bank Account No.']}</div>
+                      <div className={styles.tableDataCell}>{el['Payment Status']}</div>
+                      <div className={styles.tableDataCell}>{el['UTR No.']}</div>
                     </div>
                   )
                 )}

diff --git a/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx b/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx
@@ -9,7 +9,7 @@ import toast from 'react-hot-toast';
 import { useLocalization } from '../../hooks';
 import { useFlags } from 'flagsmith/react';
 
-const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
+const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak, includeDiv = false }) => {
   const t = useLocalization();
   const [mediaRecorder, setMediaRecorder] = useState(null);
   const [apiCallStatus, setApiCallStatus] = useState('idle');
@@ -184,7 +184,7 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
       <div>
         {mediaRecorder && mediaRecorder.state === 'recording' ? (
           <div className={styles.center}>
-            <div className={styles.imgContainer}>
+            {includeDiv ? <div className={styles.imgContainer}>
               <Image
                 priority
                 src={stop}
@@ -196,21 +196,40 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
                 layout="responsive"
               />
             </div>
+              :
+              <Image
+                priority
+                src={stop}
+                alt="stopIcon"
+                onClick={() => {
+                  stopRecording();
+                }}
+                style={{ cursor: 'pointer' }}
+                layout="responsive"
+              />
+            }
           </div>
         ) : (
           <div className={styles.center}>
             {apiCallStatus === 'processing' ? (
-              <div className={styles.imgContainer}>
+              includeDiv ? <div className={styles.imgContainer}>
+                <Image
+                  priority
+                  src={processing}
+                  alt="processingIcon"
+                  style={{ cursor: 'pointer' }}
+                  layout="responsive"
+                />
+              </div> :
                 <Image
                   priority
                   src={processing}
                   alt="processingIcon"
                   style={{ cursor: 'pointer' }}
                   layout="responsive"
                 />
-              </div>
             ) : apiCallStatus === 'error' ? (
-              <div className={styles.imgContainer}>
+              includeDiv ? <div className={styles.imgContainer}>
                 <Image
                   priority
                   src={error}
@@ -223,9 +242,20 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
                   layout="responsive"
                 />
               </div>
+                : <Image
+                  priority
+                  src={error}
+                  alt="errorIcon"
+                  onClick={() => {
+                    setUserClickedError(true);
+                    startRecording();
+                  }}
+                  style={{ cursor: 'pointer' }}
+                  layout="responsive"
+                />
             ) : (
               <>
-                <div className={styles.imgContainer}>
+                {includeDiv ? <div className={styles.imgContainer}>
                   <Image
                     priority
                     src={start}
@@ -240,6 +270,20 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
                     layout="responsive"
                   />
                 </div>
+                  : <Image
+                    priority
+                    src={start}
+                    alt="startIcon"
+                    onClick={() => {
+                      setUserClickedError(true);
+                      startRecording();
+                    }}
+                    style={{ cursor: 'pointer' }}
+                    height={'10px !important'}
+                    width={'10px !important'}
+                    layout="responsive"
+                  />
+                }
                 {tapToSpeak ? (
                   <p style={{ color: 'black', fontSize: '12px', marginTop: '4px' }}>
                     {t('label.tap_to_speak')}

diff --git a/apps/amakrushi/src/components/recorder/styles.module.css b/apps/amakrushi/src/components/recorder/styles.module.css
@@ -15,6 +15,6 @@
   position: relative;
   overflow: hidden;
   margin: auto;
-  width: 6rem;
-  height: 6rem;
+  width: 4rem;
+  height: 4rem;
 }