Merge pull request #36 from Adyen/feature/AD-334a

AD-334 Add Apple Pay Express Button with Frontend Logic and API Calls…
Adyen · Jan 10, 2025 · 0ace443 · 0ace443
2 parents 7afc57d + 5983ae3
commit 0ace443
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 23 deletions.
diff --git a/...en-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts b/...en-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts
@@ -1,21 +1,49 @@
-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 {EventService, UserIdService} from '@spartacus/core';
+import {AdyenExpressConfigData} from "../../../core/models/occ.config.models";
+import {BehaviorSubject, Subscription} from 'rxjs';
+import {CheckoutAdyenConfigurationReloadEvent} from "../../../events/checkout-adyen.events";
 
 @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$ = this.checkoutAdyenConfigurationService.fetchExpressCheckoutCartConfiguration();
+  configuration$ = new BehaviorSubject<AdyenExpressConfigData | null>(null);
 
-  constructor(protected  activeCartFacade: ActiveCartFacade,
+  constructor(protected activeCartFacade: ActiveCartFacade,
               protected userIdService: UserIdService,
-              protected checkoutAdyenConfigurationService: CheckoutAdyenConfigurationService
+              protected checkoutAdyenConfigurationService: CheckoutAdyenConfigurationService,
+              protected eventService: EventService
   ) {
   }
 
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.eventService.get(CheckoutAdyenConfigurationReloadEvent).subscribe(event => {
+        console.log(event);
+        this.configuration$.next(null);
+
+        this.subscriptions.add(
+          this.checkoutAdyenConfigurationService.fetchExpressCheckoutCartConfiguration().subscribe((configuration: AdyenExpressConfigData) => {
+            this.configuration$.next(configuration);
+          }))
+      })
+    );
+
+    this.subscriptions.add(
+      this.checkoutAdyenConfigurationService.fetchExpressCheckoutCartConfiguration().subscribe((configuration: AdyenExpressConfigData) => {
+        this.configuration$.next(configuration);
+      }))
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe()
+  }
+
 }
diff --git a/...en/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts b/...en/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts
@@ -43,7 +43,9 @@ export class GoogleExpressPaymentComponent implements OnInit, OnDestroy{
 
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
-    if(this.googlePay) this.googlePay.unmount();
+    if (this.googlePay) {
+      this.googlePay.unmount();
+    }
   }
 
   private async setupAdyenCheckout(config: AdyenExpressConfigData) {

diff --git a/...cus/src/product/components/express-checkout-product/express-checkout-product.component.ts b/...cus/src/product/components/express-checkout-product/express-checkout-product.component.ts
@@ -1,25 +1,55 @@
-import {Component} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {CurrentProductService} from '@spartacus/storefront';
-import {UserIdService,} from '@spartacus/core';
+import {EventService, UserIdService,} from '@spartacus/core';
 import {ActiveCartFacade} from '@spartacus/cart/base/root';
 import {CheckoutAdyenConfigurationService} from "../../../service/checkout-adyen-configuration.service";
+import {CheckoutAdyenConfigurationReloadEvent} from "../../../events/checkout-adyen.events";
+import {Subject, Subscription} from 'rxjs';
+import {AdyenExpressConfigData} from "../../../core/models/occ.config.models";
 
 @Component({
   selector: 'cx-express-checkout-product',
   templateUrl: './express-checkout-product.component.html',
   styleUrl: './express-checkout-product.component.css'
 })
-export class ExpressCheckoutProductComponent {
+export class ExpressCheckoutProductComponent implements OnInit, OnDestroy {
+  protected subscriptions = new Subscription();
+
 
   product$ = this.currentProductService.getProduct();
 
-  configuration$= this.checkoutAdyenConfigurationService.fetchExpressCheckoutPDPConfiguration()
+  configuration$ = new Subject<AdyenExpressConfigData | null>();
 
   constructor(protected currentProductService: CurrentProductService,
               protected activeCartFacade: ActiveCartFacade,
               protected userIdService: UserIdService,
               protected checkoutAdyenConfigurationService: CheckoutAdyenConfigurationService,
+              protected eventService: EventService
   ) {
   }
 
+
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.eventService.get(CheckoutAdyenConfigurationReloadEvent).subscribe(event => {
+        this.configuration$.next(null);
+
+        this.subscriptions.add(
+          this.checkoutAdyenConfigurationService.fetchExpressCheckoutPDPConfiguration().subscribe((configuration: AdyenExpressConfigData) => {
+          this.configuration$.next(configuration);
+        })
+        )
+      })
+    );
+
+    this.subscriptions.add(
+      this.checkoutAdyenConfigurationService.fetchExpressCheckoutPDPConfiguration().subscribe((configuration: AdyenExpressConfigData) => {
+      this.configuration$.next(configuration);
+    }))
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe()
+  }
+
 }
