feat: ASM C360 Refactor (CXSPA-4773) (#17874)

Co-authored-by: Hakwoo Kim <[email protected]> Co-authored-by: Krzysztof Platis <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
SAP · Sep 26, 2023 · 1d186a6 · 1d186a6
1 parent e8faae8
commit 1d186a6
Show file tree

Hide file tree

Showing 29 changed files with 133 additions and 176 deletions.
diff --git a/feature-libs/asm/components/customer-emulation/customer-emulation.component.html b/feature-libs/asm/components/customer-emulation/customer-emulation.component.html
@@ -4,10 +4,9 @@
     <label class="cx-asm-uid">{{ customer?.uid }}</label>
   </div>
   <cx-asm-bind-cart></cx-asm-bind-cart>
-  <!-- TODO(CXSPA-3090): Remove feature flag in 7.0 -->
-  <ng-container *cxFeatureLevel="'6.3'">
+  <ng-container *cxFeatureLevel="'6.6'">
     <button
-      *ngIf="isCustomer360Configured"
+      *ngIf="isCustomer360Configured && customer"
       #customer360Launcher
       class="cx-360-button"
       (click)="openCustomer360()"

diff --git a/feature-libs/asm/components/customer-emulation/customer-emulation.component.spec.ts b/feature-libs/asm/components/customer-emulation/customer-emulation.component.spec.ts
@@ -42,6 +42,9 @@ describe('CustomerEmulationComponent', () => {
     isConfigured(): boolean {
       return true;
     }
+    resolveFeature(featureName: string): Observable<any> {
+      return of(featureName);
+    }
   }
 
   let component: CustomerEmulationComponent;

diff --git a/feature-libs/asm/components/customer-emulation/customer-emulation.component.ts b/feature-libs/asm/components/customer-emulation/customer-emulation.component.ts
@@ -16,7 +16,7 @@ import { AsmDialogActionEvent } from '@spartacus/asm/customer-360/root';
 import { FeatureModulesService, User } from '@spartacus/core';
 import { LaunchDialogService, LAUNCH_CALLER } from '@spartacus/storefront';
 import { UserAccountFacade } from '@spartacus/user/account/root';
-import { Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { AsmComponentService } from '../services/asm-component.service';
 
@@ -29,6 +29,7 @@ export class CustomerEmulationComponent implements OnInit, OnDestroy {
   isCustomerEmulationSessionInProgress$: Observable<boolean>;
 
   isCustomer360Configured: boolean | undefined = false;
+  isCustomer360Loaded$ = new BehaviorSubject<boolean>(false);
 
   @ViewChild('customer360Launcher') customer360LauncherElement: ElementRef;
 
@@ -59,6 +60,12 @@ export class CustomerEmulationComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.isCustomer360Configured =
       this.featureModules?.isConfigured('customer360');
+    if (this.isCustomer360Configured) {
+      // trigger lazy loading of the Customer 360 feature:
+      this.featureModules?.resolveFeature('customer360').subscribe(() => {
+        this.isCustomer360Loaded$.next(true);
+      });
+    }
 
     this.subscription.add(
       this.userAccountFacade.get().subscribe((user) => {
@@ -76,18 +83,24 @@ export class CustomerEmulationComponent implements OnInit, OnDestroy {
   }
 
   openCustomer360() {
-    const data = { customer: this.customer };
-    this.launchDialogService?.openDialogAndSubscribe(
-      LAUNCH_CALLER.ASM_CUSTOMER_360,
-      this.customer360LauncherElement,
-      data
-    );
-
     this.subscription.add(
-      this.launchDialogService?.dialogClose
-        .pipe(filter((result) => Boolean(result)))
-        .subscribe((event: AsmDialogActionEvent) => {
-          this.asmComponentService.handleAsmDialogAction(event);
+      this.isCustomer360Loaded$
+        .pipe(filter((isReady) => Boolean(isReady)))
+        .subscribe(() => {
+          const data = { customer: this.customer };
+          this.launchDialogService?.openDialogAndSubscribe(
+            LAUNCH_CALLER.ASM_CUSTOMER_360,
+            this.customer360LauncherElement,
+            data
+          );
+
+          this.subscription.add(
+            this.launchDialogService?.dialogClose
+              .pipe(filter((result) => Boolean(result)))
+              .subscribe((event: AsmDialogActionEvent) => {
+                this.asmComponentService.handleAsmDialogAction(event);
+              })
+          );
         })
     );
   }

diff --git a/...-libs/asm/customer-360/components/asm-customer-table/asm-customer-table.component.spec.ts b/...-libs/asm/customer-360/components/asm-customer-table/asm-customer-table.component.spec.ts
@@ -29,11 +29,14 @@ import {
   GeneralEntry,
   TableEntry,
 } from './asm-customer-table.model';
-import {
-  Customer360Config,
-  Customer360Type,
-} from '@spartacus/asm/customer-360/root';
+import { Customer360Type } from '@spartacus/asm/customer-360/root';
+import { Customer360Config } from '../config/customer-360-config';
 import { of } from 'rxjs';
+import {
+  AsmCustomerActiveCartComponent,
+  AsmCustomerProductReviewsComponent,
+  AsmCustomerProfileComponent,
+} from '../sections';
 
 @Directive({
   selector: '[cxFocus]',
@@ -52,18 +55,18 @@ describe('AsmCustomerTableComponent', () => {
           i18nNameKey: 'customer360.overviewTab',
           components: [
             {
-              component: 'AsmCustomer360OverviewComponent',
+              component: AsmCustomerActiveCartComponent,
             },
           ],
         },
         {
           i18nNameKey: 'customer360.profileTab',
           components: [
             {
-              component: 'AsmCustomer360ProfileComponent',
+              component: AsmCustomerProfileComponent,
             },
             {
-              component: 'AsmCustomer360ProductReviewsComponent',
+              component: AsmCustomerProductReviewsComponent,
               requestData: {
                 type: Customer360Type.REVIEW_LIST,
               },

diff --git a/feature-libs/asm/customer-360/components/asm-customer-table/asm-customer-table.component.ts b/feature-libs/asm/customer-360/components/asm-customer-table/asm-customer-table.component.ts
@@ -36,7 +36,7 @@ import {
   CustomerTableTextAlign,
   TableEntry,
 } from './asm-customer-table.model';
-import { Customer360Config } from '@spartacus/asm/customer-360/root';
+import { Customer360Config } from '../config/customer-360-config';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/feature-libs/asm/customer-360/components/asm-product-item/asm-product-item.component.spec.ts b/feature-libs/asm/customer-360/components/asm-product-item/asm-product-item.component.spec.ts
@@ -13,6 +13,16 @@ import { FocusConfig, ICON_TYPE } from '@spartacus/storefront';
 import { By } from '@angular/platform-browser';
 import { AsmProductItemComponent } from './asm-product-item.component';
 
+@Component({
+  template: '',
+  selector: 'cx-media',
+})
+class MockMediaComponent {
+  @Input() container: any;
+  @Input() format: any;
+  @Input() alt: any;
+}
+
 @Directive({
   selector: '[cxFocus]',
 })
@@ -68,6 +78,7 @@ describe('AsmProductItemComponent', () => {
         AsmProductItemComponent,
         MockTranslatePipe,
         MockCxIconComponent,
+        MockMediaComponent,
       ],
     }).compileComponents();
   });

diff --git a/...er-360/root/config/customer-360-config.ts → .../components/config/customer-360-config.ts b/...er-360/root/config/customer-360-config.ts → .../components/config/customer-360-config.ts
@@ -5,8 +5,8 @@
  */
 
 import { Injectable } from '@angular/core';
+import { AsmCustomer360TabsConfig } from '@spartacus/asm/customer-360/root';
 import { Config } from '@spartacus/core';
-import { AsmCustomer360TabsConfig } from '../model/customer-360-tabs-config';
 
 @Injectable({
   providedIn: 'root',

diff --git a/...oot/config/default-customer-360-config.ts → ...nts/config/default-customer-360-config.ts b/...oot/config/default-customer-360-config.ts → ...nts/config/default-customer-360-config.ts
@@ -4,8 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Customer360Type } from '../model';
+import { AsmCustomerActiveCartComponent } from '../sections/asm-customer-active-cart/asm-customer-active-cart.component';
+import { AsmCustomerActivityComponent } from '../sections/asm-customer-activity/asm-customer-activity.component';
+import { AsmCustomerCouponComponent } from '../sections/asm-customer-coupon/asm-customer-coupon.component';
+import { AsmCustomerCustomerCouponComponent } from '../sections/asm-customer-customer-coupon/asm-customer-customer-coupon.component';
+import { AsmCustomerMapComponent } from '../sections/asm-customer-map/asm-customer-map.component';
+import { AsmCustomerProductInterestsComponent } from '../sections/asm-customer-product-interests/asm-customer-product-interests.component';
+import { AsmCustomerProductReviewsComponent } from '../sections/asm-customer-product-reviews/asm-customer-product-reviews.component';
+import { AsmCustomerProfileComponent } from '../sections/asm-customer-profile/asm-customer-profile.component';
+import { AsmCustomerPromotionComponent } from '../sections/asm-customer-promotion/asm-customer-promotion.component';
+import { AsmCustomerSavedCartComponent } from '../sections/asm-customer-saved-cart/asm-customer-saved-cart.component';
+import { AsmCustomerSupportTicketsComponent } from '../sections/asm-customer-support-tickets/asm-customer-support-tickets.component';
 import { Customer360Config } from './customer-360-config';
+import { Customer360Type } from '@spartacus/asm/customer-360/root';
 
 export const defaultCustomer360Config: Customer360Config = {
   customer360: {
@@ -16,19 +27,19 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.overviewTab',
         components: [
           {
-            component: 'AsmCustomer360ActiveCartComponent',
+            component: AsmCustomerActiveCartComponent,
             requestData: {
               type: Customer360Type.ACTIVE_CART,
             },
           },
           {
-            component: 'AsmCustomer360SavedCartComponent',
+            component: AsmCustomerSavedCartComponent,
             requestData: {
               type: Customer360Type.SAVED_CART,
             },
           },
           {
-            component: 'AsmCustomer360ProductInterestsComponent',
+            component: AsmCustomerProductInterestsComponent,
             requestData: {
               type: Customer360Type.PRODUCT_INTEREST_LIST,
             },
@@ -39,7 +50,7 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.profileTab',
         components: [
           {
-            component: 'AsmCustomer360ProfileComponent',
+            component: AsmCustomerProfileComponent,
             requestData: {
               type: Customer360Type.CUSTOMER_PROFILE,
             },
@@ -50,7 +61,7 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.activityTab',
         components: [
           {
-            component: 'AsmCustomer360CustomerActivityComponent',
+            component: AsmCustomerActivityComponent,
             requestData: {
               type: Customer360Type.ACTIVITY_LIST,
               additionalRequestParameters: {
@@ -65,7 +76,7 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.feedbackTab',
         components: [
           {
-            component: 'AsmCustomer360SupportTicketsComponent',
+            component: AsmCustomerSupportTicketsComponent,
             requestData: {
               type: Customer360Type.SUPPORT_TICKET_LIST,
               additionalRequestParameters: {
@@ -75,7 +86,7 @@ export const defaultCustomer360Config: Customer360Config = {
             config: { pageSize: 5 },
           },
           {
-            component: 'AsmCustomer360ProductReviewsComponent',
+            component: AsmCustomerProductReviewsComponent,
             requestData: {
               type: Customer360Type.REVIEW_LIST,
               additionalRequestParameters: {
@@ -90,19 +101,19 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.promotionsTab',
         components: [
           {
-            component: 'AsmCustomer360CouponComponent',
+            component: AsmCustomerCouponComponent,
             requestData: {
               type: Customer360Type.COUPON_LIST,
             },
           },
           {
-            component: 'AsmCustomer360PromotionComponent',
+            component: AsmCustomerPromotionComponent,
             requestData: {
               type: Customer360Type.PROMOTION_LIST,
             },
           },
           {
-            component: 'AsmCustomer360CustomerCouponComponent',
+            component: AsmCustomerCustomerCouponComponent,
             requestData: {
               type: Customer360Type.CUSTOMER_COUPON_LIST,
               additionalRequestParameters: {
@@ -116,7 +127,7 @@ export const defaultCustomer360Config: Customer360Config = {
         i18nNameKey: 'customer360.mapsTab',
         components: [
           {
-            component: 'AsmCustomer360MapComponent',
+            component: AsmCustomerMapComponent,
             requestData: {
               type: Customer360Type.STORE_LOCATION,
             },

diff --git a/...ibs/asm/customer-360/root/config/index.ts → ...m/customer-360/components/config/index.ts b/...ibs/asm/customer-360/root/config/index.ts → ...m/customer-360/components/config/index.ts
diff --git a/feature-libs/asm/customer-360/components/customer-360-components.module.ts b/feature-libs/asm/customer-360/components/customer-360-components.module.ts
@@ -29,23 +29,11 @@ import { AsmCustomerProductReviewsComponentModule } from './sections/asm-custome
 import { AsmCustomerProfileModule } from './sections/asm-customer-profile/asm-customer-profile.module';
 import { AsmCustomerSavedCartModule } from './sections/asm-customer-saved-cart/asm-customer-saved-cart.module';
 import { AsmCustomerSectionComponent } from './sections/asm-customer-section/asm-customer-section.component';
-import { AsmCustomerSupportTicketsComponent } from './sections/asm-customer-support-tickets/asm-customer-support-tickets.component';
 import { AsmCustomerSupportTicketsComponentModule } from './sections/asm-customer-support-tickets/asm-customer-support-tickets.component.module';
-import {
-  AsmCustomerActiveCartComponent,
-  AsmCustomerActivityComponent,
-  AsmCustomerMapComponent,
-  AsmCustomerProductInterestsComponent,
-  AsmCustomerProductReviewsComponent,
-  AsmCustomerProfileComponent,
-  AsmCustomerSavedCartComponent,
-} from './sections/components';
-import { AsmCustomerCouponComponent } from './sections/asm-customer-coupon/asm-customer-coupon.component';
 import { AsmCustomerCouponComponentModule } from './sections/asm-customer-coupon/asm-customer-coupon.module';
-import { AsmCustomerPromotionComponent } from './sections/asm-customer-promotion/asm-customer-promotion.component';
 import { AsmCustomerPromotionComponentModule } from './sections/asm-customer-promotion/asm-customer-promotion.module';
-import { AsmCustomerCustomerCouponComponent } from './sections/asm-customer-customer-coupon/asm-customer-customer-coupon.component';
 import { AsmCustomerCustomerCouponComponentModule } from './sections/asm-customer-customer-coupon/asm-customer-customer-coupon.module';
+import { defaultCustomer360LayoutConfig } from './default-customer-360-layout.config';
 
 @NgModule({
   imports: [
@@ -73,47 +61,6 @@ import { AsmCustomerCustomerCouponComponentModule } from './sections/asm-custome
   ],
   declarations: [Customer360Component, AsmCustomerSectionComponent],
   exports: [Customer360Component],
-  providers: [
-    provideDefaultConfig({
-      cmsComponents: {
-        AsmCustomer360Component: {
-          component: Customer360Component,
-        },
-        AsmCustomer360ProfileComponent: {
-          component: AsmCustomerProfileComponent,
-        },
-        AsmCustomer360ActiveCartComponent: {
-          component: AsmCustomerActiveCartComponent,
-        },
-        AsmCustomer360ProductInterestsComponent: {
-          component: AsmCustomerProductInterestsComponent,
-        },
-        AsmCustomer360ProductReviewsComponent: {
-          component: AsmCustomerProductReviewsComponent,
-        },
-        AsmCustomer360SupportTicketsComponent: {
-          component: AsmCustomerSupportTicketsComponent,
-        },
-        AsmCustomer360SavedCartComponent: {
-          component: AsmCustomerSavedCartComponent,
-        },
-        AsmCustomer360CustomerActivityComponent: {
-          component: AsmCustomerActivityComponent,
-        },
-        AsmCustomer360MapComponent: {
-          component: AsmCustomerMapComponent,
-        },
-        AsmCustomer360CouponComponent: {
-          component: AsmCustomerCouponComponent,
-        },
-        AsmCustomer360PromotionComponent: {
-          component: AsmCustomerPromotionComponent,
-        },
-        AsmCustomer360CustomerCouponComponent: {
-          component: AsmCustomerCustomerCouponComponent,
-        },
-      },
-    }),
-  ],
+  providers: [provideDefaultConfig(defaultCustomer360LayoutConfig)],
 })
 export class Customer360ComponentsModule {}