diff --git a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.html b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.html
index 52743e8a3c4..d37c9714b43 100644
--- a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.html
+++ b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.html
@@ -1,15 +1,38 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts
index 407ac1a4a57..49fa2ce9403 100644
--- a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts
+++ b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts
@@ -97,4 +97,15 @@ describe('OrderDetailBillingComponent', () => {
]);
});
});
+
+ it('should be false when isPaymentInfoCardFull is called with partial card info', () => {
+ expect(
+ component.isPaymentInfoCardFull({
+ ...mockPaymentDetails,
+ expiryMonth: '',
+ })
+ ).toBeFalsy();
+
+ expect(component.isPaymentInfoCardFull(mockPaymentDetails)).toBeTruthy();
+ });
});
diff --git a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts
index 7bf7c1f335b..a55bed98769 100644
--- a/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts
+++ b/feature-libs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts
@@ -8,12 +8,12 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PaymentDetails } from '@spartacus/cart/base/root';
import { TranslationService } from '@spartacus/core';
import {
- billingAddressCard,
Order,
+ billingAddressCard,
paymentMethodCard,
} from '@spartacus/order/root';
import { Card } from '@spartacus/storefront';
-import { combineLatest, Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { OrderDetailsService } from '../order-details.service';
@@ -55,4 +55,10 @@ export class OrderDetailBillingComponent {
)
);
}
+
+ isPaymentInfoCardFull(payment: PaymentDetails): boolean {
+ return (
+ !!payment?.cardNumber && !!payment?.expiryMonth && !!payment?.expiryYear
+ );
+ }
}
diff --git a/feature-libs/order/components/order-details/order-overview/order-overview.component.html b/feature-libs/order/components/order-details/order-overview/order-overview.component.html
index 4d850012f8c..bb63c9af00d 100644
--- a/feature-libs/order/components/order-details/order-overview/order-overview.component.html
+++ b/feature-libs/order/components/order-details/order-overview/order-overview.component.html
@@ -181,7 +181,17 @@
-
+
+
+
+
+
+
diff --git a/feature-libs/order/styles/components/order-overview/_order-overview.scss b/feature-libs/order/styles/components/order-overview/_order-overview.scss
index 9ea09a60faa..26e9faba703 100644
--- a/feature-libs/order/styles/components/order-overview/_order-overview.scss
+++ b/feature-libs/order/styles/components/order-overview/_order-overview.scss
@@ -22,8 +22,10 @@
flex-grow: 1;
@include media-breakpoint-up(lg) {
- border-inline-end: 1px solid var(--cx-color-text);
- margin-inline-end: 10rem;
+ @include forVersion(1, 6.5) {
+ border-inline-end: 1px solid var(--cx-color-text);
+ margin-inline-end: 10rem;
+ }
cx-card {
padding: 10px 0;
@@ -106,6 +108,13 @@
flex-grow: 1;
margin-bottom: 0;
+ @include forVersion(6.6) {
+ @include media-breakpoint-up(lg) {
+ border-inline-start: 1px solid var(--cx-color-text);
+ padding-inline-start: 10rem;
+ }
+ }
+
.cx-review-summary {
flex-direction: column;