Skip to content

Commit

Permalink
Configurable attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ldvlgr
ldvlgr committed Oct 20, 2023
1 parent 28596c9 commit 12f4640
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 120 deletions.
22 changes: 3 additions & 19 deletions plugin-flex-ts-template-v2/src/feature-library/worker-details/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ const {
enabled = false,
edit_team = true,
edit_department = true,
edit_location = true,
edit_manager_name = false,
edit_auto_accept = true,
edit_auto_wrapup = true,
edit_unit_leader = true,
custom_attributes = ['location', 'manager_name'],
} = (getFeatureFlags()?.features?.worker_details as WorkerDetailsConfig) || {};

const { teams = [], departments = [] } = getFeatureFlags().common || {};
Expand All @@ -23,20 +19,8 @@ export const editTeam = () => {
export const editDepartment = () => {
return edit_department;
};
export const editLocation = () => {
return edit_location;
};
export const editManagerName = () => {
return edit_manager_name;
};
export const editAutoAccept = () => {
return edit_auto_accept;
};
export const editAutoWrapup = () => {
return edit_auto_wrapup;
};
export const editUnitLeader = () => {
return edit_unit_leader;
export const getCustomAttributes = () => {
return custom_attributes;
};
export const getTeams = () => {
return teams;
Expand Down
29 changes: 29 additions & 0 deletions ...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeCustom.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Input } from '@twilio-paste/core/input';
import { Label } from '@twilio-paste/core/label';
import { Tr, Td } from '@twilio-paste/core/table';

interface OwnProps {
label: string;
value: string;
onChangeHandler: (key: string, value: string) => void;
}

const AttributeCustom = ({ label, value, onChangeHandler }: OwnProps) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
onChangeHandler(id, value);
};
const id = label.replace(' ', '_');
return (
<Tr key={id}>
<Td element="WORKER_DETAILS">
<Label htmlFor={id}>{label}</Label>
</Td>
<Td element="WORKER_DETAILS">
<Input type="text" id={id} value={value} onChange={handleChange} />
</Td>
</Tr>
);
};

export default AttributeCustom;
125 changes: 29 additions & 96 deletions ...ibrary/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
/* eslint-disable sonarjs/no-unused-collection */
import { IWorker, Template, templates } from '@twilio/flex-ui';
import React, { useState, useEffect } from 'react';
import { Flex as FlexBox } from '@twilio-paste/core/flex';
import { Box } from '@twilio-paste/core/box';
import { Button } from '@twilio-paste/core/button';
import { Label } from '@twilio-paste/core/label';
import { Stack } from '@twilio-paste/core/stack';
import { Table, TBody, Tr, Td } from '@twilio-paste/core/table';
import { Switch, SwitchGroup } from '@twilio-paste/core/switch';

import TaskRouterService from '../../../../utils/serverless/TaskRouter/TaskRouterService';
import {
getTeams,
getDepartments,
editTeam,
editDepartment,
editLocation,
editManagerName,
editUnitLeader,
editAutoAccept,
editAutoWrapup,
} from '../../config';
import AttributeText from './AttributeText';
import { getTeams, getDepartments, editTeam, editDepartment, getCustomAttributes } from '../../config';
import AttributeSelect from './AttributeSelect';
import AttributeCustom from './AttributeCustom';

