# @bigbinary/neeto-rules
neetoRules is the library that manages automation rules across neeto products.

## Installation

```zsh
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:

```zsh
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](https://github.com/bigbinary/neeto-rules/blob/master/example/src/constants.js)).
 - initialRules: This prop takes in all the initialValues that are given to both conditional as well as action forms([refer](https://github.com/bigbinary/neeto-rules/blob/master/example/src/constants.js#L593)).
 - 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](https://github.com/bigbinary/neeto-rules/blob/master/example/src/constants.js)).
- 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

```zsh
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                               |
