From 5a4f08975017ee133eb9834b5b90d480cd1bed59 Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Thu, 19 Jan 2023 17:20:18 +0200
Subject: [PATCH] web/satellite: Billing history and Coupons components
 migrated to use composition api

Change-Id: I589af5376af5d94a15069c1d6ff4fbe2ce1c6fb0
---
 .../billing/billingTabs/BillingHistory.vue    |  51 +++---
 .../billingTabs/BillingHistoryHeader.vue      |  17 +-
 .../billingTabs/BillingHistoryItem.vue        |  41 ++---
 .../account/billing/billingTabs/Coupons.vue   | 157 +++++++++---------
 4 files changed, 117 insertions(+), 149 deletions(-)

diff --git a/web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue b/web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue
index 0388e5ca0..26cb4473e 100644
--- a/web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue
@@ -22,49 +22,38 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
 
 import { PaymentsHistoryItem, 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 VTable from '@/components/common/VTable.vue';
 
-const {
-    GET_PAYMENTS_HISTORY,
-} = PAYMENTS_ACTIONS;
+const store = useStore();
+const notify = useNotify();
 
-// @vue/component
-@Component({
-    components: {
-        BillingHistoryItem,
-        VTable,
-        BillingHistoryHeader,
-    },
-})
-
-export default class BillingHistory extends Vue {
-    mounted(): void {
-        this.fetchHistory();
-    }
-
-    public async fetchHistory(): Promise<void> {
-        try {
-            await this.$store.dispatch(GET_PAYMENTS_HISTORY);
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.BILLING_HISTORY_TAB);
-        }
-    }
-
-    public get historyItems(): PaymentsHistoryItem[] {
-        return this.$store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
-            return item.status !== 'draft' && item.status !== '' && (item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge);
-        });
+async function fetchHistory(): Promise<void> {
+    try {
+        await store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.BILLING_HISTORY_TAB);
     }
 }
