Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: hide payment info card when empty #17880

Merged
merged 9 commits into from
Oct 5, 2023
Merged

fix: hide payment info card when empty #17880

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
31b1f28
add conditions to display selector
FollowTheFlo Sep 26, 2023
4b2929e
add VersionFlag & FeatureFlag
FollowTheFlo Sep 27, 2023
01c35f1
add unit test
FollowTheFlo Sep 27, 2023
68e3ea1
Merge branch 'develop-6.5.x' into feature/CXSPA-4069
FollowTheFlo Sep 27, 2023
a56d31a
switch version - remove obsolete code
FollowTheFlo Oct 2, 2023
4565937
update version to 6.6
FollowTheFlo Oct 2, 2023
af40c34
Merge branch 'develop-6.6.x' into feature/CXSPA-4069
FollowTheFlo Oct 2, 2023
534661a
adjust version flag from 6.5 to 6.6
FollowTheFlo Oct 4, 2023
f1347cf
Merge branch 'develop-6.6.x' into feature/CXSPA-4069
FollowTheFlo Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 34 additions & 11 deletions ...s/order/components/order-details/order-detail-billing/order-detail-billing.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,38 @@
<div class="cx-order-items" *ngIf="order$ | async as order">
<div class="cx-review-summary" *ngIf="order.paymentInfo as paymentDetails">
<div class="cx-review-summary-card cx-review-summary-payment-card">
<cx-card
[content]="getPaymentMethodCard(paymentDetails) | async"
></cx-card>
</div>

<div class="cx-review-summary-card cx-review-summary-payment-card">
<cx-card
[content]="getBillingAddressCard(paymentDetails) | async"
></cx-card>
</div>
<ng-container *cxFeatureLevel="'!6.6'">
<div class="cx-review-summary-card cx-review-summary-payment-card">
<cx-card
[content]="getPaymentMethodCard(paymentDetails) | async"
></cx-card>
</div>
</ng-container>
<ng-container *cxFeatureLevel="'6.6'">
<div
class="cx-review-summary-card cx-review-summary-payment-card"
*ngIf="isPaymentInfoCardFull(paymentDetails)"
>
<cx-card
[content]="getPaymentMethodCard(paymentDetails) | async"
></cx-card>
</div>
</ng-container>
<ng-container *cxFeatureLevel="'!6.6'">
<div class="cx-review-summary-card cx-review-summary-payment-card">
<cx-card
[content]="getBillingAddressCard(paymentDetails) | async"
></cx-card>
</div>
</ng-container>
<ng-container *cxFeatureLevel="'6.6'">
<div
class="cx-review-summary-card cx-review-summary-payment-card"
*ngIf="paymentDetails?.billingAddress"
>
<cx-card
[content]="getBillingAddressCard(paymentDetails) | async"
></cx-card>
</div>
</ng-container>
</div>
</div>
11 changes: 11 additions & 0 deletions ...rder/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
10 changes: 8 additions & 2 deletions ...ibs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -55,4 +55,10 @@ export class OrderDetailBillingComponent {
)
);
}

isPaymentInfoCardFull(payment: PaymentDetails): boolean {
return (
!!payment?.cardNumber && !!payment?.expiryMonth && !!payment?.expiryYear
);
}
}
12 changes: 11 additions & 1 deletion feature-libs/order/components/order-details/order-overview/order-overview.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,17 @@
</ng-template>
</ng-container>
</div>
<cx-order-detail-billing></cx-order-detail-billing>
<ng-container *cxFeatureLevel="'!6.6'">
<cx-order-detail-billing></cx-order-detail-billing>
</ng-container>
<ng-container *cxFeatureLevel="'6.6'">
<cx-order-detail-billing
*ngIf="
isPaymentInfoCardFull(order?.paymentInfo) ||
order?.paymentInfo?.billingAddress
"
></cx-order-detail-billing>
</ng-container>
</div>
</ng-container>
</div>
13 changes: 11 additions & 2 deletions feature-libs/order/styles/components/order-overview/_order-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

legacy code -> up to 6.5
new code below (line 111) -> from 6.6

border-inline-end: 1px solid var(--cx-color-text);
margin-inline-end: 10rem;
}

cx-card {
padding: 10px 0;
Expand Down Expand Up @@ -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;

Expand Down
Loading