diff --git a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx b/src/containers/InteractiveMessage/InteractiveMessage.test.tsx index 3a8da11e0..a21b882a7 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx +++ b/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')); +}); diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 81ff59c06..295af963c 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -75,6 +75,7 @@ export const InteractiveMessage = () => { const [language, setLanguage] = useState({}); const [languageOptions, setLanguageOptions] = useState([]); const [editorState, setEditorState] = useState(''); + const [dynamicMedia, setDynamicMedia] = useState(false); const [translations, setTranslations] = useState('{}'); @@ -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); + }, }, ]; diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json index 2fba4278b..1efdc3cd6 100644 --- a/src/i18n/en/en.json +++ b/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." }