refactor(foxy-transaction-card): improve cit/mit labelling ui

Foxy · Oct 10, 2023 · 55e87d0 · 55e87d0
1 parent 1011a3c
commit 55e87d0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 21 deletions.
diff --git a/src/elements/public/TransactionCard/TransactionCard.ts b/src/elements/public/TransactionCard/TransactionCard.ts
@@ -46,7 +46,7 @@ class TransactionCard extends Base<Data> {
         <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>
           ${hasTotal || hasStatus
             ? html`
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between gap-s">
                   ${hasTotal ? this.__renderTotal() : ''} ${hasStatus ? this.__renderStatus() : ''}
                 </div>
               `
@@ -108,9 +108,12 @@ class TransactionCard extends Base<Data> {
         ? 'new_subscription'
         : 'new_order';
 
+      const source = this.data?.source?.substring(0, 3).toUpperCase();
+
       content = html`
-        <foxy-i18n lang=${this.lang} key="type_${type}" ns=${this.ns}></foxy-i18n>
-        <span> &bull; </span>
+        ${source ? html`<span title=${this.t(`source_${source}`)}>${source}</span>` : ''}
+        <foxy-i18n class="truncate" lang=${this.lang} key="type_${type}" ns=${this.ns}></foxy-i18n>
+        <span>&bull;</span>
         <foxy-i18n
           options=${JSON.stringify({ amount, currencyDisplay })}
           lang=${this.lang}
@@ -124,9 +127,9 @@ class TransactionCard extends Base<Data> {
     }
 
     return html`
-      <div data-testid="total">
+      <div class="min-w-0" data-testid="total">
         ${this.renderTemplateOrSlot('total:before')}
-        <div class="font-medium truncate">${content}</div>
+        <div class="font-medium flex items-center gap-xs">${content}</div>
         ${this.renderTemplateOrSlot('total:after')}
       </div>
     `;
@@ -148,21 +151,12 @@ class TransactionCard extends Base<Data> {
     };
 
     const status = this.data?.status || 'completed';
-    const source = this.data?.source.substring(0, 3).toUpperCase();
 
     return html`
-      <div data-testid="status">
+      <div class="flex-shrink-0" data-testid="status">
         ${this.renderTemplateOrSlot('status:before')}
 
         <div class="text-tertiary text-s flex items-center space-x-s">
-          ${source
-            ? html`
-                <div class="bg-contrast-5 rounded-s px-xs" title=${this.t(`source_${source}`)}>
-                  ${source}
-                </div>
-              `
-            : ''}
-
           <foxy-i18n
             options=${JSON.stringify({ value: this.data?.transaction_date })}
             lang=${this.lang}

diff --git a/src/static/translations/transaction-card/en.json b/src/static/translations/transaction-card/en.json
@@ -17,12 +17,12 @@
   "transaction_summary_plural": "{{most_expensive_item.name}} and {{count_minus_one}} more",
   "transaction_verified": "Verified",
   "transaction_voided": "Voided",
-  "type_subscription_cancellation": "Subscription cancellation",
-  "type_subscription_modification": "Subscription change",
-  "type_subscription_renewal": "Subscription renewal",
-  "type_updateinfo": "Profile update",
-  "type_new_order": "New order",
-  "type_new_subscription": "New subscription",
+  "type_subscription_cancellation": "Cancellation",
+  "type_subscription_modification": "Modification",
+  "type_subscription_renewal": "Renewal",
+  "type_updateinfo": "Update",
+  "type_new_order": "Order",
+  "type_new_subscription": "Subscription",
   "source_MIT": "This transaction was initiated by merchant",
   "source_CIT": "This transaction was initiated by customer",
   "spinner": {