Add template strings

twilio-professional-services · Oct 19, 2023 · 8b4e9bc · 8b4e9bc
1 parent 7940d8c
commit 8b4e9bc
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 31 deletions.
diff --git a/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx b/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx
@@ -7,20 +7,19 @@ import { Text } from '@twilio-paste/core/text';
 import { stringPrefix } from '../../flex-hooks/strings';
 
 interface OwnProps {
-  id: string;
   label: string;
   value: string;
   options: string[];
   onChangeHandler: (value: string) => void;
   disabled: boolean;
 }
 
-const AttributeSelect = ({ id, label, value, options, onChangeHandler, disabled }: OwnProps) => {
+const AttributeSelect = ({ label, value, options, onChangeHandler, disabled }: OwnProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     if (value !== 'none') onChangeHandler(value);
   };
-
+  const id = label.replace(' ', '-');
   return (
     <Tr key={id}>
       <Th scope="row" element="WORKER_DETAILS">

diff --git a/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx b/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx
@@ -7,19 +7,18 @@ import { Text } from '@twilio-paste/core/text';
 import { stringPrefix } from '../../flex-hooks/strings';
 
 interface OwnProps {
-  id: string;
   label: string;
   value: string;
   onChangeHandler: (value: string) => void;
   disabled: boolean;
 }
 
-const AttributeText = ({ id, label, value, onChangeHandler, disabled }: OwnProps) => {
+const AttributeText = ({ label, value, onChangeHandler, disabled }: OwnProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     onChangeHandler(value);
   };
-
+  const id = label.replace(' ', '-');
   return (
     <Tr key={id}>
       <Td element="WORKER_DETAILS">

diff --git a/...ibrary/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx b/...ibrary/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx
@@ -125,41 +125,33 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
             </Td>
             <Td element="WORKER_DETAILS">{worker?.fullName || 'Agent'}</Td>
           </Tr>
-
           <AttributeSelect
-            id="team_name"
             label="Team"
             value={teamName}
             options={getTeams()}
             onChangeHandler={handleTeamChange}
             disabled={!editTeam()}
           />
-
           <AttributeSelect
-            id="department_name"
             label="Department"
             value={departmentName}
             options={getDepartments()}
             onChangeHandler={handleDeptChange}
             disabled={!editDepartment()}
           />
-
           <AttributeText
-            id="location"
             label="Location"
             value={location}
             onChangeHandler={handleLocationChange}
             disabled={!editLocation()}
           />
           <AttributeText
-            id="manager"
             label="Manager"
             value={manager}
             onChangeHandler={handleManagerChange}
             disabled={!editManager()}
           />
           <AttributeSelect
-            id="schedule"
             label="Schedule"
             value={schedule}
             options={shiftOptions}
@@ -171,14 +163,7 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
       <hr />
       <FlexBox>
         <Box width="100%" backgroundColor="colorBackground" padding="space30" margin="space10">
-          <SwitchGroup
-            name="automation"
-            legend={
-              <Text as="span" color="currentColor">
-                Agent Automation
-              </Text>
-            }
-          >
+          <SwitchGroup name="automation" legend={<Template source={templates.PSWorkerDetailsAutomation} />}>
             <Switch
               value="auto-accept"
               checked={autoAccept}
@@ -204,14 +189,7 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
           </SwitchGroup>
         </Box>
         <Box width="100%" backgroundColor="colorBackground" padding="space30" margin="space10">
-          <SwitchGroup
-            name="permissions"
-            legend={
-              <Text as="span" color="currentColor">
-                Agent permissions
-              </Text>
-            }
-          >
+          <SwitchGroup name="permissions" legend={<Template source={templates.PSWorkerDetailsPermissions} />}>
             <Switch
               value="unit-leader"
               checked={unitLeader}

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
@@ -4,5 +4,7 @@
   "PSWorkerDetailsDepartment": "Departamento",
   "PSWorkerDetailsLocation": "Lugar",
   "PSWorkerDetailsManager": "Gerente",
-  "PSWorkerDetailsSchedule": "Horario"
+  "PSWorkerDetailsSchedule": "Horario",
+  "PSWorkerDetailsAutomation": "Automatización",
+  "PSWorkerDetailsPermissions": "Permisos"
 }
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
@@ -10,6 +10,8 @@ export enum StringTemplates {
   PSWorkerDetailsLocation = 'PSWorkerDetailsLocation',
   PSWorkerDetailsManager = 'PSWorkerDetailsManager',
   PSWorkerDetailsSchedule = 'PSWorkerDetailsSchedule',
+  PSWorkerDetailsAutomation = 'PSWorkerDetailsAutomation',
+  PSWorkerDetailsPermissions = 'PSWorkerDetailsPermissions',
 }
 
 export const stringHook = () => ({
@@ -20,6 +22,8 @@ export const stringHook = () => ({
     [StringTemplates.PSWorkerDetailsLocation]: 'Location',
     [StringTemplates.PSWorkerDetailsManager]: 'Manager',
     [StringTemplates.PSWorkerDetailsSchedule]: 'Schedule',
+    [StringTemplates.PSWorkerDetailsAutomation]: 'Automation',
+    [StringTemplates.PSWorkerDetailsPermissions]: 'Permissions',
   },
   'es-MX': esMX,
 });