feat: initial structure for components and b2b flow

feature-libs/checkout/base/components/checkout-review-submit/checkout-review-submit.component.ts

@@ -26,6 +26,7 @@ import { Card, ICON_TYPE } from '@spartacus/storefront';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { CheckoutStepService } from '../services/checkout-step.service';
+import '@spartacus/checkout/b2b/root';
 
 @Component({
   selector: 'cx-review-submit',
@@ -37,6 +38,7 @@ export class CheckoutReviewSubmitComponent {
   readonly cartOutlets = CartOutlets;
   iconTypes = ICON_TYPE;
 
+  checkoutStepTypePaymentType = CheckoutStepType.PAYMENT_TYPE;
   checkoutStepTypeDeliveryAddress = CheckoutStepType.DELIVERY_ADDRESS;
   checkoutStepTypePaymentDetails = CheckoutStepType.PAYMENT_DETAILS;
   checkoutStepTypeDeliveryMode = CheckoutStepType.DELIVERY_MODE;

feature-libs/checkout/base/root/model/checkout-step.model.ts

@@ -9,6 +9,8 @@ export const enum CheckoutStepType {
   DELIVERY_MODE = 'deliveryMode',
   PAYMENT_DETAILS = 'paymentDetails',
   REVIEW_ORDER = 'reviewOrder',
+  // TODO: Add augmentation from OPF LIB
+  OPF_PAYMENT_AND_REVIEW = 'opfPaymentAndReview',
 }
 
 export const enum CheckoutStepState {

integration-libs/opf/_index.scss

@@ -12,7 +12,7 @@ $opf-components-allowlist: cx-opf-payment-method-details,
   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 !default;
+  cx-opf-quick-buy-buttons, cx-opf-b2b-checkout-payment-type !default;
 
 $skipComponentStyles: () !default;
 

integration-libs/opf/base/root/model/opf-base.model.ts

@@ -17,6 +17,7 @@ export interface OpfActiveConfiguration {
   displayName?: string;
   acquirerCountryCode?: string;
   logoUrl?: string;
+  code?: string;
 }
 
 export interface OpfActiveConfigurationsPagination {

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

@@ -1,13 +1,21 @@
 {
   "opfCheckout": {
     "tabs": {
+      "paymentType": "Method of payment",
       "shipping": "Shipping",
       "deliveryMethod": "Delivery Method",
       "paymentAndReview": "Payment & Review"
     },
     "paymentAndReviewTitle": "Payment and review",
     "billingAddress": "Billing Address",
     "paymentOption": "Payment option",
+    "paymentMethod": "Method of Payment",
+    "noPaymentMethod": "No payment method selected",
+    "editCardDefaultLabel": "Edit",
+    "editPaymentMethod": "Edit payment method",
+    "poNumber": "Purchase Order Number",
+    "noPoNumber": "None",
+    "editPoNumber": "Edit purchase order number",
     "termsAndConditions": "Terms & Conditions",
     "closeTermsAndConditionsAlert": "Close alert",
     "itemsToBeShipped": "Items to be shipped",

integration-libs/opf/checkout/components/b2b/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-components.module';
+export * from './opf-b2b-checkout-payment-type/index';

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

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NgModule } from '@angular/core';
+
+import { OpfB2bCheckoutPaymentTypeModule } from './opf-b2b-checkout-payment-type';
+
+@NgModule({
+  imports: [OpfB2bCheckoutPaymentTypeModule],
+})
+export class OpfB2bCheckoutComponentsModule {}

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-payment-type/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-payment-type.component';
+export * from './opf-b2b-checkout-payment-type.module';

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

@@ -0,0 +1,55 @@
+<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
+  {{ 'checkoutB2B.methodOfPayment.paymentType' | cxTranslate }}
+</h2>
+<ng-container
+  *ngIf="(typeSelected$ | async) && !(isUpdating$ | async); else loading"
+>
+  <ng-container>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
+    <div class="row">
+      <div class="col-md-12 col-lg-6">
+        <label>
+          <span class="label-content">{{
+            'checkoutB2B.poNumber' | cxTranslate
+          }}</span>
+          <input
+            #poNumber
+            class="form-control"
+            formControlName="poNumber"
+            type="text"
+            placeholder="{{ 'checkoutB2B.placeholder' | cxTranslate }}"
+          />
+        </label>
+      </div>
+    </div>
+
+    <cx-opf-checkout-payments
+      [isHeadingDisplayed]="false"
+      [isPaymentRenderBelow]="false"
+      [isPaymentInfoMessageEnabled]="false"
+      (paymentChange)="handlePaymentChange($event)"
+    ></cx-opf-checkout-payments>
+
+    <div class="cx-checkout-btns row">
+      <div class="col-md-12 col-lg-6">
+        <button class="btn btn-block btn-secondary" (click)="back()">
+          {{ 'checkout.backToCart' | cxTranslate }}
+        </button>
+      </div>
+      <div class="col-md-12 col-lg-6">
+        <button class="btn btn-block btn-primary" (click)="next()">
+          {{ 'common.continue' | cxTranslate }}
+        </button>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>
+<ng-template #loading>
+  <div class="cx-spinner" *ngIf="!paymentTypesError">
+    <cx-spinner></cx-spinner>
+  </div>
+</ng-template>