added helptext for rejected/failed templates

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

@@ -64,6 +64,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
+}
+
+.AlignCenter span {
+  display: flex;
+  align-items: flex-start;
 }
 
 .Status svg {

src/containers/Template/List/Template.tsx

@@ -23,6 +23,7 @@ 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';
@@ -59,6 +60,10 @@ const getCategory = (category: string) => {
   return <p className={styles.TableText}>{capitalizeFirstLetter(categoryName)}</p>;
 };
 
+const failedInfo = "The template has failed the review process at Gupshup's end.";
+const rejectedInfo =
+  'The template has failed to be reviewed due to violations of the approval criteria. This status requires revising and resubmitting the template.';
+
 export interface TemplateProps {
   title: string;
   listItem: string;
@@ -159,8 +164,33 @@ export const Template = ({
       case 'REJECTED':
         statusValue = (
           <div className={styles.AlignCenter}>
-            <RejectedIcon />
-            {t('Rejected')}
+            <span>
+              <RejectedIcon />
+              {t('Rejected')}
+            </span>
+            <HelpIcon
+              darkIcon={false}
+              helpData={{
+                heading: rejectedInfo,
+              }}
+            />
+          </div>
+        );
+        break;
+
+      case 'FAILED':
+        statusValue = (
+          <div className={styles.AlignCenter}>
+            <span>
+              <RejectedIcon />
+              {t('Failed')}
+            </span>
+            <HelpIcon
+              darkIcon={false}
+              helpData={{
+                heading: failedInfo,
+              }}
+            />
           </div>
         );
         break;

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"
 }