@bigbinary/neeto-message-templates-frontend 0.6.6 → 0.7.0

package/dist/index.js

@@ -6,6 +6,7 @@ import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import { Button, Typography, Pane, Table, NoData, Alert, Select, Textarea as Textarea$1, Label } from '@bigbinary/neetoui';
 import { isEmpty, equals, prop, includes, pick, omit, assoc, mergeAll, pluck, whereAny, reject, modify } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
 import { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
@@ -15,8 +16,7 @@ import axios from 'axios';
 import require$$0 from 'util';
 import { create } from 'zustand';
 import { FormikEditor } from '@bigbinary/neeto-editor';
-import { Textarea, Input, Form as Form$2, Select as Select$1, Button as Button$1, ActionBlock } from '@bigbinary/neetoui/formik';
-import { useTranslation, Trans } from 'react-i18next';
+import { Textarea, Input, Form as Form$2, ActionBlock, Select as Select$1 } from '@bigbinary/neetoui/formik';
 import { useFormikContext, FieldArray } from 'formik';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
@@ -3084,51 +3084,42 @@ var Form$1 = function Form(_ref) {
       validateOnChange: true,
       onSubmit: handleSubmit
     }
-  }, function (_ref4) {
-    var dirty = _ref4.dirty,
-      isValid = _ref4.isValid,
-      isSubmitting = _ref4.isSubmitting;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-      required: true,
-      label: t("neetoMessageTemplate.template.templateName"),
-      name: "name",
-      ref: setInitialFocusField
-    }), isEmailTemplate && /*#__PURE__*/React.createElement(FormikAdaptiveInput, {
-      required: true,
-      label: t("neetoMessageTemplate.template.emailSubject"),
-      name: "subject"
-    }), /*#__PURE__*/React.createElement(FormikEditor, {
-      hideSlashCommands: true,
-      required: true,
-      contentClassName: "max-h-40",
-      defaults: isEmailTemplate ? undefined : [],
-      label: messageBodyLabel,
-      name: "body",
-      ref: editorRef,
-      rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: templateVariables
-    }), isTestTemplateVisible && /*#__PURE__*/React.createElement(TestMessage, {
-      customFields: customFields,
-      handleSubmitTestTemplate: handleSubmitTestTemplate,
-      isEmailTemplate: isEmailTemplate,
-      isTestMessageLoading: isTestMessageLoading,
-      isTestingTemplateDisabled: isTestingTemplateDisabled
-    }), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "message-template-submit-button",
-      disabled: !(dirty && isValid) || isSubmitting,
-      label: t("neetoMessageTemplate.template.saveChanges"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMessageTemplate.template.templateName"),
+    name: "name",
+    ref: setInitialFocusField
+  }), isEmailTemplate && /*#__PURE__*/React.createElement(FormikAdaptiveInput, {
+    required: true,
+    label: t("neetoMessageTemplate.template.emailSubject"),
+    name: "subject"
+  }), /*#__PURE__*/React.createElement(FormikEditor, {
+    hideSlashCommands: true,
+    required: true,
+    contentClassName: "max-h-40",
+    defaults: isEmailTemplate ? undefined : [],
+    label: messageBodyLabel,
+    name: "body",
+    ref: editorRef,
+    rows: DEFAULT_EDITOR_ROW_COUNT,
+    variables: templateVariables
+  }), isTestTemplateVisible && /*#__PURE__*/React.createElement(TestMessage, {
+    customFields: customFields,
+    handleSubmitTestTemplate: handleSubmitTestTemplate,
+    isEmailTemplate: isEmailTemplate,
+    isTestMessageLoading: isTestMessageLoading,
+    isTestingTemplateDisabled: isTestingTemplateDisabled
+  }), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "absolute bottom-0 left-0"
+  }, /*#__PURE__*/React.createElement(ActionBlock, {
+    cancelButtonProps: {
       "data-cy": "message-template-reset-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
       onClick: onClose
-    })));
-  });
+    },
+    submitButtonProps: {
+      "data-cy": "message-template-submit-button"
+    }
+  })));
 };
 
 var AddEdit = function AddEdit(_ref) {
@@ -3321,19 +3312,20 @@ var List = function List(_ref) {
     }
   })) : /*#__PURE__*/React.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
