Add review page handling for B2B OPF Checkout

integration-libs/opf/_index.scss

@@ -10,9 +10,10 @@
 $opf-components-allowlist: cx-opf-payment-method-details,
   cx-opf-checkout-payment-and-review, cx-opf-checkout-payments,
   cx-opf-checkout-billing-address-form, cx-opf-checkout-payment-wrapper,
-  cx-opf-checkout-terms-and-conditions-alert, cx-opf-error-modal,
-  cx-opf-cta-element, cx-opf-google-pay, cx-opf-apple-pay,
-  cx-opf-quick-buy-buttons, cx-opf-b2b-checkout-payment-type !default;
+  cx-opf-checkout-review-card, cx-opf-checkout-terms-and-conditions-alert,
+  cx-opf-error-modal, cx-opf-cta-element, cx-opf-google-pay, cx-opf-apple-pay,
+  cx-opf-quick-buy-buttons, cx-opf-b2b-checkout-payment-type,
+  cx-opf-b2b-checkout-review !default;
 
 $skipComponentStyles: () !default;
 

integration-libs/opf/checkout/assets/translations/en/opfCheckout.json

@@ -4,7 +4,8 @@
       "paymentType": "Method of payment",
       "shipping": "Shipping",
       "deliveryMethod": "Delivery Method",
-      "paymentAndReview": "Payment & Review"
+      "paymentAndReview": "Payment & Review",
+      "review": "Review Order"
     },
     "paymentAndReviewTitle": "Payment and review",
     "billingAddress": "Billing Address",

integration-libs/opf/checkout/components/b2b/index.ts

@@ -6,3 +6,4 @@
 
 export * from './opf-b2b-checkout-components.module';
 export * from './opf-b2b-checkout-payment-type/index';
+export * from './opf-b2b-checkout-review/index';

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-components.module.ts

@@ -7,8 +7,9 @@
 import { NgModule } from '@angular/core';
 
 import { OpfB2bCheckoutPaymentTypeModule } from './opf-b2b-checkout-payment-type';
+import { OpfB2bCheckoutReviewModule } from './opf-b2b-checkout-review';
 
 @NgModule({
-  imports: [OpfB2bCheckoutPaymentTypeModule],
+  imports: [OpfB2bCheckoutPaymentTypeModule, OpfB2bCheckoutReviewModule],
 })
 export class OpfB2bCheckoutComponentsModule {}

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-payment-type/opf-b2b-checkout-payment-type.component.spec.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO: Add unit tests

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-payment-type/opf-b2b-checkout-payment-type.module.ts

@@ -26,6 +26,8 @@ import { OpfB2bCheckoutPaymentTypeComponent } from './opf-b2b-checkout-payment-t
     CommonModule,
     I18nModule,
     SpinnerModule,
+    FeaturesConfigModule,
+    OpfCheckoutPaymentsModule,
     ConfigModule.withConfig(<CmsConfig>{
       cmsComponents: {
         OpfCheckoutPaymentType: {
@@ -34,8 +36,6 @@ import { OpfB2bCheckoutPaymentTypeComponent } from './opf-b2b-checkout-payment-t
         },
       },
     }),
-    FeaturesConfigModule,
-    OpfCheckoutPaymentsModule,
   ],
   declarations: [OpfB2bCheckoutPaymentTypeComponent],
   exports: [OpfB2bCheckoutPaymentTypeComponent],

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-review/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './opf-b2b-checkout-review.component';
+export * from './opf-b2b-checkout-review.module';

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-review/opf-b2b-checkout-review.component.html

