web/satellite: CouponArea, DetailedHistory, PaymentHistoryItemDate, PaymentsItem migrated to use composition api

Change-Id: I3963835053e69dd3b989a417b295abaa0b645284

web/satellite/src/components/account/billing/coupons/CouponArea.vue

@@ -50,14 +50,15 @@
     </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, CouponDuration } 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 VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -65,105 +66,98 @@ import VLoader from '@/components/common/VLoader.vue';
 import CouponAddIcon from '@/../static/images/account/billing/couponAdd.svg';
 import CouponIcon from '@/../static/images/account/billing/couponLarge.svg';
 
-// @vue/component
-@Component({
-    components: {
-        VButton,
-        VLoader,
-        CouponIcon,
-        CouponAddIcon,
-    },
-})
-export default class CouponArea extends Vue {
-    public isCouponFetching = true;
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    /**
-     * 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_COUPON_AREA);
+const store = useStore();
+const notify = useNotify();
+
+const isCouponFetching = ref<boolean>(true);
+
+/**
+ * Returns the coupon applied to the user's account.
+ */
+const coupon = computed((): Coupon | null => {
+    return store.state.paymentsModule.coupon;
+});
+
+/**
+ * Indicates if coupon code ui is enabled on the billing page.
+ */
+const couponCodeBillingUIEnabled = computed((): boolean => {
+    return store.state.appStateModule.couponCodeBillingUIEnabled;
+});
+
+/**
+ * Returns the start date of the coupon.
+ */
+const startDate = computed((): string => {
+    return coupon?.value?.addedAt.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) || '';
+});
+
+/**
+ * Returns the expiration date of the coupon.
+ */
+const endDate = computed((): string => {
+    if (!coupon.value) {
+        return '';
+    }
+
+    let date: Date;
+
+    if (coupon.value.duration == CouponDuration.Once) {
+        // Last day of billing period is last day of the month
+        date = new Date(coupon.value.addedAt.getFullYear(), coupon.value.addedAt.getMonth() + 1, 0);
+    } else if (coupon.value.duration == CouponDuration.Repeating && coupon.value.expiresAt) {
+        date = coupon.value.expiresAt;
+    } else {
+        return '';
+    }
+
+    return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+});
+
+/**
+ * Returns the expiration date of the coupon.
+ */
+const expiration = computed((): string => {
+    if (!coupon.value) {
+        return '';
+    }
+
+    if (coupon.value.expiresAt) {
+        return 'Expires ' + coupon.value.expiresAt.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+    } else {
+        switch (coupon.value.duration) {
+        case CouponDuration.Once:
+            return 'Expires after first use';
+        case CouponDuration.Forever:
+            return 'Never expires';
+        default:
+            return 'Unknown expiration';
         }
     }
+});
 
-    /**
-     * Opens Add Coupon modal.
-     */
-    public onCreateClick(): void {
-        this.analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
-    }
-
-    /**
-     * Returns the coupon applied to the user's account.
-     */
-    public get coupon(): Coupon | null {
-        return this.$store.state.paymentsModule.coupon;
-    }
-
-    /**
-     * Indicates if coupon code ui is enabled on the billing page.
-     */
-    public get couponCodeBillingUIEnabled(): boolean {
-        return this.$store.state.appStateModule.couponCodeBillingUIEnabled;
-    }
-
-    /**
-     * Returns the start date of the coupon.
-     */
-    public get startDate(): string {
-        return this.coupon?.addedAt.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) || '';
-    }
-
-    /**
-     * Returns the expiration date of the coupon.
-     */
-    public get endDate(): string {
-        if (!this.coupon) {
-            return '';
-        }
-
-        let date: Date;
-
-        if (this.coupon.duration == CouponDuration.Once) {
-            // Last day of billing period is last day of the month
-            date = new Date(this.coupon.addedAt.getFullYear(), this.coupon.addedAt.getMonth() + 1, 0);
-        } else if (this.coupon.duration == CouponDuration.Repeating && this.coupon.expiresAt) {
-            date = this.coupon.expiresAt;
-        } else {
-            return '';
-        }
-
-        return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
-    }
-
-    /**
-     * 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 {
-            switch (this.coupon.duration) {
-            case CouponDuration.Once:
-                return 'Expires after first use';
-            case CouponDuration.Forever:
-                return 'Never expires';
-            default:
-                return 'Unknown expiration';
-            }
-        }
-    }
+/**
+ * Opens Add Coupon modal.
+ */
+function onCreateClick(): void {
+    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
 }
