@pega/custom-dx-components 0.23.10 → 0.23.11

package/src/tasks/create/templates/Launchpad/Widget/CASE/mock.stories.js.mustache

@@ -0,0 +1,390 @@
+const historyData = {
+  data: {
+    fetchDateTime: '2023-01-18T12:04:56.517Z',
+    pxObjClass: 'Pega-API-DataExploration-Data',
+    resultCount: 31,
+    data: [
+      {
+        CreateDateTime: '2023-01-13T21:46:33.339Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214633.339 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214633.339 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:33.332Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214633.332 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214633.332 GMT',
+        pxLongitude: null,
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:32.005Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214632.005 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214632.005 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:31.998Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.998 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.998 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:31.175Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.175 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.175 GMT',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:31.168Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214631.168 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214631.168 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:29.893Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214629.893 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214629.893 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:29.887Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214629.887 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214629.887 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:28.248Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214628.248 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214628.248 GMT',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:28.242Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214628.242 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214628.242 GMT',
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:08.399Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214608.399 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214608.399 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:46:08.393Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214608.393 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214608.393 GMT',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:07.584Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214607.584 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214607.584 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:07.579Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214607.579 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214607.579 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:06.262Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214606.262 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214606.262 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:46:06.256Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214606.256 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214606.256 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:57.503Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214557.503 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214557.503 GMT',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:57.496Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214557.496 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214557.496 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:36.250Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214536.250 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214536.250 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:36.244Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214536.244 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214536.244 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:35.364Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214535.364 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214535.364 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:35.356Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214535.356 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214535.356 GMT',
+        pxLongitude: null,
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:33.224Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214533.224 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214533.224 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:33.218Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214533.218 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214533.218 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' removed via ticket.",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:32.436Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214532.436 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214532.436 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:32.430Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214532.430 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214532.430 GMT',
+        MessageText: "Assignment to 'complete task' completed by performing a 'EmbeddedData'.",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        CreateDateTime: '2023-01-13T21:45:25.003Z',
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214525.003 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214525.003 GMT',
+        pxLongitude: null,
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:24.994Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214524.994 GMT',
+        pxLongitude: null,
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214524.994 GMT',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assignment to 'complete task' completed by performing a 'Select Test'.",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:23.570Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.570 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.570 GMT',
+        pxLongitude: null,
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        MessageText: "Assigned to User DigV2 to 'complete task' ",
+        pyMemo: null,
+        pxLatitude: null
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:23.563Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.563 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.563 GMT',
+        pxLongitude: null,
+        MessageText: 'ChangeStageAutomatic\tCreate\tPick Test',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pxLatitude: null,
+        pyMemo: 'ChangeStageAutomatic\tCreate\tPick Test'
+      },
+      {
+        pxObjClass: 'History-DXIL-DigV2-Work',
+        CreateDateTime: '2023-01-13T21:45:23.550Z',
+        PerformerID: 'User DigV2',
+        pxInsName: 'DXIL-DIGV2-WORK C-7430!20230113T214523.550 GMT',
+        pzInsKey: 'HISTORY-DXIL-DIGV2-WORK DXIL-DIGV2-WORK C-7430!20230113T214523.550 GMT',
+        pxLongitude: null,
+        MessageText: 'Item created.',
+        pxHistoryForReference: 'DXIL-DIGV2-WORK C-7430',
+        pyMemo: null,
+        pxLatitude: null
+      }
+    ],
+    hasMoreResults: false
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '1328',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};
+export default historyData;

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.jsx.mustache

@@ -0,0 +1,282 @@
+/* eslint-disable no-undef */
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  useOuterEvent,
+  useElement,
+  Progress,
+  FormField,
+  useTheme
+} from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { EmailDisplay } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import Avatar from './Avatar.jsx';
+
+const Operator = (props) => {
+  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [popoverTarget, setPopoverTarget] = useState(null);
+  const [popoverEl, setPopoverEl] = useElement(null);
+  const [popoverContent, setpopoverContent] = useState(null);
+  const theme = useTheme();
+
+  /* If the id has changed, we need to reset the popover */
+  useEffect(() => {
+    setPopoverTarget(null);
+  }, [id]);
+
+
+  {{! pick new delimiteres for mustache }}
+  {{=<% %>=}}
+
+  const OperatorPreview = () => {
+    let localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    let localeCategory = 'Operator';
+    setpopoverContent(
+      <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
+    );
+    if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
+      const fields = [
+        {
+          id: 'pyFirstName',
+          name: localizedVal('Name', localeCategory),
+          value: externalUser.name
+        },
+        {
+          id: 'pyEmail1',
+          name: localizedVal('Email', localeCategory),
+          value:
+            externalUser.email !== '' ? <Link href={`mailto:${externalUser.email}`}>{externalUser.email}</Link> : ''
+        },
+        {
+          id: 'pyPhoneNumber',
+          name: localizedVal('Phone', localeCategory),
+          value: externalUser.phone !== '' ? <Link href={`tel:${externalUser.phone}`}>{externalUser.phone}</Link> : ''
+        }
+      ];
+      setIsLoading(false);
+      setpopoverContent(
+        <Glimpse
+          visual={
+            <Avatar
+              metaObj={{
+                name: externalUser.name
+              }}
+            />
+          }
+          primary={externalUser.name}
+          secondary={[externalUser.position]}
+          fields={fields}
+        />
+      );
+    } else {
+      localizedVal = PCore.getLocaleUtils().getLocaleValue;
+      localeCategory = 'Operator';
+      return PCore.getUserApi()
+        .getOperatorDetails(id, true)
+        .then(res => {
+          if (res.data?.data && res.data.data[0].BusinessID && res.data.data[0].Name) {
+            const fields = [];
+            if (res.data.data[0].Name)
+              fields.push({
+                id: 'Name',
+                name: localizedVal('Name', localeCategory),
+                value: res.data.data[0].Name
+              });
+            if (res.data.data[0].BusinessID)
+              fields.push({
+                id: 'Email',
+                name: localizedVal('Email address', localeCategory),
+                value: <EmailDisplay value={res.data.data[0].BusinessID} />
+              });
+            return (
+              <Glimpse
+                heading={{
+                  primary: res.data.data[0].Name,
+                  secondary: res.data.data[0].BusinessID,
+                  visual: (
+                    <Avatar
+                      metaObj={{
+                        image: '',
+                        name: res.data.data[0].Name
+                      }}
+                    />
+                  )
+                }}
+                fields={fields}
+                target={popoverTarget}
+                onDismiss={() => setPopoverTarget(null)}
+              />
+            );
+          }
+        });
+      /*
+      const { getOperatorDetails } = PCore.getUserApi();
+      getOperatorDetails(id)
+        .then((res) => {
+          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+            const fields = [
+              {
+                id: 'pyOrganization',
+                name: localizedVal('Organization', localeCategory),
+                value: res.data.pyOperatorInfo.pyOrganization
+              },
+              {
+                id: 'pyTelephone',
+                name: localizedVal('Telephone', localeCategory),
+                value:
+                  res.data.pyOperatorInfo.pyTelephone !== '' ? (
+                    <Link href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>
+                      {res.data.pyOperatorInfo.pyTelephone}
+                    </Link>
+                  ) : (
+                    ''
+                  )
+              },
+              {
+                id: 'pyEmailAddress',
+                name: localizedVal('Email address', localeCategory),
+                value:
+                  res.data.pyOperatorInfo.pyEmailAddress !== '' ? (
+                    <Link href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>
+                      {res.data.pyOperatorInfo.pyEmailAddress}
+                    </Link>
+                  ) : (
+                    ''
+                  )
+              },
+              {
+                id: 'ReportToUserName',
+                name: localizedVal('Reports to', localeCategory),
+                value: res.data.pyOperatorInfo.pyReportToUserName
+              }
+            ];
+            setIsLoading(false);
+            setpopoverContent(
+              <Glimpse
+                visual={
+                  <Avatar
+                    metaObj={{
+                      image: res.data.pyOperatorInfo.pyImageInsKey || '',
+                      name: res.data.pyOperatorInfo.pyUserName
+                    }}
+                  />
+                }
+                primary={res.data.pyOperatorInfo.pyUserName}
+                secondary={[res.data.pyOperatorInfo.pyPosition]}
+                fields={fields}
+              />
+            );
+          } else {
+            setIsLoading(false);
+            setpopoverContent(<Flex container={{ pad: 1 }}>{localizedVal('Operator not found', localeCategory)}</Flex>);
+          }
+        })
+        .catch(() => {
+          setIsLoading(false);
+          setpopoverContent(
+            <Flex container={{ pad: 1 }}>{localizedVal('Error loading the operator profile', localeCategory)}</Flex>
+          );
+        });
+      */
+    }
+  };
+
+  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+
+  const clickAction = (e) => {
+    setPopoverTarget(e.currentTarget);
+    setIsOpen(!isOpen);
+    if (popoverTarget === null) {
+      OperatorPreview();
+    }
+  };
+
+  const hidePopover = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+  useOuterEvent('mousedown', [popoverEl, popoverTarget], hidePopover); // Call the method on clicking outside these elements
+  const hideOnEscape = (e) => {
+    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
+  };
+
+  const comp = (
+    <Fragment>
+      {metaObj ? (
+        <Button
+          variant='text'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          <Avatar metaObj={metaObj}></Avatar>
+        </Button>
+      ) : (
+        <Button
+          variant='link'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          {name}
+        </Button>
+      )}
+
+      {isOpen && (
+        <Popover
+          ref={setPopoverEl}
+          groupId='operator'
+          target={popoverTarget}
+          placement='bottom-start'
+          style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
+          strategy='fixed'
+        >
+          {popoverContent}
+        </Popover>
+      )}
+    </Fragment>
+  );
+
+  if (label !== null) {
+    return (
+      <FormField label={label} info={helperText}>
+        {comp}
+      </FormField>
+    );
+  }
+
+  return comp;
+};
+
+Operator.propTypes = {
+  name: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  testId: PropTypes.string,
+  helperText: PropTypes.string,
+  metaObj: PropTypes.object
+};
+
+Operator.defaultProps = {
+  name: '',
+  id: '',
+  label: null,
+  testId: null,
+  helperText: null,
+  metaObj: null
+};
+
+export default Operator;