@@ -0,0 +1,114 @@
+<ng-container
+  *ngIf="{
+    value: explicitTermsAndConditions$ | async,
+  } as explicitTermsAndConditions"
+>
+  <div class="cx-opf-review-card-wrapper">
+    <cx-opf-checkout-review-card
+      [cardContent$]="getPoNumberCard(poNumber$ | async)"
+      [editConfig]="{
+        route: getCheckoutStepUrl(checkoutStepTypePaymentType),
+        ariaLabelKey: 'checkoutReview.editPoNumber',
+      }"
+    ></cx-opf-checkout-review-card>
+    <cx-opf-checkout-review-card
+      [cardContent$]="
+        getPaymentMethodNameCard(selectedPaymentProviderName$ | async)
+      "
+      [editConfig]="{
+        route: getCheckoutStepUrl(checkoutStepTypePaymentType),
+        ariaLabelKey: 'checkoutReview.editPaymentMethod',
+      }"
+    ></cx-opf-checkout-review-card>
+    <cx-opf-checkout-review-card
+      [cardContent$]="getDeliveryAddressCard(deliveryAddress$ | async)"
+      [editConfig]="{
+        route: getCheckoutStepUrl(checkoutStepTypeDeliveryAddress),
+        ariaLabelKey: 'checkoutReview.editDeliveryAddressDetails',
+      }"
+    ></cx-opf-checkout-review-card>
+    <cx-opf-checkout-review-card
+      [cardContent$]="getDeliveryModeCard(deliveryMode$ | async)"
+      [editConfig]="{
+        route: getCheckoutStepUrl(checkoutStepTypeDeliveryMode),
+        ariaLabelKey: 'checkoutReview.editDeliveryMode',
+      }"
+    ></cx-opf-checkout-review-card>
+  </div>
+
+  <div
+    *ngIf="explicitTermsAndConditions.value"
+    class="cx-opf-terms-and-conditions"
+    [attr.aria-label]="'opfCheckout.termsAndConditions' | cxTranslate"
+  >
+    <h3>{{ 'opfCheckout.termsAndConditions' | cxTranslate }}</h3>
+
+    <cx-opf-checkout-terms-and-conditions-alert
+      [isVisible]="termsAndConditionInvalid"
+      [isExplicit]="explicitTermsAndConditions.value"
+      [isDismissible]="false"
+    ></cx-opf-checkout-terms-and-conditions-alert>
+
+    <form
+      class="cx-place-order-form form-check"
+      [formGroup]="checkoutSubmitForm"
+    >
+      <div class="form-group">
+        <label>
+          <input
+            formControlName="termsAndConditions"
+            class="scaled-input form-check-input"
+            type="checkbox"
+            (change)="toggleTermsAndConditions()"
+          />
+          <span class="form-check-label">
+            {{ 'checkoutReview.confirmThatRead' | cxTranslate }}
+            <a
+              [routerLink]="{ cxRoute: 'termsAndConditions' } | cxUrl"
+              class="cx-tc-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ 'checkoutReview.termsAndConditions' | cxTranslate }}
+            </a>
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <cx-opf-checkout-billing-address-form></cx-opf-checkout-billing-address-form>
+
+  <cx-opf-checkout-terms-and-conditions-alert
+    *ngIf="!explicitTermsAndConditions.value"
+    [isDismissible]="true"
+    [isVisible]="termsAndConditionInvalid"
+    [isExplicit]="explicitTermsAndConditions.value"
+  ></cx-opf-checkout-terms-and-conditions-alert>
+
+  <!-- detect if b2c -->
+  <!--
+    <cx-opf-checkout-payments
+      [elementsPerPage]="10"
+      [explicitTermsAndConditions]="explicitTermsAndConditions.value"
+      [disabled]="termsAndConditionInvalid"
+    >
+      <cx-opf-checkout-terms-and-conditions-alert
+        *ngIf="!explicitTermsAndConditions.value"
+        [isDismissible]="true"
+        [isVisible]="termsAndConditionInvalid"
+        [isExplicit]="explicitTermsAndConditions.value"
+      ></cx-opf-checkout-terms-and-conditions-alert>
+    </cx-opf-checkout-payments> -->
+
+  <!-- detect for b2b -->
+  <cx-opf-checkout-payments
+    [onlyPaymentWrapperMode]="true"
+    (selectedPaymentProviderName)="onPaymentProviderSelected($event)"
+  ></cx-opf-checkout-payments>
+
+  <cx-opf-checkout-review-cart-details
+    [cart]="cart$ | async"
+    [entries]="entries$ | async"
+  ></cx-opf-checkout-review-cart-details>
+</ng-container>

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-review/opf-b2b-checkout-review.component.spec.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO: Add unit tests

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-review/opf-b2b-checkout-review.component.ts

