@bigbinary/neeto-message-templates-frontend 0.3.5 → 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

@@ -0,0 +1,65 @@
+{
+  "neetoMessageTemplate": {
+    "template": {
+      "addEmailTemplate": "Add new email template",
+      "addSmsTemplate": "Add new SMS template",
+      "addWhatsappTemplate": "Add new whatsapp template",
+      "editEmailTemplate": "Edit email template",
+      "editSmsTemplate": "Edit SMS template",
+      "editWhatsappTemplate": "Edit whatsapp template",
+      "search": "Search {{what}}",
+      "markAsActive": "Mark as active",
+      "markAsInactive": "Mark as inactive",
+      "close": "Close",
+      "delete": "Delete",
+      "edit": "Edit",
+      "saveChanges": "Save changes",
+      "send": "Send",
+      "cancel": "Cancel",
+      "emailAddress": "Email address",
+      "phoneNumber": "Phone number",
+      "name": "Name",
+      "body": "Body",
+      "subject": "Subject",
+      "title": "Template",
+      "active": "Active",
+      "templateDeleteConfirmation": "Are you sure want to delete <strong>{{name}}</strong>. This action cannot be undone.",
+      "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, anyCase}} to show.",
+      "sendTestEmail": "Send test email",
+      "sendTestSms": "Send test SMS",
+      "filtersEmptyState": "There are no {{type, anyCase}} 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",
+        "variablePresence": "Variable should not be empty"
+      }
+    },
+    "sendMessage": {
+      "email": "Send email",
+      "sms": "Send SMS",
+      "selectTemplate": "Select a template",
+      "testSmsNote": "Note: Variable values will be empty for test SMS."
+    },
+    "common": {
+      "send": "Send"
+    }
+  },
+  "messageType": {
+    "sms": "SMS",
+    "email": "email",
+    "whatsapp": "whatsapp"
+  }
+}

package/app/javascript/src/translations/index.js

@@ -0,0 +1,3 @@
+import en from "./en.json";
+
+export { en };