From 026f256c47ab3bae1a63083a08870016c16f42e4 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 11 Jun 2024 12:20:02 +0530 Subject: [PATCH 1/9] added dynamic support for interactive messages --- .../InteractiveMessage/InteractiveMessage.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 81ff59c06..923cc9587 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -75,6 +75,8 @@ export const InteractiveMessage = () => { const [language, setLanguage] = useState({}); const [languageOptions, setLanguageOptions] = useState([]); const [editorState, setEditorState] = useState(''); + const [dynamicInteractiveMessage, setDynamicInteractiveMessage] = useState(false); + const [shouldValidateUrl, setShouldValidateUrl] = useState(true); const [translations, setTranslations] = useState('{}'); @@ -148,6 +150,7 @@ export const InteractiveMessage = () => { templateTypeField, type, attachmentURL, + dynamicInteractiveMessage, }; const updateStates = ({ @@ -192,6 +195,7 @@ export const InteractiveMessage = () => { sendWithTitle: sendInteractiveTitleValue, }: any) => { let content; + let dynamicInteractiveMessageValue = false; if (translationsVal) { const translationsCopy = JSON.parse(translationsVal); @@ -234,6 +238,10 @@ export const InteractiveMessage = () => { titleText = `Copy of ${data.title}`; } + if (data.attachmentURL.startsWith('@')) { + dynamicInteractiveMessageValue = true; + } + setTitle(titleText); setFooter(data.footer || ''); setBody(data.body || ''); @@ -241,6 +249,7 @@ export const InteractiveMessage = () => { setTemplateType(typeValue); setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue)); setTimeout(() => setTemplateButtons(data.templateButtons), 100); + setDynamicInteractiveMessage(dynamicInteractiveMessageValue); if (typeValue === LIST) { setGlobalButton(data.globalButton); @@ -277,7 +286,7 @@ export const InteractiveMessage = () => { }; useEffect(() => { - if ((type === '' || type) && attachmentURL) { + if (shouldValidateUrl && (type === '' || type) && attachmentURL) { validateURL(attachmentURL); } }, [type, attachmentURL]); @@ -718,6 +727,15 @@ export const InteractiveMessage = () => { }; const attachmentInputs = [ + { + component: Checkbox, + title: 'Dynamic Interactive Message', + name: 'dynamicInteractiveMessage', + handleChange: (value: boolean) => { + setShouldValidateUrl(!value); + setDynamicInteractiveMessage(value); + }, + }, { component: AutoComplete, name: 'type', From 7cf765d32ffb828f7c3288413948835ebb8b6596 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 11 Jun 2024 12:44:25 +0530 Subject: [PATCH 2/9] added helper text --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 923cc9587..10284b4c4 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -76,7 +76,6 @@ export const InteractiveMessage = () => { const [languageOptions, setLanguageOptions] = useState([]); const [editorState, setEditorState] = useState(''); const [dynamicInteractiveMessage, setDynamicInteractiveMessage] = useState(false); - const [shouldValidateUrl, setShouldValidateUrl] = useState(true); const [translations, setTranslations] = useState('{}'); @@ -286,7 +285,7 @@ export const InteractiveMessage = () => { }; useEffect(() => { - if (shouldValidateUrl && (type === '' || type) && attachmentURL) { + if (!dynamicInteractiveMessage && (type === '' || type) && attachmentURL) { validateURL(attachmentURL); } }, [type, attachmentURL]); @@ -732,7 +731,6 @@ export const InteractiveMessage = () => { title: 'Dynamic Interactive Message', name: 'dynamicInteractiveMessage', handleChange: (value: boolean) => { - setShouldValidateUrl(!value); setDynamicInteractiveMessage(value); }, }, @@ -765,6 +763,9 @@ export const InteractiveMessage = () => { setAttachmentURL(event.target.value); }, }, + helperText: + dynamicInteractiveMessage && + 'Please ensure that the media you are submitting is valid. Using incorrect media can cause errors as we cannot pre-validate media files.', }, ]; From be9b07f14fe33038fca4f3868a16d82c378e87b1 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 11 Jun 2024 13:06:06 +0530 Subject: [PATCH 3/9] fixed failing test case --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 10284b4c4..f38f404e3 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -194,7 +194,6 @@ export const InteractiveMessage = () => { sendWithTitle: sendInteractiveTitleValue, }: any) => { let content; - let dynamicInteractiveMessageValue = false; if (translationsVal) { const translationsCopy = JSON.parse(translationsVal); @@ -237,10 +236,6 @@ export const InteractiveMessage = () => { titleText = `Copy of ${data.title}`; } - if (data.attachmentURL.startsWith('@')) { - dynamicInteractiveMessageValue = true; - } - setTitle(titleText); setFooter(data.footer || ''); setBody(data.body || ''); @@ -248,7 +243,6 @@ export const InteractiveMessage = () => { setTemplateType(typeValue); setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue)); setTimeout(() => setTemplateButtons(data.templateButtons), 100); - setDynamicInteractiveMessage(dynamicInteractiveMessageValue); if (typeValue === LIST) { setGlobalButton(data.globalButton); From a5d8f8f5f77fe7ef3b3a0d7d076289b42491a08a Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 11 Jun 2024 13:15:51 +0530 Subject: [PATCH 4/9] removed check in case of dynamic media --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index f38f404e3..a04260045 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -748,7 +748,7 @@ export const InteractiveMessage = () => { name: 'attachmentURL', type: 'text', label: t('Attachment URL'), - validate: () => isUrlValid, + validate: () => !dynamicInteractiveMessage && isUrlValid, inputProp: { onBlur: (event: any) => { setAttachmentURL(event.target.value); From 0927cda5d18774fb2955fcbbfcb8c9658eb8df62 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 11 Jun 2024 14:01:14 +0530 Subject: [PATCH 5/9] added test cases --- .../InteractiveMessage.test.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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')); +}); From 3ad775f0d19d44dd1bf501128176ed9395ced36a Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 11 Jun 2024 23:57:04 +0100 Subject: [PATCH 6/9] code fixes, changes to layout and messaging --- .../InteractiveMessage/InteractiveMessage.tsx | 30 ++++++++++--------- src/i18n/en/en.json | 4 ++- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index a04260045..8a46735d2 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -75,7 +75,7 @@ export const InteractiveMessage = () => { const [language, setLanguage] = useState({}); const [languageOptions, setLanguageOptions] = useState([]); const [editorState, setEditorState] = useState(''); - const [dynamicInteractiveMessage, setDynamicInteractiveMessage] = useState(false); + const [dynamicMedia, setDynamicMedia] = useState(false); const [translations, setTranslations] = useState('{}'); @@ -149,7 +149,7 @@ export const InteractiveMessage = () => { templateTypeField, type, attachmentURL, - dynamicInteractiveMessage, + dynamicMedia, }; const updateStates = ({ @@ -279,7 +279,7 @@ export const InteractiveMessage = () => { }; useEffect(() => { - if (!dynamicInteractiveMessage && (type === '' || type) && attachmentURL) { + if (!dynamicMedia && (type === '' || type) && attachmentURL) { validateURL(attachmentURL); } }, [type, attachmentURL]); @@ -720,14 +720,6 @@ export const InteractiveMessage = () => { }; const attachmentInputs = [ - { - component: Checkbox, - title: 'Dynamic Interactive Message', - name: 'dynamicInteractiveMessage', - handleChange: (value: boolean) => { - setDynamicInteractiveMessage(value); - }, - }, { component: AutoComplete, name: 'type', @@ -748,7 +740,7 @@ export const InteractiveMessage = () => { name: 'attachmentURL', type: 'text', label: t('Attachment URL'), - validate: () => !dynamicInteractiveMessage && isUrlValid, + validate: () => !dynamicMedia && isUrlValid, inputProp: { onBlur: (event: any) => { setAttachmentURL(event.target.value); @@ -758,8 +750,18 @@ export const InteractiveMessage = () => { }, }, helperText: - dynamicInteractiveMessage && - 'Please ensure that the media you are submitting is valid. Using incorrect media can cause errors as we cannot pre-validate media files.', + 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." } From 4d6d9048988b40719e2ef76885874cc274e145ce Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Wed, 12 Jun 2024 00:14:56 +0100 Subject: [PATCH 7/9] set dynamic checkbox value in edit mode --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 8a46735d2..295af963c 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -253,6 +253,10 @@ export const InteractiveMessage = () => { setAttachmentURL(data.attachmentURL); } + if (isEditing && data.attachmentURL) { + setDynamicMedia(!isUrlValid); + } + if (translationsVal) { setTranslations(translationsVal); } From 7aaabf05c90f5afd7f5e419e72e8340e51d531e0 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Wed, 12 Jun 2024 09:13:29 +0530 Subject: [PATCH 8/9] added dynamic check in set states --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index a04260045..a08c688b4 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -251,6 +251,11 @@ export const InteractiveMessage = () => { if (typeValue === QUICK_REPLY && data.type && data.attachmentURL) { setType({ id: data.type, label: data.type }); setAttachmentURL(data.attachmentURL); + if (data.attachmentURL.startsWith('@')) { + console.log('ddnj'); + + setDynamicInteractiveMessage(true); + } } if (translationsVal) { From 4c2fb5f1a0bc814ad23090b97fb81481d6f7630c Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Wed, 12 Jun 2024 09:16:57 +0530 Subject: [PATCH 9/9] merge conflicts --- src/containers/InteractiveMessage/InteractiveMessage.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 57f059f26..295af963c 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -251,11 +251,6 @@ export const InteractiveMessage = () => { if (typeValue === QUICK_REPLY && data.type && data.attachmentURL) { setType({ id: data.type, label: data.type }); setAttachmentURL(data.attachmentURL); - if (data.attachmentURL.startsWith('@')) { - console.log('ddnj'); - - setDynamicInteractiveMessage(true); - } } if (isEditing && data.attachmentURL) {