React New design changes for self service portal. by SambhuPega · Pull Request #599 · pegasystems/react-sdk

SambhuPega · 2026-03-09T09:24:50Z

React new design changes for the self service portal

src/samples/mediaco/components/list-view/ListView.tsx

src/samples/mediaco/utils/TodoPortalContext.tsx

src/common.css

tumms2021389 · 2026-03-11T09:27:18Z

src/samples/mediaco/components/Todo/Todo.tsx

+  if (!isMyWorklistChecked) {
+    const pegaMap = SdkComponentMap?.getPegaProvidedComponentMap?.();
+    const OOTBTodo = pegaMap?.['Todo'];
+    if (OOTBTodo) {
+      return <OOTBTodo {...props} />;
+    }
+    return null;
+  }


import OOTBTodo directly from '@pega/react-sdk-components'

tumms2021389 · 2026-03-11T09:28:53Z

src/samples/mediaco/utils/TodoPortalContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState, useRef, type ReactNode, type MutableRefObject } from 'react';


check why it is needed

React doesn't have a direct equivalent of Angular CDK's TemplatePortal + cdkPortalOutlet (where a template is defined in one component and physically projected into another component's render output).

The React-idiomatic way to achieve the same result is exactly what TodoPortalContext does — share data via Context, and let the consuming component render the UI. This is actually the standard React approach:

tumms2021389 · 2026-03-11T09:29:42Z

src/samples/mediaco/mediaCoStyles.scss

@@ -1,2 +1,69 @@
 .mediaco {
+  // Action Buttons styles for MediaCo sample app - start


there is no import for this file anywhere

tumms2021389 · 2026-03-11T09:31:59Z

src/index.tsx

 import TopLevelApp from '../src/samples/TopLevelApp';
 import './common.css';

+// Suppress "Uncaught runtime errors" overlay for non-fatal Axios errors from


remove this

tumms2021389 · 2026-03-11T09:35:12Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+        width: '100%',
+        minHeight: '100%',
+        backgroundColor: '#fff',
+        display: 'flex',
+        flexDirection: 'column'


move these inline styles to classes

tumms2021389 · 2026-03-11T09:35:47Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+    const OOTBSelfServiceCaseView = SdkComponentMap.getPegaProvidedComponentMap().SelfServiceCaseView;
+    return <OOTBSelfServiceCaseView {...props} />;


same here, import from components repo directly

tumms2021389 · 2026-03-11T09:37:53Z

src/samples/mediaco/components/multi-step/MultiStep.tsx

+  // Delegate to OOTB MultiStep when not on the WSS portal
+  const isWssPortal = (PCore.getEnvironmentInfo() as any).environmentInfoObject?.pyPortalTemplate === 'wss';
+  if (!isWssPortal) {
+    const OOTBMultiStep = SdkComponentMap.getPegaProvidedComponentMap().MultiStep;


modify the import

tumms2021389 · 2026-03-11T09:38:27Z

src/samples/mediaco/components/list-view/ListView.tsx

+    const pegaMap = SdkComponentMap?.getPegaProvidedComponentMap?.();
+    const OOTBListView = pegaMap?.['ListView'];
+    if (OOTBListView) {
+      return <OOTBListView {...props} />;
+    }
+    return null;


update this

vishalshrm539 · 2026-03-11T09:48:33Z

src/samples/mediaco/utils/helpers.ts

@@ -0,0 +1,89 @@
+/**
+ * Utility to build the SDK static content URL for icon/image assets.
+ * Mirrors the Angular Utils.getSDKStaticContentUrl / getImageSrc pattern.


Remove this

vishalshrm539 · 2026-03-11T09:48:53Z

src/samples/mediaco/utils/helpers.ts

+}
+
+/**
+ * Fetch work list data from a data page (mirrors Angular fetchMyWorkList).


Remove mirrors Angular fetchMyWorkList

vishalshrm539 · 2026-03-11T09:49:08Z

src/common.css

+  border-color: #6750a4 !important;
+}
+
+/* ========== MediaCo WSS: Assignment-routed banner (matches Angular mat-card style) ========== */


Remove matches Angular mat-card style

vishalshrm539 · 2026-03-11T09:49:32Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+
+/**
+ * Custom ActionButtons for WSS (MediaCo) portal.
+ * Styled to match the Angular SDK's Material 3 button look:


Remove this too

vishalshrm539 · 2026-03-11T09:49:47Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+ * Styled to match the Angular SDK's Material 3 button look:
+ *   - Primary: filled pill buttons with purple background
+ *   - Secondary: outlined pill buttons
+ *   - Layout: left-aligned secondary, right-aligned primary (matching Angular's button-bar)


Remove matching Angular's button-bar

vishalshrm539 · 2026-03-11T09:50:04Z

src/samples/mediaco/components/list-view/helpers.ts

@@ -0,0 +1,53 @@
+/**
+ * ListView-specific helpers — co-located with the ListView component.
+ * Mirrors Angular's list-view/listViewHelpers.ts + utils.ts pattern.


Remove Angular mention

vishalshrm539 · 2026-03-11T09:50:17Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+        )}
+      </div>
+
+      {/* Main case view with flex layout (matching Angular SDK) */}


Remove matching Angular SDK

4manasa · 2026-03-11T11:27:36Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+  const isWssPortal = (PCore.getEnvironmentInfo() as any).environmentInfoObject?.pyPortalTemplate === 'wss';
+  if (!isWssPortal) {
+    const OOTBActionButtons = SdkComponentMap.getPegaProvidedComponentMap().ActionButtons;
+    return <OOTBActionButtons {...props} />;


Import from the components repo

SambhuPega · 2026-03-13T05:48:50Z

src/samples/mediaco/components/app-shell/AppShell.tsx

@@ -0,0 +1,113 @@
+import { type PropsWithChildren, useEffect, useState } from 'react';
+import OOTBAppShell from '@pega/react-sdk-components/lib/components/template/AppShell';


make the OOTB to Appshell

SambhuPega · 2026-03-13T05:51:06Z

src/samples/mediaco/components/multi-step/MultiStep.tsx

+  if (!isWssPortal) {
+    return <OOTBMultiStep {...(props as any)} />;
+  }


not required

SambhuPega · 2026-03-13T06:01:15Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+import { Avatar, Card, CardHeader, Divider, Typography, Button, Menu, MenuItem } from '@mui/material';
+import { useState, type MouseEvent } from 'react';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import OOTBSelfServiceCaseView from '@pega/react-sdk-components/lib/components/template/SelfServiceCaseView';
+import { prepareCaseSummaryData, filterUtilities } from '@pega/react-sdk-components/lib/components/template/utils';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+


update components repo

SambhuPega · 2026-03-13T06:04:48Z

src/samples/mediaco/components/app-shell/AppShell.tsx

+
+  // Fetch case types available to create
+  useEffect(() => {
+    const ei: any = PCore.getEnvironmentInfo();


repurpose the variable

SambhuPega · 2026-03-13T06:12:57Z

src/samples/mediaco/components/footer/Footer.tsx

+      <Box className='mc-footer-container'>
+        {/* Top Section */}
+        <Box className='mc-footer-top'>
+          {/* Column 1 - MediaCo */}


remove comment

SambhuPega · 2026-03-13T06:13:33Z

src/samples/mediaco/components/footer/Footer.tsx

+            </List>
+          </Box>
+
+          {/* Column 3 - Support */}


SambhuPega · 2026-03-13T06:14:03Z

src/samples/mediaco/components/footer/Footer.tsx

+            </List>
+          </Box>
+
+          {/* Column 4 - Contact Us */}


src/samples/mediaco/components/Footer/Footer.tsx

vishalshrm539 · 2026-03-13T06:18:30Z

src/samples/mediaco/components/list-view/helpers.ts

@@ -0,0 +1,52 @@
+/**
+ * ListView-specific helpers — co-located with the ListView component.


Remove this

vishalshrm539 · 2026-03-13T06:19:22Z

src/samples/mediaco/components/ListView/helpers.ts

+ * Maps activity types to icons (for Account History list).
+ */
+export const CASE_TYPE_TO_ACTIVITY_MAP: Record<string, string> = {
+  'Plan Upgrade': 'Plan Upgrade',


Make all of them of uniform type.

vishalshrm539 · 2026-03-13T06:20:08Z

src/samples/mediaco/components/list-view/ListView.tsx

+import { getActivityIcon, timeSince, CASE_TYPE_TO_ACTIVITY_MAP } from './helpers';
+import Carousel from '../carousel';
+import GalleryGrid from '../gallery-grid';
+import OOTBListView from '@pega/react-sdk-components/lib/components/template/ListView';


Remove OOTB and move this above local imports

vishalshrm539 · 2026-03-13T06:20:39Z

src/samples/mediaco/components/list-view/ListView.tsx

+
+  // ── If NOT a custom MediaCo data page → delegate to OOTB ListView immediately ──
+  if (!isCustomDataPage) {
+    return <OOTBListView {...(props as any)} />;


Remove OOTB

vishalshrm539 · 2026-03-13T06:21:10Z

src/samples/mediaco/components/list-view/ListView.tsx

+  const template = preset?.template || '';
+
+  useEffect(() => {
+    const componentConfig: any = pConn.getComponentConfig();


Use the above const

vishalshrm539 · 2026-03-13T06:22:08Z

src/samples/mediaco/components/multi-step/MultiStep.tsx

+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import OOTBMultiStep from '@pega/react-sdk-components/lib/components/infra/MultiStep';


Remove OOTB

vishalshrm539 · 2026-03-13T06:24:19Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

@@ -0,0 +1,190 @@
+import { Avatar, Card, CardHeader, Divider, Typography, Button, Menu, MenuItem } from '@mui/material';
+import { useState, type MouseEvent } from 'react';


move this at the top

vishalshrm539 · 2026-03-13T06:24:36Z

src/samples/mediaco/components/todo/Todo.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState, useCallback } from 'react';
+import OOTBTodo from '@pega/react-sdk-components/lib/components/widget/ToDo';


Remove OOTB

vishalshrm539 · 2026-03-13T06:26:22Z

src/samples/mediaco/sdk-mediaco-component-map.ts

@@ -1,11 +1,28 @@
 // Statically load all "MediaCo" components.
+import './mediaCoStyles.scss';


Move this down

…e react standard

…tep for case-sensitive rename)

… clean up unused code

SambhuPega added 2 commits March 4, 2026 15:49

v1 changes

4d7e676

New design updated after test 1

5f9e59a

SambhuPega requested review from 4manasa, samhere06, tammy-a11y, tumms2021389 and vishalshrm539 March 9, 2026 09:24

Added quick link layout fix and todo widget

57de3a7

SambhuPega commented Mar 11, 2026

View reviewed changes

src/samples/mediaco/components/list-view/ListView.tsx Outdated Show resolved Hide resolved

SambhuPega commented Mar 11, 2026

View reviewed changes

src/samples/mediaco/utils/TodoPortalContext.tsx Show resolved Hide resolved

SambhuPega commented Mar 11, 2026

View reviewed changes

src/common.css Outdated Show resolved Hide resolved

tumms2021389 requested changes Mar 11, 2026

View reviewed changes

vishalshrm539 reviewed Mar 11, 2026

View reviewed changes

4manasa reviewed Mar 11, 2026

View reviewed changes

SambhuPega added 6 commits March 12, 2026 15:39

OOTB import issues and Getconfig props removed

d70d5fc

Listview lable issue is fixed

ca70d01

action button override removed and self service case view updated

b79168c

removed the extra error handling from the index.tsx file

22cc89a

removed the unessary comments

25bf4e5

Style changes updated

cb1c7cd

SambhuPega commented Mar 13, 2026

View reviewed changes

src/samples/mediaco/components/footer/Footer.tsx Outdated

</List>

</Box>

{/* Column 3 - Support */}

Copy link

Contributor Author

SambhuPega Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove

SambhuPega commented Mar 13, 2026

View reviewed changes

src/samples/mediaco/components/footer/Footer.tsx Outdated

</List>

</Box>

{/* Column 4 - Contact Us */}

Copy link

Contributor Author

SambhuPega Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove

SambhuPega commented Mar 13, 2026

View reviewed changes

src/samples/mediaco/components/Footer/Footer.tsx Show resolved Hide resolved

vishalshrm539 reviewed Mar 13, 2026

View reviewed changes

SambhuPega and others added 14 commits March 13, 2026 15:11

OOTB name removed and added mediaco prefix

e571d5d

updated for the pr comments

3701135

Theme changes added

c037f01

removed the comments

9540bb2

updated the varibles in appsehell

838147b

Multistep if condition removed

0c3c9b0

removed self service case view

9d8c248

Naming conventions of the files are changed to pascal according to th…

bfe3354

…e react standard

Build issues fixed

0c14aa0

testing git build workflow issue

b432e0e

reverting the changes done for the github workflow

0586758

chore: rename mediaco component folders with suffix 1 (intermediate s…

887c9ba

…tep for case-sensitive rename)

chore: rename mediaco component folders to PascalCase (remove suffix 1)

25068b7

refactor: replace helper functions with Utils from SDK components and…

6cb670c

… clean up unused code

tumms2021389 approved these changes Mar 16, 2026

View reviewed changes

tumms2021389 merged commit d405164 into main Mar 16, 2026
6 checks passed

tumms2021389 deleted the AI/AtoRv2 branch March 16, 2026 10:33

		@@ -0,0 +1,23 @@
		import { createContext, useContext, useState, useRef, type ReactNode, type MutableRefObject } from 'react';

		@@ -1,2 +1,69 @@
		.mediaco {
		// Action Buttons styles for MediaCo sample app - start

		const OOTBSelfServiceCaseView = SdkComponentMap.getPegaProvidedComponentMap().SelfServiceCaseView;
		return <OOTBSelfServiceCaseView {...props} />;

		@@ -0,0 +1,113 @@
		import { type PropsWithChildren, useEffect, useState } from 'react';
		import OOTBAppShell from '@pega/react-sdk-components/lib/components/template/AppShell';

		@@ -0,0 +1,52 @@
		/**
		* ListView-specific helpers — co-located with the ListView component.

		@@ -0,0 +1,190 @@
		import { Avatar, Card, CardHeader, Divider, Typography, Button, Menu, MenuItem } from '@mui/material';
		import { useState, type MouseEvent } from 'react';

		@@ -0,0 +1,124 @@
		import { useEffect, useState, useCallback } from 'react';
		import OOTBTodo from '@pega/react-sdk-components/lib/components/widget/ToDo';

		@@ -1,11 +1,28 @@
		// Statically load all "MediaCo" components.
		import './mediaCoStyles.scss';

Conversation

SambhuPega commented Mar 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!