@bigbinary/neeto-rules-frontend

neeto-rules-nano

The neeto-rules-nano facilitates the management of automation rules within neeto applications. The nano exports @bigbinary/neeto-rules-frontend NPM package and neeto-rules-engine Rails engine.

Contents

1. Development with Host Application
   • Engine
     • Installation
   • Frontend package
     • Installation
     • Instructions for development
     • Components
       • NeetoRulesForm
       • Field components for NeetoRulesForm
         • InputField
         • TextareaField
         • SelectField
         • MultiSelectField
         • RadioField
         • EventConditions
         • Conditions
         • Actions
         • Custom action component
       • RulePreview
2. Instructions for Publishing

Development with Host Application

Engine

The Engine is used to manage automation rules feature within neeto applications.

Installation

1. Add this line to your application's Gemfile:

   source "NEETO_GEM_SERVER_URL" do
   # ..existing gems
   
     gem "neeto-rules-engine"
   end

2. And then execute:

   bundle install

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

   mount NeetoRulesEngine::Engine => "/neeto_rules"

4. Run the following command to copy the migrations from the engine to the host application:

   rails g neeto_rules_engine:install

5. Add the migrations to the database:

   bundle exec rails db:migrate

Frontend package

Installation

Install the latest neetoRules nano package using the below command:

yarn add @bigbinary/neeto-rules-frontend

Instructions for development

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

Components

1. NeetoRulesForm

The NeetoRulesForm component is used to create and edit automation rules.

NeetoRulesForm accepts the following field types which is specified in the initialProps (reference):

1. text
2. long-text
3. dropdown
4. multi-select
5. radio
6. events
7. condition
8. actions

Props

• data: The initial props for the form.
• children: The form fields.
• className: To provide external classes to form.
• handleSubmit: The function to handle the form submission.
• handleClose: The function to handle the form close.

Usage

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { InputField, TextareaField, SelectField, Events, Card, Conditions, Actions } = NeetoRulesForm;

<NeetoRulesForm data={initialProps}>
  {({ formattedValues, values, ...formikBag }) => (
    <>
      <InputField name="name" data={initialProps} />
      <TextareaField name="description" data={initialProps} />
      <SelectField name="projectId" data={initialProps} />
      <Events name="events" data={initialProps} performerName="performer" />
      <Card title="Conditions">
        <Conditions name="conditions" data={initialProps} />
      </Card>
      <Actions name="actions" data={initialProps} />
    </>
  )}
</NeetoRulesForm>

References

1. neeto-cal-web
2. neeto-desk-web
3. neeto-planner-web

2. Field components for NeetoRulesForm

NeetoRulesForm provides field components to create the automation rules form.

References

1. neeto-cal-web
2. neeto-desk-web
3. neeto-planner-web

2.1 InputField

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { InputField } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  firstName: {
    label: "First Name",
    type: "text",
    value: "", // Default value.
    componentProps: {
      placeholder: "Enter name",
    },
  },
};

<InputField name="firstName" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.

2.2 TextareaField

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { TextareaField } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  description: {
    label: "Description",
    type: "long-text",
    value: "", // Default value.
  },
};

<TextareaField name="description" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed as data prop in NeetoRulesForm.
3. label: Label for the field.

2.3 SelectField

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { SelectField } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  user: {
    label: "Project",
    type: "dropdown",
    options: [{ label: "Oliver", value: "oliver" }],
    value: "oliver", // Default selected option will be Oliver
  },
};

<SelectField name="user" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. options: Options for the dropdown. The options should be an array of objects with label and value keys. [{label, value}].
5. onChange: Callback function that is called when the value of the dropdown changes. (value, setValue) => void setValue is to set the new value.

2.4 MultiSelectField

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { MultiSelectField } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  users: {
    label: "Projects",
    type: "multi-select",
    options: [
      { label: "Oliver", value: "oliver" },
      { label: "John", value: "john" },
    ],
    value: ["oliver"], // Default selected option will be Oliver
  },
};

