@bigbinary/neeto-message-templates-frontend 0.3.6 → 0.4.0

package/README.md

@@ -1,51 +1,51 @@
-# neeto-message-templates
-
-To manage message templates across the neeto products. As of now, it supports
-the creation of SMS, Email and Whatsapp templates.
-
-# Engine Installation
-
+# neeto-message-templates-nano
+The `neeto-message-templates-nano` manages message templates across the neeto products. As of now, it supports the creation of SMS, Email and Whatsapp templates. The nano exports the `@bigbinary/neeto-message-templates-frontend` NPM package and `neeto-message-templates-engine` Rails engine for development.
+
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+        - [Installation](#installation)
+        - [Usage](#usage)
+    - [Frontend package](#frontend-package)
+        - [Installation](#installation-1)
+        - [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
+
+# Development with Host Application
+## Engine
+The engine is used to manage message templates across neeto products.
+
+### Installation
 1. Add this line to your application's Gemfile:
-
-   ```ruby
+    ```ruby
     source "NEETO_GEM_SERVER_URL" do
-      # ..existing gems
+       # ..existing gems
 
-      gem 'neeto-message-templates-engine'
+       gem 'neeto-message-templates-engine'
     end
-   ```
-
+    ```
 2. And then execute:
-
-   ```shell
-   bundle install
-   ```
-
-3. Configure the owner model in the host application.
-
-   ```ruby
-   has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
-   ```
-
-4. Add this line to your application's `config/routes.rb` file
-
-   ```ruby
-   mount NeetoMessageTemplatesEngine::Engine => "/neeto_message_templates_engine"
-   ```
-
-5. Copy the migrations from the engine to the host application and run
-   `db:migrate` in host application
-
-   ```shell
-   bundle exec rails neeto_message_templates_engine:install:migrations
-   bundle exec rails db:migrate
-   ```
-
-6. Create a file in the host app under
-   `app/lib/neeto_message_templates_engine/callbacks.rb` & provide the
-   permission (If you don't have permissions, then simply return true)
-
-   ```ruby
+    ```zsh
+    bundle install
+    ```
+3. Add this line to your application's `config/routes.rb` file:
+    ```ruby
+    mount NeetoMessageTemplatesEngine::Engine => "/neeto_message_templates_engine"
+    ```
+4. Run the following command to copy the migrations from the engine to the host application:
+    ```zsh
+    bundle exec rails neeto_message_templates_engine:install:migrations
+    ```
+5. Add the migrations to the database:
+    ```zsh
+    bundle exec rails db:migrate
+    ```
+5. Create file `neeto-message-templates.rb` under `config/initializers` to provide the `owner_class` information
+    ```ruby
+    NeetoFormEngine.owner_class = "Organization"
+    ```
+6. Create file `callbacks.rb` under `app/lib/neeto_message_templates_engine` and provide the permission (If you don't have permissions, then simply return true)
+    ```ruby
     module NeetoMessageTemplatesEngine
       class Callbacks
         def self.can_manage_message_templates?(user)
@@ -53,49 +53,40 @@ the creation of SMS, Email and Whatsapp templates.
         end
       end
     end
-   ```
-
-7. Create an initializer file in the host app under
-   `configs/initializers/neeto-message-templates.rb` & provide the name of owner
-   model for the message templates. The message_templates `belongs_to` this
-   `owner`.
-
-   ```ruby
-   NeetoMessageTemplatesEngine.owner_class = "Organization"
-   ```
-
-# Frontend Package Installation
-
-Install the latest `neetoMessageTemplates` package using the below command:
-
-```shell
-yarn add @bigbinary/neeto-message-templates-frontend
-```
-
-## MessageTemplates
-
-### Props
-
-- `shouldIncludeTestTemplate`: A boolean value to determines whether test
-  message template option to be included.
+    ```
+7. Configure the owner model in the host application.
+    ```ruby
+    has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
+    ```
 
-- `handleSubmitTestTemplate`: The function in the host app that handles
-  submitting values to send test templates for email and sms.
+### Usage
+You can learn more about usage here:
+  1. [Models](/docs/engine/models.md)
+
+## Frontend package
+### Installation
+1. Install the latest `neeto-message-templates-nano` package using the below command:
+    ```zsh
+    yarn add @bigbinary/neeto-message-templates-frontend
+    ```
 
-- `isTestMessageLoading`: A boolean value that determines whether the test
-  template handle submit is loading or not.
+### Components
+#### `MessageTemplates` ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/80a73223e8facf21a0135675d4dc837645d0f2b0/app/javascript/src/components/MessageTemplates/index.jsx))
+This component is used to manage message templates in your web application. It provides a user-friendly interface for viewing, adding, and editing templates, along with filtering and search capabilities.
 
-- `type`: Type can be `email`, `sms` or `whatsapp`.
+##### Props
+- `shouldIncludeTestTemplate`: A boolean indicating whether the test message template option should be included.
+- `handleSubmitTestTemplate`: The function in the host app responsible for submitting values to send test templates for email and SMS.
+- `isTestMessageLoading`: A boolean indicating whether the test template handle submit is in a loading state.
+- `type`: Represents the type of message, with accepted values of `email`, `sms`, or `whatsapp`.
 
+##### Optional Props
 - `templateVariables`: (optional) To add dynamic variables to form body field.
+- `ownerId`: (optional) To provide the `ID` of the owner if it is not an Organization model. If the owner is an Organization, this prop can be left unspecified.
+- `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
 
-- `ownerId`: (optional) To provide the `id` of the owner if it is not an
-  Organization model. If the owner is an Organization, this prop can be left
-  unspecified.
-
-### Usage
-
-```javascript
+##### Usage
+```jsx
 import React from "react";
 
 import { MessageTemplates } from "@bigbinary/neeto-message-templates-frontend";
@@ -131,36 +122,24 @@ const App = () => {
 };
 ```
 
-## SendMessagePane
-
-### Props
-
-- `isOpen`: To open the side pane.
-
-- `onClose`: To close the side pane.
+#### `SendMessagePane` ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/80a73223e8facf21a0135675d4dc837645d0f2b0/app/javascript/src/components/SendMessagePane/index.jsx))
+This component provides a pane where users can select a template and add content to compose and send messages.
 
-* `handleSubmit`: The function in the host app which is used to send sms and
-  email.
+##### Props
+- `isOpen`: A boolean determining whether the side pane is open.
+- `onClose`: The function to execute when closing.
+- `handleSubmit`: The function within the host app used to send SMS and email.
+- `type`: Represents the type of message, with accepted values of `email`, `sms`, or `whatsapp`.
 
-* `type`: Type can be `email`, `sms` or `whatsapp`.
+##### Optional Props
+- `customFields`: To add custom field component to the pane.
+- `customFieldsInitialValues`: To provide initial values for the custom fields.
+- `customFieldsValidationSchema`: To provide validation schema for the custom fields.
+- `templateVariables`: To add dynamic variables to form body field.
+- `ownerId`: To provide the `ID` of the owner if it is not an Organization model. If the owner is an Organization, this prop can be left unspecified.
 
-- `customFields`: (optional) To add custom field component to the pane.
-
-- `customFieldsInitialValues`: (optional) To provide initial values for the
-  custom fields.
-
-- `customFieldsValidationSchema`: (optional) To provide validation schema for
-  the custom fields.
-
-- `templateVariables`: (optional) To add dynamic variables to form body field.
-
-- `ownerId`: (optional) To provide the `id` of the owner if it is not an
-  Organization model. If the owner is an Organization, this prop can be left
-  unspecified.
-
-### Usage
-
-```js
+##### Usage
+```jsx
 import React, { useState } from "react";
 
 import { SendMessagePane } from "@bigbinary/neeto-message-templates-frontend";
@@ -207,54 +186,5 @@ const App = () => {
 };
 ```
 
-# Development
-
-### Engine
-
-1. Add this line to your application's Gemfile (replace the path to the local
-   copy of neeto-message-templates-engine):
-
-   ```ruby
-   gem 'neeto-message-templates-engine', path: '../neeto-message-templates-engine'
-   ```
-
-2. And then execute:
-
-   ```shell
-   bundle install
-   ```
-
-3. Refer [engine installation](#engine-installation) steps 3, 4, 5 and 6.
-
-### Frontend Package
-
-The usage of `yalc` is explained in this video:
-https://www.youtube.com/watch?v=QBiYGP0Rhe0
-
-1.  See the changes in the host app by executing the following command \
-     <br/> Use this command if releasing package for the first time.
-
-    ```shell
-    yarn build && yalc publish
-    ```
-
-    Use this command to see changes after the initial publish.
-
-    ```shell
-    yarn release
-    ```
-
-# Setup dummy host app
-
-Setup
-[Instructions](https://github.com/bigbinary/neeto-engineering/tree/main/Local-Development-Setup).
-
-Visit http://spinkart.lvh.me:9014 and login with email `oliver@example.com` and
-password `welcome`.
-
-### Additional Instructions
-
-- Run `yarn build` to bundle the app.
-
-- Note: Run the following command before running rails test
-  `RAILS_ENV=test rails db:migrate`
+# Instructions for Publishing
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -2,10 +2,10 @@
   "neetoMessageTemplate": {
     "template": {
       "addEmailTemplate": "Add new email template",
-      "addSmsTemplate": "Add new sms template",
+      "addSmsTemplate": "Add new SMS template",
       "addWhatsappTemplate": "Add new whatsapp template",
       "editEmailTemplate": "Edit email template",
-      "editSmsTemplate": "Edit sms template",
+      "editSmsTemplate": "Edit SMS template",
       "editWhatsappTemplate": "Edit whatsapp template",
       "search": "Search {{what}}",
       "markAsActive": "Mark as active",
@@ -24,17 +24,17 @@
       "title": "Template",
       "active": "Active",
       "templateDeleteConfirmation": "Are you sure want to delete <strong>{{name}}</strong>. This action cannot be undone.",
-      "deleteTemplate": "Delete {{label}}",
-      "emailTemplates": "Email Templates",
-      "emailTemplate": "Email Template",
-      "smsTemplates": "Sms Templates",
-      "smsTemplate": "Sms Template",
+      "deleteTemplate": "Delete {{label, anyCase}}",
+      "emailTemplates": "Email templates",
+      "emailTemplate": "Email template",
+      "smsTemplates": "SMS templates",
+      "smsTemplate": "SMS template",
       "whatsappTemplates": "Whatsapp Templates",
       "whatsappTemplate": "Whatsapp Template",
-      "emptyState": "There are no {{type}} to show.",
+      "emptyState": "There are no {{type, anyCase}} to show.",
       "sendTestEmail": "Send test email",
-      "sendTestSms": "Send test sms",
-      "filtersEmptyState": "There are no {{type}} to show for applied filters.",
+      "sendTestSms": "Send test SMS",
+      "filtersEmptyState": "There are no {{type, anyCase}} to show for applied filters.",
       "preview": "Template Preview",
       "resolveVariable": "Resolve {{type}} variables",
       "validation": {
@@ -49,12 +49,17 @@
     },
     "sendMessage": {
       "email": "Send email",
-      "sms": "Send sms",
+      "sms": "Send SMS",
       "selectTemplate": "Select a template",
-      "testSmsNote": "Note: Variable values will be empty for test sms."
+      "testSmsNote": "Note: Variable values will be empty for test SMS."
     },
     "common": {
       "send": "Send"
     }
+  },
+  "messageType": {
+    "sms": "SMS",
+    "email": "email",
+    "whatsapp": "whatsapp"
   }
 }

package/dist/index.cjs.js

@@ -172,6 +172,11 @@ var MESSAGE_TEMPLATES = {
     editText: i18next.t("neetoMessageTemplate.template.editWhatsappTemplate")
   }
 };
+var MESSAGE_TYPES = {
+  sms: i18next.t("messageType.sms"),
+  email: i18next.t("messageType.email"),
+  whatsapp: i18next.t("messageType.whatsapp")
+};
 var DEFAULT_EDITOR_ROW_COUNT = 15;
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
@@ -335,16 +340,11 @@ var RowActions = function RowActions(_ref) {
   }, t("neetoMessageTemplate.template.delete"))));
 };
 
-var renderSearchProps = function renderSearchProps(label, setSearchTerm, searchTerm) {
+var renderSearchProps = function renderSearchProps(label) {
   return {
     placeholder: i18next.t("neetoMessageTemplate.template.search", {
       what: label.toLowerCase()
-    }),
-    onChange: function onChange(_ref) {
-      var value = _ref.target.value;
-      return setSearchTerm(value);
-    },
-    value: searchTerm
+    })
   };
 };
 var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId) {
@@ -865,7 +865,7 @@ var TestMessage = function TestMessage(_ref) {
     className: "neeto-ui-flex neeto-ui-items-center left-0 flex gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     name: isEmailTemplate ? "testEmailAddress" : "testPhoneNumber",
-    placeholder: t(isEmailTemplate ? "template.emailAddress" : "template.phoneNumber"),
+    placeholder: t(isEmailTemplate ? "neetoMessageTemplate.template.emailAddress" : "neetoMessageTemplate.template.phoneNumber"),
     onKeyDown: handleKeyDown,
     onKeyUp: handleTestValidation
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -1032,32 +1032,30 @@ function _toConsumableArray(arr) {
 }
 
 var useFilters = function useFilters() {
-  var _useState = React.useState(""),
+  var _useState = React.useState(DEFAULT_PAGE_PROPERTIES),
     _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useState3 = React.useState(DEFAULT_PAGE_PROPERTIES),
-    _useState4 = _slicedToArray(_useState3, 2),
-    pageProperties = _useState4[0],
-    setPageProperties = _useState4[1];
+    pageProperties = _useState2[0],
+    setPageProperties = _useState2[1];
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.search_term,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var filterColumns = buildTableColumnData().filter(ramda.prop("node"));
   var searchKeywordProps = {
-    key: "keyword",
+    key: "search_term",
     node: "name",
-    value: searchTerm.trim(),
-    setValue: setSearchTerm
+    value: searchTerm,
+    setValue: neetoCist.noop
   };
-  var _useState5 = React.useState(function () {
+  var _useState3 = React.useState(function () {
       return neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(filterColumns), [searchKeywordProps]));
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filters = _useState6[0],
-    setFilters = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
   return {
     filterColumns: filterColumns,
     searchKeywordProps: searchKeywordProps,
     searchTerm: searchTerm,
-    setSearchTerm: setSearchTerm,
     filters: filters,
     setFilters: setFilters,
     pageProperties: pageProperties,
@@ -1117,7 +1115,8 @@ var List = function List(_ref) {
     label = _ref.label,
     addText = _ref.addText,
     isFilterApplied = _ref.isFilterApplied,
-    ownerId = _ref.ownerId;
+    ownerId = _ref.ownerId,
+    type = _ref.type;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useDeleteTemplate = useDeleteTemplate(ownerId),
@@ -1129,6 +1128,9 @@ var List = function List(_ref) {
     isDelete = manageTemplatePane.isDelete;
   var pageIndex = pageProperties.index,
     pageSize = pageProperties.size;
+  var isSms = type === "sms";
+  var typeLabelSingular = isSms ? labelSingular : labelSingular.toLowerCase();
+  var emptyStateLabel = isSms ? label : label.toLowerCase();
   var handleDelete = function handleDelete() {
     deleteTemplate(template.id, {
       onSettled: function onSettled() {
@@ -1166,9 +1168,9 @@ var List = function List(_ref) {
       }
     },
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-      type: label.toLowerCase()
+      type: emptyStateLabel
     }) : t("neetoMessageTemplate.template.emptyState", {
-      type: label.toLowerCase()
+      type: emptyStateLabel
     })
   })), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isDelete,
@@ -1180,7 +1182,7 @@ var List = function List(_ref) {
       }
     }),
     title: t("neetoMessageTemplate.template.deleteTemplate", {
-      label: labelSingular.toLowerCase()
+      label: typeLabelSingular
     }),
     onClose: function onClose() {
       return setManageTemplatePane(ramda.assoc("isDelete", false));
@@ -1218,7 +1220,6 @@ var MessageTemplates = function MessageTemplates(_ref) {
     searchKeywordProps = _useFilters.searchKeywordProps,
     filterColumns = _useFilters.filterColumns,
     searchTerm = _useFilters.searchTerm,
-    setSearchTerm = _useFilters.setSearchTerm,
     filters = _useFilters.filters,
     setFilters = _useFilters.setFilters,
     pageProperties = _useFilters.pageProperties,
@@ -1260,7 +1261,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onClick: handleActionClick
     }),
     breadcrumbs: breadcrumbs,
-    searchProps: renderSearchProps(label, setSearchTerm, searchTerm),
+    searchProps: renderSearchProps(label),
     title: label
   }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
@@ -1289,7 +1290,8 @@ var MessageTemplates = function MessageTemplates(_ref) {
     pageProperties: pageProperties,
     setManageTemplatePane: setManageTemplatePane,
     setPageProperties: setPageProperties,
-    templatesData: templatesData
+    templatesData: templatesData,
+    type: type
   }), /*#__PURE__*/React__default["default"].createElement(AddEdit, {
     addText: addText,
     createUpdateTemplate: createUpdateTemplate,
@@ -1425,7 +1427,7 @@ var Whatsapp = function Whatsapp(_ref) {
     t = _useTranslation.t;
   var getInitialVariableComponents = function getInitialVariableComponents(variables) {
     var initialComponents = {};
-    variables.forEach(function (_ref2) {
+    variables === null || variables === void 0 ? void 0 : variables.forEach(function (_ref2) {
       var type = _ref2.type,
         count = _ref2.count;
       initialComponents[type] = Array(count).fill("");
@@ -1433,7 +1435,8 @@ var Whatsapp = function Whatsapp(_ref) {
     return initialComponents;
   };
   var getTemplateMessage = function getTemplateMessage(components) {
-    return neetoCist.nullSafe(ramda.pluck)("text", components).join("\n");
+    var _nullSafe;
+    return (_nullSafe = neetoCist.nullSafe(ramda.pluck)("text", components)) === null || _nullSafe === void 0 ? void 0 : _nullSafe.join("\n");
   };
   if (ramda.isEmpty(templates)) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, t("neetoMessageTemplate.template.emptyState", {
@@ -1574,7 +1577,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("neetoMessageTemplate.common.send"), " ", type)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React__default["default"].createElement(Whatsapp, {
+  }, t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type])), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React__default["default"].createElement(Whatsapp, {
     handleSubmit: handleSubmit,
     onClose: onClose,
     templates: templates