@bigbinary/neeto-rules-frontend 2.3.1 → 2.4.0

package/README.md

@@ -1,31 +1,33 @@
 # 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.
+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](#development-with-host-application)
-    - [Engine](#engine)
-      - [Installation](#installation)
-    - [Frontend package](#frontend-package)
-      - [Installation](#installation-1)
-      - [Instructions for development](#instructions-for-development)
-      - [Components](#components)
-        - [NeetoRules](#1-neetorules)
-        - [NeetoRulesForm](#2-neetorulesform)
-        - [Field components for NeetoRulesForm](#3-field-components-for-neetorulesform)
-          - [InputField](#31-inputfield)
-          - [TextareaField](#32-textareafield)
-          - [SelectField](#33-selectfield)
-          - [MultiSelectField](#34-multiselectfield)
-          - [RadioField](#35-radiofield)
-          - [EventConditions](#36-eventconditions)
-          - [Conditions](#37-conditions)
-          - [Actions](#38-actions)
-          - [Custom action component](#39-custom-action-component)
-        - [RulePreview](#4-rulepreview)
-      - [Constants](#constants)
-        - [AUTOMATION_RULES_QUERY_KEY](#1-automation-rules-query-key)
+   - [Engine](#engine)
+     - [Installation](#installation)
+   - [Frontend package](#frontend-package)
+     - [Installation](#installation-1)
+     - [Instructions for development](#instructions-for-development)
+     - [Components](#components)
+       - [NeetoRules](#1-neetorules)
+       - [NeetoRulesForm](#2-neetorulesform)
+       - [Field components for NeetoRulesForm](#3-field-components-for-neetorulesform)
+         - [InputField](#31-inputfield)
+         - [TextareaField](#32-textareafield)
+         - [SelectField](#33-selectfield)
+         - [MultiSelectField](#34-multiselectfield)
+         - [RadioField](#35-radiofield)
+         - [EventConditions](#36-eventconditions)
+         - [Conditions](#37-conditions)
+         - [Actions](#38-actions)
+         - [Custom action component](#39-custom-action-component)
+       - [RulePreview](#4-rulepreview)
+     - [Constants](#constants)
+       - [AUTOMATION_RULES_QUERY_KEY](#1-automation-rules-query-key)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 ## Development with Host Application
@@ -38,37 +40,38 @@ The Engine is used to manage automation rules feature within neeto applications.
 
 1. Add this line to your application's Gemfile:
 
-    ```ruby
-    source "NEETO_GEM_SERVER_URL" do
-    # ..existing gems
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+   # ..existing gems
 
-      gem "neeto-rules-engine"
-    end
-    ```
+     gem "neeto-rules-engine"
+   end
+   ```
 
 2. And then execute:
 
-    ```ruby
-    bundle install
-    ```
+   ```ruby
+   bundle install
+   ```
 
 3. Add this line to your application's `config/routes.rb` file:
 
-    ```ruby
-    mount NeetoRulesEngine::Engine => "/neeto_rules"
-    ```
+   ```ruby
+   mount NeetoRulesEngine::Engine => "/neeto_rules"
+   ```
 
-4. Run the following command to copy the migrations from the engine to the host application:
+4. Run the following command to copy the migrations from the engine to the host
+   application:
 
-    ```ruby
-    rails g neeto_rules_engine:install
-    ```
+   ```ruby
+   rails g neeto_rules_engine:install
+   ```
 
 5. Add the migrations to the database:
 
-    ```ruby
-    bundle exec rails db:migrate
-    ```
+   ```ruby
+   bundle exec rails db:migrate
+   ```
 
 ### Frontend package
 
@@ -82,7 +85,9 @@ yarn add @bigbinary/neeto-rules-frontend
 
 ### Instructions for development
 
-Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+Check the
+[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
+for step-by-step instructions to develop the frontend package.
 
 ### Components
 
@@ -93,87 +98,100 @@ The `NeetoRules` component is used to add the dashboard for automation rules.
 ![rules-dashboard](./docs/images/rules-dashboard.png)
 
 #### Props
+
 1. `breadcrumbs`: Breadcrumbs for the header of the dashboard.
-    1. `text`: Text for breadcrumb item
-    2. `link`: Link to breadcrumb item
-2. `allowReordering`: To specify if the user can reorder the automation rules. (Boolean).
-3. `helpPopoverProps`: To add help popover for the component. Refer [HelpPopover component doc](https://neeto-molecules.neeto.com/?path=/docs/helppopover--docs). NOTE: `href` from `helpLinkProps` will be used for displaying the link when showing `NoData` component.
+   1. `text`: Text for breadcrumb item
+   2. `link`: Link to breadcrumb item
+2. `allowReordering`: To specify if the user can reorder the automation rules.
+   (Boolean).
+3. `helpPopoverProps`: To add help popover for the component. Refer
+   [HelpPopover component doc](https://neeto-molecules.neeto.com/?path=/docs/helppopover--docs).
+   NOTE: `href` from `helpLinkProps` will be used for displaying the link when
+   showing `NoData` component.
 4. `rulesTableProps`: Props for the table in the dashboard:
-    1. `additionalColumns`: To add additional columns to the table. Refer [Table component doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
-
-    ```jsx
-    const additionalColumns = [
-        {
-        title: "Operated on",
-        dataIndex: "recentlyModifiedTickets",
-        width: 160,
-        description: "Number of tickets the rule has acted upon in the last 7 days",
-        render: recentlyModifiedTickets => (
-            <div className="text-center">{recentlyModifiedTickets}</div>
-        ),
-        },
-    ];
-    ```
-
-    2. `moreDropdownItems`: Array of dropdown items to be added to the MoreDropdown component in the table. Refer [MoreDropdown in table doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
-
-    ```jsx
-    const moreDropdownItems = [
-        {
-        key: "view-matching-tickets",
-        label: "View matching rules",
-        // onClick callback receives the selected rule
-        onClick: rule => {
-            setSelectedRule(rule);
-            setShowMatchingTickets(true);
-        },
-        },
-    ];
-    ```
-
-    3. `onPreview`: The callback function to call when the preview is clicked.
-    ```jsx
-    const onPreview = id => {
-        setRuleId(id);
-    };
-    ```
 
+   1. `additionalColumns`: To add additional columns to the table. Refer
+      [Table component doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
+
+   ```jsx
+   const additionalColumns = [
+     {
+       title: "Operated on",
+       dataIndex: "recentlyModifiedTickets",
+       width: 160,
+       description:
+         "Number of tickets the rule has acted upon in the last 7 days",
+       render: recentlyModifiedTickets => (
+         <div className="text-center">{recentlyModifiedTickets}</div>
+       ),
+     },
+   ];
+   ```
+
+   2. `moreDropdownItems`: Array of dropdown items to be added to the
+      MoreDropdown component in the table. Refer
+      [MoreDropdown in table doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
+
+   ```jsx
+   const moreDropdownItems = [
+     {
+       key: "view-matching-tickets",
+       label: "View matching rules",
+       // onClick callback receives the selected rule
+       onClick: rule => {
+         setSelectedRule(rule);
+         setShowMatchingTickets(true);
+       },
+     },
+   ];
+   ```
+
+   3. `onPreview`: The callback function to call when the preview is clicked.
+
+   ```jsx
+   const onPreview = id => {
+     setRuleId(id);
+   };
+   ```
 
 5. `automationRulesPath`: The path for automation rules dashboard.
 
-    Following additional routes are considered by the component:
+   Following additional routes are considered by the component:
 
-    | Routes | Description |
-    | --- | --- |
-    | `{automationRulesPath}/edit` | Route to the rule edit form component. |
-    | `{automationRulesPath}/new` | Route to the rule create form component. |
+   | Routes                       | Description                              |
+   | ---------------------------- | ---------------------------------------- |
+   | `{automationRulesPath}/edit` | Route to the rule edit form component.   |
+   | `{automationRulesPath}/new`  | Route to the rule create form component. |
 
 6. `automationRulesEndpoint`: The endpoint for automation rules.
 
-    Following endpoints will be used by the component:
+   Following endpoints will be used by the component:
 
-    | Endpoint | Action | Description |
-    | --- | --- | --- |
-    | GET `{automationRulesEndpoint}` | `index` | To fetch the list of automation rules.(Same will be used for pagination/filtering) |
-    | POST `{automationRulesEndpoint}/{id}/clone` | `clone` | To create the clone of the automation rule. |
-    | PATCH `{automationRulesEndpoint}/{id}` | `update` | To update the status of the automation rule. |
-    | DELETE `{automationRulesEndpoint}/{id}` | `destroy` | To delete the automation rule. |
-    | PATCH `{automationRulesEndpoint}/reorder` | `reorder` | To reorder the automation rules. |
+   | Endpoint                                    | Action    | Description                                                                        |
+   | ------------------------------------------- | --------- | ---------------------------------------------------------------------------------- |
+   | GET `{automationRulesEndpoint}`             | `index`   | To fetch the list of automation rules.(Same will be used for pagination/filtering) |
+   | POST `{automationRulesEndpoint}/{id}/clone` | `clone`   | To create the clone of the automation rule.                                        |
+   | PATCH `{automationRulesEndpoint}/{id}`      | `update`  | To update the status of the automation rule.                                       |
+   | DELETE `{automationRulesEndpoint}/{id}`     | `destroy` | To delete the automation rule.                                                     |
+   | PATCH `{automationRulesEndpoint}/reorder`   | `reorder` | To reorder the automation rules.                                                   |
 
-7.  `updateRule`: Object that define methods for update rule operation.
-    - `onSuccess`: Object for handling update rule success callback.
-        - `callback`: Function to be called on success. (Optional)
+7. `updateRule`: Object that define methods for update rule operation.
+   - `onSuccess`: Object for handling update rule success callback.
+     - `callback`: Function to be called on success. (Optional)
 8. `deleteRule`: Object that define methods for delete rule operation.
-    - `onSuccess`: Object for handling delete rule success callback.
-        - `callback`: Function to be called on success. (Optional)
+   - `onSuccess`: Object for handling delete rule success callback.
+     - `callback`: Function to be called on success. (Optional)
 9. `cloneRule`: Object that define methods for clone rule operation.
-    - `allowed`: To specify if the clone rule should be allowed, default `true`. (Boolean)
-    - `onSuccess`: Object for handling clone rule success callback.
-        - `callback`: Function to be called on success. (Optional)
+   - `allowed`: To specify if the clone rule should be allowed, default `true`.
+     (Boolean)
+   - `onSuccess`: Object for handling clone rule success callback.
+     - `callback`: Function to be called on success. (Optional)
 10. `reoderRules`: Function to be called on reorder success.
     - `onSuccess`: Object for handling reorder rule success callback.
-        - `callback`: Function to be called on success. (Optional)
-11. `headerProps`: Props for the header component. Refer [Header component doc](https://neeto-molecules.neeto.com/?path=/docs/layouts-header--docs).
+      - `callback`: Function to be called on success. (Optional)
+11. `headerProps`: Props for the header component. Refer
+    [Header component doc](https://neeto-molecules.neeto.com/?path=/docs/layouts-header--docs).
+
 #### 2. `NeetoRulesForm`
 
 <div align="center">
@@ -184,7 +202,9 @@ The `NeetoRules` component is used to add the dashboard for automation rules.
 
 The `NeetoRulesForm` component is used to create and edit automation rules.
 
-`NeetoRulesForm` accepts the following field types which is specified in the `initialProps` ([reference](https://github.com/bigbinary/neeto-desk-web/blob/c7ea475e0963cb4fa0831856c9545e1f697ca472/app/javascript/src/components/Automations/Form/constants.js#L43)):
+`NeetoRulesForm` accepts the following field types which is specified in the
+`initialProps`
+([reference](https://github.com/bigbinary/neeto-desk-web/blob/c7ea475e0963cb4fa0831856c9545e1f697ca472/app/javascript/src/components/Automations/Form/constants.js#L43)):
 
 1. text
 2. long-text
@@ -195,7 +215,8 @@ The `NeetoRulesForm` component is used to create and edit automation rules.
 7. condition
 8. actions
 
-> **Note:** The `NeetoRulesForm` component includes three fields by default with the following names: `name`(required), `description` and `status`.
+> **Note:** The `NeetoRulesForm` component includes three fields by default with
+> the following names: `name`(required), `description` and `status`.
 
 #### Props
 
@@ -204,13 +225,23 @@ The `NeetoRulesForm` component is used to create and edit automation rules.
 - `className`: To provide external classes to form.
 - `handleSubmit`: The function to handle the form submission.
 - `handleClose`: The function to handle the form close.
+- `showStatusSwitch`: To specify whether the status switch should be shown or
+  not. It is `true` by default.
 
 #### Usage
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
 
-const { InputField, TextareaField, SelectField, Events, Card, Conditions, Actions } = NeetoRulesForm;
+const {
+  InputField,
+  TextareaField,
+  SelectField,
+  Events,
+  Card,
+  Conditions,
+  Actions,
+} = NeetoRulesForm;
 
 <NeetoRulesForm data={initialProps}>
   {({ formattedValues, values, ...formikBag }) => (
@@ -225,7 +256,7 @@ const { InputField, TextareaField, SelectField, Events, Card, Conditions, Action
       <Actions name="actions" data={initialProps} />
     </>
   )}
-</NeetoRulesForm>
+</NeetoRulesForm>;
 ```
 
 #### References
@@ -270,8 +301,10 @@ const 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`.
+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.
 
 #### 3.2 `TextareaField`
@@ -295,11 +328,13 @@ const 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`.
+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`
+#### 3.3 `SelectField`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -321,11 +356,15 @@ const 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`.
+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.
+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.
 
 #### 3.4 `MultiSelectField`
 
@@ -352,11 +391,15 @@ const 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`.
+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.
+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.
 
 #### 3.5 `RadioField`
 
@@ -383,10 +426,13 @@ const 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`.
+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}]`.
+4. `options`: Options for the radio buttons. The options should be an array of
+   objects with `label` and `value` keys. `[{label, value}]`.
 
 #### 3.6 `EventConditions`
 
@@ -481,14 +527,21 @@ const 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.
+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.
+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](./docs/event-conditions.md) for more information.
+Refer to the [EventCondition section](./docs/event-conditions.md) for more
+information.
 
 #### 3.7 `Conditions`
 
@@ -563,13 +616,22 @@ const 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`.
+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.
+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.
 
 #### 3.8 `Actions`
 
@@ -639,19 +701,28 @@ const 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`.
+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`.
-6. `separator`: Separator to be shown between action sub items. If there is only one sub item, provide a string value. If there are multiple sub items, provide an array of separators.
-
+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`.
+6. `separator`: Separator to be shown between action sub items. If there is only
+   one sub item, provide a string value. If there are multiple sub items,
+   provide an array of separators.
 
 Refer to the [Actions section](./docs/actions.md) for more information.
 
 #### 3.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.
+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.
 
 ```jsx
  {
@@ -665,7 +736,10 @@ neetoRulesFrontend allows to pass custom action components from host application
 
 #### 3.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.
+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.
 
 ```jsx
 {
@@ -694,19 +768,136 @@ The `RulePreview` component is used to preview the automation rule.
 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`.
+4. `onClose`: The callback function to call when the preview is closed.
+   `() => void`.
 
-### Constans
+### Constants
 
 #### 1. `AUTOMATION_RULES_QUERY_KEY`
 
-The `AUTOMATION_RULES_QUERY_KEY` is the base query key which is being used as key for query fetching.
+The `AUTOMATION_RULES_QUERY_KEY` is the base query key which is being used as
+key for query fetching.
 
 reference:
 
 1. [neeto-desk-web](https://github.com/bigbinary/neeto-desk-web/blob/main/app/javascript/src/components/Automations/index.jsx)
 
+<br>
+
+#### 5. `CannedResponsesPane`
+
+<div align="center">
+  <img width="477" alt="Screenshot 2024-09-24 at 5 30 39 PM" src="https://github.com/user-attachments/assets/f223a948-c607-496f-ba7a-f0160a46fd4d" />
+</div>
+
+<br>
+
+The `CannedResponsesPane` component is used to preview canned responses and
+apply them.
+
+#### Props
+
+- `actionNameOptions`: An array of actions which any of the canned responses can
+  do. Each object in the array can have `label`, `value`, `type`, `placeholder`,
+  `dropdownOptions`, `defaultData` and `variables`. Out of these,
+  `dropdownOptions`, `defaultData` and `variables` are optional.
+- `areDropdownListsLoading`: To specify if the dropdown lists are loading.
+- `dropdownList`: It is an object of values that are used in the dropdowns. It
+  can have the keys `tags`, `teams`, `members`, `fields`, and `status`, with
+  their values the respective array of items.
+- `isCannedResponsePaneOpen`: Boolean to specify if the canned response pane is
+  open.
+- `isLoadingPreview`: Boolean to specify if the preview is loading.
+- `macros`: An array of possible macros/canned responses that the user can
+  choose from.
+- `onApply`: Callback function to apply the canned response.
+- `onCancel`: Callback function to call when the canned response pane is closed.
+- `previewCannedResponses`: Method which will be used to make the API call to
+  get the preview of the canned response.
+- `previewParams`: Object that contains the parameters for the preview API call.
+- `variables`: An array of variables that can be used in the canned response.
+  This is an optional prop.
+
+#### Usage
+
+```jsx
+import { useState } from "react";
+
+import { CannedResponsesPane } from "@bigbinary/neeto-rules-frontend";
+
+import { usePreviewCannedResponses } from "./hooks";
+
+const Component = ({ visitorId }) => {
+  const [isCannedResponsePaneOpen, setIsCannedResponsePaneOpen] =
+    useState(false);
+
+  const { mutate: previewCannedResponses, isLoading } =
+    usePreviewCannedResponses();
+
+  const dropdownList = {
+    status: [
+      { label: "Open", value: "open" },
+      { label: "Closed", value: "closed" },
+    ],
+    tags: [
+      { label: "Tag 1", value: "tag1" },
+      { label: "Tag 2", value: "tag2" },
+    ],
+    teams: [
+      { label: "Team 1", value: "team1" },
+      { label: "Team 2", value: "team2" },
+    ],
+  };
+
+  const ACTION_NAME_OPTIONS = [
+    {
+      label: "Add reply",
+      value: "add_reply",
+      type: "note",
+      placeholder: "Reply",
+    },
+    {
+      label: "Assign member",
+      value: "assign_agent",
+      type: "dropdown",
+      placeholder: "Select member",
+      dropdownOptions: [],
+      defaultData: { actionable_type: "User" },
+    },
+    {
+      label: "Assign team",
+      value: "assign_group",
+      type: "dropdown",
+      placeholder: "Select team",
+      dropdownOptions: [],
+      defaultData: { actionable_type: "NeetoTeamMembersEngine::Group" },
+    },
+  ];
+
+  const handleApply = ({ cannedResponse, setCannedResponse, onSettled }) => {
+    // logic to apply canned response
+  };
+
+  return (
+    <CannedResponsesPane
+      {...{
+        dropdownList,
+        isCannedResponsePaneOpen,
+        isLoadingPreview,
+        previewCannedResponses,
+      }}
+      actionNameOptions={ACTION_NAME_OPTIONS}
+      macros={cannedResponses}
+      previewParams={{ visitorId }}
+      onApply={handleApply}
+      onCancel={() => setIsCannedResponsePaneOpen(false)}
+    />
+  );
+};
+```
 
 ## 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.
+Consult the
+[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
+guide for details on how to publish.