Update components

twilio-professional-services · Oct 18, 2023 · 7940d8c · 7940d8c
1 parent 453c3f8
commit 7940d8c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 85 deletions.
diff --git a/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx b/...ture-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx
diff --git a/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx b/...ature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx
@@ -2,6 +2,7 @@ import { Template, templates } from '@twilio/flex-ui';
 import { Select, Option } from '@twilio-paste/core/select';
 import { Label } from '@twilio-paste/core/label';
 import { Tr, Th, Td } from '@twilio-paste/core/table';
+import { Text } from '@twilio-paste/core/text';
 
 import { stringPrefix } from '../../flex-hooks/strings';
 
@@ -11,9 +12,10 @@ interface OwnProps {
   value: string;
   options: string[];
   onChangeHandler: (value: string) => void;
+  disabled: boolean;
 }
 
-const AttributeSelect = ({ id, label, value, options, onChangeHandler }: OwnProps) => {
+const AttributeSelect = ({ id, label, value, options, onChangeHandler, disabled }: OwnProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     if (value !== 'none') onChangeHandler(value);
@@ -27,18 +29,22 @@ const AttributeSelect = ({ id, label, value, options, onChangeHandler }: OwnProp
         </Label>
       </Th>
       <Td element="WORKER_DETAILS">
-        <Select value={value} onChange={handleChange} id={id}>
-          <Option key="none" value="none">
-            Select {label}
-          </Option>
-          {options.map((option) => {
-            return (
-              <Option key={option} value={option}>
-                {option}
-              </Option>
-            );
-          })}
-        </Select>
+        {disabled ? (
+          <Text as="p">{value}</Text>
+        ) : (
+          <Select value={value} onChange={handleChange} id={id}>
+            <Option key="none" value="none">
+              Select {label}
+            </Option>
+            {options.map((option) => {
+              return (
+                <Option key={option} value={option}>
+                  {option}
+                </Option>
+              );
+            })}
+          </Select>
+        )}
       </Td>
     </Tr>
   );

diff --git a/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx b/...feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx
@@ -2,6 +2,7 @@ import { Template, templates } from '@twilio/flex-ui';
 import { Input } from '@twilio-paste/core/input';
 import { Label } from '@twilio-paste/core/label';
 import { Tr, Td } from '@twilio-paste/core/table';
+import { Text } from '@twilio-paste/core/text';
 
 import { stringPrefix } from '../../flex-hooks/strings';
 
@@ -10,9 +11,10 @@ interface OwnProps {
   label: string;
   value: string;
   onChangeHandler: (value: string) => void;
+  disabled: boolean;
 }
 
-const AttributeText = ({ id, label, value, onChangeHandler }: OwnProps) => {
+const AttributeText = ({ id, label, value, onChangeHandler, disabled }: OwnProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     onChangeHandler(value);
@@ -26,7 +28,7 @@ const AttributeText = ({ id, label, value, onChangeHandler }: OwnProps) => {
         </Label>
       </Td>
       <Td element="WORKER_DETAILS">
-        <Input type="text" id={id} value={value} onChange={handleChange} />
+        {disabled ? <Text as="p">{value}</Text> : <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
@@ -25,7 +25,6 @@ import {
 } from '../../config';
 import AttributeText from './AttributeText';
 import AttributeSelect from './AttributeSelect';
-import AttributeDisplay from './AttributeDisplay';
 
 const shiftOptions = ['Early', 'Regular', 'Late', 'Night'];
 
@@ -126,49 +125,47 @@ const WorkerDetailsContainer = ({ worker }: OwnProps) => {
             </Td>
             <Td element="WORKER_DETAILS">{worker?.fullName || 'Agent'}</Td>
           </Tr>
-          {editTeam() ? (
-            <AttributeSelect
-              id="team_name"
-              label="Team"
-              value={teamName}
-              options={getTeams()}
-              onChangeHandler={handleTeamChange}
-            />
-          ) : (
-            <AttributeDisplay id="team_name" label="Team" value={teamName} />
-          )}
-          {editDepartment() ? (
-            <AttributeSelect
-              id="department_name"
-              label="Department"
-              value={departmentName}
-              options={getDepartments()}
-              onChangeHandler={handleDeptChange}
-            />
-          ) : (
-            <AttributeDisplay id="department_name" label="Department" value={departmentName} />
-          )}
-          {editLocation() ? (
-            <AttributeText id="location" label="Location" value={location} onChangeHandler={handleLocationChange} />
-          ) : (
-            <AttributeDisplay id="location" label="Location" value={location} />
-          )}
-          {editManager() ? (
-            <AttributeText id="manager" label="Manager" value={manager} onChangeHandler={handleManagerChange} />
-          ) : (
-            <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} />
-          )}
+
+          <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}
+            onChangeHandler={handleScheduleChange}
+            disabled={!editSchedule()}
+          />
         </TBody>
       </Table>
       <hr />