<MultiSelectField name="users" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. options: Options for the dropdown. The options should be an array of objects with label and value keys. [{label, value}].
5. onChange: Callback function that is called when the value of the dropdown changes. (value, setValue) => void setValue is to set the new value.

2.5 RadioField

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { RadioField } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  performer: {
    label: "Performer",
    type: "radio",
    value: "any", // Default selected value will be "any"
    options: [
      { label: "Admin", value: "admin" },
      { label: "Any", value: "any" },
    ],
  },
};

<RadioField name="performer" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. options: Options for the radio buttons. The options should be an array of objects with label and value keys. [{label, value}].

2.6 EventConditions

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { EventConditions } = NeetoRulesForm;

const EVENT_OPTIONS = [
  { label: "Ticket is created", value: "created" },
  { label: "Ticket is updated", value: "updated" },
  ...otherOptions,
];

const PERFORMER_OPTIONS = [
  { label: "Any", value: "any" },
  { label: "Member", value: "agent" },
  ...otherOptions,
];

const CONDITION_OPTIONS = [
  {
    value: "status",
    label: "Status",
    type: "multi-select",
    allowMatching: ["any_of", "none_of"],
    dropdownOptions: [
      { label: "Open", value: "open" },
      { label: "Closed", value: "closed" },
      { label: "On hold", value: "on_hold" },
    ],
  },
  {
    value: "name",
    label: "Name",
    allowMatching: ["is", "is_not"],
    type: "text",
  },
  ...otherOptions,
];

const DEFAULT_CONDITION_VALUE = [
  {
    id: "1",
    field: "status",
    verb: "any_of",
    metadata: { values: ["open", "closed"] },
    joinType: "and_operator",
  },
  {
    id: "2",
    field: "name",
    verb: "is",
    metadata: { value: "Test" },
    joinType: "and_operator",
  },
  ...otherConditionValues,
];

const initialProps = {
  ...otherProps,
  events: {
    label: "Events",
    type: "events",
    value: [{ name: EVENT_OPTIONS[0].value }],
    eventOptions: EVENT_OPTIONS,
    defaultData: { name: "time_based", performer: "system" },
  },
  performer: {
    label: "Performer",
    type: "dropdown",
    value: "any",
    options: PERFORMER_OPTIONS,
  },
  conditions: {
    label: "Conditions",
    type: "condition",
    conditionOptions: CONDITION_OPTIONS,
    value: DEFAULT_CONDITION_VALUE,
  },
};

<EventConditions
  name="events"
  data={initialProps}
  performerName="performer"
  conditionsName="conditions"
/>;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. performerName: Name of the performer field. The performerName should be same as that in the initialProps.
5. conditionsName: Name of the conditions field. The conditionsName should be same as that in the initialProps.
6. onSelectEvent: (name, selectedOption) => void. This method will trigger when we select an event option. The name is to refer the event in the formik context.

Refer to the EventCondition section for more information.

2.7 Conditions

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { Card, Conditions } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  conditions: {
    label: "Conditions",
    type: "condition",
    conditionOptions: [
      {
        value: "status",
        label: "Status",
        type: "dropdown", // Types : text, number, email, decimal, url, dropdown, multi-select, multi-select-create, date.
        allowMatching: ["is", "is_not", "any_of", "none_of"],
        dropdownOptions: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
        additionalData: {
          any_of: "multi-select",
          none_of: "multi-select",
        },
      },
      {
        value: "name",
        label: "Name",
        type: "text",
        allowMatching: ["is", "is_not"],
      },
      {
        value: "tags",
        label: "Tags",
        type: "multi-select-create",
        allowMatching: ["contains_any_of", "contains_none_of"],
      },
    ],
    value: [
      {
        id: "1",
        field: "status",
        verb: "is",
        metadata: { value: "open" },
        joinType: "and_operator",
      },
      {
        id: "2",
        field: "name",
        verb: "is",
        metadata: { value: "Test" },
        joinType: "and_operator",
      },
      {
        id: "3",
        field: "tags",
        verb: "contains_any_of",
        metadata: { values: ["Test", "Open"] },
        joinType: "and_operator",
      },
    ],
  },
};

