Merge pull request #3146 from glific/adding-helptext

Added helptext for rejected/failed templates

src/common/HelpData.tsx

@@ -1,5 +1,5 @@
 export interface HelpDataProps {
-  heading: string;
+  heading: any;
   link?: string;
 }
 
@@ -106,3 +106,26 @@ export const assistantsInfo: HelpDataProps = {
     'Assistants can call OpenAI’s models with specific instructions to tune their personality and capabilities. Assistants can access multiple tools in parallel. Assistants can access files in several formats as part of their creation. When using tools, Assistants can also create files (e.g., images, spreadsheets, etc) and cite files they reference in the Messages they create.',
   link: 'https://glific.github.io/docs/docs/Integrations/RAG%20using%20OpenAI%20file%20search%20assistant', // Replace with the actual Glific documentation link
 };
+
+export const templateStatusInfo: HelpDataProps = {
+  heading: (
+    <div>
+      <p>
+        <b>Submitted:</b> The template is under review and can take up to 24 hours. This status indicates that the
+        template has not yet been approved or rejected.
+      </p>
+      <p>
+        <b>Approved:</b> The template has passed review and can be used to notify customers. This status indicates that
+        the template meets all necessary criteria and policies.
+      </p>
+      <p>
+        <b>Rejected:</b> The template has failed to be reviewed due to violations of the approval criteria. This status
+        requires revising and resubmitting the template.
+      </p>
+      <p>
+        <b>Failed:</b> The template has failed the review process at Gupshup's end
+      </p>
+    </div>
+  ),
+  link: 'https://docs.gupshup.io/docs/message-template-approvals-statuses',
+};

src/components/UI/HelpIcon/HelpIcon.tsx

@@ -1,17 +1,20 @@
 import styles from './HelpIcon.module.css';
 import InfoIcon from 'assets/images/info.svg?react';
+import LightInfoIcon from 'assets/images/infoLight.svg?react';
 import { Tooltip } from '@mui/material';
 import { HelpDataProps } from 'common/HelpData';
 
 export interface HelpIconProps {
   helpData?: HelpDataProps;
+  darkIcon?: boolean;
 }
 
 export const HelpIcon = ({
   helpData = {
     heading: '',
     link: '',
   },
+  darkIcon = true,
 }: HelpIconProps) => {
   return (
     <Tooltip
@@ -44,7 +47,7 @@ export const HelpIcon = ({
       arrow
     >
       <span data-testid="help-icon" className={styles.InfoIconContainer}>
-        <InfoIcon className={styles.InfoIcon} />
+        {darkIcon ? <InfoIcon className={styles.InfoIcon} /> : <LightInfoIcon className={styles.InfoIcon} />}
       </span>
     </Tooltip>
   );

src/containers/Template/List/Template.module.css

@@ -130,14 +130,14 @@
   border-radius: 24px;
   border: 1px solid #cccccc;
   display: flex;
-  width: 130px;
+  width: 140px;
   margin: auto;
   height: 36px !important;
   background: #ffffff;
   min-height: 36px !important;
 }
 
-.DropDown > fieldset {
+.DropDown>fieldset {
   border: none !important;
 }
 
@@ -149,3 +149,10 @@
   width: 20%;
   min-width: 100px;
 }
+
+
+.FilterContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}

src/containers/Template/List/Template.tsx

@@ -23,10 +23,11 @@ import CopyAllOutlined from 'assets/images/icons/Flow/Copy.svg?react';
 import { ProviderContext } from 'context/session';
 import { copyToClipboardMethod, exportCsvFile, getFileExtension } from 'common/utils';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
+import HelpIcon from 'components/UI/HelpIcon/HelpIcon';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
 import { setNotification } from 'common/notification';
 import { BULK_APPLY_SAMPLE_LINK } from 'config';
-import { speedSendInfo, templateInfo } from 'common/HelpData';
+import { speedSendInfo, templateInfo, templateStatusInfo } from 'common/HelpData';
 import styles from './Template.module.css';
 import { RaiseToGupShup } from './RaiseToGupshupDialog/RaiseToGupShup';
 
@@ -165,6 +166,15 @@ export const Template = ({
         );
         break;
 
+      case 'FAILED':
+        statusValue = (
+          <div className={styles.AlignCenter}>
+            <RejectedIcon />
+            {t('Failed')}
+          </div>
+        );
+        break;
+
       default:
         statusValue = status;
     }
@@ -306,7 +316,7 @@ export const Template = ({
   }
 
   const filterTemplateStatus = (
-    <>
+    <div className={styles.FilterContainer}>
       <FormControl className={styles.FormStyle}>
         <Select
           aria-label="template-type"
@@ -323,6 +333,7 @@ export const Template = ({
           ))}
         </Select>
       </FormControl>
+      <HelpIcon darkIcon={false} helpData={templateStatusInfo} />
       <AutoComplete
         isFilterType
         placeholder="Select tag"
@@ -338,7 +349,7 @@ export const Template = ({
         }}
       />
       {syncHSMButton}
-    </>
+    </div>
   );
 
   let appliedFilters = templateFilters;

src/containers/Template/Template.test.helper.ts

@@ -327,8 +327,7 @@ const createHsmWithButtontemplate = {
         isHsm: true,
         languageId: '1',
         hasButtons: true,
-        buttons:
-          '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
+        buttons: '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
         buttonType: 'QUICK_REPLY',
         translations: '{}',
         allowTemplateCategoryChange: false,
@@ -354,8 +353,7 @@ const createHsmWithButtontemplate = {
           category: 'ACCOUNT_UPDATE',
           example: 'Hi [Glific], How are you',
           hasButtons: true,
-          buttons:
-            '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
+          buttons: '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
           buttonType: 'QUICK_REPLY',
           allowTemplateCategoryChange: false,
         },
@@ -829,6 +827,7 @@ export const HSM_LIST = [
           getHSMTemplate('1', 'APPROVED', 'UNKNOWN'),
           getHSMTemplate('2', 'PENDING'),
           getHSMTemplate('3', 'REJECTED'),
+          getHSMTemplate('4', 'FAILED'),
         ],
       },
     },

src/i18n/en/en.json

@@ -530,5 +530,6 @@
   "Add Files": "Add Files",
   "Add files to file search": "Add files to file search",
   "First name is required.": "First Name is required.",
-  "Last name is required.": "Last name is required."
+  "Last name is required.": "Last name is required.",
+  "Failed": "Failed"
 }