Add missing styles

Author: Matejk00

Diff for: integration-libs/opf/_index.scss

@@ -13,7 +13,8 @@ $opf-components-allowlist: cx-opf-payment-method-details,
   cx-opf-checkout-review-card, cx-opf-checkout-terms-and-conditions-alert,
   cx-opf-error-modal, cx-opf-cta-element, cx-opf-google-pay, cx-opf-apple-pay,
   cx-opf-quick-buy-buttons, cx-opf-b2b-checkout-payment-type,
-  cx-opf-b2b-checkout-review !default;
+  cx-opf-b2b-checkout-review, cx-opf-b2b-checkout-delivery-address,
+  cx-opf-b2b-checkout-cost-center !default;
 
 $skipComponentStyles: () !default;
 

Diff for: integration-libs/opf/checkout/styles/components/b2b/_index.scss

@@ -1,2 +1,4 @@
 @import './opf-b2b-checkout-payment-type';
 @import './opf-b2b-checkout-review';
+@import './opf-b2b-checkout-delivery-address';
+@import './opf-b2b-checkout-cost-center';

Diff for: integration-libs/opf/checkout/styles/components/b2b/_opf-b2b-checkout-cost-center.scss

@@ -0,0 +1,3 @@
+%cx-opf-b2b-checkout-cost-center {
+  @extend %cx-cost-center;
+}

Diff for: integration-libs/opf/checkout/styles/components/b2b/_opf-b2b-checkout-delivery-address.scss

@@ -0,0 +1,3 @@
+%cx-opf-b2b-checkout-delivery-address {
+  @extend %cx-delivery-address;
+}

Diff for: integration-libs/opf/checkout/styles/components/b2b/_opf-b2b-checkout-review.scss

@@ -1,166 +1,3 @@
 %cx-opf-b2b-checkout-review {
-  @include checkout-media-style();
-  margin-top: 1.5rem;
-
-  @include media-breakpoint-down(md) {
-    background-color: var(--cx-color-transparent);
-  }
-
-  h3 {
-    padding-bottom: 1rem;
-    margin-bottom: 0;
-    font-size: 1.15rem;
-  }
-
-  cx-opf-checkout-billing-address-form,
-  cx-opf-checkout-payments,
-  .cx-opf-payment-wrapper,
-  .cx-opf-terms-and-conditions {
-    display: block;
-    margin-bottom: 2rem;
-    border: 1px solid #d3d6db;
-    padding: 1.75rem 1.75rem;
-    border-radius: 10px;
-    background-color: #ffffff;
-  }
-
-  .cx-card .cx-card-title {
-    font-size: var(--cx-font-size, 1.125rem);
-    line-height: var(--cx-line-height, 1.2222222222);
-    font-weight: var(--cx-font-weight-normal);
-    margin-bottom: 0.5rem;
-  }
-
-  .cx-opf-terms-and-conditions {
-    margin-bottom: 2rem;
-
-    .form-check,
-    .form-group {
-      margin-bottom: 0;
-    }
-  }
-
-  .cx-review-cart-item {
-    padding: 0;
-  }
-
-  .cx-review-cart-total {
-    font-size: var(--cx-font-size, 1.125rem);
-    font-weight: var(--cx-font-weight-bold);
-    line-height: var(--cx-line-height, 1.2222222222);
-    padding-top: 1rem;
-    padding-bottom: 1.25rem;
-  }
-
-  .cx-items-to-ship-label {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 1rem 2rem;
-    font-weight: var(--cx-font-weight-semi);
-    height: 65px;
-    background: #f1f1f1;
-
-    @include media-breakpoint-down(md) {
-      background: #d3d6db;
-    }
-  }
-
-  .cx-shipping-and-delivery-info-cards {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-    flex-direction: row;
-
-    @include media-breakpoint-down(md) {
-      flex-direction: column;
-    }
-
-    .card-body {
-      padding: 0;
-    }
-
-    .cx-review-summary-card {
-      display: flex;
-      flex: 1;
-      position: relative;
-      border: 1px solid #d3d6db;
-      border-radius: 10px;
-      padding: 1.75rem;
-      background-color: #ffffff;
-
-      button {
-        position: absolute;
-        top: 1.75rem;
-        right: 1.75rem;
-        color: var(--cx-color-primary);
-        outline: none;
-        border: none;
-        background: none;
-        padding: 0;
-        cursor: pointer;
-        margin: 0;
-
-        cx-icon {
-          color: inherit;
-        }
-      }
-
-      cx-card {
-        flex-grow: 1;
-        padding: 0 2rem 0 0;
-      }
-    }
-
-    .cx-card-title {
-      font-weight: var(--cx-font-weight-semi);
-    }
-  }
-
-  > section > cx-opf-checkout-terms-and-conditions-alert {
-    display: none;
-    @include media-breakpoint-down(md) {
-      display: block;
-    }
-  }
-
-  .cx-opf-review-card-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    margin-bottom: 2rem;
-
-    > *:last-child:nth-child(odd) {
-      flex: 1 1 100%;
-    }
-  }
-
-  %edit-button-styles {
-    position: absolute;
-    top: 1.75rem;
-    right: 1.75rem;
-    color: var(--cx-color-primary);
-    outline: none;
-    border: none;
-    background: none;
-    padding: 0;
-    cursor: pointer;
-    margin: 0;
-
-    cx-icon {
-      color: inherit;
-    }
-  }
-
-  cx-opf-checkout-billing-address-form {
-    position: relative;
-
-    button {
-      @extend %edit-button-styles;
-    }
-
-    cx-card {
-      padding: 0 2rem 0 0;
-    }
-  }
+  @extend %cx-opf-checkout-payment-and-review;
 }