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

web/satellite/src/components/modals/CreateProjectPromptModal.vue

@@ -5,24 +5,33 @@
     <VModal :on-close="closeModal">
         <template #content>
             <div class="modal">
-                <img
+                <div class="modal__header">
-                    class="modal__icon"
+                    <ProjectIcon />
-                    src="@/../static/images/account/billing/paidTier/prompt.png"
+                    <h1 class="modal__header__title">Get more projects</h1>
-                    alt="Prompt Image"
+                </div>
-                >
+                <p v-if="!user.paidTier" class="modal__info">
-                <h1 class="modal__title" aria-roledescription="modal-title">
+                    Upgrade to Pro Account to create more projects and gain access to higher limits.
-                    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.
                 </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"
+                        height="48px"
-                        border-radius="8px"
+                        font-size="14px"
-                        label="Upgrade to Pro Account ->"
+                        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 {
+.modal {
-        width: 600px;
+    width: 414px;
-        padding: 54px 0 65px;
+    padding: 32px;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
     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) {
+    &__header {
-            padding: 54px 12px 32px;
+        display: flex;
-        }
+        align-items: center;
-
+        padding-bottom: 16px;
-        &__icon {
+        margin-bottom: 16px;
-            max-height: 154px;
+        border-bottom: 1px solid var(--c-grey-2);
-            max-width: 118px;
-
-            @media screen and (width <= 450px) {
-                max-height: 127px;
-                max-width: 97px;
-            }
-        }
 
         &__title {
             font-family: 'font_bold', sans-serif;
-            font-size: 28px;
+            font-weight: 800;
-            line-height: 34px;
-            color: #1b2533;
-            margin-top: 40px;
-            text-align: center;
-
-            @media screen and (width <= 450px) {
-                margin-top: 24px;
             font-size: 24px;
             line-height: 31px;
+            color: var(--c-black);
+            margin-left: 16px;
         }
     }
 
     &__info {
-            font-family: 'font_regular', sans-serif;
+        font-weight: 400;
-            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-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;
+        align-items: center;
-            width: 256px;
+        column-gap: 16px;
-
-            @media screen and (width <= 768px) {
-                width: 224px;
-            }
-        }
     }
+}
 </style>

web/satellite/src/components/navigation/MobileNavigation.vue

@@ -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);
         }
     }
 

web/satellite/src/components/navigation/ProjectSelection.vue

@@ -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);
         }
     }
 

web/satellite/src/components/navigation/QuickStartLinks.vue

@@ -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);
         }
     }
 

web/satellite/src/components/projectsList/ProjectsList.vue

@@ -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);
     }
 }