Merge pull request #2922 from glific/enhancement/dynamic-interactive-…

…messages

Enhancements in Interactive messages

src/containers/InteractiveMessage/InteractiveMessage.test.tsx

@@ -363,3 +363,24 @@ describe('location request message', () => {
     });
   });
 });
+
+test('It creates a interactive message with dynamic content', async () => {
+  const { getByTestId, getAllByRole, getByText } = render(interactiveMessage);
+  await waitFor(() => {
+    expect(getByText('Marathi')).toBeInTheDocument();
+  });
+
+  fireEvent.click(getAllByRole('checkbox')[1]);
+
+  const autoCompletes = getAllByRole('combobox');
+
+  const attachmentType = autoCompletes[1];
+
+  attachmentType.focus();
+  fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });
+  fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });
+  fireEvent.keyDown(attachmentType, { key: 'Enter' });
+
+  fireEvent.change(getAllByRole('textbox')[4], { target: { value: '@results.result_1' } });
+  fireEvent.click(getByTestId('submitActionButton'));
+});

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -75,6 +75,7 @@ export const InteractiveMessage = () => {
   const [language, setLanguage] = useState<any>({});
   const [languageOptions, setLanguageOptions] = useState<any>([]);
   const [editorState, setEditorState] = useState<any>('');
+  const [dynamicMedia, setDynamicMedia] = useState<boolean>(false);
 
   const [translations, setTranslations] = useState<any>('{}');
 
@@ -148,6 +149,7 @@ export const InteractiveMessage = () => {
     templateTypeField,
     type,
     attachmentURL,
+    dynamicMedia,
   };
 
   const updateStates = ({
@@ -251,6 +253,10 @@ export const InteractiveMessage = () => {
       setAttachmentURL(data.attachmentURL);
     }
 
+    if (isEditing && data.attachmentURL) {
+      setDynamicMedia(!isUrlValid);
+    }
+
     if (translationsVal) {
       setTranslations(translationsVal);
     }
@@ -277,7 +283,7 @@ export const InteractiveMessage = () => {
   };
 
   useEffect(() => {
-    if ((type === '' || type) && attachmentURL) {
+    if (!dynamicMedia && (type === '' || type) && attachmentURL) {
       validateURL(attachmentURL);
     }
   }, [type, attachmentURL]);
@@ -738,7 +744,7 @@ export const InteractiveMessage = () => {
       name: 'attachmentURL',
       type: 'text',
       label: t('Attachment URL'),
-      validate: () => isUrlValid,
+      validate: () => !dynamicMedia && isUrlValid,
       inputProp: {
         onBlur: (event: any) => {
           setAttachmentURL(event.target.value);
@@ -747,6 +753,19 @@ export const InteractiveMessage = () => {
           setAttachmentURL(event.target.value);
         },
       },
+      helperText:
+        dynamicMedia &&
+        t(
+          'Please ensure that the entered media is valid as we cannot pre-validate dynamic media files and it may lead to errors.'
+        ),
+    },
+    {
+      component: Checkbox,
+      title: t('Allow dynamic media'),
+      name: 'dynamicMedia',
+      handleChange: (value: boolean) => {
+        setDynamicMedia(value);
+      },
     },
   ];
 

src/i18n/en/en.json

@@ -491,5 +491,7 @@
   "App name is required.": "App name is required.",
   "API key is required.": "API key is required.",
   "Please agree to the terms and conditions.": "Please agree to the terms and conditions.",
-  "Enter a valid phone number.": "Enter a valid phone number."
+  "Enter a valid phone number.": "Enter a valid phone number.",
+  "Allow dynamic media": "Allow dynamic media",
+  "Please ensure that the entered media is valid as we cannot pre-validate dynamic media files and it may lead to errors.": "Please ensure that the entered media is valid as we cannot pre-validate dynamic media files and it may lead to errors."
 }