web/satellite: update modals for create projects
Update to use NewCreateProjectModal to match figma designs and update CreateProjectPromptModal to handle free tier case and paid tier increase project limits case Issue https://github.com/storj/storj/issues/5814 Change-Id: I8c5f818d3867d0484b213d1bfc3ce51e904c0afa
This commit is contained in:
Lizzy Thomson
Storj Robot
parent
7d745ac578
commit
6f2d6a97a6
@ -5,24 +5,33 @@
|
||||
<VModal :on-close="closeModal">
|
||||
<template #content>
|
||||
<div class="modal">
|
||||
<img
|
||||
class="modal__icon"
|
||||
src="@/../static/images/account/billing/paidTier/prompt.png"
|
||||
alt="Prompt Image"
|
||||
>
|
||||
<h1 class="modal__title" aria-roledescription="modal-title">
|
||||
Get more projects<br>when you upgrade
|
||||
</h1>
|
||||
<p class="modal__info">
|
||||
Upgrade your Free Account to create<br>more projects and gain access to higher limits.
|
||||
<div class="modal__header">
|
||||
<ProjectIcon />
|
||||
<h1 class="modal__header__title">Get more projects</h1>
|
||||
</div>
|
||||
<p v-if="!user.paidTier" class="modal__info">
|
||||
Upgrade to Pro Account to create more projects and gain access to higher limits.
|
||||
</p>
|
||||
<div class="modal__btn">
|
||||
<p v-else class="modal__info">
|
||||
Request project limits increase.
|
||||
</p>
|
||||
<div class="modal__buttons">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
:on-press="closeModal"
|
||||
width="100%"
|
||||
height="56px"
|
||||
border-radius="8px"
|
||||
label="Upgrade to Pro Account ->"
|
||||
height="48px"
|
||||
font-size="14px"
|
||||
border-radius="10px"
|
||||
is-white
|
||||
/>
|
||||
<VButton
|
||||
:label="buttonLabel()"
|
||||
:on-press="onClick"
|
||||
width="100%"
|
||||
height="48px"
|
||||
font-size="14px"
|
||||
border-radius="10px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,18 +42,42 @@
|
||||
<script setup lang="ts">
|
||||
import { MODALS } from '@/utils/constants/appStatePopUps';
|
||||
import { useAppStore } from '@/store/modules/appStore';
|
||||
import { useUsersStore } from '@/store/modules/usersStore';
|
||||
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
import VModal from '@/components/common/VModal.vue';
|
||||
|
||||
import ProjectIcon from '@/../static/images/common/blueBox.svg';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUsersStore();
|
||||
const user = userStore.state.user;
|
||||
|
||||
/**
|
||||
* Button text logic depending on if the user is in the free or paid tier.
|
||||
*/
|
||||
function buttonLabel(): string {
|
||||
let label = 'Upgrade -->';
|
||||
|
||||
if (user.paidTier) {
|
||||
label = 'Request -->';
|
||||
}
|
||||
|
||||
return label;
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on button click logic.
|
||||
* Closes this modal and opens upgrade account modal.
|
||||
* Closes this modal
|
||||
* Redirects to upgrade modal or opens new tab to request increase project limits .
|
||||
*/
|
||||
function onClick(): void {
|
||||
if (!user.paidTier) {
|
||||
appStore.updateActiveModal(MODALS.upgradeAccount);
|
||||
} else {
|
||||
appStore.removeActiveModal();
|
||||
window.open('https://supportdcs.storj.io/hc/en-us/requests/new?ticket_form_id=360000683212', '_blank', 'noopener');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -56,71 +89,48 @@ function closeModal(): void {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal {
|
||||
width: 600px;
|
||||
padding: 54px 0 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.modal {
|
||||
width: 414px;
|
||||
padding: 32px;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width <= 375px) {
|
||||
width: unset;
|
||||
padding: 54px 24px 65px;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 450px) {
|
||||
padding: 54px 12px 32px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
max-height: 154px;
|
||||
max-width: 118px;
|
||||
|
||||
@media screen and (width <= 450px) {
|
||||
max-height: 127px;
|
||||
max-width: 97px;
|
||||
}
|
||||
}
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid var(--c-grey-2);
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
color: #1b2533;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (width <= 450px) {
|
||||
margin-top: 24px;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
line-height: 31px;
|
||||
color: var(--c-black);
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
color: #354049;
|
||||
margin: 15px 0 45px;
|
||||
|
||||
@media screen and (width <= 450px) {
|
||||
margin: 10px 0 24px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
margin-top: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
&__buttons {
|
||||
border-top: 1px solid var(--c-grey-2);
|
||||
margin-top: 16px;
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 256px;
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
width: 224px;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
column-gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -435,11 +435,11 @@ function onCreateLinkClick(): void {
|
||||
const user: User = usersStore.state.user;
|
||||
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
|
||||
|
||||
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
|
||||
if (!user.paidTier || user.projectLimit === ownProjectsCount) {
|
||||
appStore.updateActiveModal(MODALS.createProjectPrompt);
|
||||
} else {
|
||||
analytics.pageVisit(RouteConfig.CreateProject.path);
|
||||
appStore.updateActiveModal(MODALS.createProject);
|
||||
appStore.updateActiveModal(MODALS.newCreateProject);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -308,11 +308,11 @@ function onCreateLinkClick(): void {
|
||||
const user: User = userStore.state.user;
|
||||
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
|
||||
|
||||
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
|
||||
if (!user.paidTier || user.projectLimit === ownProjectsCount) {
|
||||
appStore.updateActiveModal(MODALS.createProjectPrompt);
|
||||
} else {
|
||||
analytics.pageVisit(RouteConfig.CreateProject.path);
|
||||
appStore.updateActiveModal(MODALS.createProject);
|
||||
appStore.updateActiveModal(MODALS.newCreateProject);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -133,11 +133,11 @@ function navigateToNewProject(): void {
|
||||
const user: User = usersStore.state.user;
|
||||
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
|
||||
|
||||
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
|
||||
if (!user.paidTier || user.projectLimit === ownProjectsCount) {
|
||||
appStore.updateActiveModal(MODALS.createProjectPrompt);
|
||||
} else {
|
||||
analytics.pageVisit(RouteConfig.CreateProject.path);
|
||||
appStore.updateActiveModal(MODALS.createProject);
|
||||
appStore.updateActiveModal(MODALS.newCreateProject);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -117,11 +117,11 @@ function onCreateClick(): void {
|
||||
const user: User = usersStore.state.user;
|
||||
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
|
||||
|
||||
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
|
||||
if (!user.paidTier || user.projectLimit === ownProjectsCount) {
|
||||
appStore.updateActiveModal(MODALS.createProjectPrompt);
|
||||
} else {
|
||||
analytics.pageVisit(RouteConfig.CreateProject.path);
|
||||
appStore.updateActiveModal(MODALS.createProject);
|
||||
appStore.updateActiveModal(MODALS.newCreateProject);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user