@bigbinary/neeto-slack-frontend 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +326 -279
  2. package/dist/index.cjs.js +304 -253
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.js +295 -251
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -2
package/README.md CHANGED
@@ -1,22 +1,24 @@
1
1
  # neeto-slack-nano
2
2
 
3
- 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.
3
+ The `neeto-slack-nano` facilitates the management of slack integration within
4
+ neeto applictions. The nano exports the `@bigbinary/neeto-slack-frontend` NPM
5
+ package and `neeto-slack-engine` Rails engine for development.
4
6
 
5
7
  ## Contents
6
8
 
7
9
  1. [Development with Host Application](#development-with-host-application)
8
- - [Engine](#engine)
9
- - [Installation](#installation)
10
- - [Frontend package](#frontend-package)
11
- - [Installation](#installation-1)
12
- - [Instructions for development](#instructions-for-development)
13
- - [Components](#components)
14
- - [Connect](#1-connect)
15
- - [Configure](#2-configure)
16
- - [Finish](#3-finish)
17
- - [Settings](#4-settings)
18
- - [Hooks](#hooks)
19
- - [useFetchSlackIntegrationsStatus](#1-usefetchslackintegrationsstatus)
10
+ - [Engine](#engine)
11
+ - [Installation](#installation)
12
+ - [Frontend package](#frontend-package)
13
+ - [Installation](#installation-1)
14
+ - [Instructions for development](#instructions-for-development)
15
+ - [Components](#components)
16
+ - [Connect](#1-connect)
17
+ - [Configure](#2-configure)
18
+ - [Finish](#3-finish)
19
+ - [Settings](#4-settings)
20
+ - [Hooks](#hooks)
21
+ - [useFetchSlackIntegrationsStatus](#1-usefetchslackintegrationsstatus)
20
22
  2. [Instructions for Publishing](#instructions-for-publishing)
21
23
 
22
24
  ## Development with Host Application
@@ -25,6 +27,22 @@ The `neeto-slack-nano` facilitates the management of slack integration within ne
25
27
 
26
28
  The Engine is used to support the slack integration within neeto applications.
27
29
 
30
+ 1. Log in to the `NeetoChat` app.
31
+ 2. Select or add a workspace.
32
+ 3. Allow the app to access the Slack workspace.
33
+ 4. You will be redirected to a broken page, change `https` to `http` in the URL
34
+ and replace `spinkart` with your workspace name (e.g., "neetochattest"), then
35
+ press Enter.
36
+
37
+ <img width="1144" alt="" src="https://github.com/user-attachments/assets/7a39445f-bf2e-49d2-a92e-d0bec1faf6e2">
38
+
39
+ 5. Configure the page by selecting the Slack channel for tickets and click
40
+ `Continue`.
41
+ 6. Proceed to the `Finish` step.
42
+ 7. Click `Done` to go to the homepage, where you can manage or disconnect Slack.
43
+
44
+ [demo video](https://github.com/user-attachments/assets/d64b57ac-c5bd-4ef3-b4c3-b975fe84ee1e)
45
+
28
46
  #### Installation
29
47
 
30
48
  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.
52
70
 
53
71
  4. Install the migrations
54
72
 
55
- Add a migration to add slack_chat_api_key to Organization of host app if
56
- it doesn't exist already. Then run
73
+ Add a migration to add slack_chat_api_key to Organization of host app if it
74
+ doesn't exist already. Then run
57
75
 
58
76
  ```ruby
59
77
  # frozen_string_literal: true
@@ -76,35 +94,41 @@ The Engine is used to support the slack integration within neeto applications.
76
94
  has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
77
95
  ```
78
96
 
79
- 6. Configure the following `Environment Variables` and `Secrets` with suitable values
97
+ 6. Configure the following `Environment Variables` and `Secrets` with suitable
98
+ values
80
99
 
81
- - Under `.env` file:
100
+ - Under `.env` file:
82
101
 
83
- ```yaml
84
- SLACK_CLIENT_ID=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
102
+ ```yaml
103
+ SLACK_CLIENT_ID=# Value from Slack App console at
104
+ https://api.slack.com/apps/APP_ID/general
85
105
 
86
- SLACK_CLIENT_SECRET=# Valuefrom Slack App console at https://api.slack.com/apps/APP_ID/general
106
+ SLACK_CLIENT_SECRET=# Valuefrom Slack App console at
107
+ https://api.slack.com/apps/APP_ID/general
87
108
 
88
- SLACK_CLIENT_SIGNING_SECRET=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
109
+ SLACK_CLIENT_SIGNING_SECRET=# Value from Slack App console at
110
+ https://api.slack.com/apps/APP_ID/general
89
111
 
90
- ATTR_ENCRYPTION_KEY=# Random varying char. key with min. 32 chars.
112
+ ATTR_ENCRYPTION_KEY=# Random varying char. key with min. 32 chars.
91
113
 
92
- SLACK_REDIRECT_PATH=#Path controller if Callbacks controller of the application is to be used instead of the one in Engine
114
+ SLACK_REDIRECT_PATH=#Path controller if Callbacks controller of the
115
+ application is to be used instead of the one in Engine
93
116
 
94
- SLACK_HOST_URL=# Host url if different than application host URL or in development for use of Ngrok
95
- ```
117
+ SLACK_HOST_URL=# Host url if different than application host URL or in
118
+ development for use of Ngrok
119
+ ```
96
120
 
97
- - Under `secrets.yml` file:
121
+ - Under `secrets.yml` file:
98
122
 
99
- ```yaml
100
- application_name: # Application name
101
- attr_encrypted:
102
- encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
103
- slack:
104
- client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
105
- client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
106
- client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
107
- ```
123
+ ```yaml
124
+ application_name: # Application name
125
+ attr_encrypted:
126
+ encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
127
+ slack:
128
+ client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
129
+ client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
130
+ client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
131
+ ```
108
132
 
109
133
  7. Slack Integration supports customizing scopes required for host app on usage
110
134
  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.
134
158
 
135
159
  ### Frontend package
136
160
 
137
- The package exports components and hooks to manage slack integration within neeto applications.
161
+ The package exports components and hooks to manage slack integration within
162
+ neeto applications.
138
163
 
139
164
  #### Installation
140
165
 
@@ -146,7 +171,9 @@ yarn add @bigbinary/neeto-slack-frontend
146
171
 
147
172
  #### Instructions for development
148
173
 
149
- Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
174
+ Check the
175
+ [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
176
+ for step-by-step instructions to develop the frontend package.
150
177
 
151
178
  ### Components
152
179
 
@@ -156,9 +183,11 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
156
183
 
157
184
  ##### Props
158
185
 
159
- 1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth url
186
+ 1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth
187
+ url
160
188
 
161
- 2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack Authorize button
189
+ 2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack
190
+ Authorize button
162
191
 
163
192
  ##### Usage
164
193
 
@@ -191,7 +220,8 @@ References:
191
220
 
192
221
  2. `teamName`: A string representing the Slack team name to be displayed.
193
222
 
194
- 3. `initialFormValues`: An object containing the initial values for the formik form fields.
223
+ 3. `initialFormValues`: An object containing the initial values for the formik
224
+ form fields.
195
225
 
196
226
  4. `handleSubmit`: A function to handle the form submit.
197
227
 
@@ -200,11 +230,15 @@ References:
200
230
  6. `className`: A string to add custom styles to the `Configure` component.
201
231
 
202
232
  7. `validationSchema`: A yup validation schema to validate the form fields.
203
- >>Note: No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..}))
204
233
 
205
- 8. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
234
+ > > Note: No need to include selectedChannel validation. Also no need to wrap
235
+ > > validationSchema in yup.object().shape({..}))
236
+
237
+ 8. `channelRefreshHandler`: A function to invalidate queries for refreshing
238
+ Slack Channel list.
206
239
 
207
- 9. `channelSelectLabel`: A string to customize the label for Slack Channel select field.
240
+ 9. `channelSelectLabel`: A string to customize the label for Slack Channel
241
+ select field.
208
242
 
209
243
  10. `slackUrl`: Slack workspace url to be displayed.
210
244
 
@@ -212,98 +246,98 @@ References:
212
246
 
213
247
  - Without Children
214
248
 
215
- ```js
216
- <Configure
217
- handleSubmit={handleSubmit}
218
- isSubmitting={isSubmitting}
219
- teamName={teamName}
220
- initialFormValues={{
221
- selectedChannel: findBy({ value: selectedChannelId }, channelOptions),
222
- channels: channelOptions,
223
- }}
224
- />
225
- ```
249
+ ```js
250
+ <Configure
251
+ handleSubmit={handleSubmit}
252
+ isSubmitting={isSubmitting}
253
+ teamName={teamName}
254
+ initialFormValues={{
255
+ selectedChannel: findBy({ value: selectedChannelId }, channelOptions),
256
+ channels: channelOptions,
257
+ }}
258
+ />
259
+ ```
226
260
 
227
- References:
261
+ References:
228
262
 
229
- - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/Steps/Configure.jsx#L19)
263
+ - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/Steps/Configure.jsx#L19)
230
264
 
231
265
  - With Children
232
266
 
233
- ```js
234
- const SLACK_SETTING_FORM_VALIDATION_SCHEMA = {
235
- slackEvents: yup.object().nullable().shape({
236
- faultOccurred: yup.boolean(),
237
- faultResolved: yup.boolean(),
238
- faultUnresolved: yup.boolean(),
239
- }),
240
- };
241
-
242
- // ...
243
-
244
- <Configure
245
- handleSubmit={handleSubmit}
246
- isSubmitting={isSubmitting}
247
- teamName={teamName}
248
- validationSchema={SLACK_SETTING_FORM_VALIDATION_SCHEMA}
249
- initialFormValues={{
250
- selectedChannel: findBy({ value: notificationChannelId }, channelOptions),
251
- channels: channelOptions,
252
- slackEvents: slackEvents,
253
- }}
254
- >
255
- <Checkbox
256
- className="neeto-ui-mt-5"
257
- label="Fault Resolved"
258
- name="slackEvents.faultResolved"
259
- />
260
- <Checkbox
261
- className="neeto-ui-mt-5"
262
- label="Fault Unresolved"
263
- name="slackEvents.faultUnresolved"
264
- />
265
- <Checkbox
266
- className="neeto-ui-my-5"
267
- label="Fault Occurred"
268
- name="slackEvents.faultOccurred"
269
- />
270
- </Configure>;
271
- ```
272
-
273
- Notes:
274
-
275
- - You can provide the validation schema for the child form fields.
267
+ ```js
268
+ const SLACK_SETTING_FORM_VALIDATION_SCHEMA = {
269
+ slackEvents: yup.object().nullable().shape({
270
+ faultOccurred: yup.boolean(),
271
+ faultResolved: yup.boolean(),
272
+ faultUnresolved: yup.boolean(),
273
+ }),
274
+ };
275
+
276
+ // ...
277
+
278
+ <Configure
279
+ handleSubmit={handleSubmit}
280
+ isSubmitting={isSubmitting}
281
+ teamName={teamName}
282
+ validationSchema={SLACK_SETTING_FORM_VALIDATION_SCHEMA}
283
+ initialFormValues={{
284
+ selectedChannel: findBy({ value: notificationChannelId }, channelOptions),
285
+ channels: channelOptions,
286
+ slackEvents: slackEvents,
287
+ }}
288
+ >
289
+ <Checkbox
290
+ className="neeto-ui-mt-5"
291
+ label="Fault Resolved"
292
+ name="slackEvents.faultResolved"
293
+ />
294
+ <Checkbox
295
+ className="neeto-ui-mt-5"
296
+ label="Fault Unresolved"
297
+ name="slackEvents.faultUnresolved"
298
+ />
299
+ <Checkbox
300
+ className="neeto-ui-my-5"
301
+ label="Fault Occurred"
302
+ name="slackEvents.faultOccurred"
303
+ />
304
+ </Configure>;
305
+ ```
306
+
307
+ Notes:
308
+
309
+ - You can provide the validation schema for the child form fields.
276
310
 
277
311
  - Accessing formik props
278
312
 
279
- ```js
280
- <Configure
281
- handleSubmit={handleSubmit}
282
- initialFormValues={initialFormValues}
283
- isSubmitting={isSubmitting}
284
- teamName={teamName}
285
- >
286
- {({ setFieldValue }) => (
287
- <div className="mb-4 w-full">
288
- <TimePicker
289
- use12Hours
290
- className="text-base font-semibold text-gray-800"
291
- format="h A"
292
- interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
293
- label="Schedule time"
294
- name="notifyTime"
295
- type="time"
296
- onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
297
- />
298
- </div>
299
- )}
300
- </Configure>
301
- ```
302
-
303
- References:
304
-
305
- - [neetoInvoice](https://github.com/bigbinary/neeto-invoice-web/pull/3403/files#diff-92b6ca3b40c8f180f2585ba83e1fafda5b31e406298cae613b8c988ff7739e58R32)
306
- - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/Steps/Configure.jsx#L36)
313
+ ```js
314
+ <Configure
315
+ handleSubmit={handleSubmit}
316
+ initialFormValues={initialFormValues}
317
+ isSubmitting={isSubmitting}
318
+ teamName={teamName}
319
+ >
320
+ {({ setFieldValue }) => (
321
+ <div className="mb-4 w-full">
322
+ <TimePicker
323
+ use12Hours
324
+ className="text-base font-semibold text-gray-800"
325
+ format="h A"
326
+ interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
327
+ label="Schedule time"
328
+ name="notifyTime"
329
+ type="time"
330
+ onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
331
+ />
332
+ </div>
333
+ )}
334
+ </Configure>
335
+ ```
336
+
337
+ References:
338
+
339
+ - [neetoInvoice](https://github.com/bigbinary/neeto-invoice-web/pull/3403/files#diff-92b6ca3b40c8f180f2585ba83e1fafda5b31e406298cae613b8c988ff7739e58R32)
340
+ - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/Steps/Configure.jsx#L36)
307
341
 
308
342
  #### 3. `Finish`
309
343
 
@@ -317,74 +351,75 @@ References:
317
351
 
318
352
  3. `buttonProps`: Props for the primary button.
319
353
 
320
- 3. `teamName`: A string representing the Slack team name to be displayed.
354
+ 4. `teamName`: A string representing the Slack team name to be displayed.
321
355
 
322
- 4. `fields`: An array of objects containing the fields to be displayed.
356
+ 5. `fields`: An array of objects containing the fields to be displayed.
323
357
 
324
- 5. `onBack`: Function that handles redirect to Configure page.
358
+ 6. `onBack`: Function that handles redirect to Configure page.
325
359
 
326
- 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
360
+ 7. `onSuccess`: Function that handles the success case. For example: if there is
361
+ a demo step, then onSuccess would forward the user to the demo step
327
362
 
328
363
  ##### Usage
329
364
 
330
365
  1. Without Children
331
366
 
332
- ```js
333
- const selectedChannel = "General";
334
- const { configuration } = useSlackApi();
335
-
336
- return (
337
- <Finish
338
- selectedChannel={selectedChannel}
339
- teamName={configuration.teamName}
340
- fields={[
341
- {
342
- name: "Name",
343
- value: configuration.name,
344
- },
345
- ]}
346
- secondaryButtonProps={{
347
- label: "Edit",
348
- onClick: () => setActiveTab("configure"),
349
- }}
350
- buttonProps={{ label: "Finish", onClick: onClose }}
351
- />
352
- );
353
- ```
354
-
355
- References:
356
-
357
- - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L101)
358
- - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L82)
367
+ ```js
368
+ const selectedChannel = "General";
369
+ const { configuration } = useSlackApi();
370
+
371
+ return (
372
+ <Finish
373
+ selectedChannel={selectedChannel}
374
+ teamName={configuration.teamName}
375
+ fields={[
376
+ {
377
+ name: "Name",
378
+ value: configuration.name,
379
+ },
380
+ ]}
381
+ secondaryButtonProps={{
382
+ label: "Edit",
383
+ onClick: () => setActiveTab("configure"),
384
+ }}
385
+ buttonProps={{ label: "Finish", onClick: onClose }}
386
+ />
387
+ );
388
+ ```
389
+
390
+ References:
391
+
392
+ - [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L101)
393
+ - [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L82)
359
394
 
360
395
  2. With Children
361
396
 
362
- ```js
363
- const selectedChannel = "General";
364
- const { configuration } = useSlackApi();
365
-
366
- return (
367
- <Finish
368
- selectedChannel={selectedChannel}
369
- teamName={configuration.teamName}
370
- fields={[
371
- {
372
- name: "Name",
373
- value: configuration.name,
374
- },
375
- ]}
376
- secondaryButtonProps={{
377
- label: "Edit",
378
- onClick: () => setActiveTab("configure"),
379
- }}
380
- buttonProps={{ label: "Finish", onClick: onClose }}
381
- >
382
- <p className="neeto-ui-my-2 neeto-ui-text-info-800">
383
- *You can update your info later from settings*
384
- </p>
385
- </Finish>
386
- );
387
- ```
397
+ ```js
398
+ const selectedChannel = "General";
399
+ const { configuration } = useSlackApi();
400
+
401
+ return (
402
+ <Finish
403
+ selectedChannel={selectedChannel}
404
+ teamName={configuration.teamName}
405
+ fields={[
406
+ {
407
+ name: "Name",
408
+ value: configuration.name,
409
+ },
410
+ ]}
411
+ secondaryButtonProps={{
412
+ label: "Edit",
413
+ onClick: () => setActiveTab("configure"),
414
+ }}
415
+ buttonProps={{ label: "Finish", onClick: onClose }}
416
+ >
417
+ <p className="neeto-ui-my-2 neeto-ui-text-info-800">
418
+ *You can update your info later from settings*
419
+ </p>
420
+ </Finish>
421
+ );
422
+ ```
388
423
 
389
424
  #### 4. `Settings`
390
425
 
@@ -410,17 +445,22 @@ References:
410
445
 
411
446
  1. `children`: Extra form fields to be included in the EditPane.
412
447
 
413
- 2. `initialFormValues`: An object containing the initial values for the formik form fields.
414
- > Include channels array & selectedChannel value
448
+ 2. `initialFormValues`: An object containing the initial values for the formik
449
+ form fields.
450
+
451
+ > Include channels array & selectedChannel value
415
452
 
416
453
  3. `handleSubmit`: A function to handle the form submission.
417
454
 
418
455
  4. `isSubmitting`: A boolean to handle the submitting state of the form.
419
456
 
420
- 5. `className`: A string to add custom styles to the `Settings.EditPane` component.
457
+ 5. `className`: A string to add custom styles to the `Settings.EditPane`
458
+ component.
421
459
 
422
460
  6. `validationSchema`: A yup validation schema to validate the form fields.
423
- > No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..})
461
+
462
+ > No need to include selectedChannel validation. Also no need to wrap
463
+ > validationSchema in yup.object().shape({..})
424
464
 
425
465
  7. `onClose`: Function to close the `Pane` when the Close button is clicked.
426
466
 
@@ -428,7 +468,8 @@ References:
428
468
 
429
469
  9. `isPaneOpen`: A boolean to handle the open/close state of the `Pane`.
430
470
 
431
- 10. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
471
+ 10. `channelRefreshHandler`: A function to invalidate queries for refreshing
472
+ Slack Channel list.
432
473
 
433
474
  11. `paneProps`: Pass down props to the neeto-ui pane
434
475
 
@@ -436,83 +477,83 @@ References:
436
477
 
437
478
  1. Basic
438
479
 
439
- ```js
440
- const [isPaneOpen, setIsPaneOpen] = useState(false);
441
-
442
- const SETTINGS_FORM_INITIAL_VALUES = {
443
- channels: [
444
- { label: "general", value: "K87KJHKS987" },
445
- { label: "hq", value: "IJHKJ76889H" },
446
- ],
447
- selectedChannel: { label: "general", value: "K87KJHKS987" },
448
- updateType: "All conversation activity"
449
- };
450
-
451
- const { slack, handleSubmit, isSubmitting } = useSlackApi();
452
- const SETTINGS_FORM_VALIDATION_SCHEMA = {
453
- updateType: yup.string().required(),
454
- };
455
-
456
- return (
457
- <Settings
458
- teamName={slack.teamName}
459
- className="neeto-ui-my-2"
460
- fields={[
461
- {
462
- name: "Channel",
463
- value: slack.selectedChannel
464
- },
465
- {
466
- name; "Update Type",
467
- value: slack.updateType
468
- }
469
- ]}
470
- onEdit={() => setIsPaneOpen(true)}
471
- >
472
- <Settings.EditPane
473
- initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
474
- handleSubmit={handleSubmit}
475
- isSubmitting={isSubmitting}
476
- className="neeto-ui-my-2"
477
- validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
478
- onClose={() => setIsPaneOpen(false)}
479
- title="Edit slack integration"
480
- isPaneOpen={isPaneOpen}
481
- >
482
- {(formikProps) => (
483
- <Input name="UpdateType" value={formikProps.values.name} className="neeto-ui-my-2" />
484
- )}
485
- </Settings.EditPane>
486
- </Settings>;
487
- );
488
- ```
489
-
490
- References:
491
-
492
- - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/Manage.jsx#L82)
480
+ ```js
481
+ const [isPaneOpen, setIsPaneOpen] = useState(false);
482
+
483
+ const SETTINGS_FORM_INITIAL_VALUES = {
484
+ channels: [
485
+ { label: "general", value: "K87KJHKS987" },
486
+ { label: "hq", value: "IJHKJ76889H" },
487
+ ],
488
+ selectedChannel: { label: "general", value: "K87KJHKS987" },
489
+ updateType: "All conversation activity"
490
+ };
491
+
492
+ const { slack, handleSubmit, isSubmitting } = useSlackApi();
493
+ const SETTINGS_FORM_VALIDATION_SCHEMA = {
494
+ updateType: yup.string().required(),
495
+ };
496
+
497
+ return (
498
+ <Settings
499
+ teamName={slack.teamName}
500
+ className="neeto-ui-my-2"
501
+ fields={[
502
+ {
503
+ name: "Channel",
504
+ value: slack.selectedChannel
505
+ },
506
+ {
507
+ name; "Update Type",
508
+ value: slack.updateType
509
+ }
510
+ ]}
511
+ onEdit={() => setIsPaneOpen(true)}
512
+ >
513
+ <Settings.EditPane
514
+ initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
515
+ handleSubmit={handleSubmit}
516
+ isSubmitting={isSubmitting}
517
+ className="neeto-ui-my-2"
518
+ validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
519
+ onClose={() => setIsPaneOpen(false)}
520
+ title="Edit slack integration"
521
+ isPaneOpen={isPaneOpen}
522
+ >
523
+ {(formikProps) => (
524
+ <Input name="UpdateType" value={formikProps.values.name} className="neeto-ui-my-2" />
525
+ )}
526
+ </Settings.EditPane>
527
+ </Settings>;
528
+ );
529
+ ```
530
+
531
+ References:
532
+
533
+ - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/Manage.jsx#L82)
493
534
 
494
535
  2. Accessing formik props for child field elements
495
536
 
496
- ```js
497
- <Settings teamName={teamName} onEdit={handleOpenPane} fields={fields}>
498
- <Settings.EditPane>
499
- {({ setFieldValue }) => (
500
- <div className="mb-4 w-full">
501
- <TimePicker
502
- use12Hours
503
- disabled={isDisabled}
504
- className="text-base font-semibold text-gray-800"
505
- format="h A"
506
- interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
507
- label="Schedule time"
508
- name="notifyTime"
509
- type="time"
510
- onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
511
- />
512
- </div>
513
- )}
514
- </Settings.EditPane>
515
- ```
537
+ ```js
538
+ <Settings teamName={teamName} onEdit={handleOpenPane} fields={fields}>
539
+ <Settings.EditPane>
540
+ {({ setFieldValue }) => (
541
+ <div className="mb-4 w-full">
542
+ <TimePicker
543
+ use12Hours
544
+ disabled={isDisabled}
545
+ className="text-base font-semibold text-gray-800"
546
+ format="h A"
547
+ interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
548
+ label="Schedule time"
549
+ name="notifyTime"
550
+ type="time"
551
+ onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
552
+ />
553
+ </div>
554
+ )}
555
+ </Settings.EditPane>
556
+ ```
516
557
 
517
558
  ### Hooks
518
559
 
@@ -522,35 +563,41 @@ This is a React Query hook for fetching the status of slack integration.
522
563
 
523
564
  ##### Arguments
524
565
 
525
- - `integrableId`: Query param required to fetch Integration connect status through Integrable, passing the record id which is used as integrable for Slack Integration
526
- - `integrableType`: Query param required to fetch Integration connect status through Integrable, passing the record type which is used as integrable for Slack Integration.
566
+ - `integrableId`: Query param required to fetch Integration connect status
567
+ through Integrable, passing the record id which is used as integrable for
568
+ Slack Integration
569
+ - `integrableType`: Query param required to fetch Integration connect status
570
+ through Integrable, passing the record type which is used as integrable for
571
+ Slack Integration.
527
572
 
528
573
  ##### Usage
529
574
 
530
575
  1. ##### Without Integrable params
531
576
 
532
- ```js
533
- const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
534
- useFetchSlackIntegrationsStatus({});
535
- ```
577
+ ```js
578
+ const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
579
+ useFetchSlackIntegrationsStatus({});
580
+ ```
536
581
 
537
- References:
582
+ References:
538
583
 
539
- - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L35)
584
+ - [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L35)
540
585
 
541
586
  2. ##### With Integrable params
542
587
 
543
- ```js
544
- const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
545
- useFetchSlackIntegrationsStatus({
546
- integrableId: "1234567890",
547
- integrableType: "Form",
548
- });
549
- ```
588
+ ```js
589
+ const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
590
+ useFetchSlackIntegrationsStatus({
591
+ integrableId: "1234567890",
592
+ integrableType: "Form",
593
+ });
594
+ ```
550
595
 
551
596
  ## Instructions for Publishing
552
597
 
553
- Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
598
+ Consult the
599
+ [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
600
+ guide for details on how to publish.
554
601
 
555
602
  <br>
556
603