fix: hide payment info card when empty (#17880)

CXSPA-4069 Payment Info card needs to be hidden when it contains no values, it is a common use case of OPF feature.
SAP · Oct 5, 2023 · b1ee25b · b1ee25b
1 parent 68705ca
commit b1ee25b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 16 deletions.
diff --git a/...s/order/components/order-details/order-detail-billing/order-detail-billing.component.html b/...s/order/components/order-details/order-detail-billing/order-detail-billing.component.html
@@ -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>
diff --git a/...rder/components/order-details/order-detail-billing/order-detail-billing.component.spec.ts b/...rder/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/...ibs/order/components/order-details/order-detail-billing/order-detail-billing.component.ts b/...ibs/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
@@ -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>
diff --git 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;