diff --git a/package.json b/package.json index 30282d842..04a4aca0a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@emoji-mart/react": "^1.1.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@glific/flow-editor": "^1.19.3", + "@glific/flow-editor": "^1.19.3-1", "@mui/icons-material": "^5.14.16", "@mui/material": "^5.14.16", "@mui/x-date-pickers": "^6.17.0", diff --git a/src/common/constants.ts b/src/common/constants.ts index c80d56e9a..b87964443 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -152,6 +152,9 @@ export const GUPSHUP_QUICK_REPLY = export const CALL_TO_ACTION = 'CALL_TO_ACTION'; export const LIST = 'LIST'; export const QUICK_REPLY = 'QUICK_REPLY'; +export const LOCATION_REQUEST = 'LOCATION_REQUEST_MESSAGE'; +export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use'; +export const COMPACT_MESSAGE_LENGTH = 35; // Gupshup sample media export const SAMPLE_MEDIA_FOR_SIMULATOR = [ @@ -209,10 +212,3 @@ export const yupPasswordValidation = (t: any) => ) .min(10, t('Password must be at least 10 characters long.')) .required(t('Input required')); - -export const INTERACTIVE_QUICK_REPLY = 'QUICK_REPLY'; -export const INTERACTIVE_LIST = 'LIST'; - -export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use'; - -export const COMPACT_MESSAGE_LENGTH = 35; diff --git a/src/common/utils.ts b/src/common/utils.ts index 4309a09cf..f060406ff 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -134,6 +134,8 @@ export const getInteractiveMessageBody = (interactiveJSON: any) => { default: break; } + } else if (interactiveJSON.type === 'location_request_message') { + messageBody = interactiveJSON.body.text; } return messageBody; diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index 598ba2697..4ce051961 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -45,10 +45,14 @@ const collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => { ); } + console.log(dataObj); const additionalRowInformation = Object.keys(dataObj).map((key, index) => { const rowIdentifier = `collapsedRowData-${recordId}-${index}`; + // This is for location translation type where the text is inside body. + const body = typeof dataObj[key].body === 'string' ? dataObj[key].body : dataObj[key].body.text; + return ( @@ -58,11 +62,9 @@ const collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => {
-

{dataObj[key].body}

+

