JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: reworked upgrade to Pro account modal

Browse Source 
Reworked the modal to correspond to latest designs.
Added prices and updated copies.

Change-Id: I6e59fdfe4222e02fcc35ac5d594bdc0bdf52a63c
This commit is contained in:
Vitalii Shpital 2021-09-15 19:42:21 +03:00
parent 3c3df0f362
commit 86845351c3
2 changed files with 222 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
web/satellite/src/components/account/billing/paidTier/AddPaymentMethodModal.vue
View File

@ -4,16 +4,18 @@
<template>
<div class="pm-area">
<div v-if="isAddModal" class="pm-area__add-modal">
<h1 class="pm-area__add-modal__title">Add a Payment Method</h1>
<div class="pm-area__add-modal__header">
<h2 class="pm-area__add-modal__header__sub-title">Payment Method</h2>
<div class="pm-area__add-modal__header__choices">
<p class="pm-area__add-modal__header__choices__var" :class="{active: isAddCard}" @click.stop="setIsAddCard">
Card
</p>
<p class="pm-area__add-modal__header__choices__var left-margin" :class="{active: !isAddCard}" @click.stop="setIsAddToken">
<div class="pm-area__add-modal__top">
<h1 class="pm-area__add-modal__top__title">Upgrade to Pro Account</h1>
<div class="pm-area__add-modal__top__header">
<p class="pm-area__add-modal__top__header__sub-title">Add Payment Method</p>
<div class="pm-area__add-modal__top__header__choices">
<p class="pm-area__add-modal__top__header__choices__var" :class="{active: !isAddCard}" @click.stop="setIsAddToken">
STORJ Token
</p>
<p class="pm-area__add-modal__top__header__choices__var left-margin" :class="{active: isAddCard}" @click.stop="setIsAddCard">
Card
</p>
</div>
</div>
</div>
<div v-if="isAddCard" class="pm-area__add-modal__card">
@ -25,22 +27,11 @@
<VButton
width="100%"
height="48px"
border-radius="32px"
label="Add Credit Card"
:on-press="onAddCardClick"
/>
<p class="pm-area__add-modal__card__info">Upgrade to Pro Account by adding a credit card.</p>
<div class="pm-area__add-modal__card__info-bullet">
<CheckMarkIcon />
<p class="pm-area__add-modal__card__info-bullet__label">3 projects</p>
</div>
<div class="pm-area__add-modal__card__info-bullet">
<CheckMarkIcon />
<p class="pm-area__add-modal__card__info-bullet__label">25TB storage per project.</p>
</div>
<div class="pm-area__add-modal__card__info-bullet">
<CheckMarkIcon />
<p class="pm-area__add-modal__card__info-bullet__label">100TB egress bandwidth per project.</p>
</div>
<p class="pm-area__add-modal__card__info">Pay as you go, no contract required.</p>
</div>
<div v-else class="pm-area__add-modal__tokens">
<p class="pm-area__add-modal__tokens__banner">
@ -54,6 +45,7 @@
<VButton
width="100%"
height="48px"
border-radius="32px"
label="Continue to Coin Payments"
:on-press="onAddSTORJClick"
/>
@ -68,12 +60,11 @@
</a>
</div>
<p class="pm-area__add-modal__tokens__note">
<b class="pm-area__add-modal__tokens__note__bold">Please Note:</b>
Your deposit in STORJ Tokens is applied to your account after Coin Payments verifies payment.
Please Note: Your first deposit of $50 or more in STORJ Token is applied to your account after Coin
Payments verifies payment.
</p>
<p class="pm-area__add-modal__tokens__info">
The amount of STORJ Tokens has to cover 3 months worth of usage to get higher limits. After
depositing, please contact
After depositing STORJ Tokens, please contact
<a
class="pm-area__add-modal__tokens__info__link"
:href="limitsIncreaseRequestURL"
@ -85,6 +76,43 @@
to assist you for accessing your higher limits!
</p>
</div>
<div class="pm-area__add-modal__bullets">
<div class="pm-area__add-modal__bullets__left">
<h2 class="pm-area__add-modal__bullets__left__title">Pro Account includes:</h2>
<div class="pm-area__add-modal__bullets__left__item">
<CheckMarkIcon />
<p class="pm-area__add-modal__bullets__left__item__label">3 projects</p>
</div>
<div class="pm-area__add-modal__bullets__left__item">
<CheckMarkIcon />
<p class="pm-area__add-modal__bullets__left__item__label">100 buckets per project</p>
</div>
<div class="pm-area__add-modal__bullets__left__item">
<CheckMarkIcon />
<p class="pm-area__add-modal__bullets__left__item__label">25 TB storage per project</p>
</div>
<div class="pm-area__add-modal__bullets__left__item">
<CheckMarkIcon />
<p class="pm-area__add-modal__bullets__left__item__label">100 TB egress bandwidth per project</p>
</div>
<div class="pm-area__add-modal__bullets__left__item">
<CheckMarkIcon />
<p class="pm-area__add-modal__bullets__left__item__label">100 request per second rate limit</p>
</div>
</div>
<div class="pm-area__add-modal__bullets__right">
<h2 class="pm-area__add-modal__bullets__right__title">Storage price:</h2>
<div class="pm-area__add-modal__bullets__right__item">
<p class="pm-area__add-modal__bullets__right__item__price">$4</p>
<p class="pm-area__add-modal__bullets__right__item__label">TB / month</p>
</div>
<h2 class="pm-area__add-modal__bullets__right__title top-margin">Bandwidth price:</h2>
<div class="pm-area__add-modal__bullets__right__item">
<p class="pm-area__add-modal__bullets__right__item__price">$7</p>
<p class="pm-area__add-modal__bullets__right__item__label">TB</p>
</div>
</div>
</div>
<div class="pm-area__add-modal__security">
<LockImage />
<p class="pm-area__add-modal__security__info">
@ -103,12 +131,16 @@
</div>
</div>
<div v-else class="pm-area__success-modal">
<BigCheckMarkIcon class="pm-area__success-modal__icon" />
<BigCheckMarkIcon />
<h2 class="pm-area__success-modal__title">Congratulations!</h2>
<h2 class="pm-area__success-modal__title">You’ve just upgraded your account.</h2>
<h2 class="pm-area__success-modal__sub-title">You've just upgraded to a Pro Account.</h2>
<p class="pm-area__success-modal__info">
Now you can have up to 75TB of total storage and 300TB of egress bandwidth per month. If you need more,
please
Now you can have up to
<b class="pm-area__success-modal__info__bold">75TB</b>
of total storage and
<b>300TB</b>
of egress bandwidth per month. If you need more
than this, please
<a
class="pm-area__success-modal__info__link"
:href="limitsIncreaseRequestURL"
@ -119,6 +151,13 @@
</a>
.
</p>
<VButton
width="100%"
height="48px"
border-radius="32px"
label="Done"
:on-press="onClose"
/>
<div class="close-cross-container" @click="onClose">
<CloseCrossIcon />
</div>
@ -134,7 +173,7 @@ import TokenDepositSelection from '@/components/account/billing/paymentMethods/T
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import LockImage from '@/../static/images/account/billing/lock.svg';
import LockImage from '@/../static/images/account/billing/greyLock.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import CheckMarkIcon from '@/../static/images/common/greenRoundCheckmark.svg';
import BigCheckMarkIcon from '@/../static/images/common/greenRoundCheckmarkBig.svg';
@ -310,18 +349,20 @@ export default class AddPaymentMethodModal extends Vue {
font-family: 'font_regular', sans-serif;
&__add-modal {
background: #fff;
border-radius: 8px;
width: 660px;
background: #fcfcfc;
border-radius: 32px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.04);
width: 760px;
position: relative;
padding: 45px;
padding-top: 50px;
&__top {
padding: 0 50px;
&__title {
width: 100%;
text-align: center;
font-family: 'font_bold', sans-serif;
font-size: 24px;
line-height: 29px;
font-size: 36px;
line-height: 44px;
color: #1b2533;
margin-bottom: 40px;
}
@ -333,7 +374,6 @@ export default class AddPaymentMethodModal extends Vue {
margin-bottom: 30px;
&__sub-title {
font-family: 'font_medium', sans-serif;
font-size: 18px;
line-height: 22px;
color: #000;
@ -348,52 +388,41 @@ export default class AddPaymentMethodModal extends Vue {
font-weight: 600;
font-size: 14px;
line-height: 18px;
color: #a9b5c1;
color: #0149ff;
padding: 0 10px 5px 10px;
cursor: pointer;
border-bottom: 3px solid #fff;
}
}
}
}
&__card {
padding-bottom: 20px;
padding: 0 50px;
margin-bottom: 20px;
&__stripe {
margin: 20px 0;
}
&__info {
margin: 50px 0 30px 0;
font-size: 16px;
line-height: 26px;
color: #000;
}
&__info-bullet {
display: flex;
align-items: center;
margin-bottom: 20px;
&__label {
margin-left: 12px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.473506px;
color: #000;
}
margin-top: 20px;
font-size: 12px;
line-height: 19px;
text-align: center;
color: #a8a8a8;
}
}
&__tokens {
padding-bottom: 30px;
padding: 0 50px;
margin-bottom: 30px;
&__banner {
font-size: 14px;
line-height: 20px;
color: #384761;
padding: 20px 30px;
padding: 20px 35px;
background: #edf4fe;
border-radius: 8px;
margin-bottom: 25px;
@ -418,19 +447,14 @@ export default class AddPaymentMethodModal extends Vue {
&__note {
font-size: 14px;
line-height: 20px;
color: #7b8eab;
color: #14142a;
margin: 25px 0;
&__bold {
font-family: 'font_medium', sans-serif;
margin-right: 3px;
}
}
&__info {
font-size: 16px;
line-height: 26px;
color: #000;
font-size: 14px;
line-height: 20px;
color: #14142a;
&__link {
font-family: 'font_medium', sans-serif;
@ -438,7 +462,73 @@ export default class AddPaymentMethodModal extends Vue {
text-underline-position: under;
&:visited {
color: #14142a;
}
}
}
}
&__bullets {
background: #f0f0f0;
padding: 35px 50px 90px 50px;
border-radius: 0 0 32px 32px;
display: flex;
&__left {
width: 50%;
border-right: 1px solid #ccc;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 26px;
color: #000;
margin-bottom: 5px;
}
&__item {
display: flex;
align-items: center;
margin-top: 12px;
&__label {
margin-left: 12px;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.473506px;
color: #000;
}
}
}
&__right {
padding-left: 50px;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 26px;
color: #000;
margin-bottom: 5px;
}
&__item {
display: flex;
align-items: flex-start;
letter-spacing: 0.473506px;
&__price {
font-family: 'font_bold', sans-serif;
font-size: 42px;
color: #0149ff;
}
&__label {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 20px;
color: #a9a9a9;
margin: 5px 0 0 5px;
}
}
}
@ -452,15 +542,15 @@ export default class AddPaymentMethodModal extends Vue {
bottom: 0;
left: 0;
right: 0;
background: #cef0e3;
background: #fff;
border-radius: 32px;
padding: 15px 0;
border-radius: 0 0 8px 8px;
&__info {
font-weight: 500;
font-size: 15px;
line-height: 18px;
color: #1a9666;
color: #3f3f3f;
margin-left: 12px;
}
}
@ -484,38 +574,41 @@ export default class AddPaymentMethodModal extends Vue {
}
&__success-modal {
background: #fff;
border-radius: 8px;
width: 660px;
width: 480px;
position: relative;
padding: 45px 45px 80px 45px;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
background: #fcfcfc;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.04);
border-radius: 32px;
&__icon {
margin-bottom: 15px;
&__title,
&__sub-title {
font-size: 36px;
line-height: 54px;
color: #000;
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 28px;
line-height: 42px;
text-align: center;
color: #000;
margin-top: 20px;
}
&__sub-title {
margin-top: 15px;
}
&__info {
margin-top: 40px;
font-size: 16px;
line-height: 28px;
text-align: center;
margin: 35px 0 48px 0;
font-size: 18px;
line-height: 32px;
color: #000;
max-width: 380px;
&__bold {
font-family: 'font_bold', sans-serif;
}
&__link {
font-family: 'font_medium', sans-serif;
font-family: 'font_bold', sans-serif;
text-decoration: underline !important;
text-underline-position: under;
@ -547,9 +640,12 @@ export default class AddPaymentMethodModal extends Vue {
margin-left: 20px;
}
.top-margin {
margin-top: 25px;
}
.active {
color: #0068dc;
border-color: #0068dc;
border-color: #0149ff;
}
::v-deep .selected-container {
@ -565,7 +661,7 @@ export default class AddPaymentMethodModal extends Vue {
width: 100%;
}
@media screen and (max-height: 700px) {
@media screen and (max-height: 900px) {
.pm-area {
padding: 200px 0 20px 0;

4
web/satellite/static/images/account/billing/greyLock.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 8.33398V10.834C9.63365 10.8346 9.27773 10.956 8.98727 11.1792C8.69681 11.4025 8.488 11.7152 8.39313 12.0691C8.29827 12.4229 8.32263 12.7982 8.46245 13.1368C8.60228 13.4754 8.84978 13.7585 9.16667 13.9423V15.0007C9.16667 15.2217 9.25446 15.4336 9.41074 15.5899C9.56702 15.7462 9.77899 15.834 10 15.834V18.334H4.16667C3.72464 18.334 3.30072 18.1584 2.98816 17.8458C2.67559 17.5333 2.5 17.1093 2.5 16.6673V10.0007C2.5 9.08398 3.25 8.33398 4.16667 8.33398H10Z" fill="#3F3F3F"/>
<path d="M9.9987 15.8337C10.2197 15.8337 10.4317 15.7459 10.588 15.5896C10.7442 15.4333 10.832 15.2213 10.832 15.0003V13.942C11.1489 13.7582 11.3964 13.4751 11.5362 13.1364C11.6761 12.7978 11.7004 12.4226 11.6056 12.0687C11.5107 11.7149 11.3019 11.4021 11.0114 11.1789C10.721 10.9556 10.365 10.8343 9.9987 10.8337V8.33366H12.4987V5.83366C12.4987 5.17062 12.2353 4.53473 11.7665 4.06589C11.2976 3.59705 10.6617 3.33366 9.9987 3.33366C9.33566 3.33366 8.69977 3.59705 8.23093 4.06589C7.76209 4.53473 7.4987 5.17062 7.4987 5.83366V8.33366H5.83203V5.83366C5.83203 4.72859 6.27102 3.66878 7.05242 2.88738C7.83382 2.10598 8.89363 1.66699 9.9987 1.66699C11.1038 1.66699 12.1636 2.10598 12.945 2.88738C13.7264 3.66878 14.1654 4.72859 14.1654 5.83366V8.33366H15.832C16.2741 8.33366 16.698 8.50925 17.0105 8.82181C17.3231 9.13438 17.4987 9.5583 17.4987 10.0003V16.667C17.4987 17.109 17.3231 17.5329 17.0105 17.8455C16.698 18.1581 16.2741 18.3337 15.832 18.3337H9.9987V15.8337Z" fill="#3F3F3F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB