Worker Canvas Tabs for Skills, Channel Capacity & Worker Attributes

docs/docs/feature-library/00_overview.md

@@ -57,6 +57,7 @@ The **Flex Project Template** comes with a set of features enabled by default wi
 | [Omni Channel Management](omni-channel-capacity-management)        | _method for mixing chat and voice channels_                                                         |
 | [Queues Stats Metrics](queues-stats-metrics)          | _add custom metrics columns to the Queues View_ |
 | [SIP Support](sip-support)                    | _adds call control functionality when using a non-WebRTC phone_                                     |
+| [Worker Details](worker-details)                    | _view or update Worker Attributes_     |
 
 </TabItem>
 <TabItem value="experimental" label="Experimental features">

docs/docs/feature-library/worker-details.md

@@ -0,0 +1,48 @@
+---
+sidebar_label: worker-details
+title: worker-details
+---
+
+# Overview
+This feature adds a Tab to the the Worker Canvas (Agent Activity & Skills) in the Teams View to allow Supervisors to edit worker attributes like `team`, `department`, other custom text attributes and boolean (true/false) attributes or worker settings. These boolean attributes can be used to configure settings (or permissions) for the worker which could be leveraged to enable or disable certain custom features in the PS Template.
+
+# How does it work?
+
+The Supervisor can select a worker to view or edit from the Teams view. The Worker Canvas side panel displays the Worker Skills and possibly one or more other features related to the worker (for example Supervisor Capacity) in different tabs.  The Details tab shows the agent name and the attributes.  The list of available **Teams** and **Departments** is read from the common configuration in the Admin UI.
+
+As noted in the [Flex insights docs](https://www.twilio.com/docs/flex/developer/insights/enhance-integration#enhance-agent-data)
+
+- The `team_id` attribute is required to display `team_name`.
+- The `department_id` attribute is required to display `department_name`.
+
+Due to these dependencies, this feature will simply set both the `team_id` and `team_name` to the same value.
+Similarly it will set `department_id` and `department_name` to the same value.
+
+The `text_attributes` property can be used to specify an array of worker attributes that should be updated using a Text Input box.  For example, `text_attributes: ['location', 'manager']` provides two Text Input fields to allow supervisors to update these two worker attributes.
+
+Use the `boolean_attributes` property to provide an array of boolean (true/false) attibutes which will be displayed as [Paste Switch components](https://paste.twilio.design/components/switch).  These settings can then be enabled or disabled for each worker. At this time, none of the other features in the PS Template leverage any custom worker settings yet, but with this new capability and a setting like `boolean_attributes: ['auto_accept]` you could enhance the [Agent Automation](agent-automation.md) feature to enable auto accept per worker. 
+
+Saving changes to the worker details updates the Worker Attributes using a Twilio serverless function.
+
+# Setup
+
+This feature can be enabled via the `flex-config` attributes. Just set the `worker_details` `enabled` flag to `true` and set up the desired configuration. 
+
+Use the `text_attributes` property to specify an array of editable text input fields.  
+
+Use the `boolean_attrbutes` property to provide an array of boolean (true/false) attributes that can be enabled (or disabled) per worker.
+
+```json
+    "worker_details": {
+        "enabled": false,
+        "edit_team": true,
+        "edit_department": true,
+        "text_attributes": [],
+        "boolean_attributes": []
+      },
+```
+
+# Flex User Experience
+
+![WorkerDetails](/img/features/worker-details/WorkerDetails.png)
+

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"
+            ]
           }
         }
       },
@@ -343,6 +352,16 @@
       "sip_support": {
         "enabled": false
       },
+      "worker_details": {
+        "enabled": true,
+        "edit_team": true,
+        "edit_department": true,
+        "text_attributes": [],
+        "boolean_attributes": []
+      },
+      "worker_canvas_tabs": {
+        "enabled": true
+      },
       "datadog_log_integration": {
         "enabled": false,
         "log_level": "info",
@@ -352,4 +371,4 @@
       }
     }
   }
-}
+}

