@pega/custom-dx-components 23.1.12 → 24.1.10

package/src/tasks/init/template/package.json.mustache

@@ -28,6 +28,7 @@
     "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
     "_internal-test-functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
     "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
+    "_internal-build-jest-assets": "custom-dx-components buildJestAssets",
     "_lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "_lint:format": "prettier -c .",
     "_lint:spelling": "cspell --no-progress **/*",
@@ -50,9 +51,9 @@
   "license": "Enter License",
   "sideEffects": false,
  "dependencies": {
-    "@pega/cosmos-react-condition-builder": "^4.2.0",
-    "@pega/cosmos-react-core": "^4.2.0",
-    "@pega/cosmos-react-work": "^4.2.0",
+    "@pega/cosmos-react-condition-builder": "^6.0.3",
+    "@pega/cosmos-react-core": "^6.0.3",
+    "@pega/cosmos-react-work": "^6.0.3",
     "dayjs": "^1.11.10",
     "lodash.get": "^4.4.2",
     "polished": "^4.2.2",
@@ -60,7 +61,7 @@
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
-    "react-is": "^18.2.0",
+    "react-is": "^17.0.2",
     "react-player": "^2.10.1",
     "react-redux": "^7.2.6",
     "styled-components": "^5.3.5",
@@ -68,8 +69,8 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "23.1.12",
-    "@pega/pcore-pconnect-typedefs": "~2.1.1",
+    "@pega/custom-dx-components": "24.1.10",
+    "@pega/pcore-pconnect-typedefs": "~3.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",

package/src/tasks/init/template/tsconfig.build.json

@@ -5,7 +5,9 @@
     "./src/**/*.stories.ts",
     "./src/**/*.stories.tsx",
     "./src/**/*.stories.js",
-    "./src/**/*.stories.jsx"
+    "./src/**/*.stories.jsx",
+    "./src/**/*.test.jsx",
+    "./src/**/*.test.tsx"
   ],
   "compilerOptions": {
     "noEmit": false,

package/src/tasks/publish/helper.js

@@ -84,11 +84,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/publish-all/helper.js

@@ -70,11 +70,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/validator/index.js

@@ -350,7 +350,13 @@ export default async (option) => {
   }
 
   //const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
-  const data = JSON.parse(configData);
+  let data;
+  try {
+    data = JSON.parse(configData);
+  }
+  catch (er) {
+    throw new Error(`Invalid schema json in config.json: ${er}`);
+  }
 
   const valid = validateSchema(data);
 

package/src/util.js

@@ -262,6 +262,24 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
+export const getServerType = async () => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  return defaultPegaServerConfig.serverType;
+}
+
+export const setServerType = async(serverType) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+  let configData = await getPegaConfig();
+  let serverConfig = configData['server-config'];
+  serverConfig.serverType = serverType;
+
+  // update file
+  // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(configData, null, 4), { encoding: 'utf8' });
+
+}
+
 export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);

package/tests/assets/components/create/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -23,9 +23,6 @@ export const BasePegaDxilMyTestText: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {

package/tests/assets/components/create/Pega_DXIL_MyTestText/index.tsx

@@ -1,4 +1,12 @@
-import { Input, withConfiguration } from '@pega/cosmos-react-core';
+import {
+  Input,
+  FieldValueList,
+  Text,
+  EmailDisplay,
+  PhoneDisplay,
+  URLDisplay,
+  withConfiguration
+} from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -7,7 +15,9 @@ import StyledPegaDxilMyTestTextWrapper from './styles';
 // interface for props
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-
+  isTableFormatter?: boolean;
+  formatter: string;
+  variant?: any;
 }
 
 // interface for StateProps object
@@ -16,23 +26,103 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-// Duplicated runtime code from Constellation Design System Component
+export const formatExists = (formatterVal: string) => {
+  const formatterValues = [
+    'TextInput',
+    'WorkStatus',
+    'RichText',
+    'Email',
+    'Phone',
+    'URL',
+    'Operator'
+  ];
+  let isformatter = false;
+  if (formatterValues.includes(formatterVal)) {
+    isformatter = true;
+  }
+  return isformatter;
+};
+
+export const textFormatter = (formatter: string, value: string) => {
+  let displayComponent: any = null;
+  switch (formatter) {
+    case 'TextInput': {
+      displayComponent = value;
+      break;
+    }
+    case 'Email': {
+      displayComponent = <EmailDisplay value={value} displayText={value} variant='link' />;
+      break;
+    }
+    case 'Phone': {
+      displayComponent = <PhoneDisplay value={value} variant='link' />;
+      break;
+    }
+    case 'URL': {
+      displayComponent = (
+        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
+      );
+      break;
+    }
+    // no default
+  }
+  return displayComponent;
+};
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled = false, readOnly = false, required = false, label, hideLabel = false, testId } = props;
+  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
+  const { formatter } = props;
 
   const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;
     actions.updateFieldValue(propName, updatedValue);
   };
 
