@bigbinary/neeto-message-templates-frontend 0.0.8 → 0.1.0

package/dist/index.js

@@ -1,11 +1,11 @@
 import React, { useContext, useState, useRef, useEffect } from 'react';
-import { isNotEmpty, noop as noop$1, findBy } from '@bigbinary/neeto-commons-frontend/pure';
+import { isNotEmpty, noop as noop$1, findBy, capitalize as capitalize$1, nullSafe } from '@bigbinary/neeto-commons-frontend/pure';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
-import { Dropdown, Typography, Button, Pane, Table, NoData, Alert, Select } from '@bigbinary/neetoui';
-import { prop, equals, includes, pick, omit, isEmpty, assoc, mergeAll } from 'ramda';
+import { Dropdown, Typography, Button, Pane, Table, NoData, Alert, Select, Textarea } from '@bigbinary/neetoui';
+import { prop, equals, includes, pick, omit, isEmpty, assoc, mergeAll, pluck } from 'ramda';
 import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { MenuHorizontal } from '@bigbinary/neeto-icons';
@@ -13,7 +13,7 @@ import axios from 'axios';
 import { withImmutableActions } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { create as create$1 } from 'zustand';
 import { FormikEditor } from '@bigbinary/neeto-editor';
-import { Input, Form as Form$2 } from '@bigbinary/neetoui/formik';
+import { Input, Form as Form$1, Select as Select$1, Button as Button$1 } from '@bigbinary/neetoui/formik';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
 import { useFormikContext } from 'formik';
