Add editable cost center to the review page

integration-libs/opf/_index.scss

@@ -13,7 +13,8 @@ $opf-components-allowlist: cx-opf-payment-method-details,
   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;
+  cx-opf-b2b-checkout-review, cx-opf-b2b-checkout-delivery-address,
+  cx-opf-b2b-checkout-cost-center !default;
 
 $skipComponentStyles: () !default;
 

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

@@ -2,7 +2,7 @@
   "opfCheckout": {
     "tabs": {
       "paymentType": "Method of payment",
-      "shipping": "Shipping",
+      "shipping": "Shipping Address",
       "deliveryMethod": "Delivery Method",
       "paymentAndReview": "Payment & Review",
       "review": "Review Order"
@@ -17,6 +17,8 @@
     "poNumber": "Purchase Order Number",
     "noPoNumber": "None",
     "editPoNumber": "Edit purchase order number",
+    "costCenter": "Cost Center",
+    "editCostCenter": "Edit Cost Center",
     "termsAndConditions": "Terms & Conditions",
     "closeTermsAndConditionsAlert": "Close alert",
     "itemsToBeShipped": "Items to be shipped",

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

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

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

@@ -8,8 +8,15 @@ import { NgModule } from '@angular/core';
 
 import { OpfB2bCheckoutPaymentTypeModule } from './opf-b2b-checkout-payment-type';
 import { OpfB2bCheckoutReviewModule } from './opf-b2b-checkout-review';
+import { OpfB2bCheckoutDeliveryAddressModule } from './opf-b2b-checkout-delivery-address';
+import { OpfB2bCheckoutCostCenterModule } from './opf-b2b-checkout-cost-center';
 
 @NgModule({
-  imports: [OpfB2bCheckoutPaymentTypeModule, OpfB2bCheckoutReviewModule],
+  imports: [
+    OpfB2bCheckoutPaymentTypeModule,
+    OpfB2bCheckoutReviewModule,
+    OpfB2bCheckoutDeliveryAddressModule,
+    OpfB2bCheckoutCostCenterModule,
+  ],
 })
 export class OpfB2bCheckoutComponentsModule {}

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

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-cost-center/opf-b2b-checkout-cost-center.component.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="isAccountPayment">
+  <div class="row">
+    <div class="col-md-12 col-xl-10">
+      <ng-container *ngIf="costCenters$ | async as costCenters">
+        <div *ngIf="costCenters.length !== 0">
+          <label>
+            <span class="label-content required">{{
+              'checkoutB2B.costCenter' | cxTranslate
+            }}</span>
+            <select (change)="setCostCenter($event.target.value)">
+              <option
+                *ngFor="let costCenter of costCenters"
+                value="{{ costCenter.code }}"
+                [selected]="costCenterId === costCenter.code"
+              >
+                {{ costCenter.name }}
+              </option>
+            </select>
+            <span class="label-content">{{
+              'checkoutB2B.availableLabel' | cxTranslate
+            }}</span>
+          </label>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</ng-container>

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

@@ -0,0 +1 @@
+// TODO: Add unit tests...

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-cost-center/opf-b2b-checkout-cost-center.component.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CheckoutCostCenterComponent } from '@spartacus/checkout/b2b/components';
+
+@Component({
+  selector: 'cx-opf-b2b-checkout-cost-center',
+  templateUrl: './opf-b2b-checkout-cost-center.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class OpfB2bCheckoutCostCenterComponent extends CheckoutCostCenterComponent {}

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

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { I18nModule } from '@spartacus/core';
+import { OpfB2bCheckoutCostCenterComponent } from './opf-b2b-checkout-cost-center.component';
+import { CheckoutCostCenterModule } from '@spartacus/checkout/b2b/components';
+
+@NgModule({
+  imports: [CommonModule, I18nModule, CheckoutCostCenterModule],
+  declarations: [OpfB2bCheckoutCostCenterComponent],
+  exports: [OpfB2bCheckoutCostCenterComponent],
+})
+export class OpfB2bCheckoutCostCenterModule {}

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

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-delivery-address/opf-b2b-checkout-delivery-address.component.html

@@ -0,0 +1,99 @@
+<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
+  {{ 'checkoutAddress.shippingAddress' | cxTranslate }}
+</h2>
+<cx-opf-b2b-checkout-cost-center></cx-opf-b2b-checkout-cost-center>
+<ng-container *ngIf="cards$ | async as cards">
+  <ng-container *ngIf="!(isUpdating$ | async); else loading">
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
+    <ng-container
+      *ngIf="
+        isAccountPayment || (cards?.length && !addressFormOpened);
+        then showExistingAddresses;
+        else newAddressForm
+      "
+    >
+    </ng-container>
+
+    <ng-template #showExistingAddresses>
+      <p class="cx-checkout-text">
+        {{ 'checkoutAddress.selectYourDeliveryAddress' | cxTranslate }}
+      </p>
+      <div class="cx-checkout-btns row" *ngIf="!isAccountPayment">
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <button
+            class="btn btn-block btn-secondary"
+            (click)="showNewAddressForm()"
+          >
+            {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
+          </button>
+        </div>
+      </div>
+
+      <div class="cx-checkout-body row">
+        <div
+          class="cx-delivery-address-card col-md-12 col-lg-6"
+          *ngFor="let card of cards; let i = index"
+        >
+          <div
+            class="cx-delivery-address-card-inner"
+            (click)="selectAddress(card.address)"
+          >
+            <cx-card
+              [border]="true"
+              [index]="i"
+              [fitToContainer]="true"
+              [content]="card.card"
+              (sendCard)="selectAddress(card.address)"
+              [role]="'group'"
+            ></cx-card>
+          </div>
+        </div>
+      </div>
+
+      <div class="cx-checkout-btns row">
+        <div class="col-md-12 col-lg-6">
+          <button class="cx-btn btn btn-block btn-secondary" (click)="back()">
+            {{ backBtnText | cxTranslate }}
+          </button>
+        </div>
+        <div class="col-md-12 col-lg-6">
+          <button
+            class="cx-btn btn btn-block btn-primary"
+            [disabled]="!(selectedAddress$ | async)?.id"
+            (click)="next()"
+          >
+            {{ 'common.continue' | cxTranslate }}
+          </button>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #newAddressForm>
+      <cx-address-form
+        *ngIf="cards.length; else initialAddressForm"
+        [showTitleCode]="true"
+        (backToAddress)="hideNewAddressForm(false)"
+        (submitAddress)="addAddress($event)"
+      ></cx-address-form>
+      <ng-template #initialAddressForm>
+        <cx-address-form
+          [showTitleCode]="true"
+          [setAsDefaultField]="!isGuestCheckout"
+          cancelBtnLabel="{{ backBtnText | cxTranslate }}"
+          (backToAddress)="hideNewAddressForm(true)"
+          (submitAddress)="addAddress($event)"
+        ></cx-address-form>
+      </ng-template>
+    </ng-template>
+  </ng-container>
+</ng-container>
+
+<ng-template #loading>
+  <div class="cx-spinner">
+    <cx-spinner></cx-spinner>
+  </div>
+</ng-template>

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

@@ -0,0 +1 @@
+// TODO: Add unit tests...

integration-libs/opf/checkout/components/b2b/opf-b2b-checkout-delivery-address/opf-b2b-checkout-delivery-address.component.ts

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { B2BCheckoutDeliveryAddressComponent } from '@spartacus/checkout/b2b/components';
+@Component({
+  selector: 'cx-opf-b2b-checkout-delivery-address',
+  templateUrl: './opf-b2b-checkout-delivery-address.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class OpfB2bCheckoutDeliveryAddressComponent extends B2BCheckoutDeliveryAddressComponent {}

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

@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
+import { CardModule, SpinnerModule } from '@spartacus/storefront';
+import { AddressFormModule } from '@spartacus/user/profile/components';
+import { OpfB2bCheckoutDeliveryAddressComponent } from './opf-b2b-checkout-delivery-address.component';
+import { OpfB2bCheckoutCostCenterModule } from '../opf-b2b-checkout-cost-center';
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    AddressFormModule,
+    CardModule,
+    SpinnerModule,
+    I18nModule,
+    FeaturesConfigModule,
+    OpfB2bCheckoutCostCenterModule,
+  ],
+  providers: [
+    provideDefaultConfig(<CmsConfig>{
+      cmsComponents: {
+        OpfCheckoutDeliveryAddress: {
+          component: OpfB2bCheckoutDeliveryAddressComponent,
+        },
+      },
+    }),
+  ],
+  declarations: [OpfB2bCheckoutDeliveryAddressComponent],
+  exports: [OpfB2bCheckoutDeliveryAddressComponent],
+})
+export class OpfB2bCheckoutDeliveryAddressModule {}

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

@@ -12,12 +12,10 @@
       }"
     ></cx-opf-checkout-review-card>
     <cx-opf-checkout-review-card
-      [cardContent$]="
-        getPaymentMethodNameCard(selectedPaymentProviderName$ | async)
-      "
+      [cardContent$]="getCostCenterCard(costCenter$ | async)"
       [editConfig]="{
-        route: getCheckoutStepUrl(checkoutStepTypePaymentType),
-        ariaLabelKey: 'checkoutReview.editPaymentMethod',
+        route: getCheckoutStepUrl(checkoutStepTypeDeliveryAddress),
+        ariaLabelKey: 'checkoutReview.editDeliveryAddressDetails',
       }"
     ></cx-opf-checkout-review-card>
     <cx-opf-checkout-review-card
@@ -86,25 +84,8 @@ <h3>{{ 'opfCheckout.termsAndConditions' | cxTranslate }}</h3>
     [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