From 80a910ca7e5026fffb5f75c80840c9f85e48523d Mon Sep 17 00:00:00 2001 From: SambhuPega Date: Tue, 28 Oct 2025 15:18:32 +0530 Subject: [PATCH 1/3] Theme file change and header component update in embedded --- .../src/samples/Embedded/Header/index.tsx | 8 ++++---- packages/react-sdk-components/src/theme.ts | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/react-sdk-components/src/samples/Embedded/Header/index.tsx b/packages/react-sdk-components/src/samples/Embedded/Header/index.tsx index 3820a253..e9a388c9 100644 --- a/packages/react-sdk-components/src/samples/Embedded/Header/index.tsx +++ b/packages/react-sdk-components/src/samples/Embedded/Header/index.tsx @@ -3,7 +3,7 @@ import { makeStyles } from '@mui/styles'; const useStyles = makeStyles(theme => ({ header: { - backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-nav-bg)' : theme.palette.background.paper, + backgroundColor: theme.headerNav.backgroundColor, borderBottom: `1px solid ${theme.palette.divider}`, padding: '1rem 0' }, @@ -64,10 +64,10 @@ const useStyles = makeStyles(theme => ({ margin: 0, '& a': { textDecoration: 'none', - color: theme.palette.mode === 'dark' ? 'var(--app-nav-color)' : theme.palette.text.primary, + color: theme.headerNav.navLinkColor, transition: 'color 0.3s ease', '&:hover': { - color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.primary.main + color: theme.headerNav.navLinkHoverColor } }, '@media (max-width: 768px)': { @@ -103,7 +103,7 @@ const useStyles = makeStyles(theme => ({ cursor: 'pointer', zIndex: 1001, padding: 0, - color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary, + color: theme.headerNav.menuToggleColor, '@media (max-width: 768px)': { display: 'block' } diff --git a/packages/react-sdk-components/src/theme.ts b/packages/react-sdk-components/src/theme.ts index 8dda23bd..e4c16d08 100644 --- a/packages/react-sdk-components/src/theme.ts +++ b/packages/react-sdk-components/src/theme.ts @@ -4,6 +4,7 @@ import type { Theme } from '@mui/material/styles'; import sdkConfig from '../../../sdk-config.json'; + /** * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package. * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core. @@ -20,6 +21,12 @@ declare module '@mui/styles/defaultTheme' { backgroundColor: string; topColor: string; }; + headerNav: { + backgroundColor: string; + navLinkColor: string; + navLinkHoverColor: string; + menuToggleColor: string; + }; embedded: { resolutionTextColor: string; }; @@ -145,6 +152,12 @@ const lightTheme = createTheme({ } } }, + headerNav: { + backgroundColor: '#ffffff', + navLinkColor: 'rgba(0, 0, 0, 0.87)', + navLinkHoverColor: '#3f51b5', + menuToggleColor: 'rgba(0, 0, 0, 0.87)' + }, actionButtons: { primary: { backgroundColor: '#cc0f60', @@ -212,6 +225,12 @@ const darkTheme = createTheme({ } } }, + headerNav: { + backgroundColor: 'var(--app-nav-bg)', + navLinkColor: 'var(--app-nav-color)', + navLinkHoverColor: '#ffffff', + menuToggleColor: '#ffffff' + }, actionButtons: { primary: { backgroundColor: '#C70BB5', From a20cd37e3bbb7d7e6bdab16652cd1b88fcef04c0 Mon Sep 17 00:00:00 2001 From: SambhuPega Date: Wed, 29 Oct 2025 15:56:55 +0530 Subject: [PATCH 2/3] Added casetype in sdk-config for embedded and updated styles for Header --- .../src/samples/Embedded/MainScreen/index.tsx | 4 ++-- sdk-config.json | 5 +++-- tsconfig.json | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx b/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx index f581d6f7..40e7f1a4 100644 --- a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx +++ b/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx @@ -5,6 +5,7 @@ import { makeStyles } from '@mui/styles'; import StoreContext from '../../../bridge/Context/StoreContext'; import createPConnectComponent from '../../../bridge/react_pconnect'; +import sdkConfigData from '../../../../../../sdk-config.json'; import ShoppingOptionCard from '../ShoppingOptionCard'; import ResolutionScreen from '../ResolutionScreen'; import { shoppingOptions } from '../utils'; @@ -164,8 +165,7 @@ export default function MainScreen(props) { if (!mashupCaseType) { const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList; if (caseTypes && caseTypes.length > 0) { - //mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName; - mashupCaseType = 'DIXL-MediaCo-Work-PurchasePhone'; + mashupCaseType = sdkConfigData.authConfig.mashupCaseType; } } let selectedPhoneGUID = ''; diff --git a/sdk-config.json b/sdk-config.json index f68922fe..1fa6eb9a 100644 --- a/sdk-config.json +++ b/sdk-config.json @@ -2,7 +2,7 @@ "comment_sdk_config": "This is the configuration file for the React SDK Components", "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings", "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html", - "theme": "light", + "theme": "dark", "authConfig": { "authService": "pega", @@ -14,7 +14,8 @@ "mashupPassword": "", "portalClientId_comment": "Client ID from the OAuth 2.0 Client Registration record used for portal use case", - "portalClientId": "25795373220702300272" + "portalClientId": "25795373220702300272", + "mashupCaseType": "DIXL-MediaCo-Work-PurchasePhone" }, "serverConfig": { diff --git a/tsconfig.json b/tsconfig.json index 826baf63..709698dd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "allowJs": true, // must be false for @pega/pcore-pconnect-typedefs "noImplicitAny": false, "allowSyntheticDefaultImports": true, + "resolveJsonModule": true, // End of copied from SDK-R // Need to add this to remove errors of .js files trying to compile to the same path From dcb3705edeab5a18c4f5d7a383e720179a85b8a9 Mon Sep 17 00:00:00 2001 From: Siva Rama Krishna Date: Wed, 29 Oct 2025 23:56:54 +0530 Subject: [PATCH 3/3] PR comments addressed --- .../src/samples/Embedded/MainScreen/index.tsx | 3 +-- packages/react-sdk-components/src/theme.ts | 1 - sdk-config.json | 7 +++---- tsconfig.json | 1 - 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx b/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx index 40e7f1a4..de8b91f6 100644 --- a/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx +++ b/packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx @@ -5,7 +5,6 @@ import { makeStyles } from '@mui/styles'; import StoreContext from '../../../bridge/Context/StoreContext'; import createPConnectComponent from '../../../bridge/react_pconnect'; -import sdkConfigData from '../../../../../../sdk-config.json'; import ShoppingOptionCard from '../ShoppingOptionCard'; import ResolutionScreen from '../ResolutionScreen'; import { shoppingOptions } from '../utils'; @@ -165,7 +164,7 @@ export default function MainScreen(props) { if (!mashupCaseType) { const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList; if (caseTypes && caseTypes.length > 0) { - mashupCaseType = sdkConfigData.authConfig.mashupCaseType; + mashupCaseType = mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName; } } let selectedPhoneGUID = ''; diff --git a/packages/react-sdk-components/src/theme.ts b/packages/react-sdk-components/src/theme.ts index e4c16d08..68fc12cc 100644 --- a/packages/react-sdk-components/src/theme.ts +++ b/packages/react-sdk-components/src/theme.ts @@ -4,7 +4,6 @@ import type { Theme } from '@mui/material/styles'; import sdkConfig from '../../../sdk-config.json'; - /** * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package. * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core. diff --git a/sdk-config.json b/sdk-config.json index 1fa6eb9a..d46208e6 100644 --- a/sdk-config.json +++ b/sdk-config.json @@ -2,7 +2,7 @@ "comment_sdk_config": "This is the configuration file for the React SDK Components", "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings", "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html", - "theme": "dark", + "theme": "light", "authConfig": { "authService": "pega", @@ -14,8 +14,7 @@ "mashupPassword": "", "portalClientId_comment": "Client ID from the OAuth 2.0 Client Registration record used for portal use case", - "portalClientId": "25795373220702300272", - "mashupCaseType": "DIXL-MediaCo-Work-PurchasePhone" + "portalClientId": "25795373220702300272" }, "serverConfig": { @@ -32,7 +31,7 @@ "appPortal": "", "appMashupCaseType_comment": "If specified, uses this case type for mashup. Otherwise, uses the first case type found for the app", - "appMashupCaseType": "", + "appMashupCaseType": "DIXL-MediaCo-Work-PurchasePhone", "excludePortals_comment": "Array of specific portals to avoid attempting to load with SDK", "excludePortals": ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"] diff --git a/tsconfig.json b/tsconfig.json index 709698dd..826baf63 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,6 @@ "allowJs": true, // must be false for @pega/pcore-pconnect-typedefs "noImplicitAny": false, "allowSyntheticDefaultImports": true, - "resolveJsonModule": true, // End of copied from SDK-R // Need to add this to remove errors of .js files trying to compile to the same path