Fixed CaseSummary fields not getting rendered in Details template

Author: Sharma

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

@@ -1,22 +1,81 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } 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 { arPrimaryFields, arSecondaryFields } = props;
+  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';
+
+  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;
+      });
+    }
+  }
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields theFields={arPrimaryFields} />
+      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );

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

@@ -9,7 +9,6 @@ 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
@@ -50,7 +49,6 @@ 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,
@@ -90,16 +88,11 @@ 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;
 
@@ -237,7 +230,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               />
               {getActionButtonsHtml()}
               <Divider />
-              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+              {theSummaryRegion}
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>