+  }, /*#__PURE__*/React.createElement(NoData, _extends({}, !isFilterApplied && {
     primaryButtonProps: {
       label: addText,
       onClick: function onClick() {
         return setManageTemplatePane(assoc("isOpen", true));
       }
-    },
+    }
+  }, {
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
       type: emptyStateLabel
     }) : t("neetoMessageTemplate.template.emptyState", {
       type: emptyStateLabel
     })
-  })), /*#__PURE__*/React.createElement(Alert, {
+  }))), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDelete,
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoMessageTemplate.template.delete"),
@@ -3384,6 +3376,8 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isFilterPaneOpen = _useState4[0],
     setIsFilterPaneOpen = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFilters = useFilters(),
     searchKeywordProps = _useFilters.searchKeywordProps,
     filterColumns = _useFilters.filterColumns,
@@ -3435,12 +3429,12 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onClick: handleActionClick
     })
   }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(Bar, {
-      columns: filterColumns,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFilterPaneOpen,
-      onChange: handleChange
-    }),
+    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
+      component: "h4"
+    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+      type: MESSAGE_TYPES[type],
+      count: templatesCount
+    })),
     rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
       dataProps: {
         totalCount: isFilterApplied ? null : templatesCount
@@ -3453,6 +3447,11 @@ var MessageTemplates = function MessageTemplates(_ref) {
         onChange: handleChange
       }
     })
+  }), /*#__PURE__*/React.createElement(Bar, {
+    columns: filterColumns,
+    keyword: searchKeywordProps,
+    setIsPaneOpen: setIsFilterPaneOpen,
+    onChange: handleChange
   }), /*#__PURE__*/React.createElement(List, {
     addText: addText,
     isFilterApplied: isFilterApplied,
@@ -3543,8 +3542,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
       onSubmit: handleSubmit
     }
   }, function (_ref4) {
-    var isSubmitting = _ref4.isSubmitting,
-      setValues = _ref4.setValues,
+    var setValues = _ref4.setValues,
       values = _ref4.values;
     var handleTemplateChange = function handleTemplateChange(value) {
       if (!value) return;
@@ -3581,19 +3579,16 @@ var EmailAndSms = function EmailAndSms(_ref) {
       rows: DEFAULT_EDITOR_ROW_COUNT,
       variables: templateVariables
     }), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "message-template-send-button",
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "message-template-cancel-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
-      onClick: onClose
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React.createElement(ActionBlock, {
+      cancelButtonProps: {
+        "data-cy": "message-template-cancel-button",
+        onClick: onClose
+      },
+      submitButtonProps: {
+        "data-cy": "message-template-send-button",
+        label: t("neetoMessageTemplate.template.send")
+      }
     })));
   });
 };
@@ -3607,7 +3602,9 @@ var Whatsapp = function Whatsapp(_ref) {
     handleSubmit = _ref.handleSubmit,
     customFields = _ref.customFields,
     customFieldsInitialValues = _ref.customFieldsInitialValues,
-    customFieldsValidationSchema = _ref.customFieldsValidationSchema;
+    customFieldsValidationSchema = _ref.customFieldsValidationSchema,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var getInitialVariableComponents = function getInitialVariableComponents(variables) {
@@ -3636,6 +3633,15 @@ var Whatsapp = function Whatsapp(_ref) {
   if (isEmpty(templates)) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, null, t("neetoMessageTemplate.template.emptyState", {
       type: t("neetoMessageTemplate.template.whatsappTemplates")
+    }), " ", helpDocUrl && /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMessageTemplate.template.whatsapp.helpDocText",
+      components: {
+        Link: /*#__PURE__*/React.createElement(Button, {
+          size: "large",
+          style: "link",
+          to: helpDocUrl
+        })
+      }
     })), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "absolute bottom-0 left-0"
     }, /*#__PURE__*/React.createElement(Button, {
@@ -3654,8 +3660,7 @@ var Whatsapp = function Whatsapp(_ref) {
       onSubmit: handleSubmit
     }
   }, function (_ref3) {
-    var isSubmitting = _ref3.isSubmitting,
-      values = _ref3.values,
+    var values = _ref3.values,
       setValues = _ref3.setValues;
     var handleTemplateChange = function handleTemplateChange(value) {
       if (!value) return;
@@ -3705,19 +3710,16 @@ var Whatsapp = function Whatsapp(_ref) {
         }));
       }));
     })), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React.createElement(Button$1, {
-      "data-cy": "message-template-send-button",
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button$1, {
-      "data-cy": "message-template-cancel-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
-      onClick: onClose
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React.createElement(ActionBlock, {
+      cancelButtonProps: {
+        "data-cy": "message-template-cancel-button",
+        onClick: onClose
+      },
+      submitButtonProps: {
+        "data-cy": "message-template-send-button",
+        label: t("neetoMessageTemplate.template.send")
+      }
     })));
   });
 };
