diff --git a/docs/docs/feature-library/teams-view-enhancements.md b/docs/docs/feature-library/teams-view-enhancements.md index 16f512763..d384a5b64 100644 --- a/docs/docs/feature-library/teams-view-enhancements.md +++ b/docs/docs/feature-library/teams-view-enhancements.md @@ -6,7 +6,7 @@ title: teams-view-enhancements ## Overview In Flex, Supervisors can monitory agent activity in the [Teams View](https://www.twilio.com/docs/flex/end-user-guide/insights/monitor-agent-activity). The Teams View displays the agent's status and the tasks they are working on. Supervisors can also listen to live calls and view the chat/messaging conversations. -The Teams View can be modified by adding and removing columns in the [WorkersDataTable](https://www.twilio.com/docs/flex/developer/ui/components#add-columns-to-workersdatatable) to display some of the agent attributes or their skills. The TaskCard component can be enhanced to show different information for each task or to change it's visual appearance. +The Teams View can be modified by adding and removing columns in the [WorkersDataTable](https://www.twilio.com/docs/flex/developer/ui/components#add-columns-to-workersdatatable) to display some of the agent attributes. The TaskCard component can be enhanced to show different information for each task or to change it's visual appearance. ## How does it work? @@ -16,14 +16,6 @@ The workers skills array can be re-formatted and shown in an additional column i ### Highlight Tasks We can highlight tasks that have a long handle time by adding a colored border around the Task Card based on the task age. For example, if the task is older than 3 minutes (180 seconds) we can show a yellow border. And if the task age exceeds 5 minutes (300 seconds) we can show red border. This task highlighting may assist supervisors with observing how agents are performing, or if they are having challenges completing tasks within expected handling time ranges. -### Task Queue Name - -:::caution Deprecated -The task queue name is displayed on the task card by default in Flex UI 2.11 and later, so this option is no longer needed in these versions. -::: - -By default, the [SupervisorTaskCardHeader template string](https://www.twilio.com/docs/flex/developer/ui/v1/localization-and-templating#list-of-available-content-strings) displays the `{{task.defaultFrom}}` value which can be either the caller's phone number or the chat customer's name (identity). This specific task detail may not be useful for Supervisors so we could change that template string to `{{task.queueName}}` to be able to see which queues the agent is working in. - ### Teams View Data Tiles The Worker and Task data available in Redux for the Teams View can be aggregated by `team_name` attribute (if populated for all workers) and summarized in "Data Tiles" at the top of the page, similar to the Queues View. @@ -33,16 +25,12 @@ These custom Teams View data tiles are part of the combined [Metrics Data Tiles This feature can be enabled via the `flex-config` attributes. Just set the `teams_view_enhancements` `enabled` flag to `true` and set up the desired configuration. -In the list of `columns`, select which worker attributes (team, department, location, agent_skills) to display in the WorkersTable. - -By default the Teams View shows both the Calls and other Tasks for each worker. For a voice-only Flex implementation, you can remove the Tasks column by setting `other_tasks = false`. Likewise for chat/messaging only Flex implementations, you could remove the Calls column. +In the list of `columns`, select which worker attributes (team, department, location) to display in the WorkersTable. The `activity_icon` column display an activity indicator for each agent using the same activity configuration (icons & colors) from the [Metrics Data Tiles](metrics-data-tiles.md). To enable TaskCard highlighting based on the task age, set `highlight_handle_time: true` and specify the warning threshold (default 180 seconds) and "handle time exceeded" threshold (default 300 seconds). -To display the Task's Queue Name instead of the customer's phone number (or name), set the `display_task_queue_name: true`. - You can also enable the Task Summary tile to show a breakdown of the active tasks counts by Channel and Team. Select which channels to display by setting `taskCount: true`. When enabling the Team Activity data tile, also configure the activity names to match the TaskRouter Activities in your workspace. Note: The Teams View can only display up to 200 agents, so the worker data available for aggregation is limited to this data set. @@ -53,14 +41,10 @@ Note: The Teams View can only display up to 200 agents, so the worker data avail "highlight_handle_time": true, "handle_time_warning_threshold": 180, "handle_time_exceeded_threshold": 300, - "display_task_queue_name": false, "columns": { - "calls": true, - "other_tasks": true, "team": true, "department": false, "location": false, - "agent_skills": true, "activity_icon": true } } diff --git a/flex-config/ui_attributes.common.json b/flex-config/ui_attributes.common.json index b549b2fb7..ffc04a8d7 100644 --- a/flex-config/ui_attributes.common.json +++ b/flex-config/ui_attributes.common.json @@ -275,14 +275,10 @@ "highlight_handle_time": true, "handle_time_warning_threshold": 180, "handle_time_exceeded_threshold": 300, - "display_task_queue_name": false, "columns": { - "calls": true, - "other_tasks": true, "team": false, "department": false, "location": false, - "agent_skills": true, "activity_icon": false } }, diff --git a/plugin-flex-ts-template-v2/package-lock.json b/plugin-flex-ts-template-v2/package-lock.json index c451609ac..ccda29e4f 100644 --- a/plugin-flex-ts-template-v2/package-lock.json +++ b/plugin-flex-ts-template-v2/package-lock.json @@ -27,7 +27,7 @@ "@babel/preset-typescript": "^7.12.1", "@testing-library/react": "^12.1.5", "@twilio/flex-plugin-scripts": "7.1.2", - "@twilio/flex-ui": "^2.13.2", + "@twilio/flex-ui": "^2.14.0", "@types/jest": "^27.5.2", "@types/luxon": "^3.1.0", "@types/react-redux": "^7.1.1", @@ -59,9 +59,9 @@ } }, "node_modules/@apollo/client": { - "version": "3.9.11", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.11.tgz", - "integrity": "sha512-H7e9m7cRcFO93tokwzqrsbnfKorkpV24xU30hFH5u2g6B+c1DMo/ouyF/YrBPdrTzqxQCjTUmds/FLmJ7626GA==", + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.14.0.tgz", + "integrity": "sha512-0YQKKRIxiMlIou+SekQqdCo0ZTHxOcES+K8vKB53cIDpwABNR0P0yRzPgsbgcj3zRJniD93S/ontsnZsCLZrxQ==", "dev": true, "license": "MIT", "dependencies": { @@ -73,8 +73,7 @@ "hoist-non-react-statics": "^3.3.2", "optimism": "^0.18.0", "prop-types": "^15.7.2", - "rehackt": "0.0.6", - "response-iterator": "^0.2.6", + "rehackt": "^0.1.0", "symbol-observable": "^4.0.0", "ts-invariant": "^0.10.3", "tslib": "^2.3.0", @@ -82,9 +81,9 @@ }, "peerDependencies": { "graphql": "^15.0.0 || ^16.0.0", - "graphql-ws": "^5.5.5", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "graphql-ws": "^5.5.5 || ^6.0.3", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc", "subscriptions-transport-ws": "^0.9.0 || ^0.11.0" }, "peerDependenciesMeta": { @@ -4866,6 +4865,7 @@ "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz", "integrity": "sha512-O2yRJce1GOc6PAy3QxFM4NzFiWzvScDC1/5ihYBL6BUEVdq0XMWN01sppE+H6bBXbaFYipjwFLEWLg5PaSOThA==", "dev": true, + "peer": true, "engines": { "node": ">=8.0.0" } @@ -7943,16 +7943,16 @@ "license": "MIT" }, "node_modules/@twilio/flex-sdk": { - "version": "0.99.40-dev", - "resolved": "https://registry.npmjs.org/@twilio/flex-sdk/-/flex-sdk-0.99.40-dev.tgz", - "integrity": "sha512-q9h/RR3dDCaYKB7q4YZRQxGGMBfOrwtudaPg0RlrjQc6HRrAh88nYAi7IPCjEaT4CBlmUQceENYIfFTFN+VxgQ==", + "version": "0.99.45-dev", + "resolved": "https://registry.npmjs.org/@twilio/flex-sdk/-/flex-sdk-0.99.45-dev.tgz", + "integrity": "sha512-PcCorkNek922HXMFevgcdIJ5d3EnvGCqxKtRfrJuIS7C3Dh3WA50KENviW+3UHNqx7m1rDW6DwKxReXxC7YjnA==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@apollo/client": "^3.9.6", + "@apollo/client": "^3.13.8", "@segment/analytics-node": "1.3.0", "@twilio/conversations": "2.6.0", - "@twilio/voice-sdk": "^2.11.0", + "@twilio/voice-sdk": "^2.15.0", "buffer": "^6.0.3", "core-js": "^3.40.0", "crypto-js": "^4.2.0", @@ -7962,10 +7962,7 @@ "lodash": "^4.17.21", "loglevel": "^1.7.0", "query-string": "^6.2.0", - "reflect-metadata": "^0.1.13", - "rxjs": "^7.8.1", "twilio-taskrouter": "^2.1.0", - "twilsock": "^0.8.3", "ws": "^8.18.0" }, "engines": { @@ -8019,50 +8016,41 @@ "node": ">=14" } }, - "node_modules/@twilio/flex-sdk/node_modules/@twilio/conversations/node_modules/twilsock": { - "version": "0.12.2", - "resolved": "https://registry.npmjs.org/twilsock/-/twilsock-0.12.2.tgz", - "integrity": "sha512-7G59f2TCEnxcY2ZBCzaZOPmMDoxDrK9lMTiA7UvuiKca37Dljbdlu2EHI3+d7gU1JHkH5GNCmyxqJzSbZodwXA==", + "node_modules/@twilio/flex-sdk/node_modules/@twilio/voice-errors": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@twilio/voice-errors/-/voice-errors-1.7.0.tgz", + "integrity": "sha512-9TvniWpzU0iy6SYFAcDP+HG+/mNz2yAHSs7+m0DZk86lE+LoTB6J/ZONTPuxXrXWi4tso/DulSHuA0w7nIQtGg==", "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.14.5", - "@twilio/declarative-type-validator": "^0.1.11", - "@twilio/operation-retrier": "^4.0.7", - "core-js": "^3.17.3", - "iso8601-duration": "=1.2.0", - "javascript-state-machine": "^3.1.0", - "loglevel": "^1.6.3", - "platform": "^1.3.6", - "uuid": "^3.4.0", - "ws": "^5.2.3" - }, - "engines": { - "node": ">=14" - } + "license": "BSD-3-Clause" }, - "node_modules/@twilio/flex-sdk/node_modules/@twilio/conversations/node_modules/twilsock/node_modules/@twilio/declarative-type-validator": { - "version": "0.1.11", - "resolved": "https://registry.npmjs.org/@twilio/declarative-type-validator/-/declarative-type-validator-0.1.11.tgz", - "integrity": "sha512-yRAMLPD8j3k67UFvPeZvfTlKYuceiNq+iZ8a/ADzAbZMeaV0FMvsJmG97MH8yN/VdXY9hcscchsnc99bJ1sClw==", + "node_modules/@twilio/flex-sdk/node_modules/@twilio/voice-sdk": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/@twilio/voice-sdk/-/voice-sdk-2.15.0.tgz", + "integrity": "sha512-4FhRrUVJrek/U85F29G3+r5hbh7Lg2aapUE8jh/DnG0SiIktbW+MvFw2PxOwW0xVCbPigT7NHNo8/uzc3EmXkg==", "dev": true, - "license": "MIT", + "license": "Apache-2.0", "dependencies": { - "@babel/runtime": "^7.14.5", - "core-js": "^3.17.3" + "@twilio/voice-errors": "1.7.0", + "@types/events": "^3.0.3", + "events": "3.3.0", + "loglevel": "1.6.7" }, "engines": { - "node": ">=14" + "node": ">= 12" } }, - "node_modules/@twilio/flex-sdk/node_modules/@twilio/conversations/node_modules/ws": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.4.tgz", - "integrity": "sha512-fFCejsuC8f9kOSu9FYaOw8CdO68O3h5v0lg4p74o8JqWpwTf9tniOD+nOB78aWoVSS6WptVUmDrp/KPsMVBWFQ==", + "node_modules/@twilio/flex-sdk/node_modules/@twilio/voice-sdk/node_modules/loglevel": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz", + "integrity": "sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==", "dev": true, "license": "MIT", - "dependencies": { - "async-limiter": "~1.0.0" + "engines": { + "node": ">= 0.6.0" + }, + "funding": { + "type": "tidelift", + "url": "https://tidelift.com/subscription/pkg/npm-loglevel?utm_medium=referral&utm_source=npm_fund" } }, "node_modules/@twilio/flex-sdk/node_modules/loglevel": { @@ -8079,16 +8067,6 @@ "url": "https://tidelift.com/funding/github/npm/loglevel" } }, - "node_modules/@twilio/flex-sdk/node_modules/rxjs": { - "version": "7.8.2", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", - "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "tslib": "^2.1.0" - } - }, "node_modules/@twilio/flex-sdk/node_modules/twilio-sync": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/twilio-sync/-/twilio-sync-3.1.0.tgz", @@ -8124,7 +8102,7 @@ "node": ">=14" } }, - "node_modules/@twilio/flex-sdk/node_modules/twilio-sync/node_modules/twilsock": { + "node_modules/@twilio/flex-sdk/node_modules/twilsock": { "version": "0.12.2", "resolved": "https://registry.npmjs.org/twilsock/-/twilsock-0.12.2.tgz", "integrity": "sha512-7G59f2TCEnxcY2ZBCzaZOPmMDoxDrK9lMTiA7UvuiKca37Dljbdlu2EHI3+d7gU1JHkH5GNCmyxqJzSbZodwXA==", @@ -8146,32 +8124,18 @@ "node": ">=14" } }, - "node_modules/@twilio/flex-sdk/node_modules/twilio-sync/node_modules/ws": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.4.tgz", - "integrity": "sha512-fFCejsuC8f9kOSu9FYaOw8CdO68O3h5v0lg4p74o8JqWpwTf9tniOD+nOB78aWoVSS6WptVUmDrp/KPsMVBWFQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "async-limiter": "~1.0.0" - } - }, - "node_modules/@twilio/flex-sdk/node_modules/twilsock": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/twilsock/-/twilsock-0.8.3.tgz", - "integrity": "sha512-jS7sFoecgofYiRAYvinL3cYlwqOXkgtdb81q24H8mD2DNbnTwNQ6GQNURJ5GxjTYo/iSsgQjYVUs9lJaXU1uaA==", + "node_modules/@twilio/flex-sdk/node_modules/twilsock/node_modules/@twilio/declarative-type-validator": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@twilio/declarative-type-validator/-/declarative-type-validator-0.1.11.tgz", + "integrity": "sha512-yRAMLPD8j3k67UFvPeZvfTlKYuceiNq+iZ8a/ADzAbZMeaV0FMvsJmG97MH8yN/VdXY9hcscchsnc99bJ1sClw==", "dev": true, "license": "MIT", "dependencies": { - "javascript-state-machine": "^3.0.1", - "loglevel": "^1.6.3", - "operation-retrier": "^3.0.0", - "platform": "^1.3.6", - "uuid": "^3.2.1", - "ws": "^5.1.0" + "@babel/runtime": "^7.14.5", + "core-js": "^3.17.3" }, "engines": { - "node": ">=8" + "node": ">=14" } }, "node_modules/@twilio/flex-sdk/node_modules/twilsock/node_modules/ws": { @@ -8185,13 +8149,13 @@ } }, "node_modules/@twilio/flex-ui": { - "version": "2.13.2", - "resolved": "https://registry.npmjs.org/@twilio/flex-ui/-/flex-ui-2.13.2.tgz", - "integrity": "sha512-O7BPpfrjU6ytB6Or0/or4HNaAi9ywltQuE8JFRhEtlvN+75/XC4+jZiUj/mfWu2Y6DqO/hxGQESLchB728YJOg==", + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@twilio/flex-ui/-/flex-ui-2.14.0.tgz", + "integrity": "sha512-JgQyaKYHxsTQT6R8hgfRl5r8XNSJeSwZRPr99CC6Bfa+wnS2FIkcNkCvcsqZ/tswAnlykdD6toZlcz836uhi2Q==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@apollo/client": "3.9.11", + "@apollo/client": "^3.13.8", "@citrix/ucsdk": "4.0.2", "@dnd-kit/core": "6.0.8", "@dnd-kit/modifiers": "6.0.1", @@ -8205,7 +8169,7 @@ "@graphql-tools/utils": "^9.2.1", "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", - "@opentelemetry/api": "1.4.1", + "@opentelemetry/api": "1.9.0", "@opentelemetry/sdk-trace-base": "1.15.1", "@reduxjs/toolkit": "^1.6.0", "@twilio-paste/core": "^15.3.1", @@ -8214,7 +8178,7 @@ "@twilio-paste/icons": "^9.2.0", "@twilio-paste/lexical-library": "^4.2.0", "@twilio/conversations": "2.5.0", - "@twilio/flex-sdk": "0.99.40-dev", + "@twilio/flex-sdk": "0.99.45-dev", "@twilio/flex-ui-telemetry": "1.3.2", "@twilio/player": "^1.1.1", "@twilio/voice-sdk": "2.11.1", @@ -8228,7 +8192,7 @@ "eventemitter3": "4.0.0", "fuse.js": "^6.4.6", "google-libphonenumber": "3.2.6", - "graphql": "^16.7.1", + "graphql": "^16.8.2", "graphql-tag": "^2.12.6", "handlebars": "~4.7.7", "highcharts-react-official": "^3.1.0", @@ -8578,6 +8542,16 @@ "yjs": ">=13.5.22" } }, + "node_modules/@twilio/flex-ui/node_modules/@opentelemetry/api": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", + "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/@twilio/flex-ui/node_modules/@twilio-paste/alert-dialog": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@twilio-paste/alert-dialog/-/alert-dialog-5.0.0.tgz", @@ -9147,6 +9121,13 @@ "@types/node": "*" } }, + "node_modules/@types/events": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.3.tgz", + "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/express": { "version": "4.17.23", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz", @@ -24657,13 +24638,6 @@ "node": ">=0.10.0" } }, - "node_modules/reflect-metadata": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.14.tgz", - "integrity": "sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -24841,9 +24815,9 @@ } }, "node_modules/rehackt": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.6.tgz", - "integrity": "sha512-l3WEzkt4ntlEc/IB3/mF6SRgNHA6zfQR7BlGOgBTOmx7IJJXojDASav+NsgXHFjHn+6RmwqsGPFgZpabWpeOdw==", + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz", + "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==", "dev": true, "license": "MIT", "peerDependencies": { @@ -25159,16 +25133,6 @@ "node": ">=10" } }, - "node_modules/response-iterator": { - "version": "0.2.25", - "resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.25.tgz", - "integrity": "sha512-15K4tT8X35W0zJ5bv3fAf4eEKqOwS7yzd+Bg6YEE9NLltVbPbuTcYo3J2AP6AMQGMJmJkFCG421+kP2/iCBfDA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8" - } - }, "node_modules/responselike": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz", diff --git a/plugin-flex-ts-template-v2/package.json b/plugin-flex-ts-template-v2/package.json index 6f04d3d0f..0f8c15f32 100644 --- a/plugin-flex-ts-template-v2/package.json +++ b/plugin-flex-ts-template-v2/package.json @@ -38,7 +38,7 @@ "@babel/preset-typescript": "^7.12.1", "@testing-library/react": "^12.1.5", "@twilio/flex-plugin-scripts": "7.1.2", - "@twilio/flex-ui": "^2.13.2", + "@twilio/flex-ui": "^2.14.0", "@types/jest": "^27.5.2", "@types/luxon": "^3.1.0", "@types/react-redux": "^7.1.1", diff --git a/plugin-flex-ts-template-v2/src/feature-library/supervisor-barge-coach/flex-hooks/components/WorkersDataTable.tsx b/plugin-flex-ts-template-v2/src/feature-library/supervisor-barge-coach/flex-hooks/components/WorkersDataTable.tsx index 1bfdb4104..7c93b8726 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/supervisor-barge-coach/flex-hooks/components/WorkersDataTable.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/supervisor-barge-coach/flex-hooks/components/WorkersDataTable.tsx @@ -9,7 +9,7 @@ export const componentHook = function addAgentAssistanceTeamsIcon(flex: typeof F if (!isAgentAssistanceEnabled()) return; flex.WorkersDataTable.Content.add( ( diff --git a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/config.ts b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/config.ts index 5c50a4bd2..2b2cdd741 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/config.ts +++ b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/config.ts @@ -6,16 +6,12 @@ const { highlight_handle_time = true, handle_time_warning_threshold = 180, handle_time_exceeded_threshold = 300, - display_task_queue_name = false, } = (getFeatureFlags()?.features?.teams_view_enhancements as TeamsViewEnhancementsConfig) || {}; const { - calls = true, - other_tasks = true, team = true, department = false, location = false, - agent_skills = true, activity_icon = false, } = getFeatureFlags().features?.teams_view_enhancements?.columns || {}; @@ -38,12 +34,6 @@ const { teams = [] } = getFeatureFlags().common || {}; export const isFeatureEnabled = () => { return enabled; }; -export const isCallsColumnEnabled = () => { - return enabled && calls; -}; -export const isOtherTasksColumnEnabled = () => { - return enabled && other_tasks; -}; export const isTeamColumnEnabled = () => { return enabled && team; }; @@ -53,9 +43,6 @@ export const isDepartmentColumnEnabled = () => { export const isLocationColumnEnabled = () => { return enabled && location; }; -export const isAgentSkillsColumnEnabled = () => { - return enabled && agent_skills; -}; export const isActivityIconEnabled = () => { return enabled && activity_icon; }; @@ -68,9 +55,6 @@ export const getHTWarningThreshold = () => { export const getHTExceededThreshold = () => { return handle_time_exceeded_threshold; }; -export const isDisplayTaskQueueNameEnabled = () => { - return enabled && display_task_queue_name; -}; export const getTeams = () => { return teams; diff --git a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TaskCardWrapper.tsx b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TaskCardWrapper.tsx index 30214c932..0f6835f81 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TaskCardWrapper.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TaskCardWrapper.tsx @@ -3,19 +3,10 @@ import * as Flex from '@twilio/flex-ui'; import { FlexComponent } from '../../../../types/feature-loader'; import { TaskCardBox, TaskCardInnerBox } from './TaskCardWrapper.Styles'; -import { - isHTHighlightEnabled, - getHTWarningThreshold, - getHTExceededThreshold, - isDisplayTaskQueueNameEnabled, -} from '../../config'; +import { isHTHighlightEnabled, getHTWarningThreshold, getHTExceededThreshold } from '../../config'; export const componentName = FlexComponent.TeamsView; -export const componentHook = function addTaskCardWrapper(flex: typeof Flex, manager: Flex.Manager) { - if (isDisplayTaskQueueNameEnabled()) { - // instead of {{task.defaultFrom}}, show the queue name on the Task Card - manager.strings.SupervisorTaskCardHeader = '{{task.queueName}}'; - } +export const componentHook = function addTaskCardWrapper(flex: typeof Flex) { if (isHTHighlightEnabled()) { flex.Supervisor.TaskCard.Content.addWrapper((Original) => (originalProps) => { const now = new Date(); diff --git a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TeamsViewColumns.tsx b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TeamsViewColumns.tsx index e9801001d..dda8fd850 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TeamsViewColumns.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/flex-hooks/components/TeamsViewColumns.tsx @@ -5,12 +5,9 @@ import { CustomWorkerAttributes } from '../../../../types/task-router/Worker'; import { FlexComponent } from '../../../../types/feature-loader'; import { StringTemplates } from '../strings'; import { - isCallsColumnEnabled, - isOtherTasksColumnEnabled, isTeamColumnEnabled, isDepartmentColumnEnabled, isLocationColumnEnabled, - isAgentSkillsColumnEnabled, isActivityIconEnabled, getAgentActivityConfig, } from '../../config'; @@ -23,23 +20,13 @@ interface WorkerItem { }; } const activityConfig = getAgentActivityConfig(); -const getSkills = (item: WorkerItem) => { - if (!item.worker?.attributes?.routing?.skills) { - return '-'; - } - const skillsStr = item.worker.attributes.routing.skills.join(', '); - return skillsStr.length > 100 ? `${skillsStr.substring(0, 100)}...` : skillsStr; -}; export const componentName = FlexComponent.TaskCanvasHeader; export const componentHook = function addWorkersDataTableColumns(flex: typeof Flex, manager: Flex.Manager) { - if (!isCallsColumnEnabled()) flex.WorkersDataTable.Content.remove('calls'); - if (!isOtherTasksColumnEnabled()) flex.WorkersDataTable.Content.remove('tasks'); - flex.WorkersDataTable.Content.add( ( @@ -49,7 +36,7 @@ export const componentHook = function addWorkersDataTableColumns(flex: typeof Fl ); flex.WorkersDataTable.Content.add( item.worker.attributes.team_name} />, @@ -57,7 +44,7 @@ export const componentHook = function addWorkersDataTableColumns(flex: typeof Fl ); flex.WorkersDataTable.Content.add( item.worker.attributes.department_name} />, @@ -65,18 +52,10 @@ export const componentHook = function addWorkersDataTableColumns(flex: typeof Fl ); flex.WorkersDataTable.Content.add( item.worker.attributes.location} />, { sortOrder: 6, if: () => isLocationColumnEnabled() }, ); - flex.WorkersDataTable.Content.add( - getSkills(item)} - />, - { sortOrder: 7, if: () => isAgentSkillsColumnEnabled() }, - ); }; diff --git a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/types/ServiceConfiguration.ts b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/types/ServiceConfiguration.ts index a8e3fb57b..5880e3811 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/types/ServiceConfiguration.ts +++ b/plugin-flex-ts-template-v2/src/feature-library/teams-view-enhancements/types/ServiceConfiguration.ts @@ -3,15 +3,10 @@ export default interface TeamsViewEnhancementsConfig { highlight_handle_time: boolean; handle_time_warning_threshold: number; handle_time_exceeded_threshold: number; - display_task_queue_name: boolean; columns: { - calls: boolean; - other_tasks: boolean; team: boolean; department: boolean; location: boolean; - agent_skills: boolean; - capacity: boolean; activity_icon: boolean; }; }