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;