Fixed CaseSummary fields not getting rendered in Details template

Author: manasa

packages/react-sdk-components/src/components/template/CaseSummary/CaseSummary.tsx

@@ -3,6 +3,8 @@ import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnProps } from '../../../types/PConnProps';
 
 interface CaseSummaryProps extends PConnProps {
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
   // If any, enter additional props that only exist on this component
 }
 
@@ -11,18 +13,16 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
   const { getPConnect, children } = props;
+  let { arPrimaryFields = [], arSecondaryFields = [] } = props;
 
-  const thePConn = getPConnect();
-  const theConfigProps: any = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps.status;
-  const showStatus = theConfigProps.showStatus;
+  const thePConn = getPConnect && getPConnect();
+  const theConfigProps: any = thePConn?.getConfigProps();
+
+  const status = theConfigProps?.status;
+  const showStatus = theConfigProps?.showStatus;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'ModalContainer';
 
-  let arPrimaryFields: any[] = [];
-  let arSecondaryFields: any[] = [];
-
   function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
     const { config, children } = pConnectMeta;
     const pConnect = getPConnect();
@@ -54,22 +54,24 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
     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;
-      });
+  if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
+    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;
+        });
+      }
     }
   }
 

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
@@ -49,6 +50,7 @@ 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,
@@ -88,11 +90,16 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
+  const theSummaryRegion = children && children[0];
+
+  const data = prepareCaseSummaryData(theSummaryRegion);
+  const primarySummaryFields = data.primarySummaryFields;
+  const secondarySummaryFields = data.secondarySummaryFields;
+
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
   const theTabsRegion = getChildRegionByName('tabs');
-  const theSummaryRegion = getChildRegionByName('summary');
 
   let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
 
@@ -230,7 +237,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               />
               {getActionButtonsHtml()}
               <Divider />
-              {theSummaryRegion}
+              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>