From 4249e2c26356554f3969fb189f5f7391858b57bc Mon Sep 17 00:00:00 2001 From: Ludo Vlieger Date: Mon, 9 Oct 2023 14:56:49 -0400 Subject: [PATCH 01/24] Initial code for tabs --- flex-config/ui_attributes.common.json | 18 ++++++-- .../flex-hooks/components/WorkerCanvas.tsx | 6 +-- .../flex-hooks/components/WorkerCanvas.tsx | 2 +- .../worker-canvas-tabs/config.ts | 17 +++++++ .../WorkerCanvasTabs/WorkerCanvasTabs.tsx | 46 +++++++++++++++++++ .../flex-hooks/components/WorkerCanvas.tsx | 9 ++++ .../worker-canvas-tabs/index.ts | 10 ++++ .../types/ServiceConfiguration.ts | 3 ++ 8 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/config.ts create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/components/WorkerCanvas.tsx create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/index.ts create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/types/ServiceConfiguration.ts diff --git a/flex-config/ui_attributes.common.json b/flex-config/ui_attributes.common.json index c13b2fa4d..6d1123393 100644 --- a/flex-config/ui_attributes.common.json +++ b/flex-config/ui_attributes.common.json @@ -218,11 +218,20 @@ "enabled": true, "enable_notes": true, "require_disposition": false, - "global_dispositions": ["Resolved", "Not Resolved", "Follow-up Required", "Escalation", "Wrong Department"], + "global_dispositions": [ + "Resolved", + "Not Resolved", + "Follow-up Required", + "Escalation", + "Wrong Department" + ], "per_queue": { "exampleQueueSid": { "require_disposition": true, - "dispositions": ["Promotional Sale", "Renewal"] + "dispositions": [ + "Promotional Sale", + "Renewal" + ] } } }, @@ -351,7 +360,10 @@ }, "sip_support": { "enabled": false + }, + "worker_canvas_tabs": { + "enabled": false } } } -} +} \ No newline at end of file diff --git a/plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/flex-hooks/components/WorkerCanvas.tsx b/plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/flex-hooks/components/WorkerCanvas.tsx index e50265206..aaa5ca51a 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/flex-hooks/components/WorkerCanvas.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/flex-hooks/components/WorkerCanvas.tsx @@ -5,7 +5,7 @@ import { FlexComponent } from '../../../../types/feature-loader'; export const componentName = FlexComponent.WorkerCanvas; export const componentHook = function addAttributesToWorkerCanvas(flex: typeof Flex, _manager: Flex.Manager) { - flex.WorkerCanvas.Content.add(, { - sortOrder: 1000, - }); + // flex.WorkerCanvas.Content.add(, { + // sortOrder: 1000, + // }); }; diff --git a/plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/flex-hooks/components/WorkerCanvas.tsx b/plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/flex-hooks/components/WorkerCanvas.tsx index de5679260..93142e663 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/flex-hooks/components/WorkerCanvas.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/flex-hooks/components/WorkerCanvas.tsx @@ -5,5 +5,5 @@ import { FlexComponent } from '../../../../types/feature-loader'; export const componentName = FlexComponent.WorkerCanvas; export const componentHook = function addCapacityToWorkerCanvas(flex: typeof Flex, _manager: Flex.Manager) { - flex.WorkerCanvas.Content.add(); + // flex.WorkerCanvas.Content.add(); }; diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/config.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/config.ts new file mode 100644 index 000000000..71889a007 --- /dev/null +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/config.ts @@ -0,0 +1,17 @@ +import { getFeatureFlags } from '../../utils/configuration'; +import WorkerCanvasTabsConfig from './types/ServiceConfiguration'; + +const { enabled = false } = (getFeatureFlags()?.features?.worker_canvas_tabs as WorkerCanvasTabsConfig) || {}; + +const { enabled: supervisorCapacityEnabled = false } = getFeatureFlags()?.features?.supervisor_capacity || {}; +const { enabled: attributeViewerEnabled = false } = getFeatureFlags()?.features?.attribute_viewer || {}; + +export const isFeatureEnabled = () => { + return enabled; +}; +export const isSupervisorCapacityEnabled = () => { + return supervisorCapacityEnabled; +}; +export const isAttributeViewerEnabled = () => { + return attributeViewerEnabled; +}; diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx new file mode 100644 index 000000000..90dd9fced --- /dev/null +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx @@ -0,0 +1,46 @@ +import { IWorker, Template, templates } from '@twilio/flex-ui'; +import { useTabState, Box, Heading, Tab, Tabs, TabList, TabPanel, TabPanels } from '@twilio-paste/core'; + +import CapacityContainer from '../../../supervisor-capacity/custom-components/CapacityContainer'; +import WorkerAttributes from '../../../attribute-viewer/custom-components/WorkerAttributes'; +import { isSupervisorCapacityEnabled, isAttributeViewerEnabled } from '../../config'; + +interface Props { + worker?: IWorker; +} + +const WorkerCanvasTabs = ({ worker }: Props) => { + const { ...tabState } = useTabState(); + + return ( + + + + {isSupervisorCapacityEnabled() && Capacity} + {isAttributeViewerEnabled() && Attributes } + Team Name + + + {isSupervisorCapacityEnabled() && ( + + + + )} + {isAttributeViewerEnabled() && ( + + + + )} + + + Update Team Name + + Coming soon! + + + + + ); +}; + +export default WorkerCanvasTabs; diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/components/WorkerCanvas.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/components/WorkerCanvas.tsx new file mode 100644 index 000000000..54b29eced --- /dev/null +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/components/WorkerCanvas.tsx @@ -0,0 +1,9 @@ +import * as Flex from '@twilio/flex-ui'; + +import { FlexComponent } from '../../../../types/feature-loader'; +import WorkerCanvasTabs from '../../custom-components/WorkerCanvasTabs/WorkerCanvasTabs'; + +export const componentName = FlexComponent.WorkerCanvas; +export const componentHook = function addWorkerCanvasTabs(flex: typeof Flex, _manager: Flex.Manager) { + flex.WorkerCanvas.Content.add(); +}; diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/index.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/index.ts new file mode 100644 index 000000000..912ffbadb --- /dev/null +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/index.ts @@ -0,0 +1,10 @@ +import { FeatureDefinition } from '../../types/feature-loader'; +import { isFeatureEnabled, isSupervisorCapacityEnabled, isAttributeViewerEnabled } from './config'; +// @ts-ignore +import hooks from './flex-hooks/**/*.*'; + +export const register = (): FeatureDefinition => { + if (!isFeatureEnabled()) return {}; + if (!isSupervisorCapacityEnabled && !isAttributeViewerEnabled) return {}; + return { name: 'worker-canvas-tabs', hooks: typeof hooks === 'undefined' ? [] : hooks }; +}; diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/types/ServiceConfiguration.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/types/ServiceConfiguration.ts new file mode 100644 index 000000000..40f477cea --- /dev/null +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/types/ServiceConfiguration.ts @@ -0,0 +1,3 @@ +export default interface WorkerCanvasTabsConfig { + enabled: boolean; +} From 1b464dfa3936f24dd48703e404ff9dcca8121ac1 Mon Sep 17 00:00:00 2001 From: Ludo Vlieger Date: Tue, 10 Oct 2023 09:03:07 -0400 Subject: [PATCH 02/24] Add Skills tab, strings --- .../WorkerCanvasTabs/WorkerCanvasTabs.tsx | 32 ++++++++++++++++--- .../flex-hooks/components/WorkerCanvas.tsx | 4 +++ .../flex-hooks/paste-elements/index.ts | 5 +++ .../flex-hooks/strings/es-mx.json | 7 ++++ .../flex-hooks/strings/index.ts | 19 +++++++++++ 5 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/paste-elements/index.ts create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/strings/es-mx.json create mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/strings/index.ts diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx index 90dd9fced..bbcb24749 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx @@ -1,26 +1,48 @@ -import { IWorker, Template, templates } from '@twilio/flex-ui'; +import { Actions, IWorker, Template, templates, WorkerSkills } from '@twilio/flex-ui'; +import { useUID } from '@twilio-paste/core/uid-library'; import { useTabState, Box, Heading, Tab, Tabs, TabList, TabPanel, TabPanels } from '@twilio-paste/core'; import CapacityContainer from '../../../supervisor-capacity/custom-components/CapacityContainer'; import WorkerAttributes from '../../../attribute-viewer/custom-components/WorkerAttributes'; import { isSupervisorCapacityEnabled, isAttributeViewerEnabled } from '../../config'; +import { StringTemplates } from '../../flex-hooks/strings'; + +const handleClose = () => { + Actions.invokeAction('SelectWorkerInSupervisor', { worker: undefined }); + Actions.invokeAction('SetComponentState', { name: 'SupervisorCanvasTabs', state: { selectedTabName: undefined } }); +}; interface Props { worker?: IWorker; } const WorkerCanvasTabs = ({ worker }: Props) => { + const randomId = useUID(); const { ...tabState } = useTabState(); return ( - + - {isSupervisorCapacityEnabled() && Capacity} - {isAttributeViewerEnabled() && Attributes } - Team Name + +