@@ -5248,6 +5248,7 @@ var template = {
 	search: "Search {{what}}",
 	markAsActive: "Mark as active",
 	markAsInactive: "Mark as inactive",
+	close: "Close",
 	"delete": "Delete",
 	edit: "Edit",
 	saveChanges: "Save changes",
@@ -5271,13 +5272,16 @@ var template = {
 	sendTestEmail: "Send test email",
 	sendTestSms: "Send test sms",
 	filtersEmptyState: "There are no {{type}} to show for applied filters.",
+	preview: "Template Preview",
+	resolveVariable: "Resolve {{type}} variables",
 	validation: {
 		namePresence: "Name is required",
 		subjectPresence: "Subject is required",
 		bodyPresence: "Body is required",
 		emailAddressPresence: "Email address is required",
 		emailAddressFormatValidation: "Invalid email address",
-		validPhoneNumber: "Enter valid phone number"
+		validPhoneNumber: "Enter valid phone number",
+		variablePresence: "Variable should not be empty"
 	}
 };
 var sendMessage = {
@@ -5369,10 +5373,6 @@ var MESSAGE_TEMPLATES = {
   }
 };
 var DEFAULT_EDITOR_ROW_COUNT = 15;
-var TEMPLATE_VARIABLES = [{
-  key: "name",
-  label: t$1("template.name")
-}];
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isOpen: false,
@@ -6058,7 +6058,7 @@ var TestMessage = function TestMessage(_ref) {
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Form$1 = function Form(_ref) {
+var Form = function Form(_ref) {
   var onClose = _ref.onClose,
     isEdit = _ref.isEdit,
     _ref$template = _ref.template,
@@ -6067,7 +6067,8 @@ var Form$1 = function Form(_ref) {
     setInitialFocusField = _ref.setInitialFocusField,
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
     isTestMessageLoading = _ref.isTestMessageLoading,
-    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate;
+    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
+    templateVariables = _ref.templateVariables;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var editorRef = useRef(null);
@@ -6095,7 +6096,7 @@ var Form$1 = function Form(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/React.createElement(Form$1, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -6129,7 +6130,7 @@ var Form$1 = function Form(_ref) {
       name: "body",
       ref: editorRef,
       rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: TEMPLATE_VARIABLES
+      variables: templateVariables
     }), isTestTemplateVisible && /*#__PURE__*/React.createElement(TestMessage, {
       handleSubmitTestTemplate: handleSubmitTestTemplate,
       isEmailTemplate: isEmailTemplate,
@@ -6158,7 +6159,8 @@ var AddEdit = function AddEdit(_ref) {
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
     shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
     addText = _ref.addText,
-    editText = _ref.editText;
+    editText = _ref.editText,
+    templateVariables = _ref.templateVariables;
   var initialFocusField = useRef();
   var setInitialFocusField = function setInitialFocusField(fieldRef) {
     return initialFocusField.current = fieldRef;
@@ -6174,7 +6176,7 @@ var AddEdit = function AddEdit(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
-  }, label)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
+  }, label)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form, {
     createUpdateTemplate: createUpdateTemplate,
     handleSubmitTestTemplate: handleSubmitTestTemplate,
     isEdit: isEdit,
@@ -6182,6 +6184,7 @@ var AddEdit = function AddEdit(_ref) {
     setInitialFocusField: setInitialFocusField,
     shouldIncludeTestTemplate: shouldIncludeTestTemplate,
     template: template,
+    templateVariables: templateVariables,
     onClose: onClose
   })));
 };
@@ -6347,7 +6350,9 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _ref$isTestMessageLoa = _ref.isTestMessageLoading,
     isTestMessageLoading = _ref$isTestMessageLoa === void 0 ? false : _ref$isTestMessageLoa,
     _ref$shouldIncludeTes = _ref.shouldIncludeTestTemplate,
-    shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes;
+    shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
   var _useState = useState(MESSAGE_TEMPLATE_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     manageTemplatePane = _useState2[0],
@@ -6434,6 +6439,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     isTestMessageLoading: isTestMessageLoading,
     manageTemplatePane: manageTemplatePane,
     shouldIncludeTestTemplate: shouldIncludeTestTemplate,
+    templateVariables: templateVariables,
     onClose: function onClose() {
       return setManageTemplatePane(assoc("isOpen", false));
     }
@@ -6441,13 +6447,13 @@ var MessageTemplates = function MessageTemplates(_ref) {
 };
 var index$1 = withReactQuery(MessageTemplates);
 
+var formatEditorContent = function formatEditorContent(value) {
+  return value === null || value === void 0 ? void 0 : value.replaceAll(/<\/?(?!img)\w*\b[^>]*>/gi, "").trim();
+};
 var SEND_MESSAGE_INITIAL_VALUES = {
   subject: "",
   body: ""
 };
-var formatEditorContent = function formatEditorContent(value) {
-  return value === null || value === void 0 ? void 0 : value.replaceAll(/<\/?(?!img)\w*\b[^>]*>/gi, "").trim();
-};
 var EMAIL_MESSAGE_FORM_SCHEMA = yup.object().shape({
   subject: yup.string().trim().required(t$1("template.validation.subjectPresence")),
   body: yup.string().test("body", t$1("template.validation.bodyPresence"), function (value) {
@@ -6459,15 +6465,21 @@ var SMS_MESSAGE_FORM_VALIDATION_SCHEMA = yup.object().shape({
     return !!formatEditorContent(value);
   })
 });
+var WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA = yup.object().shape({
+  variableContents: yup.object().shape({
+    body: yup.array().of(yup.string().required(t$1("template.validation.variablePresence")))
+  })
+});
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Form = function Form(_ref) {
+var EmailAndSms = function EmailAndSms(_ref) {
   var isEmailTemplate = _ref.isEmailTemplate,
     onClose = _ref.onClose,
     templates = _ref.templates,
     handleSubmit = _ref.handleSubmit,
     setInitialFocusField = _ref.setInitialFocusField,
+    templateVariables = _ref.templateVariables,
     customFields = _ref.customFields,
     customFieldsInitialValues = _ref.customFieldsInitialValues,
     customFieldsValidationSchema = _ref.customFieldsValidationSchema;
@@ -6481,7 +6493,7 @@ var Form = function Form(_ref) {
   var updatedInitialValues = mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
   var updatedValidationSchema = yup.object().shape(_objectSpread(_objectSpread({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
   var initialValueKeys = Object.keys(INITIAL_VALUES);
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/React.createElement(Form$1, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -6533,7 +6545,7 @@ var Form = function Form(_ref) {
       name: "body",
       ref: editorRef,
       rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: TEMPLATE_VARIABLES
+      variables: templateVariables
     }), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "absolute bottom-0 left-0 flex gap-x-2"
     }, /*#__PURE__*/React.createElement(Button, {
@@ -6550,6 +6562,125 @@ var Form = function Form(_ref) {
   });
 };
 
+var Whatsapp = function Whatsapp(_ref) {
+  var _templates$, _templates$2, _templates$3, _templates$4;
+  var templates = _ref.templates,
+    onClose = _ref.onClose,
+    handleSubmit = _ref.handleSubmit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var getInitialVariableComponents = function getInitialVariableComponents(variables) {
+    var initialComponents = {};
+    variables.forEach(function (_ref2) {
+      var type = _ref2.type,
+        count = _ref2.count;
+      initialComponents[type] = Array(count).fill("");
+    });
+    return initialComponents;
+  };
+  var getTemplateMessage = function getTemplateMessage(components) {
+    return nullSafe(pluck)("text", components).join("\n");
+  };
+  if (isEmpty(templates)) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, null, t("template.emptyState", {
+      type: t("template.whatsappTemplates")
+    })), /*#__PURE__*/React.createElement(Pane.Footer, {
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React.createElement(Button, {
+      label: t("template.close"),
+      onClick: onClose
+    })));
+  }
+  var initialFormValues = {
+    selectedTemplate: {
+      label: (_templates$ = templates[0]) === null || _templates$ === void 0 ? void 0 : _templates$.name,
+      value: (_templates$2 = templates[0]) === null || _templates$2 === void 0 ? void 0 : _templates$2.id
+    },
+    templateMessage: getTemplateMessage((_templates$3 = templates[0]) === null || _templates$3 === void 0 ? void 0 : _templates$3.components),
+    variableContents: getInitialVariableComponents((_templates$4 = templates[0]) === null || _templates$4 === void 0 ? void 0 : _templates$4.variableCount)
+  };
+  return /*#__PURE__*/React.createElement(Form$1, {
+    formProps: {
+      noValidate: true,
+      className: "flex w-full flex-col gap-y-4 pb-6"
+    },
+    formikProps: {
+      initialValues: initialFormValues,
+      validationSchema: WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref3) {
+    var dirty = _ref3.dirty,
+      isSubmitting = _ref3.isSubmitting,
+      values = _ref3.values,
+      setValues = _ref3.setValues;
+    var handleTemplateChange = function handleTemplateChange(value) {
+      if (!value) return;
+      var template = findBy({
+        id: value === null || value === void 0 ? void 0 : value.value
+      }, templates);
+      setValues({
+        selectedTemplate: {
+          label: template.name,
+          value: template.id
+        },
+        templateMessage: getTemplateMessage(template.components),
+        variableContents: getInitialVariableComponents(template.variableCount)
+      });
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select$1, {
+      required: true,
+      defaultValue: initialFormValues.selectedTemplate,
+      label: t("template.title"),
+      name: "selectedTemplate",
+      options: templates.map(function (_ref4) {
+        var name = _ref4.name,
+          id = _ref4.id;
+        return {
+          label: name,
+          value: id
+        };
+      }),
+      onChange: handleTemplateChange
+    }), /*#__PURE__*/React.createElement(Textarea, {
+      disabled: true,
+      nakedTextarea: true,
+      label: t("template.preview"),
+      value: values.templateMessage
+    }), isNotEmpty(values.variableContents) && /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(values.variableContents).map(function (group) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col gap-y-2",
+        key: group
+      }, /*#__PURE__*/React.createElement(Typography, {
+        style: "h4"
+      }, t("template.resolveVariable", {
+        type: capitalize$1(group)
+      })), values.variableContents[group].map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "".concat(group, "-").concat(index)
+        }, /*#__PURE__*/React.createElement(Input, {
+          required: true,
+          key: "".concat(group, "-").concat(index),
+          label: "{{".concat(index + 1, "}}"),
+          name: "variableContents.".concat(group, ".").concat(index)
+        }));
+      }));
+    })), /*#__PURE__*/React.createElement(Pane.Footer, {
+      className: "absolute bottom-0 left-0 flex gap-x-2"
+    }, /*#__PURE__*/React.createElement(Button$1, {
+      disabled: !dirty || isSubmitting,
+      label: t("template.saveChanges"),
+      loading: isSubmitting,
+      type: "submit"
+    }), /*#__PURE__*/React.createElement(Button$1, {
+      label: t("template.cancel"),
+      style: "text",
+      type: "reset",
+      onClick: onClose
+    })));
+  });
+};
+
 var SendMessagePane = function SendMessagePane(_ref) {
   var _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
@@ -6564,7 +6695,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$customFieldsInit = _ref.customFieldsInitialValues,
     customFieldsInitialValues = _ref$customFieldsInit === void 0 ? {} : _ref$customFieldsInit,
     _ref$customFieldsVali = _ref.customFieldsValidationSchema,
-    customFieldsValidationSchema = _ref$customFieldsVali === void 0 ? {} : _ref$customFieldsVali;
+    customFieldsValidationSchema = _ref$customFieldsVali === void 0 ? {} : _ref$customFieldsVali,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusField = useRef();
@@ -6582,6 +6715,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
   var isEmailTemplate = type === "email";
+  var isWhatsappTemplate = type === "whatsapp";
   return /*#__PURE__*/React.createElement(Pane, {
     initialFocusRef: initialFocusField,
     isOpen: isOpen,
@@ -6589,13 +6723,18 @@ var SendMessagePane = function SendMessagePane(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("common.send"), " ", type)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form, {
+  }, t("common.send"), " ", type)), /*#__PURE__*/React.createElement(Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React.createElement(Whatsapp, {
+    handleSubmit: handleSubmit,
+    templates: templates,
+    onClose: onClose
+  }) : /*#__PURE__*/React.createElement(EmailAndSms, {
     customFields: customFields,
     customFieldsInitialValues: customFieldsInitialValues,
     customFieldsValidationSchema: customFieldsValidationSchema,
     handleSubmit: handleSubmit,
     isEmailTemplate: isEmailTemplate,
     setInitialFocusField: setInitialFocusField,
+    templateVariables: templateVariables,
     templates: templates,
     onClose: onClose
   })));