Skip to content

Commit

Permalink
Merge branch 'master' of github.com:glific/glific-frontend into packa…
Browse files Browse the repository at this point in the history 
…ge-updates-1224
  • Loading branch information
@kurund
kurund committed Jan 12, 2025
2 parents cdbd487 + 3e82e09 commit ca8b851
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 39 deletions.
6 changes: 6 additions & 0 deletions src/containers/HSM/HSM.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
69 changes: 48 additions & 21 deletions src/containers/HSM/HSM.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ const queries = {
const templateIcon = <TemplateIcon className={styles.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<any>(null);
Expand All @@ -70,7 +74,7 @@ export const HSM = () => {
const [languageOptions, setLanguageOptions] = useState<any>([]);
const [validatingURL, setValidatingURL] = useState<boolean>(false);
const [isUrlValid, setIsUrlValid] = useState<any>();
const [templateType, setTemplateType] = useState<string | null>(null);
const [templateType, setTemplateType] = useState<string | null>(CALL_TO_ACTION);
const [sampleMessages, setSampleMessages] = useState({
type: 'TEXT',
location: null,
Expand Down Expand Up @@ -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: '', title: '', value: '' },
};

if (templateType) {
buttons = addFromTemplate ? [...templateButtons, buttonType[templateType]] : [buttonType[templateType]];
buttons = addFromTemplate ? [...templateButtons, buttonTypes[templateType]] : [buttonTypes[templateType]];
}

setTemplateButtons(buttons);
Expand Down Expand Up @@ -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;
Expand All @@ -369,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: {
Expand Down Expand Up @@ -504,7 +514,7 @@ export const HSM = () => {
onAddClick: addTemplateButtons,
onRemoveClick: removeTemplateButtons,
onInputChange: handeInputChange,
onTemplateTypeChange: (value: string) => setTemplateType(value),
onTemplateTypeChange: handleTemplateTypeChange,
},
{
component: AutoComplete,
Expand Down Expand Up @@ -630,6 +640,22 @@ export const HSM = () => {
then: (schema) => schema.nullable().required(t('Element name is required.')),
otherwise: (schema) => schema.nullable(),
}),
templateButtons: Yup.array().of(
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({});
})
),
};

const FormSchema = Yup.object().shape(validation, [['type', 'attachmentURL']]);
Expand Down Expand Up @@ -667,25 +693,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));
Expand Down
34 changes: 18 additions & 16 deletions src/containers/TemplateOptions/TemplateOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,10 @@ export const TemplateOptions = ({
<TextField
disabled={disabled}
title={title}
defaultValue={value}
value={title}
placeholder={buttonTitle}
variant="outlined"
onBlur={(e: any) => onInputChange(e, row, index, 'title')}
onChange={(e: any) => onInputChange(e, row, index, 'title')}
className={styles.TextField}
error={isError('title')}
/>
Expand All @@ -154,11 +154,11 @@ export const TemplateOptions = ({
<FormControl fullWidth error={isError('value')} className={styles.FormControl}>
<TextField
title={value}
defaultValue={value}
value={value}
disabled={disabled}
placeholder={buttonValue}
variant="outlined"
onBlur={(e: any) => onInputChange(e, row, index, 'value')}
onChange={(e: any) => onInputChange(e, row, index, 'value')}
className={styles.TextField}
error={isError('value')}
/>
Expand All @@ -182,22 +182,24 @@ export const TemplateOptions = ({
<FormControl fullWidth error={isError('value')} className={styles.FormControl}>
<TextField
disabled={disabled}
defaultValue={value}
value={value}
title={title}
placeholder={`Quick reply ${index + 1} title`}
variant="outlined"
onBlur={(e: any) => 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 && (
<CrossIcon
className={styles.RemoveIcon}
title="Remove"
data-testid="cross-icon"
onClick={() => handleRemoveClick(arrayHelpers, index)}
/>
),
slotProps={{
input: {
endAdornment: inputFields.length > 1 && !disabled && (
<CrossIcon
className={styles.RemoveIcon}
title="Remove"
data-testid="cross-icon"
onClick={() => handleRemoveClick(arrayHelpers, index)}
/>
),
},
}}
/>
{errors.templateButtons && touched.templateButtons && touched.templateButtons[index] ? (
Expand Down Expand Up @@ -251,7 +253,7 @@ export const TemplateOptions = ({
name="templateButtons"
render={(arrayHelpers: any) => (
<div className={styles.QuickReplyContainer}>
{values.templateButtons.map((row: any, index: any) => (
{inputFields.map((row: any, index: any) => (
<div key={index}> {getButtons(row, index, arrayHelpers)}</div>
))}
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/mocks/Template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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',
});

Expand All @@ -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',
});

Expand Down

0 comments on commit ca8b851

Please sign in to comment.