+
+/**
+ * Lifecycle hook after initial render.
+ * Fetches coupon.
+ */
+onMounted(async () => {
+    try {
+        await store.dispatch(PAYMENTS_ACTIONS.GET_COUPON);
+        isCouponFetching.value = false;
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.BILLING_COUPON_AREA);
+    }
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/account/billing/depositAndBillingHistory/DetailedHistory.vue

@@ -24,14 +24,15 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
 
 import { RouteConfig } from '@/router';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
-import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
 
 import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
 import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
@@ -39,63 +40,60 @@ import VLoader from '@/components/common/VLoader.vue';
 
 import BackImage from '@/../static/images/account/billing/back.svg';
 
-// @vue/component
-@Component({
-    components: {
-        PaymentsItem,
-        SortingHeader,
-        BackImage,
-        VLoader,
-    },
-})
-export default class DetailedHistory extends Vue {
-    public isDataFetching = true;
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    /**
-     * Lifecycle hook after initial render.
-     * Fetches payments history.
-     */
-    public async mounted(): Promise<void> {
-        try {
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
+const store = useStore();
+const notify = useNotify();
+const router = useRouter();
+const nativeRoute = useRoute();
 
-            this.isDataFetching = false;
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENTS_HISTORY);
-        }
-    }
+const isDataFetching = ref<boolean>(true);
 
-    /**
-     * Returns list of history items depending on route name.
-     */
-    public get historyItems(): PaymentsHistoryItem[] {
-        if (this.isBillingHistory) {
-            return this.$store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
-                return item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge;
-            });
-        }
+const route = reactive(nativeRoute);
 
-        return this.$store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
-            return item.type === PaymentsHistoryItemType.Transaction || item.type === PaymentsHistoryItemType.DepositBonus;
+/**
+ * Indicates if current route is billing history page.
+ */
+const isBillingHistory = computed((): boolean => {
+    return route.name === RouteConfig.BillingHistory.name;
+});
+
+/**
+ * Returns list of history items depending on route name.
+ */
+const historyItems = computed((): PaymentsHistoryItem[] => {
+    if (isBillingHistory.value) {
+        return store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
+            return item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge;
         });
     }
 
-    /**
-     * Indicates if current route is billing history page.
-     */
-    public get isBillingHistory(): boolean {
-        return this.$route.name === RouteConfig.BillingHistory.name;
-    }
+    return store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
+        return item.type === PaymentsHistoryItemType.Transaction || item.type === PaymentsHistoryItemType.DepositBonus;
+    });
+});
 
-    /**
-     * Replaces location to root billing route.
-     */
-    public onBackToBillingClick(): void {
-        this.analytics.pageVisit(RouteConfig.Billing.path);
-        this.$router.push(RouteConfig.Billing.path);
-    }
+/**
+ * Replaces location to root billing route.
+ */
+function onBackToBillingClick(): void {
+    analytics.pageVisit(RouteConfig.Billing.path);
+    router.push(RouteConfig.Billing.path);
 }
