@bigbinary/neeto-rules

@bigbinary/neeto-rules

neetoRules is the library that manages automation rules across neeto products.

Installation

yarn add @bigbinary/neeto-rules

neetoRules has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:

yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1

Usage

1. NeetoRules Component

import React from "react";

import {
  TICKET_FIELDS,
  STATUS,
  TEAMS,
  MEMBERS,
  TAGS,
  BUSINESS_HOURS,
  COMPANIES,
  ROLES,
  TEST_RULES_INITIAL_VALUE,
} from "./constants";

import NeetoRules from "@bigbinary/neeto-rules";

const config = {
  status: STATUS,
  teams: TEAMS,
  members: MEMBERS,
  tags: TAGS,
  businessHours: BUSINESS_HOURS,
  companies: COMPANIES,
  roles: ROLES,
  ticketFields: TICKET_FIELDS,
};

const RulesComponent = () => (
  <NeetoRules
    dropdownOption={config}
    initialRules={TEST_RULES_INITIAL_VALUE}
    onSubmit={onSubmit}
  />
);

export default RulesComponent;

NeetoRules component takes two props i.e,

• dropdownOption: This prop takes all the configuration constants required to setup the conditional as well as the action form parameters.
  • dropdownOption is an object which can have the keys eg, status, teams, members, tags, companies, roles, etc based on which a particular action or condition needs to be performed(refer).
• initialRules: This prop takes in all the initialValues that are given to both conditional as well as action forms(refer).
• onSubmit: This is a function prop that would be called upon submission of the form.

If you want to just use action form or the conditional form only then you can export them individually. But these components need to be used inside a formik component, neetoRules component is integrated inside the formik component whereas ActionForm or the ConditionalForm Components are not.

2. ActionForm Component

import React, { useMemo } from "react";

import { ActionForm } from "@bigbinary/neeto-rules";
import { Formik, Form } from "formik";

const ActionFormComponent = () => (
    <Formik>
        <Form>
            <ActionForm actionOptions={actionOptions}/>
        </Form>
    </Formik>
    )

export default ActionFormComponent;

ActionForm takes actionOptions as prop.

Example for actionOptions

[{
    label: "Note",
    value: "add_note",
    placeholder: "Note",
    updateFieldKey: "body",
  },
  {
    label: "Comment/Reply",
    value: "add_reply",
    placeholder: "Comment/Reply",
    updateFieldKey: "body",
  },
  {
    label: "Change Status",
    value: "change_status",
    fieldType: "dropdown",
    placeholder: "Select Status",
    updateFieldKey: "value",
    dropDownOptions: [],
  },
  {
    label: "Change Priority",
    value: "change_priority",
    fieldType: "dropdown",
    placeholder: "Select Priority",
    updateFieldKey: "value",
    dropDownOptions: [
      { label: "Low", value: "low" },
      { label: "Medium", value: "medium" },
      { label: "High", value: "high" },
      { label: "Urgent", value: "urgent" },
    ],
  },
  {
    label: "Add Tags",
    value: "add_tags",
    updateFieldKey: "tag_ids",
    dropDownOptions: [],
  },
  {
    label: "Remove Tags",
    value: "remove_tags",
    updateFieldKey: "tag_ids",
    dropDownOptions: [],
  },
  {
    label: "Assign Member",
    value: "assign_agent",
    fieldType: "dropdown",
    placeholder: "Select Member",
    updateFieldKey: "actionable_id",
    dropDownOptions: [],
    defaultData: {
      actionable_type: "User",
    },
  },
  {
    label: "Assign Team",
    value: "assign_group",
    fieldType: "dropdown",
    placeholder: "Select Team",
    updateFieldKey: "actionable_id",
    dropDownOptions: [],
    defaultData: {
      actionable_type: "Group",
    },
  },
]]

3.ConditionForm Component

import React, { useMemo } from "react";

import { ConditionForm } from "@bigbinary/neeto-rules";
import { Formik, Form } from "formik";

const ActionFormComponent = () => (
    <Formik>
        <Form>
            <ConditionForm dropdownOption={actionOptions} previewCallback={previewCallbackFunction}/>
        </Form>
    </Formik>
    )

export default ActionFormComponent;

ConditionForm takes dropdownOption and previewCallback functions as props.

• dropdownOption: Same as in neetoRules form (refer).
• previewCallback: This prop is a call back to the base application to display values based on the conditions provided. This callback can be used to trigger functions that needs to be executed when the preview button under the conditions field is clicked. For example,

const previewCallbackFunction = (condition) => {
    setCondition(condition);
    setShowPreviewTickets(true);
}

Development

Install all the dependencies by executing the following command

yarn install

Start the development server using the yarn start command.

Building

The neetoRules package gets auto-published to npm for every new merge to the master branch. You can checkout the publish workflow in git actions to get a live update.

Integrations

Project	Pages
neeto-desk-web	Automation rules, views, Canned response