@pega/custom-dx-components 0.24.14 → 0.24.16

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/mock.ts

@@ -1,5 +1,4 @@
 
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',
@@ -18,6 +17,7 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -28,6 +28,7 @@ export const pyReviewRaw = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
       },
@@ -37,6 +38,7 @@ export const pyReviewRaw = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,6 +49,7 @@ export const pyReviewRaw = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -66,6 +69,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -78,17 +82,17 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
-          },
-          key: '1'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
+          }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
-          },
-          key: '2'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
+          }
         },
         {
           type: 'RadioButtons',
@@ -96,9 +100,9 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
-          },
-          key: '3'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
+          }
         }
       ]
     }
@@ -189,3 +193,58 @@ export const regionChildrenResolved = [
     key: 'SLA Start Time'
   }
 ];
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};
+
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  resolveLabel: '',
+  resolveOperator: '',
+  resolveDateTime: '',
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.tsx

@@ -38,7 +38,7 @@ function PegaDxilMyForm(props: PegaDxilMyFormProps) {
             {children.map((child: any, i: number) => (
               <Flex
                 // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
                 key={`r-${i + 1}`}
               >
                 <DetailsRender child={child} />

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -38,6 +38,11 @@ const countrylistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(countrylistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(countrylistData);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -60,10 +60,13 @@ export const textFormatter = (value: string) => {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   const { value, displayMode, getPConnect, testId } = props;
-  const [statelist, setStatelist] = useState([]);
+  const [countrylist, setCountrylist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'CountryList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -108,8 +111,6 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'CountryList';
-    const context = PConnect.getContextName();
     const params = { };
 
     // only retrieve table data if table is shown
@@ -118,25 +119,35 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            response.data.map((entry: any, index: number) => {
-              // mapping the data into the column names
-              // MUST have an id/index or will get a setExtraStackFrame error
-              // put a key in the table
-              return {
-                countryName: entry.Name,
-                shortName: entry.ShortName,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setCountrylist(
+              response.data.map((entry: any, index: number) => {
+                // mapping the data into the column names
+                // MUST have an id/index or will get a setExtraStackFrame error
+                // put a key in the table
+                return {
+                  countryName: entry.Name,
+                  shortName: entry.ShortName,
+                  id: index
+                };
+              })
+            );
+          }
+          else {
+            setCountrylist([]);
+            setIsLoading(false);
+          }
+
         })
         .catch((error: any) => {
+          setCountrylist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, showTable]);
+  }, [context, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -189,7 +200,9 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
         <Table
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
-          data={statelist}
+          data={countrylist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
         />
       )}
     </StyledPegaDxilMyIconButtonUrlWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -22,30 +22,38 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-8002',
-      ProcessName: 'New',
-      TaskName: 'Details'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-7001',
-      ProcessName: 'Open',
-      TaskName: 'Info'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-9000',
-      ProcessName: 'Open',
-      TaskName: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-8002',
+        ProcessName: 'New',
+        TaskName: 'Details'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-7001',
+        ProcessName: 'Open',
+        TaskName: 'Info'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-9000',
+        ProcessName: 'Open',
+        TaskName: 'Amount'
+      }
+    ]
+  }
+
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +67,7 @@ window.PCore.getDataPageUtils = () => {
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/index.tsx

@@ -21,7 +21,11 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'MyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'MyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.CaseName,
-              insKey: entry.BusinessID,
-              status: entry.ProcessName,
-              stage: entry.TaskName,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.CaseName,
+                insKey: entry.BusinessID,
+                status: entry.ProcessName,
+                stage: entry.TaskName,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
@@ -86,6 +98,8 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </StyledPegaDxilMyPageWidgetWrapper>
   );

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import  React from 'react';
+import { useEffect, useState } from 'react';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
+  const { metaObj, showStatus = false } = props;
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  let userName: string;
+  let userIdentifier: string;
+
+  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
+  // This is non CaseView case (Dashboard, MyWork etc)
+  if (!metaObj) {
+    userName = PCore.getEnvironmentInfo().getOperatorName();
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+  } else {
+    userName = metaObj.name;
+    userIdentifier = metaObj.ID;
+  }
+  if (!userName && userIdentifier) {
+    userName = userIdentifier;
+  }
+
+  useEffect(() => {
+    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
+    if (imageKey) {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then((blob) => window.URL.createObjectURL(blob))
+        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
+    }
+  }, [metaObj]);
+
+  if (showStatus) {
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
+
+    // @ts-ignore
+    const handleUserStateChange = ({ state }) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        // @ts-ignore
+        .subscribe(userIdentifier, handleUserStateChange);
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, [userIdentifier, handleUserStateChange]);
+    // @ts-ignore
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
+  }
+
+  // Do not render when userName does not exists
+  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
+  if (!userName) {
+    return null;
+  }
+
+  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
+}
+
+
+export default withConfiguration(Avatar);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/Operator.tsx

@@ -0,0 +1,215 @@
+// @ts-nocheck
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  useOuterEvent,
+  useElement,
+  Progress,
+  FormField,
+  useTheme,
+  withConfiguration
+} from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { EmailDisplay } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import Avatar from './Avatar';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsOperatorProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  name: string;
+  id: string;
+  label: string;
+  metaObj: any;
+  externalUser: any;
+}
+
+let pTarget = null;
+
+function Operator(props: PegaDxilMyTwoColumnDetailsOperatorProps) {
+  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [popoverEl, setPopoverEl] = useElement(null);
+  const [popoverContent, setpopoverContent] = useState(null);
+  const theme: any = useTheme();
+
+  /* If the id has changed, we need to reset the popover */
+  useEffect(() => {
+    pTarget = null;
+  }, [id]);
+
+
+
+  const OperatorPreview = () => {
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const 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}
+          target={pTarget}
+        />
+      );
+    } else {
+      return PCore.getUserApi()
+        .getOperatorDetails(id, true)
+        .then(res => {
+          if (res.data?.pyOperatorInfo) {
+            const fields = [];
+            const data = res.data;
+            if (data.pyOperatorInfo && data.pyOperatorInfo.pyUserName) {
+              fields.push({
+                id: 'Name',
+                name: localizedVal('Name', localeCategory),
+                value: data.pyOperatorInfo.pyUserName
+              });
+            }
+            if (data.pyOperatorInfo && data.pyOperatorInfo.pyEmailAddress) {
+              fields.push({
+                id: 'Email',
+                name: localizedVal('Email address', localeCategory),
+                value: <EmailDisplay value={data.pyOperatorInfo.pyEmailAddress} />
+              });
+            }
+            const opAvatar = (
+              <Avatar
+                metaObj={{
+                  image: '',
+                  name: data.pyOperatorInfo.pyUserName
+                }}
+              />
+            );
+
+            setIsLoading(false);
+            setpopoverContent(
+              <Glimpse
+                heading={{
+                  primary: data.pyOperatorInfo.pyUserName,
+                  secondary: data.pyOperatorInfo.pyEmailAddress,
+                  visual: opAvatar
+                }}
+                fields={fields}
+                target={pTarget}
+                onDismiss={() => {pTarget = null;}}
+              />
+            );
+          }
+        });
+    }
+  };
+
+
+  const clickAction = (e: any) => {
+
+    setIsOpen(!isOpen);
+    if (pTarget === null) {
+      pTarget = e.currentTarget;
+      OperatorPreview();
+    }
+  };
+
+  const hidePopover = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
+
+  const hideOnEscape = (e: any) => {
+    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 {...props} />
+        </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={pTarget}
+          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;
+};
+
+
+export default withConfiguration(Operator);