@@ -0,0 +1,155 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { Cart, PaymentType } from '@spartacus/cart/base/root';
+import { CheckoutPaymentTypeFacade } from '@spartacus/checkout/b2b/root';
+import { CheckoutReviewSubmitComponent } from '@spartacus/checkout/base/components';
+import { CmsService, Page } from '@spartacus/core';
+import {
+  OpfBaseFacade,
+  OpfMetadataStoreService,
+} from '@spartacus/opf/base/root';
+import { OPF_EXPLICIT_TERMS_AND_CONDITIONS_COMPONENT } from '@spartacus/opf/checkout/root';
+import {
+  Observable,
+  take,
+  map,
+  filter,
+  combineLatest,
+  BehaviorSubject,
+} from 'rxjs';
+import { Card } from '@spartacus/storefront';
+
+@Component({
+  selector: 'cx-opf-b2b-checkout-review',
+  templateUrl: './opf-b2b-checkout-review.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class OpfB2bCheckoutReviewComponent
+  extends CheckoutReviewSubmitComponent
+  implements OnInit
+{
+  protected fb = inject(UntypedFormBuilder);
+  protected opfMetadataStoreService = inject(OpfMetadataStoreService);
+  protected cmsService = inject(CmsService);
+  protected checkoutPaymentTypeFacade = inject(CheckoutPaymentTypeFacade);
+  protected opfBaseFacade = inject(OpfBaseFacade);
+
+  protected defaultTermsAndConditionsFieldValue = false;
+
+  protected selectedPaymentProviderName$ = new BehaviorSubject<
+    string | undefined
+  >(undefined);
+
+  explicitTermsAndConditions$: Observable<boolean | undefined> = this.cmsService
+    .getCurrentPage()
+    .pipe(
+      map((page: Page) => {
+        return this.isCmsComponentInPage(
+          OPF_EXPLICIT_TERMS_AND_CONDITIONS_COMPONENT,
+          page
+        );
+      })
+    );
+
+  checkoutSubmitForm: UntypedFormGroup = this.fb.group({
+    termsAndConditions: [
+      this.defaultTermsAndConditionsFieldValue,
+      Validators.requiredTrue,
+    ],
+  });
+
+  get termsAndConditionInvalid(): boolean {
+    return this.checkoutSubmitForm.invalid;
+  }
+
+  get termsAndConditionsFieldValue(): boolean {
+    return Boolean(this.checkoutSubmitForm.get('termsAndConditions')?.value);
+  }
+
+  get paymentType$(): Observable<PaymentType | undefined> {
+    return this.activeCartFacade
+      .getActive()
+      .pipe(map((cart: Cart) => cart.paymentType));
+  }
+
+  get poNumber$(): Observable<string | undefined> {
+    return this.checkoutPaymentTypeFacade.getPurchaseOrderNumberState().pipe(
+      filter((state) => !state.loading && !state.error),
+      map((state) => state.data)
+    );
+  }
+
+  getPoNumberCard(poNumber?: string | null): Observable<Card> {
+    return combineLatest([
+      this.translationService.translate('opfCheckout.poNumber'),
+      this.translationService.translate('opfCheckout.noPoNumber'),
+    ]).pipe(
+      map(([textTitle, noneTextTitle]) => {
+        return {
+          title: textTitle,
+          textBold: poNumber ? poNumber : noneTextTitle,
+        };
+      })
+    );
+  }
+
+  getSelectedPayment$ = this.opfBaseFacade.getActiveConfigurationsState();
+
+  getSelectedPaymentId$ = this.opfMetadataStoreService
+    .getOpfMetadataState()
+    .pipe(
+      take(1),
+      map((data) => data?.selectedPaymentOptionId)
+    );
+
+  getPaymentMethodNameCard(methodName?: string): Observable<Card> {
+    return combineLatest([
+      this.translationService.translate('opfCheckout.paymentMethod'),
+      this.translationService.translate('opfCheckout.noPaymentMethod'),
+    ]).pipe(
+      map(([title, noPaymentMethod]) => ({
+        title,
+        textBold: methodName ?? noPaymentMethod,
+        text: [],
+      }))
+    );
+  }
+
+  protected isCmsComponentInPage(cmsComponentUid: string, page: Page): boolean {
+    return !!page && JSON.stringify(page).includes(cmsComponentUid);
+  }
+
+  protected updateTermsAndConditionsState() {
+    this.opfMetadataStoreService.updateOpfMetadata({
+      termsAndConditionsChecked: this.termsAndConditionsFieldValue,
+    });
+  }
+
+  toggleTermsAndConditions() {
+    this.updateTermsAndConditionsState();
+  }
+
+  onPaymentProviderSelected(providerName: string) {
+    this.selectedPaymentProviderName$.next(providerName);
+  }
+
+  ngOnInit() {
+    this.updateTermsAndConditionsState();
+  }
+}