fixed behaviour of hsm buttons

glific · Jan 6, 2025 · aa2cf47 · aa2cf47
1 parent f4ad55d
commit aa2cf47
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx
@@ -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);
@@ -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
@@ -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')}
                 />
@@ -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')}
                 />
@@ -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] ? (
@@ -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>