Update chat templates

src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx

@@ -135,6 +135,18 @@ export const ChatInput: React.SFC<ChatInputProps> = (props) => {
   const handleSelectText = (obj: any) => {
     // Conversion from HTML text to EditorState
     setEditorState(EditorState.createWithContent(WhatsAppToDraftEditor(obj.body)));
+
+    // Add attachment if present
+    if (Object.prototype.hasOwnProperty.call(obj, 'MessageMedia') && obj.MessageMedia) {
+      const type = obj.type ? obj.type : obj.MessageMedia.type;
+      setAttachmentAdded(true);
+      setAttachmentURL(obj.MessageMedia.sourceUrl);
+      setAttachmentType(type);
+    } else {
+      setAttachmentAdded(false);
+      setAttachmentURL('');
+      setAttachmentType('');
+    }
   };
 
   const handleSearch = (e: any) => {

src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css

@@ -29,6 +29,7 @@
 
 .Text {
   margin: 0;
+  width: calc(100% - 30px);
 }
 
 .PopperListItem {
@@ -42,3 +43,8 @@
 .Paper {
   border-radius: 25px 25px 0px 0px;
 }
+
+.AttachmentPin {
+  text-align: right;
+  width: 30px;
+}

src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
 import { List, ListItem, Divider, Paper, Typography } from '@material-ui/core';
 
 import styles from './ChatTemplates.module.css';
+import { ReactComponent as AttachmentIconUnselected } from '../../../../assets/images/icons/Attachment/Attachment.svg';
 import { FILTER_TEMPLATES } from '../../../../graphql/queries/Template';
 import { WhatsAppToJsx } from '../../../../common/RichEditor';
 import { setVariables } from '../../../../common/constants';
@@ -25,9 +26,19 @@ export const ChatTemplates: React.SFC<ChatTemplatesProps> = (props) => {
   if (error || data.sessionTemplates === undefined) return <p>Error :(</p>;
 
   const popperItems = () => {
-    const templateObjs = data.sessionTemplates;
+    const translationsObj: any = [];
+    data.sessionTemplates.forEach((obj: any) => {
+      const translations = JSON.parse(obj.translations);
+      // add translation in list
+      if (Object.keys(translations).length > 0) {
+        Object.keys(translations).forEach((key) => {
+          translationsObj.push(translations[key]);
+        });
+      }
+    });
+    const templateObj = [...data.sessionTemplates, ...translationsObj];
     const text = props.isTemplate ? 'templates' : 'speed sends';
-    const listItems = templateObjs.map((obj: any, index: number) => {
+    const listItems = templateObj.map((obj: any, index: number) => {
       const key = index;
       if (obj.isHsm === props.isTemplate) {
         // True HSM === Template, False HSM === Speed send
@@ -44,6 +55,11 @@ export const ChatTemplates: React.SFC<ChatTemplatesProps> = (props) => {
                 <b style={{ marginRight: '5px' }}>{obj.label}:</b>
                 <span>{WhatsAppToJsx(obj.body)}</span>
               </p>
+              {obj.MessageMedia ? (
+                <div className={styles.AttachmentPin}>
+                  <AttachmentIconUnselected />
+                </div>
+              ) : null}
             </ListItem>
             <Divider light />
           </div>

src/containers/Form/FormLayout.tsx

@@ -16,7 +16,6 @@ import { SEARCH_QUERY } from '../../graphql/queries/Search';
 import { USER_LANGUAGES } from '../../graphql/queries/Organization';
 import { ReactComponent as DeleteIcon } from '../../assets/images/icons/Delete/White.svg';
 import { ReactComponent as BackIcon } from '../../assets/images/icons/Back.svg';
-import { CREATE_MEDIA_MESSAGE } from '../../graphql/mutations/Chat';
 
 export interface FormLayoutProps {
   match: any;
@@ -52,6 +51,7 @@ export interface FormLayoutProps {
   getLanguageId?: any;
   backLinkButton?: any;
   isAttachment?: boolean;
+  getMediaId?: any;
 }
 
 export const FormLayout: React.SFC<FormLayoutProps> = ({
@@ -88,6 +88,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
   getLanguageId,
   backLinkButton,
   isAttachment = false,
+  getMediaId,
 }: FormLayoutProps) => {
   const client = useApolloClient();
   const [showDialog, setShowDialog] = useState(false);
@@ -182,9 +183,6 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
     },
   });
 
-  // create media for attachment
-  const [createMediaMessage] = useMutation(CREATE_MEDIA_MESSAGE);
-
   const [createItem] = useMutation(createItemQuery, {
     onCompleted: (data) => {
       const itemCreated = `create${camelCaseItem}`;
@@ -222,36 +220,21 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
     return null;
   }
 
-  const getMediaId = (payload: any) => {
-    createMediaMessage({
-      variables: {
-        input: {
-          caption: payload.body,
-          sourceUrl: payload.attachmentURL,
-          url: payload.attachmentURL,
+  const performTask = (payload: any) => {
+    if (itemId) {
+      updateItem({
+        variables: {
+          id: itemId,
+          input: payload,
         },
-      },
-    }).then((data) => {
-      if (data) {
-        const payloadCopy = payload;
-        delete payloadCopy.attachmentURL;
-        payloadCopy.messageMediaId = parseInt(data.data.createMessageMedia.messageMedia.id, 10);
-        if (itemId) {
-          updateItem({
-            variables: {
-              id: itemId,
-              input: payloadCopy,
-            },
-          });
-        } else {
-          createItem({
-            variables: {
-              input: payloadCopy,
-            },
-          });
-        }
-      }
-    });
+      });
+    } else {
+      createItem({
+        variables: {
+          input: payload,
+        },
+      });
+    }
   };
 
   const saveHandler = ({ languageId: languageIdValue, ...itemData }: any) => {
@@ -288,20 +271,20 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
     });
     // for template create media for attachment
     if (isAttachment && payload.type !== 'TEXT' && payload.type) {
-      getMediaId(payload);
-    } else if (itemId) {
-      updateItem({
-        variables: {
-          id: itemId,
-          input: payload,
-        },
-      });
+      getMediaId(payload)
+        .then((data: any) => {
+          if (data) {
+            const payloadCopy = payload;
+            delete payloadCopy.attachmentURL;
+            payloadCopy.messageMediaId = parseInt(data.data.createMessageMedia.messageMedia.id, 10);
+            performTask(payloadCopy);
+          }
+        })
+        .catch((e: any) => {
+          setErrorMessage(client, e);
+        });
     } else {
-      createItem({
-        variables: {
-          input: payload,
-        },
-      });
+      performTask(payload);
     }
   };
 

src/containers/Template/Form/Template.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import * as Yup from 'yup';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
 import { EditorState } from 'draft-js';
 
 import { Input } from '../../../components/UI/Form/Input/Input';
@@ -16,6 +16,7 @@ import {
 import { MEDIA_MESSAGE_TYPES } from '../../../common/constants';
 import { USER_LANGUAGES } from '../../../graphql/queries/Organization';
 import { AutoComplete } from '../../../components/UI/Form/AutoComplete/AutoComplete';
+import { CREATE_MEDIA_MESSAGE } from '../../../graphql/mutations/Chat';
 
 const FormSchema = Yup.object().shape({
   label: Yup.string().required('Title is required.').max(50, 'Title is length too long.'),
@@ -31,10 +32,6 @@ const pattern = /[^{}]+(?=})/g;
 
 const dialogMessage = ' It will stop showing when you are drafting a customized message.';
 
-const defaultTypeAttribute = {
-  // type: 'TEXT',
-};
-
 const queries = {
   getItemQuery: GET_TEMPLATE,
   createItemQuery: CREATE_TEMPLATE,
@@ -93,11 +90,6 @@ const Template: React.SFC<TemplateProps> = (props) => {
     }
   };
 
-  let attributesObject = defaultTypeAttribute;
-  if (defaultAttribute) {
-    attributesObject = { ...attributesObject, ...defaultAttribute };
-  }
-
   const { data: languages } = useQuery(USER_LANGUAGES, {
     variables: { opts: { order: 'ASC' } },
   });
@@ -115,6 +107,9 @@ const Template: React.SFC<TemplateProps> = (props) => {
 
   const [getSessionTemplate, { data: template }] = useLazyQuery<any>(GET_TEMPLATE);
 
+  // create media for attachment
+  const [createMediaMessage] = useMutation(CREATE_MEDIA_MESSAGE);
+
   useEffect(() => {
     if (Object.prototype.hasOwnProperty.call(match.params, 'id') && match.params.id) {
       getSessionTemplate({ variables: { id: match.params.id } });
@@ -177,8 +172,8 @@ const Template: React.SFC<TemplateProps> = (props) => {
           language: value,
           label: translationsCopy[Id].label,
           body: translationsCopy[Id].body,
-          type: translationsCopy[Id].type,
-          MessageMedia: { sourceUrl: translationsCopy[Id].attachmentURL },
+          type: translationsCopy[Id].MessageMedia ? translationsCopy[Id].MessageMedia.type : null,
+          MessageMedia: translationsCopy[Id].MessageMedia,
         });
       } else {
         setStates({
@@ -262,11 +257,16 @@ const Template: React.SFC<TemplateProps> = (props) => {
         payloadCopy.type = payloadCopy.type.id || 'TEXT';
 
         delete payloadCopy.language;
-
-        if (payloadCopy.type.id === 'TEXT') {
+        if (payloadCopy.type === 'TEXT') {
           delete payloadCopy.attachmentURL;
         }
       } else {
+        let messageMedia = null;
+        if (payloadCopy.type && payloadCopy.attachmentURL)
+          messageMedia = {
+            type: payloadCopy.type.id,
+            sourceUrl: payloadCopy.attachmentURL,
+          };
         // Update template translation
         if (translations) {
           translationsCopy = JSON.parse(translations);
@@ -276,8 +276,8 @@ const Template: React.SFC<TemplateProps> = (props) => {
             label: payloadCopy.label,
             body: convertToWhatsApp(payloadCopy.body),
             numberParameters: numberParameters ? numberParameters.length : 0,
-            type: payloadCopy.type.id,
-            attachmentURL: payloadCopy.attachmentURL || null,
+            MessageMedia: messageMedia,
+            ...defaultAttribute,
           };
         }
         payloadCopy = {
@@ -301,6 +301,20 @@ const Template: React.SFC<TemplateProps> = (props) => {
     return payloadCopy;
   };
 
+  // create media for attachment
+  const getMediaId = async (payload: any) => {
+    const data = await createMediaMessage({
+      variables: {
+        input: {
+          caption: payload.body,
+          sourceUrl: payload.attachmentURL,
+          url: payload.attachmentURL,
+        },
+      },
+    });
+    return data;
+  };
+
   return (
     <FormLayout
       {...queries}
@@ -315,10 +329,11 @@ const Template: React.SFC<TemplateProps> = (props) => {
       redirectionLink={redirectionLink}
       listItem="sessionTemplate"
       icon={icon}
-      defaultAttribute={attributesObject}
+      defaultAttribute={defaultAttribute}
       getLanguageId={getLanguageId}
       languageSupport={false}
       isAttachment
+      getMediaId={getMediaId}
     />
   );
 };