Implement Hosted-fields pattern#3 (iframe) (#17664)

CXSPA-3881
added submit-complete

integration-libs/opf/base/core/connectors/opf-payment.adapter.ts

@@ -7,6 +7,8 @@
 import {
   OpfPaymentVerificationPayload,
   OpfPaymentVerificationResponse,
+  SubmitCompleteRequest,
+  SubmitCompleteResponse,
   SubmitRequest,
   SubmitResponse,
 } from '@spartacus/opf/base/root';
@@ -31,4 +33,14 @@ export abstract class OpfPaymentAdapter {
     otpKey: string,
     paymentSessionId: string
   ): Observable<SubmitResponse>;
+
+  /**
+   * Abstract method used to submit-complete payment for hosted-fields pattern
+   */
+
+  abstract submitCompletePayment(
+    submitRequest: SubmitCompleteRequest,
+    otpKey: string,
+    paymentSessionId: string
+  ): Observable<SubmitCompleteResponse>;
 }

integration-libs/opf/base/core/connectors/opf-payment.connector.ts

@@ -8,6 +8,8 @@ import { Injectable } from '@angular/core';
 import {
   OpfPaymentVerificationPayload,
   OpfPaymentVerificationResponse,
+  SubmitCompleteRequest,
+  SubmitCompleteResponse,
   SubmitRequest,
   SubmitResponse,
 } from '@spartacus/opf/base/root';
@@ -33,4 +35,16 @@ export class OpfPaymentConnector {
   ): Observable<SubmitResponse> {
     return this.adapter.submitPayment(submitRequest, otpKey, paymentSessionId);
   }
+
+  public submitCompletePayment(
+    submitCompleteRequest: SubmitCompleteRequest,
+    otpKey: string,
+    paymentSessionId: string
+  ): Observable<SubmitCompleteResponse> {
+    return this.adapter.submitCompletePayment(
+      submitCompleteRequest,
+      otpKey,
+      paymentSessionId
+    );
+  }
 }

integration-libs/opf/base/core/facade/opf-global-functions.service.ts

@@ -39,6 +39,7 @@ export class OpfGlobalFunctionsService implements OpfGlobalFunctionsFacade {
     vcr?: ViewContainerRef
   ): void {
     this.registerSubmit(paymentSessionId, vcr);
+    this.registerSubmitComplete(paymentSessionId, vcr);
     this._isGlobalServiceInit = true;
   }
 
@@ -62,6 +63,24 @@ export class OpfGlobalFunctionsService implements OpfGlobalFunctionsFacade {
     return window.Opf.payments;
   }
 
