Merge pull request #2962 from glific/enhancement/hsm-category-button

Added a checkbox for re-categorisation of HSM template categories
glific · Jul 8, 2024 · 37168cf · 37168cf
2 parents feac4ea + e58ecca
commit 37168cf
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 5 deletions.
diff --git a/src/components/UI/Form/Checkbox/Checkbox.module.css b/src/components/UI/Form/Checkbox/Checkbox.module.css
@@ -29,3 +29,7 @@
   height: 16px;
   width: 16px;
 }
+
+.Disabled {
+  opacity: 60%;
+}
diff --git a/src/components/UI/Form/Checkbox/Checkbox.tsx b/src/components/UI/Form/Checkbox/Checkbox.tsx
@@ -37,7 +37,7 @@ export const Checkbox = ({
   };
 
   return (
-    <div className={`${styles.Checkbox} ${className}`}>
+    <div className={`${styles.Checkbox} ${className} ${disabled && styles.Disabled}`}>
       <FormControlLabel
         control={
           <CheckboxElement

diff --git a/src/containers/Template/Form/HSM/HSM.module.css b/src/containers/Template/Form/HSM/HSM.module.css
@@ -2,3 +2,10 @@
   width: 29px;
   height: 29px;
 }
+
+.IsActive {
+  color: #555555;
+  font-weight: 400;
+  line-height: 18px;
+  font-size: 16px;
+}
diff --git a/src/containers/Template/Form/HSM/HSM.test.tsx b/src/containers/Template/Form/HSM/HSM.test.tsx
@@ -108,6 +108,8 @@ describe('Add mode', () => {
     fireEvent.keyDown(category, { key: 'ArrowDown' });
     fireEvent.keyDown(category, { key: 'Enter' });
 
+    fireEvent.click(screen.getByText('Allow meta to re-categorize template?'));
+
     attachmentType.focus();
     fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });
     fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });

diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx
@@ -12,6 +12,8 @@ import { Loading } from 'components/UI/Layout/Loading/Loading';
 import { Simulator } from 'components/simulator/Simulator';
 import Template from '../Template';
 import styles from './HSM.module.css';