{body}

 - - ); }); diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx index 77910a681..67d3a360a 100644 --- a/src/components/simulator/Simulator.tsx +++ b/src/components/simulator/Simulator.tsx @@ -24,9 +24,10 @@ import ResetIcon from 'assets/images/icons/Reset/Dark.svg?react'; import { TIME_FORMAT, SAMPLE_MEDIA_FOR_SIMULATOR, - INTERACTIVE_LIST, - INTERACTIVE_QUICK_REPLY, + LIST, + QUICK_REPLY, DEFAULT_MESSAGE_LIMIT, + LOCATION_REQUEST, } from 'common/constants'; import { GUPSHUP_CALLBACK_URL } from 'config'; import { ChatMessageType } from 'containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType'; @@ -54,6 +55,7 @@ import { } from 'graphql/subscriptions/Simulator'; import { updateSimulatorConversations } from 'services/SubscriptionService'; import styles from './Simulator.module.css'; +import { LocationRequestTemplate } from 'containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate'; export interface SimulatorProps { showSimulator: boolean; @@ -296,7 +298,7 @@ export const Simulator = ({ if (content) { isInteractiveContentPresent = !!Object.entries(content).length; - if (isInteractiveContentPresent && messageType === INTERACTIVE_LIST) { + if (isInteractiveContentPresent && messageType === LIST) { template = ( <> ); } + if (isInteractiveContentPresent && messageType === LOCATION_REQUEST) { + template = ( + sendMessage(sender, payload)} + /> + ); + } } return ( @@ -386,7 +397,7 @@ export const Simulator = ({ const { templateType, interactiveContent } = interactiveMessage; const previewMessage = renderMessage(interactiveMessage, 'received', 0, true); setSimulatedMessage(previewMessage); - if (templateType === INTERACTIVE_LIST) { + if (templateType === LIST) { const { items } = JSON.parse(interactiveContent); setSelectedListTemplate(items); } else { diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx index 844ea8fcb..cc5b8aebc 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx @@ -9,9 +9,10 @@ import MessageIcon from 'assets/images/icons/Dropdown.svg?react'; import { DATE_FORMAT, TIME_FORMAT, - INTERACTIVE_LIST, - INTERACTIVE_QUICK_REPLY, + LIST, + QUICK_REPLY, VALID_URL_REGEX, + LOCATION_REQUEST, } from 'common/constants'; import { WhatsAppToJsx, WhatsAppTemplateButton } from 'common/RichEditor'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; @@ -23,6 +24,7 @@ import { ListReplyTemplate, ChatTemplate } from '../ListReplyTemplate/ListReplyT import { QuickReplyTemplate } from '../QuickReplyTemplate/QuickReplyTemplate'; import styles from './ChatMessage.module.css'; import { setNotification } from 'common/notification'; +import { LocationRequestTemplate } from './LocationRequestTemplate/LocationRequestTemplate'; export interface ChatMessageProps { id: number; @@ -260,14 +262,18 @@ export const ChatMessage = ({ } let template = null; - if (type === INTERACTIVE_LIST) { + if (type === LIST) { template = ; } - if (type === INTERACTIVE_QUICK_REPLY) { + if (type === QUICK_REPLY) { template = ; } + if (type === LOCATION_REQUEST) { + template = ; + } + let displayLabel; if (flowLabel) { const labels = flowLabel.split(','); diff --git a/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.module.css b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.module.css new file mode 100644 index 000000000..89dad3aa3 --- /dev/null +++ b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.module.css @@ -0,0 +1,26 @@ +.MessageContent { + max-width: 100%; + border-radius: 12px 12px 0px 0px; + font-family: 'Heebo', sans-serif, emoji; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + clear: both; + max-width: 404px; + min-width: 85px; + padding: 10px; + background: white; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.SimulatorButton { + width: 100%; + text-transform: none !important; + border-radius: 0px 0px 15px 15px !important; + background: white !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + border-top: none !important +} + +.ChatButton { + composes: SimulatorButton; + padding: 5px 20px !important; +} diff --git a/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx new file mode 100644 index 000000000..1439adf62 --- /dev/null +++ b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx @@ -0,0 +1,48 @@ +import { Button } from '@mui/material'; +import LocationIconDark from 'assets/images/icons/Location/Dark.svg?react'; +import styles from './LocationRequestTemplate.module.css'; +import { ChatMessageType } from '../ChatMessageType/ChatMessageType'; + +export interface LocationRequestTemplateProps { + content: any; + disabled?: boolean; + + isSimulator?: boolean; + onSendLocationClick?: any; +} + +const locationPayload = { + type: 'location', + name: 'location', + id: 'LOCATION', + payload: { + latitude: '41.725556', + longitude: '-49.946944', + }, +}; + +export const LocationRequestTemplate = ({ + content, + disabled = false, + isSimulator = false, + + onSendLocationClick = () => {}, +}: LocationRequestTemplateProps) => { + const body = content.body.text; + return ( +
+
+ +
+ +
+ ); +}; diff --git a/src/containers/InteractiveMessage/InteractiveMessage.helper.ts b/src/containers/InteractiveMessage/InteractiveMessage.helper.ts index fd6565891..fea220abb 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.helper.ts +++ b/src/containers/InteractiveMessage/InteractiveMessage.helper.ts @@ -1,5 +1,5 @@ import axios from 'axios'; -import { LIST, QUICK_REPLY } from 'common/constants'; +import { LIST, LOCATION_REQUEST, QUICK_REPLY } from 'common/constants'; import { getPlainTextFromEditor } from 'common/RichEditor'; import { FLOW_EDITOR_API } from 'config'; import { getAuthSession } from 'services/AuthService'; @@ -79,7 +79,7 @@ export const validator = (templateType: any, t: any) => { validation.globalButton = Yup.string() .required(t('Required')) .max(20, t('Button value can be at most 20 characters')); - } else { + } else if (templateType === QUICK_REPLY) { validation.templateButtons = Yup.array() .of( Yup.object().shape({ @@ -117,53 +117,58 @@ export const convertJSONtoStateData = (JSONData: any, interactiveType: string, l const data = { ...JSONData }; const { title, body, items, content, options, globalButtons } = data; - if (interactiveType === QUICK_REPLY) { - const { type, header, url, text, caption } = content; - const result: any = {}; - result.templateButtons = options.map((option: any) => ({ value: option.title })); - result.title = header || ''; - switch (type) { - case 'image': - case 'video': - result.type = type.toUpperCase(); - result.attachmentURL = url; - result.title = label; - break; - case 'file': - result.type = 'DOCUMENT'; - result.attachmentURL = url; - - result.title = label; - break; - default: - result.type = null; + let result: any = {}; + switch (interactiveType) { + case QUICK_REPLY: { + const { type, header, url, text, caption } = content; + result.templateButtons = options.map((option: any) => ({ value: option.title })); + result.title = header || ''; + switch (type) { + case 'image': + case 'video': + result.type = type.toUpperCase(); + result.attachmentURL = url; + result.title = label; + break; + case 'file': + result.type = 'DOCUMENT'; + result.attachmentURL = url; + result.title = label; + break; + default: + result.type = null; + } + result.body = text || ''; + result.footer = caption; + break; + } + case LIST: { + result.templateButtons = items.map((item: any) => { + const itemOptions = item.options.map((option: any) => ({ + title: option.title, + description: option.description, + })); + return { + title: item.title, + options: itemOptions, + }; + }); + result.body = body; + result.title = title; + result.globalButton = globalButtons[0].title; + break; + } + case LOCATION_REQUEST: { + result = { body: body.text, title: label }; + break; } - result.body = text || ''; - result.footer = caption; - return result; } - - const result: any = {}; - result.templateButtons = items.map((item: any) => { - const itemOptions = item.options.map((option: any) => ({ - title: option.title, - description: option.description, - })); - return { - title: item.title, - options: itemOptions, - }; - }); - result.body = body; - result.title = title; - result.globalButton = globalButtons[0].title; return result; }; export const getDefaultValuesByTemplate = (templateData: any) => { const { type: templateType, interactiveContent } = templateData; const data = JSON.parse(interactiveContent); - let result: any = {}; if (templateType === QUICK_REPLY) { const { type, content, options } = data; @@ -177,9 +182,7 @@ export const getDefaultValuesByTemplate = (templateData: any) => { result.type = type; result.content = updatedContent; result.options = updatedOptions; - } - - if (templateType === LIST) { + } else if (templateType === LIST) { result = Object.keys(data).reduce((res: any, key: string) => { const dataVal = data[key]; if (typeof dataVal === 'string') { @@ -202,6 +205,9 @@ export const getDefaultValuesByTemplate = (templateData: any) => { return res; }, {}); + } else if (templateType === LOCATION_REQUEST) { + result.body = { text: '' }; + result.title = ''; } return result; }; @@ -293,20 +299,29 @@ export const getTranslation = ( default: return null; } - } - - switch (attribute) { - case 'title': - return defaultTemplate.title; - case 'body': - return defaultTemplate.body; - case 'options': - return { - items: defaultTemplate.items, - globalButton: defaultTemplate.globalButtons[0].title, - }; - default: - return null; + } else if (interactiveType === LIST) { + switch (attribute) { + case 'title': + return defaultTemplate.title; + case 'body': + return defaultTemplate.body; + case 'options': + return { + items: defaultTemplate.items, + globalButton: defaultTemplate.globalButtons[0].title, + }; + default: + return null; + } + } else if (interactiveType === LOCATION_REQUEST) { + switch (attribute) { + case 'title': + return defaultTemplate.title; + case 'body': + return defaultTemplate.body.text; + default: + return null; + } } } return null; diff --git a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx b/src/containers/InteractiveMessage/InteractiveMessage.test.tsx index d46b23a4a..0d44d2d14 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.test.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.test.tsx @@ -36,6 +36,14 @@ const renderInteractiveMessage = (id: string) => ( ); +const interactiveMessage = ( + + + + + +); + const fieldsMock = { results: [{ key: 'key 1' }, { key: 'key 2' }], }; @@ -80,13 +88,7 @@ vi.spyOn(axios, 'get').mockImplementation((url: string) => { }); test('it renders empty interactive form', async () => { - render( - - - - - - ); + render(interactiveMessage); // Adding another quick reply button await waitFor(() => { @@ -120,22 +122,16 @@ test('it renders empty interactive form', async () => { }); await waitFor(() => { - const [attachmentType] = screen.getAllByTestId('autocomplete-element'); - - expect(attachmentType).toBeInTheDocument(); - - attachmentType.focus(); - fireEvent.keyDown(attachmentType, { key: 'ArrowDown' }); - fireEvent.keyDown(attachmentType, { key: 'Enter' }); + const [interactiveType] = screen.getAllByTestId('autocomplete-element'); + expect(interactiveType).toBeInTheDocument(); }); - // Switiching between radio buttons - const [quickReplyRadio, listRadio] = screen.getAllByRole('radio'); - await waitFor(() => { - expect(quickReplyRadio).toBeInTheDocument(); - expect(listRadio).toBeInTheDocument(); - fireEvent.click(listRadio); - }); + // Switiching to list + const [interactiveType] = screen.getAllByTestId('autocomplete-element'); + interactiveType.focus(); + fireEvent.keyDown(interactiveType, { key: 'ArrowDown' }); + fireEvent.keyDown(interactiveType, { key: 'ArrowDown' }); + fireEvent.keyDown(interactiveType, { key: 'Enter' }); await waitFor(() => { // Adding list data @@ -180,9 +176,6 @@ test('it renders empty interactive form', async () => { fireEvent.click(deleteListItemButton); }); - // Switching back to quick reply radio - fireEvent.click(quickReplyRadio); - await waitFor(() => { const saveButton = screen.getByText('Save'); expect(saveButton).toBeInTheDocument(); @@ -252,3 +245,36 @@ describe('copy interactive message', () => { }); }); }); + +describe('location request message', () => { + test('it renders empty location request message', async () => { + render(interactiveMessage); + + await waitFor(() => { + expect(screen.getAllByTestId('autocomplete-element')[0]).toBeInTheDocument(); + }); + const [interactiveType] = screen.getAllByTestId('autocomplete-element'); + + // Switiching to location request + interactiveType.focus(); + fireEvent.keyDown(interactiveType, { key: 'ArrowDown' }); + fireEvent.keyDown(interactiveType, { key: 'ArrowDown' }); + fireEvent.keyDown(interactiveType, { key: 'ArrowDown' }); + fireEvent.keyDown(interactiveType, { key: 'Enter' }); + await waitFor(() => { + expect(interactiveType.querySelector('input')).toHaveValue('Location request'); + }); + + fireEvent.change( + screen.getAllByTestId('outlinedInput')[0]?.querySelector('input') as HTMLElement, + { + target: { value: 'Section 1' }, + } + ); + + // have send location in simulator preview + await waitFor(() => { + expect(screen.getByText('Send Location')).toBeInTheDocument(); + }); + }); +}); diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 3af34d2ad..713c94e71 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -21,7 +21,7 @@ import { EmojiInput } from 'components/UI/Form/EmojiInput/EmojiInput'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { Simulator } from 'components/simulator/Simulator'; import { LanguageBar } from 'components/UI/LanguageBar/LanguageBar'; -import { LIST, MEDIA_MESSAGE_TYPES, QUICK_REPLY } from 'common/constants'; +import { LIST, LOCATION_REQUEST, MEDIA_MESSAGE_TYPES, QUICK_REPLY } from 'common/constants'; import { validateMedia } from 'common/utils'; import Loading from 'components/UI/Layout/Loading/Loading'; import { getPlainTextFromEditor, getEditorFromContent } from 'common/RichEditor'; @@ -49,6 +49,12 @@ const queries = { deleteItemQuery: DELETE_INTERACTIVE, }; +const templateTypeOptions = [ + { id: QUICK_REPLY, label: 'Reply buttons' }, + { id: LIST, label: 'List message' }, + { id: LOCATION_REQUEST, label: 'Location request' }, +]; + export const InteractiveMessage = () => { const location: any = useLocation(); const navigate = useNavigate(); @@ -56,6 +62,7 @@ export const InteractiveMessage = () => { const [footer, setFooter] = useState(''); const [body, setBody] = useState(EditorState.createEmpty()); const [templateType, setTemplateType] = useState(QUICK_REPLY); + const [templateTypeField, setTemplateTypeField] = useState(templateTypeOptions[0]); const [templateButtons, setTemplateButtons] = useState>([{ value: '' }]); const [globalButton, setGlobalButton] = useState(''); const [isUrlValid, setIsUrlValid] = useState(); @@ -76,6 +83,8 @@ export const InteractiveMessage = () => { const { t } = useTranslation(); const params = useParams(); + const isLocationRequestType = templateType === LOCATION_REQUEST; + const { data: tag } = useQuery(GET_TAGS, { variables: {}, fetchPolicy: 'network-only', @@ -131,6 +140,7 @@ export const InteractiveMessage = () => { templateButtons, sendWithTitle, templateType, + templateTypeField, type, attachmentURL, }; @@ -153,6 +163,7 @@ export const InteractiveMessage = () => { setFooter(data.footer); setBody(getEditorFromContent(data.body)); setTemplateType(typeValue); + setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue)); setTimeout(() => setTemplateButtons(data.templateButtons), 100); if (typeValue === LIST) { @@ -221,6 +232,7 @@ export const InteractiveMessage = () => { setFooter(data.footer); setBody(getEditorFromContent(data.body)); setTemplateType(typeValue); + setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue)); setTimeout(() => setTemplateButtons(data.templateButtons), 100); if (typeValue === LIST) { @@ -237,7 +249,7 @@ export const InteractiveMessage = () => { } setSendWithTitle(sendInteractiveTitleValue); - const getTagId = tag.tags.filter((tags: any) => tags.id === tagValue.id); + const getTagId = tag.tags.filter((tags: any) => tags.id === tagValue?.id); if (getTagId.length > 0) { setTagId(getTagId[0]); } @@ -272,6 +284,7 @@ export const InteractiveMessage = () => { const buttonType: any = { QUICK_REPLY: { value: '' }, LIST: { title: '', options: [{ title: '', description: '' }] }, + LOCATION_REQUEST_MESSAGE: {}, }; const templateResult = stateToRestore || [buttonType[templateTypeVal]]; @@ -463,6 +476,23 @@ export const InteractiveMessage = () => { selectedLangauge: language && language.label, onLanguageChange, }, + { + component: AutoComplete, + onChange: (change: any) => { + const value = change.id; + const stateToRestore = previousState[value]; + setTemplateType(value); + setTemplateTypeField(change); + setPreviousState({ [templateType]: templateButtons }); + handleAddInteractiveTemplate(false, value, stateToRestore); + }, + name: 'templateTypeField', + options: templateTypeOptions, + multiple: false, + disabled: params?.id !== undefined, + placeholder: 'Type', + optionLabel: 'label', + }, { translation: hasTranslations && getTranslation(templateType, 'title', translations, defaultLanguage), @@ -477,7 +507,7 @@ export const InteractiveMessage = () => { }, // checkbox is not needed in media types { - skip: type && type.label, + skip: (type && type.label) || isLocationRequestType, component: Checkbox, name: 'sendWithTitle', title: t('Show title in message'), @@ -521,18 +551,11 @@ export const InteractiveMessage = () => { templateType, inputFields: templateButtons, disabled: false, - disabledType: params?.id !== undefined, onAddClick: handleAddInteractiveTemplate, onRemoveClick: handleRemoveInteractiveTemplate, onInputChange: handleInputChange, onListItemAddClick: handleAddListItem, onListItemRemoveClick: handleRemoveListItem, - onTemplateTypeChange: (value: string) => { - const stateToRestore = previousState[value]; - setTemplateType(value); - setPreviousState({ [templateType]: templateButtons }); - handleAddInteractiveTemplate(false, value, stateToRestore); - }, onGlobalButtonInputChange: (value: string) => setGlobalButton(value), }, ]; @@ -602,6 +625,24 @@ export const InteractiveMessage = () => { interactiveContent: JSON.stringify(listJSON), }); } + + if (templateType === LOCATION_REQUEST) { + const bodyText = getPlainTextFromEditor(payload.body); + const locationJson = { + type: 'location_request_message', + body: { + type: 'text', + text: bodyText, + }, + action: { + name: 'send_location', + }, + }; + Object.assign(updatedPayload, { + type: LOCATION_REQUEST, + interactiveContent: JSON.stringify(locationJson), + }); + } return updatedPayload; }; @@ -631,6 +672,7 @@ export const InteractiveMessage = () => { if (translations) { translationsCopy = JSON.parse(translations); translationsCopy[language.id] = JSON.parse(payloadData.interactiveContent); + setTranslations(JSON.stringify(translationsCopy)); } const langIds = Object.keys(translationsCopy); @@ -702,7 +744,8 @@ export const InteractiveMessage = () => { }, ]; - let formFields: any = templateType === LIST ? [...fields] : [...fields, ...attachmentInputs]; + let formFields: any = + templateType === QUICK_REPLY ? [...fields, ...attachmentInputs] : [...fields]; formFields = [ ...formFields, { diff --git a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx index 8cf1fb740..a0e3472cd 100644 --- a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx @@ -25,13 +25,13 @@ const getLabel = (text: string) => ( ); const getType = (text: string) => { - let type = ''; - if (text === 'QUICK_REPLY') { - type = 'Quick Reply'; - } else if (text === 'LIST') { - type = 'List'; - } - return

{type}

; + const typeMappings: any = { + LOCATION_REQUEST_MESSAGE: 'Location request', + QUICK_REPLY: 'Quick Reply', + LIST: 'List', + }; + + return

{typeMappings[text]}

; }; const getBody = (text: string) => { diff --git a/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.test.tsx b/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.test.tsx index 7af577f6a..9377bcb2f 100644 --- a/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.test.tsx +++ b/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.test.tsx @@ -81,13 +81,6 @@ test('it render interactive options for list reply template', async () => { fireEvent.click(listItem1); await waitFor(() => {}); - - const [quickReplyRadio] = screen.getAllByRole('radio'); - - expect(quickReplyRadio).toBeInTheDocument(); - fireEvent.click(quickReplyRadio); - - await waitFor(() => {}); }); const quickReplyInputFields = [{ value: 'yes' }, { value: 'no' }]; diff --git a/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.tsx b/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.tsx index 419386540..e9a710bb4 100644 --- a/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.tsx +++ b/src/containers/InteractiveMessage/InteractiveOptions/InteractiveOptions.tsx @@ -1,15 +1,7 @@ -import { - RadioGroup, - FormControlLabel, - Radio, - FormControl, - TextField, - FormHelperText, -} from '@mui/material'; +import { FormControl, TextField, FormHelperText } from '@mui/material'; import { FieldArray } from 'formik'; -import ApprovedIcon from 'assets/images/icons/Template/Approved.svg?react'; -import { QUICK_REPLY, LIST } from 'common/constants'; +import { QUICK_REPLY, LIST, LOCATION_REQUEST } from 'common/constants'; import { QuickReplyTemplate } from './QuickReplyTemplate'; import { ListReplyTemplate } from './ListReplyTemplate'; import styles from './InteractiveOptions.module.css'; @@ -37,14 +29,12 @@ export const InteractiveOptions = ({ form, onAddClick, onRemoveClick, - onTemplateTypeChange, onInputChange, onGlobalButtonInputChange, onListItemAddClick, onListItemRemoveClick, disabled = false, translation, - disabledType, }: InteractiveOptionsProps) => { const { values, errors, touched, setFieldValue } = form; @@ -101,47 +91,6 @@ export const InteractiveOptions = ({ const radioTemplateType = (
- onTemplateTypeChange(event.target.value)} - className={styles.RadioGroupDisplay} - > -
- } - size="small" - /> - } - className={templateType === QUICK_REPLY ? styles.SelectedLabel : ''} - classes={{ root: styles.RadioLabel }} - label="Reply buttons" - /> -
-
- } - size="small" - /> - } - className={templateType === LIST ? styles.SelectedLabel : ''} - classes={{ root: styles.RadioLabel }} - label="List message" - /> -
- {templateType && templateType === LIST && (
{translation &&
{translation.globalButton}
} @@ -169,7 +118,7 @@ export const InteractiveOptions = ({
)} - {templateType && ( + {templateType && templateType !== LOCATION_REQUEST && (