Merge pull request #2984 from glific/enhancement/hsm-rating

Added hsm rating
glific · Jul 20, 2024 · 23298f6 · 23298f6
2 parents d22af88 + be368e9
commit 23298f6
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 3 deletions.
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -272,3 +272,7 @@ export const getContactStatus = (contact: {
 
   return statusMessage;
 };
+
+export const capitalizeFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
diff --git a/src/containers/Template/List/Template.module.css b/src/containers/Template/List/Template.module.css
@@ -26,12 +26,27 @@
   text-align: end;
 }
 
+.LabelContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}
+
 .LabelText {
   font-weight: 500;
   font-size: 17px;
   word-break: break-all;
 }
 
+.Quality {
+  font-size: 12px;
+  width: fit-content;
+  padding: 2px 6px;
+  background: #f0f7f1;
+  color: #555555;
+  border-radius: 8px;
+}
+
 .TableText {
   text-align: left;
   font-size: 14px;
@@ -129,3 +144,8 @@
 .FormStyle {
   width: 150px !important;
 }
+
+.Category {
+  width: 20%;
+  min-width: 100px;
+}
diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx
@@ -8,6 +8,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import { List } from 'containers/List/List';
 import { WhatsAppToJsx } from 'common/RichEditor';
 import { STANDARD_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants';
+import { capitalizeFirstLetter } from 'common/utils';
 import {
   GET_TEMPLATES_COUNT,
   FILTER_TEMPLATES,
@@ -37,7 +38,12 @@ import { speedSendInfo, templateInfo } from 'common/HelpData';
 import styles from './Template.module.css';
 import { RaiseToGupShup } from './RaiseToGupshupDialog/RaiseToGupShup';
 
-const getLabel = (label: string) => <div className={styles.LabelText}>{label}</div>;
+const getLabel = (label: string, quality?: string) => (
+  <div className={styles.LabelContainer}>
+    <div className={styles.LabelText}>{label}</div>
+    <div className={styles.Quality}>{quality || 'Not Rated'}</div>
+  </div>
+);
 
 const getBody = (text: string) => <p className={styles.TableText}>{WhatsAppToJsx(text)}</p>;
 
@@ -55,6 +61,12 @@ const getTranslations = (language: any, data: string) => {
   return JSON.stringify(dataObj);
 };
 
+const getCategory = (category: string) => {
+  // let's make category more user friendly
+  let categoryName = category.split('_').join(' ').toLowerCase();
+  return <p className={styles.TableText}>{capitalizeFirstLetter(categoryName)}</p>;
+};
+
 export interface TemplateProps {
   title: string;
   listItem: string;
@@ -176,6 +188,7 @@ export const Template = ({
   ];
 
   if (isHSM) {
+    columnNames.push({ name: 'category', label: t('Category') });
     columnNames.push({ name: 'status', label: t('Status') });
     if (filters.REJECTED) {
       columnNames.push({ label: t('Reason') });
@@ -189,7 +202,13 @@ export const Template = ({
   let columnStyles: any = [styles.Name, styles.Body];
 
   columnStyles = isHSM
-    ? [...columnStyles, styles.Status, ...(filters.REJECTED ? [styles.Reason] : []), styles.Actions]
+    ? [
+        ...columnStyles,
+        styles.Category,
+        styles.Status,
+        ...(filters.REJECTED ? [styles.Reason] : []),
+        styles.Actions,
+      ]
     : [...columnStyles, styles.LastModified, styles.Actions];
 
   const getColumns = ({
@@ -201,13 +220,17 @@ export const Template = ({
     translations,
     status,
     reason,
+    quality,
+    category,
   }: any) => {
     const columns: any = {
       id,
-      label: getLabel(label),
+      label: getLabel(label, quality),
       body: getBody(body),
     };
+
     if (isHSM) {
+      columns.category = getCategory(category);
       columns.status = getStatus(status);
       if (filters.REJECTED) {
         columns.reason = getReason(reason);

diff --git a/src/containers/Template/Template.test.helper.ts b/src/containers/Template/Template.test.helper.ts
@@ -39,6 +39,8 @@ const SpeedSendsSessionTemplates = [
     isActive: false,
     updatedAt: '2020-12-01T18:00:28Z',
     numberParameters: 0,
+    cateory: null,
+    quality: null,
     translations:
       '{"2":{"status":"approved","languageId":{"localized":true,"locale":"hi","label":"Hindi","id":"2","__typename":"Language"},"label":"आप ग्लिफ़िक के लिए कितने उत्साहित हैं?","isHsm":false,"body":"यह संदेश है\\n","MessageMedia":null}}',
     type: 'TEXT',
@@ -97,6 +99,8 @@ const HSMSessionTemplates = [
     translations: '{}',
     type: 'TEXT',
     numberParameters: 2,
+    quality: 'high',
+    cateory: 'MARKETING',
     language: {
       id: '1',
       label: 'Hindi',
@@ -141,6 +145,8 @@ const sessionTemplates = [
     isReserved: false,
     translations: '{}',
     type: 'TEXT',
+    quality: null,
+    cateory: null,
     language: {
       id: '1',
       label: 'Hindi',
@@ -203,6 +209,8 @@ const filterTemplateQuery = {
           isReserved: false,
           updatedAt: '2020-12-01T18:00:32Z',
           translations: '{}',
+          quality: null,
+          cateory: null,
         },
       ],
     },
@@ -779,10 +787,12 @@ const getHSMTemplate = (id: string, status: string) => ({
   isHsm: true,
   isReserved: false,
   label: 'Account Balance',
+  category: 'ACCOUNT_UPDATE',
   language: { id: '1', label: 'English' },
   shortcode: 'account_balance',
   status,
   reason: 'test reason',
+  quality: null,
   translations:
     '{"2":{"number_parameters":1,"language_id":2,"body":" अब आप नीचे दिए विकल्पों में से एक का चयन करके {{1}} के साथ समाप्त होने वाले खाते के लिए अपना खाता शेष या मिनी स्टेटमेंट देख सकते हैं। | [अकाउंट बैलेंस देखें] | [देखें मिनी स्टेटमेंट]"}}',
   type: 'TEXT',

diff --git a/src/graphql/queries/Template.ts b/src/graphql/queries/Template.ts
@@ -8,6 +8,8 @@ const templateFields = `
     updatedAt
     translations
     type
+    quality
+    category
     language {
       id
       label

diff --git a/src/mocks/Template.tsx b/src/mocks/Template.tsx
@@ -27,6 +27,7 @@ export const TEMPLATE_MOCKS = [
       label: 'Good message',
       body: 'Hey there',
       shortcode: 'test',
+      category: 'ACCOUNT_UPDATE',
       isReserved: true,
       status: 'APPROVED',
       reason: 'test reason',
@@ -79,6 +80,7 @@ export const TEMPLATE_MOCKS = [
       bspId: null,
       label: 'Good message',
       body: 'Hey there',
+      category: 'ACCOUNT_UPDATE',
       shortcode: 'test',
       isReserved: true,
       isHsm: true,
@@ -105,6 +107,7 @@ export const TEMPLATE_MOCKS = [
       bspId: null,
       body: 'some description',
       shortcode: 'test',
+      category: 'ACCOUNT_UPDATE',
       isReserved: true,
       isHsm: false,
       isActive: true,
@@ -133,6 +136,7 @@ export const TEMPLATE_MOCKS = [
       label: 'Good message',
       bspId: null,
       body: 'hi can you help!',
+      category: 'ACCOUNT_UPDATE',
       shortcode: 'test',
       isReserved: true,
       isHsm: true,