From 5983ae3a6563a2169a4bc489043b7f430ab0cc35 Mon Sep 17 00:00:00 2001 From: PJaneta Date: Fri, 10 Jan 2025 15:55:17 +0100 Subject: [PATCH] AD-334 Add Apple Pay Express Button with Frontend Logic and API Calls to CMS Components on PDP and Cart Pages - Spartacus - fix for no update on currency change + removing cart on PDP express payment --- .../express-checkout-cart.component.ts | 40 ++++++++++++++++--- .../google-express-payment.component.ts | 4 +- .../express-checkout-product.component.ts | 38 ++++++++++++++++-- .../service/adyen-express-order.service.ts | 27 +++++++------ 4 files changed, 86 insertions(+), 23 deletions(-) diff --git a/projects/adyen/adyen-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts b/projects/adyen/adyen-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts index 29559f9..8b43bc3 100644 --- a/projects/adyen/adyen-spartacus/src/cart/components/express-checkout-cart/express-checkout-cart.component.ts +++ b/projects/adyen/adyen-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(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/projects/adyen/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts b/projects/adyen/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts index a04e1a0..51baeea 100644 --- a/projects/adyen/adyen-spartacus/src/express/google-express-payment/google-express-payment.component.ts +++ b/projects/adyen/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/projects/adyen/adyen-spartacus/src/product/components/express-checkout-product/express-checkout-product.component.ts b/projects/adyen/adyen-spartacus/src/product/components/express-checkout-product/express-checkout-product.component.ts index 5fb5cc2..51d45b2 100644 --- a/projects/adyen/adyen-spartacus/src/product/components/express-checkout-product/express-checkout-product.component.ts +++ b/projects/adyen/adyen-spartacus/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(); 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 index 36660c8..eb94057 100644 --- 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 + connectorFunction: (userId: string, cartId: string, request: ExpressPaymentDataRequest) => Observable, + 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,7 +81,7 @@ export class AdyenExpressOrderService extends AdyenOrderService { ); adyenPlaceGoogleExpressOrder(paymentData: any, authorizedPaymentData: any, product: Product): Observable { - 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) => { @@ -86,7 +89,7 @@ export class AdyenExpressOrderService extends AdyenOrderService { } adyenPlaceAppleExpressOrder(paymentData: PaymentData, authorizedPaymentData: any, product: Product): Observable { - 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) => {