Merge pull request #3180 from glific/template/dynamic-url

added dynamic links to buttons
glific · Jan 13, 2025 · 4976ab5 · 4976ab5
2 parents 3e82e09 + 8a3547b
commit 4976ab5
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 13 deletions.
diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx
@@ -75,6 +75,10 @@ export const HSM = () => {
   const [validatingURL, setValidatingURL] = useState<boolean>(false);
   const [isUrlValid, setIsUrlValid] = useState<any>();
   const [templateType, setTemplateType] = useState<string | null>(CALL_TO_ACTION);
+  const [dynamicUrlParams, setDynamicUrlParams] = useState<any>({
+    urlType: 'Static',
+    sampleSuffix: '',
+  });
   const [sampleMessages, setSampleMessages] = useState({
     type: 'TEXT',
     location: null,
@@ -160,15 +164,25 @@ export const HSM = () => {
   };
 
   // Creating payload for button template
-  const getButtonTemplatePayload = () => {
-    const buttons = templateButtons.reduce((result: any, button) => {
+  const getButtonTemplatePayload = (urlType: string, sampleSuffix: string) => {
+    const buttons = templateButtons.reduce((result: any, button: any) => {
       const { type: buttonType, value, title }: any = button;
+
       if (templateType === CALL_TO_ACTION) {
         const typeObj: any = {
           phone_number: 'PHONE_NUMBER',
           url: 'URL',
         };
-        const obj: any = { type: typeObj[buttonType], text: title, [buttonType]: value };
+        let obj: any = { type: typeObj[buttonType], text: title, [buttonType]: value };
+
+        if (buttonType === 'url' && urlType === 'Dynamic') {
+          obj = {
+            type: typeObj[buttonType],
+            text: title,
+            [buttonType]: `${value}{{1}}`,
+            example: [`${value}${sampleSuffix}`],
+          };
+        }
         result.push(obj);
       }
 
@@ -192,6 +206,10 @@ export const HSM = () => {
     };
   };
 
+  const handleDynamicParamsChange = (value: any) => {
+    setDynamicUrlParams(value);
+  };
+
   const setStates = ({
     isActive: isActiveValue,
     language: languageIdValue,
@@ -269,6 +287,7 @@ export const HSM = () => {
 
   const setPayload = (payload: any) => {
     let payloadCopy = { ...payload, isHsm: true };
+    const { urlType, sampleSuffix } = dynamicUrlParams;
     if (isEditing) {
       payloadCopy.shortcode = payloadCopy.newShortcode;
     } else {
@@ -278,7 +297,7 @@ export const HSM = () => {
     payloadCopy.languageId = payload.language.id;
     payloadCopy.example = getExampleFromBody(payloadCopy.body, variables);
     if (isAddButtonChecked && templateType) {
-      const templateButtonData = getButtonTemplatePayload();
+      const templateButtonData = getButtonTemplatePayload(urlType, sampleSuffix);
       Object.assign(payloadCopy, { ...templateButtonData });
     }
     if (payloadCopy.type) {
@@ -515,6 +534,8 @@ export const HSM = () => {
       onRemoveClick: removeTemplateButtons,
       onInputChange: handeInputChange,
       onTemplateTypeChange: handleTemplateTypeChange,
+      dynamicUrlParams,
+      onDynamicParamsChange: handleDynamicParamsChange,
     },
     {
       component: AutoComplete,

diff --git a/src/containers/TemplateOptions/TemplateOptions.module.css b/src/containers/TemplateOptions/TemplateOptions.module.css
@@ -14,6 +14,9 @@
 
 .CallToActionWrapper {
   composes: Font;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .CallToActionWrapper > div {
@@ -42,7 +45,7 @@
 
 .RadioStyles {
   composes: Font;
-  margin-bottom: 12px;
+  margin-bottom: 0.5rem;
 }
 
 .RadioLabel > span:last-child {
@@ -57,10 +60,6 @@
   display: block !important;
 }
 
-.FormControl {
-  margin-bottom: 17px;
-}
-
 .FormControl > p {
   margin-left: 12px;
 }
@@ -115,3 +114,19 @@
 .Button {
   margin-top: 7px;
 }
+
+.FieldLabel {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 18px;
+  color: #555555;
+  padding-bottom: 14px;
+}
+
+.DefaultInputRoot {
+  background-color: #ffffff;
+}
+
+.StartAdornment {
+  padding-right: 0.5rem;
+}
diff --git a/src/containers/TemplateOptions/TemplateOptions.test.tsx b/src/containers/TemplateOptions/TemplateOptions.test.tsx
@@ -13,6 +13,11 @@ const props = (isAddButtonChecked: any, templateType: any, inputFields: any, for
   templateType,
   inputFields,
   form,
+  dynamicUrlParams: {
+    urlType: 'Static',
+    sampleSuffix: '',
+  },
+  onDynamicParamsChange: () => {},
 });
 
 const callToAction = { type: 'phone_number', value: '', title: '' };

diff --git a/src/containers/TemplateOptions/TemplateOptions.tsx b/src/containers/TemplateOptions/TemplateOptions.tsx
@@ -1,4 +1,13 @@
-import { RadioGroup, FormControlLabel, Radio, TextField, FormHelperText, FormControl } from '@mui/material';
+import {
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  TextField,
+  FormHelperText,
+  FormControl,
+  Autocomplete,
+  Typography,
+} from '@mui/material';
 import { FieldArray } from 'formik';
 
 import { Button } from 'components/UI/Form/Button/Button';
@@ -14,31 +23,36 @@ export interface TemplateOptionsProps {
   isAddButtonChecked: boolean;
   templateType: string | null;
   inputFields: Array<any>;
-  form: { touched: any; errors: any; values: any };
+  form: { touched: any; errors: any; values: any; setFieldValue: any };
   onAddClick: any;
   onRemoveClick: any;
   onInputChange: any;
   onTemplateTypeChange: any;
   disabled: any;
+  dynamicUrlParams: any;
+  onDynamicParamsChange: any;
 }
 export const TemplateOptions = ({
   isAddButtonChecked,
   templateType,
   inputFields,
-  form: { touched, errors, values },
+  form: { touched, errors },
   onAddClick,
   onRemoveClick,
   onTemplateTypeChange,
   onInputChange,
   disabled = false,
+  dynamicUrlParams,
+  onDynamicParamsChange,
 }: TemplateOptionsProps) => {
   const buttonTitle = 'Button Title';
   const buttonValue = 'Button Value';
   const buttonTitles: any = {
     CALL_TO_ACTION: 'Call to action',
     QUICK_REPLY: 'Quick Reply',
   };
-
+  const options = ['Static', 'Dynamic'];
+  const { urlType, sampleSuffix } = dynamicUrlParams;
   const handleAddClick = (helper: any, type: boolean) => {
     const obj = type ? { type: '', value: '', title: '' } : { value: '' };
     helper.push(obj);
@@ -133,6 +147,23 @@ export const TemplateOptions = ({
                 ) : null}
               </div>
             </div>
+            {type === 'url' && (
+              <div className={styles.TextFieldWrapper}>
+                <Autocomplete
+                  options={options}
+                  classes={{ inputRoot: styles.DefaultInputRoot }}
+                  renderInput={(params) => <TextField {...params} label="Select URL Type" />}
+                  clearIcon={false}
+                  value={urlType}
+                  onChange={(event: any, newValue: string | null) => {
+                    onDynamicParamsChange({
+                      ...dynamicUrlParams,
+                      urlType: newValue,
+                    });
+                  }}
+                />
+              </div>
+            )}
             <div className={styles.TextFieldWrapper} data-testid="buttonTitle">
               <FormControl fullWidth error={isError('title')} className={styles.FormControl}>
                 <TextField
@@ -167,7 +198,37 @@ export const TemplateOptions = ({
                 ) : null}
               </FormControl>
             </div>
+            {urlType === 'Dynamic' && type === 'url' && (
+              <div>
+                <FormControl fullWidth error={isError('title')} className={styles.FormControl}>
+                  <TextField
+                    disabled={disabled}
+                    label={'Sample Suffix'}
+                    className={styles.TextField}
+                    slotProps={{
+                      input: {
+                        startAdornment: (
+                          <Typography
+                            variant="body2"
+                            color="textSecondary"
+                            className={styles.StartAdornment}
+                          >{`{{1}}`}</Typography>
+                        ),
+                      },
+                    }}
+                    onChange={(event) =>
+                      onDynamicParamsChange({
+                        ...dynamicUrlParams,
+                        sampleSuffix: event.target.value,
+                      })
+                    }
+                    value={sampleSuffix}
+                  />
+                </FormControl>
+              </div>
+            )}
           </div>
+
           <div className={styles.Button}>
             {inputFields.length === index + 1 && inputFields.length !== 2 ? addButton(arrayHelpers, true) : null}
           </div>