Fixed CaseSummary fields not getting rendered in Details template (#526)

* Fixed CaseSummary fields not getting rendered in Details template

---------

Co-authored-by: Sharma <[email protected]>
Co-authored-by: manasa <[email protected]>

Author: 3 people

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

@@ -1,22 +1,83 @@
-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[];
+  // If any, enter additional props that only exist on this component
 }
 
 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;
+  let { arPrimaryFields = [], arSecondaryFields = [] } = props;
+
+  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';
+
+  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;
+  }
+
+  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;
+        });
+      }
+    }
+  }
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields theFields={arPrimaryFields} />
+      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );