web/satellite: EstimatedCostsAndCredits components migrated to use composition api
Change-Id: I11ee04880a5dbdc5494f7a51c0b4077e88827a11
This commit is contained in:
NickolaiYurchenko
Storj Robot
parent
1bff41e6b3
commit
facbd65882
@ -24,74 +24,69 @@
|
||||
</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 { PROJECTS_ACTIONS } from '@/store/modules/projects';
|
||||
import { ProjectUsageAndCharges } from '@/types/payments';
|
||||
import { MONTHS_NAMES } from '@/utils/constants/date';
|
||||
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
|
||||
import { useNotify, useStore } from '@/utils/hooks';
|
||||
|
||||
import VLoader from '@/components/common/VLoader.vue';
|
||||
import UsageAndChargesItem from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
UsageAndChargesItem,
|
||||
VLoader,
|
||||
},
|
||||
})
|
||||
export default class EstimatedCostsAndCredits extends Vue {
|
||||
public isDataFetching = true;
|
||||
const store = useStore();
|
||||
const notify = useNotify();
|
||||
|
||||
/**
|
||||
* Lifecycle hook after initial render.
|
||||
* Fetches projects and usage rollup.
|
||||
*/
|
||||
public async mounted(): Promise<void> {
|
||||
try {
|
||||
await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
|
||||
} catch (error) {
|
||||
this.isDataFetching = false;
|
||||
this.$notify.error(error.message, AnalyticsErrorEventSource.BILLING_ESTIMATED_COSTS_AND_CREDITS);
|
||||
return;
|
||||
}
|
||||
const isDataFetching = ref<boolean>(true);
|
||||
|
||||
try {
|
||||
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
|
||||
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_PRICE_MODEL);
|
||||
/**
|
||||
* projectUsageAndCharges is an array of all stored ProjectUsageAndCharges.
|
||||
*/
|
||||
const projectUsageAndCharges = computed((): ProjectUsageAndCharges[] => {
|
||||
return store.state.paymentsModule.usageAndCharges;
|
||||
});
|
||||
|
||||
this.isDataFetching = false;
|
||||
} catch (error) {
|
||||
await this.$notify.error(error.message, AnalyticsErrorEventSource.BILLING_ESTIMATED_COSTS_AND_CREDITS);
|
||||
}
|
||||
/**
|
||||
* priceSummary returns price summary of usages for all the projects.
|
||||
*/
|
||||
const priceSummary = computed((): number => {
|
||||
return store.state.paymentsModule.priceSummary;
|
||||
});
|
||||
|
||||
/**
|
||||
* chosenPeriod returns billing period chosen by user.
|
||||
*/
|
||||
const chosenPeriod = computed((): string => {
|
||||
const dateFromStore = store.state.paymentsModule.startDate;
|
||||
|
||||
return `${MONTHS_NAMES[dateFromStore.getUTCMonth()]} ${dateFromStore.getUTCFullYear()}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* Lifecycle hook after initial render.
|
||||
* Fetches projects and usage rollup.
|
||||
*/
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await store.dispatch(PROJECTS_ACTIONS.FETCH);
|
||||
} catch (error) {
|
||||
isDataFetching.value = false;
|
||||
notify.error(error.message, AnalyticsErrorEventSource.BILLING_ESTIMATED_COSTS_AND_CREDITS);
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* projectUsageAndCharges is an array of all stored ProjectUsageAndCharges.
|
||||
*/
|
||||
public get projectUsageAndCharges(): ProjectUsageAndCharges[] {
|
||||
return this.$store.state.paymentsModule.usageAndCharges;
|
||||
try {
|
||||
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
|
||||
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_PRICE_MODEL);
|
||||
} catch (error) {
|
||||
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_ESTIMATED_COSTS_AND_CREDITS);
|
||||
}
|
||||
|
||||
/**
|
||||
* priceSummary returns price summary of usages for all the projects.
|
||||
*/
|
||||
public get priceSummary(): number {
|
||||
return this.$store.state.paymentsModule.priceSummary;
|
||||
}
|
||||
|
||||
/**
|
||||
* chosenPeriod returns billing period chosen by user.
|
||||
*/
|
||||
public get chosenPeriod(): string {
|
||||
const dateFromStore = this.$store.state.paymentsModule.startDate;
|
||||
|
||||
return `${MONTHS_NAMES[dateFromStore.getUTCMonth()]} ${dateFromStore.getUTCFullYear()}`;
|
||||
}
|
||||
}
|
||||
isDataFetching.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -46,8 +46,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { ProjectUsageAndCharges, ProjectUsagePriceModel } from '@/types/payments';
|
||||
import { Project } from '@/types/projects';
|
||||
@ -56,128 +56,124 @@ import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
|
||||
import { decimalShift } from '@/utils/strings';
|
||||
import { AnalyticsHttpApi } from '@/api/analytics';
|
||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||
import { useStore } from '@/utils/hooks';
|
||||
|
||||
import ChargesHideIcon from '@/../static/images/account/billing/chargesHide.svg';
|
||||
import ChargesExpandIcon from '@/../static/images/account/billing/chargesExpand.svg';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
ChargesHideIcon,
|
||||
ChargesExpandIcon,
|
||||
},
|
||||
})
|
||||
export default class UsageAndChargesItem extends Vue {
|
||||
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
|
||||
|
||||
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
|
||||
/**
|
||||
* HOURS_IN_MONTH constant shows amount of hours in 30-day month.
|
||||
*/
|
||||
const HOURS_IN_MONTH = 720;
|
||||
|
||||
/**
|
||||
* CENTS_MB_TO_DOLLARS_GB_SHIFT constant represents how many places to the left
|
||||
* a decimal point must be shifted to convert from cents/MB to dollars/GB.
|
||||
*/
|
||||
const CENTS_MB_TO_DOLLARS_GB_SHIFT = -1;
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* item represents usage and charges of current project by period.
|
||||
*/
|
||||
@Prop({ default: () => new ProjectUsageAndCharges() })
|
||||
private readonly item: ProjectUsageAndCharges;
|
||||
item?: ProjectUsageAndCharges;
|
||||
}>(), {
|
||||
item: () => new ProjectUsageAndCharges(),
|
||||
});
|
||||
|
||||
/**
|
||||
* HOURS_IN_MONTH constant shows amount of hours in 30-day month.
|
||||
*/
|
||||
private readonly HOURS_IN_MONTH: number = 720;
|
||||
const store = useStore();
|
||||
|
||||
/**
|
||||
* CENTS_MB_TO_DOLLARS_GB_SHIFT constant represents how many places to the left
|
||||
* a decimal point must be shifted to convert from cents/MB to dollars/GB.
|
||||
*/
|
||||
private readonly CENTS_MB_TO_DOLLARS_GB_SHIFT = -1;
|
||||
/**
|
||||
* isDetailedInfoShown indicates if area with detailed information about project charges is expanded.
|
||||
*/
|
||||
const isDetailedInfoShown = ref<boolean>(false);
|
||||
|
||||
/**
|
||||
* projectName returns project name.
|
||||
*/
|
||||
public get projectName(): string {
|
||||
const projects: Project[] = this.$store.state.projectsModule.projects;
|
||||
const project: Project | undefined = projects.find(project => project.id === this.item.projectId);
|
||||
/**
|
||||
* projectName returns project name.
|
||||
*/
|
||||
const projectName = computed((): string => {
|
||||
const projects: Project[] = store.state.projectsModule.projects;
|
||||
const project: Project = projects.find(project => project.id === props.item.projectId);
|
||||
|
||||
return project ? project.name : '';
|
||||
}
|
||||
return project?.name || '';
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns string of date range.
|
||||
*/
|
||||
public get period(): string {
|
||||
const since = `${SHORT_MONTHS_NAMES[this.item.since.getUTCMonth()]} ${this.item.since.getUTCDate()}`;
|
||||
const before = `${SHORT_MONTHS_NAMES[this.item.before.getUTCMonth()]} ${this.item.before.getUTCDate()}`;
|
||||
/**
|
||||
* Returns string of date range.
|
||||
*/
|
||||
const period = computed((): string => {
|
||||
const since = `${SHORT_MONTHS_NAMES[props.item.since.getUTCMonth()]} ${props.item.since.getUTCDate()}`;
|
||||
const before = `${SHORT_MONTHS_NAMES[props.item.before.getUTCMonth()]} ${props.item.before.getUTCDate()}`;
|
||||
|
||||
return `${since} - ${before}`;
|
||||
}
|
||||
return `${since} - ${before}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns string of egress amount and dimension.
|
||||
*/
|
||||
public get egressAmountAndDimension(): string {
|
||||
return `${this.egressFormatted.formattedBytes} ${this.egressFormatted.label}`;
|
||||
}
|
||||
/**
|
||||
* Returns project usage price model from store.
|
||||
*/
|
||||
const priceModel = computed((): ProjectUsagePriceModel => {
|
||||
return store.state.paymentsModule.usagePriceModel;
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns formatted storage used in GB x month dimension.
|
||||
*/
|
||||
public get storageFormatted(): string {
|
||||
const bytesInGB = 1000000000;
|
||||
/**
|
||||
* Returns formatted egress depending on amount of bytes.
|
||||
*/
|
||||
const egressFormatted = computed((): Size => {
|
||||
return new Size(props.item.egress, 2);
|
||||
});
|
||||
|
||||
return (this.item.storage / this.HOURS_IN_MONTH / bytesInGB).toFixed(2);
|
||||
}
|
||||
/**
|
||||
* Returns formatted storage used in GB x month dimension.
|
||||
*/
|
||||
const storageFormatted = computed((): string => {
|
||||
const bytesInGB = 1000000000;
|
||||
|
||||
/**
|
||||
* Returns formatted segment count in segment x month dimension.
|
||||
*/
|
||||
public get segmentCountFormatted(): string {
|
||||
return (this.item.segmentCount / this.HOURS_IN_MONTH).toFixed(2);
|
||||
}
|
||||
return (props.item.storage / HOURS_IN_MONTH / bytesInGB).toFixed(2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns storage price per GB.
|
||||
*/
|
||||
public get storagePrice(): string {
|
||||
return decimalShift(this.priceModel.storageMBMonthCents, this.CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
}
|
||||
/**
|
||||
* Returns formatted segment count in segment x month dimension.
|
||||
*/
|
||||
const segmentCountFormatted = computed((): string => {
|
||||
return (props.item.segmentCount / HOURS_IN_MONTH).toFixed(2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns egress price per GB.
|
||||
*/
|
||||
public get egressPrice(): string {
|
||||
return decimalShift(this.priceModel.egressMBCents, this.CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
}
|
||||
/**
|
||||
* Returns storage price per GB.
|
||||
*/
|
||||
const storagePrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.storageMBMonthCents, CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns segment price.
|
||||
*/
|
||||
public get segmentPrice(): string {
|
||||
return decimalShift(this.priceModel.segmentMonthCents, 2);
|
||||
}
|
||||
/**
|
||||
* Returns egress price per GB.
|
||||
*/
|
||||
const egressPrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.egressMBCents, CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns project usage price model from store.
|
||||
*/
|
||||
private get priceModel(): ProjectUsagePriceModel {
|
||||
return this.$store.state.paymentsModule.usagePriceModel;
|
||||
}
|
||||
/**
|
||||
* Returns segment price.
|
||||
*/
|
||||
const segmentPrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.segmentMonthCents, 2);
|
||||
});
|
||||
|
||||
/**
|
||||
* isDetailedInfoShown indicates if area with detailed information about project charges is expanded.
|
||||
*/
|
||||
public isDetailedInfoShown = false;
|
||||
/**
|
||||
* Returns string of egress amount and dimension.
|
||||
*/
|
||||
const egressAmountAndDimension = computed((): string => {
|
||||
return `${egressFormatted.value.formattedBytes} ${egressFormatted.value.label}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* toggleDetailedInfo expands an area with detailed information about project charges.
|
||||
*/
|
||||
public toggleDetailedInfo(): void {
|
||||
this.analytics.eventTriggered(AnalyticsEvent.USAGE_DETAILED_INFO_CLICKED);
|
||||
this.isDetailedInfoShown = !this.isDetailedInfoShown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns formatted egress depending on amount of bytes.
|
||||
*/
|
||||
private get egressFormatted(): Size {
|
||||
return new Size(this.item.egress, 2);
|
||||
}
|
||||
/**
|
||||
* toggleDetailedInfo expands an area with detailed information about project charges.
|
||||
*/
|
||||
function toggleDetailedInfo(): void {
|
||||
analytics.eventTriggered(AnalyticsEvent.USAGE_DETAILED_INFO_CLICKED);
|
||||
isDetailedInfoShown.value = !isDetailedInfoShown.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -298,4 +294,4 @@ export default class UsageAndChargesItem extends Vue {
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -51,132 +51,128 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { ProjectUsageAndCharges, ProjectUsagePriceModel } from '@/types/payments';
|
||||
import { Project } from '@/types/projects';
|
||||
import { Size } from '@/utils/bytesSize';
|
||||
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
|
||||
import { decimalShift } from '@/utils/strings';
|
||||
import { useStore } from '@/utils/hooks';
|
||||
|
||||
import GreyChevron from '@/../static/images/common/greyChevron.svg';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
GreyChevron,
|
||||
},
|
||||
})
|
||||
export default class UsageAndChargesItem2 extends Vue {
|
||||
/**
|
||||
* HOURS_IN_MONTH constant shows amount of hours in 30-day month.
|
||||
*/
|
||||
const HOURS_IN_MONTH = 720;
|
||||
|
||||
/**
|
||||
* CENTS_MB_TO_DOLLARS_GB_SHIFT constant represents how many places to the left
|
||||
* a decimal point must be shifted to convert from cents/MB to dollars/GB.
|
||||
*/
|
||||
const CENTS_MB_TO_DOLLARS_GB_SHIFT = -1;
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* item represents usage and charges of current project by period.
|
||||
*/
|
||||
@Prop({ default: () => new ProjectUsageAndCharges() })
|
||||
private readonly item: ProjectUsageAndCharges;
|
||||
item?: ProjectUsageAndCharges;
|
||||
}>(), {
|
||||
item: () => new ProjectUsageAndCharges(),
|
||||
});
|
||||
|
||||
/**
|
||||
* HOURS_IN_MONTH constant shows amount of hours in 30-day month.
|
||||
*/
|
||||
private readonly HOURS_IN_MONTH: number = 720;
|
||||
const store = useStore();
|
||||
|
||||
/**
|
||||
* CENTS_MB_TO_DOLLARS_GB_SHIFT constant represents how many places to the left
|
||||
* a decimal point must be shifted to convert from cents/MB to dollars/GB.
|
||||
*/
|
||||
private readonly CENTS_MB_TO_DOLLARS_GB_SHIFT = -1;
|
||||
/**
|
||||
* isDetailedInfoShown indicates if area with detailed information about project charges is expanded.
|
||||
*/
|
||||
const isDetailedInfoShown = ref<boolean>(false);
|
||||
|
||||
public paymentMethod = 'test';
|
||||
/**
|
||||
* projectName returns project name.
|
||||
*/
|
||||
const projectName = computed((): string => {
|
||||
const projects: Project[] = store.state.projectsModule.projects;
|
||||
const project: Project = projects.find(project => project.id === props.item.projectId);
|
||||
|
||||
/**
|
||||
* projectName returns project name.
|
||||
*/
|
||||
public get projectName(): string {
|
||||
const projects: Project[] = this.$store.state.projectsModule.projects;
|
||||
const project: Project | undefined = projects.find(project => project.id === this.item.projectId);
|
||||
return project?.name || '';
|
||||
});
|
||||
|
||||
return project ? project.name : '';
|
||||
}
|
||||
/**
|
||||
* Returns string of date range.
|
||||
*/
|
||||
const period = computed((): string => {
|
||||
const since = `${SHORT_MONTHS_NAMES[props.item.since.getUTCMonth()]} ${props.item.since.getUTCDate()}`;
|
||||
const before = `${SHORT_MONTHS_NAMES[props.item.before.getUTCMonth()]} ${props.item.before.getUTCDate()}`;
|
||||
|
||||
/**
|
||||
* Returns string of date range.
|
||||
*/
|
||||
public get period(): string {
|
||||
const since = `${SHORT_MONTHS_NAMES[this.item.since.getUTCMonth()]} ${this.item.since.getUTCDate()}`;
|
||||
const before = `${SHORT_MONTHS_NAMES[this.item.before.getUTCMonth()]} ${this.item.before.getUTCDate()}`;
|
||||
return `${since} - ${before}`;
|
||||
});
|
||||
|
||||
return `${since} - ${before}`;
|
||||
}
|
||||
/**
|
||||
* Returns project usage price model from store.
|
||||
*/
|
||||
const priceModel = computed((): ProjectUsagePriceModel => {
|
||||
return store.state.paymentsModule.usagePriceModel;
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns string of egress amount and dimension.
|
||||
*/
|
||||
public get egressAmountAndDimension(): string {
|
||||
return `${this.egressFormatted.formattedBytes} ${this.egressFormatted.label}`;
|
||||
}
|
||||
/**
|
||||
* Returns formatted egress depending on amount of bytes.
|
||||
*/
|
||||
const egressFormatted = computed((): Size => {
|
||||
return new Size(props.item.egress, 2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns formatted storage used in GB x month dimension.
|
||||
*/
|
||||
public get storageFormatted(): string {
|
||||
const bytesInGB = 1000000000;
|
||||
/**
|
||||
* Returns formatted storage used in GB x month dimension.
|
||||
*/
|
||||
const storageFormatted = computed((): string => {
|
||||
const bytesInGB = 1000000000;
|
||||
|
||||
return (this.item.storage / this.HOURS_IN_MONTH / bytesInGB).toFixed(2);
|
||||
}
|
||||
return (props.item.storage / HOURS_IN_MONTH / bytesInGB).toFixed(2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns formatted segment count in segment x month dimension.
|
||||
*/
|
||||
public get segmentCountFormatted(): string {
|
||||
return (this.item.segmentCount / this.HOURS_IN_MONTH).toFixed(2);
|
||||
}
|
||||
/**
|
||||
* Returns formatted segment count in segment x month dimension.
|
||||
*/
|
||||
const segmentCountFormatted = computed((): string => {
|
||||
return (props.item.segmentCount / HOURS_IN_MONTH).toFixed(2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns storage price per GB.
|
||||
*/
|
||||
public get storagePrice(): string {
|
||||
return decimalShift(this.priceModel.storageMBMonthCents, this.CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
}
|
||||
/**
|
||||
* Returns storage price per GB.
|
||||
*/
|
||||
const storagePrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.storageMBMonthCents, CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns egress price per GB.
|
||||
*/
|
||||
public get egressPrice(): string {
|
||||
return decimalShift(this.priceModel.egressMBCents, this.CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
}
|
||||
/**
|
||||
* Returns egress price per GB.
|
||||
*/
|
||||
const egressPrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.egressMBCents, CENTS_MB_TO_DOLLARS_GB_SHIFT);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns segment price.
|
||||
*/
|
||||
public get segmentPrice(): string {
|
||||
return decimalShift(this.priceModel.segmentMonthCents, 2);
|
||||
}
|
||||
/**
|
||||
* Returns segment price.
|
||||
*/
|
||||
const segmentPrice = computed((): string => {
|
||||
return decimalShift(priceModel.value.segmentMonthCents, 2);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns project usage price model from store.
|
||||
*/
|
||||
private get priceModel(): ProjectUsagePriceModel {
|
||||
return this.$store.state.paymentsModule.usagePriceModel;
|
||||
}
|
||||
/**
|
||||
* Returns string of egress amount and dimension.
|
||||
*/
|
||||
const egressAmountAndDimension = computed((): string => {
|
||||
return `${egressFormatted.value.formattedBytes} ${egressFormatted.value.label}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* isDetailedInfoShown indicates if area with detailed information about project charges is expanded.
|
||||
*/
|
||||
public isDetailedInfoShown = false;
|
||||
|
||||
/**
|
||||
* toggleDetailedInfo expands an area with detailed information about project charges.
|
||||
*/
|
||||
public toggleDetailedInfo(): void {
|
||||
this.isDetailedInfoShown = !this.isDetailedInfoShown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns formatted egress depending on amount of bytes.
|
||||
*/
|
||||
private get egressFormatted(): Size {
|
||||
return new Size(this.item.egress, 2);
|
||||
}
|
||||
/**
|
||||
* toggleDetailedInfo expands an area with detailed information about project charges.
|
||||
*/
|
||||
function toggleDetailedInfo(): void {
|
||||
isDetailedInfoShown.value = !isDetailedInfoShown.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UsageAndChargesItem renders correctly 1`] = `
|
||||
<div class="usage-charges-item-container">
|
||||
<div class="usage-charges-item-container__summary">
|
||||
<div class="usage-charges-item-container__summary__name-container">
|
||||
<chargeshideicon-stub></chargeshideicon-stub> <span></span>
|
||||
</div> <span class="usage-charges-item-container__summary__amount">
|
||||
Estimated Total USD $0.00
|
||||
</span>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
|
||||
<div class="usage-charges-item-container">
|
||||
<div class="usage-charges-item-container__summary">
|
||||
<div class="usage-charges-item-container__summary__name-container">
|
||||
<chargesexpandicon-stub></chargesexpandicon-stub> <span></span>
|
||||
</div> <span class="usage-charges-item-container__summary__amount">
|
||||
Estimated Total USD $3.00
|
||||
</span>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container">
|
||||
<div class="usage-charges-item-container__detailed-info-container__info-header"><span class="resource-header">RESOURCE</span> <span class="period-header">PERIOD</span> <span class="usage-header">USAGE</span> <span class="cost-header">COST</span></div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area">
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__resource-container">
|
||||
<p>Storage ($10 per Gigabyte-Month)</p>
|
||||
<p>Egress ($10 per GB)</p>
|
||||
<p>Segments ($0.01 per Segment-Month)</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__period-container">
|
||||
<p>Feb 1 - Feb 1</p>
|
||||
<p>Feb 1 - Feb 1</p>
|
||||
<p>Feb 1 - Feb 1</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__usage-container">
|
||||
<p>0.00 Gigabyte-month</p>
|
||||
<p>0.10 KB</p>
|
||||
<p>0.14 Segment-month</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__cost-container">
|
||||
<p class="price">USD $1.00</p>
|
||||
<p class="price">USD $1.00</p>
|
||||
<p class="price">USD $1.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`UsageAndChargesItem toggling dropdown works correctly 2`] = `
|
||||
<div class="usage-charges-item-container">
|
||||
<div class="usage-charges-item-container__summary">
|
||||
<div class="usage-charges-item-container__summary__name-container">
|
||||
<chargeshideicon-stub></chargeshideicon-stub> <span></span>
|
||||
</div> <span class="usage-charges-item-container__summary__amount">
|
||||
Estimated Total USD $3.00
|
||||
</span>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
@ -4,8 +4,8 @@
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { PaymentsMock } from '../../../mock/api/payments';
|
||||
import { ProjectsApiMock } from '../../../mock/api/projects';
|
||||
import { PaymentsMock } from '../../../../mock/api/payments';
|
||||
import { ProjectsApiMock } from '../../../../mock/api/projects';
|
||||
|
||||
import { makePaymentsModule, PAYMENTS_ACTIONS } from '@/store/modules/payments';
|
||||
import { makeProjectsModule } from '@/store/modules/projects';
|
||||
Loading…
Reference in New Issue
Block a user