Added SelfServiceCaseView template to react SDK

manasa · manasa · commit dd0b2273e4f5 · 2025-10-23T16:38:16.000+05:30
diff --git a/packages/react-sdk-components/src/components/template/CaseSummary/CaseSummary.tsx b/packages/react-sdk-components/src/components/template/CaseSummary/CaseSummary.tsx
@@ -1,95 +1,22 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren } from 'react';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnProps } from '../../../types/PConnProps';
 
 interface CaseSummaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
 }
 
 export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-  const { getPConnect, children } = props;
-
-  const thePConn = getPConnect();
-  const theConfigProps: any = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps.status;
-  const showStatus = theConfigProps.showStatus;
-  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'ModalContainer';
-  // from Constellation DX Components
-  // get the primary and secondary fields with the raw data (which has the non-resolved property values)
-  // const regionsRaw = getPConnect().getRawMetadata().children;
-  // const primaryFieldsRaw = regionsRaw[0].children;
-  // const secondaryFieldsRaw = regionsRaw[1].children;
-
-  // From other SDKs
-  // may want to move these into useEffect/useState combo
-  let arPrimaryFields: any[] = [];
-  let arSecondaryFields: any[] = [];
-
-  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
-
-    const caseSummaryComponentObject: any = {};
-
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
-
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
-
-  function prepareCaseSummaryData(summaryFieldChildren) {
-    const convertChildrenToSummaryData = kid => {
-      return kid?.map((childItem, index) => {
-        const childMeta = childItem.getPConnect().meta;
-        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
-        caseSummaryComponentObject.id = index + 1;
-        return caseSummaryComponentObject;
-      });
-    };
-    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
-  }
-
-  for (const child of children as ReactElement[]) {
-    const childPConn = (child as ReactElement).props.getPConnect();
-    const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
-    if (childPConnData.name.toLowerCase() === 'primary fields') {
-      arPrimaryFields = childPConnData.children;
-      arPrimaryFields.forEach(field => {
-        if (field.config?.value && typeof field.config?.value === 'string') {
-          field.config.value = localizedVal(field.config.value, localeCategory);
-        }
-      });
-    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
-      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
-      arSecondaryFields = childPConnData.children;
-      arSecondaryFields.forEach((field, index) => {
-        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
-      });
-    }
-  }
-
-  // At this point, should hand off to another component for layout and rendering
-  //  of primary and secondary fields in the Case Summary
-
-  // debugging/investigation help
-  // console.log(`CaseSummary: arPrimaryFields: ${JSON.stringify(arPrimaryFields)}`);
-  // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
+  const { arPrimaryFields, arSecondaryFields } = props;
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
+      <CaseSummaryFields theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );
diff --git a/packages/react-sdk-components/src/components/template/CaseView/CaseView.tsx b/packages/react-sdk-components/src/components/template/CaseView/CaseView.tsx
@@ -9,6 +9,7 @@ import { Utils } from '../../helpers/utils';
 import StoreContext from '../../../bridge/Context/StoreContext';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnProps } from '../../../types/PConnProps';