+import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
+import { Typography } from '@mui/material';
 
 const defaultAttribute = {
   isHsm: true,
@@ -31,6 +33,7 @@ export const HSM = () => {
   const [category, setCategory] = useState<any>(undefined);
   const [example, setExample] = useState();
   const [editorState, setEditorState] = useState<any>('');
+  const [allowTemplateCategoryChange, setAllowTemplateCategoryChange] = useState<boolean>(false);
 
   const { t } = useTranslation();
   const params = useParams();
@@ -127,6 +130,18 @@ export const HSM = () => {
         setCategory(event);
       },
     },
+    {
+      component: Checkbox,
+      name: 'allowTemplateCategoryChange',
+      title: (
+        <Typography variant="h6" className={styles.IsActive}>
+          Allow meta to re-categorize template?
+        </Typography>
+      ),
+      darkCheckbox: true,
+      disabled: isEditing,
+      handleChange: (value: boolean) => setAllowTemplateCategoryChange(value),
+    },
     {
       component: Input,
       name: 'shortcode',
@@ -154,6 +169,8 @@ export const HSM = () => {
         category={category}
         onExampleChange={addButtonsToSampleMessage}
         setExampleState={setEditorState}
+        allowTemplateCategoryChange={allowTemplateCategoryChange}
+        setAllowTemplateCategoryChange={setAllowTemplateCategoryChange}
       />
       <Simulator isPreviewMessage message={sampleMessages} simulatorIcon={false} />
     </div>

diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
@@ -117,6 +117,8 @@ export interface TemplateProps {
   onExampleChange?: any;
   languageStyle?: string;
   setExampleState?: any;
+  allowTemplateCategoryChange?: boolean;
+  setAllowTemplateCategoryChange?: any;
 }
 
 interface CallToActionTemplate {
@@ -144,6 +146,8 @@ const Template = ({
   onExampleChange = () => {},
   languageStyle = 'dropdown',
   setExampleState,
+  allowTemplateCategoryChange,
+  setAllowTemplateCategoryChange,
 }: TemplateProps) => {
   // "Audio" option is removed in case of HSM Template
   const mediaTypes =
@@ -221,6 +225,7 @@ const Template = ({
     isActive,
     templateButtons,
     isAddButtonChecked,
+    allowTemplateCategoryChange,
   };
 
   const setStates = ({
@@ -238,6 +243,7 @@ const Template = ({
     buttonType: templateButtonType,
     buttons,
     hasButtons,
+    allowTemplateCategoryChange: allowCategoryChangeValue,
   }: any) => {
     if (languageOptions.length > 0 && languageIdValue) {
       if (location.state && location.state !== 'copy') {
@@ -258,6 +264,9 @@ const Template = ({
 
     setLabel(labelValue);
     setIsActive(isActiveValue);
+    if (setAllowTemplateCategoryChange) {
+      setAllowTemplateCategoryChange(allowCategoryChangeValue);
+    }
 
     if (typeof bodyValue === 'string') {
       setBody(bodyValue || '');
@@ -748,14 +757,15 @@ const Template = ({
   };
 
   const hsmFields = formField && [
+    ...formFields,
     ...formField.slice(0, 1),
     ...templateRadioOptions,
     ...formField.slice(1),
+    ...attachmentField,
+    tags,
   ];
 
-  const fields = defaultAttribute.isHsm
-    ? [...formFields, ...hsmFields, ...attachmentField, tags]
-    : [...formFields, ...attachmentField];
+  const fields = defaultAttribute.isHsm ? hsmFields : [...formFields, ...attachmentField];
 
   // Creating payload for button template
   const getButtonTemplatePayload = () => {
@@ -816,9 +826,9 @@ const Template = ({
           }
         } else {
           delete payloadCopy.example;
-          delete payloadCopy.isActive;
           delete payloadCopy.shortcode;
           delete payloadCopy.category;
+          delete payloadCopy.allowTemplateCategoryChange;
         }
         if (payloadCopy.type === 'TEXT') {
           delete payloadCopy.attachmentURL;
@@ -874,6 +884,7 @@ const Template = ({
         delete payloadCopy.example;
         delete payloadCopy.shortcode;
         delete payloadCopy.category;
+        delete payloadCopy.allowTemplateCategoryChange;
       }
 
       delete payloadCopy.isAddButtonChecked;

diff --git a/src/containers/Template/Template.test.helper.ts b/src/containers/Template/Template.test.helper.ts
@@ -257,6 +257,7 @@ const getTemplateData = {
       buttonType: null,
       updatedAt: '2020-12-01T18:00:32Z',
       tag: null,
+      allowTemplateCategoryChange: false,
     },
   },
 };
@@ -281,6 +282,7 @@ const createHsmWithButtontemplate = {
           '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
         buttonType: 'QUICK_REPLY',
         translations: '{}',
+        allowTemplateCategoryChange: false,
       },
     },
   },
@@ -306,6 +308,7 @@ const createHsmWithButtontemplate = {
           buttons:
             '[{"type":"QUICK_REPLY","text":"Quick reply 1"},{"type":"QUICK_REPLY","text":"Quick reply 2"}]',
           buttonType: 'QUICK_REPLY',
+          allowTemplateCategoryChange: true,
         },
         errors: null,
       },
@@ -332,6 +335,7 @@ const createHsmWithPhonetemplate = {
         buttons: '[{"type":"PHONE_NUMBER","text":"Call me","phone_number":"9876543210"}]',
         buttonType: 'CALL_TO_ACTION',
         translations: '{}',
+        allowTemplateCategoryChange: false,
       },
     },
   },
@@ -356,6 +360,7 @@ const createHsmWithPhonetemplate = {
           hasButtons: true,
           buttons: '[{"type":"PHONE_NUMBER","text":"Call me","phone_number":"9876543210"}]',
           buttonType: 'CALL_TO_ACTION',
+          allowTemplateCategoryChange: false,
         },
         errors: null,
       },
@@ -380,6 +385,7 @@ const createHSMtemplate = {
         languageId: '1',
         translations: '{}',
         messageMediaId: 5,
+        allowTemplateCategoryChange: true,
       },
     },
   },
@@ -404,6 +410,7 @@ const createHSMtemplate = {
           hasButtons: false,
           buttons: null,
           buttonType: null,
+          allowTemplateCategoryChange: true,
         },
         errors: null,
       },
@@ -587,6 +594,7 @@ const getHSMTemplate = (id: string, status: string) => ({
   type: 'TEXT',
   numberParameters: 2,
   updatedAt: '2021-07-28T08:00:24Z',
+  allowTemplateCategoryChange: true,
 });
 
 export const HSM_LIST = [

diff --git a/src/graphql/mutations/Template.ts b/src/graphql/mutations/Template.ts
@@ -36,6 +36,7 @@ export const CREATE_TEMPLATE = gql`
         hasButtons
         buttons
         buttonType
+        allowTemplateCategoryChange
       }
       errors {
         key
@@ -70,6 +71,7 @@ export const UPDATE_TEMPLATE = gql`
         hasButtons
         buttons
         buttonType
+        allowTemplateCategoryChange
       }
     }
   }

diff --git a/src/graphql/queries/Template.ts b/src/graphql/queries/Template.ts
@@ -70,6 +70,7 @@ export const GET_TEMPLATE = gql`
         hasButtons
         buttons
         buttonType
+        allowTemplateCategoryChange
       }
     }
   }

diff --git a/src/mocks/Template.tsx b/src/mocks/Template.tsx
@@ -277,6 +277,7 @@ export const templateEditMock = (templateId: string, buttons: any) => ({
             '{"2":{"uuid":"0de5b294-0385-48d0-bdc0-53cc833a31c5","status":"APPROVED","number_parameters":1,"language_id":2,"label":"Account Balance","example":" अब आप नीचे दिए विकल्पों में से एक का चयन करके [003] के साथ समाप्त होने वाले खाते के लिए अपना खाता शेष या मिनी स्टेटमेंट देख सकते हैं। | [अकाउंट बैलेंस देखें] | [देखें मिनी स्टेटमेंट]","body":" अब आप नीचे दिए विकल्पों में से एक का चयन करके {{1}} के साथ समाप्त होने वाले खाते के लिए अपना खाता शेष या मिनी स्टेटमेंट देख सकते हैं। | [अकाउंट बैलेंस देखें] | [देखें मिनी स्टेटमेंट]"}}',
           type: 'TEXT',
           updatedAt: '2024-03-28T10:41:16Z',
+          allowTemplateCategoryChange: true,
           ...buttons,
         },
       },
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,6 +70,7 @@ export const GET_TEMPLATE = gql` @@
             hasButtons
             buttons
             buttonType
+            allowTemplateCategoryChange
           }
         }
       }
@@ Expand Down @@