refactor: Mashup code cleanup changes (#412)

src/app/_samples/embedded/embedded.component.html

@@ -0,0 +1,12 @@
+<div class="progress-box" *ngIf="isProgress$">
+  <mat-spinner class="progress-spinner"></mat-spinner>
+</div>
+
+<div *ngIf="bLoggedIn$; else loading">
+  <app-header></app-header>
+  <app-main-screen *ngIf="bHasPConnect$" [pConn$]="pConn$"></app-main-screen>
+</div>
+
+<ng-template #loading>
+  <div>Loading...</div>
+</ng-template>

src/app/_samples/embedded/embedded.component.scss

@@ -0,0 +1,18 @@
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--app-background-color);
+  position: fixed;
+  z-index: 99999;
+  top: 0px;
+  left: 0px;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}

src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.spec.ts → src/app/_samples/embedded/embedded.component.spec.ts

@@ -1,19 +1,19 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { TopAppMashupComponent } from './top-app-mashup.component';
+import { EmbeddedComponent } from './embedded.component';
 
-describe('TopAppMashupComponent', () => {
-  let component: TopAppMashupComponent;
-  let fixture: ComponentFixture<TopAppMashupComponent>;
+describe('EmbeddedComponent', () => {
+  let component: EmbeddedComponent;
+  let fixture: ComponentFixture<EmbeddedComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [TopAppMashupComponent]
+      declarations: [EmbeddedComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TopAppMashupComponent);
+    fixture = TestBed.createComponent(EmbeddedComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/_samples/embedded/embedded.component.ts

@@ -0,0 +1,114 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Subscription } from 'rxjs';
+import { getSdkConfig, loginIfNecessary } from '@pega/auth/lib/sdk-auth-manager';
+
+import { ProgressSpinnerService, Utils, compareSdkPCoreVersions, getSdkComponentMap } from '@pega/angular-sdk-components';
+
+import { HeaderComponent } from './header/header.component';
+import { MainScreenComponent } from './main-screen/main-screen.component';
+import localSdkComponentMap from '../../../../sdk-local-component-map';
+import { initializeAuthentication } from './utils';
+
+declare global {
+  interface Window {
+    myLoadMashup: Function;
+  }
+}
+
+@Component({
+  selector: 'app-embedded',
+  templateUrl: './embedded.component.html',
+  styleUrls: ['./embedded.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinnerModule, MatToolbarModule, MatIconModule, MatButtonModule, HeaderComponent, MainScreenComponent]
+})
+export class EmbeddedComponent implements OnInit, OnDestroy {
+  pConn$: typeof PConnect;
+
+  bLoggedIn$ = false;
+  bHasPConnect$ = false;
+  isProgress$ = false;
+
+  progressSpinnerSubscription: Subscription;
+
+  bootstrapShell: any;
+
+  constructor(private psservice: ProgressSpinnerService) {}
+
+  ngOnInit() {
+    this.initialize();
+
+    // handle showing and hiding the progress spinner
+    this.progressSpinnerSubscription = this.psservice.getMessage().subscribe(message => {
+      this.showHideProgress(message.show);
+    });
+  }
+
+  ngOnDestroy() {
+    this.progressSpinnerSubscription.unsubscribe();
+  }
+
+  async initialize() {
+    // Add event listener for when logged in and constellation bootstrap is loaded
+    document.addEventListener('SdkConstellationReady', () => this.handleSdkConstellationReady());
+
+    const { authConfig } = await getSdkConfig();
+
+    initializeAuthentication(authConfig);
+
+    // Login if needed, without doing an initial main window redirect
+    const sAppName = window.location.pathname.substring(window.location.pathname.indexOf('/') + 1);
+    loginIfNecessary({ appName: sAppName, mainRedirect: false });
+  }
+
+  handleSdkConstellationReady() {
+    this.bLoggedIn$ = true;
+    // start the portal
+    this.startMashup();
+  }
+
+  startMashup() {
+    PCore.onPCoreReady(async renderObj => {
+      console.log('PCore ready!');
+
+      // Check that we're seeing the PCore version we expect
+      compareSdkPCoreVersions();
+
+      // Initialize the SdkComponentMap (local and pega-provided)
+      await getSdkComponentMap(localSdkComponentMap);
+      console.log(`SdkComponentMap initialized`);
+
+      // Don't call initialRender until SdkComponentMap is fully initialized
+      this.initialRender(renderObj);
+    });
+
+    window.myLoadMashup('app-root', false); // this is defined in bootstrap shell that's been loaded already
+  }
+
+  initialRender(renderObj) {
+    // Need to register the callback function for PCore.registerComponentCreator
+    // This callback is invoked if/when you call a PConnect createComponent
+    PCore.registerComponentCreator(c11nEnv => {
+      return c11nEnv;
+    });
+
+    // Change to reflect new use of arg in the callback:
+    const { props } = renderObj;
+
+    this.pConn$ = props.getPConnect();
+
+    this.bHasPConnect$ = true;
+
+    this.showHideProgress(false);
+  }
+
+  showHideProgress(bShow: boolean) {
+    this.isProgress$ = bShow;
+  }
+}

src/app/_samples/embedded/header/header.component.html

@@ -0,0 +1,8 @@
+<mat-toolbar color="primary" class="mc-toolbar">
+  <mat-toolbar-row class="mc-toolbar-row">
+    {{ applicationLabel }}
+    <mat-icon class="mc-icon">router</mat-icon>
+
+    <span class="toolbar-spacer"> </span>
+  </mat-toolbar-row>
+</mat-toolbar>

src/app/_samples/embedded/mc-nav/mc-nav.component.scss → src/app/_samples/embedded/header/header.component.scss

@@ -2,25 +2,6 @@
   flex: 1 1 auto;
 }
 
-.progress-box {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: var(--app-background-color);
-  position: fixed;
-  z-index: 99999;
-  top: 0px;
-  left: 0px;
-  opacity: 0.5;
-}
-
-.progress-spinner {
-  text-align: center;
-}
-
 .example-container {
   min-height: 100%;
   height: 100%;
@@ -63,11 +44,3 @@
   height: 80px;
   width: 60px;
 }
-
-/*
-.mc-header-svg-icon {
-    width: 1.4rem;
-    display: inline-block;
-    filter: $app-primary-color-filter;
-}
-*/

src/app/_samples/embedded/mc-nav/mc-nav.component.spec.ts → src/app/_samples/embedded/header/header.component.spec.ts

@@ -1,19 +1,19 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { MCNavComponent } from './mc-nav.component';
+import { HeaderComponent } from './header.component';
 
-describe('MCNavComponent', () => {
-  let component: MCNavComponent;
-  let fixture: ComponentFixture<MCNavComponent>;
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [MCNavComponent]
+      declarations: [HeaderComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MCNavComponent);
+    fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/_samples/embedded/header/header.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule]
+})
+export class HeaderComponent implements OnInit {
+  applicationLabel: string | undefined;
+
+  ngOnInit() {
+    this.applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+  }
+}

src/app/_samples/embedded/main-screen/main-screen.component.html

@@ -3,9 +3,9 @@
     <div class="mc-banner">Combine TV, Internet, and Voice for the best deal</div>
 
     <div style="display: flex; justify-content: space-evenly">
-      <app-bundle-swatch [swatchConfig$]="firstConfig$" (ShopNowButtonClick)="onShopNow($event)"></app-bundle-swatch>
-      <app-bundle-swatch [swatchConfig$]="secondConfig$" (ShopNowButtonClick)="onShopNow($event)"></app-bundle-swatch>
-      <app-bundle-swatch [swatchConfig$]="thirdConfig$" (ShopNowButtonClick)="onShopNow($event)"></app-bundle-swatch>
+      <ng-container *ngFor="let option of shoppingOptionsList">
+        <app-shopping-card [option]="option" (onShopNowButtonClick)="onShopNow($event)"></app-shopping-card>
+      </ng-container>
     </div>
   </div>
   <div [hidden]="!showPega$">

src/app/_samples/embedded/main-screen/main-screen.component.scss

@@ -60,7 +60,7 @@
 }
 
 .mc-info-image {
-  width: 700px;
+  width: calc(100% - 40px);
   margin: 20px;
   border-radius: 10px;
 }