web/satellite: coupon status replaced with expiration date

WHAT:
coupon status view replaced with month and year of coupon expiration date

WHY:
better User experience

Change-Id: I67abe14418aeb876a524de5e3f3c027407343100

web/satellite/src/components/account/billing/freeCredits/CreditsItem.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="container">
         <p class="container__item">{{ creditType }}</p>
-        <p class="container__item">{{ creditsItem.status }}</p>
+        <p class="container__item">{{ expiration }}</p>
         <p class="container__item">{{ memoryAmount }} GB ({{ creditsItem.amount | centsToDollars }})</p>
         <p class="container__item available">{{ creditsItem.remaining | centsToDollars }}</p>
     </div>
@@ -16,6 +16,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import PaymentsHistoryItemDate from '@/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue';
 
 import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import { MONTHS_NAMES } from '@/utils/constants/date';
 
 @Component({
     components: {
@@ -48,6 +49,16 @@ export default class CreditsItem extends Vue {
 
         return Math.floor(this.creditsItem.amount / gbPrice);
     }
+
+    /**
+     * Returns formatted string of expiration date.
+     */
+    public get expiration(): string {
+        const monthNumber = this.creditsItem.end.getUTCMonth();
+        const year = this.creditsItem.end.getUTCFullYear();
+
+        return `${MONTHS_NAMES[monthNumber]} ${year}`;
+    }
 }
 </script>
 

web/satellite/src/components/account/billing/freeCredits/SortingHeader.vue

@@ -7,7 +7,7 @@
             <p class="sort-header-container__item__name">CREDIT TYPE</p>
         </div>
         <div class="sort-header-container__item">
-            <p class="sort-header-container__item__name">STATUS</p>
+            <p class="sort-header-container__item__name">EXPIRATION</p>
         </div>
         <div class="sort-header-container__item">
             <p class="sort-header-container__item__name">EARNED AMOUNT</p>

web/satellite/tests/unit/account/billing/freeCredits/CreditsItem.spec.ts

@@ -7,42 +7,18 @@ import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
 import { createLocalVue, mount } from '@vue/test-utils';
 
 const localVue = createLocalVue();
-const couponActive = new PaymentsHistoryItem('testId', 'desc', 275, 0, 'Active', '', new Date(1), new Date(1), PaymentsHistoryItemType.Coupon, 275);
-const couponExpired = new PaymentsHistoryItem('testId', 'desc', 275, 0, 'Expired', '', new Date(1), new Date(1), PaymentsHistoryItemType.Coupon, 0);
-const couponUsed = new PaymentsHistoryItem('testId', 'desc', 500, 0, 'Used', '', new Date(1), new Date(1), PaymentsHistoryItemType.Coupon, 0);
+const coupon = new PaymentsHistoryItem('testId', 'desc', 275, 0, 'Active', '', new Date(1), new Date(1), PaymentsHistoryItemType.Coupon, 275);
 
 localVue.filter('centsToDollars', (cents: number): string => {
     return `$${(cents / 100).toFixed(2)}`;
 });
 
 describe('CreditsItem', (): void => {
-    it('renders correctly if not expired', (): void => {
+    it('renders correctly', (): void => {
         const wrapper = mount(CreditsItem, {
             localVue,
             propsData: {
-                creditsItem: couponActive,
-            },
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('renders correctly if expired', (): void => {
-        const wrapper = mount(CreditsItem, {
-            localVue,
-            propsData: {
-                creditsItem: couponExpired,
-            },
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('renders correctly if used', (): void => {
-        const wrapper = mount(CreditsItem, {
-            localVue,
-            propsData: {
-                creditsItem: couponUsed,
+                creditsItem: coupon,
             },
         });
 

web/satellite/tests/unit/account/billing/freeCredits/__snapshots__/CreditsItem.spec.ts.snap

@@ -1,28 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CreditsItem renders correctly if expired 1`] = `
+exports[`CreditsItem renders correctly 1`] = `
 <div class="container">
   <p class="container__item">Trial Credit</p>
-  <p class="container__item">Expired</p>
-  <p class="container__item">50 GB ($2.75)</p>
-  <p class="container__item available">$0.00</p>
-</div>
-`;
-
-exports[`CreditsItem renders correctly if not expired 1`] = `
-<div class="container">
-  <p class="container__item">Trial Credit</p>
-  <p class="container__item">Active</p>
+  <p class="container__item">January 1970</p>
   <p class="container__item">50 GB ($2.75)</p>
   <p class="container__item available">$2.75</p>
 </div>
 `;
-
-exports[`CreditsItem renders correctly if used 1`] = `
-<div class="container">
-  <p class="container__item">Trial Credit</p>
-  <p class="container__item">Used</p>
-  <p class="container__item">90 GB ($5.00)</p>
-  <p class="container__item available">$0.00</p>
-</div>
-`;

web/satellite/tests/unit/account/billing/freeCredits/__snapshots__/SortingHeader.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`SortingHeader renders correctly 1`] = `
     <p class="sort-header-container__item__name">CREDIT TYPE</p>
   </div>
   <div class="sort-header-container__item">
-    <p class="sort-header-container__item__name">STATUS</p>
+    <p class="sort-header-container__item__name">EXPIRATION</p>
   </div>
   <div class="sort-header-container__item">
     <p class="sort-header-container__item__name">EARNED AMOUNT</p>