interface OwnProps {
worker: IWorker;
Expand All @@ -31,34 +20,24 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
const [changed, setChanged] = useState(false);
const [teamName, setTeamName] = useState('');
const [departmentName, setDepartmentName] = useState('');
const [location, setLocation] = useState('');
const [managerName, setManagerName] = useState('');
const [unitLeader, setUnitLeader] = useState(false);
const [autoAccept, setAutoAccept] = useState(false);
const [autoWrapup, setAutoWrapup] = useState(false);
const [otherAttributes, setOtherAttributes] = useState({} as any);

const attributeNames = getCustomAttributes();
useEffect(() => {
if (worker) {
setTeamName(worker.attributes.team_name || '');
setDepartmentName(worker.attributes.department_name || '');
setLocation(worker.attributes.location || '');
setManagerName(worker.attributes.manager_name || '');
setUnitLeader(worker.attributes.unit_leader || false);
setAutoAccept(worker.attributes.auto_accept || false);
setAutoWrapup(worker.attributes.auto_Wrapup || false);
const other = {} as any;
Object.keys(worker.attributes).forEach((key: string) => {
if (attributeNames.includes(key)) {
other[key] = worker.attributes[key];
}
});

setOtherAttributes(other);
}
}, [worker]);

const handleLocationChange = (value: string) => {
if (location !== value) setChanged(true);
setLocation(value);
};

const handleManagerChange = (value: string) => {
if (managerName !== value) setChanged(true);
setManagerName(value);
};

const handleTeamChange = (team: string) => {
setChanged(true);
setTeamName(team);
Expand All @@ -69,6 +48,12 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
setDepartmentName(dept);
};

const handleOtherChange = (key: string, value: string) => {
setChanged(true);
const attributes = { ...otherAttributes, [key]: value };
setOtherAttributes(attributes);
};

// See the notes in our Flex insights docs
// https://www.twilio.com/docs/flex/developer/insights/enhance-integration
// The team_id attribute is required to display team_name.
Expand All @@ -86,12 +71,8 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
team_name: teamName,
department_id: departmentName,
department_name: departmentName,
location,
manager_name: managerName,
unit_leader: unitLeader,
auto_accept: autoAccept,
auto_wrapup: autoWrapup,
};
...otherAttributes,
} as any;
await TaskRouterService.updateWorkerAttributes(workerSid, JSON.stringify(updatedAttr));
setChanged(false);
}
Expand Down Expand Up @@ -123,64 +104,16 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
onChangeHandler={handleDeptChange}
disabled={!editDepartment()}
/>
<AttributeText
label="Location"
value={location}
onChangeHandler={handleLocationChange}
disabled={!editLocation()}
/>
<AttributeText
label="Manager"
value={managerName}
onChangeHandler={handleManagerChange}
disabled={!editManagerName()}
/>
{attributeNames.map((attr) => (
<AttributeCustom
key={attr}
label={attr}
value={otherAttributes[attr] || ''}
onChangeHandler={handleOtherChange}
/>
))}
</TBody>
</Table>
<hr />
<FlexBox>
<Box width="100%" backgroundColor="colorBackground" padding="space30" margin="space10">
<SwitchGroup name="automation" legend={<Template source={templates.PSWorkerDetailsAutomation} />}>
<Switch
value="auto-accept"
checked={autoAccept}
disabled={!editAutoAccept()}
onChange={() => {
setAutoAccept(!autoAccept);
setChanged(true);
}}
>
Auto Accept
</Switch>
<Switch
value="auto-wrapup"
checked={autoWrapup}
disabled={!editAutoWrapup()}
onChange={() => {
setAutoWrapup(!autoWrapup);
setChanged(true);
}}
>
Auto Accept
</Switch>
</SwitchGroup>
</Box>
<Box width="100%" backgroundColor="colorBackground" padding="space30" margin="space10">
<SwitchGroup name="permissions" legend={<Template source={templates.PSWorkerDetailsPermissions} />}>
<Switch
value="unit-leader"
checked={unitLeader}
disabled={!editUnitLeader()}
onChange={() => {
setUnitLeader(!unitLeader);
setChanged(true);
}}
>
Unit Leader
</Switch>
</SwitchGroup>
</Box>
</FlexBox>
<FlexBox hAlignContent="right" margin="space50">
<Stack orientation="horizontal" spacing="space30">
<Button variant="primary" id="saveButton" onClick={saveWorkerAttributes} disabled={!changed}>
Expand Down
6 changes: 1 addition & 5 deletions plugin-flex-ts-template-v2/src/feature-library/worker-details/types/ServiceConfiguration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,5 @@ export default interface WorkerDetailsConfig {
enabled: boolean;
edit_team: boolean;
edit_department: boolean;
edit_location: boolean;
edit_manager_name: boolean;
edit_auto_accept: boolean;
edit_auto_wrapup: boolean;
edit_unit_leader: boolean;
custom_attributes: string[];
}

0 comments on commit 12f4640

Please sign in to comment.