the RootComponent
;
- const thePConnObj = EmbeddedTopLevel initialRender in {domContainerID} with PConn of {componentName}
, target);
- }
-
- /**
- * kick off the application's portal that we're trying to serve up
- */
- function startMashup() {
- // NOTE: When loadMashup is complete, this will be called.
- PCore.onPCoreReady(renderObj => {
- // eslint-disable-next-line no-console
- console.log(`PCore ready!`);
- // Check that we're seeing the PCore version we expect
- compareSdkPCoreVersions();
-
- establishPCoreSubscriptions();
- setShowAppName(true);
-
- // Initialize the SdkComponentMap (local and pega-provided)
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
- // eslint-disable-next-line no-console
- console.log(`SdkComponentMap initialized`);
-
- // Don't call initialRender until SdkComponentMap is fully initialized
- initialRender(renderObj);
- });
- });
-
- // load the Mashup and handle the onPCoreEntry response that establishes the
- // top level Pega root element (likely a RootContainer)
-
- myLoadMashup('pega-root', false); // this is defined in bootstrap shell that's been loaded already
- }
-
- // One time (initialization) subscriptions and related unsubscribe
- useEffect(() => {
- getSdkConfig().then((sdkConfig: any) => {
- const sdkConfigAuth = sdkConfig.authConfig;
-
- if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.customAuthType === 'Basic') {
- // Service package to use custom auth with Basic
- const sB64 = window.btoa(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}`);
- sdkSetAuthHeader(`Basic ${sB64}`);
- }
-
- if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.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(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}:${sISOTime}`);
- sdkSetAuthHeader(`Basic ${sB64}`);
- }
-
- if (sdkConfigAuth.mashupGrantType === 'customBearer' && sdkConfigAuth.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: sdkConfigAuth.mashupUserIdentifier };
- });
- }
-
- document.addEventListener('SdkConstellationReady', () => {
- // start the portal
- startMashup();
- });
-
- // Login if needed, without doing an initial main window redirect
- loginIfNecessary({ appName: 'embedded', mainRedirect: false });
- });
-
- // Subscriptions can't be done until onPCoreReady.
- // So we subscribe there. But unsubscribe when this
- // component is unmounted (in function returned from this effect)
-
- return function cleanupSubscriptions() {
- PCore?.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
-
- PCore?.getPubSubUtils().unsubscribe('assignmentFinished', 'assignmentFinished');
- };
- }, []);
-
- function onShopNow(optionClicked: string) {
- const sLevel = optionClicked;
-
- setShowTriplePlayOptions(false);
- setShowPega(true);
-
- getSdkConfig().then(sdkConfig => {
- let mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
- if (!mashupCaseType) {
- // @ts-ignore - Object is possibly 'null'
- const caseTypes: any = PCore.getEnvironmentInfo().environmentInfoObject.pyCaseTypeList;
- mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
- }
-
- const options: any = {
- pageName: 'pyEmbedAssignment',
- startingFields:
- mashupCaseType === 'DIXL-MediaCo-Work-NewService'
- ? {
- Package: sLevel
- }
- : {}
- };
- (PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, options) as Promise
-
- );
-
- const theOptions = shoppingOptions.map((option, index) => {
- return (
-
- Combine TV, Internet, and Voice for the best deal
-
- {theOptions}
-
- );
- }
-
- function getResolutionScreenMarkup() {
- return (
-
-
- );
- }
-
- return (
-
-
-
- Welcome!
-
-
- Thanks for selecting a package with us.
-
- A technician will contact you with in the next couple of days to schedule an installation. -
-
- If you have any questions, you can contact us directly at 1-800-555-1234 or you can chat with us. -
- -
- Thanks for selecting a package with us.
-
- A technician will contact you with in the next couple of days to schedule an installation. -
-
- If you have any questions, you can contact us directly at 1-800-555-1234 or you can chat with us. -
- 
-
- -
-
- - -
- {/*
- );
-}
diff --git a/src/samples/Embedded/Header/index.tsx b/src/samples/Embedded/Header/index.tsx
new file mode 100644
index 00000000..8ae1bda8
--- /dev/null
+++ b/src/samples/Embedded/Header/index.tsx
@@ -0,0 +1,29 @@
+import { Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles(theme => ({
+ embeddedHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ height: '64px',
+ padding: '0px 20px',
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText
+ },
+ embedTopIcon: {
+ width: '40px',
+ filter: 'invert(100%)'
+ }
+}));
+
+export default function Header() {
+ const classes = useStyles();
+
+ return (
+ React SDK: /embedded
*/} -
- {bShowAppName ? {PCore.getEnvironmentInfo().getApplicationLabel()} : null}
-
- 
-
-
-
- {bShowResolutionScreen ? getResolutionScreenMarkup() : null}
- {/* The next div is the container for the Pega work and a corresponding image */}
-
-
-
-
-
-
-
-
- -
* - required fields
-
-
- We need to gather a little information about you.
-
- 
-
-
-
+ {PCore.getEnvironmentInfo().getApplicationLabel()}
+
+
+
+ );
+}
diff --git a/src/samples/Embedded/MainScreen/index.tsx b/src/samples/Embedded/MainScreen/index.tsx
new file mode 100644
index 00000000..1f2e431b
--- /dev/null
+++ b/src/samples/Embedded/MainScreen/index.tsx
@@ -0,0 +1,195 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { useEffect, useMemo, useState } from 'react';
+import { Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+
+import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
+import ShoppingOptionCard from '../ShoppingOptionCard';
+import ResolutionScreen from '../ResolutionScreen';
+import { shoppingOptions } from '../utils';
+
+function RootComponent(props) {
+ const PegaConnectObj = createPConnectComponent();
+ const thePConnObj =
+
+
+ );
+
+ const theOptions = shoppingOptions.map((option, index) => {
+ return
+ Combine TV, Internet, and Voice for the best deal
+
+ {theOptions}
+
+ );
+ }
+
+ return (
+ <>
+ {showTriplePlayOptions ? getShowTriplePlayOptionsMarkup() : null}
+ {showResolution ?
+
+ ) : null}
+
+ );
+}
diff --git a/src/samples/Embedded/ResolutionScreen/index.tsx b/src/samples/Embedded/ResolutionScreen/index.tsx
new file mode 100644
index 00000000..c3517fa0
--- /dev/null
+++ b/src/samples/Embedded/ResolutionScreen/index.tsx
@@ -0,0 +1,69 @@
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles(theme => ({
+ resolutionPart: {
+ display: 'flex',
+ flexDirection: 'row'
+ },
+ resolutionPartAccompanimentLeft: {
+ width: '50%',
+ alignItems: 'center'
+ },
+ resolutionPartAccompanimentRight: {
+ width: '50%',
+ alignItems: 'center',
+ textAlign: 'center'
+ },
+ resolutionPartAccompanimentText: {
+ fontSize: '28px',
+ lineHeight: '40px',
+ padding: '20px 20px',
+ color: 'darkslategray'
+ },
+ pegaPartAccompanimentImage: {
+ width: '700px',
+ margin: '20px',
+ borderRadius: '10px'
+ },
+ resolutionButton: {
+ color: 'white',
+ backgroundColor: theme.palette.warning.main,
+ fontSize: '25px',
+ fontWeight: 'bold',
+ borderRadius: '25px',
+ border: '0px',
+ margin: '20px',
+ padding: '10px 30px'
+ }
+}));
+
+export default function ResolutionScreen() {
+ const classes = useStyles();
+
+ return (
+
+
+
+ +
* - required fields
+
+
+ We need to gather a little information about you.
+
+ 
+
+
+
+
+ );
+}
diff --git a/src/samples/Embedded/ShoppingOptionCard/index.tsx b/src/samples/Embedded/ShoppingOptionCard/index.tsx
new file mode 100644
index 00000000..c15e079e
--- /dev/null
+++ b/src/samples/Embedded/ShoppingOptionCard/index.tsx
@@ -0,0 +1,162 @@
+/* eslint-disable react/button-has-type */
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles(theme => ({
+ swatchHeader: {
+ display: 'flex',
+ flexDirection: 'row',
+ backgroundColor: '#333000'
+ },
+ swatchPackage: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-around',
+ width: '260px',
+ height: '70px',
+ backgroundColor: '#333000',
+ padding: '5px'
+ },
+ swatchPlay: {
+ letterSpacing: 'normal',
+ color: 'white',
+ fontSize: '25px'
+ },
+ swatchLevel: {
+ letterSpacing: 'normal',
+ color: 'white',
+ fontSize: '28px',
+ fontWeight: 'bold'
+ },
+ swatchChannels: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ letterSpacing: 'normal',
+ alignItems: 'center',
+ backgroundColor: theme.palette.primary.main,
+ width: '100px'
+ },
+ swatchCount: {
+ letterSpacing: 'normal',
+ color: 'white',
+ fontSize: '40px',
+ fontWeight: 'bold'
+ },
+ swatchLabel: {
+ letterSpacing: 'normal',
+ color: 'white',
+ fontSize: '17px'
+ },
+ swatchBody: {
+ letterSpacing: 'normal',
+ border: '1px solid lightgray',
+ backgroundColor: '#fafafa',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ paddingBottom: '20px'
+ },
+ swatchBanner: {
+ letterSpacing: 'normal',
+ fontWeight: 'bold',
+ fontSize: '15px',
+ padding: '5px'
+ },
+ swatchPrice: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ swatchFromGroup: {
+ height: '90px'
+ },
+ swatchFrom: {
+ color: theme.palette.primary.main,
+ textAlign: 'right'
+ },
+ swatchCurrency: {
+ letterSpacing: 'normal',
+ color: theme.palette.primary.main,
+ fontSize: '30px',
+ fontWeight: 'bold',
+ fontFamily: 'Tahoma'
+ },
+ swatchDollars: {
+ letterSpacing: 'normal',
+ color: theme.palette.primary.main,
+ fontSize: '90px',
+ fontWeight: 'bold',
+ fontFamily: 'Tahoma'
+ },
+ swatchCents: {
+ letterSpacing: 'normal',
+ color: theme.palette.primary.main,
+ fontSize: '20px',
+ fontWeight: 'bold',
+ fontFamily: 'Tahoma'
+ },
+ swatchMonthly: {
+ display: 'flex',
+ flexDirection: 'column'
+ },
+ swatchShopButton: {
+ color: 'white',
+ backgroundColor: theme.palette.warning.main,
+ fontSize: '25px',
+ fontWeight: 'bold',
+ borderRadius: '25px',
+ border: '0px',
+ margin: '20px',
+ padding: '10px 30px'
+ }
+}));
+
+export default function ShoppingOptionCard(props) {
+ const classes = useStyles();
+
+ const { play, level, channels, channels_full: channelsFull, banner, price, internetSpeed, calling } = props;
+
+ return (
+
+
+
+
+
+ Welcome!
+
+
+ Thanks for selecting a package with us.
+
+ A technician will contact you with in the next couple of days to schedule an installation. +
+
+ If you have any questions, you can contact us directly at 1-800-555-1234 or you can chat with us. +
+ +
+ Thanks for selecting a package with us.
+
+ A technician will contact you with in the next couple of days to schedule an installation. +
+
+ If you have any questions, you can contact us directly at 1-800-555-1234 or you can chat with us. +
+
+
+ +
+
+ + +
+
+ );
+}
diff --git a/src/samples/Embedded/index.tsx b/src/samples/Embedded/index.tsx
new file mode 100644
index 00000000..d10b5ad0
--- /dev/null
+++ b/src/samples/Embedded/index.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { useEffect, useState } from 'react';
+import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material';
+import { getSdkConfig, loginIfNecessary } from '@pega/auth/lib/sdk-auth-manager';
+
+import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { compareSdkPCoreVersions } from '@pega/react-sdk-components/lib/components/helpers/versionHelpers';
+
+import Header from './Header';
+import MainScreen from './MainScreen';
+import localSdkComponentMap from '../../../sdk-local-component-map';
+import { initializeAuthentication } from './utils';
+import { theme } from '../../theme';
+
+declare const myLoadMashup: any;
+
+export default function Embedded() {
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [rootProps, setRootProps] = useState({});
+
+ useEffect(() => {
+ initialize();
+ }, []);
+
+ const initialize = async () => {
+ try {
+ // Add event listener for when logged in and constellation bootstrap is loaded
+ document.addEventListener('SdkConstellationReady', () => handleSdkConstellationReady());
+
+ const { authConfig } = await getSdkConfig();
+ initializeAuthentication(authConfig);
+
+ // this function will handle login process, and SdkConstellationReady event will be fired once PCore is ready
+ loginIfNecessary({ appName: 'embedded', mainRedirect: false });
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('Something went wrong while login', error);
+ }
+ };
+
+ const initializeRootContainerProps = renderObj => {
+ const { props } = renderObj;
+
+ setRootProps(props);
+ };
+
+ const startMashup = () => {
+ PCore.onPCoreReady(async renderObj => {
+ // Check that we're seeing the PCore version we expect
+ compareSdkPCoreVersions();
+
+ await getSdkComponentMap(localSdkComponentMap);
+ // eslint-disable-next-line no-console
+ console.log(`SdkComponentMap initialized`);
+
+ // Don't call initializeRootContainerProps until SdkComponentMap is fully initialized
+ initializeRootContainerProps(renderObj);
+ });
+
+ myLoadMashup('pega-root', false); // this is defined in bootstrap shell that's been loaded already
+ };
+
+ const handleSdkConstellationReady = () => {
+ setIsLoggedIn(true);
+
+ startMashup();
+ };
+
+ return (
+
+
+
+
+ {play}
+ {level}
+
+
+ {channels}
+ Channels
+
+
+ {banner}
+ -
+
- {channelsFull} channels plus FREE HD +
- Thousands of On Demand choices +
- Watch on the {PCore.getEnvironmentInfo().getApplicationLabel()} App +
- Up to {internetSpeed} Internet Speeds +
- Unlimited nationwide calling {calling} +
+
+
+
+
+ From
+ $
+ {price.substring(0, price.indexOf('.'))}
+
+
+ {price.substring(price.indexOf('.') + 1)}
+ for 12 months
+ when bundled
+
+
+
+ Loading...
+ )}
+