feat: add configProps input to BannerComponent and update QuickCreate component for image path handling

Author: tumms2021389

src/app/_samples/mediaco/components/app-shell/app-shell.component.ts

@@ -32,7 +32,7 @@ interface AppShellProps {
   selector: 'app-app-shell',
   templateUrl: './app-shell.component.html',
   styleUrls: ['./app-shell.component.scss'],
-  imports: [CommonModule, MatSnackBarModule, FooterComponent, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AppShellComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;

src/app/_samples/mediaco/components/banner/banner.component.ts

@@ -14,6 +14,7 @@ export class BannerComponent {
   @Input() formGroup$: FormGroup;
 
   @Input() arChildren$: any[];
+  @Input() configProps$: any;
   @Input() title: string;
   @Input() message: any;
   @Input() backgroundImage: string;

src/app/_samples/mediaco/components/quick-create/quick-create.component.html

@@ -32,10 +32,10 @@ <h3>Get started</h3>
   <div class="card">
     <div class="card-header" [ngClass]="card.bgClass">
       <div class="watermark">
-        <img class="material-icons" *ngIf="card.icon" [src]="card.icon" />
+        <img class="material-icons" *ngIf="card.icon" [src]="getImagePath(card.icon)" />
       </div>
       <div class="icon-box" [ngStyle]="{ 'background-image': card.gradient }">
-        <img *ngIf="card.icon" class="quick-link-icon" [src]="card.icon" />
+        <img *ngIf="card.icon" class="quick-link-icon" [src]="getImagePath(card.icon)" />
       </div>
     </div>
 

src/app/_samples/mediaco/components/quick-create/quick-create.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Utils } from '@pega/angular-sdk-components';
-import { getQuicklinksData } from './quick-create.utils';
+import { QUICK_LINKS_DATA } from './quick-create.utils';
 
 interface QuickCreateProps {
   // If any, enter additional props that only exist on this component
@@ -100,8 +100,8 @@ export class QuickCreateComponent implements OnInit, OnChanges {
     } else {
       this.cases$ = defaultCases;
     }
-    const cardsData = getQuicklinksData(this.utils);
-    const cardMap = new Map(cardsData.map(card => [card.title, card]));
+
+    const cardMap = new Map(QUICK_LINKS_DATA.map(card => [card.title, card]));
 
     const mergedCases = this.cases$.map(caseItem => {
       const matchingCard = cardMap.get(caseItem.label);
@@ -117,4 +117,8 @@ export class QuickCreateComponent implements OnInit, OnChanges {
   updateSelf() {
     this.initComponent();
   }
+
+  getImagePath(iconName: string): string {
+    return this.utils.getImageSrc(iconName, this.utils.getSDKStaticContentUrl());
+  }
 }

src/app/_samples/mediaco/components/quick-create/quick-create.utils.ts

@@ -1,11 +1,9 @@
-import { Utils } from '@pega/angular-sdk-components';
-
-export const getQuicklinksData = (utils: Utils) => [
+export const QUICK_LINKS_DATA = [
   {
     title: 'Plan Upgrade',
     description:
       'Take your experience to the next level by upgrading your current plan. This portal allows you to easily compare different subscription tiers, review the additional benefits and features of each, and select the upgrade that best suits your needs. The process is quick, and your new features will be available almost instantly.',
-    icon: utils.getImageSrc('trending-up', utils.getSDKStaticContentUrl()),
+    icon: 'trending-up',
     bgClass: 'bg-purple',
     iconBgClass: 'icon-purple',
     gradient: 'linear-gradient(135deg, #6750A4 0%, #8A7CC7 100%)',
@@ -14,7 +12,7 @@ export const getQuicklinksData = (utils: Utils) => [
   {
     title: 'Purchase Phone',
     description: 'Browse and purchase the latest mobile phones. This feature allows you to select a new device and complete your order online.',
-    icon: utils.getImageSrc('smartphone', utils.getSDKStaticContentUrl()),
+    icon: 'smartphone',
     bgClass: 'bg-pink',
     iconBgClass: 'icon-pink',
     gradient: 'linear-gradient(135deg, #F814E3 0%, #FF6B9D 100%)',
@@ -24,7 +22,7 @@ export const getQuicklinksData = (utils: Utils) => [
     title: 'New Service',
     description:
       'Discover and initiate new services tailored to your needs. This portal provides a streamlined process to browse our service catalog, select the service you require, and submit a request. You will be guided through the necessary steps to provide details and complete your application efficiently.',
-    icon: utils.getImageSrc('shopping-cart', utils.getSDKStaticContentUrl()),
+    icon: 'shopping-cart',
     bgClass: 'bg-cyan',
     iconBgClass: 'icon-cyan',
     gradient: 'linear-gradient(135deg, #00C9FF 0%, #92FE9D 100%)',
@@ -34,7 +32,7 @@ export const getQuicklinksData = (utils: Utils) => [
     title: 'Add-on Services',
     description:
       'Enhance your current plan by adding optional services and features. This portal allows you to browse a catalog of available add-ons—from extra storage to premium content—and activate them instantly on your account to tailor your experience to your specific needs.',
-    icon: utils.getImageSrc('monitor', utils.getSDKStaticContentUrl()),
+    icon: 'monitor',
     bgClass: 'bg-orange',
     iconBgClass: 'icon-orange',
     gradient: 'linear-gradient(135deg, #FF6B35 0%, #F7931E 100%)',
@@ -44,7 +42,7 @@ export const getQuicklinksData = (utils: Utils) => [
     title: 'Make Payment',
     description:
       'Conveniently manage and pay your bills online at any time. Our secure portal allows you to make one-time payments, schedule future payments, or enroll in AutoPay for automatic deductions. You can view your current balance and payment history, and choose to go paperless with electronic billing. Supported payment methods include credit/debit cards and eChecks',
-    icon: utils.getImageSrc('wallet', utils.getSDKStaticContentUrl()),
+    icon: 'wallet',
     bgClass: 'bg-magenta',
     iconBgClass: 'icon-magenta',
     gradient: 'linear-gradient(135deg, #8A0786 0%, #C70BB5 100%)',
@@ -53,7 +51,7 @@ export const getQuicklinksData = (utils: Utils) => [
   {
     title: 'Get Help',
     description: "Find answers quickly or connect with our support team for assistance. We're here to help you resolve any issue.",
-    icon: utils.getImageSrc('headphones', utils.getSDKStaticContentUrl()),
+    icon: 'headphones',
     bgClass: 'bg-magenta',
     iconBgClass: 'icon-magenta',
     gradient: 'linear-gradient(135deg, #D0BCFF 0%, #EFB8C8 100%)',

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts

@@ -38,7 +38,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() appName$: string;
   @Input() pages$: any[];
-  // @Input() caseTypes$: any[];
+  @Input() caseTypes$: any[];
   @Input() homePage: any;
   @Input() arChildren$: any[];
   @Input() portalLogoImage$: string;