@pega/custom-dx-components 0.242.17 → 0.242.18

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPage/utils.ts

@@ -0,0 +1,229 @@
+import { createUID } from '@pega/cosmos-react-core';
+
+// import { LazyMap as LazyComponentMap } from '../../components_map';
+
+const LazyComponentMap: any = {};
+
+/**
+ * Given the PConnect object of a Template component, retrieve the children
+ * metadata of all regions.
+ * @param {Function} pConnect PConnect of a Template component.
+ */
+export function getAllFields(pConnect: Function) {
+  const metadata = pConnect().getRawMetadata();
+  if (!metadata.children) {
+    return [];
+  }
+
+  let allFields = [];
+
+  const makeField = (f: any) => ({
+    ...pConnect().resolveConfigProps(f.config),
+    type: f.type
+  });
+
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    allFields = metadata.children.map((region: any) =>
+      region.children.map((field: any) => {
+        // Do not resolve the config props if is status work, instead create component here as status badge and mark as status display
+        if (field.config?.value === '@P .pyStatusWork') {
+          field.type = 'TextInput';
+          field.config.displayAsStatus = true;
+          return pConnect().createComponent(field);
+        }
+
+        return makeField(field);
+      })
+    );
+  } else {
+    allFields = metadata.children.map(makeField);
+  }
+
+  return allFields;
+}
+
+/**
+ * A helper function to create an object consisting react component as per the type.
+ * This is used by CaseSummary template.
+ * @param {object} configObject Object containing meta information for the particular field authored
+ * @param {Function} getPConnect PConnect function passed along to other components.
+ * @param {string} displayMode displayMode string contains information about the layout of component in review mode.
+ */
+export function prepareComponentInCaseSummary(configObject: any, getPConnect: Function, displayMode: string) {
+  const { config, children } = configObject;
+  let { type } = configObject;
+  const caseSummaryComponentObject: any = {};
+  let showAddressLabel = true;
+  if (config && config.value === '@P .pyStatusWork') {
+    config.displayAsStatus = true;
+    type = 'TextInput'; // force the type to be TextInput for status field.
+    // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
+    // Load TextInput if it is not available.
+    if (!LazyComponentMap[type]) {
+      PCore.getAssetLoader().getLoader('component-loader')([type]);
+    }
+  }
+
+  caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+    label: config.label
+  }).label;
+  if (type === 'CaseOperator') {
+    switch (caseSummaryComponentObject.name) {
+      case 'Create operator':
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          createLabel: config.createLabel
+        }).createLabel;
+        break;
+      case 'Update operator':
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          updateLabel: config.updateLabel
+        }).updateLabel;
+        break;
+      default:
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          resolveLabel: config.resolveLabel
+        }).resolveLabel;
+        break;
+    }
+  } else if (type === 'Checkbox') {
+    caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+      label: config.caption
+    }).label;
+  } else if (type === 'Address') {
+    showAddressLabel = false;
+  }
+  const createdComponent = getPConnect().createComponent({
+    type,
+    children: children ? [...children] : [],
+    showAddressLabel,
+    config: {
+      ...config,
+      hideLabel: true,
+      key: createUID() // Need a unique key on render of the summary so that the component is recreated each time
+    }
+  });
+  createdComponent.props.getPConnect().setInheritedProp('displayMode', displayMode);
+  if (type === 'Address') {
+    createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
+  }
+  // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
+  caseSummaryComponentObject.value = createdComponent;
+  if (type === 'reference') {
+    caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
+  }
+
+  return caseSummaryComponentObject;
+}
+
+export function getFilteredFields(getPConnect: Function) {
+  let primaryFieldsRaw;
+  let secondaryFieldsRaw;
+  const metadata = getPConnect().getRawMetadata();
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    primaryFieldsRaw = metadata.children[0].children;
+    secondaryFieldsRaw = metadata.children[1].children;
+  } else {
+    [primaryFieldsRaw, secondaryFieldsRaw] = metadata.children;
+  }
+
+  // Filter out fields that are not visible and unsupported types for primary fields (for CaseSummary)
+  primaryFieldsRaw = primaryFieldsRaw.filter((item: any) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  secondaryFieldsRaw = secondaryFieldsRaw.filter((item: any) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  return [primaryFieldsRaw, secondaryFieldsRaw];
+}
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @param {object[]} regionData template children item.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData: object[]) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+   // @ts-ignore
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item: any, index: number) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+export function getIsAssignmentView(pConnect: Function) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect().getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect().getCurrentView()}!${pConnect().getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect: Function, instructions: string = 'casestep') {
+  const caseStepInstructions = pConnect().getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+
+    console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -0,0 +1,75 @@
+/* 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 '../shared/PConnProps';
+
+
+// interface for props
+interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
+  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');
+
+    const handleUserStateChange = ({ state }: any) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        .subscribe(userIdentifier, handleUserStateChange, '');
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, [userIdentifier, handleUserStateChange]);
+    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/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/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 '../shared/PConnProps';
+
+import Avatar from './Avatar';
+
+
+// interface for props
+interface PegaDxilMyPageCaseWidgetOperatorProps 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: PegaDxilMyPageCaseWidgetOperatorProps) {
+  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);

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/config.json

@@ -0,0 +1,66 @@
+{
+  "name": "Pega_DXIL_MyPageCaseWidget",
+  "label": "My PageCase Widget (Pega_DXIL)",
+  "description": "My PageCase Widget (Pega_DXIL)",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPageCaseWidget",
+  "type": "Widget",
+  "subtype": ["PAGE","CASE"],
+  "icon": "OneColumnPage.svg",
+   "properties": [
+    {
+      "name": "title",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "format": "SELECT",
+      "label": "Usage",
+      "name": "label",
+      "defaultValue": "Create operator",
+      "localize": true,
+      "source": [
+        {
+          "key": "Create operator",
+          "value": "Create operator"
+        },
+        {
+          "key": "Update operator",
+          "value": "Update operator"
+        },
+        {
+          "key": "Resolve operator",
+          "value": "Resolve operator"
+        }
+      ]
+    },
+
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "Create operator",
+    "title": "Create operator",
+    "createLabel": "@L Created",
+    "updateLabel": "@L Updated",
+    "createOperator": "@USER .pxCreateOperator",
+    "updateOperator": "@USER .pxUpdateOperator",
+    "createDateTime": "@P .pxCreateDateTime",
+    "updateDateTime": "@P .pxUpdateDateTime",
+    "resolveLabel": "@L Resolved",
+    "resolveOperator": "@USER .pyResolvedUserID",
+    "resolveDateTime": "@P .pyResolvedTimestamp"
+  }
+}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyPageCaseWidget from './index';
+
+import { configProps, operatorDetails } from './mock';
+
+const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
+  title: 'PegaDxilMyPageCaseWidget',
+  component: PegaDxilMyPageCaseWidget,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: (value: any) => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const BasePegaDxilMyPageCaseWidget: Story = (args: any) => {
+
+  const props = {
+    label: configProps.label,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+};
+
+return (
+    <>
+      <PegaDxilMyPageCaseWidget {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyPageCaseWidget.args = {
+  createLabel: configProps.createLabel,
+  updateLabel: configProps.updateLabel,
+  hideLabel: configProps.hideLabel
+};