Merge pull request #2832 from glific/bug/interactive-messages

Interactive message translation

src/common/RichEditor.tsx

@@ -2,6 +2,7 @@ import CallIcon from '@mui/icons-material/Call';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Interweave } from 'interweave';
 import { UrlMatcher } from 'interweave-autolink';
+import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
 
 // Indicates how to replace different parts of the text from WhatsApp to HTML.
 const regexForLink =
@@ -32,6 +33,16 @@ export const handleFormatting = (text: string, formatter: string) => {
   }
 };
 
+export const setInitialState = (editor: any, initialValue: any) => {
+  editor.update(() => {
+    const root = $getRoot();
+    root.clear();
+    const paragraph = $createParagraphNode();
+    paragraph.append($createTextNode(initialValue || ''));
+    root.append(paragraph);
+  });
+};
+
 const isAlphanumeric = (c: any) => {
   const x = c.charCodeAt();
   return (x >= 65 && x <= 90) || (x >= 97 && x <= 122) || (x >= 48 && x <= 57);

src/components/UI/Form/EmojiInput/Editor.tsx

@@ -1,12 +1,11 @@
 import styles from './Editor.module.css';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import {
   $getSelection,
   $createTextNode,
   $getRoot,
-  $createParagraphNode,
   KEY_DOWN_COMMAND,
   COMMAND_PRIORITY_LOW,
 } from 'lexical';
@@ -20,7 +19,7 @@ import {
   BeautifulMentionsMenuProps,
   BeautifulMentionsMenuItemProps,
 } from 'lexical-beautiful-mentions';
-import { handleFormatterEvents, handleFormatting } from 'common/RichEditor';
+import { handleFormatterEvents, handleFormatting, setInitialState } from 'common/RichEditor';
 
 export interface EditorProps {
   field: { name: string; onChange?: any; value: any; onBlur: any };
@@ -32,10 +31,15 @@ export interface EditorProps {
   inputProp?: any;
   onChange?: any;
   isEditing: boolean;
+  editorState?: any;
 }
 
-export const Editor = ({ disabled = false, isEditing = false, ...props }: EditorProps) => {
-  const [editorState, setEditorState] = useState<any>('');
+export const Editor = ({
+  disabled = false,
+  isEditing = false,
+  editorState,
+  ...props
+}: EditorProps) => {
   const { field, form, picker, placeholder, onChange } = props;
   const mentions = props.inputProp?.suggestions || [];
   const suggestions = {
@@ -44,14 +48,8 @@ export const Editor = ({ disabled = false, isEditing = false, ...props }: Editor
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
-    if (field.value && isEditing && !editorState) {
-      editor.update(() => {
-        const root = $getRoot();
-        root.clear();
-        const paragraph = $createParagraphNode();
-        paragraph.append($createTextNode(field.value || ''));
-        root.append(paragraph);
-      });
+    if (field.value && !editorState && isEditing) {
+      setInitialState(editor, field.value);
     }
   }, [field.value]);
 
@@ -90,7 +88,6 @@ export const Editor = ({ disabled = false, isEditing = false, ...props }: Editor
       const root = $getRoot();
       if (!disabled) {
         onChange(root.getTextContent());
-        setEditorState(root.getTextContent());
       }
     });
   };

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

@@ -11,6 +11,15 @@
   height: 24px;
 }
 
+.Translation {
+  background-color: #f7f0e5;
+  margin-bottom: 8px;
+  padding: 6px 16px;
+  border-radius: 10px;
+  white-space: pre-line;
+  color: #aa9677;
+}
+
 .Font {
   line-height: 1.25;
   font-weight: 400;

src/components/UI/Form/EmojiInput/EmojiInput.tsx

@@ -20,6 +20,8 @@ export interface EmojiInputProps {
   getEditorValue?: any;
   inputProp?: any;
   isEditing?: boolean;
+  translation?: string;
+  editorState?: any;
 }
 
 interface EmojiPickerProps {
@@ -34,6 +36,8 @@ export const EmojiInput = ({
   getEditorValue,
   handleBlur,
   isEditing = false,
+  translation,
+  editorState,
   ...props
 }: EmojiInputProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -65,6 +69,7 @@ export const EmojiInput = ({
     <LexicalWrapper>
       <Editor
         isEditing={isEditing}
+        editorState={editorState}
         field={{ name, value, onBlur }}
         {...props}
         picker={picker}
@@ -73,7 +78,12 @@ export const EmojiInput = ({
     </LexicalWrapper>
   );
 
-  return input;
+  return (
+    <>
+      {translation && <div className={Styles.Translation}>{translation}</div>}
+      {input}
+    </>
+  );
 };
 
 const EmojiPickerComponent = ({

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -74,6 +74,7 @@ export const InteractiveMessage = () => {
   const [tagId, setTagId] = useState<any>(null);
   const [language, setLanguage] = useState<any>({});
   const [languageOptions, setLanguageOptions] = useState<any>([]);
+  const [editorState, setEditorState] = useState<any>('');
 
   const [translations, setTranslations] = useState<any>('{}');
 
@@ -166,6 +167,7 @@ export const InteractiveMessage = () => {
     setTitle(data.title);
     setFooter(data.footer || '');
     setBody(data.body);
+    setEditorState(null);
     setTemplateType(typeValue);
     setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue));
     setTimeout(() => setTemplateButtons(data.templateButtons), 100);
@@ -530,11 +532,13 @@ export const InteractiveMessage = () => {
       helperText: t('You can also use variables in message enter @ to see the available list'),
       getEditorValue: (value: any) => {
         setBody(value);
+        setEditorState(value);
       },
       inputProp: {
         suggestions: contactVariables,
       },
       isEditing: isEditing,
+      editorState: editorState,
     },
     {
       skip: templateType !== QUICK_REPLY,

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

@@ -30,6 +30,7 @@ export const HSM = () => {
   const [shortcode, setShortcode] = useState('');
   const [category, setCategory] = useState<any>(undefined);
   const [example, setExample] = useState();
+  const [editorState, setEditorState] = useState<any>('');
 
   const { t } = useTranslation();
   const params = useParams();
@@ -109,8 +110,10 @@ export const HSM = () => {
       handleChange: getSimulatorMessage,
       getEditorValue: (value: any) => {
         setExample(value);
+        setEditorState(value);
       },
       isEditing: disabled,
+      editorState: editorState,
     },
     {
       component: AutoComplete,

src/containers/Template/Form/Template.tsx

@@ -193,6 +193,7 @@ const Template = ({
   >([]);
   const [isAddButtonChecked, setIsAddButtonChecked] = useState(false);
   const [nextLanguage, setNextLanguage] = useState<any>('');
+  const [editorState, setEditorState] = useState<any>('');
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location: any = useLocation();
@@ -322,6 +323,7 @@ const Template = ({
         const content = translationsCopy[currentLanguage];
         setLabel(content.label);
         setBody(content.body);
+        setEditorState(null);
       }
       setTranslations(translationsValue);
     }
@@ -680,8 +682,10 @@ const Template = ({
         : null,
       getEditorValue: (value: any) => {
         setBody(value);
+        setEditorState(value);
       },
       isEditing: isEditing,
+      editorState: editorState,
     },
   ];