From 64a76122c7f6c7f17399f014d1e79331f2d38c53 Mon Sep 17 00:00:00 2001
From: morganm58 <mikel.morgan@sap.com>
Date: Wed, 5 Jul 2023 22:37:47 -0400
Subject: [PATCH 1/4] styling: Style changes for mobile and desktop checkout UI
 revised (#17611)

---
 .../styles/components/_order-summary.scss     | 12 ++++
 .../checkout-delivery-address.component.html  | 30 +++++++-
 ...heckout-delivery-address.component.spec.ts | 10 ++-
 .../checkout-delivery-address.module.ts       |  8 ++-
 .../checkout-delivery-mode.component.html     | 17 ++++-
 .../checkout-delivery-mode.module.ts          |  8 ++-
 .../checkout-payment-method.component.html    | 31 ++++++++-
 .../checkout-payment-method.component.spec.ts | 10 ++-
 .../checkout-payment-method.module.ts         |  8 ++-
 .../styles/components/steps/_progress.scss    |  4 ++
 .../delivery-address/_delivery-address.scss   | 69 +++++++++++++++++++
 .../steps/delivery-method/_delivery-mode.scss | 39 +++++++++++
 .../steps/payment/_payment-form.scss          |  6 ++
 .../steps/payment/_payment-method.scss        | 68 ++++++++++++++++++
 .../components/steps/review/_review.scss      | 22 ++++++
 .../styles/mixins/_checkout-media-style.scss  | 36 +++++++++-
 .../navigation/_category-navigation.scss      |  4 ++
 17 files changed, 367 insertions(+), 15 deletions(-)

diff --git a/feature-libs/cart/base/styles/components/_order-summary.scss b/feature-libs/cart/base/styles/components/_order-summary.scss
index e233ddda3dc..f4b1e3d5fd9 100644
--- a/feature-libs/cart/base/styles/components/_order-summary.scss
+++ b/feature-libs/cart/base/styles/components/_order-summary.scss
@@ -12,6 +12,18 @@
     font-weight: var(--cx-font-weight-semi);
   }
 