+  protected startLoaderSpinner(vcr: ViewContainerRef) {
+    return this.launchDialogService.launch(
+      LAUNCH_CALLER.PLACE_ORDER_SPINNER,
+      vcr
+    );
+  }
+
+  protected stopLoaderSpinner(overlayedSpinner: Observable<ComponentRef<any>>) {
+    overlayedSpinner
+      .subscribe((component) => {
+        this.launchDialogService.clear(LAUNCH_CALLER.PLACE_ORDER_SPINNER);
+        if (component) {
+          component.destroy();
+        }
+      })
+      .unsubscribe();
+  }
+
   protected registerSubmit(
     paymentSessionId: string,
     vcr?: ViewContainerRef
@@ -90,10 +109,7 @@ export class OpfGlobalFunctionsService implements OpfGlobalFunctionsFacade {
       return this.ngZone.run(() => {
         let overlayedSpinner: void | Observable<ComponentRef<any> | undefined>;
         if (vcr) {
-          overlayedSpinner = this.launchDialogService.launch(
-            LAUNCH_CALLER.PLACE_ORDER_SPINNER,
-            vcr
-          );
+          overlayedSpinner = this.startLoaderSpinner(vcr);
         }
         const callbackArray: [
           MerchantCallback,
@@ -113,16 +129,60 @@ export class OpfGlobalFunctionsService implements OpfGlobalFunctionsFacade {
           .pipe(
             finalize(() => {
               if (overlayedSpinner) {
-                overlayedSpinner
-                  .subscribe((component) => {
-                    this.launchDialogService.clear(
-                      LAUNCH_CALLER.PLACE_ORDER_SPINNER
-                    );
-                    if (component) {
-                      component.destroy();
-                    }
-                  })
-                  .unsubscribe();
+                this.stopLoaderSpinner(overlayedSpinner);
+              }
+            })
+          )
+          .toPromise();
+      });
+    };
+  }
+
+  protected registerSubmitComplete(
+    paymentSessionId: string,
+    vcr?: ViewContainerRef
+  ): void {
+    this.getGlobalFunctionContainer().submitComplete = ({
+      cartId,
+      additionalData,
+      submitSuccess = (): void => {
+        // this is intentional
+      },
+      submitPending = (): void => {
+        // this is intentional
+      },
+      submitFailure = (): void => {
+        // this is intentional
+      },
+    }: {
+      cartId: string;
+      additionalData: Array<KeyValuePair>;
+      submitSuccess: MerchantCallback;
+      submitPending: MerchantCallback;
+      submitFailure: MerchantCallback;
+    }): Promise<boolean> => {
+      return this.ngZone.run(() => {
+        let overlayedSpinner: void | Observable<ComponentRef<any> | undefined>;
+        if (vcr) {
+          overlayedSpinner = this.startLoaderSpinner(vcr);
+        }
+        const callbackArray: [
+          MerchantCallback,
+          MerchantCallback,
+          MerchantCallback
+        ] = [submitSuccess, submitPending, submitFailure];
+
+        return this.opfPaymentFacade
+          .submitCompletePayment({
+            additionalData,
+            paymentSessionId,
+            cartId,
+            callbackArray,
+          })
+          .pipe(
+            finalize(() => {
+              if (overlayedSpinner) {
+                this.stopLoaderSpinner(overlayedSpinner);
               }
             })
           )

integration-libs/opf/base/core/facade/opf-payment.service.ts

@@ -5,46 +5,18 @@
  */
 
 import { Injectable } from '@angular/core';
+import { Command, CommandService, WindowRef } from '@spartacus/core';
 import {
-  Command,
-  CommandService,
-  GlobalMessageService,
-  RoutingService,
-  UserIdService,
-  WindowRef,
-} from '@spartacus/core';
-import {
-  MerchantCallback,
-  OpfOrderFacade,
-  OpfOtpFacade,
-  OpfPaymentError,
   OpfPaymentFacade,
   OpfPaymentVerificationPayload,
   OpfPaymentVerificationResponse,
-  PaymentErrorType,
-  PaymentMethod,
+  SubmitCompleteInput,
   SubmitInput,
-  SubmitRequest,
-  SubmitResponse,
-  SubmitStatus,
-  defaultError,
 } from '@spartacus/opf/base/root';
 
-import { ActiveCartFacade } from '@spartacus/cart/base/root';
-import { Order } from '@spartacus/order/root';
-import { EMPTY, Observable, combineLatest, from, throwError } from 'rxjs';
-import {
-  catchError,
-  concatMap,
-  filter,
-  map,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { OpfPaymentConnector } from '../connectors/opf-payment.connector';
-import { OpfPaymentErrorHandlerService } from '../services/opf-payment-error-handler.service';
-import { getBrowserInfo } from '../utils/opf-payment-utils';
+import { OpfPaymentHostedFieldsService } from '../services/opf-payment-hosted-fields.service';
 
 @Injectable()
 export class OpfPaymentService implements OpfPaymentFacade {
@@ -67,115 +39,27 @@ export class OpfPaymentService implements OpfPaymentFacade {
     },
     boolean
   > = this.commandService.create((payload) => {
-    const {
-      paymentMethod,
-      cartId,
-      additionalData,
-      paymentSessionId,
-      returnPath,
-    } = payload.submitInput;
-
-    const submitRequest: SubmitRequest = {
-      paymentMethod,
-      cartId,
-      additionalData,
-      channel: 'BROWSER',
-      browserInfo: getBrowserInfo(this.winRef.nativeWindow),
-    };
-    if (paymentMethod !== PaymentMethod.CREDIT_CARD) {
-      submitRequest.encryptedToken = '';
-    }
-
-    return combineLatest([
-      this.userIdService.getUserId(),
-      this.activeCartFacade.getActiveCartId(),
-    ]).pipe(
-      switchMap(([userId, activeCartId]: [string, string]) => {
-        submitRequest.cartId = activeCartId;
-        return this.opfOtpFacade.generateOtpKey(userId, activeCartId);
-      }),
-      filter((response) => Boolean(response?.value)),
-      take(1),
-      concatMap(({ value: otpKey }) =>
-        this.opfPaymentConnector.submitPayment(
-          submitRequest,
-          otpKey,
-          paymentSessionId
-        )
-      ),
-      concatMap((response: SubmitResponse) =>
-        this.submitPaymentResponseHandler(
-          response,
-          payload.submitInput.callbackArray
-        )
-      ),
-      tap((order: Order) => {
-        if (order) {
-          this.routingService.go({ cxRoute: 'orderConfirmation' });
-        }
-      }),
-      map((order: Order) => (order ? true : false)),
-      catchError((error: OpfPaymentError | undefined) => {
-        this.opfPaymentErrorHandlerService.handlePaymentError(
-          error,
-          returnPath
-        );
-        return throwError(error);
-      })
+    return this.opfPaymentHostedFieldsService.submitPayment(
+      payload.submitInput
     );
   });
 
-  protected submitPaymentResponseHandler(
-    response: SubmitResponse,
-    [submitSuccess, submitPending, submitFailure]: [
-      MerchantCallback,
-      MerchantCallback,
-      MerchantCallback
-    ]
-  ) {
-    if (
-      response.status === SubmitStatus.ACCEPTED ||
-      response.status === SubmitStatus.DELAYED
-    ) {
-      return from(Promise.resolve(submitSuccess(response))).pipe(
-        concatMap(() => this.opfOrderFacade.placeOpfOrder(true))
-      );
-    } else if (response.status === SubmitStatus.PENDING) {
-      return from(Promise.resolve(submitPending(response))).pipe(
-        concatMap(() => EMPTY)
-      );
-    } else if (response.status === SubmitStatus.REJECTED) {
-      return from(Promise.resolve(submitFailure(response))).pipe(
-        concatMap(() =>
-          throwError({
-            ...defaultError,
-            type: PaymentErrorType.PAYMENT_REJECTED,
-          })
-        )
-      );
-    } else {
-      return from(Promise.resolve(submitFailure(response))).pipe(
-        concatMap(() =>
-          throwError({
-            ...defaultError,
-            type: PaymentErrorType.STATUS_NOT_RECOGNIZED,
-          })
-        )
-      );
-    }
-  }
+  protected submitCompletePaymentCommand: Command<
+    {
+      submitCompleteInput: SubmitCompleteInput;
+    },
+    boolean
+  > = this.commandService.create((payload) => {
+    return this.opfPaymentHostedFieldsService.submitCompletePayment(
+      payload.submitCompleteInput
+    );
+  });
 
   constructor(
     protected commandService: CommandService,
     protected opfPaymentConnector: OpfPaymentConnector,
     protected winRef: WindowRef,
-    protected opfOtpFacade: OpfOtpFacade,
-    protected activeCartFacade: ActiveCartFacade,
-    protected userIdService: UserIdService,
-    protected routingService: RoutingService,
-    protected opfOrderFacade: OpfOrderFacade,
-    protected globalMessageService: GlobalMessageService,
-    protected opfPaymentErrorHandlerService: OpfPaymentErrorHandlerService
+    protected opfPaymentHostedFieldsService: OpfPaymentHostedFieldsService
   ) {}
 
   verifyPayment(
@@ -189,6 +73,14 @@ export class OpfPaymentService implements OpfPaymentFacade {
   }
 
   submitPayment(submitInput: SubmitInput): Observable<boolean> {
-    return this.submitPaymentCommand.execute({ submitInput });
+    return this.submitPaymentCommand.execute({
+      submitInput,
+    });
+  }
+
+  submitCompletePayment(
+    submitCompleteInput: SubmitCompleteInput
+  ): Observable<boolean> {
+    return this.submitCompletePaymentCommand.execute({ submitCompleteInput });
   }
 }

integration-libs/opf/base/core/services/index.ts

@@ -6,3 +6,4 @@
 
 export * from './opf-endpoints.service';
 export * from './opf-payment-error-handler.service';
+export * from './opf-payment-hosted-fields.service';