web/satellite: update estimated charges info message
Updated message to be more clear, and changed "estimated charges" to "estimated usage". This should make this card in the billing UI less confusing. Updated styling. Issue: https://github.com/storj/storj/issues/6150 Change-Id: I5de4d72dfd437d4f6bda882f5b779b2217e84f98
This commit is contained in:
Vitalii
Moby von Briesen
parent
9ddc8b4ca3
commit
5abed63f53
@ -13,20 +13,20 @@
|
||||
<EstimatedChargesIcon class="total-cost__card__main-icon" />
|
||||
<p class="total-cost__card__money-text">{{ centsToDollars(priceSummary) }}</p>
|
||||
<p class="total-cost__card__label-text">
|
||||
Total Estimated Charges
|
||||
<img
|
||||
src="@/../static/images/common/smallGreyWhiteInfo.png"
|
||||
alt="info icon"
|
||||
@mouseenter="showChargesTooltip = true"
|
||||
@mouseleave="showChargesTooltip = false"
|
||||
>
|
||||
Total Estimated Usage
|
||||
<VInfo class="total-cost__card__label-text__info">
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<span class="total-cost__card__label-text__info__inner">
|
||||
This estimate includes all use before subtracting any discounts.
|
||||
Pro accounts will only be charged for usage above the free tier limits,
|
||||
and free accounts will not be charged.
|
||||
</span>
|
||||
</template>
|
||||
</VInfo>
|
||||
</p>
|
||||
<div
|
||||
v-if="showChargesTooltip"
|
||||
class="total-cost__card__charges-tooltip"
|
||||
>
|
||||
<span class="total-cost__card__charges-tooltip__tooltip-text">If you still have Storage and Egress remaining in your free tier, you won't be charged. This information is to help you estimate what the charges would have been had you graduated to the paid tier.</span>
|
||||
</div>
|
||||
<p
|
||||
class="total-cost__card__link-text"
|
||||
@click="routeToBillingHistory"
|
||||
@ -104,10 +104,12 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
|
||||
|
||||
import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
import VInfo from '@/components/common/VInfo.vue';
|
||||
|
||||
import EstimatedChargesIcon from '@/../static/images/account/billing/totalEstimatedChargesIcon.svg';
|
||||
import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg';
|
||||
import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
|
||||
import InfoIcon from '@/../static/images/billing/blueInfoIcon.svg';
|
||||
|
||||
const analyticsStore = useAnalyticsStore();
|
||||
const billingStore = useBillingStore();
|
||||
@ -115,7 +117,6 @@ const projectsStore = useProjectsStore();
|
||||
const notify = useNotify();
|
||||
const router = useRouter();
|
||||
|
||||
const showChargesTooltip = ref<boolean>(false);
|
||||
const isDataFetching = ref<boolean>(true);
|
||||
const currentDate = ref<string>('');
|
||||
|
||||
@ -234,7 +235,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
&__card {
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgb(0 0 0 / 4%);
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
@ -254,11 +254,34 @@ onMounted(async () => {
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__info {
|
||||
margin-left: 8px;
|
||||
max-height: 15px;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
||||
:deep(path) {
|
||||
fill: var(--c-black);
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
color: var(--c-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-weight: 500;
|
||||
width: fit-content;
|
||||
font-family: 'font-medium', sans-serif;
|
||||
text-decoration: underline;
|
||||
text-underline-position: under;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -269,53 +292,6 @@ onMounted(async () => {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__charges-tooltip {
|
||||
top: 5px;
|
||||
left: 86px;
|
||||
|
||||
@media screen and (width <= 635px) {
|
||||
top: 5px;
|
||||
left: -21px;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
background: var(--c-grey-6);
|
||||
border-radius: 6px;
|
||||
width: 253px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 8px;
|
||||
z-index: 1;
|
||||
transition: 250ms;
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
|
||||
@media screen and (width <= 635px) {
|
||||
left: 90%;
|
||||
}
|
||||
|
||||
top: 100%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-top-color: var(--c-grey-6);
|
||||
border-bottom: 0;
|
||||
margin-left: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
&__tooltip-text {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -337,4 +313,36 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.info__box) {
|
||||
width: 310px;
|
||||
left: calc(50% - 155px);
|
||||
top: unset;
|
||||
bottom: 15px;
|
||||
cursor: default;
|
||||
filter: none;
|
||||
transform: rotate(-180deg);
|
||||
|
||||
@media screen and (width <= 385px) {
|
||||
left: calc(50% - 210px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.info__box__message) {
|
||||
background: var(--c-grey-6);
|
||||
border-radius: 6px;
|
||||
padding: 10px 8px;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
:deep(.info__box__arrow) {
|
||||
background: var(--c-grey-6);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-bottom: -3px;
|
||||
|
||||
@media screen and (width <= 385px) {
|
||||
margin: 0 0 -3px -111px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 536 B |
Loading…
Reference in New Issue
Block a user