From f4ad55d15e2cdf953e78e3a0e78187c91f260df1 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Mon, 6 Jan 2025 09:16:47 +0530 Subject: [PATCH 1/6] fixed behaviour of hsm buttons --- src/containers/HSM/HSM.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx index 243d72301..fb97a88da 100644 --- a/src/containers/HSM/HSM.tsx +++ b/src/containers/HSM/HSM.tsx @@ -70,7 +70,7 @@ export const HSM = () => { const [languageOptions, setLanguageOptions] = useState([]); const [validatingURL, setValidatingURL] = useState(false); const [isUrlValid, setIsUrlValid] = useState(); - const [templateType, setTemplateType] = useState(null); + const [templateType, setTemplateType] = useState(CALL_TO_ACTION); const [sampleMessages, setSampleMessages] = useState({ type: 'TEXT', location: null, @@ -320,7 +320,7 @@ export const HSM = () => { let buttons: any = []; const buttonType: any = { QUICK_REPLY: { value: '' }, - CALL_TO_ACTION: { type: '', title: '', value: '' }, + CALL_TO_ACTION: { type: 'phone_number', title: '', value: '' }, }; if (templateType) { @@ -358,8 +358,13 @@ export const HSM = () => { const handeInputChange = (event: any, row: any, index: any, eventType: any) => { const { value } = event.target; - const obj = { ...row }; - obj[eventType] = value; + let obj = { ...row }; + + if (eventType === 'type') { + obj = { type: value, title: '', value: '' }; + } else { + obj[eventType] = value; + } const result = templateButtons.map((val: any, idx: number) => { if (idx === index) return obj; From aa2cf471988e74d31f6fcd9972181823edde626d Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Mon, 6 Jan 2025 16:07:16 +0530 Subject: [PATCH 2/6] fixed behaviour of hsm buttons --- src/containers/HSM/HSM.tsx | 17 ++++++---- .../TemplateOptions/TemplateOptions.tsx | 34 ++++++++++--------- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx index fb97a88da..2e0dbc849 100644 --- a/src/containers/HSM/HSM.tsx +++ b/src/containers/HSM/HSM.tsx @@ -49,6 +49,10 @@ const queries = { const templateIcon = ; const regexForShortcode = /^[a-z0-9_]+$/g; const dialogMessage = ' It will stop showing when you are drafting a customized message.'; +const buttonTypes: any = { + QUICK_REPLY: { value: '' }, + CALL_TO_ACTION: { type: 'phone_number', title: '', value: '' }, +}; export const HSM = () => { const [language, setLanguageId] = useState(null); @@ -318,13 +322,9 @@ export const HSM = () => { const addTemplateButtons = (addFromTemplate: boolean = true) => { let buttons: any = []; - const buttonType: any = { - QUICK_REPLY: { value: '' }, - CALL_TO_ACTION: { type: 'phone_number', title: '', value: '' }, - }; if (templateType) { - buttons = addFromTemplate ? [...templateButtons, buttonType[templateType]] : [buttonType[templateType]]; + buttons = addFromTemplate ? [...templateButtons, buttonTypes[templateType]] : [buttonTypes[templateType]]; } setTemplateButtons(buttons); @@ -374,6 +374,11 @@ export const HSM = () => { setTemplateButtons(result); }; + const handleTemplateTypeChange = (value: string) => { + setTemplateButtons([buttonTypes[value]]); + setTemplateType(value); + }; + const getMediaId = async (payload: any) => { const data = await createMediaMessage({ variables: { @@ -509,7 +514,7 @@ export const HSM = () => { onAddClick: addTemplateButtons, onRemoveClick: removeTemplateButtons, onInputChange: handeInputChange, - onTemplateTypeChange: (value: string) => setTemplateType(value), + onTemplateTypeChange: handleTemplateTypeChange, }, { component: AutoComplete, diff --git a/src/containers/TemplateOptions/TemplateOptions.tsx b/src/containers/TemplateOptions/TemplateOptions.tsx index 66d2215f8..eb7f701da 100644 --- a/src/containers/TemplateOptions/TemplateOptions.tsx +++ b/src/containers/TemplateOptions/TemplateOptions.tsx @@ -138,10 +138,10 @@ export const TemplateOptions = ({ onInputChange(e, row, index, 'title')} + onChange={(e: any) => onInputChange(e, row, index, 'title')} className={styles.TextField} error={isError('title')} /> @@ -154,11 +154,11 @@ export const TemplateOptions = ({ onInputChange(e, row, index, 'value')} + onChange={(e: any) => onInputChange(e, row, index, 'value')} className={styles.TextField} error={isError('value')} /> @@ -182,22 +182,24 @@ export const TemplateOptions = ({ onInputChange(e, row, index, 'value')} + onChange={(e: any) => onInputChange(e, row, index, 'value')} className={styles.TextField} error={isError('value')} - InputProps={{ - endAdornment: inputFields.length > 1 && !disabled && ( - handleRemoveClick(arrayHelpers, index)} - /> - ), + slotProps={{ + input: { + endAdornment: inputFields.length > 1 && !disabled && ( + handleRemoveClick(arrayHelpers, index)} + /> + ), + }, }} /> {errors.templateButtons && touched.templateButtons && touched.templateButtons[index] ? ( @@ -251,7 +253,7 @@ export const TemplateOptions = ({ name="templateButtons" render={(arrayHelpers: any) => (
- {values.templateButtons.map((row: any, index: any) => ( + {inputFields.map((row: any, index: any) => (
{getButtons(row, index, arrayHelpers)}
))}
From e44b16a9abb6eade9f13de0f92f377c70b04476d Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 8 Jan 2025 10:42:15 +0530 Subject: [PATCH 3/6] minor refactoring --- src/containers/HSM/HSM.tsx | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx index 2e0dbc849..4af29f179 100644 --- a/src/containers/HSM/HSM.tsx +++ b/src/containers/HSM/HSM.tsx @@ -677,25 +677,26 @@ export const HSM = () => { }, [isAddButtonChecked]); useEffect(() => { - if (templateButtons.length > 0 && !isEditing) { - const parse = convertButtonsToTemplate(templateButtons, templateType); + const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); - const parsedText = parse.length ? `| ${parse.join(' | ')}` : null; + if (!isEditing) { + let parse: any = []; + if (templateButtons.length > 0) { + parse = convertButtonsToTemplate(templateButtons, templateType); + } - const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); + const parsedText = parse.length ? `| ${parse.join(' | ')}` : ''; + + let sampleText: any = message; + if (parsedText) { + sampleText = (message || ' ') + parsedText; + } - const sampleText: any = parsedText && message + parsedText; if (sampleText) { setSimulatorMessage(sampleText); } } - }, [templateButtons]); - - useEffect(() => { - if (!isEditing) { - setSimulatorMessage(getExampleFromBody(body, variables)); - } - }, [body, variables]); + }, [templateButtons, body, variables]); useEffect(() => { setVariables(getVariables(body, variables)); From 42255e79f8d8ecf72c3878a6f57bb08d9bafe00a Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 8 Jan 2025 10:49:35 +0530 Subject: [PATCH 4/6] added validation --- src/containers/HSM/HSM.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx index 4af29f179..f6114092d 100644 --- a/src/containers/HSM/HSM.tsx +++ b/src/containers/HSM/HSM.tsx @@ -640,6 +640,13 @@ export const HSM = () => { then: (schema) => schema.nullable().required(t('Element name is required.')), otherwise: (schema) => schema.nullable(), }), + templateButtons: Yup.array().of( + Yup.object().shape({ + type: Yup.string().required('Type is required.'), + title: Yup.string().required('Title is required.'), + value: Yup.string().required('Value is required.'), + }) + ), }; const FormSchema = Yup.object().shape(validation, [['type', 'attachmentURL']]); From 6c2d570b035962fdecbe5acbebe0a4cd6dfed727 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 8 Jan 2025 11:26:17 +0530 Subject: [PATCH 5/6] added validation --- src/containers/HSM/HSM.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx index f6114092d..0c44fc593 100644 --- a/src/containers/HSM/HSM.tsx +++ b/src/containers/HSM/HSM.tsx @@ -641,10 +641,19 @@ export const HSM = () => { otherwise: (schema) => schema.nullable(), }), templateButtons: Yup.array().of( - Yup.object().shape({ - type: Yup.string().required('Type is required.'), - title: Yup.string().required('Title is required.'), - value: Yup.string().required('Value is required.'), + Yup.lazy(() => { + if (templateType === 'CALL_TO_ACTION') { + return Yup.object().shape({ + type: Yup.string().required('Type is required.'), + title: Yup.string().required('Title is required.'), + value: Yup.string().required('Value is required.'), + }); + } else if (templateType === 'QUICK_REPLY') { + return Yup.object().shape({ + value: Yup.string().required('Value is required.'), + }); + } + return Yup.object().shape({}); }) ), }; From 7edec639305fc2289c31658f43d965cd0374b13d Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 8 Jan 2025 11:32:42 +0530 Subject: [PATCH 6/6] fixed test cases --- src/containers/HSM/HSM.test.tsx | 6 ++++++ src/mocks/Template.tsx | 7 +++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/containers/HSM/HSM.test.tsx b/src/containers/HSM/HSM.test.tsx index d926a138b..a1a2b89a9 100644 --- a/src/containers/HSM/HSM.test.tsx +++ b/src/containers/HSM/HSM.test.tsx @@ -147,6 +147,12 @@ describe('Add mode', () => { }); fireEvent.click(screen.getByText('Add Variable')); + fireEvent.click(screen.getByText('Add buttons')); + + fireEvent.change(screen.getByPlaceholderText('Button Title'), { target: { value: 'Call me' } }); + fireEvent.change(screen.getByPlaceholderText('Button Value'), { + target: { value: '9876543210' }, + }); await waitFor(() => { expect(screen.getByText('Hi, How are you {{1}}')).toBeInTheDocument(); diff --git a/src/mocks/Template.tsx b/src/mocks/Template.tsx index 9e6bb62c5..888ca7fa1 100644 --- a/src/mocks/Template.tsx +++ b/src/mocks/Template.tsx @@ -280,6 +280,9 @@ export const templateMock = createTemplateMock({ languageId: '1', example: 'Hi, How are you [User]', shortcode: 'element_name', + hasButtons: true, + buttons: '[{"type":"PHONE_NUMBER","text":"Call me","phone_number":"9876543210"}]', + buttonType: 'CALL_TO_ACTION', }); export const quickReplyMock = createTemplateMock({ @@ -295,7 +298,7 @@ export const quickReplyMock = createTemplateMock({ example: 'Hi', shortcode: 'welcome', hasButtons: true, - buttons: '[{"type":"QUICK_REPLY","text":""},{"type":"QUICK_REPLY","text":""}]', + buttons: '[{"type":"QUICK_REPLY","text":"Yes"},{"type":"QUICK_REPLY","text":"No"}]', buttonType: 'QUICK_REPLY', }); @@ -312,7 +315,7 @@ export const ctaMock = createTemplateMock({ example: 'Hi', shortcode: 'welcome', hasButtons: true, - buttons: '[{"type":"PHONE_NUMBER","text":"","phone_number":""}]', + buttons: '[{"type":"PHONE_NUMBER","text":"Call me","phone_number":"9876543210"}]', buttonType: 'CALL_TO_ACTION', });