@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/src/MashupApp.tsx

@@ -5,7 +5,7 @@
  * Flow:
  *   1. Auth via AuthClient → @pega/auth
  *   2. Bootstrap via BootstrapClient.loadMashup()
- *   3. Show "Create Case" button
+ *   3. Show service portal homepage with quick-link cards
  *   4. On click → PCore.getMashupApi().createCase()
  *   5. PConnectComponent renders the case form via registered sample components
  */
@@ -13,19 +13,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // ── React adapter (includes sdk-core re-exports)  ───────────────────────────────────────
-import {
-  PConnectComponent,
-  PegaStoreContext,
-  registerComponentCreator,
-} from '@pega/sdk-react';
-
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
+import { PConnectComponent, PegaStoreContext, registerComponentCreator } from '@pega/sdk-react';
 
 // ── Sample components (local to this app) ───────────────────────────────────────────────────────
 import { registerSampleComponents } from './components/component-map';
+import { AppProviders } from './AppProviders';
 
 // ── @pega/auth for SDK config access ────────────────────────────────────────
 import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
@@ -34,55 +26,75 @@ import { AuthClient } from '@pega/auth';
 import { styles } from './MashupApp.styles';
 import { FallbackComponent } from './FallbackComponent';
 
-// ─── Create component registry + register sample components ─────────────────
-// const registry =
-//   createComponentRegistry<React.ComponentType<Record<string, unknown>>>();
-// registerSampleComponents(registry);
-
-// ─── Root Component ─────────────────────────────────────────────────────────
-const muiTheme = createTheme();
-
-function RootComponent({
-  renderProps,
-  registry,
-}: {
-  renderProps: Record<string, unknown>;
-  registry: any;
-}) {
+// ─── Quick-link card definitions ────────────────────────────────────────────
+const QUICK_LINKS = [
+  {
+    id: 'new-service',
+    icon: '📋',
+    title: 'New Service Request',
+    desc: 'Submit a new service request and track its progress in real-time.',
+    active: true,
+  },
+  {
+    id: 'my-cases',
+    icon: '📊',
+    title: 'View My Cases',
+    desc: 'Check the status of your existing cases and requests.',
+    active: false,
+  },
+  {
+    id: 'billing',
+    icon: '💳',
+    title: 'Billing Inquiry',
+    desc: 'Review invoices, payments, and billing history.',
+    active: false,
+  },
+  {
+    id: 'support',
+    icon: '🔧',
+    title: 'Technical Support',
+    desc: 'Get help with technical issues and troubleshooting.',
+    active: false,
+  },
+  {
+    id: 'contact',
+    icon: '📞',
+    title: 'Contact Us',
+    desc: 'Reach our support team via phone, email, or chat.',
+    active: false,
+  },
+  {
+    id: 'tracking',
+    icon: '📦',
+    title: 'Order Tracking',
+    desc: 'Track your orders and deliveries in real-time.',
+    active: false,
+  },
+];
+
+function RootComponent({ renderProps, registry }: { renderProps: Record<string, unknown>; registry: any }) {
   const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
-
   const getPConnect = renderProps.getPConnect as () => any;
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <LegacyThemeProvider theme={muiTheme}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <PegaStoreContext.Provider value={contextValue}>
-            <div style={styles.root}>
-              <PConnectComponent
-                getPConnect={getPConnect}
-                componentRegistry={registry}
-                fallback={FallbackComponent}
-              />
-            </div>
-          </PegaStoreContext.Provider>
-        </LocalizationProvider>
-      </LegacyThemeProvider>
-    </ThemeProvider>
+    <AppProviders>
+      <PegaStoreContext.Provider value={contextValue}>
+        <div style={styles.root}>
+          <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
+        </div>
+      </PegaStoreContext.Provider>
+    </AppProviders>
   );
 }
 
 // ─── Mashup App ─────────────────────────────────────────────────────────────
 function MashupApp() {
   const [isPegaReady, setIsPegaReady] = useState(false);
-  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(
-    null,
-  );
+  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [loading, setLoading] = useState(false);
   const authClientRef = useRef<AuthClient | null>(null);
-
-  let registry;
+  const registryRef = useRef<any>(null);
 
   // ── 1. Auth + Bootstrap mashup on mount ─────────────────────────────────
   useEffect(() => {
@@ -106,8 +118,9 @@ function MashupApp() {
       } = PCore.getInitialiser().getSdkCore();
 
       // ─── Create component registry + register sample components ─────────────────
-      registry = createComponentRegistry();
+      const registry = createComponentRegistry();
       registerSampleComponents(registry);
+      registryRef.current = registry;
 
       // Register component creator so PCore uses our bridge
       registerComponentCreator(registry, FallbackComponent);
@@ -149,20 +162,15 @@ function MashupApp() {
     );
 
     PCore.getPubSubUtils().subscribe(
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS
-        .END_OF_ASSIGNMENT_PROCESSING,
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
       () => setShowForm(false),
       doneId,
     );
 
     return () => {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, cancelId);
       PCore.getPubSubUtils().unsubscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
-        cancelId,
-      );
-      PCore.getPubSubUtils().unsubscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS
-          .END_OF_ASSIGNMENT_PROCESSING,
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
         doneId,
       );
     };
