Merge pull request #2936 from glific/fix/speed-sends

Fixed message in speed sends
glific · Jun 28, 2024 · 622f256 · 622f256
2 parents 936c6a9 + 1304e0e
commit 622f256
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 73 deletions.
diff --git a/src/common/RichEditor.tsx b/src/common/RichEditor.tsx
@@ -33,7 +33,7 @@ export const handleFormatting = (text: string, formatter: string) => {
   }
 };
 
-export const setInitialState = (editor: any, initialValue: any) => {
+export const setDefaultValue = (editor: any, initialValue: any) => {
   editor.update(() => {
     const root = $getRoot();
     root.clear();

diff --git a/src/components/UI/Form/EmojiInput/Editor.test.tsx b/src/components/UI/Form/EmojiInput/Editor.test.tsx
@@ -10,17 +10,16 @@ const mockIntersectionObserver = class {
   disconnect() {}
 };
 
-const lexicalChange = vi.fn;
+const handleChange = vi.fn;
 
 (window as any).IntersectionObserver = mockIntersectionObserver;
 
 const wrapper = (
   <LexicalWrapper>
     <Editor
-      isEditing={false}
       field={{ name: 'body', value: '', onBlur: () => {} }}
       placeholder={''}
-      onChange={lexicalChange}
+      onChange={handleChange}
     />
   </LexicalWrapper>
 );

diff --git a/src/components/UI/Form/EmojiInput/Editor.tsx b/src/components/UI/Form/EmojiInput/Editor.tsx
@@ -19,39 +19,33 @@ import {
   BeautifulMentionsMenuProps,
   BeautifulMentionsMenuItemProps,
 } from 'lexical-beautiful-mentions';
-import { handleFormatterEvents, handleFormatting, setInitialState } from 'common/RichEditor';
+import { handleFormatterEvents, handleFormatting, setDefaultValue } from 'common/RichEditor';
 
 export interface EditorProps {
-  field: { name: string; onChange?: any; value: any; onBlur: any };
+  field: { name: string; onChange?: any; value: any; onBlur?: any };
   disabled?: any;
-  form?: { touched: any; errors: any };
+  form?: { touched: any; errors: any; setFieldValue: any; values: any };
   placeholder: string;
   helperText?: string;
   picker?: any;
   inputProp?: any;
   onChange?: any;
-  isEditing: boolean;
-  editorState?: any;
+  defaultValue?: any;
 }
 
-export const Editor = ({
-  disabled = false,
-  isEditing = false,
-  editorState,
-  ...props
-}: EditorProps) => {
-  const { field, form, picker, placeholder, onChange } = props;
+export const Editor = ({ disabled = false, ...props }: EditorProps) => {
+  const { field, form, picker, placeholder, onChange, defaultValue } = props;
   const mentions = props.inputProp?.suggestions || [];
   const suggestions = {
     '@': mentions.map((mention: string) => mention?.split('@')[1]),
   };
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
-    if ((field.value || field.value === '') && !editorState && isEditing) {
-      setInitialState(editor, field.value);
+    if (defaultValue) {
+      setDefaultValue(editor, defaultValue);
     }
-  }, [field.value]);
+  }, [defaultValue]);
 
   const Placeholder = () => {
     return <p className={styles.editorPlaceholder}>{placeholder}</p>;
@@ -88,6 +82,7 @@ export const Editor = ({
       const root = $getRoot();
       if (!disabled) {
         onChange(root.getTextContent());
+        form?.setFieldValue(field?.name, root.getTextContent());
       }
     });
   };

diff --git a/src/components/UI/Form/EmojiInput/EmojiInput.tsx b/src/components/UI/Form/EmojiInput/EmojiInput.tsx
@@ -17,9 +17,7 @@ export interface EmojiInputProps {
   rows: number;
   handleChange?: any;
   handleBlur?: any;
-  getEditorValue?: any;
   inputProp?: any;
-  isEditing?: boolean;
   translation?: string;
   editorState?: any;
 }
@@ -33,26 +31,13 @@ interface EmojiPickerProps {
 export const EmojiInput = ({
   field: { value, name, onBlur },
   handleChange,
-  getEditorValue,
   handleBlur,
-  isEditing = false,
   translation,
   editorState,
   ...props
 }: EmojiInputProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
 
-  const lexicalChange = (editorState: any) => {
-    if (handleChange) {
-      handleChange(editorState);
-    }
-    if (getEditorValue) {
-      getEditorValue(editorState);
-    }
-
-    props.form.setFieldValue(name, editorState);
-  };
-
   const handleClickAway = () => {
     setShowEmojiPicker(false);
   };
@@ -67,14 +52,7 @@ export const EmojiInput = ({
 
   const input = (
     <LexicalWrapper>
-      <Editor
-        isEditing={isEditing}
-        editorState={editorState}
-        field={{ name, value, onBlur }}
-        {...props}
-        picker={picker}
-        onChange={lexicalChange}
-      />
+      <Editor field={{ name, value, onBlur }} picker={picker} onChange={handleChange} {...props} />
     </LexicalWrapper>
   );
 

diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx
@@ -175,7 +175,7 @@ export const InteractiveMessage = () => {
     setTitle(data.title);
     setFooter(data.footer || '');
     setBody(data.body || '');
-    setEditorState(null);
+    setEditorState(data.body || '');
     setTemplateType(typeValue);
     setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue));
     setTimeout(() => setTemplateButtons(data.templateButtons), 100);
@@ -245,7 +245,7 @@ export const InteractiveMessage = () => {
     setTitle(titleText);
     setFooter(data.footer || '');
     setBody(data.body || '');
-    setEditorState(null);
+    setEditorState(data.body || '');
     setTemplateType(typeValue);
     setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue));
     setTimeout(() => setTemplateButtons(data.templateButtons), 100);
@@ -546,15 +546,13 @@ export const InteractiveMessage = () => {
       convertToWhatsApp: true,
       textArea: true,
       helperText: t('You can also use variables in message enter @ to see the available list'),
-      getEditorValue: (value: any) => {
+      handleChange: (value: any) => {
         setBody(value);
-        setEditorState(value);
       },
       inputProp: {
         suggestions: contactVariables,
       },
-      isEditing: isEditing,
-      editorState: editorState,
+      defaultValue: isEditing && editorState,
     },
     {
       skip: templateType !== QUICK_REPLY,

diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx
@@ -91,9 +91,9 @@ export const HSM = () => {
   };
 
   const isCopyState = location.state === 'copy';
-  let disabled = false;
+  let isEditing = false;
   if (params.id && !isCopyState) {
-    disabled = true;
+    isEditing = true;
   }
 
   const formFields = [
@@ -104,16 +104,14 @@ export const HSM = () => {
       rows: 5,
       convertToWhatsApp: true,
       textArea: true,
-      disabled,
+      disabled: isEditing,
       helperText:
         'Replace variables eg. {{1}} with actual values enclosed in [ ] eg. [12345] to show a complete message with meaningful word/statement/numbers/ special characters.',
-      handleChange: getSimulatorMessage,
-      getEditorValue: (value: any) => {
+      handleChange: (value: any) => {
         setExample(value);
-        setEditorState(value);
+        getSimulatorMessage(value);
       },
-      isEditing: disabled,
-      editorState: editorState,
+      defaultValue: isEditing && editorState,
     },
     {
       component: AutoComplete,
@@ -123,7 +121,7 @@ export const HSM = () => {
       multiple: false,
       label: `${t('Category')}*`,
       placeholder: `${t('Category')}*`,
-      disabled,
+      disabled: isEditing,
       helperText: t('Select the most relevant category'),
       onChange: (event: any) => {
         setCategory(event);
@@ -134,7 +132,7 @@ export const HSM = () => {
       name: 'shortcode',
       placeholder: `${t('Element name')}*`,
       label: `${t('Element name')}*`,
-      disabled,
+      disabled: isEditing,
       inputProp: {
         onBlur: (event: any) => setShortcode(event.target.value),
       },
@@ -155,6 +153,7 @@ export const HSM = () => {
         setCategory={setCategory}
         category={category}
         onExampleChange={addButtonsToSampleMessage}
+        setExampleState={setEditorState}
       />
       <Simulator isPreviewMessage message={sampleMessages} simulatorIcon={false} />
     </div>

diff --git a/src/containers/Template/Form/Template.test.tsx b/src/containers/Template/Form/Template.test.tsx
@@ -74,6 +74,7 @@ const hsmProps = {
   languageStyle: 'dropdown',
   formField: templateFormHSMFormFields,
   setCategory: vi.fn(),
+  setExampleState: vi.fn(),
 };
 
 const hsmTemplateEdit = (templateId: string) => (

diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
@@ -116,6 +116,7 @@ export interface TemplateProps {
   category?: any;
   onExampleChange?: any;
   languageStyle?: string;
+  setExampleState?: any;
 }
 
 interface CallToActionTemplate {
@@ -142,6 +143,7 @@ const Template = ({
   category,
   onExampleChange = () => {},
   languageStyle = 'dropdown',
+  setExampleState,
 }: TemplateProps) => {
   // "Audio" option is removed in case of HSM Template
   const mediaTypes =
@@ -187,7 +189,7 @@ const Template = ({
   }
 
   // disable fields in edit mode for hsm template
-  if (params.id && !isCopyState && defaultAttribute.isHsm) {
+  if (params.id && !isCopyState) {
     isEditing = true;
   }
 
@@ -259,7 +261,7 @@ const Template = ({
 
     if (typeof bodyValue === 'string') {
       setBody(bodyValue || '');
-      setEditorState(null);
+      setEditorState(bodyValue || '');
     }
 
     if (exampleValue) {
@@ -277,10 +279,12 @@ const Template = ({
         exampleBody = exampleValue;
       }
 
+      if (setExampleState) {
+        setExampleState(exampleValue);
+      }
       setExample(exampleValue);
       onExampleChange(exampleBody);
     }
-
     if (hasButtons) {
       setIsAddButtonChecked(hasButtons);
     }
@@ -300,7 +304,7 @@ const Template = ({
         const content = translationsCopy[currentLanguage];
         setLabel(content.label);
         setBody(content.body || '');
-        setEditorState(null);
+        setEditorState(bodyValue || '');
       }
       setTranslations(translationsValue);
     }
@@ -312,7 +316,7 @@ const Template = ({
     if (shortcodeValue) {
       setTimeout(() => setShortcode(shortcodeValue), 0);
     }
-    if (categoryValue) {
+    if (categoryValue && setCategory) {
       setCategory({ label: categoryValue, id: categoryValue });
     }
     if (tagIdValue) {
@@ -335,7 +339,7 @@ const Template = ({
 
     if (typeof bodyValue === 'string') {
       setBody(bodyValue || '');
-      setEditorState(null);
+      setEditorState(bodyValue || '');
     }
 
     if (typeValue && typeValue !== 'TEXT') {
@@ -594,7 +598,7 @@ const Template = ({
       optionLabel: 'label',
       multiple: false,
       label: t('Attachment Type'),
-      disabled: isEditing,
+      disabled: defaultAttribute.isHsm && isEditing,
       helperText: warning,
       onChange: (event: any) => {
         const val = event;
@@ -610,7 +614,7 @@ const Template = ({
       type: 'text',
       label: t('Attachment URL'),
       validate: () => isUrlValid,
-      disabled: isEditing,
+      disabled: defaultAttribute.isHsm && isEditing,
       helperText: t(
         'Please provide a sample attachment for approval purpose. You may send a similar but different attachment when sending the HSM to users.'
       ),
@@ -663,7 +667,7 @@ const Template = ({
       component: Input,
       name: 'label',
       label: t('Title'),
-      disabled: isEditing,
+      disabled: defaultAttribute.isHsm && isEditing,
       helperText: defaultAttribute.isHsm
         ? t('Define what use case does this template serve eg. OTP, optin, activity preference')
         : null,
@@ -679,16 +683,14 @@ const Template = ({
       rows: 5,
       convertToWhatsApp: true,
       textArea: true,
-      disabled: isEditing,
+      disabled: defaultAttribute.isHsm && isEditing,
       helperText: defaultAttribute.isHsm
         ? 'You can also use variable and interactive actions. Variable format: {{1}}, Button format: [Button text,Value] Value can be a URL or a phone number.'
         : null,
-      getEditorValue: (value: any) => {
+      handleChange: (value: any) => {
         setBody(value);
-        setEditorState(value);
       },
-      isEditing: isEditing,
-      editorState: editorState,
+      defaultValue: isEditing && editorState,
     },
   ];
 
@@ -870,7 +872,6 @@ const Template = ({
         }
       } else {
         delete payloadCopy.example;
-        delete payloadCopy.isActive;
         delete payloadCopy.shortcode;
         delete payloadCopy.category;
       }