refactor: initialization of Pega logic in Embedded sample (#578)

Author: tumms2021389

package-lock.json

@@ -57,10 +57,8 @@
     "@pega/cosmos-react-condition-builder": "^8.4.1",
     "@pega/cosmos-react-core": "^8.4.1",
     "@pega/cosmos-react-work": "^8.4.1",
-    "@pega/react-sdk-components": "~0.25.4",
+    "@pega/react-sdk-components": "~0.25.5",
     "@storybook/react-webpack5": "^8.6.14",
-    "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.34",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "react": "^18.3.1",
@@ -77,7 +75,7 @@
     "@pega/constellationjs": "~25.1.0",
     "@pega/dx-component-builder-sdk": "~24.2.14",
     "@pega/pcore-pconnect-typedefs": "~4.1.0",
-    "@pega/react-sdk-overrides": "~0.25.4",
+    "@pega/react-sdk-overrides": "~0.25.5",
     "@playwright/test": "^1.54.2",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
@@ -94,6 +92,8 @@
     "@types/jest": "^30.0.0",
     "@types/lodash.isequal": "^4.5.8",
     "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/styled-components": "^5.1.35",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^8.34.1",
     "caniuse-lite": "^1.0.30001735",

package.json

@@ -1,3 +1,7 @@
+.psdk-root {
+  background-color: var(--app-form-bg-color);
+}
+
 .portal-load-error {
   height: 100vh;
   width: 100vw;
@@ -37,7 +41,7 @@
 
 .logout-btn:hover {
   background: var(--app-warning-color-dark);
-  color: var(--app-form-color);
+  color: var(--app-form-bg-color);
 }
 
 .portals-list {
@@ -58,8 +62,3 @@
 [class*='MuiInputAdornment-positionStart'] {
   margin-right: 0 !important;
 }
-
-/* Support for google map autocomplete */
-.pac-container {
-  z-index: 2147483647;
-}

src/common.css

@@ -1,9 +1,9 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 import { makeStyles } from '@mui/styles';
 
-import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
-import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { usePegaAuth } from '../context/PegaAuthProvider';
+import { usePega } from '../context/PegaReadyContext';
 
 import ShoppingOptionCard from '../ShoppingOptionCard';
 import ResolutionScreen from '../ResolutionScreen';
@@ -105,45 +105,35 @@ const useStyles = makeStyles(theme => ({
   pegaForm: {}
 }));
 
-function RootComponent(props) {
-  const PegaConnectObj = createPConnectComponent();
-  const thePConnObj = <PegaConnectObj {...props} />;
+export default function MainScreen() {
+  const { isAuthenticated } = usePegaAuth();
+  const { isPegaReady, PegaContainer, createCase } = usePega();
 
-  /**
-   * NOTE: For Embedded mode, we add in displayOnlyFA to our React context
-   * so it is available to any component that may need it.
-   * VRS: Attempted to remove displayOnlyFA but it presently handles various components which
-   * SDK does not yet support, so all those need to be fixed up before it can be removed.
-   * To be done in a future sprint.
-   */
-  const contextValue = useMemo(() => {
-    return { store: PCore.getStore(), displayOnlyFA: true };
-  }, [PCore.getStore()]);
-
-  return <StoreContext.Provider value={contextValue}>{thePConnObj}</StoreContext.Provider>;
-}
-
-export default function MainScreen(props) {
   const classes = useStyles();
+
   const [showPega, setShowPega] = useState(false);
   const [showLandingPage, setShowLandingPage] = useState(true);
   const [showResolution, setShowResolution] = useState(false);
 
   useEffect(() => {
-    // Subscribe to the EVENT_CANCEL event to handle the assignment cancellation
-    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => cancelAssignment(), 'cancelAssignment');
-    // Subscribe to the END_OF_ASSIGNMENT_PROCESSING event to handle assignment completion
-    PCore.getPubSubUtils().subscribe(
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
-      () => assignmentFinished(),
-      'endOfAssignmentProcessing'
-    );
+    if (isPegaReady) {
+      // Subscribe to the EVENT_CANCEL event to handle the assignment cancellation
+      PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => cancelAssignment(), 'cancelAssignment');
+
+      // Subscribe to the END_OF_ASSIGNMENT_PROCESSING event to handle assignment completion
+      PCore.getPubSubUtils().subscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+        () => assignmentFinished(),
+        'endOfAssignmentProcessing'
+      );
+    }
+
     return () => {
       // unsubscribe to the events
       PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
       PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING, 'endOfAssignmentProcessing');
     };
-  }, []);
+  }, [isPegaReady]);
 
   const cancelAssignment = () => {
     setShowLandingPage(true);
@@ -159,14 +149,8 @@ export default function MainScreen(props) {
     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 = caseTypes[0].pyWorkTypeImplementationClassName;
-      }
-    }
+    const mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
+
     let selectedPhoneGUID = '';
     const phoneName = optionClicked ? optionClicked.trim() : '';
     switch (phoneName) {
@@ -198,12 +182,10 @@ export default function MainScreen(props) {
       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() {
@@ -244,13 +226,15 @@ export default function MainScreen(props) {
     return (
       <div className={classes.pegaViewContainer}>
         <div className={classes.pegaForm} id='pega-part-of-page'>
-          <RootComponent {...props} />
+          <PegaContainer />
           <br />
         </div>
       </div>
     );
   }
 
+  if (!isAuthenticated) return <div style={{ textAlign: 'center' }}>Loading...</div>;
+
   return (
     <div className={classes.appContainer}>
       {showLandingPage && renderLandingPage()}

src/samples/Embedded/MainScreen/index.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { getSdkConfig, loginIfNecessary, sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager';
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+}
+
+const UserAuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const PegaAuthProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+
+  const initialize = async () => {
+    try {
+      // Add event listener for when logged in and constellation bootstrap is loaded
+      document.addEventListener('SdkConstellationReady', () => {
+        setIsAuthenticated(true);
+      });
+
+      // Initialize authentication settings
+      await initializeAuthentication();
+
+      // this function will handle login process, and SdkConstellationReady event will be fired once PCore is ready
+      loginIfNecessary({ appName: 'embedded', mainRedirect: false });
+    } catch (error) {
+      console.error('Something went wrong while login', error);
+    }
+  };
+
+  useEffect(() => {
+    initialize();
+  }, []);
+
+  return <UserAuthContext.Provider value={{ isAuthenticated }}>{children}</UserAuthContext.Provider>;
+};
+
+export default PegaAuthProvider;
+
+export const usePegaAuth = (): AuthContextType => {
+  const context = useContext(UserAuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+async function initializeAuthentication() {
+  const { authConfig } = await getSdkConfig();
+
+  if ((authConfig.mashupGrantType === 'none' || !authConfig.mashupClientId) && authConfig.customAuthType === 'Basic') {
+    // Service package to use custom auth with Basic
+    const sB64 = window.btoa(`${authConfig.mashupUserIdentifier}:${window.atob(authConfig.mashupPassword)}`);
+    sdkSetAuthHeader(`Basic ${sB64}`);
+  }
+
+  if ((authConfig.mashupGrantType === 'none' || !authConfig.mashupClientId) && authConfig.customAuthType === 'BasicTO') {
+    const now = new Date();
+    const expTime = new Date(now.getTime() + 5 * 60 * 1000);
+    let sISOTime = `${expTime.toISOString().split('.')[0]}Z`;
+    const regex = /[-:]/g;
+    sISOTime = sISOTime.replace(regex, '');
+    // Service package to use custom auth with Basic
+    const sB64 = window.btoa(`${authConfig.mashupUserIdentifier}:${window.atob(authConfig.mashupPassword)}:${sISOTime}`);
+    sdkSetAuthHeader(`Basic ${sB64}`);
+  }
+
+  if (authConfig.mashupGrantType === 'customBearer' && authConfig.customAuthType === 'CustomIdentifier') {
+    // Use custom bearer with specific custom parameter to set the desired operator via
+    //  a userIdentifier property.  (Caution: highly insecure...being used for simple demonstration)
+    sdkSetCustomTokenParamsCB(() => {
+      return { userIdentifier: authConfig.mashupUserIdentifier };
+    });
+  }
+}