twiliotwilio-flex

What is the Flex UI plugin manager string parameter name for the incoming task item "Incoming call from..." section?

I have a project to replace text found in a Flex UI with altered versions that contain custom context for team use. When creating a Flex plugin, I learned that manager strings will cover a lot of what I need.

So far I've been able to find replacements for everything I can see except for one remaining string I need to change (the actual target for my project) that currently reads, "Incoming call from queue MY_QUEUE". What is the message string parameter name for this? Here's a preview of what I have so far:

enter image description here

Code to replace from a starter TypeScript plugin:

import React from 'react';
import * as Flex from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';

import CustomTaskList from './components/CustomTaskList/CustomTaskList';

const PLUGIN_NAME = 'MyPlugin';

export default class MyPlugin extends FlexPlugin {
    constructor() {
        super(PLUGIN_NAME);
    }

    /**
     * This code is run when your plugin is being started
     * Use this to modify any UI components or attach to the actions framework
     *
     * @param flex { typeof Flex }
     */
    async init(flex: typeof Flex, manager: Flex.Manager): Promise<void> {
        const options: Flex.ContentFragmentProps = { sortOrder: -1 };
        
        // both task item and task canvas
        manager.strings.TaskHeaderLine = 'TaskHeaderLine';

        // task canvas
        manager.strings.TaskLineQueue = 'TaskLineQueue';
        manager.strings.TaskTabAgentIncomingLabel = 'TaskTabAgentIncomingLabel';
        manager.strings.TaskLineCallIncomingTitle = 'TaskLineCallIncomingTitle';
        manager.strings.TaskTabAgentInfoLabel = 'TaskTabAgentInfoLabel'; // my screenshot is out of date yet this replaces "Info" tab.

        // doesn't affect screenshot:
        manager.strings.NewTaskHeaderFirstLine = 'NewTaskHeaderFirstLine';
        manager.strings.TaskTabHeaderLine = 'TaskTabHeaderLine';
        manager.strings.TaskLineTitle = 'TaskLineTitle';
        manager.strings.NewTaskHeaderSecondLine = 'NewTaskHeaderSecondLine';
        manager.strings.QueueAgentsInQueue = 'QueueAgentsInQueue';
        manager.strings.TaskAssigned = 'TaskAssigned';
        manager.strings.TaskExtraInfo = 'TaskExtraInfo';
        manager.strings.TaskInfoPanelButtonStartConversation =
            'TaskInfoPanelButtonStartConversation';
        manager.strings.TaskLineCallAssigned = 'TaskLineCallAssigned';
        manager.strings.TaskLineCallTransferTitle = 'TaskLineCallTransferTitle';
        manager.strings.TaskHeaderStatusPending = 'TaskHeaderStatusPending';
        manager.strings.QueueHeaderTitle = 'QueueHeaderTitle';

        // missing that I need to replace:
        // "Incoming call from queue Eve..."

    }
}
Solution

  • Circling back, I found the answer by searching strings I was seeing in:

    node_modules/@twilio/flex-ui/bundle/twilio-flex.prod.js

    manager.strings.TaskLineSmsReserved = 'TaskLineSmsReserved';
manager.strings.TaskLineCallReserved = 'TaskLineCallReserved';

    I also have the option to append something to the end of each TaskListItem. Here's a crude example:

    flex.TaskListItem.Content.add(
    <div
        style={{
            backgroundColor: 'rgb(2, 99, 224)',
            color: '#FFF',
            padding: '10px',
        }}
        key="hereIsAUniqueKeyForSure"
    >
        We can also add custom content where we want. Here's a box that
        could add multiple lines of content as an option.
    </div>,
    {
        align: 'end',
        sortOrder: 1,
    }
);

    Output:

    enter image description here