From 0f3da7f8950d3ad7451edee1dc648f9b2dbd53d5 Mon Sep 17 00:00:00 2001
From: cl-mitch <104023143+cl-mitch@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:03:26 -0500
Subject: [PATCH] web/satellite: Added token transaction history to new payment
 methods flow (#4977)

Added code for SortingHeader2.vue, VerticalArrows.vue, and TokenTransactionItem.vue. This code is for some of the stubbed components on PaymentMethodsTab.vue.
---
 .../SortingHeader2.vue                        | 139 ++++++++++++++++-
 .../paymentMethods/TokenTransactionItem.vue   | 140 +++++++++++++++++-
 .../src/components/common/VerticalArrows.vue  |  18 ++-
 .../__snapshots__/VerticalArrows.spec.ts.snap |   6 +-
 .../SortingListHeader.spec.ts.snap            |   6 +-
 5 files changed, 292 insertions(+), 17 deletions(-)

diff --git a/web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue b/web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue
index 3d5149774..e44a4213e 100644
--- a/web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue
+++ b/web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue
@@ -2,12 +2,147 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="sort-header-container" />
+    <div class="sort-header-container">
+        <div
+            class="sort-header-container__item date"
+            @click="sortFunction('date')"
+        >
+            <p class="sort-header-container__item__name">DATE</p>
+            <VerticalArrows
+                :is-active="arrowController.date"
+                :direction="dateSortDirection"
+            />
+        </div>
+        <div class="sort-header-container__item transaction">
+            <p class="sort-header-container__item__name">TRANSACTION</p>
+        </div>
+        <div
+            class="sort-header-container__item amount"
+            @click="sortFunction('amount')"
+        >
+            <p class="sort-header-container__item__name">AMOUNT(USD)</p>
+            <VerticalArrows
+                :is-active="arrowController.amount"
+                :direction="amountSortDirection"
+            />
+        </div>
+        <div
+            class="sort-header-container__item status"
+            @click="sortFunction('status')"
+        >
+            <p class="sort-header-container__item__name">STATUS</p>
+            <VerticalArrows
+                :is-active="arrowController.status"
+                :direction="statusSortDirection"
+            />
+        </div>
+        <div class="sort-header-container__item details">
+            <p class="sort-header-container__item__name">DETAILS</p>
+        </div>
+    </div>
 </template>
 
 <script lang="ts">
-import { Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'vue-property-decorator';
 
+import VerticalArrows from '@/components/common/VerticalArrows.vue';
+
+import { SortDirection } from '@/types/common';
+
+// @vue/component
+@Component({
+    components: {
+        VerticalArrows,
+    },
+})
 export default class SortingHeader2 extends Vue {
+
+    public DATE_DIRECTION = 'date-descending'
+    public AMOUNT_DIRECTION = 'amount-descending'
+    public STATUS_DIRECTION = 'status-descending'
+
+    public dateSortDirection: SortDirection = SortDirection.ASCENDING;
+    public amountSortDirection: SortDirection = SortDirection.ASCENDING;
+    public statusSortDirection: SortDirection = SortDirection.ASCENDING;
+
+    public arrowController: {date: boolean, amount: boolean, status: boolean} = {date: false, amount: false, status: false}
+
+    /**
+     * sorts table by date
+     */ 
+    public sortFunction(key): void {
+        switch (key) {
+        case 'date':
+            this.$emit('sortFunction', this.DATE_DIRECTION);
+            this.DATE_DIRECTION = this.DATE_DIRECTION === 'date-ascending' ? 'date-descending' : 'date-ascending';
+            this.arrowController = {date: true, amount: false, status: false};
+            this.dateSortDirection = this.dateSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
+            break;
+        case 'amount':
+            this.$emit('sortFunction', this.AMOUNT_DIRECTION);
+            this.AMOUNT_DIRECTION = this.AMOUNT_DIRECTION === 'amount-ascending' ? 'amount-descending' : 'amount-ascending';
+            this.arrowController = {date: false, amount: true, status: false};
+            this.amountSortDirection = this.amountSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
+            break
+        case 'status':
+            this.$emit('sortFunction', this.STATUS_DIRECTION);
+            this.STATUS_DIRECTION = this.STATUS_DIRECTION === 'status-ascending' ? 'status-descending' : 'status-ascending';
+            this.arrowController = {date: false, amount: false, status: true};
+            this.statusSortDirection = this.statusSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
+            break;
+        default:
+            break;
+        }
+    }
 }
 </script>
+
+<style scoped lang="scss">
+    .sort-header-container {
+        display: flex;
+        width: 100%;
+        padding: 16px 0;
+
+        &__item {
+            text-align: left;
+
+            &__name {
+                font-family: 'font_medium', sans-serif;
+                font-size: 14px;
+                line-height: 19px;
+                color: #adadad;
+                margin: 0;
+            }
+        }
+    }
+
+    .date,
+    .amount,
+    .status {
+        display: flex;
+        cursor: pointer;
+    }
+
+    .date {
+        width: 15%;
+    }
+
+    .transaction {
+        width: 35%;
+    }
+
+    .status {
+        width: 15%;
+    }
+
+    .amount {
+        width: 15%;
+        margin: 0;
+    }
+
+    .details {
+        text-align: left;
+        margin: 0;
+        width: 20%;
+    }
+</style>
diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue
index 2df48a21c..ee5319d99 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue
@@ -1,13 +1,147 @@
-// Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2022 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 <template>
-    <div class="container" />
+    <div class="container">
+        <div class="divider" />
+        <div class="container__row">
+            <div class="container__row__item__date-container">
+                <p class="container__row__item date">{{ billingItem.start.toLocaleDateString() }}</p>
+                <p class="container__row__item time">{{ billingItem.start.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) }}</p>
+            </div>
+            <div class="container__row__item__description"> 
+                <p class="container__row__item__description__text">CoinPayments {{ billingItem.description.includes("Deposit")? "Deposit": "Withdrawal" }}</p>
+                <p class="container__row__item__description__id">{{ billingItem.id }}</p>
+            </div>
+            <p class="container__row__item amount">
+                <b>
+                    <span v-if="billingItem.type === 1">
+                        ${{ billingItem.quantity.received.toFixed(2) }}
+                    </span>
+                    <span v-else>
+                        ${{ billingItem.quantity.total.toFixed(2) }}
+                    </span>     
+                </b>
+            </p>
+            <p class="container__row__item status">
+                <span :class="`container__row__item__circle-icon ${billingItem.status}`">
+                    &#9679;
+                </span>
+                {{ billingItem.formattedStatus }}
+            </p>
+            <p class="container__row__item download">
+                <a v-if="billingItem.link" class="download-link" target="_blank" :href="billingItem.link">View On CoinPayments</a>
+            </p>
+        </div>
+    </div>
 </template>
 
 <script lang="ts">
-import { Vue } from 'vue-property-decorator';
+import { Prop, Vue, Component } from 'vue-property-decorator';
 
+import { PaymentsHistoryItem } from '@/types/payments';
+
+// @vue/component
+@Component
 export default class TokenTransactionItem extends Vue {
+    @Prop({default: () => new PaymentsHistoryItem()})
+    private readonly billingItem: PaymentsHistoryItem;
 }
 </script>
+
+<style scoped lang="scss">
+    .pending {
+        color: #ffa800;
+    }
+
+    .confirmed {
+        color: #00ac26;
+    }
+
+    .rejected {
+        color: #ac1a00;
+    }
+
+    .divider {
+        height: 1px;
+        width: calc(100% + 30px);
+        background-color: #e5e7eb;
+        align-self: center;
+    }
+
+    .download-link {
+        color: #2683ff;
+        font-family: 'font_bold', sans-serif;
+        text-decoration: underline !important;
+
+        &:hover {
+            color: #0059d0;
+        }
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+
+        &__row {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            &__item {
+                font-family: sans-serif;
+                font-weight: 300;
+                font-size: 16px;
+                text-align: left;
+                margin: 30px 0;
+
+                &__description {
+                    width: 35%;
+                    display: flex;
+                    flex-direction: column;
+                    text-align: left;
+
+                    &__text,
+                    &__id {
+                        font-family: 'font_medium', sans-serif;
+                    }
+                }
+
+                &__date-container {
+                    width: 15%;
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+
+    .date {
+        font-family: 'font_bold', sans-serif;
+        margin: 0;
+    }
+
+    .time {
+        color: #6b7280;
+        margin: 0;
+        font-size: 14px;
+    }
+
+    .description {
+        font-family: 'font_medium', sans-serif;
+        overflow: ellipse;
+    }
+
+    .status {
+        width: 15%;
+    }
+
+    .amount {
+        width: 15%;
+    }
+
+    .download {
+        text-align: left;
+        width: 20%;
+    }
+</style>
diff --git a/web/satellite/src/components/common/VerticalArrows.vue b/web/satellite/src/components/common/VerticalArrows.vue
index bf43e4b83..980ea7237 100644
--- a/web/satellite/src/components/common/VerticalArrows.vue
+++ b/web/satellite/src/components/common/VerticalArrows.vue
@@ -1,10 +1,10 @@
-// Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2022 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 <template>
     <div class="container">
-        <TopArrowIcon :class="{ active: isActive && isTop }" />
-        <BottomArrowIcon :class="{ active: isActive && isBottom }" />
+        <TopArrowIcon :class="`${ isActive && isTop?'active':'inactive' }`" />
+        <BottomArrowIcon :class="`${ isActive && isBottom?'active':'inactive' }`" />
     </div>
 </template>
 
@@ -48,10 +48,16 @@ export default class VerticalArrows extends Vue {
         height: 17px;
     }
 
-    .active {
+    .inactive {
+        opacity: 0.5;
+    }
 
-        .arrow-svg-path {
+    .active {
+        opacity: 1;
+
+        ::v-deep path {
             fill: #2683ff !important;
         }
     }
-</style>
+
+</style>
\ No newline at end of file
diff --git a/web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap b/web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap
index 85699ea7d..314e632f8 100644
--- a/web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap
+++ b/web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `<div class="container"><svg class=""></svg> <svg class="active"></svg></div>`;
+exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>`;
 
-exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `<div class="container"><svg class="active"></svg> <svg class=""></svg></div>`;
+exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `<div class="container"><svg class="active"></svg> <svg class="inactive"></svg></div>`;
 
-exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `<div class="container"><svg class=""></svg> <svg class=""></svg></div>`;
+exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>`;
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap
index c36cf425f..32c316e3d 100644
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap
+++ b/web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap
@@ -4,15 +4,15 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
 <div class="sort-header-container">
   <div class="sort-header-container__name-container">
     <p class="sort-header-container__name-container__title">Name</p>
-    <div class="container"><svg class=""></svg> <svg class="active"></svg></div>
+    <div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>
   </div>
   <div class="sort-header-container__added-container">
     <p class="sort-header-container__added-container__title">Added</p>
-    <div class="container"><svg class=""></svg> <svg class=""></svg></div>
+    <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
   </div>
   <div class="sort-header-container__email-container">
     <p class="sort-header-container__email-container__title">Email</p>
-    <div class="container"><svg class=""></svg> <svg class=""></svg></div>
+    <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
   </div>
 </div>
 `;