From 8b75fc59340bf48e0eb64baaf96a64ded8c27f5a Mon Sep 17 00:00:00 2001 From: Siva Rama Krishna Date: Thu, 19 Dec 2024 16:04:11 +0530 Subject: [PATCH] refactor: Mashup code cleanup changes --- .../bundle-swatch/bundle-swatch.component.ts | 39 ---- .../_samples/embedded/embedded.component.html | 12 ++ .../_samples/embedded/embedded.component.scss | 18 ++ .../embedded.component.spec.ts} | 12 +- .../_samples/embedded/embedded.component.ts | 114 ++++++++++ .../embedded/header/header.component.html | 8 + .../header.component.scss} | 27 --- .../header.component.spec.ts} | 12 +- .../embedded/header/header.component.ts | 20 ++ .../main-screen/main-screen.component.html | 6 +- .../main-screen/main-screen.component.scss | 2 +- .../main-screen/main-screen.component.ts | 52 +---- .../embedded/mc-nav/mc-nav.component.html | 18 -- .../embedded/mc-nav/mc-nav.component.ts | 198 ------------------ .../shopping-card.component.html} | 20 +- .../shopping-card.component.scss} | 0 .../shopping-card.component.spec.ts} | 12 +- .../shopping-card/shopping-card.component.ts | 16 ++ src/app/_samples/embedded/utils.ts | 61 ++++++ ...ponent.html => full-portal.component.html} | 0 ...ponent.scss => full-portal.component.scss} | 0 .../full-portal/full-portal.component.spec.ts | 24 +++ ....component.ts => full-portal.component.ts} | 10 +- src/app/routes.ts | 33 ++- 24 files changed, 334 insertions(+), 380 deletions(-) delete mode 100644 src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.ts create mode 100644 src/app/_samples/embedded/embedded.component.html create mode 100644 src/app/_samples/embedded/embedded.component.scss rename src/app/_samples/{full-portal/top-app-mashup/top-app-mashup.component.spec.ts => embedded/embedded.component.spec.ts} (54%) create mode 100644 src/app/_samples/embedded/embedded.component.ts create mode 100644 src/app/_samples/embedded/header/header.component.html rename src/app/_samples/embedded/{mc-nav/mc-nav.component.scss => header/header.component.scss} (59%) rename src/app/_samples/embedded/{mc-nav/mc-nav.component.spec.ts => header/header.component.spec.ts} (57%) create mode 100644 src/app/_samples/embedded/header/header.component.ts delete mode 100644 src/app/_samples/embedded/mc-nav/mc-nav.component.html delete mode 100644 src/app/_samples/embedded/mc-nav/mc-nav.component.ts rename src/app/_samples/embedded/{bundle-swatch/bundle-swatch.component.html => shopping-card/shopping-card.component.html} (58%) rename src/app/_samples/embedded/{bundle-swatch/bundle-swatch.component.scss => shopping-card/shopping-card.component.scss} (100%) rename src/app/_samples/embedded/{bundle-swatch/bundle-swatch.component.spec.ts => shopping-card/shopping-card.component.spec.ts} (54%) create mode 100644 src/app/_samples/embedded/shopping-card/shopping-card.component.ts create mode 100644 src/app/_samples/embedded/utils.ts rename src/app/_samples/full-portal/{top-app-mashup/top-app-mashup.component.html => full-portal.component.html} (100%) rename src/app/_samples/full-portal/{top-app-mashup/top-app-mashup.component.scss => full-portal.component.scss} (100%) create mode 100644 src/app/_samples/full-portal/full-portal.component.spec.ts rename src/app/_samples/full-portal/{top-app-mashup/top-app-mashup.component.ts => full-portal.component.ts} (96%) diff --git a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.ts b/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.ts deleted file mode 100644 index 81dde04c..00000000 --- a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'app-bundle-swatch', - templateUrl: './bundle-swatch.component.html', - styleUrls: ['./bundle-swatch.component.scss'], - standalone: true -}) -export class BundleSwatchComponent implements OnInit { - @Input() swatchConfig$: any; - @Output() ShopNowButtonClick: EventEmitter = new EventEmitter(); - - labelPlay$: string; - labelLevel$: string; - labelChannelCount$: string; - labelChannelFull$: string; - labelBanner$: string; - labelDollars$: string; - labelCents$: string; - labelInternetSpeed$: string; - - extraCalling$: string; - - ngOnInit(): void { - this.labelPlay$ = this.swatchConfig$.play; - this.labelLevel$ = this.swatchConfig$.level; - this.labelChannelCount$ = this.swatchConfig$.channels; - this.labelChannelFull$ = this.swatchConfig$.channels_full; - this.labelBanner$ = this.swatchConfig$.banner; - this.labelDollars$ = this.swatchConfig$.price.substring(0, this.swatchConfig$.price.indexOf('.')); - this.labelCents$ = `${this.swatchConfig$.price.substring(this.swatchConfig$.price.indexOf('.') + 1)}/month`; - this.extraCalling$ = this.swatchConfig$.calling; - this.labelInternetSpeed$ = this.swatchConfig$.internetSpeed; - } - - shopClick(sLevel) { - this.ShopNowButtonClick.emit(sLevel); - } -} diff --git a/src/app/_samples/embedded/embedded.component.html b/src/app/_samples/embedded/embedded.component.html new file mode 100644 index 00000000..182bcfe1 --- /dev/null +++ b/src/app/_samples/embedded/embedded.component.html @@ -0,0 +1,12 @@ +
+ +
+ +
+ + +
+ + +
Loading...
+ diff --git a/src/app/_samples/embedded/embedded.component.scss b/src/app/_samples/embedded/embedded.component.scss new file mode 100644 index 00000000..0f9398d7 --- /dev/null +++ b/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; +} diff --git a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.spec.ts b/src/app/_samples/embedded/embedded.component.spec.ts similarity index 54% rename from src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.spec.ts rename to src/app/_samples/embedded/embedded.component.spec.ts index cfea0adf..d94d5c29 100644 --- a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.spec.ts +++ b/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; +describe('EmbeddedComponent', () => { + let component: EmbeddedComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [TopAppMashupComponent] + declarations: [EmbeddedComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(TopAppMashupComponent); + fixture = TestBed.createComponent(EmbeddedComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/_samples/embedded/embedded.component.ts b/src/app/_samples/embedded/embedded.component.ts new file mode 100644 index 00000000..12029b6b --- /dev/null +++ b/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; + } +} diff --git a/src/app/_samples/embedded/header/header.component.html b/src/app/_samples/embedded/header/header.component.html new file mode 100644 index 00000000..19b25be8 --- /dev/null +++ b/src/app/_samples/embedded/header/header.component.html @@ -0,0 +1,8 @@ + + + {{ applicationLabel }} + router + + + + diff --git a/src/app/_samples/embedded/mc-nav/mc-nav.component.scss b/src/app/_samples/embedded/header/header.component.scss similarity index 59% rename from src/app/_samples/embedded/mc-nav/mc-nav.component.scss rename to src/app/_samples/embedded/header/header.component.scss index a78abb2c..aa721b93 100644 --- a/src/app/_samples/embedded/mc-nav/mc-nav.component.scss +++ b/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; -} -*/ diff --git a/src/app/_samples/embedded/mc-nav/mc-nav.component.spec.ts b/src/app/_samples/embedded/header/header.component.spec.ts similarity index 57% rename from src/app/_samples/embedded/mc-nav/mc-nav.component.spec.ts rename to src/app/_samples/embedded/header/header.component.spec.ts index b8cce6f1..3275b9ea 100644 --- a/src/app/_samples/embedded/mc-nav/mc-nav.component.spec.ts +++ b/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; +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [MCNavComponent] + declarations: [HeaderComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(MCNavComponent); + fixture = TestBed.createComponent(HeaderComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/_samples/embedded/header/header.component.ts b/src/app/_samples/embedded/header/header.component.ts new file mode 100644 index 00000000..829c3ec9 --- /dev/null +++ b/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(); + } +} diff --git a/src/app/_samples/embedded/main-screen/main-screen.component.html b/src/app/_samples/embedded/main-screen/main-screen.component.html index 150ea9cd..4f508081 100644 --- a/src/app/_samples/embedded/main-screen/main-screen.component.html +++ b/src/app/_samples/embedded/main-screen/main-screen.component.html @@ -3,9 +3,9 @@
Combine TV, Internet, and Voice for the best deal
- - - + + +
diff --git a/src/app/_samples/embedded/main-screen/main-screen.component.scss b/src/app/_samples/embedded/main-screen/main-screen.component.scss index 6b26284d..0c441c47 100644 --- a/src/app/_samples/embedded/main-screen/main-screen.component.scss +++ b/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; } diff --git a/src/app/_samples/embedded/main-screen/main-screen.component.ts b/src/app/_samples/embedded/main-screen/main-screen.component.ts index c09a345f..c29fb6f8 100644 --- a/src/app/_samples/embedded/main-screen/main-screen.component.ts +++ b/src/app/_samples/embedded/main-screen/main-screen.component.ts @@ -1,25 +1,26 @@ import { Component, OnInit, Input, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; + import { ComponentMapperComponent, ProgressSpinnerService, ServerConfigService } from '@pega/angular-sdk-components'; import { ResolutionScreenComponent } from '../resolution-screen/resolution-screen.component'; -import { BundleSwatchComponent } from '../bundle-swatch/bundle-swatch.component'; +import { ShoppingCardComponent } from '../shopping-card/shopping-card.component'; +import { shoppingOptions } from '../utils'; @Component({ selector: 'app-main-screen', templateUrl: './main-screen.component.html', styleUrls: ['./main-screen.component.scss'], standalone: true, - imports: [CommonModule, BundleSwatchComponent, ResolutionScreenComponent, ComponentMapperComponent] + imports: [CommonModule, ShoppingCardComponent, ComponentMapperComponent, ResolutionScreenComponent] }) export class MainScreenComponent implements OnInit, OnDestroy { @Input() pConn$: typeof PConnect; - firstConfig$: any; - secondConfig$: any; - thirdConfig$: any; - showTriplePlayOptions$ = true; + shoppingOptionsList = shoppingOptions; + showPega$ = false; + showTriplePlayOptions$ = true; showResolution$ = false; constructor( @@ -28,42 +29,6 @@ export class MainScreenComponent implements OnInit, OnDestroy { ) {} ngOnInit(): void { - // first - this.firstConfig$ = { - play: 'Triple Play', - level: 'Basic', - channels: '100+', - channels_full: '100+ (Basic +)', - banner: 'Value package', - price: '99.00', - internetSpeed: '100 Mbps', - calling: '' - }; - - // second - this.secondConfig$ = { - play: 'Triple Play', - level: 'Silver', - channels: '125+', - channels_full: '125+ (Delux)', - banner: 'Most popular', - price: '120.00', - internetSpeed: '300 Mbps', - calling: '' - }; - - // third - this.thirdConfig$ = { - play: 'Triple Play', - level: 'Gold', - channels: '175+', - channels_full: '175+ (Premium)', - banner: 'All the channels you want', - price: '150.00', - internetSpeed: '1 Gbps', - calling: ' & International' - }; - PCore.getPubSubUtils().subscribe( PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => { @@ -106,7 +71,8 @@ export class MainScreenComponent implements OnInit, OnDestroy { this.scservice.getSdkConfig().then(sdkConfig => { let mashupCaseType = sdkConfig.serverConfig.appMashupCaseType; if (!mashupCaseType) { - const caseTypes = (PCore.getEnvironmentInfo().environmentInfoObject as any).pyCaseTypeList; + // @ts-ignore - Object is possibly 'null' + const caseTypes: any = PCore.getEnvironmentInfo().environmentInfoObject.pyCaseTypeList; mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName; } diff --git a/src/app/_samples/embedded/mc-nav/mc-nav.component.html b/src/app/_samples/embedded/mc-nav/mc-nav.component.html deleted file mode 100644 index 64ed757e..00000000 --- a/src/app/_samples/embedded/mc-nav/mc-nav.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- - - - {{ applicationLabel }} - router - - - - - - - -
- -
diff --git a/src/app/_samples/embedded/mc-nav/mc-nav.component.ts b/src/app/_samples/embedded/mc-nav/mc-nav.component.ts deleted file mode 100644 index cd57d9b3..00000000 --- a/src/app/_samples/embedded/mc-nav/mc-nav.component.ts +++ /dev/null @@ -1,198 +0,0 @@ -import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { Title } from '@angular/platform-browser'; -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 { loginIfNecessary, logout, sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager'; -import { - ProgressSpinnerService, - ServerConfigService, - UpdateWorklistService, - Utils, - compareSdkPCoreVersions, - endpoints, - getSdkComponentMap -} from '@pega/angular-sdk-components'; - -import { MainScreenComponent } from '../main-screen/main-screen.component'; -import localSdkComponentMap from '../../../../../sdk-local-component-map'; - -declare global { - interface Window { - myLoadMashup: Function; - } -} - -@Component({ - selector: 'app-mc-nav', - templateUrl: './mc-nav.component.html', - styleUrls: ['./mc-nav.component.scss'], - providers: [Utils], - standalone: true, - imports: [CommonModule, MatProgressSpinnerModule, MatToolbarModule, MatIconModule, MatButtonModule, MainScreenComponent] -}) -export class MCNavComponent implements OnInit, OnDestroy { - starterPackVersion$: string = endpoints.SP_VERSION; - pConn$: typeof PConnect; - - applicationLabel: string | undefined = ''; - bLoggedIn$ = false; - bPConnectLoaded$ = false; - bHasPConnect$ = false; - isProgress$ = false; - - progressSpinnerSubscription: Subscription; - resetPConnectSubscription: Subscription; - - constructor( - private cdRef: ChangeDetectorRef, - private psservice: ProgressSpinnerService, - private uwservice: UpdateWorklistService, - private titleService: Title, - private scservice: ServerConfigService - ) {} - - ngOnInit() { - this.scservice.readSdkConfig().then(() => { - this.initialize(); - }); - } - - ngOnDestroy() { - this.progressSpinnerSubscription.unsubscribe(); - this.resetPConnectSubscription.unsubscribe(); - } - - async initialize() { - this.titleService.setTitle('Media Co'); - - sessionStorage.clear(); - - // handle showing and hiding the progress spinner - this.progressSpinnerSubscription = this.psservice.getMessage().subscribe(message => { - this.showHideProgress(message.show); - }); - - // Add event listener for when logged in and constellation bootstrap is loaded - document.addEventListener('SdkConstellationReady', () => { - this.bLoggedIn$ = true; - // start the portal - this.startMashup(); - }); - - // Add event listener for when logged out - document.addEventListener('SdkLoggedOut', () => { - this.bLoggedIn$ = false; - }); - - const sdkConfigAuth = await this.scservice.getSdkConfigAuth(); - - 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 }; - }); - } - - // Login if needed, without doing an initial main window redirect - // eslint-disable-next-line no-restricted-globals - const sAppName = location.pathname.substring(location.pathname.indexOf('/') + 1); - loginIfNecessary({ appName: sAppName, mainRedirect: false }); - } - - startMashup() { - PCore.onPCoreReady(renderObj => { - console.log('PCore ready!'); - // Check that we're seeing the PCore version we expect - compareSdkPCoreVersions(); - this.applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel(); - - this.titleService.setTitle(this.applicationLabel ?? ''); - - // Initialize the SdkComponentMap (local and pega-provided) - getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => { - console.log(`SdkComponentMap initialized`, theComponentMap); - - // 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 => { - // debugger; - - // experiment with returning a PConnect that has deferenced the - // referenced View if the c11n is a 'reference' component - // const compType = c11nEnv.getPConnect().getComponentName(); - // console.log( `mc-nav - registerComponentCreator c11nEnv type: ${compType}`); - - return c11nEnv; - - // REACT implementaion: - // const PConnectComp = createPConnectComponent(); - // return ( - // - // ); - }); - - // Change to reflect new use of arg in the callback: - const { props } = renderObj; - - this.pConn$ = props.getPConnect(); - - this.bHasPConnect$ = true; - this.bPConnectLoaded$ = true; - - this.showHideProgress(false); - - sessionStorage.setItem('pCoreUsage', 'AngularSDKMashup'); - } - - showHideProgress(bShow: boolean) { - this.isProgress$ = bShow; - // causing failure on actions buttons in emebedded mode - // this.cdRef.detectChanges(); - } - - logOff() { - logout().then(() => { - // Reload the page to kick off the login - window.location.reload(); - }); - } -} diff --git a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.html b/src/app/_samples/embedded/shopping-card/shopping-card.component.html similarity index 58% rename from src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.html rename to src/app/_samples/embedded/shopping-card/shopping-card.component.html index 8d388f13..931f9743 100644 --- a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.html +++ b/src/app/_samples/embedded/shopping-card/shopping-card.component.html @@ -2,29 +2,29 @@
- {{ labelPlay$ }} + {{ option.play }}
- {{ labelLevel$ }} + {{ option.level }}
- {{ labelChannelCount$ }} + {{ option.channels }}
Channels
- {{ labelBanner$ }} + {{ option.banner }}
    -
  • {{ labelChannelFull$ }} channels plus FREE HD
    • +
  • {{ option.channelsFull }} channels plus FREE HD
  • Thousands of On Demand choices
  • Watch on MediaCo App
    • -
  • Up to {{ labelInternetSpeed$ }} Internet Speeds
    • -
  • Unlimited nationwide calling {{ extraCalling$ }}
    • +
  • Up to {{ option.internetSpeed }} Internet Speeds
    • +
  • Unlimited nationwide calling {{ option.calling }}
@@ -33,15 +33,15 @@
$
-
{{ labelDollars$ }}
+
{{ option.price.substring(0, option.price.indexOf('.')) }}
-
{{ labelCents$ }}
+
{{ option.price.substring(option.price.indexOf('.') + 1) }}
for 12 mons
when bundled
- +
diff --git a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.scss b/src/app/_samples/embedded/shopping-card/shopping-card.component.scss similarity index 100% rename from src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.scss rename to src/app/_samples/embedded/shopping-card/shopping-card.component.scss diff --git a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.spec.ts b/src/app/_samples/embedded/shopping-card/shopping-card.component.spec.ts similarity index 54% rename from src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.spec.ts rename to src/app/_samples/embedded/shopping-card/shopping-card.component.spec.ts index baff0edc..855c48ac 100644 --- a/src/app/_samples/embedded/bundle-swatch/bundle-swatch.component.spec.ts +++ b/src/app/_samples/embedded/shopping-card/shopping-card.component.spec.ts @@ -1,19 +1,19 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { BundleSwatchComponent } from './bundle-swatch.component'; +import { ShoppingCardComponent } from './shopping-card.component'; -describe('BundleSwatchComponent', () => { - let component: BundleSwatchComponent; - let fixture: ComponentFixture; +describe('ShoppingCardComponent', () => { + let component: ShoppingCardComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [BundleSwatchComponent] + declarations: [ShoppingCardComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(BundleSwatchComponent); + fixture = TestBed.createComponent(ShoppingCardComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/_samples/embedded/shopping-card/shopping-card.component.ts b/src/app/_samples/embedded/shopping-card/shopping-card.component.ts new file mode 100644 index 00000000..bc606910 --- /dev/null +++ b/src/app/_samples/embedded/shopping-card/shopping-card.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-shopping-card', + templateUrl: './shopping-card.component.html', + styleUrls: ['./shopping-card.component.scss'], + standalone: true +}) +export class ShoppingCardComponent { + @Input() option: any; + @Output() onShopNowButtonClick: EventEmitter = new EventEmitter(); + + onShopNowClick(sLevel) { + this.onShopNowButtonClick.emit(sLevel); + } +} diff --git a/src/app/_samples/embedded/utils.ts b/src/app/_samples/embedded/utils.ts new file mode 100644 index 00000000..89181c7f --- /dev/null +++ b/src/app/_samples/embedded/utils.ts @@ -0,0 +1,61 @@ +import { sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager'; + +export const shoppingOptions = [ + { + play: 'Triple Play', + level: 'Basic', + channels: '100+', + channels_full: '100+ (Basic +)', + banner: 'Value package', + price: '99.00', + internetSpeed: '100 Mbps', + calling: '' + }, + { + play: 'Triple Play', + level: 'Silver', + channels: '125+', + channels_full: '125+ (Deluxe)', + banner: 'Most popular', + price: '120.00', + internetSpeed: '300 Mbps', + calling: '' + }, + { + play: 'Triple Play', + level: 'Gold', + channels: '175+', + channels_full: '175+ (Premium)', + banner: 'All the channels you want', + price: '150.00', + internetSpeed: '1 Gbps', + calling: ' & International' + } +]; + +export function initializeAuthentication(sdkConfigAuth) { + 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 }; + }); + } +} diff --git a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.html b/src/app/_samples/full-portal/full-portal.component.html similarity index 100% rename from src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.html rename to src/app/_samples/full-portal/full-portal.component.html diff --git a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.scss b/src/app/_samples/full-portal/full-portal.component.scss similarity index 100% rename from src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.scss rename to src/app/_samples/full-portal/full-portal.component.scss diff --git a/src/app/_samples/full-portal/full-portal.component.spec.ts b/src/app/_samples/full-portal/full-portal.component.spec.ts new file mode 100644 index 00000000..a8a977b6 --- /dev/null +++ b/src/app/_samples/full-portal/full-portal.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; + +import { FullPortalComponent } from './full-portal.component'; + +describe('FullPortalComponent', () => { + let component: FullPortalComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [FullPortalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FullPortalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts b/src/app/_samples/full-portal/full-portal.component.ts similarity index 96% rename from src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts rename to src/app/_samples/full-portal/full-portal.component.ts index 3df626af..1e1dc260 100644 --- a/src/app/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts +++ b/src/app/_samples/full-portal/full-portal.component.ts @@ -12,7 +12,7 @@ import { getSdkComponentMap } from '@pega/angular-sdk-components'; -import localSdkComponentMap from '../../../../../sdk-local-component-map'; +import localSdkComponentMap from '../../../../sdk-local-component-map'; declare global { interface Window { @@ -22,13 +22,13 @@ declare global { } @Component({ - selector: 'app-top-app-mashup', - templateUrl: './top-app-mashup.component.html', - styleUrls: ['./top-app-mashup.component.scss'], + selector: 'app-full-portal', + templateUrl: './full-portal.component.html', + styleUrls: ['./full-portal.component.scss'], standalone: true, imports: [CommonModule, MatProgressSpinnerModule, ComponentMapperComponent] }) -export class TopAppMashupComponent implements OnInit, OnDestroy { +export class FullPortalComponent implements OnInit, OnDestroy { pConn$: typeof PConnect; sComponentName$: string | undefined; diff --git a/src/app/routes.ts b/src/app/routes.ts index 01a03e99..c1f8e586 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -1,31 +1,28 @@ import { Routes } from '@angular/router'; import { endpoints } from '@pega/angular-sdk-components'; -import { TopAppMashupComponent } from './_samples/full-portal/top-app-mashup/top-app-mashup.component'; +import { FullPortalComponent } from './_samples/full-portal/full-portal.component'; +import { EmbeddedComponent } from './_samples/embedded/embedded.component'; import { NavigationComponent } from './_samples/simple-portal/navigation/navigation.component'; -import { MCNavComponent } from './_samples/embedded/mc-nav/mc-nav.component'; // Adding path to remove "Cannot match routes" error at launch -// Tried this at one point... Need to add /app in path now... -// const appName = window.PCore.getStore().getState().data.app.Application.pyLabel; -// Unfortunately, called before onPCoreReady... +// Tried this at one point... Need to add /app in path now... +// const appName = PCore.getStore().getState().data.app.Application.pyLabel; +// Unfortunately, called before onPCoreReady... // // But we can get it from window.location.pathname // const appName = window.location.pathname.split('/')[3]; -// TopAppComponent no longer used (was for when login into PegaInfinity and being directed from there to an Angular app, -// similiar to Nebula/Constellaion) - export const routes: Routes = [ - { path: '', component: MCNavComponent }, - { path: endpoints.PORTAL, component: TopAppMashupComponent }, - { path: endpoints.PORTALHTML, component: TopAppMashupComponent }, - { path: endpoints.FULLPORTAL, component: TopAppMashupComponent }, - { path: endpoints.FULLPORTALHTML, component: TopAppMashupComponent }, + { path: '', component: EmbeddedComponent }, + { path: endpoints.PORTAL, component: FullPortalComponent }, + { path: endpoints.PORTALHTML, component: FullPortalComponent }, + { path: endpoints.FULLPORTAL, component: FullPortalComponent }, + { path: endpoints.FULLPORTALHTML, component: FullPortalComponent }, + { path: endpoints.EMBEDDED, component: EmbeddedComponent }, + { path: endpoints.EMBEDDEDHTML, component: EmbeddedComponent }, + { path: endpoints.MASHUP, component: EmbeddedComponent }, + { path: endpoints.MASHUPHTML, component: EmbeddedComponent }, { path: endpoints.SIMPLEPORTAL, component: NavigationComponent }, - { path: endpoints.SIMPLEPORTALHTML, component: NavigationComponent }, - { path: endpoints.EMBEDDED, component: MCNavComponent }, - { path: endpoints.EMBEDDEDHTML, component: MCNavComponent }, - { path: endpoints.MASHUP, component: MCNavComponent }, - { path: endpoints.MASHUPHTML, component: MCNavComponent } + { path: endpoints.SIMPLEPORTALHTML, component: NavigationComponent } ];