- {formFieldItems.map((field, index) => {
- const key = index;
-
- if (field.skip) {
- return null;
- }
-
- return (
-
- {field.label && (
-
- {field.label}
-
- )}
-
-
- );
- })}
-
-
- {additionalAction ? (
+
+
-
+
+
);
const handleDeleteItem = () => {
diff --git a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx b/src/containers/InteractiveMessage/InteractiveMessage.test.tsx
index 2a1498af7..c276404f1 100644
--- a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx
+++ b/src/containers/InteractiveMessage/InteractiveMessage.test.tsx
@@ -1,6 +1,5 @@
import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import 'mocks/matchMediaMock';
import { MockedProvider } from '@apollo/client/testing';
import axios from 'axios';
import { Route, MemoryRouter, Routes } from 'react-router-dom';
@@ -471,7 +470,7 @@ describe('translates the template', () => {
});
});
- test('it translates an already exisiting template', async () => {
+ test('it shows error on translating an already exisiting template', async () => {
render(renderInteractiveMessage('1', [translateInteractiveTemplateMock(true)]));
await waitFor(() => {
diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx
index f201043e1..1c2acc4ef 100644
--- a/src/containers/InteractiveMessage/InteractiveMessage.tsx
+++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx
@@ -83,6 +83,7 @@ export const InteractiveMessage = () => {
const [language, setLanguage] = useState
({});
const [languageOptions, setLanguageOptions] = useState([]);
const [editorState, setEditorState] = useState('');
+
const [dynamicMedia, setDynamicMedia] = useState(false);
const [saveClicked, setSaveClicked] = useState(false);
diff --git a/src/containers/Template/Form/HSM/HSM.module.css b/src/containers/Template/Form/HSM/HSM.module.css
index e5e7e58a0..caf736fa7 100644
--- a/src/containers/Template/Form/HSM/HSM.module.css
+++ b/src/containers/Template/Form/HSM/HSM.module.css
@@ -3,7 +3,7 @@
height: 29px;
}
-.IsActive {
+.Checkbox {
color: #555555;
font-weight: 400;
line-height: 18px;
diff --git a/src/containers/Template/Form/HSM/HSM.test.tsx b/src/containers/Template/Form/HSM/HSM.test.tsx
index d56121f2c..cd8781cab 100644
--- a/src/containers/Template/Form/HSM/HSM.test.tsx
+++ b/src/containers/Template/Form/HSM/HSM.test.tsx
@@ -1,11 +1,13 @@
-import 'mocks/matchMediaMock';
import { render, waitFor, within, fireEvent, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import userEvent from '@testing-library/user-event';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import * as Notification from 'common/notification';
import { HSM } from './HSM';
-import { TEMPLATE_MOCKS } from 'containers/Template/Template.test.helper';
+import {
+ TEMPLATE_MOCKS,
+ getHSMTemplateTypeMedia,
+ getHSMTemplateTypeText,
+} from 'containers/Template/Template.test.helper';
const mocks = TEMPLATE_MOCKS;
@@ -15,8 +17,9 @@ beforeEach(() => {
describe('Edit mode', () => {
test('HSM form is loaded correctly in edit mode', async () => {
- const { getByText } = render(
-
+ const MOCKS = [...mocks, getHSMTemplateTypeText, getHSMTemplateTypeText];
+ const { getByText, getAllByRole } = render(
+
} />
@@ -27,6 +30,35 @@ describe('Edit mode', () => {
await waitFor(() => {
expect(getByText('Edit HSM Template')).toBeInTheDocument();
});
+
+ await waitFor(() => {
+ expect(getAllByRole('textbox')[0]).toHaveValue('account_balance');
+ });
+ });
+
+ test('HSM templates with media', async () => {
+ const MOCKS = [...mocks, getHSMTemplateTypeMedia, getHSMTemplateTypeMedia];
+ const { getByText, getAllByRole } = render(
+
+
+
+ } />
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(getByText('Edit HSM Template')).toBeInTheDocument();
+ });
+
+ await waitFor(() => {
+ expect(getAllByRole('textbox')[0]).toHaveValue('account_update');
+ });
+
+ await waitFor(() => {
+ expect(screen.getAllByRole('combobox')[1]).toHaveValue('IMAGE');
+ });
});
});
@@ -49,10 +81,9 @@ describe('Add mode', () => {
const { queryByText } = within(container.querySelector('form') as HTMLElement);
fireEvent.click(screen.getByTestId('submitActionButton'));
- // we should have 2 errors
+ // we should have 1 errors
await waitFor(() => {
expect(queryByText('Title is required.')).toBeInTheDocument();
- expect(queryByText('Message is required.')).toBeInTheDocument();
});
fireEvent.change(container.querySelector('input[name="label"]') as HTMLInputElement, {
@@ -64,111 +95,81 @@ describe('Add mode', () => {
fireEvent.click(screen.getByTestId('submitActionButton'));
- // we should still have 2 errors
+ // we should still have 1 errors
await waitFor(() => {
expect(queryByText('Title length is too long.')).toBeInTheDocument();
- expect(queryByText('Message is required.')).toBeInTheDocument();
});
});
test('it should create a template message', async () => {
- const notificationSpy = vi.spyOn(Notification, 'setNotification');
render(template);
await waitFor(() => {
- expect(screen.getAllByTestId('AutocompleteInput')[0].querySelector('input')).toHaveValue(
- 'English'
- );
+ expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
});
- const title = screen.getAllByTestId('input')[0].querySelector('input') as HTMLInputElement;
- const elementName = document.querySelector('input[name="shortcode"]') as HTMLInputElement;
- const attachmentUrl = document.querySelector('input[name="attachmentURL"]') as HTMLInputElement;
- const message = screen.getByTestId('editor-body') as HTMLElement;
- const sampleMessage = screen.getByTestId('editor-example') as HTMLElement;
-
- await user.type(title, 'Hello');
+ const inputs = screen.getAllByRole('textbox');
- await user.type(elementName, 'welcome');
+ fireEvent.change(inputs[0], { target: { value: 'element_name' } });
+ fireEvent.change(inputs[1], { target: { value: 'element_name' } });
+ const lexicalEditor = inputs[2];
- // add message
- await user.click(message);
+ await user.click(lexicalEditor);
await user.tab();
- fireEvent.input(message, { data: 'Hi {{1}}, How are you' });
+ fireEvent.input(lexicalEditor, { data: 'Hi, How are you' });
- // add Sample message
- await user.click(sampleMessage);
- await user.tab();
- fireEvent.input(sampleMessage, { data: 'Hi [Glific], How are you' });
+ const autocompletes = screen.getAllByTestId('autocomplete-element');
+ autocompletes[1].focus();
+ fireEvent.keyDown(autocompletes[1], { key: 'ArrowDown' });
- const [_language, category, attachmentType] = screen.getAllByTestId('autocomplete-element');
- category.focus();
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'Enter' });
+ fireEvent.click(screen.getByText('ACCOUNT_UPDATE'), { key: 'Enter' });
fireEvent.click(screen.getByText('Allow meta to re-categorize template?'));
- attachmentType.focus();
- fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });
- fireEvent.keyDown(attachmentType, { key: 'ArrowDown' });
- fireEvent.keyDown(attachmentType, { key: 'Enter' });
-
- await user.type(
- attachmentUrl,
- 'https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample02.jpg'
- );
+ await waitFor(() => {
+ expect(screen.getByText('Hi, How are you')).toBeInTheDocument();
+ });
- fireEvent.click(screen.getByTestId('submitActionButton'));
+ fireEvent.click(screen.getByText('Add Variable'));
await waitFor(() => {
- expect(notificationSpy).toHaveBeenCalled();
+ expect(screen.getByText('Hi, How are you {{1}}')).toBeInTheDocument();
});
- }, 10000);
+ fireEvent.change(inputs[1], { target: { value: 'element_name' } });
+
+ fireEvent.change(screen.getByPlaceholderText('Define value'), { target: { value: 'User' } });
+
+ fireEvent.click(screen.getByTestId('submitActionButton'));
+ });
- test('it should check sample and body', async () => {
+ test('it should add and remove variables', async () => {
render(template);
await waitFor(() => {
- expect(screen.getAllByTestId('AutocompleteInput')[0].querySelector('input')).toHaveValue(
- 'English'
- );
+ expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
});
- const title = screen.getAllByTestId('input')[0].querySelector('input') as HTMLInputElement;
- const elementName = document.querySelector('input[name="shortcode"]') as HTMLInputElement;
- const message = screen.getByTestId('editor-body') as HTMLElement;
- const sampleMessage = screen.getByTestId('editor-example') as HTMLElement;
+ const inputs = screen.getAllByRole('textbox');
+ const lexicalEditor = inputs[2];
- await user.type(title, 'Hello');
-
- await user.type(elementName, 'welcome');
-
- // add message
- await user.click(message);
+ await user.click(lexicalEditor);
await user.tab();
- fireEvent.input(message, { data: 'Hi {{1}}, How are you' });
+ fireEvent.input(lexicalEditor, { data: 'Hi' });
- // add Sample message
- await user.click(sampleMessage);
- await user.tab();
- fireEvent.input(sampleMessage, { data: 'Hi Glific, How are you' });
+ await waitFor(() => {
+ expect(screen.getByText('Hi')).toBeInTheDocument();
+ });
- // save template
- fireEvent.click(screen.getByTestId('submitActionButton'));
+ fireEvent.click(screen.getByText('Add Variable'));
await waitFor(() => {
- // expect an error
- expect(
- screen.getByText(
- 'Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].'
- )
- ).toBeInTheDocument();
+ expect(screen.getByText('Hi {{1}}')).toBeInTheDocument();
});
+
+ fireEvent.click(screen.getAllByTestId('delete-variable')[0]);
});
- test('add quick reply buttons when adding a template', async () => {
- const notificationSpy = vi.spyOn(Notification, 'setNotification');
+ test('it adds quick reply buttons', async () => {
render(template);
await waitFor(() => {
@@ -176,56 +177,48 @@ describe('Add mode', () => {
expect(language).toHaveValue('English');
});
- const title = screen.getAllByTestId('input')[0].querySelector('input') as HTMLInputElement;
- const elementName = document.querySelector('input[name="shortcode"]') as HTMLInputElement;
- const message = screen.getByTestId('editor-body') as HTMLElement;
- const sampleMessage = screen.getByTestId('editor-example') as HTMLElement;
+ const inputs = screen.getAllByRole('textbox');
+
+ const elementName = inputs[0];
+ const title = inputs[1];
await user.type(title, 'Hello');
await user.type(elementName, 'welcome');
- // add message
- await user.click(message);
- await user.tab();
- fireEvent.input(message, { data: 'Hi {{1}}, How are you' });
+ const lexicalEditor = inputs[2];
- // add Sample message
- await user.click(sampleMessage);
+ await user.click(lexicalEditor);
await user.tab();
- fireEvent.input(sampleMessage, { data: 'Hi [Glific], How are you' });
+ fireEvent.input(lexicalEditor, { data: 'Hi' });
- await user.click(screen.getAllByTestId('checkboxLabel')[1]);
- await user.click(screen.getByText('Quick replies'));
- await user.click(screen.getByTestId('addButton'));
+ await waitFor(() => {
+ expect(screen.getByText('Hi')).toBeInTheDocument();
+ });
- const quickReply1 = screen
- .getAllByTestId('quickReplyWrapper')[0]
- .querySelector('input') as HTMLInputElement;
- const quickReply2 = screen
- .getAllByTestId('quickReplyWrapper')[1]
- .querySelector('input') as HTMLInputElement;
-
- await user.type(quickReply1, 'Quick reply 1');
- fireEvent.blur(quickReply1);
- await user.type(quickReply2, 'Quick reply 2');
- fireEvent.blur(quickReply2);
-
- // update category
- const [_language, category] = screen.getAllByTestId('autocomplete-element');
- category.focus();
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'Enter' });
+ fireEvent.click(screen.getByText('Add buttons'));
+ fireEvent.click(screen.getByText('Quick replies'));
- fireEvent.click(screen.getByTestId('submitActionButton'));
+ await user.click(screen.getByTestId('addButton'));
- await waitFor(() => {
- expect(notificationSpy).toHaveBeenCalled();
+ fireEvent.change(screen.getByPlaceholderText('Quick reply 1 title'), {
+ target: { value: 'Yes' },
});
+
+ fireEvent.change(screen.getByPlaceholderText('Quick reply 2 title'), {
+ target: { value: 'No' },
+ });
+
+ const autocompletes = screen.getAllByTestId('autocomplete-element');
+ autocompletes[1].focus();
+ fireEvent.keyDown(autocompletes[1], { key: 'ArrowDown' });
+
+ fireEvent.click(screen.getByText('ACCOUNT_UPDATE'), { key: 'Enter' });
+
+ fireEvent.click(screen.getByTestId('submitActionButton'));
+ fireEvent.click(screen.getByTestId('submitActionButton'));
});
- test('add quick reply buttons with call to action', async () => {
- const notificationSpy = vi.spyOn(Notification, 'setNotification');
+ test('it adds call to action buttons', async () => {
render(template);
await waitFor(() => {
@@ -233,51 +226,84 @@ describe('Add mode', () => {
expect(language).toHaveValue('English');
});
- const title = screen.getAllByTestId('input')[0].querySelector('input') as HTMLInputElement;
- const elementName = document.querySelector('input[name="shortcode"]') as HTMLInputElement;
- const message = screen.getByTestId('editor-body') as HTMLElement;
- const sampleMessage = screen.getByTestId('editor-example') as HTMLElement;
+ const inputs = screen.getAllByRole('textbox');
+
+ const elementName = inputs[0];
+ const title = inputs[1];
await user.type(title, 'Hello');
await user.type(elementName, 'welcome');
- // add message
- await user.click(message);
- await user.tab();
- fireEvent.input(message, { data: 'Hi {{1}}, How are you' });
+ const lexicalEditor = inputs[2];
- // add Sample message
- await user.click(sampleMessage);
+ await user.click(lexicalEditor);
await user.tab();
- fireEvent.input(sampleMessage, { data: 'Hi [[Glific], How are you' });
-
- await user.click(screen.getAllByTestId('checkboxLabel')[1]);
- await user.click(screen.getByText('Call to actions'));
- await user.click(screen.getByText('Phone number'));
-
- const quickReply1 = screen
- .getByTestId('buttonTitle')
- .querySelector('input') as HTMLInputElement;
- const quickReply2 = screen
- .getByTestId('buttonValue')
- .querySelector('input') as HTMLInputElement;
-
- await user.type(quickReply1, 'Call me');
- fireEvent.blur(quickReply1);
- await user.type(quickReply2, '9876543210');
- fireEvent.blur(quickReply2);
-
- // update category
- const [_language, category] = screen.getAllByTestId('autocomplete-element');
- category.focus();
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'ArrowDown' });
- fireEvent.keyDown(category, { key: 'Enter' });
+ fireEvent.input(lexicalEditor, { data: 'Hi' });
+
+ await waitFor(() => {
+ expect(screen.getByText('Hi')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Add buttons'));
+ fireEvent.click(screen.getByText('Call to actions'));
+ fireEvent.click(screen.getByText('Phone number'));
+
+ fireEvent.change(screen.getByPlaceholderText('Button Title'), { target: { value: 'Call me' } });
+ fireEvent.change(screen.getByPlaceholderText('Button Value'), {
+ target: { value: '9876543210' },
+ });
+
+ fireEvent.click(screen.getByText('Add Call to action'));
+ fireEvent.click(screen.getAllByTestId('delete-icon')[1]);
+
+ const autocompletes = screen.getAllByTestId('autocomplete-element');
+ autocompletes[1].focus();
+ fireEvent.keyDown(autocompletes[1], { key: 'ArrowDown' });
+ fireEvent.click(screen.getByText('ACCOUNT_UPDATE'), { key: 'Enter' });
+
+ fireEvent.click(screen.getByTestId('submitActionButton'));
fireEvent.click(screen.getByTestId('submitActionButton'));
+ });
+
+ test('adding attachments', async () => {
+ render(template);
+
+ await waitFor(() => {
+ expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
+ });
+
+ const autocompletes = screen.getAllByTestId('autocomplete-element');
+ const inputs = screen.getAllByRole('textbox');
+
+ autocompletes[2].focus();
+ fireEvent.keyDown(autocompletes[2], { key: 'ArrowDown' });
+ fireEvent.click(screen.getByText('IMAGE'), { key: 'Enter' });
+
+ fireEvent.change(inputs[3], { target: { value: 'https://example.com/image.jpg' } });
+
+ await waitFor(() => {
+ expect(inputs[3]).toHaveValue('https://example.com/image.jpg');
+ });
+ });
+
+ test('it creates a translation of hsm template', async () => {
+ render(template);
+
+ await waitFor(() => {
+ expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Translate existing HSM?'));
+
+ const autocompletes = screen.getAllByTestId('autocomplete-element');
+ autocompletes[1].focus();
+ fireEvent.keyDown(autocompletes[1], { key: 'ArrowDown' });
+
+ fireEvent.click(screen.getByText('account_balance'), { key: 'Enter' });
await waitFor(() => {
- expect(notificationSpy).toHaveBeenCalled();
+ expect(screen.getAllByRole('combobox')[1]).toHaveValue('account_balance');
});
});
});
diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx
index 182967ec6..2cafc04b8 100644
--- a/src/containers/Template/Form/HSM/HSM.tsx
+++ b/src/containers/Template/Form/HSM/HSM.tsx
@@ -4,10 +4,9 @@ import { useTranslation } from 'react-i18next';
import { useParams, useLocation } from 'react-router-dom';
import TemplateIcon from 'assets/images/icons/Template/UnselectedDark.svg?react';
-import { GET_HSM_CATEGORIES } from 'graphql/queries/Template';
+import { GET_HSM_CATEGORIES, GET_SHORTCODES } from 'graphql/queries/Template';
import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
import { Input } from 'components/UI/Form/Input/Input';
-import { EmojiInput } from 'components/UI/Form/EmojiInput/EmojiInput';
import { Loading } from 'components/UI/Layout/Loading/Loading';
import { Simulator } from 'components/simulator/Simulator';
import Template from '../Template';
@@ -29,10 +28,10 @@ export const HSM = () => {
body: '',
});
- const [shortcode, setShortcode] = useState('');
+ const [exisitingShortCode, setExistingShortcode] = useState('');
+ const [newShortcode, setNewShortcode] = useState('');
const [category, setCategory] = useState(undefined);
- const [example, setExample] = useState();
- const [editorState, setEditorState] = useState('');
+ const [languageVariant, setLanguageVariant] = useState(false);
const [allowTemplateCategoryChange, setAllowTemplateCategoryChange] = useState(false);
const { t } = useTranslation();
@@ -40,6 +39,13 @@ export const HSM = () => {
const location: any = useLocation();
const { data: categoryList, loading } = useQuery(GET_HSM_CATEGORIES);
+ const { data: shortCodes } = useQuery(GET_SHORTCODES, {
+ variables: {
+ filter: {
+ isHsm: true,
+ },
+ },
+ });
if (loading) {
return ;
@@ -52,6 +58,13 @@ export const HSM = () => {
});
}
+ const shortCodeOptions: any = [];
+ if (shortCodes) {
+ shortCodes.sessionTemplates.forEach((value: any, index: number) => {
+ shortCodeOptions.push({ label: value?.shortcode, id: index });
+ });
+ }
+
const removeFirstLineBreak = (text: any) =>
text?.length === 1 ? text.slice(0, 1).replace(/(\r\n|\n|\r)/, '') : text;
@@ -101,20 +114,40 @@ export const HSM = () => {
const formFields = [
{
- component: EmojiInput,
- name: 'example',
- label: `${t('Sample message')}*`,
- rows: 5,
- convertToWhatsApp: true,
- textArea: true,
+ component: Checkbox,
+ name: 'languageVariant',
+ title: (
+
+ Translate existing HSM?
+
+ ),
+ handleChange: (value: any) => setLanguageVariant(value),
+ skip: isEditing,
+ },
+ {
+ component: Input,
+ name: 'newShortCode',
+ placeholder: `${t('Element name')}*`,
+ label: `${t('Element name')}*`,
+ disabled: isEditing,
+ skip: languageVariant ? true : false,
+ onChange: (value: any) => {
+ setNewShortcode(value);
+ },
+ },
+ {
+ component: AutoComplete,
+ name: 'existingShortCode',
+ options: shortCodeOptions,
+ optionLabel: 'label',
+ multiple: false,
+ label: `${t('Element name')}*`,
+ placeholder: `${t('Element name')}*`,
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: (value: any) => {
- setExample(value);
- getSimulatorMessage(value);
+ onChange: (event: any) => {
+ setExistingShortcode(event);
},
- defaultValue: isEditing && editorState,
+ skip: languageVariant ? false : true,
},
{
component: AutoComplete,
@@ -129,12 +162,13 @@ export const HSM = () => {
onChange: (event: any) => {
setCategory(event);
},
+ skip: isEditing,
},
{
component: Checkbox,
name: 'allowTemplateCategoryChange',
title: (
-
+
Allow meta to re-categorize template?
),
@@ -144,13 +178,13 @@ export const HSM = () => {
},
{
component: Input,
- name: 'shortcode',
- placeholder: `${t('Element name')}*`,
- label: `${t('Element name')}*`,
+ name: 'category',
+ type: 'text',
+ label: `${t('Category')}*`,
+ placeholder: `${t('Category')}*`,
disabled: isEditing,
- inputProp: {
- onBlur: (event: any) => setShortcode(event.target.value),
- },
+ helperText: t('Select the most relevant category'),
+ skip: !isEditing,
},
];
@@ -163,14 +197,16 @@ export const HSM = () => {
defaultAttribute={defaultAttribute}
formField={formFields}
getUrlAttachmentAndType={getAttachmentUrl}
- getShortcode={shortcode}
- getExample={example}
setCategory={setCategory}
category={category}
onExampleChange={addButtonsToSampleMessage}
- setExampleState={setEditorState}
allowTemplateCategoryChange={allowTemplateCategoryChange}
setAllowTemplateCategoryChange={setAllowTemplateCategoryChange}
+ languageVariant={languageVariant}
+ getSimulatorMessage={getSimulatorMessage}
+ setNewShortcode={setNewShortcode}
+ newShortCode={newShortcode}
+ existingShortCode={exisitingShortCode}
/>