Merge pull request #834 from glific/hsm-enhancement

Reverted translations for HSM

src/components/UI/Form/AutoComplete/AutoComplete.module.css

@@ -3,6 +3,10 @@
   padding: 8px 0px;
 }
 
+.Input label {
+  color: #93a29b !important;
+}
+
 .Chip {
   background-color: #e2f1ea !important;
 }

src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts

@@ -38,6 +38,42 @@ const contactSearchQuery = {
   },
 };
 
+const contactSearchQueryForBlock = {
+  request: {
+    query: CONTACT_SEARCH_QUERY,
+    variables: {
+      filter: {
+        name: '',
+        status: 'BLOCKED',
+      },
+      opts: {
+        limit: 50,
+        offset: 0,
+        order: 'ASC',
+      },
+    },
+  },
+  result: {
+    data: {
+      contacts: [
+        {
+          id: '1',
+          name: 'Default receiver',
+          phone: '99399393303',
+          maskedPhone: '99399393303',
+          groups: [
+            {
+              id: '1',
+              label: 'Default group',
+            },
+          ],
+          status: 'BLOCKED',
+        },
+      ],
+    },
+  },
+};
+
 const contactCountQuery = {
   request: {
     query: GET_CONTACT_COUNT,
@@ -59,6 +95,7 @@ export const CONTACT_LIST_MOCKS = [
   contactSearchQuery,
   contactSearchQuery,
   contactSearchQuery,
+  contactSearchQueryForBlock,
   updateContactStatusQuery,
   contactCountQuery,
   {

src/containers/Form/FormLayout.tsx

@@ -52,6 +52,7 @@ export interface FormLayoutProps {
   backLinkButton?: any;
   isAttachment?: boolean;
   getMediaId?: any;
+  customStyles?: any;
 }
 
 export const FormLayout: React.SFC<FormLayoutProps> = ({
@@ -89,6 +90,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
   backLinkButton,
   isAttachment = false,
   getMediaId,
+  customStyles = null,
 }: FormLayoutProps) => {
   const client = useApolloClient();
   const [showDialog, setShowDialog] = useState(false);
@@ -98,6 +100,8 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
   const [action, setAction] = useState(false);
   const [link, setLink] = useState(undefined);
   const [deleted, setDeleted] = useState(false);
+  const [saveClick, onSaveClick] = useState(false);
+
   const capitalListItemName = listItemName[0].toUpperCase() + listItemName.slice(1);
   let item: any = null;
   const itemId = match.params.id ? match.params.id : false;
@@ -170,8 +174,10 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
         }
         setNotification(client, message);
       }
+      onSaveClick(false);
     },
     onError: (e: ApolloError) => {
+      onSaveClick(false);
       setErrorMessage(client, e);
       return null;
     },
@@ -201,6 +207,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
         // display successful message after create
         setNotification(client, `${capitalListItemName} created successfully!`);
       }
+      onSaveClick(false);
     },
     refetchQueries: () => {
       if (refetchQueries) {
@@ -209,6 +216,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
       return [];
     },
     onError: (e: ApolloError) => {
+      onSaveClick(false);
       setErrorMessage(client, e);
       return null;
     },
@@ -361,10 +369,11 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
         validationSchema={validationSchema}
         onSubmit={(itemData) => {
           saveHandler(itemData);
+          onSaveClick(true);
         }}
       >
         {({ submitForm }) => (
-          <Form className={styles.Form} data-testid="formLayout">
+          <Form className={[styles.Form, customStyles].join(' ')} data-testid="formLayout">
             {formFieldItems.map((field, index) => {
               const key = index;
               return (
@@ -385,6 +394,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
                 onClick={submitForm}
                 className={styles.Button}
                 data-testid="submitActionButton"
+                loading={saveClick}
               >
                 {button}
               </Button>

src/containers/Template/Form/HSM/HSM.module.css

@@ -2,3 +2,28 @@
   width: 29px;
   height: 29px;
 }
+
+.HSMTemplate > div:nth-child(2n + 1) {
+  display: inline-block !important;
+  width: 48% !important;
+  vertical-align: top !important;
+  margin-left: 2% !important;
+}
+
+.HSMTemplate > div:nth-child(2n) {
+  display: inline-block;
+  width: 48%;
+  vertical-align: top;
+  margin-right: 2%;
+}
+
+.HSMTemplate {
+  width: 90% !important;
+}
+
+.HSMTemplate > div.FormLayout_Buttons,
+.HSMTemplate > div:first-child {
+  display: block !important;
+  width: 100% !important;
+  margin-left: 0% !important;
+}

src/containers/Template/Form/HSM/HSM.test.tsx

@@ -30,7 +30,7 @@ test('check for validations for the HSM form', async () => {
   });
 
   const { queryByText } = within(container.querySelector('form'));
-  const button = queryByText('Save');
+  const button = queryByText('SUBMIT FOR APPROVAL');
   fireEvent.click(button);
   await waitFor(() => {
     expect(queryByText('Title is required.')).toBeInTheDocument();

src/containers/Template/Form/HSM/HSM.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
 
 import styles from './HSM.module.css';
-import { ReactComponent as TemplateIcon } from '../../../../assets/images/icons/Template/Selected.svg';
+import { ReactComponent as TemplateIcon } from '../../../../assets/images/icons/Template/UnselectedDark.svg';
 import Template from '../Template';
+import { AutoComplete } from '../../../../components/UI/Form/AutoComplete/AutoComplete';
+import { Input } from '../../../../components/UI/Form/Input/Input';
+import { EmojiInput } from '../../../../components/UI/Form/EmojiInput/EmojiInput';
+import { GET_HSM_CATEGORIES } from '../../../../graphql/queries/Template';
 
 export interface HSMProps {
   match: any;
@@ -15,13 +20,90 @@ const defaultAttribute = {
 const templateIcon = <TemplateIcon className={styles.TemplateIcon} />;
 
 export const HSM: React.SFC<HSMProps> = ({ match }) => {
+  const [categoryOpns, setCategoryOpn] = useState([]);
+
+  const { data: categoryList } = useQuery(GET_HSM_CATEGORIES);
+
+  useEffect(() => {
+    if (categoryList) {
+      const categoryOpn: any = [];
+      categoryList.whatsappHsmCategories.forEach((categories: any) => {
+        categoryOpn.push({ label: categories, id: categories });
+      });
+
+      setCategoryOpn(categoryOpn);
+    }
+  }, [categoryList]);
+
+  let sessionTemplates: any;
+  const getSessionTemplates = (data: any) => {
+    sessionTemplates = data;
+  };
+
+  const validateShortcode = (value: any) => {
+    let error;
+    if (value) {
+      let found = [];
+      if (sessionTemplates) {
+        // need to check exact shortcode
+        found = sessionTemplates.sessionTemplates.filter(
+          (search: any) => search.shortcode === value
+        );
+        if (match.params.id && found.length > 0) {
+          found = found.filter((search: any) => search.id !== match.params.id);
+        }
+      }
+      if (found.length > 0) {
+        error = 'Shortcode already exists.';
+      }
+    }
+    return error;
+  };
+
+  const formFields = [
+    {
+      component: EmojiInput,
+      name: 'example',
+      placeholder: 'Sample message*',
+      rows: 5,
+      convertToWhatsApp: true,
+      textArea: true,
+      disabled: match.params.id,
+      helperText:
+        'Replace variables eg. {{1}} with actual values enclosed in [ ] eg. [12345] to show a complete message with meaningful word/statement/numbers/ special characters.',
+    },
+    {
+      component: AutoComplete,
+      name: 'category',
+      options: categoryOpns,
+      optionLabel: 'label',
+      multiple: false,
+      textFieldProps: {
+        variant: 'outlined',
+        label: 'Category*',
+      },
+      disabled: match.params.id,
+      helperText: 'Select the most relevant category',
+    },
+    {
+      component: Input,
+      name: 'shortcode',
+      placeholder: 'Element name*',
+      validate: validateShortcode,
+      disabled: match.params.id,
+    },
+  ];
+
   return (
     <Template
       match={match}
       listItemName="HSM Template"
       redirectionLink="template"
       icon={templateIcon}
       defaultAttribute={defaultAttribute}
+      formField={formFields}
+      getSessionTemplatesCallBack={getSessionTemplates}
+      customStyle={styles.HSMTemplate}
     />
   );
 };