@bigbinary/neeto-message-templates-frontend 0.7.1 → 0.7.3

package/README.md

@@ -1,97 +1,137 @@
 # 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.
+
+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)
+   - [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
-    source "NEETO_GEM_SERVER_URL" do
-       # ..existing gems
 
-       gem 'neeto-message-templates-engine'
-    end
-    ```
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+      # ..existing gems
+
+      gem 'neeto-message-templates-engine'
+   end
+   ```
+
 2. And then execute:
-    ```zsh
-    bundle install
-    ```
+   ```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
-    ```
+   ```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)
-          user.has_permission?("admin.manage_message_templates")
-        end
-      end
-    end
-    ```
-7. Configure the owner model in the host application.
-    ```ruby
-    has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
-    ```
+   ```zsh
+   bundle exec rails db:migrate
+   ```
+6. Create file `neeto-message-templates.rb` under `config/initializers` to
+   provide the `owner_class` information
+   ```ruby
+   NeetoFormEngine.owner_class = "Organization"
+   ```
+7. 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)
+         user.has_permission?("admin.manage_message_templates")
+       end
+     end
+   end
+   ```
+8. Configure the owner model in the host application.
+   ```ruby
+   has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
+   ```
 
 ### Usage
+
 You can learn more about usage here:
-  1. [Models](/docs/engine/models.md)
+
+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
-    ```
+
+1. Install the latest `neeto-message-templates-nano` package using the below
+   command:
+   ```zsh
+   yarn add @bigbinary/neeto-message-templates-frontend
+   ```
 
 ### Instructions for development
-Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
+Check the
+[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
+for step-by-step instructions to develop the frontend package.
 
 ### 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.
+
+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.
 
 ##### 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`.
+
+- `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.
+- `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.
-- `isTestingTemplateDisabled`: A boolean indicating whether the test template button should be enabled or not.
-- `manageTemplatesPaneCustomFields`: To add custom components to the manage templates pane.
-- `onMutationSuccess`: The callback function which is triggered on the success of mutation functions(create, update & delete).
+- `isTestingTemplateDisabled`: A boolean indicating whether the test template
+  button should be enabled or not.
+- `manageTemplatesPaneCustomFields`: To add custom components to the manage
+  templates pane.
+- `onMutationSuccess`: The callback function which is triggered on the success
+  of mutation functions(create, update & delete).
+- `helpDocUrl`: Help article link.
 
 ##### Usage
+
 ```jsx
 import React from "react";
 
@@ -119,7 +159,8 @@ const App = () => {
 
   const manageTemplatesPaneCustomFields = () => (
     <Callout icon={Warning} style="warning">
-      Twilio integration is required for sending SMS. Please connect your Twilio account.
+      Twilio integration is required for sending SMS. Please connect your Twilio
+      account.
     </Callout>
   );
 
@@ -140,22 +181,33 @@ const App = () => {
 ```
 
 #### `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.
+
+This component provides a pane where users can select a template and add content
+to compose and send messages.
 
 ##### 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`: Represents the type of message, with accepted values of `email`,
+  `sms`, or `whatsapp`.
+- `addNewTemplateRoute`: A redirect route to the add template page. If there are
+  no message templates present, users can be redirected to this route to add new
+  message templates.
 
 ##### 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.
+- `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.
+- `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.
 
 ##### Usage
+
 ```jsx
 import React, { useState } from "react";
 
@@ -204,16 +256,25 @@ const App = () => {
 ```
 
 #### ApiTemplates ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/ApiTemplates/index.jsx))
-This component is used to manage the API templates in your application. It provides the interface to add, delete, and edit API templates, along with filtering and search capabilities.
+
+This component is used to manage the API templates in your application. It
+provides the interface to add, delete, and edit API templates, along with
+filtering and search capabilities.
 
 ##### Props
-- `ownerId`: To provide the `ID` of the owner to which the API templates belongs to.
+
+- `ownerId`: To provide the `ID` of the owner to which the API templates belongs
+  to.
 
 ##### Optional props
+
 - `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
-- `onMutationSuccess`: The callback function which is triggered on the success of mutation functions(create, update & delete).
+- `onMutationSuccess`: The callback function which is triggered on the success
+  of mutation functions(create, update & delete).
+- `helpDocUrl`: Help article link.
 
 ##### Usage
+
 ```js
 import React from "react";
 
@@ -235,15 +296,22 @@ const App = () => {
 ```
 
 #### SendToApiPane ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/SendToApiPane/index.jsx))
-This component provides a pane where users can select an API template and modify it if needed and send the data to the specified HTTP(S) endpoint.
+
+This component provides a pane where users can select an API template and modify
+it if needed and send the data to the specified HTTP(S) endpoint.
 
 ##### Props
+
 - `ownerId`: A boolean determining whether the side pane is open.
 - `onClose`: This function will be executed while closing the pane.
 - `onSubmit`: This function will be executed while submitting the form.
 - `isSubmitting`: A boolean to know the form submission status
+- `addNewTemplateRoute`: A redirect route to the API template page. If there are
+  no API templates present, users can be redirected to this route to add new API
+  templates.
 
 ##### Usage
+
 ```js
 import React, { useState } from "react";
 
@@ -273,4 +341,7 @@ const App = () => {
 ```
 
 # 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.
+
+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

@@ -24,6 +24,7 @@
       "subject": "Subject",
       "title": "Template",
       "active": "Active",
+      "linkToHelpArticle": "Here is how you can use <Link>{{entity}}</Link>.",
       "templateDeleteConfirmation": "You are deleting the template <strong>{{name}}</strong>. This can't be undone.",
       "deleteTemplate": "Delete {{label, anyCase}}?",
       "emailTemplates": "Email templates",
@@ -33,7 +34,7 @@
       "whatsappTemplates": "Whatsapp Templates",
       "whatsappTemplate": "Whatsapp Template",
       "apiTemplates": "API templates",
-      "emptyState": "There are no {{type, anyCase}} to show.",
+      "emptyState": "There are no {{type, anyCase}} to show",
       "whatsapp": {
         "helpDocText": "You can create and add new WhatsApp templates by referring to this <Link>help document</Link>."
       },