refactor: create case mashup api moved to PegaReady Context

Author: tumms2021389

packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx

@@ -107,7 +107,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function MainScreen() {
   const { isAuthenticated } = usePegaAuth();
-  const { isPegaReady, PegaContainer } = usePega();
+  const { isPegaReady, PegaContainer, createCase } = usePega();
 
   const classes = useStyles();
 
@@ -149,14 +149,8 @@ export default function MainScreen() {
     setShowLandingPage(false);
     setShowPega(true);
     const sdkConfig = await getSdkConfig();
-    let mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
-    // If mashupCaseType is null or undefined, get the first case type from the environment info
-    if (!mashupCaseType) {
-      const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList;
-      if (caseTypes && caseTypes.length > 0) {
-        mashupCaseType = mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
-      }
-    }
+    const mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
+
     let selectedPhoneGUID = '';
     const phoneName = optionClicked ? optionClicked.trim() : '';
     switch (phoneName) {
@@ -188,12 +182,10 @@ export default function MainScreen() {
       console.warn(`Unexpected case type: ${mashupCaseType}. PhoneModelss field not set.`);
     }
 
-    // Create a new case using the mashup API
-    PCore.getMashupApi()
-      .createCase(mashupCaseType, PCore.getConstants().APP.APP, options)
-      .then(() => {
-        console.log('createCase rendering is complete');
-      });
+    // Call the createCase function from context to create a new case using the mashup API
+    createCase(mashupCaseType, options).then(() => {
+      console.log('createCase rendering is complete');
+    });
   };
 
   function renderLandingPage() {
@@ -241,7 +233,7 @@ export default function MainScreen() {
     );
   }
 
-  if (!isAuthenticated) return <div>Loading...</div>;
+  if (!isAuthenticated) return <div style={{ textAlign: 'center' }}>Loading...</div>;
 
   return (
     <div className={classes.appContainer}>

packages/react-sdk-components/src/samples/Embedded/context/PegaReadyContext.tsx

@@ -1,4 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material';
+import type { CaseOptions } from '@pega/pcore-pconnect-typedefs/mashup/types';
 
 import StoreContext from '../../../bridge/Context/StoreContext';
 import createPConnectComponent from '../../../bridge/react_pconnect';
@@ -29,21 +31,28 @@ function RootComponent(props) {
 interface PegaContextProps {
   isPegaReady: boolean;
   rootPConnect?: typeof PConnect; // Function to get Pega Connect object, if available
+  createCase: (mashupCaseType: string, options: CaseOptions) => Promise<void>;
   PegaContainer: React.FC;
 }
 
 declare const myLoadMashup: any;
 
 const PegaContext = createContext<PegaContextProps | undefined>(undefined);
 
-export const PegaReadyProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+interface PegaReadyProviderProps {
+  theme: any;
+}
+
+export const PegaReadyProvider: React.FC<React.PropsWithChildren<PegaReadyProviderProps>> = ({ children, theme }) => {
   const { isAuthenticated } = usePegaAuth();
   const [isPegaReady, setIsPegaReady] = useState<boolean>(false);
   const [rootProps, setRootProps] = useState<{
     getPConnect?: () => typeof PConnect;
     [key: string]: any;
   }>({});
 
+  const [loading, setLoading] = useState<boolean>(false);
+
   const startMashup = async () => {
     try {
       PCore.onPCoreReady(async renderObj => {
@@ -84,9 +93,53 @@ export const PegaReadyProvider: React.FC<React.PropsWithChildren> = ({ children
     return undefined;
   }, [rootProps]);
 
-  const PegaContainer = () => (isPegaReady ? <RootComponent {...rootProps} /> : null);
+  const createCase = (mashupCaseType: string, options: CaseOptions) => {
+    if (!isPegaReady) {
+      console.error('Pega is not ready. Cannot create case.');
+      return Promise.reject('Pega is not ready');
+    }
+
+    setLoading(true);
+    return new Promise<void>((resolve, reject) => {
+      // If mashupCaseType is null or undefined, get the first case type from the environment info
+      if (!mashupCaseType) {
+        const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList;
+        if (caseTypes && caseTypes.length > 0) {
+          mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
+        }
+      }
+
+      PCore.getMashupApi()
+        .createCase(mashupCaseType, PCore.getConstants().APP.APP, options)
+        .then(() => {
+          resolve();
+        })
+        .catch(error => {
+          console.error('Error creating case:', error);
+          reject(error);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    });
+  };
+
+  const PegaContainer = () => {
+    if (loading) return <div style={{ textAlign: 'center' }}>Loading...</div>;
+
+    return isPegaReady ? <RootComponent {...rootProps} /> : null;
+  };
 
-  return <PegaContext.Provider value={{ isPegaReady, rootPConnect, PegaContainer }}>{children}</PegaContext.Provider>;
+  return (
+    <PegaContext.Provider value={{ isPegaReady, rootPConnect, createCase, PegaContainer }}>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
+      </StyledEngineProvider>
+    </PegaContext.Provider>
+  );
 };
 
 export const usePega = () => {

packages/react-sdk-components/src/samples/Embedded/index.tsx

@@ -1,5 +1,3 @@
-import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material';
-
 import PegaAuthProvider from './context/PegaAuthProvider';
 import { PegaReadyProvider } from './context/PegaReadyContext';
 
@@ -10,18 +8,13 @@ import './styles.css';
 
 export default function Embedded() {
   return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <PegaAuthProvider>
-          <PegaReadyProvider>
-            <>
-              <Header />
-              <MainScreen />
-            </>
-          </PegaReadyProvider>
-        </PegaAuthProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
+    <PegaAuthProvider>
+      <PegaReadyProvider theme={theme}>
+        <>
+          <Header />
+          <MainScreen />
+        </>
+      </PegaReadyProvider>
+    </PegaAuthProvider>
   );
 }