@bigbinary/neeto-message-templates-frontend NPM

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.

Development with Host Application
- Engine
  - Installation
  - Usage
- Frontend package
  - Installation
  - Components
Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage message templates across neeto products.

Installation

Add this line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
   # ..existing gems

   gem 'neeto-message-templates-engine'
end

And then execute:
```
bundle install
```

Add this line to your application's config/routes.rb file:

mount NeetoMessageTemplatesEngine::Engine => "/neeto_message_templates_engine"

Run the following command to copy the migrations from the engine to the host application:
```
bundle exec rails neeto_message_templates_engine:install:migrations
```
Add the migrations to the database:
```
bundle exec rails db:migrate
```
Create file neeto-message-templates.rb under config/initializers to provide the owner_class information
```
NeetoFormEngine.owner_class = "Organization"
```

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)

module NeetoMessageTemplatesEngine
  class Callbacks
    def self.can_manage_message_templates?(user)
      user.has_permission?("admin.manage_message_templates")
    end
  end
end

Configure the owner model in the host application.

has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy

Usage

You can learn more about usage here: 1. Models

Frontend package

Installation

Install the latest neeto-message-templates-nano package using the below command:
```
yarn add @bigbinary/neeto-message-templates-frontend
```

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

`MessageTemplates` (source code)

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.

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.
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).

Usage

import React from "react";

import { MessageTemplates } from "@bigbinary/neeto-message-templates-frontend";

const App = () => {
  const queryClient = useQueryClient();

  const breadcrumbs = [
    {
      link: "/settings",
      text: "Settings",
    },
  ];
  const handleSubmit = () => {
    //api call
  };

  const TEMPLATE_VARIABLES = [
    {
      key: "name",
      label: "Name",
    },
  ];

  const manageTemplatesPaneCustomFields = () => (
    <Callout icon={Warning} style="warning">
      Twilio integration is required for sending SMS. Please connect your Twilio account.
    </Callout>
  );

  return (
    <MessageTemplates
      shouldIncludeTestTemplate
      breadcrumbs={breadcrumbs}
      handleSubmitTestTemplate={handleSubmit}
      isTestMessageLoading={isTestMessageLoading}
      templateVariables={TEMPLATE_VARIABLES}
      type={type}
      isTestingTemplateDisabled={isTestingTemplateDisabled}
      manageTemplatesPaneCustomFields={manageTemplatesPaneCustomFields()}
      onMutationSuccess={() => queryClient.invalidateQueries(["rules"])}
    />
  );
};

`SendMessagePane` (source code)

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.

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.

Usage

import React, { useState } from "react";

import { SendMessagePane } from "@bigbinary/neeto-message-templates-frontend";

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);

  const handleSubmit = () => {
    //api call
  };

  const customFields = () => (
    <div className="space-y-4">
      <Input required label="To" name="to" />
      <Input required label="From" name="from" />
    </div>
  );

  const customFieldsInitialValues = {
    to: "",
    from: "",
  };

  const customFieldsSchema = yup.object().shape({
    to: yup.string().trim().required("To address is required").email("invalid"),
    from: yup
      .string()
      .trim()
      .required("From address is required")
      .email("invalid"),
  });

  return (
    <SendMessagePane
      handleSubmit={handleSubmit}
      isOpen={isPaneOpen}
      type={type}
      onClose={() => setIsPaneOpen(false)}
      customFields={customFields()}
      customFieldsInitialValues={customFieldsInitialValues}
      customFieldsValidationSchema={customFieldsSchema}
    />
  );
};

ApiTemplates (source code)

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.

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).

Usage

import React from "react";

import { ApiTemplates } from "neetomessagetemplates";

const App = () => {
  const queryClient = useQueryClient();

  const breadcrumbs = [{ link: "/settings", text: "Settings" }];
  const ownerId = "ownerId";

  return (
    <ApiTemplates
      {...{ breadcrumbs, ownerId }}
      onMutationSuccess={() => queryClient.invalidateQueries(["rules"])}
    />
  );
};

SendToApiPane (source code)

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

Usage

import React, { useState } from "react";

import { SendToApiPane } from "@bigbinary/neeto-message-templates-frontend";

const App = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSendToApiPaneOpen, setIsSendToApiPaneOpen] = useState(false);

  const ownerId = "ownerId";

  const handleSubmit = () => {
    setIsSubmitting(true);
    // API call
    setIsSubmitting(false);
  };

  return (
    <SendToApiPane
      {...{ isSubmitting, ownerId }}
      isOpen={isSendToApiPaneOpen}
      onClose={() => setIsSendToApiPaneOpen(false)}
      onSubmit={handleSubmit}
    />
  );
};