web/satellite: billing history item's expiration countdown fixed

related jira issue:
https://storjlabs.atlassian.net/browse/USR-774

Change-Id: I4629b3ea24ba4148f2faf4030d46fb5adad192fe

web/satellite/src/components/account/billing/billingHistory/BillingHistoryItemDate.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import { BillingHistoryItemType } from '@/types/payments';
+import { BillingHistoryItemStatus, BillingHistoryItemType } from '@/types/payments';
 
 @Component
 export default class BillingHistoryDate extends Vue {
@@ -34,6 +34,8 @@ export default class BillingHistoryDate extends Vue {
     private readonly start: Date;
     @Prop({default: 0})
     private readonly type: BillingHistoryItemType;
+    @Prop({default: ''})
+    private readonly status: BillingHistoryItemStatus;
 
     private readonly expirationTimeInSeconds: number;
     private nowInSeconds = Math.trunc(new Date().getTime() / 1000);
@@ -50,6 +52,10 @@ export default class BillingHistoryDate extends Vue {
         this.expirationTimeInSeconds = Math.trunc(new Date(this.expiration).getTime() / 1000);
         this.isExpired = (this.expirationTimeInSeconds - this.nowInSeconds) < 0;
 
+        if (this.type === BillingHistoryItemType.Transaction) {
+            this.isExpired = this.isTransactionCompleted;
+        }
+
         this.ready();
     }
 
@@ -81,12 +87,19 @@ export default class BillingHistoryDate extends Vue {
         return Math.trunc((this.expirationTimeInSeconds - this.nowInSeconds) / 3600) % 24;
     }
 
+    /**
+     * Indicates if transaction status is completed, paid or cancelled.
+     */
+    private get isTransactionCompleted(): boolean {
+        return this.status !== BillingHistoryItemStatus.Pending;
+    }
+
     /**
      * Starts expiration timer if item is not expired.
      */
     private ready(): void {
         this.intervalID = window.setInterval(() => {
-            if ((this.expirationTimeInSeconds - this.nowInSeconds) < 0) {
+            if ((this.expirationTimeInSeconds - this.nowInSeconds) < 0 || this.isTransactionCompleted) {
                 this.isExpired = true;
                 clearInterval(this.intervalID);
 

web/satellite/src/components/account/billing/billingHistory/BillingItem.vue

@@ -8,6 +8,7 @@
             :start="billingItem.start"
             :expiration="billingItem.end"
             :type="billingItem.type"
+            :status="billingItem.status"
         />
         <p class="container__item description">{{ billingItem.description }}</p>
         <p class="container__item status">{{ billingItem.formattedStatus }}</p>

web/satellite/tests/unit/account/billing/billingHistory/BillingHistoryItemDate.spec.ts

@@ -3,7 +3,7 @@
 
 import BillingHistoryItemDate from '@/components/account/billing/billingHistory/BillingHistoryItemDate.vue';
 
-import { BillingHistoryItemType } from '@/types/payments';
+import { BillingHistoryItemStatus, BillingHistoryItemType } from '@/types/payments';
 import { createLocalVue, mount } from '@vue/test-utils';
 
 const localVue = createLocalVue();
@@ -52,7 +52,7 @@ describe('BillingHistoryItemDate', (): void => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    it('renders correctly if transaction not expired', (): void => {
+    it('renders correctly if transaction is not expired', (): void => {
         const startDate = new Date(2019, 5, 5, 5, 5, 5, 5);
         const expirationDate = new Date(2019, 5, 5, 6, 5, 5, 5);
         const testTimeNow = expirationDate.getTime();
@@ -65,6 +65,7 @@ describe('BillingHistoryItemDate', (): void => {
                 expiration: expirationDate,
                 start: startDate,
                 type: BillingHistoryItemType.Transaction,
+                status: BillingHistoryItemStatus.Pending,
             },
         });
 
@@ -81,6 +82,7 @@ describe('BillingHistoryItemDate', (): void => {
                 expiration: expirationDate,
                 start: startDate,
                 type: BillingHistoryItemType.Transaction,
+                status: BillingHistoryItemStatus.Completed,
             },
         });
 

web/satellite/tests/unit/account/billing/billingHistory/__snapshots__/BillingHistoryItemDate.spec.ts.snap

@@ -18,7 +18,7 @@ exports[`BillingHistoryItemDate renders correctly if transaction expired 1`] = `
 </div>
 `;
 
-exports[`BillingHistoryItemDate renders correctly if transaction not expired 1`] = `
+exports[`BillingHistoryItemDate renders correctly if transaction is not expired 1`] = `
 <div class="countdown-container">
   <div class="row">
     <p>Expires in </p>