AD-321 Implement Configuration for Enabling Express Payments - fix

projects/adyen/adyen-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.html

@@ -1,3 +1,7 @@
-<cx-google-express-payment></cx-google-express-payment>
-<cx-apple-express-payment></cx-apple-express-payment>
+@if ((configuration$ | async)?.expressPaymentConfig.googlePayExpressEnabledOnCart) {
+  <cx-google-express-payment></cx-google-express-payment>
+}
+@if ((configuration$ | async)?.expressPaymentConfig.applePayExpressEnabledOnCart) {
+  <cx-apple-express-payment></cx-apple-express-payment>
+}
 <p></p>

projects/adyen/adyen-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts

@@ -1,10 +1,44 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import {CheckoutAdyenConfigurationService} from "../../../service/checkout-adyen-configuration.service";
+import { ActiveCartFacade } from '@spartacus/cart/base/root';
+import { UserIdService } from '@spartacus/core';
+import {AdyenConfigData} from "../../../core/models/occ.config.models";
+import {Subject, Subscription, filter, switchMap } from 'rxjs';
 
 @Component({
   selector: 'cx-express-checkout-cart',
   templateUrl: './express-checkout-cart.component.html',
   styleUrl: './express-checkout-cart.component.scss'
 })
-export class ExpressCheckoutCartComponent {
+export class ExpressCheckoutCartComponent implements OnInit, OnDestroy{
+  protected subscriptions = new Subscription();
+
+
+  configuration$: Subject<AdyenConfigData> = new Subject();
+
+  constructor(protected  activeCartFacade: ActiveCartFacade,
+              protected userIdService: UserIdService,
+              protected checkoutAdyenConfigurationService: CheckoutAdyenConfigurationService
+  ) {
+  }
+
+
+  ngOnInit(): void {
+    let subscription = this.activeCartFacade.getActiveCartId().pipe(
+      filter(cartId => !!cartId),
+      switchMap(cartId => this.userIdService.takeUserId().pipe(
+        switchMap(userId => this.checkoutAdyenConfigurationService.fetchCheckoutConfiguration(userId, cartId))
+      ))
+    ).subscribe(async config => {
+      if (config) {
+        this.configuration$.next(config)
+      }
+    });
+    this.subscriptions.add(subscription);
+    }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
 }

projects/adyen/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts

@@ -1,16 +1,15 @@
-import { Component, OnInit,OnDestroy, Input } from '@angular/core';
-import { filter, map, switchMap, take } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { GooglePayButtonModule } from '@google-pay/button-angular';
-import { ActionHandledReturnObject, CoreConfiguration, UIElement } from "@adyen/adyen-web";
-import { AdyenCheckout, AdyenCheckoutError, GooglePay } from '@adyen/adyen-web/auto';
-import { CheckoutAdyenConfigurationService } from "../../service/checkout-adyen-configuration.service";
-import { AdyenConfigData } from "../../core/models/occ.config.models";
-import { AdyenExpressOrderService } from "../../service/adyen-express-order.service";
-import { RoutingService, Product,  EventService,  UserIdService, } from '@spartacus/core';
-import { of } from 'rxjs';
-import {BehaviorSubject, Subscription,} from 'rxjs';
-import {ActiveCartFacade, CartType, MultiCartFacade} from '@spartacus/cart/base/root';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {filter, map, switchMap, take} from 'rxjs/operators';
+import {CommonModule} from '@angular/common';
+import {GooglePayButtonModule} from '@google-pay/button-angular';
+import {CoreConfiguration, UIElement} from "@adyen/adyen-web";
+import {AdyenCheckout, AdyenCheckoutError, GooglePay} from '@adyen/adyen-web/auto';
+import {CheckoutAdyenConfigurationService} from "../../service/checkout-adyen-configuration.service";
+import {AdyenConfigData} from "../../core/models/occ.config.models";
+import {AdyenExpressOrderService} from "../../service/adyen-express-order.service";
+import {EventService, Product, RoutingService, UserIdService,} from '@spartacus/core';
+import {of, Subscription} from 'rxjs';
+import {ActiveCartFacade} from '@spartacus/cart/base/root';
 import {CheckoutAdyenConfigurationReloadEvent} from "../../events/checkout-adyen.events";
 
 @Component({
@@ -61,25 +60,27 @@ export class GoogleExpressPaymentComponent implements OnInit, OnDestroy{
   }
 
   private initializeGooglePay() {
-    this.checkoutAdyenConfigurationService.getCheckoutConfigurationState()
-      .pipe(
-        filter((state) => !state.loading),
-        take(1),
-        map((state) => state.data),
-        switchMap((config) => config ? this.setupAdyenCheckout(config) : of(null))
-      )
-      .subscribe({
-        error: (error) => console.error('Error initializing Google Pay:', error)
-      });
+    this.subscriptions.add(
+      this.checkoutAdyenConfigurationService.getCheckoutConfigurationState()
+        .pipe(
+          filter((state) => !state.loading),
+          take(1),
+          map((state) => state.data),
+          switchMap((config) => config ? this.setupAdyenCheckout(config) : of(null))
+        )
+        .subscribe({
+          error: (error) => console.error('Error initializing Google Pay:', error)
+        })
+    )
   }
 
   private async setupAdyenCheckout(config: AdyenConfigData) {
     const adyenCheckout = await AdyenCheckout(this.getAdyenCheckoutConfig(config));
 
-    if (this.googlePay)
+    if (this.googlePay) {
       this.googlePay.unmount();
+    }
 
-    if (config.expressPaymentConfig && (this.product && config.expressPaymentConfig.googlePayExpressEnabledOnProduct || config.expressPaymentConfig.googlePayExpressEnabledOnCart)){
       this.googlePay = new GooglePay(adyenCheckout, {
         callbackIntents: ['SHIPPING_ADDRESS'],
         shippingAddressRequired: true,
@@ -112,7 +113,6 @@ export class GoogleExpressPaymentComponent implements OnInit, OnDestroy{
         },
         onError: (error) => this.handleError(error)
       }).mount("#google-pay-button");
-    }
   }
 
   private handleOnSubmit(state: any, actions: any) {
@@ -147,7 +147,7 @@ export class GoogleExpressPaymentComponent implements OnInit, OnDestroy{
       if (config) {
         await this.setupAdyenCheckout(config)
       }
-    });
+    }).unsubscribe()
   }
 
   protected getAdyenCheckoutConfig(adyenConfig: AdyenConfigData): CoreConfiguration {

projects/adyen/adyen-spartacus/src/product/components/express-checkout-product/express-checkout-product.component.html

@@ -1,5 +1,9 @@
 <br />
-<p *ngIf="product?.purchasable && (product?.price?.value > 0)">
-  <cx-google-express-payment [product]="product"></cx-google-express-payment>
-  <cx-apple-express-payment [product]="product"></cx-apple-express-payment>
+<p *ngIf="(product?.purchasable && (product?.price?.value > 0))">
+  @if ((configuration$ | async)?.expressPaymentConfig.googlePayExpressEnabledOnProduct){
+    <cx-google-express-payment [product]="product" [configuration$]="configuration$"></cx-google-express-payment>
+  }
+  @if ((configuration$ | async)?.expressPaymentConfig.applePayExpressEnabledOnProduct){
+    <cx-apple-express-payment [product]="product" ></cx-apple-express-payment>
+  }
 </p>

projects/adyen/adyen-spartacus/src/product/components/express-checkout-product/express-checkout-product.component.ts

@@ -1,30 +1,57 @@
-import { Component, OnInit } from '@angular/core';
-import { CurrentProductService } from '@spartacus/storefront';
-import { Observable } from 'rxjs';
-import {
-  BaseOption,
-  isNotNullable,
-  Product,
-  RequiredPick,
-  VariantType,
-} from '@spartacus/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {CurrentProductService} from '@spartacus/storefront';
+import {Product, UserIdService,} from '@spartacus/core';
+import {ActiveCartFacade} from '@spartacus/cart/base/root';
+import {filter, Subject, Subscription, switchMap} from 'rxjs';
+import {AdyenConfigData} from "../../../core/models/occ.config.models";
+import {CheckoutAdyenConfigurationService} from "../../../service/checkout-adyen-configuration.service";
 
 @Component({
   selector: 'cx-express-checkout-product',
   templateUrl: './express-checkout-product.component.html',
   styleUrl: './express-checkout-product.component.css'
 })
-export class ExpressCheckoutProductComponent implements OnInit {
+export class ExpressCheckoutProductComponent implements OnInit, OnDestroy {
+
+  protected subscriptions = new Subscription();
+
 
   product: Product | null = null;
+  configuration$: Subject<AdyenConfigData> = new Subject();
 
-  constructor(protected currentProductService:CurrentProductService) {
+  constructor(protected currentProductService:CurrentProductService,
+              protected  activeCartFacade: ActiveCartFacade,
+              protected userIdService: UserIdService,
+              protected checkoutAdyenConfigurationService: CheckoutAdyenConfigurationService
+  ) {
   }
 
+
   ngOnInit() {
-    this.currentProductService.getProduct().subscribe((product: Product | null) => {
+    let subscription = this.currentProductService.getProduct().subscribe((product: Product | null) => {
       this.product = product;
     });
+    this.subscriptions.add(subscription);
+
+    this.loadConfiguration()
   }
 
+  loadConfiguration(){
+    let subscription = this.activeCartFacade.getActiveCartId().pipe(
+      filter(cartId => !!cartId),
+      switchMap(cartId => this.userIdService.takeUserId().pipe(
+        switchMap(userId => this.checkoutAdyenConfigurationService.fetchCheckoutConfiguration(userId, cartId))
+      ))
+    ).subscribe(async config => {
+      if (config) {
+        this.configuration$.next(config)
+      }
+    });
+    this.subscriptions.add(subscription);
+  }
+
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 }