<Card title="Conditions">
  <Conditions name="conditions" data={initialProps} />
</Card>;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. onSelectCondition: (name, selectedOption) => void. This method will trigger when we select a condition option. The name is to refer the condition in the formik context.
5. selectedConditionOptions: (selectedCondition)=> [{label, value}]. To provide options for the selected condition if the type of selected condition is dropdown, multi-select, or multi-select-create.
6. isCallback: To specify if there is a preview callback function for the conditions. (Boolean).
7. previewCallback: (conditions) => void. This method will trigger when we click on the preview button. The conditions are the selected conditions in the formik context.

2.8 Actions

import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";

const { Actions } = NeetoRulesForm;

const initialProps = {
  ...otherProps,
  actions: {
    label: "Actions",
    type: "actions",
    actionOptions: [
      {
        value: "add_tags",
        label: "Add Tags",
        type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText, sms, smsToNumbers, smsTo, sendToApi
        hideSeparator: true,
        placeholder: "Select tags",
        dropdownOptions: [
          { label: "Open", value: "open" },
          { label: "Close", value: "close" },
          { label: "Hold", value: "hold" },
        ],
      },
      {
        value: "email_to",
        label: "Email To",
        type: "emailToIds",
        separator: "as",
        hideSubject: true, // Hide subject field if this prop is true
      },
      {
        value: "send_sms",
        label: "Send sms",
        type: "longText",
      },
    ],
    value: [
      {
        id: "1",
        name: "email_to", // Specify the value of the selected action.
        metadata: { emails: ["[e-mail]"], subject: "test", body: "test" },
      },
      {
        id: "2",
        name: "add_tags",
        metadata: { values: ["close"] },
      },
    ],
  },
};

<Actions name="fieldName" data={initialProps} />;

props

1. name: Name of the field. The name should be same as that in the initialProps.
2. data: The same initialProps that is passed to data prop in NeetoRulesForm.
3. label: Label for the field.
4. onSelectAction: (name, selectedOption) => void. This method will trigger when we select an action option. The name is to refer the action in the formik context.
5. selectedActionOptions: (selectedAction)=> [{label, value}]. To provide options for the selected action if the type of selected action is dropdown or multi-select.

Refer to the Actions section for more information.

2.9 Custom action component

neetoRulesFrontend allows to pass custom action components from host application. Below is an example for customize task component which is being sent by neeto-crm in action options.

 {
    label: "Add task",
    value: "add_task",
    placeholder: "Task",
    component: TaskComponent,
    validation: TASK_VALIDATION,
  },

2.10 Custom message templates

neetoRulesFrontend allows to pass predefined email, SMS and API templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom message template which is being sent by neeto-form in action options.

{
  "label": "Email to responder",
  "value": "email_to_responder",
  "type": "emailTo",
  "templates": [
    {
      "id": "caca1cc9-f9db-480a-a64f-6ea0c72d4b05",
      "name": "Send emails to rejected candidates",
      "subject": "Application Status - Screening Round Unsuccessful",
      "body": "<p>Dear {{full-name}},</p><p>Thank you for your interest. Unfortunately, we regret to inform you that you did not pass the screener round.</p><p>Best regards, </p><p>Spinkart</p>"
    }
  ]
}

3. RulePreview

The RulePreview component is used to preview the automation rule.

Props

1. ruleDetails: The rule details to be previewed.
2. isLoading: To specify if the preview is loading. (Boolean).
3. isOpen: To specify if the preview is open. (Boolean).
4. onClose: The callback function to call when the preview is closed. () => void.

reference:

1. neeto-crm-web

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.