@@ -177,15 +185,13 @@ function MashupApp() {
 
     try {
       const sdkConfig = await getSdkConfig();
-      const mashupCaseType = (
-        sdkConfig as Record<string, Record<string, unknown>>
-      ).serverConfig.appMashupCaseType as string;
-
-      await PCore.getMashupApi().createCase(
-        mashupCaseType,
-        PCore.getConstants().APP.APP,
-        { pageName: 'pyEmbedAssignment', startingFields: {} },
-      );
+      const mashupCaseType = (sdkConfig as Record<string, Record<string, unknown>>).serverConfig
+        .appMashupCaseType as string;
+
+      await PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, {
+        pageName: 'pyEmbedAssignment',
+        startingFields: {},
+      });
     } catch (err) {
       console.error('Error creating case:', err);
       setShowForm(false);
@@ -197,55 +203,139 @@ function MashupApp() {
   // ── Render ──────────────────────────────────────────────────────────────
   if (!isPegaReady) {
     return (
-      <div className='loading-container'>
-        <span className='loading-text'>Authenticating and loading Pega...</span>
+      <div className="loading-container">
+        <span className="loading-text">Authenticating and loading Pega...</span>
       </div>
     );
   }
 
   return (
-    <div id='pega-root' style={styles.app.container}>
-      {/* Header */}
-      <div style={styles.app.header}>
-        <span style={styles.app.headerTitle}>
-          Pega SDK — React Mashup Sample
-        </span>
-        <button
-          type='button'
-          onClick={() => authClientRef.current?.logout()}
-          style={styles.app.logoutButton}
+    <div id="pega-root" style={styles.app.container}>
+      {/* ── Nav Bar ──────────────────────────────────────────────── */}
+      <nav style={styles.app.nav}>
+        <div
+          style={styles.app.navLogo}
+          onClick={() => setShowForm(false)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => e.key === 'Enter' && setShowForm(false)}
         >
-          Logout
+          <span style={styles.app.navLogoIcon}>🏠</span>
+          <span>Pega Services</span>
+        </div>
+        <div style={styles.app.navRight}>
+          <button type="button" onClick={() => authClientRef.current?.logout()} style={styles.app.logoutButton}>
+            Logout
+          </button>
+        </div>
+      </nav>
+
+      {/* ── Screen: Homepage with Quick Links ────────────────────── */}
+      {!showForm && (
+        <div style={styles.app.homeContent}>
+          <h1 style={styles.app.homeTitle}>Welcome to Pega Services</h1>
+          <p style={styles.app.homeSubtitle}>What would you like to do today?</p>
+
+          <div style={styles.app.cardGrid}>
+            {QUICK_LINKS.map((link) =>
+              link.active ? (
+                <div
+                  key={link.id}
+                  style={styles.app.cardActive}
+                  onClick={handleCreateCase}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => e.key === 'Enter' && handleCreateCase()}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 12px 24px rgba(0,0,0,0.15)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'none';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 6px 16px rgba(0,0,0,0.12)';
+                  }}
+                >
+                  <div style={styles.app.cardIconActive}>
+                    <span>{link.icon}</span>
+                  </div>
+                  <div style={styles.app.cardTitle}>{link.title}</div>
+                  <div style={styles.app.cardDesc}>{link.desc}</div>
+                  <div style={styles.app.cardAction}>Start →</div>
+                </div>
+              ) : (
+                <div key={link.id} style={styles.app.cardDisabled}>
+                  <div style={styles.app.cardIcon}>
+                    <span>{link.icon}</span>
+                  </div>
+                  <div style={styles.app.cardTitle}>{link.title}</div>
+                  <div style={styles.app.cardDesc}>{link.desc}</div>
+                  <span style={styles.app.comingSoonBadge}>Coming Soon</span>
+                </div>
+              ),
+            )}
+          </div>
+
+          <div style={styles.app.trustBar}>
+            <span style={styles.app.trustItem}>
+              <span>🏆</span> Trusted by thousands
+            </span>
+            <span style={styles.app.trustItem}>
+              <span>🕐</span> 24/7 Support
+            </span>
+            <span style={styles.app.trustItem}>
+              <span>🔒</span> Enterprise Grade
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* ── Form screen — always mounted for PCore, hidden on homepage ── */}
+      <div style={showForm ? styles.app.formContent : { display: 'none' }}>
+        <button type="button" style={styles.app.backButton} onClick={() => setShowForm(false)}>
+          ← Back to Services
         </button>
-      </div>
 
-      <div style={styles.app.content}>
-        {!showForm && (
-          <div style={styles.app.welcome}>
-            <h2 style={styles.app.welcomeHeading}>Ready to go</h2>
-            <p style={styles.app.welcomeText}>
-              Click below to create a new case and see the Pega form components
-              in action.
-            </p>
-            <button
-              type='button'
-              onClick={handleCreateCase}
-              style={styles.app.createButton}
-            >
-              Create Case
-            </button>
+        <div style={styles.app.twoCol}>
+          {/* Left info panel (40%) */}
+          <div style={styles.app.leftPanel}>
+            <div style={styles.app.leftPanelInner}>
+              <h2 style={styles.app.leftTitle}>📋 New Service Request</h2>
+              <p style={styles.app.leftSubtitle}>MediaCo Digital Services</p>
+
+              <div style={styles.app.leftBadges}>
+                <span style={styles.app.heroBadge}>⚡ Fast Processing</span>
+                <span style={styles.app.heroBadge}>🔒 Secure</span>
+                <span style={styles.app.heroBadge}>📊 Trackable</span>
+              </div>
+
+              <div style={styles.app.leftDivider} />
+
+              <div style={styles.app.leftChecks}>
+                <span style={styles.app.footerItem}>
+                  <span style={styles.app.footerCheck}>✓</span> Free to submit
+                </span>
+                <span style={styles.app.footerItem}>
+                  <span style={styles.app.footerCheck}>✓</span> Cancel anytime
+                </span>
+                <span style={styles.app.footerItem}>
+                  <span style={styles.app.footerCheck}>✓</span> 24-hour processing
+                </span>
+                <span style={styles.app.footerItem}>
+                  <span style={styles.app.footerCheck}>✓</span> Track your request
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Right form card (60%) */}
+          <div style={styles.app.formCard}>
+            {loading ? (
+              <div style={styles.app.loading}>Loading your form...</div>
+            ) : rootProps ? (
+              <RootComponent renderProps={rootProps} registry={registryRef.current} />
+            ) : null}
           </div>
-        )}
-
-        {/* {showForm && ( */}
-        <div style={styles.app.formArea}>
-          {loading ? (
-            <div style={styles.app.loading}>Loading case form...</div>
-          ) : rootProps ? (
-            <RootComponent renderProps={rootProps} registry={registry} />
-          ) : null}
         </div>