+
+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);
+    });
+});
+
+onMounted(() => {
+    fetchHistory();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/web/satellite/src/components/account/billing/billingTabs/BillingHistoryHeader.vue b/web/satellite/src/components/account/billing/billingTabs/BillingHistoryHeader.vue
index b1691dd2c..b3ba29f96 100644
--- a/web/satellite/src/components/account/billing/billingTabs/BillingHistoryHeader.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/BillingHistoryHeader.vue
@@ -2,23 +2,14 @@
 // See LICENSE for copying information.
 
 <template>
-    <fragment>
+    <v-fragment>
         <th class="align-left">DATE</th>
         <th class="align-left">STATUS</th>
         <th class="align-left">AMOUNT</th>
         <th class="align-left">DOWNLOAD</th>
-    </fragment>
+    </v-fragment>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { Fragment } from 'vue-fragment';
-
-// @vue/component
-@Component({
-    components: {
-        Fragment,
-    },
-})
-export default class BillingHistoryHeader extends Vue {}
+<script setup lang="ts">
+import { Fragment as VFragment } from 'vue-fragment';
 </script>
diff --git a/web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue b/web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue
index 09307fe49..cf8b69d23 100644
--- a/web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue
@@ -18,7 +18,7 @@
                 </p>
             </div>
         </th>
-        <fragment>
+        <v-fragment>
             <th class="align-left data tablet-laptop">
                 <p class="date">
                     <span><Calendar /></span>
@@ -39,43 +39,36 @@
             <th class="align-left data tablet-laptop">
                 <a :href="item.link" download>Invoice PDF</a>
             </th>
-        </fragment>
+        </v-fragment>
     </tr>
 </template>
 
-<script lang="ts">
-import { Component, Prop } from 'vue-property-decorator';
-import { Fragment } from 'vue-fragment';
+<script setup lang="ts">
+import { Fragment as VFragment } from 'vue-fragment';
 
 import { PaymentsHistoryItem } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-
-import Resizable from '@/components/common/Resizable.vue';
+import { useResize } from '@/composables/resize';
 
 import CheckIcon from '@/../static/images/billing/check-green-circle.svg';
 import Calendar from '@/../static/images/billing/calendar.svg';
 
-// @vue/component
-@Component({
-    components: {
-        Calendar,
-        CheckIcon,
-        Fragment,
-    },
-})
-export default class BillingHistoryItem extends Resizable {
-    @Prop({ default: new PaymentsHistoryItem('', '', 0, 0, '', '', new Date(), new Date(), 0, 0) })
-    private readonly item: PaymentsHistoryItem;
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const props = withDefaults(defineProps<{
+    item: PaymentsHistoryItem;
+}>(), {
+    item: () => new PaymentsHistoryItem('', '', 0, 0, '', '', new Date(), new Date(), 0, 0),
+});
 
-    public downloadInvoice() {
-        this.analytics.eventTriggered(AnalyticsEvent.INVOICE_DOWNLOADED);
+const { isMobile, isTablet } = useResize();
 
-        if (this.isMobile || this.isTablet)
-            window.open(this.item.link, '_blank', 'noreferrer');
-    }
+function downloadInvoice() {
+    analytics.eventTriggered(AnalyticsEvent.INVOICE_DOWNLOADED);
+
+    if (isMobile || isTablet)
+        window.open(props.item.link, '_blank', 'noreferrer');
 }
 </script>
 
diff --git a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
index cd624e93d..600f1d63e 100644
--- a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
@@ -46,107 +46,102 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
 
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { Coupon } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { useNotify, useStore } from '@/utils/hooks';
 
 import VLoader from '@/components/common/VLoader.vue';
 
-// @vue/component
-@Component({
-    components: {
-        VLoader,
-    },
-})
-export default class Coupons extends Vue {
-    public isCouponFetching = true;
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const store = useStore();
+const notify = useNotify();
 
-    /**
-     * Lifecycle hook after initial render.
-     * Fetches coupon.
-     */
-    public async mounted(): Promise<void> {
-        try {
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_COUPON);
-            this.isCouponFetching = false;
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.BILLING_COUPONS_TAB);
-            this.isCouponFetching = false;
-        }
+const isCouponFetching = ref<boolean>(true);
+
+/**
+ * Returns the coupon applied to the user's account.
+ */
+const coupon = computed((): Coupon | null => {
+    return store.state.paymentsModule.coupon;
+});
+
+/**
+ * Returns the expiration date of the coupon.
+ */
+const expiration = computed((): string => {
+    if (!coupon.value) {
+        return '';
     }
 
-    /**
-     * Opens Add Coupon modal.
-     */
-    public toggleCreateModal(): void {
-        this.analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
+    if (coupon.value?.expiresAt) {
+        return 'Expires ' + coupon.value?.expiresAt.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+    } else {
+        return 'Unknown expiration';
+    }
+});
+
+/**
+ * Returns the whether the coupon is active or not.
+ */
+const status = computed((): string => {
+    if (!coupon.value) {
+        return '';
     }
 
-    /**
-     * Returns the coupon applied to the user's account.
-     */
-    public get coupon(): Coupon | null {
-        return this.$store.state.paymentsModule.coupon;
+    const today = new Date();
+    if ((coupon.value.duration === 'forever' || coupon.value.duration === 'once') || (coupon.value.expiresAt && today.getTime() < coupon.value.expiresAt.getTime())) {
+        return 'active';
+    } else {
+        return 'inactive';
+    }
+});
+
+/**
+ * Returns the whether the coupon is active or not.
+ */
+const expirationHelper = computed((): string => {
+    if (!coupon.value) {
+        return '';
     }
 
-    /**
-     * Returns the expiration date of the coupon.
-     */
-    public get expiration(): string {
-        if (!this.coupon) {
-            return '';
-        }
-
-        if (this.coupon.expiresAt) {
-            return 'Expires ' + this.coupon.expiresAt.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
-        } else {
-            return 'Unknown expiration';
-        }
-    }
-
-    /**
-     * Returns the whether the coupon is active or not.
-     */
-    public get status(): string {
-        if (!this.coupon) {
-            return '';
-        }
-
-        const today = new Date();
-        if ((this.coupon.duration === 'forever' || this.coupon.duration === 'once') || (this.coupon.expiresAt && today.getTime() < this.coupon.expiresAt.getTime())) {
-            return 'active';
-        } else {
-            return 'inactive';
-        }
-    }
-
-    /**
-     * Returns the whether the coupon is active or not.
-     */
-    public get expirationHelper(): string {
-        if (!this.coupon) {
-            return '';
-        }
-
-        switch (this.coupon.duration) {
-        case 'once':
-            return 'Expires after first use';
-        case 'forever':
-            return 'No expiration';
-        default:
-            return this.expiration;
-        }
+    switch (coupon.value.duration) {
+    case 'once':
+        return 'Expires after first use';
+    case 'forever':
+        return 'No expiration';
+    default:
+        return expiration.value;
     }
+});
 
+/**
+ * Opens Add Coupon modal.
+ */
+function toggleCreateModal(): void {
+    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
 }
+
+/**
+ * Lifecycle hook after initial render.
+ * Fetches coupon.
+ */
+onMounted(async () => {
+    try {
+        await store.dispatch(PAYMENTS_ACTIONS.GET_COUPON);
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.BILLING_COUPONS_TAB);
+    }
+
+    isCouponFetching.value = false;
+});
 </script>
 
 <style scoped lang="scss">