Rearrange the card tiles

SAP · Oct 19, 2023 · 5d01a05 · 5d01a05
1 parent be7be9a
commit 5d01a05
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 42 deletions.
diff --git a/feature-libs/quote/assets/translations/en/quote.i18n.ts b/feature-libs/quote/assets/translations/en/quote.i18n.ts
@@ -120,15 +120,15 @@ export const quote = {
         status: 'Status',
         information: 'Quote Information',
         name: 'Name',
-        created: 'Created',
-        lastUpdated: 'Last Updated',
+        description: 'Description',
+        charactersLeft: 'characters left: {{count}}',
+        priceAndExpiry: 'Price & Expiry',
         estimatedTotal: 'Estimated Total',
         total: 'Total',
-        description: 'Description',
-        estimateAndDate: 'Estimated & Date',
-        update: 'Update',
         expirationTime: 'Expiry Date',
-        charactersLeft: 'characters left: {{count}}',
+        createdAndUpdated: 'Created & Updated',
+        createdDate: 'Created',
+        lastUpdatedDate: 'Last Updated',
       },
       sellerEdit: {
         apply: 'Apply',

diff --git a/feature-libs/quote/components/header/overview/quote-header-overview.component.html b/feature-libs/quote/components/header/overview/quote-header-overview.component.html
@@ -40,19 +40,19 @@ <h3 class="cx-status">
     <div class="cx-summary-card">
       <cx-card
         [content]="
-          getEstimatedTotalAndDate(
+          getEstimatedTotalAndExpiryDate(
             quoteDetails,
-            quoteDetails.creationTime | cxDate
+            quoteDetails.expirationTime | cxDate
           ) | async
         "
       ></cx-card>
     </div>
     <div class="cx-summary-card">
       <cx-card
         [content]="
-          getCardMetadata(
-            quoteDetails.updatedTime | cxDate,
-            quoteDetails.expirationTime | cxDate
+          getCreatedAndUpdatedDates(
+            quoteDetails.creationTime | cxDate,
+            quoteDetails.updatedTime | cxDate
           ) | async
         "
       ></cx-card>

diff --git a/feature-libs/quote/components/header/overview/quote-header-overview.component.spec.ts b/feature-libs/quote/components/header/overview/quote-header-overview.component.spec.ts
@@ -403,52 +403,54 @@ describe('QuoteHeaderOverviewComponent', () => {
       expect(result).toEqual(expected);
     });
 
-    it('should the card content that represents an empty estimated and date information', () => {
+    it('should the card content that represents an empty estimated total and expiry date information', () => {
       fixture.detectChanges();
 
       const expected = {
-        title: 'quote.header.overview.estimateAndDate',
+        title: 'quote.header.overview.priceAndExpiry',
         paragraphs: [
           {
             title: 'quote.header.overview.estimatedTotal',
             text: [mockQuote.totalPrice.formattedValue],
           },
           {
-            title: 'quote.header.overview.created',
+            title: 'quote.header.overview.expirationTime',
             text: ['-'],
           },
         ],
       };
 
       component
-        .getEstimatedTotalAndDate(mockQuote, undefined)
+        .getEstimatedTotalAndExpiryDate(mockQuote, undefined)
         .subscribe((result) => {
           expect(result).toEqual(expected);
         });
     });
 
-    it('should retrieve the card content that represents an empty update information', () => {
+    it('should retrieve the card content that represents an empty created and updated dates information', () => {
       mockQuote.updatedTime = undefined;
       mockQuote.expirationTime = undefined;
       fixture.detectChanges();
 
       const expected = {
-        title: 'quote.header.overview.update',
+        title: 'quote.header.overview.createdAndUpdated',
         paragraphs: [
           {
-            title: 'quote.header.overview.lastUpdated',
+            title: 'quote.header.overview.createdDate',
             text: ['-'],
           },
           {
-            title: 'quote.header.overview.expirationTime',
+            title: 'quote.header.overview.lastUpdatedDate',
             text: ['-'],
           },
         ],
       };
 
-      component.getCardMetadata(undefined, undefined).subscribe((result) => {
-        expect(result).toEqual(expected);
-      });
+      component
+        .getCreatedAndUpdatedDates(undefined, undefined)
+        .subscribe((result) => {
+          expect(result).toEqual(expected);
+        });
     });
   });
 

diff --git a/feature-libs/quote/components/header/overview/quote-header-overview.component.ts b/feature-libs/quote/components/header/overview/quote-header-overview.component.ts
@@ -146,24 +146,22 @@ export class QuoteHeaderOverviewComponent {
   }
 
   /**
-   * Retrieves the card content that represents the estimated total and date information.
+   * Retrieves the card content that represents the estimated total and expiry date information.
    *
    * @param {Quote} quote - Quote
-   * @param {any} createdDate - Created date
+   * @param {any} expiryDate -  Expiry date
    * @returns {Observable<Card>} - Card content
    */
-  getEstimatedTotalAndDate(
+  getEstimatedTotalAndExpiryDate(
     quote: Quote,
-    createdDate?: string | null
+    expiryDate?: string | null
   ): Observable<Card> {
     const totalPrice =
       this.getTotalPrice(quote) ?? this.getTotalPriceDescription(quote);
     return combineLatest([
-      this.translationService.translate(
-        'quote.header.overview.estimateAndDate'
-      ),
+      this.translationService.translate('quote.header.overview.priceAndExpiry'),
       this.translationService.translate('quote.header.overview.estimatedTotal'),
-      this.translationService.translate('quote.header.overview.created'),
+      this.translationService.translate('quote.header.overview.expirationTime'),
     ]).pipe(
       map(([firstTitle, secondTitle, thirdTitle]) => {
         return {
@@ -175,7 +173,7 @@ export class QuoteHeaderOverviewComponent {
             },
             {
               title: thirdTitle,
-              text: [createdDate ?? QuoteHeaderOverviewComponent.NO_DATA],
+              text: [expiryDate ?? QuoteHeaderOverviewComponent.NO_DATA],
             },
           ],
         };
@@ -184,32 +182,36 @@ export class QuoteHeaderOverviewComponent {
   }
 
   /**
-   * Retrieves the card content that represents the update information.
+   * Retrieves the card content that represents the created and last updated dates.
    *
-   * @param {string} lastUpdated - last updated time
-   * @param {string} expirationTime - expiration time
+   * @param {string} createdDate - Created date
+   * @param {string} lastUpdatedDate - Last updated date
    * @returns {Observable<Card>} - Card content
    */
-  getCardMetadata(
-    lastUpdated?: string | null,
-    expirationTime?: string | null
+  getCreatedAndUpdatedDates(
+    createdDate?: string | null,
+    lastUpdatedDate?: string | null
   ): Observable<Card> {
     return combineLatest([
-      this.translationService.translate('quote.header.overview.update'),
-      this.translationService.translate('quote.header.overview.lastUpdated'),
-      this.translationService.translate('quote.header.overview.expirationTime'),
+      this.translationService.translate(
+        'quote.header.overview.createdAndUpdated'
+      ),
+      this.translationService.translate('quote.header.overview.createdDate'),
+      this.translationService.translate(
+        'quote.header.overview.lastUpdatedDate'
+      ),
     ]).pipe(
       map(([firstTitle, secondTitle, thirdTitle]) => {
         return {
           title: firstTitle,
           paragraphs: [
             {
               title: secondTitle,
-              text: [lastUpdated ?? QuoteHeaderOverviewComponent.NO_DATA],
+              text: [createdDate ?? QuoteHeaderOverviewComponent.NO_DATA],
             },
             {
               title: thirdTitle,
-              text: [expirationTime ?? QuoteHeaderOverviewComponent.NO_DATA],
+              text: [lastUpdatedDate ?? QuoteHeaderOverviewComponent.NO_DATA],
             },
           ],
         };