+
+/**
+ * Lifecycle hook after initial render.
+ * Fetches payments history.
+ */
+onMounted(async () => {
+    try {
+        await store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
+
+        isDataFetching.value = false;
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENTS_HISTORY);
+    }
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue

@@ -3,121 +3,91 @@
 
 <template>
     <div class="countdown-container">
-        <div v-if="isExpired">{{ date }}</div>
+        <div v-if="isExpired">{{ expireDate }}</div>
         <div v-else class="row">
             <p>Expires in </p>
-            <p class="digit margin">{{ hours | leadingZero }}</p>
+            <p class="digit margin">{{ expirationTimer.hours | leadingZero }}</p>
             <p>:</p>
-            <p class="digit">{{ minutes | leadingZero }}</p>
+            <p class="digit">{{ expirationTimer.minutes | leadingZero }}</p>
             <p>:</p>
-            <p class="digit">{{ seconds | leadingZero }}</p>
+            <p class="digit">{{ expirationTimer.seconds | leadingZero }}</p>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
 
-import { PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
 
-// @vue/component
-@Component({
-    filters: {
-        leadingZero(value: number): string {
-            if (value <= 9) {
-                return `0${value}`;
-            }
-            return `${value}`;
-        },
-    },
-})
-export default class PaymentsHistoryItemDate extends Vue {
-    /**
-     * expiration date.
-     */
-    @Prop({ default: () => new Date() })
-    private readonly expiration: Date;
-    /**
-     * creation date.
-     */
-    @Prop({ default: () => new Date() })
-    private readonly start: Date;
-    @Prop({ default: 0 })
-    private readonly type: PaymentsHistoryItemType;
-    @Prop({ default: '' })
-    private readonly status: PaymentsHistoryItemStatus;
+const props = withDefaults(defineProps<{
+    billingItem?: PaymentsHistoryItem,
+}>(), {
+    billingItem: () => new PaymentsHistoryItem(),
+});
 
-    private expirationTimeInSeconds: number;
-    private nowInSeconds = Math.trunc(new Date().getTime() / 1000);
-    private intervalID: ReturnType<typeof setInterval>;
+const { end, start, type, status } = props.billingItem;
 
-    /**
-     * indicates if billing item is expired.
-     */
-    public isExpired: boolean;
+const nowInSeconds = ref<number>(Math.trunc(new Date().getTime() / 1000));
+const expirationTimeInSeconds = ref<number>(0);
+const intervalID = ref<ReturnType<typeof setInterval>>();
 
-    public created() {
-        this.expirationTimeInSeconds = Math.trunc(new Date(this.expiration).getTime() / 1000);
-        this.isExpired = (this.expirationTimeInSeconds - this.nowInSeconds) < 0;
+/**
+ * indicates if billing item is expired.
+ */
+const isExpired = ref<boolean>(false);
 
-        if (this.type === PaymentsHistoryItemType.Transaction) {
-            this.isExpired = this.isTransactionCompleted;
+/**
+ * String representation of creation date.
+ */
+const expireDate = computed((): string => {
+    return start.toLocaleString('default', { month: 'long', day: '2-digit', year: 'numeric' });
+});
+
+/**
+ * Seconds count for expiration timer.
+ */
+const expirationTimer = computed((): { seconds: number, minutes: number, hours: number } => {
+    return {
+        seconds: (expirationTimeInSeconds.value - nowInSeconds.value) % 60,
+        minutes: Math.trunc((expirationTimeInSeconds.value - nowInSeconds.value) / 60) % 60,
+        hours: Math.trunc((expirationTimeInSeconds.value - nowInSeconds.value) / 3600) % 24,
+    };
+});
+
+/**
+ * Indicates if transaction status is completed, paid or cancelled.
+ */
+const isTransactionCompleted = computed((): boolean => {
+    return status !== PaymentsHistoryItemStatus.Pending;
+});
+
+/**
+ * Starts expiration timer if item is not expired.
+ */
+function ready(): void {
+    intervalID.value = setInterval(() => {
+        if ((expirationTimeInSeconds.value - nowInSeconds.value) < 0 || isTransactionCompleted.value) {
+            isExpired.value = true;
+            intervalID.value && clearInterval(intervalID.value);
+
+            return;
         }
 
-        this.ready();
-    }
-
-    /**
-     * String representation of creation date.
-     */
-    public get date(): string {
-        return this.start.toLocaleString('default', { month: 'long', day: '2-digit', year: 'numeric' });
-    }
-
-    /**
-     * Seconds count for expiration timer.
-     */
-    public get seconds(): number {
-        return (this.expirationTimeInSeconds - this.nowInSeconds) % 60;
-    }
-
-    /**
-     * Minutes count for expiration timer.
-     */
-    public get minutes(): number {
-        return Math.trunc((this.expirationTimeInSeconds - this.nowInSeconds) / 60) % 60;
-    }
-
-    /**
-     * Hours count for expiration timer.
-     */
-    public get hours(): number {
-        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 !== PaymentsHistoryItemStatus.Pending;
-    }
-
-    /**
-     * Starts expiration timer if item is not expired.
-     */
-    private ready(): void {
-        this.intervalID = setInterval(() => {
-            if ((this.expirationTimeInSeconds - this.nowInSeconds) < 0 || this.isTransactionCompleted) {
-                this.isExpired = true;
-                clearInterval(this.intervalID);
-
-                return;
-            }
-
-            this.nowInSeconds = Math.trunc(new Date().getTime() / 1000);
-        }, 1000);
-    }
+        nowInSeconds.value = Math.trunc(new Date().getTime() / 1000);
+    }, 1000);
 }
+
+onBeforeMount(() => {
+    expirationTimeInSeconds.value = Math.trunc(new Date(end).getTime() / 1000);
+    isExpired.value = (expirationTimeInSeconds.value - nowInSeconds.value) < 0;
+
+    if (type === PaymentsHistoryItemType.Transaction) {
+        isExpired.value = isTransactionCompleted.value;
+    }
+
+    ready();
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsItem.vue

@@ -5,10 +5,7 @@
     <div class="container">
         <PaymentsHistoryItemDate
             class="container__item date"
-            :start="billingItem.start"
-            :expiration="billingItem.end"
-            :type="billingItem.type"
-            :status="billingItem.status"
+            :billing-item="billingItem"
         />
         <p class="container__item description">{{ billingItem.description }}</p>
         <p class="container__item status">{{ billingItem.formattedStatus }}</p>
@@ -32,23 +29,16 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
+<script setup lang="ts">
 import { PaymentsHistoryItem } from '@/types/payments';
 
 import PaymentsHistoryItemDate from '@/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue';
 
-// @vue/component
-@Component({
-    components: {
-        PaymentsHistoryItemDate,
-    },
-})
-export default class PaymentsItem extends Vue {
-    @Prop({ default: () => new PaymentsHistoryItem() })
-    private readonly billingItem: PaymentsHistoryItem;
-}
+const props = withDefaults(defineProps<{
+    billingItem?: PaymentsHistoryItem;
+}>(), {
+    billingItem: () => new PaymentsHistoryItem(),
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/main.ts

@@ -87,6 +87,13 @@ Vue.filter('bytesToBase10String', (amountInBytes: number): string => {
     return `${Size.toBase10String(amountInBytes)}`;
 });
 
+/**
+ * Adds leading zero to number if it is less than 10.
+ */
+Vue.filter('leadingZero', (value: number): string => {
+    return value <= 9 ? `0${value}` : `${value}`;
+});
+
 new Vue({
     router,
     store,

web/satellite/src/types/payments.ts

@@ -149,7 +149,7 @@ export class PaymentsHistoryItem {
         public readonly description: string = '',
         public readonly amount: number = 0,
         public readonly received: number = 0,
-        public readonly status: string = '',
+        public readonly status: PaymentsHistoryItemStatus = PaymentsHistoryItemStatus.Pending,
         public readonly link: string = '',
         public readonly start: Date = new Date(),
         public readonly end: Date = new Date(),

web/satellite/src/utils/hooks.ts

@@ -2,14 +2,14 @@
 // See LICENSE for copying information.
 
 import { getCurrentInstance } from 'vue';
-import VueRouter from 'vue-router';
+import VueRouter, { Route } from 'vue-router';
 
 import { store } from '@/store';
 import { Notificator } from '@/utils/plugins/notificator';
 
 // TODO: remove after updating router and store deps.
 export function useRoute() {
-    return getCurrentInstance()?.proxy.$route;
+    return getCurrentInstance()?.proxy.$route || {} as Route;
 }
 
 export function useRouter() {

web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CouponArea renders correctly 1`] = `
-<div class="coupon-area">
-  <div class="coupon-area__top-container">
-    <h1 class="coupon-area__top-container__title">Coupon</h1>
-    <vbutton-stub on-press="function () { [native code] }" label="Add Coupon Code" class="coupon-area__top-container__add-button"></vbutton-stub>
-  </div>
-  <div class="coupon-area__container">
-    <couponicon-stub class="coupon-area__container__coupon-icon"></couponicon-stub>
-    <div class="coupon-area__container__text-container">
-      <div class="coupon-area__container__text-container__row">
-        <p class="coupon-area__container__text-container__row__name">Coupon Name</p>
-        <p class="coupon-area__container__text-container__row__promo">PROMO_CODE</p>
-      </div>
-      <div class="coupon-area__container__text-container__row">
-        <p class="coupon-area__container__text-container__row__description">$1.23 off for 2 months</p>
-      </div>
-      <div class="coupon-area__container__text-container__row">
-        <p class="coupon-area__container__text-container__row__expiration">
-          Active from <b>October 1, 2021</b> to <b>December 1, 2021</b></p>
-      </div>
-    </div>
-  </div>
-</div>
-`;

web/satellite/tests/unit/account/billing/depositAndBillingHistory/__snapshots__/PaymentsHistoryItemDate.spec.ts.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PaymentsHistoryItemDate renders correctly if charge 1`] = `
-<div class="countdown-container">
-  <div>June 05, 2019</div>
-</div>
-`;
-
-exports[`PaymentsHistoryItemDate renders correctly if invoice 1`] = `
-<div class="countdown-container">
-  <div>February 01, 2019</div>
-</div>
-`;
-
-exports[`PaymentsHistoryItemDate renders correctly if transaction expired 1`] = `
-<div class="countdown-container">
-  <div>June 06, 2019</div>
-</div>
-`;
-
-exports[`PaymentsHistoryItemDate renders correctly if transaction is not expired 1`] = `
-<div class="countdown-container">
-  <div class="row">
-    <p>Expires in </p>
-    <p class="digit margin">00</p>
-    <p>:</p>
-    <p class="digit">00</p>
-    <p>:</p>
-    <p class="digit">00</p>
-  </div>
-</div>
-`;

web/satellite/tests/unit/account/billing/depositAndBillingHistory/__snapshots__/PaymentsItem.spec.ts.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PaymentsItem renders correctly if charge 1`] = `
-<div class="container">
-  <div class="countdown-container container__item date">
-    <div>January 01, 1970</div>
-  </div>
-  <p class="container__item description">Charge</p>
-  <p class="container__item status">Test</p>
-  <p class="container__item amount"><b>
-      USD $
-      <span>
-                5.00
-            </span></b>
-    <!---->
-  </p>
-  <p class="container__item download"><a target="_blank" href="test" class="download-link">Invoice PDF</a></p>
-</div>
-`;
-
-exports[`PaymentsItem renders correctly if invoice 1`] = `
-<div class="container">
-  <div class="countdown-container container__item date">
-    <div>January 01, 1970</div>
-  </div>
-  <p class="container__item description">Invoice</p>
-  <p class="container__item status">Test</p>
-  <p class="container__item amount"><b>
-      USD $
-      <span>
-                5.00
-            </span></b>
-    <!---->
-  </p>
-  <p class="container__item download"><a target="_blank" href="test" class="download-link">Invoice PDF</a></p>
-</div>
-`;
-
-exports[`PaymentsItem renders correctly if transaction 1`] = `
-<div class="container">
-  <div class="countdown-container container__item date">
-    <div>January 01, 1970</div>
-  </div>
-  <p class="container__item description">Transaction</p>
-  <p class="container__item status">Test</p>
-  <p class="container__item amount"><b>
-      USD $
-      <span>
-                5.00
-            </span></b> <span>
-            of <b>5.00</b></span></p>
-  <p class="container__item download"><a target="_blank" href="test" class="download-link">Checkout</a></p>
-</div>
-`;

web/satellite/tests/unit/account/billing/depositAndBillingHistory/__snapshots__/SmallDepositHistory.spec.ts.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SmallDepositHistory renders correctly with items 1`] = `
-<div class="deposit-area">
-  <div class="deposit-area__header">
-    <h1 class="deposit-area__header__title">Short Balance History</h1>
-    <div class="deposit-area__header__button">View All</div>
-  </div>
-  <sortingheader-stub></sortingheader-stub>
-  <paymentsitem-stub billingitem="[object Object]"></paymentsitem-stub>
-  <paymentsitem-stub billingitem="[object Object]"></paymentsitem-stub>
-  <paymentsitem-stub billingitem="[object Object]"></paymentsitem-stub>
-</div>
-`;
-
-exports[`SmallDepositHistory renders correctly without items 1`] = ``;

web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts

@@ -4,7 +4,7 @@
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 
-import { PaymentsMock } from '../../../mock/api/payments';
+import { PaymentsMock } from '../../../../mock/api/payments';
 
 import { appStateModule } from '@/store/modules/appState';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';

web/satellite/tests/unit/ignore/account/billing/depositAndBillingHistory/DetailedHistory.spec.ts

@@ -11,7 +11,7 @@ import { router } from '@/router';
 import { makeNotificationsModule } from '@/store/modules/notifications';
 import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
 import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
-import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
 import { Project } from '@/types/projects';
 import { NotificatorPlugin } from '@/utils/plugins/notificator';
 
@@ -23,10 +23,10 @@ const projectsModule = makeProjectsModule(projectsApi);
 const paymentsApi = new PaymentsHttpApi();
 const paymentsModule = makePaymentsModule(paymentsApi);
 const notificationsModule = makeNotificationsModule();
-const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
-const itemCharge = new PaymentsHistoryItem('testId1', 'Charge', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
-const itemTransaction = new PaymentsHistoryItem('testId2', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
-const itemTransaction1 = new PaymentsHistoryItem('testId3', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
+const itemCharge = new PaymentsHistoryItem('testId1', 'Charge', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
+const itemTransaction = new PaymentsHistoryItem('testId2', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemTransaction1 = new PaymentsHistoryItem('testId3', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
 const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', false);
 
 localVue.use(Vuex);

web/satellite/tests/unit/ignore/account/billing/depositAndBillingHistory/PaymentsItem.spec.ts

@@ -3,14 +3,14 @@
 
 import { createLocalVue, mount } from '@vue/test-utils';
 
-import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
 
 import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
 
 const localVue = createLocalVue();
-const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
-const itemCharge = new PaymentsHistoryItem('testId', 'Charge', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
-const itemTransaction = new PaymentsHistoryItem('testId', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
+const itemCharge = new PaymentsHistoryItem('testId', 'Charge', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
+const itemTransaction = new PaymentsHistoryItem('testId', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
 
 describe('PaymentsItem', (): void => {
     it('renders correctly if invoice', (): void => {

web/satellite/tests/unit/ignore/account/billing/depositAndBillingHistory/SmallDepositHistory.spec.ts

@@ -7,7 +7,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { router } from '@/router';
 import { PaymentsHttpApi } from '@/api/payments';
 import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
-import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
+import { PaymentsHistoryItem, PaymentsHistoryItemStatus, PaymentsHistoryItemType } from '@/types/payments';
 
 import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
 
@@ -16,12 +16,12 @@ localVue.use(Vuex);
 
 const paymentsApi = new PaymentsHttpApi();
 const paymentsModule = makePaymentsModule(paymentsApi);
-const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
-const itemCharge = new PaymentsHistoryItem('testId1', 'Charge', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
-const itemTransaction = new PaymentsHistoryItem('testId2', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
-const itemTransaction1 = new PaymentsHistoryItem('testId3', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
-const itemTransaction2 = new PaymentsHistoryItem('testId4', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
-const itemTransaction3 = new PaymentsHistoryItem('testId5', 'Transaction', 500, 500, 'test', 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemInvoice = new PaymentsHistoryItem('testId', 'Invoice', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Invoice);
+const itemCharge = new PaymentsHistoryItem('testId1', 'Charge', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Charge);
+const itemTransaction = new PaymentsHistoryItem('testId2', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemTransaction1 = new PaymentsHistoryItem('testId3', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemTransaction2 = new PaymentsHistoryItem('testId4', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
+const itemTransaction3 = new PaymentsHistoryItem('testId5', 'Transaction', 500, 500, PaymentsHistoryItemStatus.Paid, 'test', new Date(1), new Date(1), PaymentsHistoryItemType.Transaction);
 
 const store = new Vuex.Store({ modules: { paymentsModule } });