@@ -3740,7 +3742,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$templateVariable = _ref.templateVariables,
     templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
     _ref$ownerId = _ref.ownerId,
-    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusField = useRef();
@@ -3771,6 +3775,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
     customFieldsInitialValues: customFieldsInitialValues,
     customFieldsValidationSchema: customFieldsValidationSchema,
     handleSubmit: handleSubmit,
+    helpDocUrl: helpDocUrl,
     onClose: onClose,
     templates: templates
   }) : /*#__PURE__*/React.createElement(EmailAndSms, {
@@ -4055,10 +4060,9 @@ var Form = function Form(_ref) {
     name: "additionalData"
   }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
     cancelButtonProps: {
-      onClick: onClose,
-      disabled: isMutating
+      onClick: onClose
     },
-    className: "space-x-2"
+    isSubmitting: isMutating
   }))));
 };
 
@@ -4176,15 +4180,15 @@ var ApiTemplates = function ApiTemplates(_ref) {
       placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
     }
   }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(Bar, {
-      columns: FILTER_COLUMNS,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFiltersPaneOpen,
-      onChange: handleFiltersChange
-    }),
+    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
+      component: "h4"
+    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+      type: t("messageType.api"),
+      count: totalCount
+    })),
     rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
       dataProps: {
-        totalCount: totalCount
+        totalCount: isFilterApplied ? null : totalCount
       },
       filterProps: {
         columns: FILTER_COLUMNS,
@@ -4194,6 +4198,11 @@ var ApiTemplates = function ApiTemplates(_ref) {
         onChange: handleFiltersChange
       }
     })
+  }), /*#__PURE__*/React.createElement(Bar, {
+    columns: FILTER_COLUMNS,
+    keyword: searchKeywordProps,
+    setIsPaneOpen: setIsFiltersPaneOpen,
+    onChange: handleFiltersChange
   }), isNotEmpty(templates) ? /*#__PURE__*/React.createElement(TableWrapper, {
     hasPagination: totalCount > pageParams.size
   }, /*#__PURE__*/React.createElement(Table, {
@@ -4219,19 +4228,20 @@ var ApiTemplates = function ApiTemplates(_ref) {
     })
   })) : /*#__PURE__*/React.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
+  }, /*#__PURE__*/React.createElement(NoData, _extends({}, !isFilterApplied && {
     primaryButtonProps: {
       label: t("neetoMessageTemplate.api.addApiTemplate"),
       onClick: function onClick() {
         return setIsFormPaneOpen(true);
       }
-    },
+    }
+  }, {
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
       type: t("neetoMessageTemplate.template.apiTemplates")
     }) : t("neetoMessageTemplate.template.emptyState", {
       type: t("neetoMessageTemplate.template.apiTemplates")
     })
-  })), /*#__PURE__*/React.createElement(Pane, {
+  }))), /*#__PURE__*/React.createElement(Pane, {
     isOpen: isFormPaneOpen,
     onClose: handleCloseDeleteAlertAndFormPane
   }, function (_ref3) {
@@ -4271,15 +4281,6 @@ var SEND_TO_API_FORM_VALIDATION_SCHEMA = yup.object({
   }))
 });
 