+import { prepareCaseSummaryData } from '../utils';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -18,6 +19,15 @@ interface CaseViewProps extends PConnProps {
   showIconInHeader: boolean;
   caseInfo: any;
   lastUpdateCaseTime: any;
+  bShowUtilitiesRegion: any;
+  bShowCaseActions: any;
+  bShowCaseLifecycle: any;
+  bShowPromotedActions: any;
+  bShowPulseRegion: any;
+  bShowSummaryRegion: any;
+  selfServiceCaseView?: boolean;
+  utilitysRegionEmpty?: boolean;
+  summaryData?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -52,19 +62,23 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
   const VerticalTabs = getComponentFromMap('VerticalTabs');
   const DeferLoad = getComponentFromMap('DeferLoad');
+  const CaseSummary = getComponentFromMap('CaseSummary');
 
   const {
     getPConnect,
     icon = '',
     header,
     subheader,
     children = [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showIconInHeader = true,
+    bShowCaseLifecycle,
+    bShowSummaryRegion,
+    bShowUtilitiesRegion,
+    selfServiceCaseView,
+    utilitysRegionEmpty,
     caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
   } = props;
   const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
-
+  let { summaryData: { primarySummaryFields = [], secondarySummaryFields = [] } = {} } = props;
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
   const { displayOnlyFA } = useContext<any>(StoreContext);
@@ -84,9 +98,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
    */
   function getChildRegionByName(inName: string): any {
     for (const child of children as ReactElement[]) {
-      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type.toLowerCase();
-      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name.toLowerCase();
-
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
       if (theMetadataType === 'region' && theMetadataName === inName) {
         return child;
       }
@@ -95,7 +108,14 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
-  const theSummaryRegion = getChildRegionByName('summary');
+  const theSummaryRegion = children && children[0];
+
+  if (!selfServiceCaseView) {
+    const data = prepareCaseSummaryData(theSummaryRegion);
+    primarySummaryFields = data.primarySummaryFields;
+    secondarySummaryFields = data.secondarySummaryFields;
+  }
+
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
@@ -109,7 +129,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
 
   // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
-  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+  const theTabsRegionChildren = theTabsRegion?.props.getPConnect().getChildren();
 
   // vertTabInfo is sent to VerticalTabs component
   const vertTabInfo: object[] = [];
@@ -208,45 +228,49 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
       return (
         <Grid2 container>
           <Grid2 size={{ xs: 3 }}>
-            <div hidden={true} id='current-caseID'>
-              {currentCaseID}
-            </div>
-            <Card className={classes.root}>
-              <CardHeader
-                className={classes.caseViewHeader}
-                title={
-                  <Typography variant='h6' component='div' id='case-name'>
-                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
-                  </Typography>
-                }
-                subheader={
-                  <Typography variant='body1' component='div' id='caseId'>
-                    {subheader}
-                  </Typography>
-                }
-                avatar={
-                  <Avatar className={classes.caseViewIconBox} variant='square'>
-                    <img src={svgCase} className={classes.caseViewIconImage} />
-                  </Avatar>
-                }
-              />
-              {getActionButtonsHtml()}
-              <Divider />
-              {theSummaryRegion}
-              <Divider />
-              {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
-            </Card>
+            {(selfServiceCaseView ? bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0) : true) && (
+              <div>
+                <div hidden={true} id='current-caseID'>
+                  {currentCaseID}
+                </div>
+                <Card className={classes.root}>
+                  <CardHeader
+                    className={classes.caseViewHeader}
+                    title={
+                      <Typography variant='h6' component='div' id='case-name'>
+                        {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                      </Typography>
+                    }
+                    subheader={
+                      <Typography variant='body1' component='div' id='caseId'>
+                        {subheader}
+                      </Typography>
+                    }
+                    avatar={
+                      <Avatar className={classes.caseViewIconBox} variant='square'>
+                        <img src={svgCase} className={classes.caseViewIconImage} />
+                      </Avatar>
+                    }
+                  />
+                  {!selfServiceCaseView && getActionButtonsHtml()}
+                  <Divider />
+                  <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+                  <Divider />
+                  {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
+                </Card>
+              </div>
+            )}
           </Grid2>
 
           <Grid2 size={{ xs: 6 }}>
-            {theStagesRegion}
+            {bShowCaseLifecycle && theStagesRegion}
             {theTodoRegion}
             {deferLoadInfo.length > 0 && (
               <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
             )}
           </Grid2>
 
-          <Grid2 size={{ xs: 3 }}>{theUtilitiesRegion}</Grid2>
+          {(selfServiceCaseView ? bShowUtilitiesRegion && utilitysRegionEmpty : true) && <Grid2 size={{ xs: 3 }}>{theUtilitiesRegion}</Grid2>}
         </Grid2>
       );
     }
diff --git a/packages/react-sdk-components/src/components/template/SelfServiceCaseView/SelfServiceCaseView.tsx b/packages/react-sdk-components/src/components/template/SelfServiceCaseView/SelfServiceCaseView.tsx
@@ -1,3 +1,87 @@
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+import { prepareCaseSummaryData, filterUtilities } from '../utils';
+
 export default function SelfServiceCaseView(props) {
-  console.log('SelfServiceCaseView props:', props);
+  const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
+  const CaseView = getComponentFromMap('CaseView');
+  const {
+    getPConnect,
+    header,
+    showCaseLifecycle = true,
+    showPulseRegion = true,
+    showSummaryRegion = true,
+    showUtilitiesRegion = true,
+    showCaseActions = true,
+    showPromotedActions = true,
+    children,
+    caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' }
+  } = props;
+  const pConnect = getPConnect();
+  const [bShowCaseLifecycle, bShowPulseRegion, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions, bShowPromotedActions] = [
+    showCaseLifecycle,
+    showPulseRegion,
+    showSummaryRegion,
+    showUtilitiesRegion,
+    showCaseActions,
+    showPromotedActions
+  ].map((prop: boolean | string) => prop === true || prop === 'true');
+  const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+  const localeKey = pConnect?.getCaseLocaleReference();
+
+  const renderedRegions: any = isObjectType
+    ? {
+        caseSummary: children[0],
+        utilities: filterUtilities(children[2])
+      }
+    : {
+        caseSummary: children[0],
+        stages: children[1],
+        todo: children[2],
+        utilities: filterUtilities(children[4])
+      };
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config: any) => config?.availableInChannel?.selfService === true
+  );
+
+  const isUtilitiesRegionNotEmpty: () => boolean = () => {
+    const utilitiesElement = renderedRegions.utilities;
+    if (utilitiesElement?.props?.getPConnect()?.getChildren()?.length > 0) {
+      return utilitiesElement.props
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '10px' }}>
+        <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+        {bShowCaseActions && (
+          <CaseViewActionsMenu
+            getPConnect={getPConnect}
+            availableActions={availableActions}
+            availableProcesses={availableProcesses}
+            caseTypeName={caseTypeName}
+            caseTypeID={caseTypeID}
+          />
+        )}
+      </div>
+      <CaseView
+        {...props}
+        summaryData={{ primarySummaryFields, secondarySummaryFields }}
+        selfServiceCaseView={true}
+        bShowCaseLifecycle={bShowCaseLifecycle}
+        bShowPulseRegion={bShowPulseRegion}
+        bShowSummaryRegion={bShowSummaryRegion}
+        bShowUtilitiesRegion={bShowUtilitiesRegion}
+        bShowCaseActions={bShowCaseActions}
+        bShowPromotedActions={bShowPromotedActions}
+        utilitysRegionNotEmpty={isUtilitiesRegionNotEmpty()}
+      />
+    </div>
+  );
 }
diff --git a/packages/react-sdk-components/src/components/template/utils.tsx b/packages/react-sdk-components/src/components/template/utils.tsx