plugin-flex-ts-template-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-flex-ts-template-v2",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "private": true,
   "scripts": {
     "test:watch": "jest --watch",
@@ -76,4 +76,4 @@
   "jest-junit": {
     "outputDirectory": "./test-results"
   }
-}
+}

plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/config.ts

@@ -4,10 +4,16 @@ import AttributeViewerConfig from './types/ServiceConfiguration';
 const { enabled = false, enabled_for_agents = false } =
   (getFeatureFlags()?.features?.attribute_viewer as AttributeViewerConfig) || {};
 
+const { enabled: workerCanvasTabsEnabled = false } = getFeatureFlags()?.features?.worker_canvas_tabs || {};
+
 export const isFeatureEnabled = () => {
   return enabled;
 };
 
 export const isEnabledForAgents = () => {
   return enabled_for_agents;
 };
+
+export const isWorkerCanvasTabsEnabled = () => {
+  return workerCanvasTabsEnabled;
+};

plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/custom-components/WorkerAttributes/WorkerAttributes.tsx

@@ -3,6 +3,7 @@ import { CodeBlock } from '@twilio-paste/core/code-block';
 
 import { SectionHeader } from './WorkerAttributes.Styles';
 import { StringTemplates } from '../../flex-hooks/strings';
+import { isWorkerCanvasTabsEnabled } from '../../config';
 
 interface Props {
   worker?: IWorker;
@@ -11,9 +12,11 @@ interface Props {
 const WorkerAttributes = ({ worker }: Props) => {
   return (
     <>
-      <SectionHeader>
-        <Template source={templates[StringTemplates.WorkerAttributesHeader]} />
-      </SectionHeader>
+      {isWorkerCanvasTabsEnabled() ? null : (
+        <SectionHeader>
+          <Template source={templates[StringTemplates.WorkerAttributesHeader]} />
+        </SectionHeader>
+      )}
       <CodeBlock variant="multi-line" language="json" code={JSON.stringify(worker?.attributes, null, 2)} />
     </>
   );

plugin-flex-ts-template-v2/src/feature-library/attribute-viewer/flex-hooks/components/WorkerCanvas.tsx

@@ -1,11 +1,18 @@
 import * as Flex from '@twilio/flex-ui';
+import { ContentFragmentProps } from '@twilio/flex-ui';
 
 import WorkerAttributes from '../../custom-components/WorkerAttributes';
 import { FlexComponent } from '../../../../types/feature-loader';
+import { StringTemplates } from '../strings';
+
+interface TabbedContentFragmentProps extends ContentFragmentProps {
+  tabTitle: string;
+}
 
 export const componentName = FlexComponent.WorkerCanvas;
-export const componentHook = function addAttributesToWorkerCanvas(flex: typeof Flex, _manager: Flex.Manager) {
-  flex.WorkerCanvas.Content.add(<WorkerAttributes key="worker-attributes" />, {
+export const componentHook = function addAttributesToWorkerCanvas() {
+  Flex.WorkerCanvas.Content.add(<WorkerAttributes key="worker-attributes" />, {
+    tabTitle: StringTemplates.WorkerAttributesHeader,
     sortOrder: 1000,
-  });
+  } as TabbedContentFragmentProps);
 };

plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/config.ts

@@ -3,10 +3,16 @@ import SupervisorCapacityConfig from './types/ServiceConfiguration';
 
 const { enabled = false, rules } = (getFeatureFlags()?.features?.supervisor_capacity as SupervisorCapacityConfig) || {};
 
+const { enabled: workerCanvasTabsEnabled = false } = getFeatureFlags()?.features?.worker_canvas_tabs || {};
+
 export const isFeatureEnabled = () => {
   return enabled;
 };
 
 export const getRules = () => {
   return rules;
 };
+
+export const isWorkerCanvasTabsEnabled = () => {
+  return workerCanvasTabsEnabled;
+};

plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/custom-components/CapacityContainer/CapacityContainer.tsx

@@ -9,7 +9,7 @@ import { SectionHeader } from './CapacityContainerStyles';
 import TaskRouterService, {
   WorkerChannelCapacityResponse,
 } from '../../../../utils/serverless/TaskRouter/TaskRouterService';
-import { getRules } from '../../config';
+import { getRules, isWorkerCanvasTabsEnabled } from '../../config';
 import CapacityChannel from '../CapacityChannel';
 import { StringTemplates } from '../../flex-hooks/strings';
 
@@ -131,9 +131,11 @@ export default function CapacityContainer(props: OwnProps) {
 
   return (
     <Stack orientation="vertical" spacing="space0">
-      <SectionHeader>
-        <Template source={templates[StringTemplates.ChannelCapacity]} />
-      </SectionHeader>
+      {isWorkerCanvasTabsEnabled() ? null : (
+        <SectionHeader>
+          <Template source={templates[StringTemplates.ChannelCapacity]} />
+        </SectionHeader>
+      )}
       {workerChannels.length > 0 &&
         workerChannels.map((workerChannel) => (
           <CapacityChannel

plugin-flex-ts-template-v2/src/feature-library/supervisor-capacity/flex-hooks/components/WorkerCanvas.tsx

@@ -1,9 +1,17 @@
 import * as Flex from '@twilio/flex-ui';
+import { ContentFragmentProps } from '@twilio/flex-ui';
 
 import CapacityContainer from '../../custom-components/CapacityContainer';
 import { FlexComponent } from '../../../../types/feature-loader';
+import { StringTemplates } from '../strings';
+
+interface TabbedContentFragmentProps extends ContentFragmentProps {
+  tabTitle: string;
+}
 
 export const componentName = FlexComponent.WorkerCanvas;
-export const componentHook = function addCapacityToWorkerCanvas(flex: typeof Flex, _manager: Flex.Manager) {
-  flex.WorkerCanvas.Content.add(<CapacityContainer key="worker-capacity-container" />);
+export const componentHook = function addCapacityToWorkerCanvas() {
+  Flex.WorkerCanvas.Content.add(<CapacityContainer key="worker-capacity-container" />, {
+    tabTitle: StringTemplates.ChannelCapacity,
+  } as TabbedContentFragmentProps);
 };

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/config.ts

@@ -0,0 +1,7 @@
+import { getFeatureFlags } from '../../utils/configuration';
+
+const { enabled = false } = getFeatureFlags()?.features?.worker_canvas_tabs || {};
+
+export const isFeatureEnabled = () => {
+  return enabled;
+};

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/custom-components/WorkerCanvasTabs/WorkerCanvasTabs.tsx

@@ -0,0 +1,74 @@
+import { Box } from '@twilio-paste/core/Box';
+import { Tabs, Tab, TabList, TabPanel, TabPanels, useTabState } from '@twilio-paste/core/tabs';
+import { useUID } from '@twilio-paste/core/uid-library';
+import { IWorker, Template, templates, ContentFragmentProps, WorkerSkills, Actions } from '@twilio/flex-ui';
+import React from 'react';
+
+import { StringTemplates } from '../../flex-hooks/strings';
+
+interface Props {
+  worker?: IWorker;
+  fragments: React.ReactElement<
+    ContentFragmentProps & {
+      children?: React.ReactNode;
+    },
+    string | React.JSXElementConstructor<any>
+  >[];
+}
+
+interface TabbedContentFragmentProps extends ContentFragmentProps {
+  tabTitle: string;
+}
+
+const hasTabTitle = (
+  fragment: React.ReactElement<
+    ContentFragmentProps & {
+      children?: React.ReactNode;
+    },
+    string | React.JSXElementConstructor<any>
+  >,
+): boolean => {
+  const title = (fragment.props as TabbedContentFragmentProps)?.tabTitle;
+  return !(title === '' || title === undefined || title === null);
+};
+
+const handleClose = () => {
+  Actions.invokeAction('SelectWorkerInSupervisor', { worker: undefined });
+  Actions.invokeAction('SetComponentState', { name: 'SupervisorCanvasTabs', state: { selectedTabName: undefined } });
+};
+
+const WorkerCanvasTabs = ({ worker, fragments }: Props) => {
+  const randomId = useUID();
+  const { ...tabState } = useTabState();
+
+  return (
+    <Box height="100%" borderLeftStyle="solid" borderColor="colorBorderWeak" borderWidth="borderWidth10">
+      <Tabs selectedId={randomId} baseId="options" state={tabState}>
+        <TabList aria-label="horizontal tabs">
+          <Tab id={randomId} element="WORKER_CANVAS_TAB">
+            <Template source={templates[StringTemplates.WorkerCanvasTabSkills]} />
+          </Tab>
+          {fragments.map((fragment) => (
+            <Tab key={(fragment.props.children as React.ReactElement).key} element="WORKER_CANVAS_TAB">
+              {hasTabTitle(fragment) ? (
+                <Template source={templates[(fragment.props as TabbedContentFragmentProps).tabTitle]} />
+              ) : (
+                (fragment.props.children as React.ReactElement).key
+              )}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          <TabPanel>{worker && <WorkerSkills key="skills" worker={worker} onClose={handleClose} />}</TabPanel>
+          {fragments.map((fragment) => (
+            <TabPanel key={(fragment.props.children as React.ReactElement).key}>
+              {React.createElement((fragment.props.children as any)?.type, { worker })}
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default WorkerCanvasTabs;

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/components/WorkerCanvas.tsx

@@ -0,0 +1,39 @@
+import * as Flex from '@twilio/flex-ui';
+import { Box } from '@twilio-paste/core/Box';
+import React from 'react';
+
+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) {
+  // Remove Agent Details header
+  flex.WorkerCanvas.Content.remove('profile-title');
+  // Remove Skills Caption and Workerskills
+  flex.WorkerCanvas.Content.remove('skills-title');
+  flex.WorkerCanvas.Content.remove('skills');
+
+  flex.WorkerCanvas.Content.addWrapper((OriginalComponent) => (originalProps) => {
+    // preserve the fragments from the WorkerCanvas
+    const fragments = flex.WorkerCanvas.Content.fragments
+      .concat([])
+      .toSorted((a, b) => (a.props.sortOrder || 10000) - (b.props.sortOrder || 9999));
+
+    // remove the fragments from the WorkerCanvas to prevent vertical rendering
+    fragments.forEach((fragment) => {
+      if (fragment?.props?.children && (fragment.props.children as React.ReactElement).key) {
+        const key = (fragment.props.children as React.ReactElement).key as string;
+        flex.WorkerCanvas.Content.remove(key);
+      }
+    });
+
+    return (
+      <>
+        <Box>
+          <OriginalComponent {...originalProps} />
+          <WorkerCanvasTabs key="worker-canvas-tabs" worker={originalProps.worker} fragments={fragments} />
+        </Box>
+      </>
+    );
+  });
+};

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/paste-elements/index.ts

@@ -0,0 +1,5 @@
+export const pasteElementHook = {
+  WORKER_CANVAS_TAB: {
+    fontSize: '12px',
+  },
+} as { [key: string]: any };

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/strings/es-mx.json

@@ -0,0 +1,3 @@
+{
+  "PSWorkerCanvasTabSkills": "Habilidades"
+}

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/flex-hooks/strings/index.ts

@@ -0,0 +1,13 @@
+import esMX from './es-mx.json';
+
+// Export the template names as an enum for better maintainability when accessing them elsewhere
+export enum StringTemplates {
+  WorkerCanvasTabSkills = 'PSWorkerCanvasTabSkills',
+}
+
+export const stringHook = () => ({
+  'en-US': {
+    [StringTemplates.WorkerCanvasTabSkills]: 'Skills',
+  },
+  'es-MX': esMX,
+});

plugin-flex-ts-template-v2/src/feature-library/worker-canvas-tabs/index.ts

@@ -0,0 +1,9 @@
+import { FeatureDefinition } from '../../types/feature-loader';
+import { isFeatureEnabled } from './config';
+// @ts-ignore
+import hooks from './flex-hooks/**/*.*';
+
+export const register = (): FeatureDefinition => {
+  if (!isFeatureEnabled()) return {};
+  return { name: 'worker-canvas-tabs', hooks: typeof hooks === 'undefined' ? [] : hooks };
+};