+  @include forVersion(6.3) {
+    .cx-summary-heading {
+      border-bottom: 1px solid var(--cx-color-medium);
+      padding-bottom: 2.188rem;
+
+      @include media-breakpoint-down(md) {
+        margin-bottom: 0.438rem;
+        padding-bottom: 0.938rem;
+      }
+    }
+  }
+
   .cx-summary-label {
     text-align: start;
     padding: 0;
diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
index 383b844b7d0..3f18a8cd4f1 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
+++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
@@ -18,8 +18,21 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
       <p class="cx-checkout-text">
         {{ 'checkoutAddress.selectYourDeliveryAddress' | cxTranslate }}
       </p>
-      <div class="cx-checkout-btns row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+      <ng-container *cxFeatureLevel="'!6.3'">
+        <div class="cx-checkout-btns row">
+          <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>
+      </ng-container>
+
+      <ng-container *cxFeatureLevel="'6.3'">
+        <div class="cx-checkout-btns cx-checkout-btns-top">
           <button
             class="btn btn-block btn-secondary"
             (click)="showNewAddressForm()"
@@ -27,7 +40,7 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
             {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
           </button>
         </div>
-      </div>
+      </ng-container>
 
       <div class="cx-checkout-body row">
         <div
@@ -49,6 +62,17 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
         </div>
       </div>
 
+      <ng-container *cxFeatureLevel="'6.3'">
+        <div class="cx-checkout-btns cx-checkout-btns-bottom">
+          <button
+            class="btn btn-block btn-secondary"
+            (click)="showNewAddressForm()"
+          >
+            {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
+          </button>
+        </div>
+      </ng-container>
+
       <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()">
diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts
index 64b4ad7b686..e4219775fe4 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts
+++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts
@@ -12,6 +12,8 @@ import {
   GlobalMessageService,
   I18nTestingModule,
   UserAddressService,
+  FeaturesConfig,
+  FeaturesConfigModule,
 } from '@spartacus/core';
 import { Card } from '@spartacus/storefront';
 import { EMPTY, of } from 'rxjs';
@@ -130,7 +132,7 @@ describe('CheckoutDeliveryAddressComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [I18nTestingModule],
+        imports: [I18nTestingModule, FeaturesConfigModule],
         declarations: [
           CheckoutDeliveryAddressComponent,
           MockAddressFormComponent,
@@ -151,6 +153,12 @@ describe('CheckoutDeliveryAddressComponent', () => {
             provide: CheckoutDeliveryModesFacade,
             useClass: MockCheckoutDeliveryModesFacade,
           },
+          {
+            provide: FeaturesConfig,
+            useValue: {
+              features: { level: '6.3' },
+            },
+          },
         ],
       })
         .overrideComponent(CheckoutDeliveryAddressComponent, {
diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.module.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.module.ts
index e5e46a1cd47..2609d0c8270 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.module.ts
+++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.module.ts
@@ -8,7 +8,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CartValidationGuard } from '@spartacus/cart/base/core';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  I18nModule,
+  provideDefaultConfig,
+  FeaturesConfigModule,
+} from '@spartacus/core';
 import {
   AddressFormModule,
   CardModule,
@@ -26,6 +31,7 @@ import { CheckoutDeliveryAddressComponent } from './checkout-delivery-address.co
     CardModule,
     SpinnerModule,
     I18nModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{
diff --git a/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html b/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html
index 71fd4d8ce12..6b902eb46de 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html
+++ b/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html
@@ -27,9 +27,20 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
           class="cx-delivery-label form-check-label form-radio-label"
           for="deliveryMode-{{ mode.code }}"
         >
-          <div class="cx-delivery-mode">
-            {{ mode.name }} ({{ mode.description }})
-          </div>
+          <ng-container *cxFeatureLevel="'!6.3'">
+            <div class="cx-delivery-mode">
+              {{ mode.name }} ({{ mode.description }})
+            </div>
+          </ng-container>
+
+          <ng-container *cxFeatureLevel="'6.3'">
+            <div class="cx-delivery-mode">
+              {{ mode.name }}
+              <span class="cx-delivery-mode-description"
+                >({{ mode.description }})</span
+              >
+            </div>
+          </ng-container>
           <div class="cx-delivery-price">
             {{ mode.deliveryCost?.formattedValue }}
           </div>
diff --git a/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts b/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts
index 56e4bab4b09..3698ddc6c7f 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts
+++ b/feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts
@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  I18nModule,
+  provideDefaultConfig,
+  FeaturesConfigModule,
+} from '@spartacus/core';
 import {
   OutletModule,
   PageComponentModule,
@@ -25,6 +30,7 @@ import { CheckoutDeliveryModeComponent } from './checkout-delivery-mode.componen
     SpinnerModule,
     OutletModule,
     PageComponentModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{
diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.html b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.html
index 3eacaef1d2d..9a0189095c9 100644
--- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.html
+++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.html
@@ -18,8 +18,22 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
     <p class="cx-checkout-text">
       {{ 'paymentForm.choosePaymentMethod' | cxTranslate }}
     </p>
-    <div class="cx-checkout-btns row">
-      <div class="col-md-12 col-lg-6">
+
+    <ng-container *cxFeatureLevel="'!6.3'">
+      <div class="cx-checkout-btns row">
+        <div class="col-md-12 col-lg-6">
+          <button
+            class="btn btn-block btn-secondary"
+            (click)="showNewPaymentForm()"
+          >
+            {{ 'paymentForm.addNewPayment' | cxTranslate }}
+          </button>
+        </div>
+      </div>
+    </ng-container>
+
+    <ng-container *cxFeatureLevel="'6.3'">
+      <div class="cx-checkout-btns cx-checkout-btns-top">
         <button
           class="btn btn-block btn-secondary"
           (click)="showNewPaymentForm()"
@@ -27,7 +41,7 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
           {{ 'paymentForm.addNewPayment' | cxTranslate }}
         </button>
       </div>
-    </div>
+    </ng-container>
 
     <div class="cx-checkout-body row">
       <div
@@ -49,6 +63,17 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
       </div>
     </div>
 
+    <ng-container *cxFeatureLevel="'6.3'">
+      <div class="cx-checkout-btns cx-checkout-btns-bottom">
+        <button
+          class="btn btn-block btn-secondary"
+          (click)="showNewPaymentForm()"
+        >
+          {{ 'paymentForm.addNewPayment' | cxTranslate }}
+        </button>
+      </div>
+    </ng-container>
+
     <div class="row cx-checkout-btns">
       <div class="col-md-12 col-lg-6">
         <button class="btn btn-block btn-secondary" (click)="back()">
diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts
index feaa2898574..4c7007da1b4 100644
--- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts
+++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts
@@ -9,6 +9,8 @@ import {
 } from '@spartacus/checkout/base/root';
 import {
   Address,
+  FeaturesConfig,
+  FeaturesConfigModule,
   GlobalMessageService,
   I18nTestingModule,
   QueryState,
@@ -168,7 +170,7 @@ describe('CheckoutPaymentMethodComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [I18nTestingModule],
+        imports: [I18nTestingModule, FeaturesConfigModule],
         declarations: [
           CheckoutPaymentMethodComponent,
           MockPaymentFormComponent,
@@ -193,6 +195,12 @@ describe('CheckoutPaymentMethodComponent', () => {
           { provide: CheckoutStepService, useClass: MockCheckoutStepService },
           { provide: ActivatedRoute, useValue: mockActivatedRoute },
           { provide: GlobalMessageService, useClass: MockGlobalMessageService },
+          {
+            provide: FeaturesConfig,
+            useValue: {
+              features: { level: '6.3' },
+            },
+          },
         ],
       }).compileComponents();
 
diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.module.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.module.ts
index c7d32b0d43f..b758cf7e55a 100644
--- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.module.ts
+++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.module.ts
@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  I18nModule,
+  provideDefaultConfig,
+  FeaturesConfigModule,
+} from '@spartacus/core';
 import { CardModule, SpinnerModule } from '@spartacus/storefront';
 import { CartNotEmptyGuard } from '../guards/cart-not-empty.guard';
 import { CheckoutAuthGuard } from '../guards/checkout-auth.guard';
@@ -22,6 +27,7 @@ import { CheckoutPaymentMethodComponent } from './checkout-payment-method.compon
     CardModule,
     SpinnerModule,
     I18nModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{
diff --git a/feature-libs/checkout/base/styles/components/steps/_progress.scss b/feature-libs/checkout/base/styles/components/steps/_progress.scss
index a088c0a1134..07c6d3402af 100644
--- a/feature-libs/checkout/base/styles/components/steps/_progress.scss
+++ b/feature-libs/checkout/base/styles/components/steps/_progress.scss
@@ -105,6 +105,10 @@
         border-width: 0 0 1px 0;
         border-style: solid;
         border-color: var(--cx-color-light);
+
+        @include forVersion(6.3) {
+          padding: 0 1.875rem;
+        }
       }
 
       @include media-breakpoint-down(sm) {
diff --git a/feature-libs/checkout/base/styles/components/steps/delivery-address/_delivery-address.scss b/feature-libs/checkout/base/styles/components/steps/delivery-address/_delivery-address.scss
index b9ba5ea06e4..fd939b1dbf0 100644
--- a/feature-libs/checkout/base/styles/components/steps/delivery-address/_delivery-address.scss
+++ b/feature-libs/checkout/base/styles/components/steps/delivery-address/_delivery-address.scss
@@ -1,13 +1,82 @@
 %cx-delivery-address {
   @include checkout-media-style();
 
+  @include forVersion(6.3) {
+    border: 1px solid var(--cx-color-medium);
+    border-radius: 10px;
+    margin-top: 32px;
+    margin-bottom: 30px;
+    padding-inline-start: 1.875rem;
+    padding-inline-end: 1.875rem;
+    padding-top: 1.875rem;
+
+    @include media-breakpoint-down(md) {
+      background-color: var(--cx-color-transparent);
+    }
+
+    cx-address-form {
+      @include media-breakpoint-down(md) {
+        background-color: var(--cx-color-transparent);
+      }
+      form {
+        background-color: var(--cx-color-transparent);
+        padding: 13px 0px 13px 0px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .cx-delivery-address-card {
     padding-bottom: 30px;
 
+    @include forVersion(6.3) {
+      padding-inline-start: 0;
+      padding-inline-end: 0;
+
+      @include media-breakpoint-up(lg) {
+        &:nth-child(odd) {
+          padding-inline-end: 15px;
+        }
+        &:nth-child(even) {
+          padding-inline-start: 15px;
+        }
+      }
+    }
+
     .cx-delivery-address-card-inner {
       height: 100%;
       background-color: var(--cx-color-inverse);
       cursor: pointer;
     }
   }
+
+  @include forVersion(6.3) {
+    .cx-checkout-btns-top {
+      display: flex;
+      justify-content: flex-end;
+      padding-inline-start: 1.875rem;
+
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+
+      .btn {
+        width: 50%;
+      }
+    }
+  }
+
+  @include forVersion(6.3) {
+    .cx-checkout-btns-bottom {
+      padding-bottom: 0;
+
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
+
+      .btn-secondary {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
diff --git a/feature-libs/checkout/base/styles/components/steps/delivery-method/_delivery-mode.scss b/feature-libs/checkout/base/styles/components/steps/delivery-method/_delivery-mode.scss
index d6d723c7262..70d71ff098c 100644
--- a/feature-libs/checkout/base/styles/components/steps/delivery-method/_delivery-mode.scss
+++ b/feature-libs/checkout/base/styles/components/steps/delivery-method/_delivery-mode.scss
@@ -3,6 +3,23 @@
 
   @include media-breakpoint-down(md) {
     padding: 20px 0;
+
+    @include forVersion(6.3) {
+      background-color: var(--cx-color-transparent);
+      margin-top: 32px;
+      padding: 23px 30px 8px;
+    }
+  }
+
+  @include forVersion(6.3) {
+    border: 1px solid var(--cx-color-light);
+    border-radius: 10px;
+    padding: 23px 30px 8px;
+    background-color: var(--cx-color-inverse);
+
+    @include media-breakpoint-up(lg) {
+      margin: 2rem 0 2rem;
+    }
   }
 
   .cx-delivery-mode-wrapper {
@@ -13,10 +30,24 @@
 
     @include media-breakpoint-down(md) {
       margin: 0 55px;
+
+      @include forVersion(6.3) {
+        margin: 0;
+      }
     }
 
     @include media-breakpoint-down(sm) {
       margin: 0 22px;
+
+      @include forVersion(6.3) {
+        margin: 0;
+      }
+    }
+
+    @include forVersion(6.3) {
+      border: none;
+      border-radius: 0px;
+      padding: 0;
     }
   }
 
@@ -50,6 +81,14 @@
         flex-basis: 100%;
         color: var(--cx-color-success);
       }
+
+      @include forVersion(6.3) {
+        .cx-delivery-mode-description {
+          width: 100%;
+          display: block;
+          color: var(--cx-color-success);
+        }
+      }
     }
   }
 }
diff --git a/feature-libs/checkout/base/styles/components/steps/payment/_payment-form.scss b/feature-libs/checkout/base/styles/components/steps/payment/_payment-form.scss
index d362913f8e1..874b947fb9c 100644
--- a/feature-libs/checkout/base/styles/components/steps/payment/_payment-form.scss
+++ b/feature-libs/checkout/base/styles/components/steps/payment/_payment-form.scss
@@ -36,4 +36,10 @@
   .form-check {
     margin: 0;
   }
+
+  @include forVersion(6.3) {
+    .label-content {
+      white-space: nowrap;
+    }
+  }
 }
diff --git a/feature-libs/checkout/base/styles/components/steps/payment/_payment-method.scss b/feature-libs/checkout/base/styles/components/steps/payment/_payment-method.scss
index dfb0fcc3053..4250f106093 100644
--- a/feature-libs/checkout/base/styles/components/steps/payment/_payment-method.scss
+++ b/feature-libs/checkout/base/styles/components/steps/payment/_payment-method.scss
@@ -1,6 +1,20 @@
 %cx-payment-method {
   @include checkout-media-style();
 
+  @include forVersion(6.3) {
+    border: 1px solid var(--cx-color-medium);
+    border-radius: 10px;
+    margin-top: 32px;
+    margin-bottom: 30px;
+    padding-inline-start: 1.875rem;
+    padding-inline-end: 1.875rem;
+    padding-top: 1.875rem;
+
+    @include media-breakpoint-down(md) {
+      background-color: var(--cx-color-transparent);
+    }
+  }
+
   .cx-payment {
     &.container {
       padding: 0;
@@ -9,6 +23,22 @@
 
   .cx-payment-card {
     padding-bottom: 30px;
+
+    @include forVersion(6.3) {
+      padding-inline-start: 0;
+      padding-inline-end: 0;
+      padding-bottom: 0.625rem;
+      margin-bottom: 0.625rem;
+
+      @include media-breakpoint-up(lg) {
+        &:nth-child(odd) {
+          padding-inline-end: 15px;
+        }
+        &:nth-child(even) {
+          padding-inline-start: 15px;
+        }
+      }
+    }
   }
 
   .cx-payment-card-inner {
@@ -33,9 +63,17 @@
   .cx-checkout-text {
     @include media-breakpoint-down(md) {
       padding-inline-start: 3.5rem;
+
+      @include forVersion(6.3) {
+        padding-inline-start: 0;
+      }
     }
     @include media-breakpoint-down(sm) {
       padding-inline-start: 1.5rem;
+
+      @include forVersion(6.3) {
+        padding-inline-start: 0;
+      }
     }
   }
 
@@ -53,6 +91,36 @@
     }
   }
 
+  @include forVersion(6.3) {
+    .cx-checkout-btns-top {
+      display: flex;
+      justify-content: flex-end;
+      padding-inline-start: 1.875rem;
+
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+
+      .btn {
+        width: 50%;
+      }
+    }
+  }
+
+  @include forVersion(6.3) {
+    .cx-checkout-btns-bottom {
+      padding-bottom: 0;
+
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
+
+      .btn-secondary {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .cx-checkout-body {
     display: flex;
     align-items: stretch;
diff --git a/feature-libs/checkout/base/styles/components/steps/review/_review.scss b/feature-libs/checkout/base/styles/components/steps/review/_review.scss
index e07e378a9f2..6f99fa4db36 100644
--- a/feature-libs/checkout/base/styles/components/steps/review/_review.scss
+++ b/feature-libs/checkout/base/styles/components/steps/review/_review.scss
@@ -21,6 +21,10 @@
     justify-content: space-between;
     flex-direction: row;
 
+    @include forVersion(6.3) {
+      background-color: var(--cx-color-inverse);
+    }
+
     @include media-breakpoint-up(lg) {
       margin-top: 1.5rem;
     }
@@ -30,6 +34,12 @@
       padding: 20px;
     }
 
+    @include forVersion(6.3) {
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
     &-wrapper {
       display: flex;
       flex-direction: column;
@@ -53,12 +63,20 @@
       border: 1px solid var(--cx-color-light);
       border-radius: 10px;
 
+      @include forVersion(6.3) {
+        flex-grow: 1;
+      }
+
       @include media-breakpoint-up(md) {
         &:first-child {
           margin-top: 30px;
           margin-inline-start: 25px;
           margin-bottom: 40px;
           margin-inline-end: 15px;
+
+          @include forVersion(6.3) {
+            margin-inline-start: 0px;
+          }
         }
 
         &:last-child {
@@ -66,6 +84,10 @@
           margin-inline-start: 15px;
           margin-bottom: 40px;
           margin-inline-end: 25px;
+
+          @include forVersion(6.3) {
+            margin-inline-end: 0px;
+          }
         }
       }
 
diff --git a/feature-libs/checkout/base/styles/mixins/_checkout-media-style.scss b/feature-libs/checkout/base/styles/mixins/_checkout-media-style.scss
index 8db486ef638..dad2504a1d8 100644
--- a/feature-libs/checkout/base/styles/mixins/_checkout-media-style.scss
+++ b/feature-libs/checkout/base/styles/mixins/_checkout-media-style.scss
@@ -2,6 +2,10 @@
   @include media-breakpoint-down(md) {
     display: block;
     background-color: var(--cx-color-background);
+
+    @include forVersion(6.3) {
+      background-color: var(--cx-color-transparent);
+    }
   }
 
   .col-md-12 {
@@ -12,8 +16,17 @@
     @include media-breakpoint-down(sm) {
       padding: 0 2.25rem;
     }
-  }
 
+    @include forVersion(6.3) {
+      @include media-breakpoint-down(md) {
+        padding: 0 0.813rem;
+      }
+
+      @include media-breakpoint-down(sm) {
+        padding: 0 0.875rem;
+      }
+    }
+  }
   .container {
     @include media-breakpoint-down(md) {
       width: 100%;
@@ -49,6 +62,15 @@
     padding-inline-end: 0;
     @include type('4');
     background-color: var(--cx-color-background);
+
+    @include forVersion(6.3) {
+      background-color: var(--cx-color-transparent);
+      margin-top: 0;
+      padding-top: 0;
+      padding-bottom: 0.438rem;
+      margin-bottom: 0.5rem;
+      padding-inline-start: 0;
+    }
   }
 
   .cx-checkout-body {
@@ -59,6 +81,10 @@
         padding: 0;
       }
     }
+
+    @include forVersion(6.3) {
+      margin: 0;
+    }
   }
 
   .cx-checkout-text {
@@ -66,9 +92,17 @@
 
     @include media-breakpoint-down(md) {
       padding-inline-start: 3.5rem;
+
+      @include forVersion(6.3) {
+        padding-inline-start: 0;
+      }
     }
     @include media-breakpoint-down(sm) {
       padding-inline-start: 1.5rem;
+
+      @include forVersion(6.3) {
+        padding-inline-start: 0;
+      }
     }
   }
 
diff --git a/projects/storefrontstyles/scss/components/content/navigation/_category-navigation.scss b/projects/storefrontstyles/scss/components/content/navigation/_category-navigation.scss
index a54bfbf2bfc..94f4a153a65 100644
--- a/projects/storefrontstyles/scss/components/content/navigation/_category-navigation.scss
+++ b/projects/storefrontstyles/scss/components/content/navigation/_category-navigation.scss
@@ -21,6 +21,10 @@
     > li {
       @include media-breakpoint-up(lg) {
         padding-inline-end: 15px;
+
+        @include forVersion(6.3) {
+          padding-inline-start: 15px;
+        }
       }
 
       list-style: none;

From c4f66e0d8177a2e5454d5036a5c0050c3272c484 Mon Sep 17 00:00:00 2001
From: kpawelczak <42094017+kpawelczak@users.noreply.github.com>
Date: Thu, 6 Jul 2023 11:09:02 +0200
Subject: [PATCH 2/4] fix: console error when address fails to update  (#17608)

---
 .../store/effects/user-addresses.effect.ts    | 20 ++++++++------
 .../address-form/address-form.component.ts    | 27 +++++++++++--------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/projects/core/src/user/store/effects/user-addresses.effect.ts b/projects/core/src/user/store/effects/user-addresses.effect.ts
index 88edf4c795d..265081c052f 100644
--- a/projects/core/src/user/store/effects/user-addresses.effect.ts
+++ b/projects/core/src/user/store/effects/user-addresses.effect.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Injectable, inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Observable, of } from 'rxjs';
 import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators';
@@ -81,13 +81,17 @@ export class UserAddressesEffects {
               map(() => {
                 return new UserActions.UpdateUserAddressSuccess(payload);
               }),
-              catchError((error) =>
-                of(
+              catchError((error) => {
+                this.showGlobalMessage(
+                  'addressForm.invalidAddress',
+                  GlobalMessageType.MSG_TYPE_ERROR
+                );
+                return of(
                   new UserActions.UpdateUserAddressFail(
                     normalizeHttpError(error, this.logger)
                   )
-                )
-              )
+                );
+              })
             );
         })
       )
@@ -182,10 +186,10 @@ export class UserAddressesEffects {
   /**
    * Show global confirmation message with provided text
    */
-  private showGlobalMessage(text: string) {
+  private showGlobalMessage(key: string, type?: GlobalMessageType) {
     this.messageService.add(
-      { key: text },
-      GlobalMessageType.MSG_TYPE_CONFIRMATION
+      { key },
+      type ?? GlobalMessageType.MSG_TYPE_CONFIRMATION
     );
   }
 
diff --git a/projects/storefrontlib/cms-components/myaccount/address-book/address-form/address-form.component.ts b/projects/storefrontlib/cms-components/myaccount/address-book/address-form/address-form.component.ts
index fdcb4b25d3f..4d79a48c0c5 100644
--- a/projects/storefrontlib/cms-components/myaccount/address-book/address-form/address-form.component.ts
+++ b/projects/storefrontlib/cms-components/myaccount/address-book/address-form/address-form.component.ts
@@ -35,7 +35,7 @@ import {
 } from '@spartacus/core';
 import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
 import { filter, map, switchMap, take, tap } from 'rxjs/operators';
-import { LaunchDialogService, LAUNCH_CALLER } from '../../../../layout';
+import { LAUNCH_CALLER, LaunchDialogService } from '../../../../layout';
 import { sortTitles } from '../../../../shared/utils/forms/title-utils';
 
 @Component({
@@ -203,16 +203,21 @@ export class AddressFormComponent implements OnInit, OnDestroy {
 
   verifyAddress(): void {
     if (this.addressForm.valid) {
-      if (this.addressForm.get('region')?.value.isocode) {
-        this.regions$.pipe(take(1)).subscribe((regions) => {
-          const obj = regions.find(
-            (region) =>
-              region.isocode ===
-              this.addressForm.controls['region'].value.isocode
-          );
-          Object.assign(this.addressForm.value.region, {
-            isocodeShort: obj?.isocodeShort,
-          });
+      const regionControl = this.addressForm.get('region');
+      const isocode = regionControl?.value?.isocode;
+
+      if (isocode) {
+        this.regions$.pipe(take(1)).subscribe((regions: Region[]) => {
+          if (regions.length) {
+            const selectedRegion = regions.find(
+              (region: Region) => region.isocode === isocode
+            );
+            regionControl?.patchValue({
+              isocodeShort: selectedRegion?.isocodeShort,
+            });
+          } else {
+            regionControl?.reset();
+          }
         });
       }
 

From 170bcdafd6a4515083bf7fef9cdf57cc9eed0842 Mon Sep 17 00:00:00 2001
From: niehuayang <126219214+niehuayang@users.noreply.github.com>
Date: Thu, 6 Jul 2023 18:58:17 +0800
Subject: [PATCH 3/4] test: enable asm e2e tests skiped (#17593)

---
 .../e2e/b2b/regression/asm/asm.core-e2e.cy.ts | 29 +++++-----
 .../asm/asm.emulation.core-e2e.cy.ts          | 58 ++++++++++++++++---
 2 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/asm/asm.core-e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/asm/asm.core-e2e.cy.ts
index 92f50fe5392..65b7ed09d8e 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/asm/asm.core-e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/asm/asm.core-e2e.cy.ts
@@ -4,16 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { clearAllStorage } from '../../../../support/utils/clear-all-storage';
 import * as asm from '../../../../helpers/asm';
+import { addB2bProductToCartAndCheckout } from '../../../../helpers/b2b/b2b-checkout';
+import * as checkout from '../../../../helpers/checkout-flow';
 import { ELECTRONICS_BASESITE } from '../../../../helpers/checkout-flow';
 import { POWERTOOLS_BASESITE } from '../../../../sample-data/b2b-checkout';
-import { user } from '../../../../sample-data/checkout-flow';
-import { register } from '../../../../helpers/auth-forms';
-import { addB2bProductToCartAndCheckout } from '../../../../helpers/b2b/b2b-checkout';
+import { clearAllStorage } from '../../../../support/utils/clear-all-storage';
 import { interceptGet } from '../../../../support/utils/intercept';
 
 context('B2B - Assisted Service Module', () => {
+  const customer = {
+    fullName: 'William Hunter',
+    email: 'william.hunter@pronto-hw.com',
+  };
+
   before(() => {
     clearAllStorage();
   });
@@ -27,8 +31,7 @@ context('B2B - Assisted Service Module', () => {
       Cypress.env('BASE_SITE', ELECTRONICS_BASESITE);
     });
 
-    // This test only works if "sap-commerce-cloud-user-id" is added to the allowed headers of "corsfilter.commercewebservices.allowedHeaders" on the Commerce Cloud side (CXSPA-1355)
-    it.skip("should fetch cost centers based on the emulated user's role", () => {
+    it("should fetch cost centers based on the emulated user's role", () => {
       cy.cxConfig({
         context: {
           baseSite: ['powertools-spa'],
@@ -36,15 +39,13 @@ context('B2B - Assisted Service Module', () => {
         },
       });
 
-      cy.visit('/', { qs: { asm: true } });
-
-      cy.visit('/login/register');
-
-      register(user, true);
-
+      cy.log('--> Agent logging in');
+      checkout.visitHomePage('asm=true');
+      cy.get('cx-asm-main-ui').should('exist');
+      cy.get('cx-asm-main-ui').should('be.visible');
       asm.agentLogin('brandon.leclair@acme.com', 'pw4all');
-
-      asm.startCustomerEmulation(user, true);
+      cy.log('--> Agent emulate customer');
+      asm.startCustomerEmulation(customer, true);
 
       addB2bProductToCartAndCheckout();
 
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/asm/asm.emulation.core-e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/asm/asm.emulation.core-e2e.cy.ts
index 14667b2547a..f84b7f252e3 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/asm/asm.emulation.core-e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/asm/asm.emulation.core-e2e.cy.ts
@@ -11,13 +11,13 @@ import { ELECTRONICS_BASESITE } from '../../../helpers/checkout-flow';
 import { getErrorAlert } from '../../../helpers/global-message';
 import { navigateToCategory, waitForPage } from '../../../helpers/navigation';
 import { APPAREL_BASESITE } from '../../../helpers/variants/apparel-checkout-flow';
-import { clearAllStorage } from '../../../support/utils/clear-all-storage';
-
 import { getSampleUser } from '../../../sample-data/checkout-flow';
+import { clearAllStorage } from '../../../support/utils/clear-all-storage';
 
 context('Assisted Service Module', () => {
   describe('Customer Support Agent - Emulation', () => {
     asm.testCustomerEmulation();
+
     it('should checkout as customer', () => {
       const customer = getSampleUser();
 
@@ -78,11 +78,43 @@ context('Assisted Service Module', () => {
       );
     });
 
-    // TODO(#9445): Add e2e test for this scenario
-    it.skip('agent login when user is logged in should start this user emulation', () => {});
+    // TODO(#3974): fix the bug to enable e2e test for this scenario
+    it.skip('agent login when user is logged in should start this user emulation', () => {
+      cy.visit('/login');
+      login(customer.email, customer.password);
+
+      checkout.visitHomePage('asm=true');
+
+      cy.get('cx-asm-main-ui').should('exist');
+      cy.get('cx-asm-main-ui').should('be.visible');
+
+      cy.log('--> Agent logging in');
+      asm.agentLogin('asagent', 'pw4all');
+
+      cy.get('cx-csagent-login-form').should('not.exist');
+      cy.get('cx-customer-selection').should('not.exist');
+      cy.get('cx-customer-emulation').should('be.visible');
+    });
+
+    // TODO(#7221): enable this case
+    it.skip('agent logout when user was logged and emulated should restore the session', () => {
+      checkout.visitHomePage('asm=true');
+
+      cy.get('cx-asm-main-ui').should('exist');
+      cy.get('cx-asm-main-ui').should('be.visible');
+
+      cy.log('--> Agent logging in');
+      asm.agentLogin('asagent', 'pw4all');
+
+      cy.log('--> Starting customer emulation');
+      asm.startCustomerEmulation(customer);
 
-    // TODO(#9445): Add e2e test for this scenario
-    it.skip('agent logout when user was logged and emulated should restore the session', () => {});
+      cy.log('--> Agent sign out');
+      asm.agentSignOut();
+
+      cy.get('cx-csagent-login-form').should('exist');
+      cy.get('cx-customer-emulation').should('not.exist');
+    });
   });
 
   describe('Apparel Site', () => {
@@ -94,8 +126,7 @@ context('Assisted Service Module', () => {
       Cypress.env('BASE_SITE', ELECTRONICS_BASESITE);
     });
 
-    // This test only works if "sap-commerce-cloud-user-id" is added to the allowed headers of "corsfilter.commercewebservices.allowedHeaders" on the Commerce Cloud side. (CXSPA-1355)
-    it.skip("should fetch products in a category based on the emulated user's authentication", () => {
+    it("should fetch products in a category based on the emulated user's authentication", () => {
       cy.cxConfig({
         context: {
           baseSite: ['apparel-uk-spa'],
@@ -113,11 +144,20 @@ context('Assisted Service Module', () => {
       asm.startCustomerEmulation(customer);
 
       navigateToCategory('Brands', 'brands', true);
+      cy.get('cx-product-list').should('exist');
+      cy.get('cx-product-list cx-product-grid-item').should(
+        'have.length.at.least',
+        1
+      );
 
+      navigateToCategory('Streetwear', 'streetwear', true);
       cy.get('cx-product-list').should('exist');
+      cy.get('cx-product-list cx-product-grid-item').should(
+        'have.length.at.least',
+        1
+      );
 
       navigateToCategory('Snow', 'snow', true);
-
       cy.get('cx-product-list').should('exist');
     });
   });

From 801982b96f2dbb74dff23eadebe108a0fa877d11 Mon Sep 17 00:00:00 2001
From: Ulrich Stellmacher <ulrich.stellmacher@sap.com>
Date: Fri, 7 Jul 2023 14:48:45 +0200
Subject: [PATCH 4/4] feat: CXSPA-2818 Change adapter for replacement for
 header based routing  (#17580)

Adds an alternative adapter that calls CPQ via OCC instead of directly CPQ. A new Settings `productConfigurator.cpqOverOcc` was introduced to activate this new behavior.
The new adapter requires at least commerce 2211.FP2. Endpoints need to explicitly activated in commerce.
---
 .../core/config/configurator-core.config.ts   |   1 +
 .../default-configurator-core.config.ts       |   1 +
 .../rulebased-configurator.adapter.ts         |   9 +-
 .../rulebased-configurator.connector.spec.ts  |  99 +-
 .../rulebased-configurator.connector.ts       |  42 +-
 ...figurator-normalizer-utils.service.spec.ts |   0
 ...q-configurator-normalizer-utils.service.ts |   0
 .../cpq-configurator-normalizer.spec.ts       |  29 +
 .../converters/cpq-configurator-normalizer.ts |  17 +-
 ...q-configurator-overview-normalizer.spec.ts |  13 +
 .../cpq-configurator-overview-normalizer.ts   |   2 +-
 .../cpq-configurator-serializer.spec.ts       |   0
 .../converters/cpq-configurator-serializer.ts |   2 +-
 .../cpq-configurator-value-serializer.spec.ts |   0
 .../cpq-configurator-value-serializer.ts      |   2 +-
 .../converters/cpq-configurator.converters.ts |   0
 .../cpq/{rest => common}/converters/index.ts  |   0
 .../common/cpq-configurator-common.module.ts  |  14 +
 .../cpq/{rest => common}/cpq.models.ts        |   1 +
 .../rulebased/cpq/common/index.ts             |   9 +
 .../occ/cpq-configurator-occ.adapter.spec.ts  | 285 ++++++
 .../cpq/occ/cpq-configurator-occ.adapter.ts   | 129 +++
 .../cpq/occ/cpq-configurator-occ.module.ts    |   7 +
 .../occ/cpq-configurator-occ.service.spec.ts  | 278 ++++-
 .../cpq/occ/cpq-configurator-occ.service.ts   | 223 ++++
 .../default-occ-configurator-cpq-config.ts    |  14 +
 .../rulebased/cpq/occ/index.ts                |   1 +
 .../occ-cpq-configurator-endpoints.model.ts   |  32 +-
 .../rulebased/cpq/public_api.ts               |   1 +
 .../cpq-configurator-rest.adapter.spec.ts     |   4 +
 .../cpq/rest/cpq-configurator-rest.adapter.ts |   4 +
 .../cpq/rest/cpq-configurator-rest.module.ts  |  11 +-
 .../cpq-configurator-rest.service.spec.ts     |   4 +-
 .../cpq/rest/cpq-configurator-rest.service.ts |   4 +-
 .../rulebased/cpq/rest/index.ts               |   2 -
 .../cpq/rulebased-cpq-configurator.module.ts  |   7 +-
 .../cpq/cpq-configuration.core-e2e.cy.ts      | 963 ++++++++++--------
 .../helpers/product-configurator-cpq.ts       |  24 +-
 38 files changed, 1757 insertions(+), 477 deletions(-)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-normalizer-utils.service.spec.ts (100%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-normalizer-utils.service.ts (100%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-normalizer.spec.ts (98%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-normalizer.ts (94%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-overview-normalizer.spec.ts (97%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-overview-normalizer.ts (98%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-serializer.spec.ts (100%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-serializer.ts (98%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-value-serializer.spec.ts (100%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator-value-serializer.ts (95%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/cpq-configurator.converters.ts (100%)
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/converters/index.ts (100%)
 create mode 100644 feature-libs/product-configurator/rulebased/cpq/common/cpq-configurator-common.module.ts
 rename feature-libs/product-configurator/rulebased/cpq/{rest => common}/cpq.models.ts (99%)
 create mode 100644 feature-libs/product-configurator/rulebased/cpq/common/index.ts
 create mode 100644 feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.spec.ts
 create mode 100644 feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.ts

diff --git a/feature-libs/product-configurator/rulebased/core/config/configurator-core.config.ts b/feature-libs/product-configurator/rulebased/core/config/configurator-core.config.ts
index 4c81ceb22e1..f20045f91ed 100644
--- a/feature-libs/product-configurator/rulebased/core/config/configurator-core.config.ts
+++ b/feature-libs/product-configurator/rulebased/core/config/configurator-core.config.ts
@@ -9,6 +9,7 @@ import { Config } from '@spartacus/core';
 
 export interface ProductConfiguratorCoreConfig {
   enableVariantSearch?: boolean;
+  cpqOverOcc?: boolean;
 }
 
 @Injectable({
diff --git a/feature-libs/product-configurator/rulebased/core/config/default-configurator-core.config.ts b/feature-libs/product-configurator/rulebased/core/config/default-configurator-core.config.ts
index 083b596c4d4..f544b861009 100644
--- a/feature-libs/product-configurator/rulebased/core/config/default-configurator-core.config.ts
+++ b/feature-libs/product-configurator/rulebased/core/config/default-configurator-core.config.ts
@@ -9,5 +9,6 @@ import { ConfiguratorCoreConfig } from './configurator-core.config';
 export const defaultConfiguratorCoreConfig: ConfiguratorCoreConfig = {
   productConfigurator: {
     enableVariantSearch: false,
+    cpqOverOcc: false,
   },
 };
diff --git a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.adapter.ts b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.adapter.ts
index 01acbdfadf2..5f7395f2d08 100644
--- a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.adapter.ts
+++ b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.adapter.ts
@@ -112,13 +112,16 @@ export abstract class RulebasedConfiguratorAdapter {
   ): Observable<Configurator.Overview>;
 
   /**
-   * Abstract method to get configuration overview
+   * Abstract method to get the supported configurator type
    *
-   * @param configId configuration id
-   * @param owner configuration owner
    */
   abstract getConfiguratorType(): string;
 
+  /**
+   * Abstract method to check if the adapter supports to call CPQ over OCC. Only relevant for adapters supporting @see ConfiguratorType.CPQ
+   */
+  abstract supportsCpqOverOcc?(): boolean;
+
   /**
    * Searches for variants that are matching the configuration identified by its id.
    * Matches will be close to the attribute assignments of the configuration, but
diff --git a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.spec.ts b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.spec.ts
index c42f3fcb1ba..bc6faaa46ba 100644
--- a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.spec.ts
+++ b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.spec.ts
@@ -5,9 +5,11 @@ import {
   CommonConfigurator,
   CommonConfiguratorUtilsService,
   ConfiguratorModelUtils,
+  ConfiguratorType,
 } from '@spartacus/product-configurator/common';
 import { of } from 'rxjs';
 import { ConfiguratorTestUtils } from '../../testing/configurator-test-utils';
+import { ConfiguratorCoreConfig } from '../config/configurator-core.config';
 import { Configurator } from '../model/configurator.model';
 import { RulebasedConfiguratorAdapter } from './rulebased-configurator.adapter';
 import { RulebasedConfiguratorConnector } from './rulebased-configurator.connector';
@@ -19,7 +21,7 @@ const CONFIG_ID = '1234-56-7890';
 const CONFIG_ID_TEMPLATE = '1234-56-aaab';
 const USER_ID = 'theUser';
 const CART_ID = '98876';
-const CONFIGURATOR_TYPE = 'cpqconfig';
+const CONFIGURATOR_TYPE = 'configuratortype';
 
 const productConfiguration: Configurator.Configuration = {
   ...ConfiguratorTestUtils.createConfiguration(
@@ -58,6 +60,9 @@ const updateFromCartEntryParameters: Configurator.UpdateConfigurationForCartEntr
 const cartModification: CartModification = {};
 
 class MockRulebasedConfiguratorAdapter implements RulebasedConfiguratorAdapter {
+  public configuratorType: string;
+  public cpqOverOcc: boolean | undefined;
+
   readConfigurationForCartEntry = createSpy().and.callFake(() =>
     of(productConfiguration)
   );
@@ -101,7 +106,10 @@ class MockRulebasedConfiguratorAdapter implements RulebasedConfiguratorAdapter {
     of('addToCart' + configId)
   );
   getConfiguratorType(): string {
-    return CONFIGURATOR_TYPE;
+    return this.configuratorType ?? CONFIGURATOR_TYPE;
+  }
+  supportsCpqOverOcc?(): boolean {
+    return this.cpqOverOcc ?? false;
   }
 }
 
@@ -109,11 +117,36 @@ describe('RulebasedConfiguratorConnector', () => {
   let service: RulebasedConfiguratorConnector;
   let configuratorUtils: CommonConfiguratorUtilsService;
   let adapter: RulebasedConfiguratorAdapter[];
+  let configuratorCpqConfig: ConfiguratorCoreConfig;
 
   const GROUP_ID = 'GROUP1';
 
   const QUANTITY = 1;
 
+  const MockConfig: ConfiguratorCoreConfig = {
+    productConfigurator: {
+      cpqOverOcc: true,
+    },
+  };
+
+  function setCpqOverOcc(cpqOverOcc: boolean | undefined) {
+    (configuratorCpqConfig.productConfigurator ?? {}).cpqOverOcc = cpqOverOcc;
+  }
+
+  function createMockAdapter(
+    configuratorType?: string,
+    supportsCpqOverOcc?: boolean
+  ): RulebasedConfiguratorAdapter {
+    let adapter = new MockRulebasedConfiguratorAdapter();
+    adapter.configuratorType = configuratorType ?? CONFIGURATOR_TYPE;
+    if (supportsCpqOverOcc) {
+      adapter.cpqOverOcc = supportsCpqOverOcc;
+    } else {
+      adapter.supportsCpqOverOcc = undefined;
+    }
+    return adapter;
+  }
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
@@ -122,6 +155,10 @@ describe('RulebasedConfiguratorConnector', () => {
           useClass: MockRulebasedConfiguratorAdapter,
           multi: true,
         },
+        {
+          provide: ConfiguratorCoreConfig,
+          useValue: MockConfig,
+        },
         {
           provide: RulebasedConfiguratorConnector,
           useClass: RulebasedConfiguratorConnector,
@@ -137,7 +174,11 @@ describe('RulebasedConfiguratorConnector', () => {
     adapter = TestBed.inject(
       RulebasedConfiguratorConnector.CONFIGURATOR_ADAPTER_LIST
     );
+    configuratorCpqConfig = TestBed.inject(
+      ConfiguratorCoreConfig as Type<ConfiguratorCoreConfig>
+    );
     configuratorUtils.setOwnerKey(productConfiguration.owner);
+    setCpqOverOcc(false);
   });
 
   it('should be created', () => {
@@ -351,4 +392,58 @@ describe('RulebasedConfiguratorConnector', () => {
       );
     });
   });
+
+  describe('isAdapterMatching', () => {
+    function isAdapterMatching(
+      adapter: RulebasedConfiguratorAdapter,
+      configuratorType: string
+    ): boolean {
+      // we use call here to avoid losing 'this'-context
+      return service['isAdapterMatching'].call(
+        service,
+        adapter,
+        configuratorType
+      );
+    }
+
+    it('should match if configurator types are the same', () => {
+      const adapter = createMockAdapter(ConfiguratorType.VARIANT);
+      expect(isAdapterMatching(adapter, ConfiguratorType.VARIANT)).toBe(true);
+    });
+
+    it("shouldn't match if configurator types aren't the same", () => {
+      const adapter = createMockAdapter(ConfiguratorType.VARIANT);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(false);
+    });
+
+    it("shouldn't match if CPQ configurator type with cpqOverOcc flag is requested, but adapter doesn't support it", () => {
+      setCpqOverOcc(true);
+      const adapter = createMockAdapter(ConfiguratorType.CPQ, false);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(false);
+    });
+
+    it("shouldn't match if CPQ configurator type without cpqOverOcc flag is requested, but adapter supports it", () => {
+      setCpqOverOcc(false);
+      const adapter = createMockAdapter(ConfiguratorType.CPQ, true);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(false);
+    });
+
+    it('should match if CPQ configurator type with cpqOverOcc flag is requested and adapter supports it', () => {
+      setCpqOverOcc(true);
+      const adapter = createMockAdapter(ConfiguratorType.CPQ, true);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(true);
+    });
+
+    it("should match if CPQ configurator type without cpqOverOcc flag is requested and adapter doesn't support it", () => {
+      setCpqOverOcc(false);
+      const adapter = createMockAdapter(ConfiguratorType.CPQ, false);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(true);
+    });
+
+    it("should match if CPQ configurator with non-existing config is requested and adapter doesn't implement method", () => {
+      service['config'] = undefined;
+      const adapter = createMockAdapter(ConfiguratorType.CPQ);
+      expect(isAdapterMatching(adapter, ConfiguratorType.CPQ)).toBe(true);
+    });
+  });
 });
diff --git a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.ts b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.ts
index a2b59d7c25f..03dbb4603e6 100644
--- a/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.ts
+++ b/feature-libs/product-configurator/rulebased/core/connectors/rulebased-configurator.connector.ts
@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
 import { CartModification } from '@spartacus/cart/base/root';
 import {
   CommonConfigurator,
   CommonConfiguratorUtilsService,
+  ConfiguratorType,
 } from '@spartacus/product-configurator/common';
 import { Observable } from 'rxjs';
+import { ConfiguratorCoreConfig } from '../config/configurator-core.config';
 import { Configurator } from '../model/configurator.model';
 import { RulebasedConfiguratorAdapter } from './rulebased-configurator.adapter';
 
@@ -21,10 +23,27 @@ export class RulebasedConfiguratorConnector {
     RulebasedConfiguratorAdapter[]
   >('ConfiguratorAdapterList');
 
+  // TODO(CXSPA-3392): make config a required dependency
+  constructor(
+    adapters: RulebasedConfiguratorAdapter[],
+    configUtilsService: CommonConfiguratorUtilsService,
+    // eslint-disable-next-line @typescript-eslint/unified-signatures
+    config: ConfiguratorCoreConfig
+  );
+
+  /**
+   * @deprecated since 6.3
+   */
+  constructor(
+    adapters: RulebasedConfiguratorAdapter[],
+    configUtilsService: CommonConfiguratorUtilsService
+  );
+
   constructor(
     @Inject(RulebasedConfiguratorConnector.CONFIGURATOR_ADAPTER_LIST)
     protected adapters: RulebasedConfiguratorAdapter[],
-    protected configUtilsService: CommonConfiguratorUtilsService
+    protected configUtilsService: CommonConfiguratorUtilsService,
+    @Optional() protected config?: ConfiguratorCoreConfig
   ) {}
 
   createConfiguration(
@@ -128,8 +147,8 @@ export class RulebasedConfiguratorConnector {
   }
 
   protected getAdapter(configuratorType: string): RulebasedConfiguratorAdapter {
-    const adapterResult = this.adapters.find(
-      (adapter) => adapter.getConfiguratorType() === configuratorType
+    const adapterResult = this.adapters.find((adapter) =>
+      this.isAdapterMatching(adapter, configuratorType)
     );
     if (adapterResult) {
       return adapterResult;
@@ -139,4 +158,19 @@ export class RulebasedConfiguratorConnector {
       );
     }
   }
+
+  protected isAdapterMatching(
+    adapter: RulebasedConfiguratorAdapter,
+    configuratorType: string
+  ): boolean {
+    let matching = adapter.getConfiguratorType() === configuratorType;
+    if (matching && ConfiguratorType.CPQ === configuratorType) {
+      const isCpqOverOccRequested =
+        this.config?.productConfigurator?.cpqOverOcc ?? false;
+      const isCpqOverOccSupported =
+        !!adapter.supportsCpqOverOcc && adapter.supportsCpqOverOcc();
+      matching = isCpqOverOccRequested === isCpqOverOccSupported;
+    }
+    return matching;
+  }
 }
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer-utils.service.spec.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer-utils.service.spec.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer-utils.service.spec.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer-utils.service.spec.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer-utils.service.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer-utils.service.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer-utils.service.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer-utils.service.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.spec.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.spec.ts
similarity index 98%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.spec.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.spec.ts
index ddd6ea81e49..21932901bf1 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.spec.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.spec.ts
@@ -164,6 +164,8 @@ const cpqConfigurationIncompleteConsistent: Cpq.Configuration = {
   numberOfConflicts: 0,
 };
 
+const cpqConfigurationId = '1234-56-7890';
+
 class MockLanguageService {
   getActive(): Observable<string> {
     return of('en-US');
@@ -231,6 +233,15 @@ describe('CpqConfiguratorNormalizer', () => {
       expect(result.priceSummary?.selectedOptions?.formattedValue).toBe(
         '$2,333.33'
       );
+      expect(result.configId).toBe('');
+    });
+
+    it('should set configuration id if provided', () => {
+      const result = cpqConfiguratorNormalizer.convert({
+        ...cpqConfiguration,
+        configurationId: cpqConfigurationId,
+      });
+      expect(result.configId).toBe(cpqConfigurationId);
     });
 
     it('should set target to incomplete if incomplete attributes are undefined', () => {
@@ -1319,4 +1330,22 @@ describe('CpqConfiguratorNormalizer', () => {
       expect(value.valueDisplay).toEqual(mockCpqValue.valueDisplay);
     });
   });
+
+  describe('mapPAId', () => {
+    it("should map standard field name 'pA_ID' if present", () => {
+      expect(
+        cpqConfiguratorNormalizer['mapPAId'](<any>{
+          pA_ID: 123,
+          PA_ID: 456,
+        })
+      ).toBe('123');
+    });
+    it("should map fallback field name 'PA_ID' if standard field name 'pA_ID' is not present", () => {
+      expect(
+        cpqConfiguratorNormalizer['mapPAId'](<any>{
+          PA_ID: 456,
+        })
+      ).toBe('456');
+    });
+  });
 });
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.ts
similarity index 94%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.ts
index d669b7a58e1..cd45e44cb6a 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-normalizer.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-normalizer.ts
@@ -27,7 +27,7 @@ export class CpqConfiguratorNormalizer
   ): Configurator.Configuration {
     const resultTarget: Configurator.Configuration = {
       ...target,
-      configId: '', //will later be populated with final value
+      configId: source.configurationId ? source.configurationId : '', //if empty, will later be populated with final value
       complete: !source.incompleteAttributes?.length,
       consistent:
         !source.invalidMessages?.length &&
@@ -162,7 +162,7 @@ export class CpqConfiguratorNormalizer
   ): void {
     const attribute: Configurator.Attribute = {
       attrCode: sourceAttribute.stdAttrCode,
-      name: sourceAttribute.pA_ID.toString(),
+      name: this.mapPAId(sourceAttribute),
       description: sourceAttribute.description,
       label:
         this.cpqConfiguratorNormalizerUtilsService.convertAttributeLabel(
@@ -204,6 +204,19 @@ export class CpqConfiguratorNormalizer
     attributeList.push(attribute);
   }
 
+  /**
+   * In case the CPQ API is called via REST, the attribute id is returned using field name pA_ID.
+   * If we call CPQ via OCC the attribute is mapped to field name PA_ID.
+   * This can't be changed easily and is related to the non-standard conform name 'pA_ID';
+   * @param sourceAttribute source attribute
+   * @returns value of PA_ID or pA_ID, depending on which field is filled.
+   */
+  protected mapPAId(sourceAttribute: Cpq.Attribute): string {
+    return sourceAttribute.pA_ID
+      ? sourceAttribute.pA_ID.toString()
+      : (<any>sourceAttribute).PA_ID.toString();
+  }
+
   protected setSelectedSingleValue(attribute: Configurator.Attribute) {
     const values = attribute.values;
     if (values) {
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.spec.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.spec.ts
similarity index 97%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.spec.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.spec.ts
index cef68e2dff7..e3c9bb5a33f 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.spec.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.spec.ts
@@ -122,6 +122,8 @@ const multiSelectionProductValues: Cpq.Value[] = [
 
 const CURRENCY = 'USD';
 
+const configurationId = '1234-56-7890';
+
 class MockLanguageService {
   getActive(): Observable<string> {
     return of('en-US');
@@ -166,6 +168,17 @@ describe('CpqConfiguratorOverviewNormalizer', () => {
     expect(serviceUnderTest.convert(input).productCode).toEqual(PRODUCT_CODE);
   });
 
+  it('should set empty configuration id if not provided', () => {
+    expect(serviceUnderTest.convert(input).configId).toBe('');
+  });
+
+  it('should set configuration id if provided', () => {
+    expect(
+      serviceUnderTest.convert({ ...input, configurationId: configurationId })
+        .configId
+    ).toBe(configurationId);
+  });
+
   it('should calculate total number of issues', () => {
     expect(serviceUnderTest.convert(input).totalNumberOfIssues).toBe(6);
   });
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.ts
similarity index 98%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.ts
index 64cda3bfc11..2714f5c4f77 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-overview-normalizer.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-overview-normalizer.ts
@@ -30,7 +30,7 @@ export class CpqConfiguratorOverviewNormalizer
   ): Configurator.Overview {
     const resultTarget: Configurator.Overview = {
       ...target,
-      configId: '',
+      configId: source.configurationId ? source.configurationId : '',
       productCode: source.productSystemId,
       priceSummary:
         this.cpqConfiguratorNormalizerUtilsService.convertPriceSummary(source),
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-serializer.spec.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-serializer.spec.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-serializer.spec.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-serializer.spec.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-serializer.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-serializer.ts
similarity index 98%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-serializer.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-serializer.ts
index 87612a04457..fd7ec2f9896 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-serializer.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-serializer.ts
@@ -8,7 +8,7 @@ import { Injectable } from '@angular/core';
 import { Converter } from '@spartacus/core';
 import { Configurator } from '@spartacus/product-configurator/rulebased';
 import { Cpq } from '../cpq.models';
-import { CpqConfiguratorUtils } from './../cpq-configurator-utils';
+import { CpqConfiguratorUtils } from '../../rest/cpq-configurator-utils';
 
 const VALUE_SEPARATOR = ',';
 
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-value-serializer.spec.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-value-serializer.spec.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-value-serializer.spec.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-value-serializer.spec.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-value-serializer.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-value-serializer.ts
similarity index 95%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-value-serializer.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-value-serializer.ts
index f157738666d..5833813b04e 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator-value-serializer.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator-value-serializer.ts
@@ -8,7 +8,7 @@ import { Injectable } from '@angular/core';
 import { Converter } from '@spartacus/core';
 import { Configurator } from '@spartacus/product-configurator/rulebased';
 import { Cpq } from '../cpq.models';
-import { CpqConfiguratorUtils } from './../cpq-configurator-utils';
+import { CpqConfiguratorUtils } from '../../rest/cpq-configurator-utils';
 
 @Injectable()
 export class CpqConfiguratorValueSerializer
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator.converters.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator.converters.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/cpq-configurator.converters.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/cpq-configurator.converters.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/converters/index.ts b/feature-libs/product-configurator/rulebased/cpq/common/converters/index.ts
similarity index 100%
rename from feature-libs/product-configurator/rulebased/cpq/rest/converters/index.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/converters/index.ts
diff --git a/feature-libs/product-configurator/rulebased/cpq/common/cpq-configurator-common.module.ts b/feature-libs/product-configurator/rulebased/cpq/common/cpq-configurator-common.module.ts
new file mode 100644
index 00000000000..3ab3762f98c
--- /dev/null
+++ b/feature-libs/product-configurator/rulebased/cpq/common/cpq-configurator-common.module.ts
@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  imports: [CommonModule],
+  //TODO: CXSPA-3392 move converters from cpq-configurator-rest module here
+})
+export class CpqConfiguratorCommonModule {}
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq.models.ts b/feature-libs/product-configurator/rulebased/cpq/common/cpq.models.ts
similarity index 99%
rename from feature-libs/product-configurator/rulebased/cpq/rest/cpq.models.ts
rename to feature-libs/product-configurator/rulebased/cpq/common/cpq.models.ts
index 2c93d6e1aac..a2ae45a3e90 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq.models.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/common/cpq.models.ts
@@ -38,6 +38,7 @@ export namespace Cpq {
     responder?: Cpq.Responder;
     tabs?: Tab[];
     attributes?: Attribute[]; // attributes of current selected tab
+    configurationId?: string;
   }
 
   /**
diff --git a/feature-libs/product-configurator/rulebased/cpq/common/index.ts b/feature-libs/product-configurator/rulebased/cpq/common/index.ts
new file mode 100644
index 00000000000..ad21caa5253
--- /dev/null
+++ b/feature-libs/product-configurator/rulebased/cpq/common/index.ts
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './converters/index';
+export * from './cpq-configurator-common.module';
+export * from './cpq.models';
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.spec.ts b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.spec.ts
new file mode 100644
index 00000000000..017608f0a3e
--- /dev/null
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.spec.ts
@@ -0,0 +1,285 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Type } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { CartModification } from '@spartacus/cart/base/root';
+import {
+  CommonConfigurator,
+  ConfiguratorModelUtils,
+  ConfiguratorType,
+} from '@spartacus/product-configurator/common';
+import { Configurator } from '@spartacus/product-configurator/rulebased';
+import { of } from 'rxjs';
+import { ConfiguratorTestUtils } from '../../testing/configurator-test-utils';
+import { CpqConfiguratorOccService } from './cpq-configurator-occ.service';
+import { CpqConfiguratorOccAdapter } from './cpq-configurator-occ.adapter';
+
+const productCode = 'CONF_LAPTOP';
+const configId = '1234-56-7890';
+const userId = 'Anony';
+const documentId = '82736353';
+
+const owner: CommonConfigurator.Owner = {
+  type: CommonConfigurator.OwnerType.PRODUCT,
+  id: productCode,
+  key: ConfiguratorModelUtils.getOwnerKey(
+    CommonConfigurator.OwnerType.PRODUCT,
+    productCode
+  ),
+  configuratorType: ConfiguratorType.CPQ,
+};
+
+const productConfiguration: Configurator.Configuration = {
+  ...ConfiguratorTestUtils.createConfiguration(configId, owner),
+  productCode: productCode,
+};
+
+const groupId = '123';
+
+const inputForUpdateConfiguration: Configurator.Configuration = {
+  ...ConfiguratorTestUtils.createConfiguration(configId, owner),
+  productCode: productCode,
+};
+
+const addToCartParams: Configurator.AddToCartParameters = {
+  productCode: productCode,
+  quantity: 1,
+  configId: configId,
+  owner: owner,
+  userId: userId,
+  cartId: documentId,
+};
+
+const updateCartParams: Configurator.UpdateConfigurationForCartEntryParameters =
+  {
+    userId: userId,
+    cartId: documentId,
+    cartEntryNumber: '3',
+    configuration: ConfiguratorTestUtils.createConfiguration(configId, owner),
+  };
+
+const cartResponse: CartModification = {
+  quantityAdded: 1,
+  entry: { entryNumber: 3 },
+  statusCode: '201',
+};
+
+const readConfigCartParams: CommonConfigurator.ReadConfigurationFromCartEntryParameters =
+  {
+    userId: userId,
+    cartId: documentId,
+    cartEntryNumber: '3',
+    owner: owner,
+  };
+
+const readConfigOrderEntryParams: CommonConfigurator.ReadConfigurationFromOrderEntryParameters =
+  {
+    userId: userId,
+    orderId: documentId,
+    orderEntryNumber: '3',
+    owner: owner,
+  };
+
+const asSpy = (f: any) => <jasmine.Spy>f;
+
+describe('CpqConfiguratorOccAdapter', () => {
+  let adapterUnderTest: CpqConfiguratorOccAdapter;
+  let mockedOccService: CpqConfiguratorOccService;
+
+  beforeEach(() => {
+    mockedOccService = jasmine.createSpyObj('mockedOccService', [
+      'addToCart',
+      'getConfigIdForCartEntry',
+      'getConfigIdForOrderEntry',
+      'updateCartEntry',
+      'createConfiguration',
+      'readConfiguration',
+      'updateAttribute',
+      'updateValueQuantity',
+      'readConfigurationOverview',
+      'readConfigurationForCartEntry',
+      'readConfigurationForOrderEntry',
+    ]);
+
+    asSpy(mockedOccService.createConfiguration).and.callFake(() => {
+      return of(productConfiguration);
+    });
+
+    asSpy(mockedOccService.readConfiguration).and.callFake(() => {
+      return of(productConfiguration);
+    });
+
+    asSpy(mockedOccService.updateAttribute).and.callFake(() => {
+      return of(productConfiguration);
+    });
+    asSpy(mockedOccService.updateValueQuantity).and.callFake(() => {
+      return of(productConfiguration);
+    });
+    asSpy(mockedOccService.readConfigurationOverview).and.callFake(() => {
+      return of(productConfiguration);
+    });
+    asSpy(mockedOccService.addToCart).and.callFake(() => {
+      return of(cartResponse);
+    });
+    asSpy(mockedOccService.getConfigIdForCartEntry).and.callFake(() => {
+      return of(productConfiguration.configId);
+    });
+    asSpy(mockedOccService.getConfigIdForOrderEntry).and.callFake(() => {
+      return of(productConfiguration.configId);
+    });
+    asSpy(mockedOccService.updateCartEntry).and.callFake(() => {
+      return of(cartResponse);
+    });
+    asSpy(mockedOccService.getConfigIdForCartEntry).and.callFake(() => {
+      return of(productConfiguration.configId);
+    });
+    asSpy(mockedOccService.readConfigurationForCartEntry).and.callFake(() => {
+      return of(productConfiguration);
+    });
+    asSpy(mockedOccService.readConfigurationForOrderEntry).and.callFake(() => {
+      return of(productConfiguration);
+    });
+
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        CpqConfiguratorOccAdapter,
+        {
+          provide: CpqConfiguratorOccService,
+          useValue: mockedOccService,
+        },
+      ],
+    });
+
+    adapterUnderTest = TestBed.inject(
+      CpqConfiguratorOccAdapter as Type<CpqConfiguratorOccAdapter>
+    );
+
+    inputForUpdateConfiguration.updateType = Configurator.UpdateType.ATTRIBUTE;
+  });
+
+  it('should return correct configurator type', () => {
+    expect(adapterUnderTest.getConfiguratorType()).toEqual(
+      ConfiguratorType.CPQ
+    );
+  });
+
+  it('should state that this adapter supports CPQ API calls over OCC', () => {
+    expect(adapterUnderTest.supportsCpqOverOcc()).toBe(true);
+  });
+
+  it('should delegate create configuration to OCC service and map owner', () => {
+    adapterUnderTest.createConfiguration(owner).subscribe((config) => {
+      expect(config.owner).toEqual(owner);
+      expect(mockedOccService.createConfiguration).toHaveBeenCalledWith(
+        productCode
+      );
+    });
+  });
+
+  it('should delegate read configuration to OCC service and map owner', () => {
+    adapterUnderTest
+      .readConfiguration(productConfiguration.configId, groupId, owner)
+      .subscribe((config) => {
+        expect(config.owner).toEqual(owner);
+        expect(mockedOccService.readConfiguration).toHaveBeenCalledWith(
+          productConfiguration.configId,
+          groupId
+        );
+      });
+  });
+
+  // this ensures that there is a dummy response until the API is implemented,
+  // otherwise this leads to an NPE on the UI
+  it('should always return same configuration for price summary', () => {
+    adapterUnderTest
+      .readPriceSummary(productConfiguration)
+      .subscribe((config) => {
+        expect(config).toBe(productConfiguration);
+      });
+  });
+
+  it('should delegate update attribute to OCC service and map owner', () => {
+    adapterUnderTest
+      .updateConfiguration(inputForUpdateConfiguration)
+      .subscribe((config) => {
+        expect(config.owner).toEqual(owner);
+        expect(mockedOccService.updateAttribute).toHaveBeenCalledWith(
+          inputForUpdateConfiguration
+        );
+      });
+  });
+
+  it('should throw error in case overview is to be updated', () => {
+    expect(() => adapterUnderTest.updateConfigurationOverview()).toThrowError();
+  });
+
+  it('should delegate update value quantity to OCC service and map owner', () => {
+    inputForUpdateConfiguration.updateType =
+      Configurator.UpdateType.VALUE_QUANTITY;
+    adapterUnderTest
+      .updateConfiguration(inputForUpdateConfiguration)
+      .subscribe((config) => {
+        expect(config.owner).toEqual(owner);
+        expect(mockedOccService.updateValueQuantity).toHaveBeenCalledWith(
+          inputForUpdateConfiguration
+        );
+      });
+  });
+
+  it('should delegate read configuration overview to OCC service', () => {
+    adapterUnderTest
+      .getConfigurationOverview(productConfiguration.configId)
+      .subscribe((config) => {
+        expect(config.configId).toEqual(configId);
+        expect(mockedOccService.readConfigurationOverview).toHaveBeenCalledWith(
+          productConfiguration.configId
+        );
+      });
+  });
+
+  it('should throw exception if variant search is attempted', () => {
+    expect(() => adapterUnderTest.searchVariants()).toThrowError();
+  });
+
+  it('should delegate addToCart to OCC service', () => {
+    adapterUnderTest.addToCart(addToCartParams).subscribe((response) => {
+      expect(response).toEqual(cartResponse);
+      expect(mockedOccService.addToCart).toHaveBeenCalledWith(addToCartParams);
+    });
+  });
+
+  it('should delegate readConfigurationForCartEntry to OCC service', () => {
+    adapterUnderTest
+      .readConfigurationForCartEntry(readConfigCartParams)
+      .subscribe((response) => {
+        expect(response).toBe(productConfiguration);
+        expect(response.owner).toBe(readConfigCartParams.owner);
+        expect(
+          mockedOccService.readConfigurationForCartEntry
+        ).toHaveBeenCalledWith(readConfigCartParams);
+      });
+  });
+
+  it('should delegate readConfigurationForOrderEntry to OCC service', () => {
+    adapterUnderTest
+      .readConfigurationForOrderEntry(readConfigOrderEntryParams)
+      .subscribe((response) => {
+        expect(response).toBe(productConfiguration);
+        expect(response.owner).toBe(readConfigOrderEntryParams.owner);
+        expect(
+          mockedOccService.readConfigurationForOrderEntry
+        ).toHaveBeenCalledWith(readConfigOrderEntryParams);
+      });
+  });
+
+  it('should delegate updateCart to OCC service', () => {
+    adapterUnderTest
+      .updateConfigurationForCartEntry(updateCartParams)
+      .subscribe((response) => {
+        expect(response).toEqual(cartResponse);
+        expect(mockedOccService.updateCartEntry).toHaveBeenCalledWith(
+          updateCartParams
+        );
+      });
+  });
+});
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.ts b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.ts
new file mode 100644
index 00000000000..7802fb3ed54
--- /dev/null
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.adapter.ts
@@ -0,0 +1,129 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Injectable } from '@angular/core';
+import { CartModification } from '@spartacus/cart/base/root';
+import {
+  CommonConfigurator,
+  ConfiguratorType,
+} from '@spartacus/product-configurator/common';
+import {
+  Configurator,
+  RulebasedConfiguratorAdapter,
+} from '@spartacus/product-configurator/rulebased';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { CpqConfiguratorOccService } from './cpq-configurator-occ.service';
+
+@Injectable()
+export class CpqConfiguratorOccAdapter implements RulebasedConfiguratorAdapter {
+  constructor(protected cpqOccService: CpqConfiguratorOccService) {}
+
+  getConfiguratorType(): string {
+    return ConfiguratorType.CPQ;
+  }
+
+  supportsCpqOverOcc(): boolean {
+    return true;
+  }
+
+  createConfiguration(
+    owner: CommonConfigurator.Owner
+  ): Observable<Configurator.Configuration> {
+    // no error handling for missing owner id needed, as it's a
+    // mandatory attribute in owner
+    return this.cpqOccService.createConfiguration(owner.id).pipe(
+      map((configResponse) => {
+        configResponse.owner = owner;
+        return configResponse;
+      })
+    );
+  }
+
+  readConfiguration(
+    configId: string,
+    groupId: string,
+    owner: CommonConfigurator.Owner
+  ): Observable<Configurator.Configuration> {
+    return this.cpqOccService.readConfiguration(configId, groupId).pipe(
+      map((configResponse) => {
+        configResponse.owner = owner;
+        return configResponse;
+      })
+    );
+  }
+
+  updateConfiguration(
+    configuration: Configurator.Configuration
+  ): Observable<Configurator.Configuration> {
+    const updateMethod =
+      configuration.updateType === Configurator.UpdateType.VALUE_QUANTITY
+        ? this.cpqOccService.updateValueQuantity
+        : this.cpqOccService.updateAttribute;
+    return updateMethod.call(this.cpqOccService, configuration).pipe(
+      map((configResponse: Configurator.Configuration) => {
+        configResponse.owner = configuration.owner;
+        return configResponse;
+      })
+    );
+  }
+
+  updateConfigurationOverview(): Observable<Configurator.Overview> {
+    throw new Error(
+      'Update the configuration overview is not supported for the CPQ configurator'
+    );
+  }
+
+  addToCart(
+    parameters: Configurator.AddToCartParameters
+  ): Observable<CartModification> {
+    return this.cpqOccService.addToCart(parameters);
+  }
+
+  readConfigurationForCartEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromCartEntryParameters
+  ): Observable<Configurator.Configuration> {
+    return this.cpqOccService.readConfigurationForCartEntry(parameters).pipe(
+      map((configResponse) => {
+        configResponse.owner = parameters.owner;
+        return configResponse;
+      })
+    );
+  }
+
+  updateConfigurationForCartEntry(
+    parameters: Configurator.UpdateConfigurationForCartEntryParameters
+  ): Observable<CartModification> {
+    return this.cpqOccService.updateCartEntry(parameters);
+  }
+
+  readConfigurationForOrderEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromOrderEntryParameters
+  ): Observable<Configurator.Configuration> {
+    return this.cpqOccService.readConfigurationForOrderEntry(parameters).pipe(
+      map((configResponse) => {
+        configResponse.owner = parameters.owner;
+        return configResponse;
+      })
+    );
+  }
+
+  readPriceSummary(
+    configuration: Configurator.Configuration
+  ): Observable<Configurator.Configuration> {
+    return of(configuration); // so that UI does not run into exception
+  }
+
+  getConfigurationOverview(
+    configId: string
+  ): Observable<Configurator.Overview> {
+    return this.cpqOccService.readConfigurationOverview(configId);
+  }
+
+  searchVariants(): Observable<Configurator.Variant[]> {
+    throw new Error('searchVariants is not supported for the CPQ configurator');
+  }
+}
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.module.ts b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.module.ts
index 66e4a1b49bc..31ffde4d629 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.module.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.module.ts
@@ -14,6 +14,8 @@ import {
 import { OccConfiguratorCpqAddToCartSerializer } from './converters/occ-configurator-cpq-add-to-cart-serializer';
 import { defaultOccCpqConfiguratorConfigFactory } from './default-occ-configurator-cpq-config';
 import { provideDefaultConfigFactory } from '@spartacus/core';
+import { RulebasedConfiguratorConnector } from '@spartacus/product-configurator/rulebased';
+import { CpqConfiguratorOccAdapter } from './cpq-configurator-occ.adapter';
 
 @NgModule({
   imports: [CommonModule],
@@ -29,6 +31,11 @@ import { provideDefaultConfigFactory } from '@spartacus/core';
       useExisting: OccConfiguratorCpqUpdateCartEntrySerializer,
       multi: true,
     },
+    {
+      provide: RulebasedConfiguratorConnector.CONFIGURATOR_ADAPTER_LIST,
+      useClass: CpqConfiguratorOccAdapter,
+      multi: true,
+    },
   ],
 })
 export class CpqConfiguratorOccModule {}
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.spec.ts b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.spec.ts
index 7af46ae26fa..de9b80de843 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.spec.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.spec.ts
@@ -26,6 +26,13 @@ import {
   CPQ_CONFIGURATOR_UPDATE_CART_ENTRY_SERIALIZER,
 } from './converters/cpq-configurator-occ.converters';
 import { CpqConfiguratorOccService } from './cpq-configurator-occ.service';
+import {
+  CPQ_CONFIGURATOR_NORMALIZER,
+  CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER,
+  CPQ_CONFIGURATOR_SERIALIZER,
+  CPQ_CONFIGURATOR_QUANTITY_SERIALIZER,
+} from '../common/converters/cpq-configurator.converters';
+import { Cpq } from '../common/cpq.models';
 
 describe('CpqConfigurationOccService', () => {
   const configId = '1234-56-7890';
@@ -72,7 +79,7 @@ describe('CpqConfigurationOccService', () => {
       },
     };
 
-  const readConfigCartParams: CommonConfigurator.ReadConfigurationFromCartEntryParameters =
+  const readConfigCartEntryParams: CommonConfigurator.ReadConfigurationFromCartEntryParameters =
     {
       userId: userId,
       cartId: documentId,
@@ -104,6 +111,45 @@ describe('CpqConfigurationOccService', () => {
       },
     };
 
+  const errorMessages = ['error message 1', 'error message 2'];
+  const numberOfConflicts = 2;
+  const attributeCode = '111';
+  const attributeValueId = 'abc';
+  const tabId = '11';
+
+  const cpqConfiguration: Cpq.Configuration = {
+    productSystemId: productCode,
+    currencyISOCode: 'USD',
+    errorMessages: errorMessages,
+    numberOfConflicts: numberOfConflicts,
+    configurationId: configId,
+  };
+
+  const configuration: Configurator.Configuration = {
+    ...ConfiguratorTestUtils.createConfiguration(
+      configId,
+      ConfiguratorModelUtils.createInitialOwner()
+    ),
+    productCode: productCode,
+  };
+
+  const updateAttribute: Cpq.UpdateAttribute = {
+    configurationId: configId,
+    standardAttributeCode: attributeCode,
+    changeAttributeValue: {
+      attributeValueIds: attributeValueId,
+    },
+    tabId: tabId,
+  };
+
+  const updateValue: Cpq.UpdateValue = {
+    configurationId: configId,
+    standardAttributeCode: attributeCode,
+    attributeValueId: attributeValueId,
+    quantity: 5,
+    tabId: tabId,
+  };
+
   class MockOccEndpointsService {
     buildUrl(
       endpoint: string,
@@ -145,7 +191,6 @@ describe('CpqConfigurationOccService', () => {
       CpqConfiguratorOccService as Type<CpqConfiguratorOccService>
     );
 
-    spyOn(converterService, 'convert').and.callThrough();
     spyOn(occEnpointsService, 'buildUrl').and.callThrough();
     spyOn(converterService, 'pipeable').and.callThrough();
   });
@@ -155,6 +200,7 @@ describe('CpqConfigurationOccService', () => {
   });
 
   it('should call addToCart endpoint', () => {
+    spyOn(converterService, 'convert').and.callThrough();
     serviceUnderTest.addToCart(addToCartParams).subscribe((response) => {
       expect(response).toBe(cartResponse);
     });
@@ -185,7 +231,7 @@ describe('CpqConfigurationOccService', () => {
 
   it('should call readCpqConfigurationForCartEntry endpoint', () => {
     serviceUnderTest
-      .getConfigIdForCartEntry(readConfigCartParams)
+      .getConfigIdForCartEntry(readConfigCartEntryParams)
       .subscribe((response) => {
         expect(response).toBe(configId);
       });
@@ -236,6 +282,7 @@ describe('CpqConfigurationOccService', () => {
   });
 
   it('should call upateCart endpoint', () => {
+    spyOn(converterService, 'convert').and.callThrough();
     serviceUnderTest.updateCartEntry(updateCartParams).subscribe((response) => {
       expect(response).toBe(cartResponse);
     });
@@ -266,4 +313,229 @@ describe('CpqConfigurationOccService', () => {
       }
     );
   });
+
+  it('should create a configuration and call normalizer', () => {
+    serviceUnderTest.createConfiguration(productCode).subscribe((config) => {
+      expect(config.errorMessages).toBe(errorMessages);
+    });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return req.method === 'GET' && req.url === 'createCpqConfiguration';
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'createCpqConfiguration',
+      {
+        urlParams: {
+          productCode: productCode,
+        },
+      }
+    );
+  });
+
+  it('should read the default configuration tab and call normalizer', () => {
+    serviceUnderTest.readConfiguration(configId).subscribe((config) => {
+      expect(config.errorMessages).toBe(errorMessages);
+    });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return req.method === 'GET' && req.url === 'readCpqConfiguration';
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'readCpqConfiguration',
+      {
+        urlParams: {
+          configurationId: configId,
+        },
+        queryParams: undefined,
+      }
+    );
+  });
+
+  it('should read the desired configuration tab and call normalizer', () => {
+    serviceUnderTest.readConfiguration(configId, tabId).subscribe((config) => {
+      expect(config.errorMessages).toBe(errorMessages);
+    });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return req.method === 'GET' && req.url === 'readCpqConfiguration';
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'readCpqConfiguration',
+      {
+        urlParams: {
+          configurationId: configId,
+        },
+        queryParams: {
+          tabId: tabId,
+        },
+      }
+    );
+  });
+
+  it('should read the configuration overview and call the overview normalizer', () => {
+    serviceUnderTest.readConfigurationOverview(configId).subscribe((config) => {
+      expect(config.numberOfConflicts).toBe(numberOfConflicts);
+    });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return req.method === 'GET' && req.url === 'readCpqConfigurationOverview';
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'readCpqConfigurationOverview',
+      {
+        urlParams: {
+          configurationId: configId,
+        },
+      }
+    );
+  });
+
+  it('should call serializer, update an attribute, retrieve configuration and call normalizer', () => {
+    spyOn(converterService, 'convert').and.returnValue(updateAttribute);
+    serviceUnderTest.updateAttribute(configuration).subscribe((config) => {
+      expect(config.errorMessages).toBe(errorMessages);
+    });
+
+    expect(converterService.convert).toHaveBeenCalledWith(
+      configuration,
+      CPQ_CONFIGURATOR_SERIALIZER
+    );
+
+    const mockReq = httpMock.expectOne((req) => {
+      return req.method === 'PATCH' && req.url === 'updateCpqAttribute';
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'updateCpqAttribute',
+      {
+        urlParams: {
+          configurationId: configId,
+          attributeCode: attributeCode,
+        },
+        queryParams: {
+          tabId: tabId,
+        },
+      }
+    );
+  });
+
+  it('should call serializer, update an attribute value quantity, retrieve configuration and call normalizer', () => {
+    spyOn(converterService, 'convert').and.returnValue(updateValue);
+    serviceUnderTest.updateValueQuantity(configuration).subscribe((config) => {
+      expect(config.errorMessages).toBe(errorMessages);
+    });
+
+    expect(converterService.convert).toHaveBeenCalledWith(
+      configuration,
+      CPQ_CONFIGURATOR_QUANTITY_SERIALIZER
+    );
+
+    const mockReq = httpMock.expectOne((req) => {
+      return (
+        req.method === 'PATCH' && req.url === 'updateCpqAttributeValueQuantity'
+      );
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(converterService.pipeable).toHaveBeenCalledWith(
+      CPQ_CONFIGURATOR_NORMALIZER
+    );
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'updateCpqAttributeValueQuantity',
+      {
+        urlParams: {
+          configurationId: configId,
+          attributeCode: attributeCode,
+          attributeValueId: attributeValueId,
+        },
+        queryParams: {
+          tabId: tabId,
+        },
+      }
+    );
+  });
+
+  it('should read the configuration for a cart entry and call normalizer', () => {
+    serviceUnderTest
+      .readConfigurationForCartEntry(readConfigCartEntryParams)
+      .subscribe((config) => {
+        expect(config.errorMessages).toBe(errorMessages);
+      });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return (
+        req.method === 'GET' &&
+        req.url === 'readCpqConfigurationForCartEntryFull'
+      );
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'readCpqConfigurationForCartEntryFull',
+      {
+        urlParams: {
+          userId: userId,
+          cartId: documentId,
+          cartEntryNumber: '3',
+        },
+      }
+    );
+  });
+
+  it('should read the configuration for an order entry and call normalizer', () => {
+    serviceUnderTest
+      .readConfigurationForOrderEntry(readConfigOrderEntryParams)
+      .subscribe((config) => {
+        expect(config.errorMessages).toBe(errorMessages);
+      });
+
+    const mockReq = httpMock.expectOne((req) => {
+      return (
+        req.method === 'GET' &&
+        req.url === 'readCpqConfigurationForOrderEntryFull'
+      );
+    });
+    mockReq.flush(cpqConfiguration);
+
+    expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+      'readCpqConfigurationForOrderEntryFull',
+      {
+        urlParams: {
+          userId: userId,
+          orderId: documentId,
+          orderEntryNumber: '3',
+        },
+      }
+    );
+  });
 });
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.ts b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.ts
index 4749ac5596e..14084622b3f 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/cpq-configurator-occ.service.ts
@@ -19,6 +19,13 @@ import {
   CPQ_CONFIGURATOR_ADD_TO_CART_SERIALIZER,
   CPQ_CONFIGURATOR_UPDATE_CART_ENTRY_SERIALIZER,
 } from './converters/cpq-configurator-occ.converters';
+import {
+  CPQ_CONFIGURATOR_NORMALIZER,
+  CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER,
+  CPQ_CONFIGURATOR_QUANTITY_SERIALIZER,
+  CPQ_CONFIGURATOR_SERIALIZER,
+} from '../common/converters/cpq-configurator.converters';
+import { Cpq } from '../common/cpq.models';
 
 @Injectable({ providedIn: 'root' })
 export class CpqConfiguratorOccService {
@@ -113,4 +120,220 @@ export class CpqConfiguratorOccService {
       })
     );
   }
+
+  /**
+   * Creates a new default runtime configuration for the given product id
+   * and read it from the CPQ system over OCC.
+   *
+   * @param {string} productSystemId - Product system ID
+   * @returns {Observable<Configurator.Configuration>} - Created configuration
+   */
+  createConfiguration(
+    productSystemId: string
+  ): Observable<Configurator.Configuration> {
+    return this.callCreateConfiguration(productSystemId).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  /**
+   * Retrieves a configuration from the CPQ system over OCC by its configuration ID and for a certain tab.
+   *
+   * @param {string} configId - Configuration ID
+   * @param {string} tabId - Tab ID
+   * @returns {Observable<Configurator.Configuration>} - Retrieved configuration
+   */
+  readConfiguration(
+    configId: string,
+    tabId?: string
+  ): Observable<Configurator.Configuration> {
+    return this.callReadConfiguration(configId, tabId).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  /**
+   * Retrieves a configuration overview from the CPQ system over OCC by its configuration ID.
+   *
+   * @param {string} configId - Configuration ID
+   * @returns {Observable<Configurator.Overview>} - Retrieved overview
+   */
+  readConfigurationOverview(
+    configId: string
+  ): Observable<Configurator.Overview> {
+    return this.callReadConfigurationOverview(configId).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER)
+    );
+  }
+
+  /**
+   * Updates an attribute of the runtime configuration for the given configuration id and attribute code
+   * and read the desired configuration tab from the CPQ system over OCC.
+   *
+   * @param {Configurator.Configuration} configuration - Configuration
+   * @returns {Observable<Configurator.Configuration>} - Updated configuration
+   */
+  updateAttribute(
+    configuration: Configurator.Configuration
+  ): Observable<Configurator.Configuration> {
+    const updateAttribute: Cpq.UpdateAttribute = this.converterService.convert(
+      configuration,
+      CPQ_CONFIGURATOR_SERIALIZER
+    );
+    return this.callUpdateAttribute(updateAttribute).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  /**
+   * Updates a quantity for an attribute of the runtime configuration for the given configuration id and attribute code
+   * and read the desired configuration tab from the CPQ system over OCC.
+   *
+   * @param {Configurator.Configuration} configuration - Configuration
+   * @returns {Observable<Configurator.Configuration>} - Updated configuration
+   */
+  updateValueQuantity(
+    configuration: Configurator.Configuration
+  ): Observable<Configurator.Configuration> {
+    const updateValue: Cpq.UpdateValue = this.converterService.convert(
+      configuration,
+      CPQ_CONFIGURATOR_QUANTITY_SERIALIZER
+    );
+    return this.callUpdateValue(updateValue).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  /**
+   * Retrieves a configuration assigned to a cart entry.
+   *
+   * @param {CommonConfigurator.ReadConfigurationFromCartEntryParameters} parameters - Cart entry parameters
+   * @returns {Observable<Configurator.Configuration>} - Retrieved configuration
+   */
+  readConfigurationForCartEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromCartEntryParameters
+  ): Observable<Configurator.Configuration> {
+    return this.callReadConfigurationForCartEntry(parameters).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  /**
+   * Retrieves a configuration assigned to an order entry.
+   *
+   * @param {CommonConfigurator.ReadConfigurationFromOrderEntryParameters} parameters - Order entry parameters
+   * @returns {Observable<Configurator.Configuration>} - Retrieved configuration
+   */
+  readConfigurationForOrderEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromOrderEntryParameters
+  ): Observable<Configurator.Configuration> {
+    return this.callReadConfigurationForOrderEntry(parameters).pipe(
+      this.converterService.pipeable(CPQ_CONFIGURATOR_NORMALIZER)
+    );
+  }
+
+  protected callCreateConfiguration(
+    productSystemId: string
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl('createCpqConfiguration', {
+      urlParams: {
+        productCode: productSystemId,
+      },
+    });
+    return this.http.get<Cpq.Configuration>(url);
+  }
+
+  protected callReadConfiguration(
+    configId: string,
+    tabId?: string
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl('readCpqConfiguration', {
+      urlParams: {
+        configurationId: configId,
+      },
+      queryParams: tabId ? { tabId: tabId } : undefined,
+    });
+    return this.http.get<Cpq.Configuration>(url);
+  }
+
+  protected callReadConfigurationOverview(
+    configId: string
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl(
+      'readCpqConfigurationOverview',
+      {
+        urlParams: {
+          configurationId: configId,
+        },
+      }
+    );
+    return this.http.get<Cpq.Configuration>(url);
+  }
+
+  protected callUpdateAttribute(
+    updateAttribute: Cpq.UpdateAttribute
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl('updateCpqAttribute', {
+      urlParams: {
+        configurationId: updateAttribute.configurationId,
+        attributeCode: updateAttribute.standardAttributeCode,
+      },
+      queryParams: { tabId: updateAttribute.tabId },
+    });
+    return this.http.patch<Cpq.Configuration>(
+      url,
+      updateAttribute.changeAttributeValue
+    );
+  }
+
+  protected callUpdateValue(
+    updateValue: Cpq.UpdateValue
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl(
+      'updateCpqAttributeValueQuantity',
+      {
+        urlParams: {
+          configurationId: updateValue.configurationId,
+          attributeCode: updateValue.standardAttributeCode,
+          attributeValueId: updateValue.attributeValueId,
+        },
+        queryParams: { tabId: updateValue.tabId },
+      }
+    );
+    return this.http.patch<Cpq.Configuration>(url, {
+      quantity: updateValue.quantity,
+    });
+  }
+
+  protected callReadConfigurationForCartEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromCartEntryParameters
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl(
+      'readCpqConfigurationForCartEntryFull',
+      {
+        urlParams: {
+          userId: parameters.userId,
+          cartId: parameters.cartId,
+          cartEntryNumber: parameters.cartEntryNumber,
+        },
+      }
+    );
+    return this.http.get<Cpq.Configuration>(url);
+  }
+
+  protected callReadConfigurationForOrderEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromOrderEntryParameters
+  ): Observable<Cpq.Configuration> {
+    const url = this.occEndpointsService.buildUrl(
+      'readCpqConfigurationForOrderEntryFull',
+      {
+        urlParams: {
+          userId: parameters.userId,
+          orderId: parameters.orderId,
+          orderEntryNumber: parameters.orderEntryNumber,
+        },
+      }
+    );
+    return this.http.get<Cpq.Configuration>(url);
+  }
 }
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/default-occ-configurator-cpq-config.ts b/feature-libs/product-configurator/rulebased/cpq/occ/default-occ-configurator-cpq-config.ts
index cabfbc83dce..b986ccd9e13 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/default-occ-configurator-cpq-config.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/default-occ-configurator-cpq-config.ts
@@ -20,6 +20,20 @@ export function defaultOccCpqConfiguratorConfigFactory(): OccConfig {
             'users/${userId}/orders/${orderId}/entries/${orderEntryNumber}/cpqconfigurator',
           updateCpqConfigurationForCartEntry:
             'users/${userId}/carts/${cartId}/entries/${cartEntryNumber}/cpqconfigurator',
+          createCpqConfiguration:
+            'products/${productCode}/configurators/cpqconfigurator',
+          readCpqConfiguration:
+            'cpqconfigurator/${configurationId}/configuration?tabId=${tabId}',
+          readCpqConfigurationOverview:
+            'cpqconfigurator/${configurationId}/configurationOverview',
+          updateCpqAttribute:
+            'cpqconfigurator/${configurationId}/attributes/${attributeCode}?tabId=${tabId}',
+          updateCpqAttributeValueQuantity:
+            'cpqconfigurator/${configurationId}/attributes/${attributeCode}/values/${attributeValueId}?tabId=${tabId}',
+          readCpqConfigurationForCartEntryFull:
+            'users/${userId}/carts/${cartId}/entries/${cartEntryNumber}/cpqconfigurator/configuration',
+          readCpqConfigurationForOrderEntryFull:
+            'users/${userId}/orders/${orderId}/entries/${orderEntryNumber}/cpqconfigurator/configuration',
         },
       },
     },
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/index.ts b/feature-libs/product-configurator/rulebased/cpq/occ/index.ts
index b81127cd51f..d5210756a39 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/index.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/index.ts
@@ -8,4 +8,5 @@ export * from './converters/index';
 export * from './cpq-configurator-occ.models';
 export * from './cpq-configurator-occ.module';
 export * from './cpq-configurator-occ.service';
+export * from './cpq-configurator-occ.adapter';
 export * from './model/index';
diff --git a/feature-libs/product-configurator/rulebased/cpq/occ/model/occ-cpq-configurator-endpoints.model.ts b/feature-libs/product-configurator/rulebased/cpq/occ/model/occ-cpq-configurator-endpoints.model.ts
index 44974524abf..6fac0b02f21 100644
--- a/feature-libs/product-configurator/rulebased/cpq/occ/model/occ-cpq-configurator-endpoints.model.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/occ/model/occ-cpq-configurator-endpoints.model.ts
@@ -24,12 +24,40 @@ declare module '@spartacus/core' {
      */
     updateCpqConfigurationForCartEntry?: string | OccEndpoint;
     /**
-     * Endpoint for reading a CPQ configuration attached to the given cart entry
+     * Endpoint for reading the Id of a CPQ configuration attached to the given cart entry
      */
     readCpqConfigurationForCartEntry?: string | OccEndpoint;
     /**
-     * Endpoint for reading a CPQ configuration attached to a given order entry
+     * Endpoint for reading the Id of a CPQ configuration attached to the given order entry
      */
     readCpqConfigurationForOrderEntry?: string | OccEndpoint;
+    /**
+     * Endpoint for creation a CPQ configuration over OCC
+     */
+    createCpqConfiguration?: string | OccEndpoint;
+    /**
+     * Endpoint for retrieving a CPQ configuration over OCC
+     */
+    readCpqConfiguration?: string | OccEndpoint;
+    /**
+     * Endpoint for retrieving a CPQ configuration overview over OCC
+     */
+    readCpqConfigurationOverview?: string | OccEndpoint;
+    /**
+     * Endpoint for update a CPQ attribute over OCC
+     */
+    updateCpqAttribute?: string | OccEndpoint;
+    /**
+     * Endpoint for update a CPQ attribute value quantity over OCC
+     */
+    updateCpqAttributeValueQuantity?: string | OccEndpoint;
+    /**
+     * Endpoint for reading a CPQ configuration attached to the given cart entry over OCC
+     */
+    readCpqConfigurationForCartEntryFull?: string | OccEndpoint;
+    /**
+     * Endpoint for reading a CPQ configuration attached to a given order entry over OCC
+     */
+    readCpqConfigurationForOrderEntryFull?: string | OccEndpoint;
   }
 }
diff --git a/feature-libs/product-configurator/rulebased/cpq/public_api.ts b/feature-libs/product-configurator/rulebased/cpq/public_api.ts
index 781e15ddc6b..2afe4abace1 100644
--- a/feature-libs/product-configurator/rulebased/cpq/public_api.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/public_api.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export * from './common/index';
 export * from './occ/index';
 export * from './rest/index';
 export * from './rulebased-cpq-configurator.module';
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.spec.ts b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.spec.ts
index 5bb25414aa6..02c208541bd 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.spec.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.spec.ts
@@ -284,4 +284,8 @@ describe('CpqConfiguratorRestAdapter', () => {
         );
       });
   });
+
+  it("shouldn't support CPQ over OCC mode", () => {
+    expect(adapterUnderTest.supportsCpqOverOcc()).toBe(false);
+  });
 });
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.ts b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.ts
index c9bc7041082..2a275ec3383 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.adapter.ts
@@ -32,6 +32,10 @@ export class CpqConfiguratorRestAdapter
     return ConfiguratorType.CPQ;
   }
 
+  supportsCpqOverOcc(): boolean {
+    return false;
+  }
+
   createConfiguration(
     owner: CommonConfigurator.Owner
   ): Observable<Configurator.Configuration> {
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.module.ts b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.module.ts
index da047968394..07b4af13576 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.module.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.module.ts
@@ -8,16 +8,16 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { provideDefaultConfig } from '@spartacus/core';
 import { RulebasedConfiguratorConnector } from '@spartacus/product-configurator/rulebased';
-import { CpqConfiguratorNormalizer } from './converters/cpq-configurator-normalizer';
-import { CpqConfiguratorOverviewNormalizer } from './converters/cpq-configurator-overview-normalizer';
-import { CpqConfiguratorSerializer } from './converters/cpq-configurator-serializer';
-import { CpqConfiguratorValueSerializer } from './converters/cpq-configurator-value-serializer';
+import { CpqConfiguratorNormalizer } from '../common/converters/cpq-configurator-normalizer';
+import { CpqConfiguratorOverviewNormalizer } from '../common/converters/cpq-configurator-overview-normalizer';
+import { CpqConfiguratorSerializer } from '../common/converters/cpq-configurator-serializer';
+import { CpqConfiguratorValueSerializer } from '../common/converters/cpq-configurator-value-serializer';
 import {
   CPQ_CONFIGURATOR_NORMALIZER,
   CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER,
   CPQ_CONFIGURATOR_QUANTITY_SERIALIZER,
   CPQ_CONFIGURATOR_SERIALIZER,
-} from './converters/cpq-configurator.converters';
+} from '../common/converters/cpq-configurator.converters';
 import { CpqConfiguratorRestAdapter } from './cpq-configurator-rest.adapter';
 import { defaultCpqConfiguratorEndpointConfig } from './default-cpq-configurator-endpoint.config';
 
@@ -30,6 +30,7 @@ import { defaultCpqConfiguratorEndpointConfig } from './default-cpq-configurator
       useClass: CpqConfiguratorRestAdapter,
       multi: true,
     },
+    //TODO: CXSPA-3392 move converters from here to cpq-configurator-common module
     {
       provide: CPQ_CONFIGURATOR_NORMALIZER,
       useClass: CpqConfiguratorNormalizer,
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.spec.ts b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.spec.ts
index 78ddc2c9e20..0e46dd6a3e7 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.spec.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.spec.ts
@@ -13,11 +13,11 @@ import {
   CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER,
   CPQ_CONFIGURATOR_QUANTITY_SERIALIZER,
   CPQ_CONFIGURATOR_SERIALIZER,
-} from './converters/cpq-configurator.converters';
+} from '../common/converters/cpq-configurator.converters';
 import { CpqConfiguratorEndpointConfig } from './cpq-configurator-endpoint.config';
 import { CpqConfiguratorRestAdapter } from './cpq-configurator-rest.adapter';
 import { CpqConfiguratorRestService } from './cpq-configurator-rest.service';
-import { Cpq } from './cpq.models';
+import { Cpq } from '../common/cpq.models';
 import { defaultCpqConfiguratorEndpointConfig } from './default-cpq-configurator-endpoint.config';
 
 const productCode = 'CONF_LAPTOP';
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.ts b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.ts
index 2a1bd0b5fd0..928f10eb272 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/cpq-configurator-rest.service.ts
@@ -15,9 +15,9 @@ import {
   CPQ_CONFIGURATOR_OVERVIEW_NORMALIZER,
   CPQ_CONFIGURATOR_QUANTITY_SERIALIZER,
   CPQ_CONFIGURATOR_SERIALIZER,
-} from './converters/cpq-configurator.converters';
+} from '../common/converters/cpq-configurator.converters';
 import { CpqConfiguratorEndpointService } from './cpq-configurator-endpoint.service';
-import { Cpq } from './cpq.models';
+import { Cpq } from '../common/cpq.models';
 
 @Injectable({ providedIn: 'root' })
 export class CpqConfiguratorRestService {
diff --git a/feature-libs/product-configurator/rulebased/cpq/rest/index.ts b/feature-libs/product-configurator/rulebased/cpq/rest/index.ts
index 7b0ff2af369..c25abcb5104 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rest/index.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rest/index.ts
@@ -4,11 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './converters/index';
 export * from './cpq-configurator-endpoint.config';
 export * from './cpq-configurator-endpoint.service';
 export * from './cpq-configurator-rest.adapter';
 export * from './cpq-configurator-rest.module';
 export * from './cpq-configurator-rest.service';
 export * from './cpq-configurator-utils';
-export * from './cpq.models';
diff --git a/feature-libs/product-configurator/rulebased/cpq/rulebased-cpq-configurator.module.ts b/feature-libs/product-configurator/rulebased/cpq/rulebased-cpq-configurator.module.ts
index 8233a0a4715..d57f09b12e1 100644
--- a/feature-libs/product-configurator/rulebased/cpq/rulebased-cpq-configurator.module.ts
+++ b/feature-libs/product-configurator/rulebased/cpq/rulebased-cpq-configurator.module.ts
@@ -5,6 +5,7 @@
  */
 
 import { NgModule } from '@angular/core';
+import { CpqConfiguratorCommonModule } from './common/cpq-configurator-common.module';
 import { CpqConfiguratorOccModule } from './occ/cpq-configurator-occ.module';
 import { CpqConfiguratorRestModule } from './rest/cpq-configurator-rest.module';
 
@@ -13,6 +14,10 @@ import { CpqConfiguratorRestModule } from './rest/cpq-configurator-rest.module';
  * REST APIs and to commerce via OCC
  */
 @NgModule({
-  imports: [CpqConfiguratorOccModule, CpqConfiguratorRestModule],
+  imports: [
+    CpqConfiguratorCommonModule,
+    CpqConfiguratorOccModule,
+    CpqConfiguratorRestModule,
+  ],
 })
 export class RulebasedCpqConfiguratorModule {}
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/cpq/cpq-configuration.core-e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/cpq/cpq-configuration.core-e2e.cy.ts
index c4c0698173a..6c7348d5060 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/cpq/cpq-configuration.core-e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/cpq/cpq-configuration.core-e2e.cy.ts
@@ -92,500 +92,587 @@ const ATTR_NAMES = {
   ],
 };
 
-const CPQ_BACKEND_URL = '**/api/configuration/v1/configurations/**';
-
-context('CPQ Configuration', () => {
-  beforeEach(() => {
-    configuration.defineAliases(CPQ_BACKEND_URL);
-    cy.visit('/');
-    clickAllowAllFromBanner();
-    configurationCpq.login(EMAIL, PASSWORD, CPQ_USER);
-  });
-
-  describe('Navigate to Product Configuration Page', () => {
-    it('should be able to navigate from the product search result', () => {
-      configurationCpq.searchForProduct(PROD_CODE_CAM);
-      configurationCpq.clickOnConfigureBtnInCatalog();
+const testConfig = [
+  {
+    name: 'CPQ Configuration - cpqOverOcc Mode',
+    cpqOverOcc: true,
+    backendURL: `${Cypress.env('OCC_PREFIX')}/${POWERTOOLS}/cpqconfigurator/**`,
+  },
+  {
+    name: 'CPQ Configuration - direct Mode',
+    cpqOverOcc: false,
+    backendURL: '**/api/configuration/v1/configurations/**',
+  },
+];
+
+testConfig.forEach((config) => {
+  context(config.name, () => {
+    const cpqSettings: any = {
+      productConfigurator: {
+        cpqOverOcc: config.cpqOverOcc,
+      },
+    };
+    beforeEach(() => {
+      cy.cxConfig(cpqSettings);
+      configuration.defineAliases(config.backendURL);
+      cy.visit('/');
+      clickAllowAllFromBanner();
+      configurationCpq.login(EMAIL, PASSWORD, CPQ_USER);
     });
 
-    it('should be able to navigate from the product details page', () => {
-      configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_CAM);
-      configurationCpq.clickOnConfigureBtnInCatalog();
+    describe('Navigate to Product Configuration Page', () => {
+      it('should be able to navigate from the product search result', () => {
+        configurationCpq.searchForProduct(PROD_CODE_CAM);
+        configurationCpq.clickOnConfigureBtnInCatalog();
+      });
+
+      it('should be able to navigate from the product details page', () => {
+        configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_CAM);
+        configurationCpq.clickOnConfigureBtnInCatalog();
+      });
     });
-  });
 
-  describe('Handling different UI type', () => {
-    it('should support radio button attribute type', () => {
-      configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_COF);
-      configurationCpq.clickOnConfigureBtnInCatalog();
+    describe('Handling different UI type', () => {
+      it('should support radio button attribute type', () => {
+        configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_COF);
+        configurationCpq.clickOnConfigureBtnInCatalog();
 
-      configuration.checkAttributeDisplayed(ATTR_COF_CUPS, RADGRP);
+        configuration.checkAttributeDisplayed(ATTR_COF_CUPS, RADGRP);
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_COF_CUPS,
-        RADGRP,
-        VAL_COF_CUPS_300
-      );
-      configuration.checkValueSelected(RADGRP, ATTR_COF_CUPS, VAL_COF_CUPS_300);
+        configurationCpq.selectAttributeAndWait(
+          ATTR_COF_CUPS,
+          RADGRP,
+          VAL_COF_CUPS_300,
+          config.cpqOverOcc
+        );
+        configuration.checkValueSelected(
+          RADGRP,
+          ATTR_COF_CUPS,
+          VAL_COF_CUPS_300
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_COF_CUPS,
-        RADGRP,
-        VAL_COF_CUPS_500
-      );
-      configuration.checkValueSelected(RADGRP, ATTR_COF_CUPS, VAL_COF_CUPS_500);
-    });
+        configurationCpq.selectAttributeAndWait(
+          ATTR_COF_CUPS,
+          RADGRP,
+          VAL_COF_CUPS_500,
+          config.cpqOverOcc
+        );
+        configuration.checkValueSelected(
+          RADGRP,
+          ATTR_COF_CUPS,
+          VAL_COF_CUPS_500
+        );
+      });
 
-    it('should support checkbox list attribute type', () => {
-      configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_COF);
-      configurationCpq.clickOnConfigureBtnInCatalog();
+      it('should support checkbox list attribute type', () => {
+        configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_COF);
+        configurationCpq.clickOnConfigureBtnInCatalog();
 
-      configuration.checkAttributeDisplayed(ATTR_COF_MODE, CHKBOX);
-      configurationCpq.checkValueNotSelected(
-        CHKBOX,
-        ATTR_COF_MODE,
-        VAL_COF_MODE
-      );
+        configuration.checkAttributeDisplayed(ATTR_COF_MODE, CHKBOX);
+        configurationCpq.checkValueNotSelected(
+          CHKBOX,
+          ATTR_COF_MODE,
+          VAL_COF_MODE
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_COF_MODE,
-        CHKBOX,
-        VAL_COF_MODE
-      );
-      configuration.checkValueSelected(CHKBOX, ATTR_COF_MODE, VAL_COF_MODE);
+        configurationCpq.selectAttributeAndWait(
+          ATTR_COF_MODE,
+          CHKBOX,
+          VAL_COF_MODE,
+          config.cpqOverOcc
+        );
+        configuration.checkValueSelected(CHKBOX, ATTR_COF_MODE, VAL_COF_MODE);
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_COF_MODE,
-        CHKBOX,
-        VAL_COF_MODE
-      );
-      configurationCpq.checkValueNotSelected(
-        CHKBOX,
-        ATTR_COF_MODE,
-        VAL_COF_MODE
-      );
-    });
+        configurationCpq.selectAttributeAndWait(
+          ATTR_COF_MODE,
+          CHKBOX,
+          VAL_COF_MODE,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkValueNotSelected(
+          CHKBOX,
+          ATTR_COF_MODE,
+          VAL_COF_MODE
+        );
+      });
 
-    it('should support single select (radio) bundle items', () => {
-      configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
-      configuration.checkCurrentGroupActive(GRP_CAM_MAIN);
+      it('should support single select (radio) bundle items', () => {
+        configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
+        configuration.checkCurrentGroupActive(GRP_CAM_MAIN);
 
-      configuration.checkAttributeDisplayed(ATTR_CAM_BODY, RADGRP_PROD);
-      configurationCpq.checkValueNotSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_D850
-      );
-      configurationCpq.checkValueNotSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_EOS80D
-      );
+        configuration.checkAttributeDisplayed(ATTR_CAM_BODY, RADGRP_PROD);
+        configurationCpq.checkValueNotSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_D850
+        );
+        configurationCpq.checkValueNotSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_EOS80D
+        );
 
-      configuration.selectAttribute(
-        ATTR_CAM_BODY,
-        RADGRP_PROD,
-        VAL_CAM_BODY_D850
-      );
-      configuration.checkValueSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_D850
-      );
-      configurationCpq.checkValueNotSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_EOS80D
-      );
+        configuration.selectAttribute(
+          ATTR_CAM_BODY,
+          RADGRP_PROD,
+          VAL_CAM_BODY_D850,
+          config.cpqOverOcc
+        );
+        configuration.checkValueSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_D850
+        );
+        configurationCpq.checkValueNotSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_EOS80D
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_CAM_BODY,
-        RADGRP_PROD,
-        VAL_CAM_BODY_EOS80D
-      );
-      configurationCpq.checkValueNotSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_D850
-      );
-      configuration.checkValueSelected(
-        RADGRP_PROD,
-        ATTR_CAM_BODY,
-        VAL_CAM_BODY_EOS80D
-      );
-    });
+        configurationCpq.selectAttributeAndWait(
+          ATTR_CAM_BODY,
+          RADGRP_PROD,
+          VAL_CAM_BODY_EOS80D,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkValueNotSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_D850
+        );
+        configuration.checkValueSelected(
+          RADGRP_PROD,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_EOS80D
+        );
+      });
 
-    it('should support single select (ddlb) bundle items', () => {
-      configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
+      it('should support single select (ddlb) bundle items', () => {
+        configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
 
-      configurationCpq.clickOnGroup(2);
-      configuration.checkCurrentGroupActive(GRP_CAM_IAW);
+        configurationCpq.clickOnGroup(2);
+        configuration.checkCurrentGroupActive(GRP_CAM_IAW);
 
-      configuration.checkAttributeDisplayed(ATTR_CAM_INS, DDLB_PROD);
-      configuration.checkValueSelected(DDLB_PROD, ATTR_CAM_INS, VAL_NO_OPT_SEL);
-      configurationCpq.checkValueNotSelected(
-        DDLB_PROD,
-        ATTR_CAM_INS,
-        VAL_CB_INS_Y2
-      );
+        configuration.checkAttributeDisplayed(ATTR_CAM_INS, DDLB_PROD);
+        configuration.checkValueSelected(
+          DDLB_PROD,
+          ATTR_CAM_INS,
+          VAL_NO_OPT_SEL
+        );
+        configurationCpq.checkValueNotSelected(
+          DDLB_PROD,
+          ATTR_CAM_INS,
+          VAL_CB_INS_Y2
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_CAM_INS,
-        DDLB_PROD,
-        VAL_CB_INS_Y2
-      );
-      configurationCpq.checkValueNotSelected(
-        DDLB_PROD,
-        ATTR_CAM_INS,
-        VAL_NO_OPT_SEL
-      );
-      configuration.checkValueSelected(DDLB_PROD, ATTR_CAM_INS, VAL_CB_INS_Y2);
-    });
+        configurationCpq.selectAttributeAndWait(
+          ATTR_CAM_INS,
+          DDLB_PROD,
+          VAL_CB_INS_Y2,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkValueNotSelected(
+          DDLB_PROD,
+          ATTR_CAM_INS,
+          VAL_NO_OPT_SEL
+        );
+        configuration.checkValueSelected(
+          DDLB_PROD,
+          ATTR_CAM_INS,
+          VAL_CB_INS_Y2
+        );
+      });
 
-    it('should support multi select bundle items', () => {
-      configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
+      it('should support multi select bundle items', () => {
+        configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
 
-      configuration.checkAttributeDisplayed(ATTR_CAM_MC, CHKBOX_PROD);
-      configuration.checkValueSelected(
-        CHKBOX_PROD,
-        ATTR_CAM_MC,
-        VAL_CAM_MC_128
-      );
-      configurationCpq.checkValueNotSelected(
-        CHKBOX_PROD,
-        ATTR_CAM_MC,
-        VAL_CAM_MC_64
-      );
+        configuration.checkAttributeDisplayed(ATTR_CAM_MC, CHKBOX_PROD);
+        configuration.checkValueSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128
+        );
+        configurationCpq.checkValueNotSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_64
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_CAM_MC,
-        CHKBOX_PROD,
-        VAL_CAM_MC_64
-      );
-      configuration.checkValueSelected(
-        CHKBOX_PROD,
-        ATTR_CAM_MC,
-        VAL_CAM_MC_128
-      );
-      configuration.checkValueSelected(CHKBOX_PROD, ATTR_CAM_MC, VAL_CAM_MC_64);
+        configurationCpq.selectAttributeAndWait(
+          ATTR_CAM_MC,
+          CHKBOX_PROD,
+          VAL_CAM_MC_64,
+          config.cpqOverOcc
+        );
+        configuration.checkValueSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128
+        );
+        configuration.checkValueSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_64
+        );
 
-      configurationCpq.selectAttributeAndWait(
-        ATTR_CAM_MC,
-        CHKBOX_PROD,
-        VAL_CAM_MC_128
-      );
-      configurationCpq.checkValueNotSelected(
-        CHKBOX_PROD,
-        ATTR_CAM_MC,
-        VAL_CAM_MC_128
-      );
-      configuration.checkValueSelected(CHKBOX_PROD, ATTR_CAM_MC, VAL_CAM_MC_64);
+        configurationCpq.selectAttributeAndWait(
+          ATTR_CAM_MC,
+          CHKBOX_PROD,
+          VAL_CAM_MC_128,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkValueNotSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128
+        );
+        configuration.checkValueSelected(
+          CHKBOX_PROD,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_64
+        );
+      });
     });
-  });
 
-  describe('Group Handling', () => {
-    it('should navigate with next and previous buttons', () => {
-      configurationCpq
-        .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
-        .then(() => {
-          configurationCpq.waitForProductCardsLoad(12);
-          configuration.checkPreviousBtnDisabled();
-          configuration.checkNextBtnEnabled();
-
-          configuration.clickOnNextBtn(GRP_CAM_ACC);
-          configurationCpq.waitForProductCardsLoad(14);
-          configuration.checkPreviousBtnEnabled();
-          configuration.checkNextBtnEnabled();
-
-          configuration.clickOnNextBtn(GRP_CAM_IAW);
-          configurationCpq.waitForProductCardsLoad(0);
-          configuration.checkPreviousBtnEnabled();
-          configuration.checkNextBtnDisabled();
-
-          configuration.clickOnPreviousBtn(GRP_CAM_ACC);
-          configurationCpq.waitForProductCardsLoad(14);
-        });
-    });
+    describe('Group Handling', () => {
+      it('should navigate with next and previous buttons', () => {
+        configurationCpq
+          .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
+          .then(() => {
+            configurationCpq.waitForProductCardsLoad(12);
+            configuration.checkPreviousBtnDisabled();
+            configuration.checkNextBtnEnabled();
+
+            configuration.clickOnNextBtn(GRP_CAM_ACC);
+            configurationCpq.waitForProductCardsLoad(14);
+            configuration.checkPreviousBtnEnabled();
+            configuration.checkNextBtnEnabled();
+
+            configuration.clickOnNextBtn(GRP_CAM_IAW);
+            configurationCpq.waitForProductCardsLoad(0);
+            configuration.checkPreviousBtnEnabled();
+            configuration.checkNextBtnDisabled();
+
+            configuration.clickOnPreviousBtn(GRP_CAM_ACC);
+            configurationCpq.waitForProductCardsLoad(14);
+          });
+      });
 
-    it('should navigate via group menu', () => {
-      configurationCpq
-        .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
-        .then(() => {
-          configurationCpq.waitForProductCardsLoad(12);
+      it('should navigate via group menu', () => {
+        configurationCpq
+          .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
+          .then(() => {
+            configurationCpq.waitForProductCardsLoad(12);
 
-          configurationCpq.clickOnGroup(2);
-          configurationCpq.waitForProductCardsLoad(0);
-          configuration.checkCurrentGroupActive(GRP_CAM_IAW);
+            configurationCpq.clickOnGroup(2);
+            configurationCpq.waitForProductCardsLoad(0);
+            configuration.checkCurrentGroupActive(GRP_CAM_IAW);
 
-          configurationCpq.clickOnGroup(1);
-          configurationCpq.waitForProductCardsLoad(14);
-          configuration.checkCurrentGroupActive(GRP_CAM_ACC);
+            configurationCpq.clickOnGroup(1);
+            configurationCpq.waitForProductCardsLoad(14);
+            configuration.checkCurrentGroupActive(GRP_CAM_ACC);
 
-          configurationCpq.clickOnGroup(0);
-          configurationCpq.waitForProductCardsLoad(12);
-          configuration.checkCurrentGroupActive(GRP_CAM_MAIN);
-        });
+            configurationCpq.clickOnGroup(0);
+            configurationCpq.waitForProductCardsLoad(12);
+            configuration.checkCurrentGroupActive(GRP_CAM_MAIN);
+          });
+      });
+
+      it('should display correct attributes', () => {
+        configurationCpq
+          .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
+          .then(() => {
+            configurationCpq.waitForProductCardsLoad(12);
+
+            configurationCpq.checkAttributeHeaderDisplayed(
+              ATTR_NAMES.GRP_CAM_MAIN
+            );
+
+            configuration.clickOnNextBtn(GRP_CAM_ACC);
+            configurationCpq.checkAttributeHeaderDisplayed(
+              ATTR_NAMES.GRP_CAM_ACC
+            );
+
+            configuration.clickOnNextBtn(GRP_CAM_IAW);
+            configurationCpq.checkAttributeHeaderDisplayed(
+              ATTR_NAMES.GRP_CAM_IAW
+            );
+          });
+      });
     });
 
-    it('should display correct attributes', () => {
-      configurationCpq
-        .goToConfigurationPage(POWERTOOLS, PROD_CODE_CAM, 'cpq')
-        .then(() => {
-          configurationCpq.waitForProductCardsLoad(12);
+    describe('Overview Page', () => {
+      it('should display user selections and prices on overview page', () => {
+        configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
+        configurationCpq.selectProductCard(
+          RADGRP,
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_D850,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkPrice(
+          RADGRP_PROD,
+          '$1,500.00',
+          ATTR_CAM_BODY,
+          VAL_CAM_BODY_D850
+        );
 
-          configurationCpq.checkAttributeHeaderDisplayed(
-            ATTR_NAMES.GRP_CAM_MAIN
-          );
+        configurationCpq.checkPrice(
+          CHKBOX_PROD,
+          '1x($100.00) +$100.00',
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128
+        );
+        configurationCpq.setQuantity(
+          CHKBOX_PROD,
+          2,
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkPrice(
+          CHKBOX_PROD,
+          '2x($100.00) +$200.00',
+          ATTR_CAM_MC,
+          VAL_CAM_MC_128
+        );
+
+        configurationCpq.selectProductCard(
+          CHKBOX,
+          ATTR_CAM_LEN,
+          VAL_CAM_LEN_SI,
+          config.cpqOverOcc
+        );
+        configurationCpq.selectProductCard(
+          CHKBOX,
+          ATTR_CAM_LEN,
+          VAL_CAM_LEN_NI,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkPrice(
+          CHKBOX_PROD,
+          '$800.00',
+          ATTR_CAM_LEN,
+          VAL_CAM_LEN_SI
+        );
+        configurationCpq.checkPrice(
+          CHKBOX_PROD,
+          '$700.00',
+          ATTR_CAM_LEN,
+          VAL_CAM_LEN_NI
+        );
+
+        configuration.clickOnNextBtn(GRP_CAM_ACC);
+        configurationCpq.deSelectProductCard(
+          RADGRP,
+          ATTR_CAM_BAG,
+          VAL_CAM_BAG_LP,
+          config.cpqOverOcc
+        );
+
+        configuration.clickOnNextBtn(GRP_CAM_IAW);
+        configurationCpq.selectAttributeAndWait(
+          ATTR_CAM_PROF,
+          RADGRP,
+          VAL_CAM_PROF_Y,
+          config.cpqOverOcc
+        );
+        //wait for this option to disappear
+        configuration.checkAttrValueNotDisplayed(
+          ATTR_CAM_INS,
+          DDLB_PROD,
+          VAL_CB_INS_Y2
+        );
 
-          configuration.clickOnNextBtn(GRP_CAM_ACC);
-          configurationCpq.checkAttributeHeaderDisplayed(
-            ATTR_NAMES.GRP_CAM_ACC
+        configurationCpq.selectProductCard(
+          DDLB,
+          ATTR_CAM_INS,
+          VAL_CB_INS_P4,
+          config.cpqOverOcc
+        );
+        configurationCpq.checkPrice(
+          DDLB_PROD,
+          '$600.00',
+          ATTR_CAM_INS,
+          VAL_CB_INS_P4
+        );
+        configuration.navigateToOverviewPage();
+
+        configurationOverview.checkConfigOverviewPageDisplayed();
+        configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_MAIN, 0);
+        configurationOverviewCpq.checkGroupHeaderNotDisplayed(GRP_CAM_ACC);
+        configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_IAW, 1);
+
+        type ovContentType = {
+          name?: string;
+          value: string;
+          type: 'product' | 'simple';
+          price?: string;
+        };
+        const ovContent: ovContentType[] = [
+          {
+            name: 'Camera Body',
+            value: 'Nikon D850',
+            type: 'product',
+            price: '+$1,500.00',
+          },
+          {
+            name: 'Memory Card',
+            value: 'SanDisk Extreme Pro',
+            type: 'product',
+            price: '2x($100.00) +$200.00',
+          },
+          {
+            name: 'Lenses',
+            value: 'Sigma 85mm F1.4 DG HS',
+            type: 'product',
+            price: '+$800.00',
+          },
+          { value: 'Nikon AF-P DX NIKKOR', type: 'product', price: '+$700.00' },
+          {
+            name: 'professional photographer?',
+            value: 'yes',
+            type: 'simple',
+          },
+          {
+            name: 'Insurance',
+            value: 'Pro 4 years',
+            type: 'product',
+            price: '+$600.00',
+          },
+        ];
+        ovContent.forEach((line, idx) => {
+          configurationOverviewCpq.checkAttrDisplayed(
+            line.name,
+            line.value,
+            idx
           );
+          configurationOverviewCpq.checkAttrPriceDisplayed(line.price, idx);
+          configurationOverviewCpq.checkAttrType(line.type, idx);
+        });
+      });
+    });
 
-          configuration.clickOnNextBtn(GRP_CAM_IAW);
-          configurationCpq.checkAttributeHeaderDisplayed(
-            ATTR_NAMES.GRP_CAM_IAW
+    describe('Configuration Process', () => {
+      it('should support configuration aspect in product search, cart, checkout and order history', () => {
+        configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_CAM);
+        configuration.clickOnAddToCartBtnOnPD();
+        configuration.clickOnViewCartBtnOnPD();
+
+        cy.get('cx-mini-cart .count').then((elem) => {
+          const numberOfCartItems = Number(elem.text());
+          cy.log('numberOfCartItems = ' + numberOfCartItems);
+          editConfigurationFromCartEntry(numberOfCartItems);
+          // Checkout
+          configurationCartCpq.clickOnProceedToCheckoutBtnInCart();
+          configurationCartCpq.checkoutB2B();
+          configurationCartCpq.selectOrderByOrderNumberAlias(POWERTOOLS);
+          configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_MAIN, 0);
+          configurationOverviewCpq.checkAttrDisplayed(
+            'Camera Body',
+            'Canon EOS 80D',
+            0
           );
         });
+      });
     });
-  });
 
-  describe('Overview Page', () => {
-    it('should display user selections and prices on overview page', () => {
-      configurationCpq.goToCPQConfigurationPage(POWERTOOLS, PROD_CODE_CAM);
-      configurationCpq.selectProductCard(
-        RADGRP,
+    function editConfigurationFromCartEntry(numberOfCartItems: number) {
+      //We assume the last product in the cart is the one we added
+      const cartEntryIndex: number = numberOfCartItems - 1;
+      type ovBundleInfo = {
+        name: string;
+        price?: string;
+        quantity?: string;
+      };
+      const ovBundleInfos: ovBundleInfo[] = [
+        {
+          name: 'SanDisk Extreme Pro 128GB SDXC',
+          price: '$100.00',
+          quantity: '1',
+        },
+        {
+          name: 'Canon RF 24-105mm f4L IS USM',
+          price: '$1,500.00',
+        },
+        {
+          name: 'LowePro Streetline SL 140',
+          price: '$110.00',
+        },
+      ];
+      configurationCartCpq.checkAmountOfBundleItems(
+        cartEntryIndex,
+        ovBundleInfos.length
+      );
+
+      ovBundleInfos.forEach((line, bundleItemIndex) => {
+        configurationCartCpq.checkBundleItemName(
+          cartEntryIndex,
+          bundleItemIndex,
+          line.name
+        );
+        configurationCartCpq.checkBundleItemPrice(
+          cartEntryIndex,
+          bundleItemIndex,
+          line.price
+        );
+        configurationCartCpq.checkBundleItemQuantity(
+          cartEntryIndex,
+          bundleItemIndex,
+          line.quantity
+        );
+      });
+      configurationCart.clickOnEditConfigurationLink(cartEntryIndex);
+
+      configuration.checkAttributeDisplayed(ATTR_CAM_BODY, RADGRP_PROD);
+      configurationCpq.selectAttributeAndWait(
         ATTR_CAM_BODY,
-        VAL_CAM_BODY_D850
+        RADGRP_PROD,
+        VAL_CAM_BODY_D850,
+        config.cpqOverOcc
       );
-      configurationCpq.checkPrice(
+      configuration.checkValueSelected(
         RADGRP_PROD,
-        '$1,500.00',
         ATTR_CAM_BODY,
         VAL_CAM_BODY_D850
       );
-
-      configurationCpq.checkPrice(
-        CHKBOX_PROD,
-        '1x($100.00) +$100.00',
-        ATTR_CAM_MC,
-        VAL_CAM_MC_128
+      configurationCpq.selectAttributeAndWait(
+        ATTR_CAM_BODY,
+        RADGRP_PROD,
+        VAL_CAM_BODY_EOS80D,
+        config.cpqOverOcc
       );
-      configurationCpq.setQuantity(CHKBOX_PROD, 2, ATTR_CAM_MC, VAL_CAM_MC_128);
-      configurationCpq.checkPrice(
-        CHKBOX_PROD,
-        '2x($100.00) +$200.00',
-        ATTR_CAM_MC,
-        VAL_CAM_MC_128
+      configuration.checkValueSelected(
+        RADGRP_PROD,
+        ATTR_CAM_BODY,
+        VAL_CAM_BODY_EOS80D
       );
-
-      configurationCpq.selectProductCard(CHKBOX, ATTR_CAM_LEN, VAL_CAM_LEN_SI);
-      configurationCpq.selectProductCard(CHKBOX, ATTR_CAM_LEN, VAL_CAM_LEN_NI);
-      configurationCpq.checkPrice(
-        CHKBOX_PROD,
-        '$800.00',
+      configurationCpq.selectAttributeAndWait(
         ATTR_CAM_LEN,
-        VAL_CAM_LEN_SI
+        CHKBOX_PROD,
+        VAL_CAM_LEN_SI,
+        config.cpqOverOcc
       );
-      configurationCpq.checkPrice(
+      configuration.checkValueSelected(
         CHKBOX_PROD,
-        '$700.00',
         ATTR_CAM_LEN,
-        VAL_CAM_LEN_NI
-      );
-
-      configuration.clickOnNextBtn(GRP_CAM_ACC);
-      configurationCpq.deSelectProductCard(
-        RADGRP,
-        ATTR_CAM_BAG,
-        VAL_CAM_BAG_LP
-      );
-
-      configuration.clickOnNextBtn(GRP_CAM_IAW);
-      configurationCpq.selectAttributeAndWait(
-        ATTR_CAM_PROF,
-        RADGRP,
-        VAL_CAM_PROF_Y
-      );
-      //wait for this option to disappear
-      configuration.checkAttrValueNotDisplayed(
-        ATTR_CAM_INS,
-        DDLB_PROD,
-        VAL_CB_INS_Y2
-      );
-
-      configurationCpq.selectProductCard(DDLB, ATTR_CAM_INS, VAL_CB_INS_P4);
-      configurationCpq.checkPrice(
-        DDLB_PROD,
-        '$600.00',
-        ATTR_CAM_INS,
-        VAL_CB_INS_P4
+        VAL_CAM_LEN_SI
       );
-      configuration.navigateToOverviewPage();
+      configurationCpq.clickAddToCartBtn();
 
       configurationOverview.checkConfigOverviewPageDisplayed();
       configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_MAIN, 0);
-      configurationOverviewCpq.checkGroupHeaderNotDisplayed(GRP_CAM_ACC);
-      configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_IAW, 1);
+      configurationOverviewCpq.checkAttrDisplayed(
+        'Camera Body',
+        'Canon EOS 80D',
+        0
+      );
 
-      type ovContentType = {
-        name?: string;
-        value: string;
-        type: 'product' | 'simple';
-        price?: string;
-      };
-      const ovContent: ovContentType[] = [
-        {
-          name: 'Camera Body',
-          value: 'Nikon D850',
-          type: 'product',
-          price: '+$1,500.00',
-        },
-        {
-          name: 'Memory Card',
-          value: 'SanDisk Extreme Pro',
-          type: 'product',
-          price: '2x($100.00) +$200.00',
-        },
-        {
-          name: 'Lenses',
-          value: 'Sigma 85mm F1.4 DG HS',
-          type: 'product',
-          price: '+$800.00',
-        },
-        { value: 'Nikon AF-P DX NIKKOR', type: 'product', price: '+$700.00' },
-        {
-          name: 'professional photographer?',
-          value: 'yes',
-          type: 'simple',
-        },
-        {
-          name: 'Insurance',
-          value: 'Pro 4 years',
-          type: 'product',
-          price: '+$600.00',
-        },
-      ];
-      ovContent.forEach((line, idx) => {
-        configurationOverviewCpq.checkAttrDisplayed(line.name, line.value, idx);
-        configurationOverviewCpq.checkAttrPriceDisplayed(line.price, idx);
-        configurationOverviewCpq.checkAttrType(line.type, idx);
-      });
-    });
-  });
+      configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_ACC, 1);
+      configurationOverview.clickContinueToCartBtnOnOP();
 
-  describe('Configuration Process', () => {
-    it('should support configuration aspect in product search, cart, checkout and order history', () => {
-      configurationCpq.goToPDPage(POWERTOOLS, PROD_CODE_CAM);
-      configuration.clickOnAddToCartBtnOnPD();
-      configuration.clickOnViewCartBtnOnPD();
-
-      cy.get('cx-mini-cart .count').then((elem) => {
-        const numberOfCartItems = Number(elem.text());
-        cy.log('numberOfCartItems = ' + numberOfCartItems);
-        editConfigurationFromCartEntry(numberOfCartItems);
-        // Checkout
-        configurationCartCpq.clickOnProceedToCheckoutBtnInCart();
-        configurationCartCpq.checkoutB2B();
-        configurationCartCpq.selectOrderByOrderNumberAlias(POWERTOOLS);
-        configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_MAIN, 0);
-        configurationOverviewCpq.checkAttrDisplayed(
-          'Camera Body',
-          'Canon EOS 80D',
-          0
-        );
-      });
-    });
+      configurationCartCpq.checkAmountOfBundleItems(cartEntryIndex, 4);
+      configurationCartCpq.verifyCartCount(numberOfCartItems);
+    }
   });
-
-  function editConfigurationFromCartEntry(numberOfCartItems: number) {
-    //We assume the last product in the cart is the one we added
-    const cartEntryIndex: number = numberOfCartItems - 1;
-    type ovBundleInfo = {
-      name: string;
-      price?: string;
-      quantity?: string;
-    };
-    const ovBundleInfos: ovBundleInfo[] = [
-      {
-        name: 'SanDisk Extreme Pro 128GB SDXC',
-        price: '$100.00',
-        quantity: '1',
-      },
-      {
-        name: 'Canon RF 24-105mm f4L IS USM',
-        price: '$1,500.00',
-      },
-      {
-        name: 'LowePro Streetline SL 140',
-        price: '$110.00',
-      },
-    ];
-    configurationCartCpq.checkAmountOfBundleItems(
-      cartEntryIndex,
-      ovBundleInfos.length
-    );
-
-    ovBundleInfos.forEach((line, bundleItemIndex) => {
-      configurationCartCpq.checkBundleItemName(
-        cartEntryIndex,
-        bundleItemIndex,
-        line.name
-      );
-      configurationCartCpq.checkBundleItemPrice(
-        cartEntryIndex,
-        bundleItemIndex,
-        line.price
-      );
-      configurationCartCpq.checkBundleItemQuantity(
-        cartEntryIndex,
-        bundleItemIndex,
-        line.quantity
-      );
-    });
-    configurationCart.clickOnEditConfigurationLink(cartEntryIndex);
-
-    configuration.checkAttributeDisplayed(ATTR_CAM_BODY, RADGRP_PROD);
-    configurationCpq.selectAttributeAndWait(
-      ATTR_CAM_BODY,
-      RADGRP_PROD,
-      VAL_CAM_BODY_D850
-    );
-    configuration.checkValueSelected(
-      RADGRP_PROD,
-      ATTR_CAM_BODY,
-      VAL_CAM_BODY_D850
-    );
-    configurationCpq.selectAttributeAndWait(
-      ATTR_CAM_BODY,
-      RADGRP_PROD,
-      VAL_CAM_BODY_EOS80D
-    );
-    configuration.checkValueSelected(
-      RADGRP_PROD,
-      ATTR_CAM_BODY,
-      VAL_CAM_BODY_EOS80D
-    );
-    configurationCpq.selectAttributeAndWait(
-      ATTR_CAM_LEN,
-      CHKBOX_PROD,
-      VAL_CAM_LEN_SI
-    );
-    configuration.checkValueSelected(CHKBOX_PROD, ATTR_CAM_LEN, VAL_CAM_LEN_SI);
-    configurationCpq.clickAddToCartBtn();
-
-    configurationOverview.checkConfigOverviewPageDisplayed();
-    configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_MAIN, 0);
-    configurationOverviewCpq.checkAttrDisplayed(
-      'Camera Body',
-      'Canon EOS 80D',
-      0
-    );
-
-    configurationOverviewCpq.checkGroupHeaderDisplayed(GRP_CAM_ACC, 1);
-    configurationOverview.clickContinueToCartBtnOnOP();
-
-    configurationCartCpq.checkAmountOfBundleItems(cartEntryIndex, 4);
-    configurationCartCpq.verifyCartCount(numberOfCartItems);
-  }
 });
diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-configurator-cpq.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-configurator-cpq.ts
index 384c094a112..b4605a355e9 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-configurator-cpq.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-configurator-cpq.ts
@@ -131,10 +131,11 @@ export function checkAttributeHeaderDisplayed(
 export function selectProductCard(
   cardType: cardType,
   attributeName: string,
-  valueName: string
+  valueName: string,
+  cpqOverOcc?: boolean
 ) {
   const uiType: configuration.uiType = convertCardTypeToUiType(cardType);
-  selectAttributeAndWait(attributeName, uiType, valueName);
+  selectAttributeAndWait(attributeName, uiType, valueName, cpqOverOcc);
   configuration.checkValueSelected(uiType, attributeName, valueName);
 }
 
@@ -147,10 +148,11 @@ export function selectProductCard(
 export function deSelectProductCard(
   cardType: cardType,
   attributeName: string,
-  valueName: string
+  valueName: string,
+  cpqOverOcc?: boolean
 ) {
   const uiType: configuration.uiType = convertCardTypeToUiType(cardType);
-  selectAttributeAndWait(attributeName, uiType, valueName);
+  selectAttributeAndWait(attributeName, uiType, valueName, cpqOverOcc);
   checkValueNotSelected(uiType, attributeName, valueName);
 }
 
@@ -184,11 +186,14 @@ export function convertCardTypeToUiType(cardType: cardType) {
 export function selectAttributeAndWait(
   attributeName: string,
   uiType: configuration.uiType,
-  valueName: string
+  valueName: string,
+  cpqOverOcc?: boolean
 ): void {
   configuration.selectAttribute(attributeName, uiType, valueName);
   cy.wait('@updateConfig');
-  cy.wait('@readConfig');
+  if (!cpqOverOcc) {
+    cy.wait('@readConfig');
+  }
 }
 
 /**
@@ -230,7 +235,8 @@ export function setQuantity(
   uiType: configuration.uiType,
   quantity: number,
   attributeName: string,
-  valueName?: string
+  valueName?: string,
+  cpqOverOcc?: boolean
 ): void {
   let containerId = configuration.getAttributeId(attributeName, uiType);
   if (valueName) {
@@ -242,7 +248,9 @@ export function setQuantity(
   );
   configuration.checkUpdatingMessageNotDisplayed();
   cy.wait('@updateConfig');
-  cy.wait('@readConfig');
+  if (!cpqOverOcc) {
+    cy.wait('@readConfig');
+  }
 }
 
 /**