From 7940d8cfb4c0cdd46c35d0a08dec43d4300b0b52 Mon Sep 17 00:00:00 2001
From: Ludo Vlieger <lvlieger@twilio.com>
Date: Wed, 18 Oct 2023 16:36:47 -0400
Subject: [PATCH] Update components

---
 .../AttributeDisplay.tsx                      | 26 ------
 .../AttributeSelect.tsx                       | 32 ++++---
 .../WorkerDetailsContainer/AttributeText.tsx  |  6 +-
 .../WorkerDetailsContainer.tsx                | 85 +++++++++----------
 4 files changed, 64 insertions(+), 85 deletions(-)
 delete mode 100644 plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx

diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx
deleted file mode 100644
index 77ceb7de7..000000000
--- a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeDisplay.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Template, templates } from '@twilio/flex-ui';
-import { Label } from '@twilio-paste/core/label';
-import { Tr, Td } from '@twilio-paste/core/table';
-
-import { stringPrefix } from '../../flex-hooks/strings';
-
-interface OwnProps {
-  id: string;
-  label: string;
-  value: string;
-}
-
-const AttributeDisplay = ({ id, label, value }: OwnProps) => {
-  return (
-    <Tr key={id}>
-      <Td element="WORKER_DETAILS">
-        <Label htmlFor={id}>
-          <Template source={templates[`${stringPrefix}${label}`]} />
-        </Label>
-      </Td>
-      <Td element="WORKER_DETAILS">{value}</Td>
-    </Tr>
-  );
-};
-
-export default AttributeDisplay;
diff --git a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx
index 517e13130..87a2776eb 100644
--- a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeSelect.tsx
+++ b/plugin-flex-ts-template-v2/src/feature-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/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx
index 294effc46..bdf390c71 100644
--- a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/AttributeText.tsx
+++ b/plugin-flex-ts-template-v2/src/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/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx b/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx
index 76f2ecb7f..8eab01056 100644
--- a/plugin-flex-ts-template-v2/src/feature-library/worker-details/custom-components/WorkerDetailsContainer/WorkerDetailsContainer.tsx
+++ b/plugin-flex-ts-template-v2/src/feature-library/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 />