+  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+    let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    if (isTableFormatter && formatExists(formatter)) {
+      displayComp = textFormatter(formatter, value);
+    }
+    return displayMode === 'DISPLAY_ONLY' ? (
+      <StyledPegaDxilMyTestTextWrapper> {displayComp} </StyledPegaDxilMyTestTextWrapper>
+    ) : (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant={hideLabel ? 'stacked' : variant}
+          data-testid={testId}
+          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const isValDefined = typeof value !== 'undefined' && value !== '';
+    const val = isValDefined ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+    return (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant='stacked'
+          data-testid={testId}
+          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTestTextWrapper>
       <Input

package/tests/assets/components/create/_components.md

@@ -0,0 +1 @@
+# directory for components #

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -23,20 +23,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -76,6 +63,9 @@ BasePegaDxilMyBoolean.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/index.tsx

@@ -3,7 +3,8 @@ import {
   CheckboxGroup,
   FieldValueList,
   Text,
-  withConfiguration
+  withConfiguration,
+  BooleanDisplay
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
@@ -96,15 +97,17 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
-      <PegaDxilMyBoolean value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> displayComponent </StyledPegaDxilMyBooleanWrapper>);
+    return (
+      <StyledPegaDxilMyBooleanWrapper>
+       {displayComponent}
+      </StyledPegaDxilMyBooleanWrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/demo.stories.tsx

@@ -49,7 +49,6 @@ window.PCore.getDataApiUtils = () => {
 export const BasePegaDxilMyCaseWidget: Story = args => {
 
   const props = {
-    label: 'Case history',
 
     getPConnect: () => {
       return {
@@ -83,4 +82,6 @@ return (
   );
 };
 
-BasePegaDxilMyCaseWidget.args = {};
+BasePegaDxilMyCaseWidget.args = {
+  label: 'Case history',
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -20,17 +20,8 @@ export const BasePegaDxilMyCurrency: Story = args => {
 
   const props = {
     value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -60,6 +51,7 @@ export const BasePegaDxilMyCurrency: Story = args => {
 
 BasePegaDxilMyCurrency.args = {
   label: configProps.label,
+  placeholder: configProps.placeholder,
   helperText: configProps.helperText,
   showGroupSeparators: configProps.showGroupSeparators,
   allowDecimals: configProps.allowDecimals,
@@ -72,5 +64,6 @@ BasePegaDxilMyCurrency.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/index.tsx

@@ -189,7 +189,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/mock.ts

@@ -3,6 +3,7 @@
 export const configProps = {
   value: '',
   label: 'Currency Sample',
+  placeholder: 'Currency Placeholder',
   currencyISOCode: 'USD',
   allowDecimals: true,
   showGroupSeparators: true,
@@ -12,6 +13,7 @@ export const configProps = {
   testId: 'currency-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/demo.stories.tsx

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const BasePegaDxilMyDate: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,25 +57,7 @@ export const BasePegaDxilMyDate: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    validatemessage: '',
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
@@ -92,6 +77,10 @@ BasePegaDxilMyDate.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
+  showAsFormattedText: configProps.showAsFormattedText,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/index.tsx

@@ -175,7 +175,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
+        return ( <StyledPegaDxilMyDateWrapper> {displayComp} </StyledPegaDxilMyDateWrapper>);
       }
       case "LABELS_LEFT" : {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const BasePegaDxilMyDateTime: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,24 +57,7 @@ export const BasePegaDxilMyDateTime: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
@@ -92,6 +78,9 @@ BasePegaDxilMyDateTime.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/index.tsx

@@ -181,7 +181,7 @@ function PegaDxilMyDateTime (props: PegaDxilMyDateTimeProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateTimeWrapper> displayComp </StyledPegaDxilMyDateTimeWrapper>);
+        return ( <StyledPegaDxilMyDateTimeWrapper> {displayComp} </StyledPegaDxilMyDateTimeWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/mock.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 export const configProps = {
   value: '2023-01-24T16:45:00.000Z',
+  placeholder: 'DateTime Placeholder',
   validatemessage: '',
   label: 'DateTime Label',
   hideLabel: false,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/demo.stories.tsx

@@ -20,14 +20,7 @@ export const BasePegaDxilMyDecimal: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -66,5 +59,6 @@ BasePegaDxilMyDecimal.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/index.tsx

@@ -158,7 +158,7 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyDecimalWrapper> displayComp </StyledPegaDxilMyDecimalWrapper>);
+        return (<StyledPegaDxilMyDecimalWrapper> {displayComp} </StyledPegaDxilMyDecimalWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/mock.ts

@@ -9,6 +9,7 @@ export const configProps = {
   testId: 'decimal-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/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 PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyDetailsAvatarProps) {
+  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);