diff --git a/projects/adyen/adyen-spartacus/src/service/adyen-express-order.service.ts b/projects/adyen/adyen-spartacus/src/service/adyen-express-order.service.ts
@@ -25,7 +25,8 @@ type ExpressPaymentDataRequest = GooglePayExpressCartRequest | ApplePayExpressRe
 
 type ExpressCommand = {
   paymentData: ExpressPaymentDataRequest,
-  connectorFunction: (userId: string, cartId: string, request: ExpressPaymentDataRequest) => Observable<PlaceOrderResponse>
+  connectorFunction: (userId: string, cartId: string, request: ExpressPaymentDataRequest) => Observable<PlaceOrderResponse>,
+  isPDP: boolean,
 }
 
 @Injectable()
@@ -57,15 +58,17 @@ export class AdyenExpressOrderService extends AdyenOrderService {
               tap((placeOrderResponse) => {
                 this.placedOrder$.next(placeOrderResponse.orderData);
                 this.placedOrderNumber$.next(placeOrderResponse.orderNumber);
-                this.eventService.dispatch(
-                  {
-                    userId,
-                    cartId,
-                    cartCode: cartId,
-                    order: placeOrderResponse.orderData!,
-                  },
-                  OrderPlacedEvent
-                );
+                if (!expressCommand.isPDP) {
+                  this.eventService.dispatch(
+                    {
+                      userId,
+                      cartId,
+                      cartCode: cartId,
+                      order: placeOrderResponse.orderData!,
+                    },
+                    OrderPlacedEvent
+                  );
+                }
               }),
               map((response) => ({ ...response, success: true })),
               catchError((error: HttpErrorResponse) => this.handlePlaceOrderError(error))
@@ -78,15 +81,15 @@ export class AdyenExpressOrderService extends AdyenOrderService {
     );
 
   adyenPlaceGoogleExpressOrder(paymentData: any, authorizedPaymentData: any, product: Product): Observable<PlaceOrderResponse> {
-    return this.adyenPlaceExpressOrderCommand.execute({paymentData: this.prepareDataGoogle(paymentData, authorizedPaymentData, product), connectorFunction: this.placeExpressGoogleOrderWrapper});
+    return this.adyenPlaceExpressOrderCommand.execute({paymentData: this.prepareDataGoogle(paymentData, authorizedPaymentData, product), connectorFunction: this.placeExpressGoogleOrderWrapper, isPDP: !!product});
   }
 
   protected placeExpressGoogleOrderWrapper = (userId: string, cartId: string, request: ExpressPaymentDataRequest) => {
     return this.placeOrderConnector.placeGoogleExpressOrderCart(userId, cartId, request as GooglePayExpressCartRequest)
   }
 
   adyenPlaceAppleExpressOrder(paymentData: PaymentData, authorizedPaymentData: any, product: Product): Observable<PlaceOrderResponse> {
-    return this.adyenPlaceExpressOrderCommand.execute({paymentData: this.prepareDataApple(paymentData, authorizedPaymentData, product), connectorFunction: this.placeExpressAppleOrderWrapper});
+    return this.adyenPlaceExpressOrderCommand.execute({paymentData: this.prepareDataApple(paymentData, authorizedPaymentData, product), connectorFunction: this.placeExpressAppleOrderWrapper, isPDP: !!product});
   }
 
   protected placeExpressAppleOrderWrapper = (userId: string, cartId: string, request: ExpressPaymentDataRequest) => {