-        {/* )} */}
       </div>
     </div>
   );

package/templates/react-sdk-reference/src/PortalApp.tsx

@@ -11,59 +11,32 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import {
-  PConnectComponent,
-  PegaStoreContext,
-  registerComponentCreator,
-} from '@pega/sdk-react';
-
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
+import { PConnectComponent, PegaStoreContext, registerComponentCreator } from '@pega/sdk-react';
 
 import { registerSampleComponents } from './components/component-map';
+import { AppProviders } from './AppProviders';
 import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 import { AuthClient } from '@pega/auth';
 
 import { FallbackComponent } from './FallbackComponent';
 
-// ─── Root Component ─────────────────────────────────────────────────────────
-const muiTheme = createTheme();
-
-function RootComponent({
-  renderProps,
-  registry,
-}: {
-  renderProps: Record<string, unknown>;
-  registry: any;
-}) {
+function RootComponent({ renderProps, registry }: { renderProps: Record<string, unknown>; registry: any }) {
   const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
   const getPConnect = renderProps.getPConnect as () => any;
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <LegacyThemeProvider theme={muiTheme}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <PegaStoreContext.Provider value={contextValue}>
-            <PConnectComponent
-              getPConnect={getPConnect}
-              componentRegistry={registry}
-              fallback={FallbackComponent}
-            />
-          </PegaStoreContext.Provider>
-        </LocalizationProvider>
-      </LegacyThemeProvider>
-    </ThemeProvider>
+    <AppProviders>
+      <PegaStoreContext.Provider value={contextValue}>
+        <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
+      </PegaStoreContext.Provider>
+    </AppProviders>
   );
 }
 
 // ─── Portal App ─────────────────────────────────────────────────────────────
 function PortalApp() {
   const [isPegaReady, setIsPegaReady] = useState(false);
-  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(
-    null,
-  );
+  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(null);
   const authClientRef = useRef<AuthClient | null>(null);
   const registryRef = useRef<unknown>(null);
 
@@ -110,13 +83,9 @@ function PortalApp() {
       registryRef.current = registry;
 
       // Determine which portal to load
-      const sdkConfig = (await getSdkConfig()) as Record<
-        string,
-        Record<string, unknown>
-      >;
+      const sdkConfig = (await getSdkConfig()) as Record<string, Record<string, unknown>>;
       const appPortal = sdkConfig.serverConfig.appPortal as string;
-      const excludePortals = (sdkConfig.serverConfig.excludePortals ??
-        []) as string[];
+      const excludePortals = (sdkConfig.serverConfig.excludePortals ?? []) as string[];
 
       const queryPortal = sessionStorage.getItem('rsdk_portalName');
       const portalName = queryPortal || appPortal || undefined;
@@ -130,9 +99,7 @@ function PortalApp() {
         targetId: 'pega-root',
       });
 
-      console.log(
-        `Loading portal: ${portalName}, excluding portals: ${excludePortals}`,
-      );
+      console.log(`Loading portal: ${portalName}, excluding portals: ${excludePortals}`);
       const result = await client.loadPortal({
         portalName,
         excludePortals,
@@ -157,16 +124,14 @@ function PortalApp() {
   // ── Render ──────────────────────────────────────────────────────────────
   if (!isPegaReady || !rootProps) {
     return (
-      <div className='loading-container'>
-        <span className='loading-text'>
-          Authenticating and loading portal...
-        </span>
+      <div className="loading-container">
+        <span className="loading-text">Authenticating and loading portal...</span>
       </div>
     );
   }
 
   return (
-    <div id='pega-root'>
+    <div id="pega-root">
       <RootComponent renderProps={rootProps} registry={registryRef.current} />
     </div>
   );

package/templates/react-sdk-reference/src/components/component-map.ts

@@ -119,10 +119,7 @@ import {
 /**
  * Returns a map of Pega component names → sample React components.
  */
-function getSampleComponentMap(): Record<
-  string,
-  React.ComponentType<Record<string, unknown>>
-> {
+function getSampleComponentMap(): Record<string, React.ComponentType<Record<string, unknown>>> {
   return {
     // Infrastructure from sdk-react (includes View, Region, Reference,
     // RootContainer, FlowContainer, ViewContainer, Assignment, AssignmentCard, etc.)
@@ -243,9 +240,7 @@ function getSampleComponentMap(): Record<
   } as unknown as Record<string, React.ComponentType<Record<string, unknown>>>;
 }
 
-function registerSampleComponents(
-  registry: ComponentRegistry<React.ComponentType<Record<string, unknown>>>,
-): void {
+function registerSampleComponents(registry: ComponentRegistry<React.ComponentType<Record<string, unknown>>>): void {
   const map = getSampleComponentMap();
   for (const [name, component] of Object.entries(map)) {
     registry.register(name, component);

package/templates/react-sdk-reference/src/components/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -17,9 +17,7 @@ const VARIANT_MAP: Record<string, { severity: string; label: string }> = {
   info: { severity: 'info', label: 'Info' },
 };
 
-function renderMessage(
-  message: string | { label?: string; description?: string },
-) {
+function renderMessage(message: string | { label?: string; description?: string }) {
   if (typeof message === 'object' && message !== null) {
     const label = message.label || '';
     const description = message.description || '';
@@ -42,42 +40,23 @@ function renderMessage(
   );
 }
 
-export default function AlertBanner({
-  id,
-  variant,
-  messages,
-  onDismiss,
-}: AlertBannerProps) {
+export default function AlertBanner({ id, variant, messages, onDismiss }: AlertBannerProps) {
   const { severity, label } = VARIANT_MAP[variant] ?? VARIANT_MAP.info;
   const isMultiple = messages.length > 1;
 
   return (
     <div id={id}>
-      <Alert
-        variant='outlined'
-        severity={severity as any}
-        {...(onDismiss && { onClose: onDismiss })}
-      >
+      <Alert variant="outlined" severity={severity as any} {...(onDismiss && { onClose: onDismiss })}>
         {isMultiple && (
-          <AlertTitle className='alert-banner-title'>
+          <AlertTitle className="alert-banner-title">
             {label}
-            <span
-              className={`alert-banner-badge alert-banner-badge--${variant}`}
-            >
-              {messages.length}
-            </span>
+            <span className={`alert-banner-badge alert-banner-badge--${variant}`}>{messages.length}</span>
           </AlertTitle>
         )}
         {isMultiple ? (
-          <ul className='alert-banner-list'>
+          <ul className="alert-banner-list">
             {messages.map((message, index) => (
-              <li
-                key={
-                  typeof message === 'string'
-                    ? message
-                    : `${message.label}-${index}`
-                }
-              >
+              <li key={typeof message === 'string' ? message : `${message.label}-${index}`}>
                 {renderMessage(message)}
               </li>
             ))}

package/templates/react-sdk-reference/src/components/designSystemExtension/Banner/Banner.tsx

@@ -25,22 +25,27 @@ export default function Banner(props: BannerProps) {
   const variantMap = {
     'two-column': [6, 6],
     'narrow-wide': [4, 8],
-    'wide-narrow': [8, 4]
+    'wide-narrow': [8, 4],
   };
   return (
     <div style={{ marginBottom: '2rem' }}>
-      <div className='background-image-style' style={{ backgroundImage: `url(${backgroundImage})` }}>
-        <div className='background-style content'>
+      <div className="background-image-style" style={{ backgroundImage: `url(${backgroundImage})` }}>
+        <div className="background-style content">
           <div>
-            <h1 className='title'>{title}</h1>
-            <p className='message'>{message}</p>
+            <h1 className="title">{title}</h1>
+            <p className="message">{message}</p>
           </div>
         </div>
       </div>
-      <Grid container size={12} className='banner-layout' spacing={1}>
+      <Grid container size={12} className="banner-layout" spacing={1}>
         <Grid
           size={{ xs: variantMap[variant][0] }}
-          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+          style={{
+            padding: '1rem',
+            backgroundColor: 'var(--app-form-bg-color)',
+            borderRadius: '16px',
+            height: 'fit-content',
+          }}
         >
           {a}
         </Grid>