Update styling

twilio-professional-services · Oct 17, 2023 · b5e30a9 · b5e30a9
1 parent 7c979ac
commit b5e30a9
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 18 deletions.
diff --git a/flex-config/ui_attributes.common.json b/flex-config/ui_attributes.common.json
@@ -361,6 +361,7 @@
         "edit_department": true,
         "edit_location": true,
         "edit_manager": false,
+        "edit_schedule": true,
         "edit_unit_leader": true,
         "edit_coach": true
       },

diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/config.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-details/config.ts
@@ -7,6 +7,7 @@ const {
   edit_department = true,
   edit_location = true,
   edit_manager = false,
+  edit_schedule = true,
   edit_unit_leader = true,
   edit_coach = true,
 } = (getFeatureFlags()?.features?.worker_details as WorkerDetailsConfig) || {};
@@ -28,6 +29,9 @@ export const editLocation = () => {
 export const editManager = () => {
   return edit_manager;
 };
+export const editSchedule = () => {
+  return edit_schedule;
+};
 export const editUnitLeader = () => {
   return edit_unit_leader;
 };

diff --git a/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeBoolean.tsx b/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeBoolean.tsx
@@ -1,33 +1,29 @@
-import { Template, templates } from '@twilio/flex-ui';
 import { Label } from '@twilio-paste/core/label';
 import { Tr, Td } from '@twilio-paste/core/table';
 import { Switch } from '@twilio-paste/core/switch';
 
-import { stringPrefix } from '../../flex-hooks/strings';
-
 interface OwnProps {
   id: string;
   label: string;
+  description: string;
   value: boolean;
   enabled: boolean;
   onChangeHandler: (value: boolean) => void;
 }
 
 const AttributeBoolean = (props: OwnProps) => {
-  const { id, label, value, enabled, onChangeHandler } = props;
+  const { id, label, description, value, enabled, onChangeHandler } = props;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.checked;
     onChangeHandler(value);
   };
 
   return (
     <Tr key={id}>
-      <Td>
-        <Label htmlFor={id}>
-          <Template source={templates[`${stringPrefix}${label}`]} />
-        </Label>
+      <Td element="WORKER_DETAILS">
+        <Label htmlFor={id}>{description}</Label>
       </Td>
-      <Td>
+      <Td element="WORKER_DETAILS">
         <Switch checked={value} onChange={handleChange} disabled={!enabled} id={id} name={label}>
           {label}
         </Switch>

diff --git a/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx b/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx
@@ -13,12 +13,12 @@ interface OwnProps {
 const AttributeDisplay = ({ id, label, value }: OwnProps) => {
   return (
     <Tr key={id}>
-      <Td>
+      <Td element="WORKER_DETAILS">
         <Label htmlFor={id}>
           <Template source={templates[`${stringPrefix}${label}`]} />
         </Label>
       </Td>
-      <Td>{value}</Td>
+      <Td element="WORKER_DETAILS">{value}</Td>
     </Tr>
   );
 };

diff --git a/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx b/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx
@@ -21,12 +21,12 @@ const AttributeSelect = ({ id, label, value, options, onChangeHandler }: OwnProp
 
   return (
     <Tr key={id}>
-      <Th scope="row">
+      <Th scope="row" element="WORKER_DETAILS">
         <Label htmlFor={id}>
           <Template source={templates[`${stringPrefix}${label}`]} />
         </Label>
       </Th>
-      <Td>
+      <Td element="WORKER_DETAILS">
         <Select value={value} onChange={handleChange} id={id}>
           <Option key="none" value="none">
             Select {label}

diff --git a/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx b/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx
@@ -20,12 +20,12 @@ const AttributeText = ({ id, label, value, onChangeHandler }: OwnProps) => {
 
   return (
     <Tr key={id}>
-      <Td>
+      <Td element="WORKER_DETAILS">
         <Label htmlFor={id}>
           <Template source={templates[`${stringPrefix}${label}`]} />
         </Label>
       </Td>
-      <Td>
+      <Td element="WORKER_DETAILS">
         <Input type="text" id={id} value={value} onChange={handleChange} />
       </Td>
     </Tr>

diff --git a/...ibrary/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx b/...ibrary/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx
@@ -16,12 +16,15 @@ import {
   editManager,
   editUnitLeader,
   editCoach,
+  editSchedule,
 } from '../../config';
 import AttributeText from './AttributeText';
 import AttributeSelect from './AttributeSelect';
 import AttributeDisplay from './AttributeDisplay';
 import AttributeBoolean from './AttributeBoolean';
 
+const shiftOptions = ['Early', 'Regular', 'Late', 'Night'];
+
 interface OwnProps {
   worker: IWorker;
 }
@@ -34,6 +37,7 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
   const [manager, setManager] = useState('');
   const [unitLeader, setUnitLeader] = useState(false);
   const [coach, setCoach] = useState(false);
+  const [schedule, setSchedule] = useState('');
 
   useEffect(() => {
     if (worker) {
@@ -43,6 +47,7 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
       setManager(worker.attributes.manager || '');
       setUnitLeader(worker.attributes.unit_leader || false);
       setCoach(worker.attributes.coach || false);
+      setSchedule(worker.attributes.schedule || '');
     }
   }, [worker]);
 
@@ -66,6 +71,11 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
     setDepartmentName(dept);
   };
 
+  const handleScheduleChange = (value: string) => {
+    setChanged(true);
+    setSchedule(value);
+  };
+
   const handleUnitLeaderChange = (value: boolean) => {
     setChanged(true);
     setUnitLeader(value);
@@ -96,6 +106,7 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
         manager,
         unit_leader: unitLeader,
         coach,
+        schedule,
       };
       await TaskRouterService.updateWorkerAttributes(workerSid, JSON.stringify(updatedAttr));
       setChanged(false);
@@ -107,12 +118,12 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
       <Table variant="borderless">
         <TBody>
           <Tr key="agent_name">
-            <Td>
+            <Td element="WORKER_DETAILS">
               <Label htmlFor="name">
                 <Template source={templates.PSWorkerDetailsName} />
               </Label>
             </Td>
-            <Td>{worker?.fullName || 'Agent'}</Td>
+            <Td element="WORKER_DETAILS">{worker?.fullName || 'Agent'}</Td>
           </Tr>
           {editTeam() ? (
             <AttributeSelect
@@ -146,16 +157,29 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
           ) : (
             <AttributeDisplay id="manager" label="Manager" value={manager} />
           )}
+          {editSchedule() ? (
+            <AttributeSelect
+              id="schedule"
+              label="Schedule"
+              value={schedule}
+              options={shiftOptions}
+              onChangeHandler={handleScheduleChange}
+            />
+          ) : (
+            <AttributeDisplay id="schedule" label="Schedule" value={schedule} />
+          )}
           <AttributeBoolean
             id="lead"
             label="Unit Leader"
+            description=""
             value={unitLeader}
             onChangeHandler={handleUnitLeaderChange}
             enabled={editUnitLeader()}
           />
           <AttributeBoolean
             id="coach"
             label="Coach"
+            description=""
             value={coach}
             onChangeHandler={handleCoachChange}
             enabled={editCoach()}

diff --git a/...flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/paste-elements/index.ts b/...flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/paste-elements/index.ts
@@ -0,0 +1,6 @@
+export const pasteElementHook = {
+  WORKER_DETAILS: {
+    padding: 'space30',
+    borderStyle: 'none',
+  },
+} as { [key: string]: any };
diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/strings/es-mx.json b/plugin-flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/strings/es-mx.json
@@ -3,5 +3,6 @@
   "PSWorkerDetailsTeam": "Equipo",
   "PSWorkerDetailsDepartment": "Departamento",
   "PSWorkerDetailsLocation": "Lugar",
-  "PSWorkerDetailsManager": "Gerente"
+  "PSWorkerDetailsManager": "Gerente",
+  "PSWorkerDetailsSchedule": "Horario"
 }
diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/strings/index.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-details/flex-hooks/strings/index.ts
@@ -9,6 +9,7 @@ export enum StringTemplates {
   PSWorkerDetailsDepartment = 'PSWorkerDetailsDepartment',
   PSWorkerDetailsLocation = 'PSWorkerDetailsLocation',
   PSWorkerDetailsManager = 'PSWorkerDetailsManager',
+  PSWorkerDetailsSchedule = 'PSWorkerDetailsSchedule',
 }
 
 export const stringHook = () => ({
@@ -18,6 +19,7 @@ export const stringHook = () => ({
     [StringTemplates.PSWorkerDetailsDepartment]: 'Department',
     [StringTemplates.PSWorkerDetailsLocation]: 'Location',
     [StringTemplates.PSWorkerDetailsManager]: 'Manager',
+    [StringTemplates.PSWorkerDetailsSchedule]: 'Schedule',
   },
   'es-MX': esMX,
 });
diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/types/ServiceConfiguration.ts b/plugin-flex-ts-template-v2/src/feature-library/worker-details/types/ServiceConfiguration.ts
@@ -4,6 +4,7 @@ export default interface WorkerDetailsConfig {
   edit_department: boolean;
   edit_location: boolean;
   edit_manager: boolean;
+  edit_schedule: boolean;
   edit_unit_leader: boolean;
   edit_coach: boolean;
 }