@bigbinary/neeto-slack-frontend 3.0.0 → 3.0.1

package/README.md

@@ -1,22 +1,24 @@
 # neeto-slack-nano
 
-The `neeto-slack-nano` facilitates the management of slack integration within neeto applictions. The nano exports the `@bigbinary/neeto-slack-frontend` NPM package and `neeto-slack-engine` Rails engine for development.
+The `neeto-slack-nano` facilitates the management of slack integration within
+neeto applictions. The nano exports the `@bigbinary/neeto-slack-frontend` NPM
+package and `neeto-slack-engine` Rails engine for development.
 
 ## 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)
-        - [Connect](#1-connect)
-        - [Configure](#2-configure)
-        - [Finish](#3-finish)
-        - [Settings](#4-settings)
-      - [Hooks](#hooks)
-        - [useFetchSlackIntegrationsStatus](#1-usefetchslackintegrationsstatus)
+   - [Engine](#engine)
+     - [Installation](#installation)
+   - [Frontend package](#frontend-package)
+     - [Installation](#installation-1)
+     - [Instructions for development](#instructions-for-development)
+     - [Components](#components)
+       - [Connect](#1-connect)
+       - [Configure](#2-configure)
+       - [Finish](#3-finish)
+       - [Settings](#4-settings)
+     - [Hooks](#hooks)
+       - [useFetchSlackIntegrationsStatus](#1-usefetchslackintegrationsstatus)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 ## Development with Host Application
@@ -25,6 +27,22 @@ The `neeto-slack-nano` facilitates the management of slack integration within ne
 
 The Engine is used to support the slack integration within neeto applications.
 
+1. Log in to the `NeetoChat` app.
+2. Select or add a workspace.
+3. Allow the app to access the Slack workspace.
+4. You will be redirected to a broken page, change `https` to `http` in the URL
+   and replace `spinkart` with your workspace name (e.g., "neetochattest"), then
+   press Enter.
+
+<img width="1144" alt="" src="https://github.com/user-attachments/assets/7a39445f-bf2e-49d2-a92e-d0bec1faf6e2">
+
+5. Configure the page by selecting the Slack channel for tickets and click
+   `Continue`.
+6. Proceed to the `Finish` step.
+7. Click `Done` to go to the homepage, where you can manage or disconnect Slack.
+
+[demo video](https://github.com/user-attachments/assets/d64b57ac-c5bd-4ef3-b4c3-b975fe84ee1e)
+
 #### Installation
 
 1. Add this line to your application's Gemfile:
@@ -52,8 +70,8 @@ The Engine is used to support the slack integration within neeto applications.
 
 4. Install the migrations
 
-   Add a migration to add slack_chat_api_key to Organization of host app if
-   it doesn't exist already. Then run
+   Add a migration to add slack_chat_api_key to Organization of host app if it
+   doesn't exist already. Then run
 
    ```ruby
     # frozen_string_literal: true
@@ -76,35 +94,41 @@ The Engine is used to support the slack integration within neeto applications.
    has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
    ```
 
-6. Configure the following `Environment Variables` and `Secrets` with suitable values
+6. Configure the following `Environment Variables` and `Secrets` with suitable
+   values
 
-    - Under `.env` file:
+   - Under `.env` file:
 
-      ```yaml
-      SLACK_CLIENT_ID=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
+     ```yaml
+     SLACK_CLIENT_ID=# Value from Slack App console at
+     https://api.slack.com/apps/APP_ID/general
 
-      SLACK_CLIENT_SECRET=# Valuefrom Slack App console at https://api.slack.com/apps/APP_ID/general
+     SLACK_CLIENT_SECRET=# Valuefrom Slack App console at
+     https://api.slack.com/apps/APP_ID/general
 
-      SLACK_CLIENT_SIGNING_SECRET=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
+     SLACK_CLIENT_SIGNING_SECRET=# Value from Slack App console at
+     https://api.slack.com/apps/APP_ID/general
 
-      ATTR_ENCRYPTION_KEY=# Random varying char. key with min. 32 chars.
+     ATTR_ENCRYPTION_KEY=# Random varying char. key with min. 32 chars.
 
-      SLACK_REDIRECT_PATH=#Path controller if Callbacks controller of the application is to be used instead of the one in Engine
+     SLACK_REDIRECT_PATH=#Path controller if Callbacks controller of the
+     application is to be used instead of the one in Engine
 
-      SLACK_HOST_URL=# Host url if different than application host URL or in development for use of Ngrok
-      ```
+     SLACK_HOST_URL=# Host url if different than application host URL or in
+     development for use of Ngrok
+     ```
 
-    - Under `secrets.yml` file:
+   - Under `secrets.yml` file:
 
-      ```yaml
-      application_name: # Application name
-      attr_encrypted:
-        encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
-      slack:
-        client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
-        client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
-        client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
-      ```
+     ```yaml
+     application_name: # Application name
+     attr_encrypted:
+       encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
+     slack:
+       client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
+       client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
+       client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
+     ```
 
 7. Slack Integration supports customizing scopes required for host app on usage
    basis, for adding/removing the scope file with name `neeto_slack_engine.yml`
@@ -134,7 +158,8 @@ The Engine is used to support the slack integration within neeto applications.
 
 ### Frontend package
 
-The package exports components and hooks to manage slack integration within neeto applications.
+The package exports components and hooks to manage slack integration within
+neeto applications.
 
 #### Installation
 
@@ -146,7 +171,9 @@ yarn add @bigbinary/neeto-slack-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
 
@@ -156,9 +183,11 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
 
 ##### Props
 
-1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth url
+1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth
+   url
 
-2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack Authorize button
+2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack
+   Authorize button
 
 ##### Usage
 
@@ -191,7 +220,8 @@ References:
 
 2. `teamName`: A string representing the Slack team name to be displayed.
 
-3. `initialFormValues`: An object containing the initial values for the formik form fields.
+3. `initialFormValues`: An object containing the initial values for the formik
+   form fields.
 
 4. `handleSubmit`: A function to handle the form submit.
 
@@ -200,11 +230,15 @@ References:
 6. `className`: A string to add custom styles to the `Configure` component.
 
 7. `validationSchema`: A yup validation schema to validate the form fields.
-    >>Note: No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..}))
 
-8. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
+   > > Note: No need to include selectedChannel validation. Also no need to wrap
+   > > validationSchema in yup.object().shape({..}))
+
+8. `channelRefreshHandler`: A function to invalidate queries for refreshing
+   Slack Channel list.
 
-9. `channelSelectLabel`: A string to customize the label for Slack Channel select field.
+9. `channelSelectLabel`: A string to customize the label for Slack Channel
+   select field.
 
 10. `slackUrl`: Slack workspace url to be displayed.
 
@@ -212,98 +246,98 @@ References:
 
 - Without Children
 
-    ```js
-    <Configure
-      handleSubmit={handleSubmit}
-      isSubmitting={isSubmitting}
-      teamName={teamName}
-      initialFormValues={{
-        selectedChannel: findBy({ value: selectedChannelId }, channelOptions),
-        channels: channelOptions,
-      }}
-    />
-    ```
+  ```js
+  <Configure
+    handleSubmit={handleSubmit}
+    isSubmitting={isSubmitting}
+    teamName={teamName}
+    initialFormValues={{
+      selectedChannel: findBy({ value: selectedChannelId }, channelOptions),
+      channels: channelOptions,
+    }}
+  />
+  ```
 
-    References:
+  References:
 
-    - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/Steps/Configure.jsx#L19)
+  - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/Steps/Configure.jsx#L19)
 
 - With Children
 
-    ```js
-    const SLACK_SETTING_FORM_VALIDATION_SCHEMA = {
-      slackEvents: yup.object().nullable().shape({
-        faultOccurred: yup.boolean(),
-        faultResolved: yup.boolean(),
-        faultUnresolved: yup.boolean(),
-      }),
-    };
-
-    // ...
-
-    <Configure
-      handleSubmit={handleSubmit}
-      isSubmitting={isSubmitting}
-      teamName={teamName}
-      validationSchema={SLACK_SETTING_FORM_VALIDATION_SCHEMA}
-      initialFormValues={{
-        selectedChannel: findBy({ value: notificationChannelId }, channelOptions),
-        channels: channelOptions,
-        slackEvents: slackEvents,
-      }}
-    >
-      <Checkbox
-        className="neeto-ui-mt-5"
-        label="Fault Resolved"
-        name="slackEvents.faultResolved"
-      />
-      <Checkbox
-        className="neeto-ui-mt-5"
-        label="Fault Unresolved"
-        name="slackEvents.faultUnresolved"
-      />
-      <Checkbox
-        className="neeto-ui-my-5"
-        label="Fault Occurred"
-        name="slackEvents.faultOccurred"
-      />
-    </Configure>;
-    ```
-
-    Notes:
-
-    - You can provide the validation schema for the child form fields.
+  ```js
+  const SLACK_SETTING_FORM_VALIDATION_SCHEMA = {
+    slackEvents: yup.object().nullable().shape({
+      faultOccurred: yup.boolean(),
+      faultResolved: yup.boolean(),
+      faultUnresolved: yup.boolean(),
+    }),
+  };
+
+  // ...
+
+  <Configure
+    handleSubmit={handleSubmit}
+    isSubmitting={isSubmitting}
+    teamName={teamName}
+    validationSchema={SLACK_SETTING_FORM_VALIDATION_SCHEMA}
+    initialFormValues={{
+      selectedChannel: findBy({ value: notificationChannelId }, channelOptions),
+      channels: channelOptions,
+      slackEvents: slackEvents,
+    }}
+  >
+    <Checkbox
+      className="neeto-ui-mt-5"
+      label="Fault Resolved"
+      name="slackEvents.faultResolved"
+    />
+    <Checkbox
+      className="neeto-ui-mt-5"
+      label="Fault Unresolved"
+      name="slackEvents.faultUnresolved"
+    />
+    <Checkbox
+      className="neeto-ui-my-5"
+      label="Fault Occurred"
+      name="slackEvents.faultOccurred"
+    />
+  </Configure>;
+  ```
+
+  Notes:
+
+  - You can provide the validation schema for the child form fields.
 
 - Accessing formik props
 
-    ```js
-    <Configure
-      handleSubmit={handleSubmit}
-      initialFormValues={initialFormValues}
-      isSubmitting={isSubmitting}
-      teamName={teamName}
-    >
-      {({ setFieldValue }) => (
-        <div className="mb-4 w-full">
-          <TimePicker
-            use12Hours
-            className="text-base font-semibold text-gray-800"
-            format="h A"
-            interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
-            label="Schedule time"
-            name="notifyTime"
-            type="time"
-            onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
-          />
-        </div>
-      )}
-    </Configure>
-    ```
-
-    References:
-
-    - [neetoInvoice](https://github.com/bigbinary/neeto-invoice-web/pull/3403/files#diff-92b6ca3b40c8f180f2585ba83e1fafda5b31e406298cae613b8c988ff7739e58R32)
-    - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/Steps/Configure.jsx#L36)
+  ```js
+  <Configure
+    handleSubmit={handleSubmit}
+    initialFormValues={initialFormValues}
+    isSubmitting={isSubmitting}
+    teamName={teamName}
+  >
+    {({ setFieldValue }) => (
+      <div className="mb-4 w-full">
+        <TimePicker
+          use12Hours
+          className="text-base font-semibold text-gray-800"
+          format="h A"
+          interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
+          label="Schedule time"
+          name="notifyTime"
+          type="time"
+          onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
+        />
+      </div>
+    )}
+  </Configure>
+  ```
+
+  References:
+
+  - [neetoInvoice](https://github.com/bigbinary/neeto-invoice-web/pull/3403/files#diff-92b6ca3b40c8f180f2585ba83e1fafda5b31e406298cae613b8c988ff7739e58R32)
+  - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/Steps/Configure.jsx#L36)
 
 #### 3. `Finish`
 
@@ -317,74 +351,75 @@ References:
 
 3. `buttonProps`: Props for the primary button.
 
-3. `teamName`: A string representing the Slack team name to be displayed.
+4. `teamName`: A string representing the Slack team name to be displayed.
 
-4. `fields`: An array of objects containing the fields to be displayed.
+5. `fields`: An array of objects containing the fields to be displayed.
 
-5. `onBack`: Function that handles redirect to Configure page.
+6. `onBack`: Function that handles redirect to Configure page.
 
-6. `onSuccess`: Function that handles the success case. For example: if there is a demo step, then onSuccess would forward the user to the demo step
+7. `onSuccess`: Function that handles the success case. For example: if there is
+   a demo step, then onSuccess would forward the user to the demo step
 
 ##### Usage
 
 1. Without Children
 
-    ```js
-    const selectedChannel = "General";
-    const { configuration } = useSlackApi();
-
-    return (
-      <Finish
-        selectedChannel={selectedChannel}
-        teamName={configuration.teamName}
-        fields={[
-          {
-            name: "Name",
-            value: configuration.name,
-          },
-        ]}
-        secondaryButtonProps={{
-          label: "Edit",
-          onClick: () => setActiveTab("configure"),
-        }}
-        buttonProps={{ label: "Finish", onClick: onClose }}
-      />
-    );
-    ```
-
-    References:
-
-      - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L101)
-      - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L82)
+   ```js
+   const selectedChannel = "General";
+   const { configuration } = useSlackApi();
+
+   return (
+     <Finish
+       selectedChannel={selectedChannel}
+       teamName={configuration.teamName}
+       fields={[
+         {
+           name: "Name",
+           value: configuration.name,
+         },
+       ]}
+       secondaryButtonProps={{
+         label: "Edit",
+         onClick: () => setActiveTab("configure"),
+       }}
+       buttonProps={{ label: "Finish", onClick: onClose }}
+     />
+   );
+   ```
+
+   References:
+
+   - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L101)
+   - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L82)
 
 2. With Children
 
-    ```js
-    const selectedChannel = "General";
-    const { configuration } = useSlackApi();
-
-    return (
-      <Finish
-        selectedChannel={selectedChannel}
-        teamName={configuration.teamName}
-        fields={[
-          {
-            name: "Name",
-            value: configuration.name,
-          },
-        ]}
-        secondaryButtonProps={{
-          label: "Edit",
-          onClick: () => setActiveTab("configure"),
-        }}
-        buttonProps={{ label: "Finish", onClick: onClose }}
-      >
-        <p className="neeto-ui-my-2 neeto-ui-text-info-800">
-          *You can update your info later from settings*
-        </p>
-      </Finish>
-    );
-    ```
+   ```js
+   const selectedChannel = "General";
+   const { configuration } = useSlackApi();
+
+   return (
+     <Finish
+       selectedChannel={selectedChannel}
+       teamName={configuration.teamName}
+       fields={[
+         {
+           name: "Name",
+           value: configuration.name,
+         },
+       ]}
+       secondaryButtonProps={{
+         label: "Edit",
+         onClick: () => setActiveTab("configure"),
+       }}
+       buttonProps={{ label: "Finish", onClick: onClose }}
+     >
+       <p className="neeto-ui-my-2 neeto-ui-text-info-800">
+         *You can update your info later from settings*
+       </p>
+     </Finish>
+   );
+   ```
 
 #### 4. `Settings`
 
@@ -410,17 +445,22 @@ References:
 
   1. `children`: Extra form fields to be included in the EditPane.
 
-  2. `initialFormValues`: An object containing the initial values for the formik form fields.
-      > Include channels array & selectedChannel value
+  2. `initialFormValues`: An object containing the initial values for the formik
+     form fields.
+
+     > Include channels array & selectedChannel value
 
   3. `handleSubmit`: A function to handle the form submission.
 
   4. `isSubmitting`: A boolean to handle the submitting state of the form.
 
-  5. `className`: A string to add custom styles to the `Settings.EditPane` component.
+  5. `className`: A string to add custom styles to the `Settings.EditPane`
+     component.
 
   6. `validationSchema`: A yup validation schema to validate the form fields.
-      > No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..})
+
+     > No need to include selectedChannel validation. Also no need to wrap
+     > validationSchema in yup.object().shape({..})
 
   7. `onClose`: Function to close the `Pane` when the Close button is clicked.
 
@@ -428,7 +468,8 @@ References:
 
   9. `isPaneOpen`: A boolean to handle the open/close state of the `Pane`.
 
-  10. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
+  10. `channelRefreshHandler`: A function to invalidate queries for refreshing
+      Slack Channel list.
 
   11. `paneProps`: Pass down props to the neeto-ui pane
 
@@ -436,83 +477,83 @@ References:
 
 1. Basic
 
-    ```js
-    const [isPaneOpen, setIsPaneOpen] = useState(false);
-
-    const SETTINGS_FORM_INITIAL_VALUES = {
-      channels: [
-        { label: "general", value: "K87KJHKS987" },
-        { label: "hq", value: "IJHKJ76889H" },
-      ],
-      selectedChannel: { label: "general", value: "K87KJHKS987" },
-      updateType: "All conversation activity"
-    };
-
-    const { slack, handleSubmit, isSubmitting } = useSlackApi();
-    const SETTINGS_FORM_VALIDATION_SCHEMA = {
-      updateType: yup.string().required(),
-    };
-
-    return (
-      <Settings
-        teamName={slack.teamName}
-        className="neeto-ui-my-2"
-        fields={[
-          {
-            name: "Channel",
-            value: slack.selectedChannel
-          },
-          {
-            name; "Update Type",
-            value: slack.updateType
-          }
-        ]}
-        onEdit={() => setIsPaneOpen(true)}
-      >
-        <Settings.EditPane
-          initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
-          handleSubmit={handleSubmit}
-          isSubmitting={isSubmitting}
-          className="neeto-ui-my-2"
-          validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
-          onClose={() => setIsPaneOpen(false)}
-          title="Edit slack integration"
-          isPaneOpen={isPaneOpen}
-        >
-          {(formikProps) => (
-            <Input name="UpdateType" value={formikProps.values.name} className="neeto-ui-my-2" />
-          )}
-        </Settings.EditPane>
-      </Settings>;
-    );
-    ```
-
-    References:
-
-     - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/Manage.jsx#L82)
+   ```js
+   const [isPaneOpen, setIsPaneOpen] = useState(false);
+
+   const SETTINGS_FORM_INITIAL_VALUES = {
+     channels: [
+       { label: "general", value: "K87KJHKS987" },
+       { label: "hq", value: "IJHKJ76889H" },
+     ],
+     selectedChannel: { label: "general", value: "K87KJHKS987" },
+     updateType: "All conversation activity"
+   };
+
+   const { slack, handleSubmit, isSubmitting } = useSlackApi();
+   const SETTINGS_FORM_VALIDATION_SCHEMA = {
+     updateType: yup.string().required(),
+   };
+
+   return (
+     <Settings
+       teamName={slack.teamName}
+       className="neeto-ui-my-2"
+       fields={[
+         {
+           name: "Channel",
+           value: slack.selectedChannel
+         },
+         {
+           name; "Update Type",
+           value: slack.updateType
+         }
+       ]}
+       onEdit={() => setIsPaneOpen(true)}
+     >
+       <Settings.EditPane
+         initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
+         handleSubmit={handleSubmit}
+         isSubmitting={isSubmitting}
+         className="neeto-ui-my-2"
+         validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
+         onClose={() => setIsPaneOpen(false)}
+         title="Edit slack integration"
+         isPaneOpen={isPaneOpen}
+       >
+         {(formikProps) => (
+           <Input name="UpdateType" value={formikProps.values.name} className="neeto-ui-my-2" />
+         )}
+       </Settings.EditPane>
+     </Settings>;
+   );
+   ```
+
+   References:
+
+   - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/Manage.jsx#L82)
 
 2. Accessing formik props for child field elements
 
-    ```js
-    <Settings teamName={teamName} onEdit={handleOpenPane} fields={fields}>
-      <Settings.EditPane>
-        {({ setFieldValue }) => (
-          <div className="mb-4 w-full">
-            <TimePicker
-              use12Hours
-              disabled={isDisabled}
-              className="text-base font-semibold text-gray-800"
-              format="h A"
-              interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
-              label="Schedule time"
-              name="notifyTime"
-              type="time"
-              onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
-            />
-          </div>
-        )}
-      </Settings.EditPane>
-    ```
+   ```js
+   <Settings teamName={teamName} onEdit={handleOpenPane} fields={fields}>
+     <Settings.EditPane>
+       {({ setFieldValue }) => (
+         <div className="mb-4 w-full">
+           <TimePicker
+             use12Hours
+             disabled={isDisabled}
+             className="text-base font-semibold text-gray-800"
+             format="h A"
+             interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
+             label="Schedule time"
+             name="notifyTime"
+             type="time"
+             onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
+           />
+         </div>
+       )}
+     </Settings.EditPane>
+   ```
 
 ### Hooks
 
@@ -522,35 +563,41 @@ This is a React Query hook for fetching the status of slack integration.
 
 ##### Arguments
 
-- `integrableId`: Query param required to fetch Integration connect status through Integrable, passing the record id which is used as integrable for Slack Integration
-- `integrableType`: Query param required to fetch Integration connect status through Integrable, passing the record type which is used as integrable for Slack Integration.
+- `integrableId`: Query param required to fetch Integration connect status
+  through Integrable, passing the record id which is used as integrable for
+  Slack Integration
+- `integrableType`: Query param required to fetch Integration connect status
+  through Integrable, passing the record type which is used as integrable for
+  Slack Integration.
 
 ##### Usage
 
 1. ##### Without Integrable params
 
-    ```js
-    const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
-      useFetchSlackIntegrationsStatus({});
-    ```
+   ```js
+   const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
+     useFetchSlackIntegrationsStatus({});
+   ```
 
-    References:
+   References:
 
-      - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L35)
+   - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L35)
 
 2. ##### With Integrable params
 
-    ```js
-    const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
-      useFetchSlackIntegrationsStatus({
-        integrableId: "1234567890",
-        integrableType: "Form",
-      });
-    ```
+   ```js
+   const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
+     useFetchSlackIntegrationsStatus({
+       integrableId: "1234567890",
+       integrableType: "Form",
+     });
+   ```
 
 ## 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.
 
 <br>