-var buildSendToApiFormInitialValues = function buildSendToApiFormInitialValues(template) {
-  if (isEmpty(template)) return SEND_TO_API_FORM_INITIAL_VALUES;
-  var additionalData = isEmpty(template.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : template.additionalData;
-  return {
-    endpoint: template.endpoint,
-    additionalData: additionalData
-  };
-};
-
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SendToApiPane = function SendToApiPane(props) {
@@ -4302,10 +4303,6 @@ var SendToApiForm = function SendToApiForm(_ref) {
     setFocusField = _ref.paneProps.setFocusField;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedTemplate = _useState2[0],
-    setSelectedTemplate = _useState2[1];
   var _useFetchTemplates = useFetchTemplates({
       status: "active",
       templateType: API_TEMPLATE_TYPE,
@@ -4316,6 +4313,10 @@ var SendToApiForm = function SendToApiForm(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
     isLoadingTemplates = _useFetchTemplates.isLoading;
+  var handleTemplateChange = function handleTemplateChange(setFieldValue, template) {
+    setFieldValue("endpoint", template.endpoint);
+    setFieldValue("additionalData", template.additionalData);
+  };
   var handleSubmit = function handleSubmit(formValues) {
     var additionalDataModifiedFormValues = modify("additionalData", rejectEmptyKeyValuePairs, formValues);
     onSubmit(additionalDataModifiedFormValues);
@@ -4325,42 +4326,44 @@ var SendToApiForm = function SendToApiForm(_ref) {
     weight: "semibold"
   }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React.createElement(Form$2, {
     formikProps: {
-      initialValues: buildSendToApiFormInitialValues(selectedTemplate),
-      enableReinitialize: true,
+      initialValues: SEND_TO_API_FORM_INITIAL_VALUES,
       validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
       onSubmit: handleSubmit
     }
-  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-5"
-  }, /*#__PURE__*/React.createElement(Select, {
-    innerRef: setFocusField,
-    isLoading: isLoadingTemplates,
-    label: t("neetoMessageTemplate.template.title"),
-    options: renameKeys({
-      name: "label",
-      id: "value"
-    }, templates),
-    placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
-    onChange: setSelectedTemplate
-  }), /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    label: t("neetoMessageTemplate.api.endpoint"),
-    name: "endpoint",
-    placeholder: SAMPLE_URL
-  }), /*#__PURE__*/React.createElement(KeyValuePairs, {
-    label: t("neetoMessageTemplate.api.additionalData"),
-    name: "additionalData"
-  }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    className: "space-x-2",
-    cancelButtonProps: {
-      disabled: isSubmitting,
-      onClick: onClose
-    },
-    submitButtonProps: {
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send")
-    }
-  }))));
+  }, function (_ref2) {
+    var setFieldValue = _ref2.setFieldValue;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+      className: "w-full space-y-5"
+    }, /*#__PURE__*/React.createElement(Select, {
+      innerRef: setFocusField,
+      isLoading: isLoadingTemplates,
+      label: t("neetoMessageTemplate.template.title"),
+      options: renameKeys({
+        name: "label",
+        id: "value"
+      }, templates),
+      placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+      onChange: function onChange(template) {
+        return handleTemplateChange(setFieldValue, template);
+      }
+    }), /*#__PURE__*/React.createElement(Input, {
+      required: true,
+      label: t("neetoMessageTemplate.api.endpoint"),
+      name: "endpoint",
+      placeholder: SAMPLE_URL
+    }), /*#__PURE__*/React.createElement(KeyValuePairs, {
+      label: t("neetoMessageTemplate.api.additionalData"),
+      name: "additionalData"
+    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+      isSubmitting: isSubmitting,
+      cancelButtonProps: {
+        onClick: onClose
+      },
+      submitButtonProps: {
+        label: t("neetoMessageTemplate.template.send")
+      }
+    })));
+  }));
 };
 
 export { ApiTemplates, MessageTemplates, SendMessagePane, SendToApiPane };