web/satellite: fix clicks on project/billing history tables

This change fixes an issue where clicking on the name of a project will
perform no action. And another where clicking "Invoice Pdf" on billing
history table will download twice.

Issue: https://github.com/storj/storj/issues/5698

Change-Id: I1a05b994d4855da5be309b1b6d4eb4c70f6f946b

web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue

@@ -25,13 +25,19 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue';
 
-import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import {
+    PaymentsHistoryItem,
+    PaymentsHistoryItemStatus,
+    PaymentsHistoryItemType,
+} from '@/types/payments';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify, useStore } from '@/utils/hooks';
 
-import BillingHistoryHeader from '@/components/account/billing/billingTabs/BillingHistoryHeader.vue';
-import BillingHistoryItem from '@/components/account/billing/billingTabs/BillingHistoryItem.vue';
+import BillingHistoryHeader
+    from '@/components/account/billing/billingTabs/BillingHistoryHeader.vue';
+import BillingHistoryItem
+    from '@/components/account/billing/billingTabs/BillingHistoryItem.vue';
 import VTable from '@/components/common/VTable.vue';
 
 const store = useStore();
@@ -47,7 +53,8 @@ async function fetchHistory(): Promise<void> {
 
 const historyItems = computed((): PaymentsHistoryItem[] => {
     return store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
-        return item.status !== 'draft' && item.status !== '' && (item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge);
+        return item.status !== PaymentsHistoryItemStatus.Draft && item.status !== PaymentsHistoryItemStatus.Empty
+            && (item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge);
     });
 });
 

web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue

@@ -37,7 +37,7 @@
                 </p>
             </th>
             <th class="align-left data tablet-laptop">
-                <a :href="item.link" download>Invoice PDF</a>
+                <a :href="item.link" target="_blank" rel="noreferrer noopener" download>Invoice PDF</a>
             </th>
         </v-fragment>
     </tr>
@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { Fragment as VFragment } from 'vue-fragment';
 
-import { PaymentsHistoryItem } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useResize } from '@/composables/resize';
@@ -59,7 +59,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 const props = withDefaults(defineProps<{
     item: PaymentsHistoryItem;
 }>(), {
-    item: () => new PaymentsHistoryItem('', '', 0, 0, '', '', new Date(), new Date(), 0, 0),
+    item: () => new PaymentsHistoryItem('', '', 0, 0, PaymentsHistoryItemStatus.Pending, '', new Date(), new Date(), 0, 0),
 });
 
 const { isMobile, isTablet } = useResize();
@@ -67,8 +67,9 @@ const { isMobile, isTablet } = useResize();
 function downloadInvoice() {
     analytics.eventTriggered(AnalyticsEvent.INVOICE_DOWNLOADED);
 
-    if (isMobile || isTablet)
+    if (isMobile.value || isTablet.value) {
         window.open(props.item.link, '_blank', 'noreferrer');
+    }
 }
 </script>
 

web/satellite/src/components/common/TableItem.vue

@@ -75,7 +75,7 @@ const props = withDefaults(defineProps<{
     item: () => ({}),
     onClick: () => {},
     hideGuide: () => {},
-    onPrimaryClick: (_) => {},
+    onPrimaryClick: undefined,
 });
 
 const emit = defineEmits(['selectChange']);
@@ -102,7 +102,7 @@ function onChange(value: boolean): void {
 }
 
 function showBucketGuide(index: number): boolean {
-    return (props.itemType?.toLowerCase() === 'bucket') && (index === 0) && !!props.showGuide;
+    return (props.itemType?.toLowerCase() === 'bucket') && (index === 0) && props.showGuide;
 }
 
 function cellContentClicked(cellIndex: number, event: Event) {

web/satellite/src/types/payments.ts

@@ -280,6 +280,16 @@ export enum PaymentsHistoryItemStatus {
      * Status showed if transaction is pending.
      */
     Pending = 'pending',
+
+    /**
+     * Status showed if transaction has not finalized yet.
+     */
+    Draft = 'draft',
+
+    /**
+     * This is to filter when the backend sends an item with an empty status.
+     */
+    Empty = '',
 }
 
 /**