feat(payment): create subscribe view to choose sub plan

bimdata · Nov 2, 2021 · 96a1dae · 96a1dae
1 parent af8d05b
commit 96a1dae
Show file tree

Hide file tree

Showing 10 changed files with 350 additions and 1 deletion.
diff --git a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue
@@ -9,7 +9,7 @@
       <BIMDataIcon
         class="breadcrumb-selector__header__icon"
         name="chevron"
-        size="xxs"
+        size="xs"
         :rotate="isOpen ? 90 : 0"
         @click="toggle"
         margin="0 0 1px 6px"

diff --git a/src/components/specific/subscriptions/free-plan-card/FreePlanCard.scss b/src/components/specific/subscriptions/free-plan-card/FreePlanCard.scss
@@ -0,0 +1,61 @@
+.free-plan-card {
+  &.bimdata-card:deep(.bimdata-card__content) {
+    width: 400px;
+    height: 460px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+    padding: calc(var(--spacing-unit) * 5 / 2);
+    font-size: 1rem;
+    background-color: var(--color-white);
+    color: var(--color-primary);
+  }
+
+  &__title {
+    text-transform: uppercase;
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
+  &__price {
+    font-size: 2.2rem;
+    font-weight: bold;
+
+    &::after {
+      content: " *";
+      font-size: 1.1rem;
+      vertical-align: super;
+    }
+  }
+
+  &__separator {
+    width: 260px;
+    height: 1px;
+    margin: var(--spacing-unit) 0;
+    background-color: var(--color-tertiary);
+  }
+
+  &__bullets {
+    margin: var(--spacing-unit) 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2 / 3);
+
+    &__bullet {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-unit);
+      font-weight: bold;
+    }
+  }
+
+  &__note {
+    font-size: 12px;
+    color: var(--color-tertiary-dark);
+
+    &::before {
+      content: "* ";
+    }
+  }
+}
diff --git a/src/components/specific/subscriptions/free-plan-card/FreePlanCard.vue b/src/components/specific/subscriptions/free-plan-card/FreePlanCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <BIMDataCard class="free-plan-card">
+    <template #content>
+      <div class="free-plan-card__title">
+        {{ $t("FreePlanCard.title") }}
+      </div>
+      <div class="free-plan-card__price">
+        {{ $t("FreePlanCard.price") }}
+      </div>
+      <div class="free-plan-card__separator"></div>
+      <div class="free-plan-card__bullets">
+        <div class="free-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("FreePlanCard.bullet1") }}</span>
+        </div>
+        <div class="free-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("FreePlanCard.bullet2") }}</span>
+        </div>
+        <div class="free-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("FreePlanCard.bullet3") }}</span>
+        </div>
+      </div>
+      <BIMDataButton width="240px" color="primary" fill radius>
+        {{ $t("FreePlanCard.buttonText") }}
+      </BIMDataButton>
+      <div class="free-plan-card__note">
+        {{ $t("FreePlanCard.note") }}
+      </div>
+    </template>
+  </BIMDataCard>
+</template>
+
+<script>
+import { useRouter } from "vue-router";
+import { routeNames } from "@/router/index.js";
+
+export default {
+  setup() {
+    const router = useRouter();
+
+    const goToSubscriptionFree = () => {
+      router.push({ name: routeNames.subscriptionFree });
+    };
+
+    return {
+      // Methods
+      goToSubscriptionFree
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./FreePlanCard.scss"></style>
diff --git a/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.scss b/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.scss
@@ -0,0 +1,54 @@
+.pro-plan-card {
+  &.bimdata-card:deep(.bimdata-card__content) {
+    width: 400px;
+    height: 460px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+    padding: calc(var(--spacing-unit) * 5 / 2);
+    font-size: 1rem;
+    background-color: var(--color-primary);
+    color: var(--color-white);
+  }
+
+  &__title {
+    text-transform: uppercase;
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
+  &__price {
+    font-size: 2.2rem;
+    font-weight: bold;
+  }
+
+  &__separator {
+    width: 260px;
+    height: 1px;
+    margin: var(--spacing-unit) 0;
+    background-color: var(--color-tertiary);
+  }
+
+  &__bullets {
+    margin: var(--spacing-unit) 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2 / 3);
+
+    &__bullet {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-unit);
+      font-weight: bold;
+    }
+  }
+
+  &__note {
+    font-size: 12px;
+
+    &::before {
+      content: "** ";
+    }
+  }
+}
diff --git a/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.vue b/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <BIMDataCard class="pro-plan-card">
+    <template #content>
+      <div class="pro-plan-card__title">
+        {{ $t("ProPlanCard.title") }}
+      </div>
+      <div class="pro-plan-card__price">
+        {{ $t("ProPlanCard.price") }}
+      </div>
+      <div class="pro-plan-card__separator"></div>
+      <div class="pro-plan-card__bullets">
+        <div class="pro-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("ProPlanCard.bullet1") }}</span>
+        </div>
+        <div class="pro-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("ProPlanCard.bullet2") }}</span>
+        </div>
+        <div class="pro-plan-card__bullets__bullet">
+          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <span>{{ $t("ProPlanCard.bullet3") }}</span>
+        </div>
+      </div>
+      <BIMDataButton width="240px" color="secondary" fill radius>
+        {{ $t("ProPlanCard.buttonText") }}
+      </BIMDataButton>
+      <div class="pro-plan-card__note">
+        {{ $t("ProPlanCard.note") }}
+      </div>
+    </template>
+  </BIMDataCard>
+</template>
+
+<script>
+import { useRouter } from "vue-router";
+import { routeNames } from "@/router/index.js";
+
+export default {
+  setup() {
+    const router = useRouter();
+
+    const goToSubscriptionPlatform = () => {
+      router.push({ name: routeNames.subscriptionPlatform });
+    };
+
+    return {
+      // Methods
+      goToSubscriptionPlatform
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./ProPlanCard.scss"></style>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
@@ -37,6 +37,9 @@
   "SpaceBoard": {
     "searchInputPlaceholder": "Search projects"
   },
+  "Subscribe": {
+    "title": "Choose your plan"
+  },
   "SubscriptionDatapack": {
     "title": "Add DataPack"
   },
@@ -275,6 +278,16 @@
     }
   },
 
+  "FreePlanCard": {
+    "title": "FREE",
+    "price": "0€",
+    "bullet1": "300 MB",
+    "bullet2": "1 Free space",
+    "bullet3": "6 Users",
+    "buttonText": "Create a free space",
+    "note": "Forever"
+  },
+
   "GroupCardActionMenu": {
     "renameButtonText": "Rename",
     "changeColorButtonText": "Change color",
@@ -563,6 +576,16 @@
     "searchInputPlaceholder": "Search user"
   },
 
+  "ProPlanCard": {
+    "title": "PROFESSIONAL",
+    "price": "30€ / Space / month",
+    "bullet1": "10 GB **",
+    "bullet2": "Unlimited projects",
+    "bullet3": "Unlimited users",
+    "buttonText": "Choose professional",
+    "note": "expand 1GB for 10€ / month"
+  },
+
   "SpaceCard": {
     "projects": "PROJECTS"
   },

diff --git a/src/i18n/lang/fr.json b/src/i18n/lang/fr.json
@@ -37,6 +37,10 @@
   "SpaceBoard": {
     "searchInputPlaceholder": "Rechercher un projet"
   },
+  "Subscribe": {
+    "title": "Choisissez votre abonnement",
+    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  },
   "SubscriptionDatapack": {
     "title": "Ajout d'un DataPack"
   },
@@ -275,6 +279,16 @@
     }
   },
 
+  "FreePlanCard": {
+    "title": "FREE",
+    "price": "0€",
+    "bullet1": "300 MB",
+    "bullet2": "1 Espace gratuit",
+    "bullet3": "6 Utilisateurs",
+    "buttonText": "Créer un espace gratuit",
+    "note": "Pour toujours"
+  },
+
   "GroupCardActionMenu": {
     "renameButtonText": "Renommer",
     "changeColorButtonText": "Modifier la couleur",
@@ -567,6 +581,16 @@
     "searchInputPlaceholder": "Rechercher un utilisateur"
   },
 
+  "ProPlanCard": {
+    "title": "PROFESSIONEL",
+    "price": "30€ / Espace / mois",
+    "bullet1": "10 GB",
+    "bullet2": "Projets illimités",
+    "bullet3": "Utilisateurs illimités",
+    "buttonText": "Souscrire",
+    "note": "extensible pour 10€ / GB / mois"
+  },
+
   "SpaceCard": {
     "projects": "PROJETS"
   },

diff --git a/src/router/index.js b/src/router/index.js
@@ -37,6 +37,8 @@ const ProjectGroups = () =>
   import(/* webpackChunkName: "project-groups" */ "@/views/project-groups/ProjectGroups.vue");
 const SpaceBoard = () =>
   import(/* webpackChunkName: "space-board" */ "@/views/space-board/SpaceBoard.vue");
+const Subscribe = () =>
+  import(/* webpackChunkName: "subscribe" */ "@/views/subscribe/Subscribe.vue");
 const SubscriptionDatapack = () =>
   import(/* webpackChunkName: "subscription-datapack" */ "@/views/subscription-datapack/SubscriptionDatapack.vue");
 const SubscriptionPlatform = () =>
@@ -59,6 +61,8 @@ const routeNames = Object.freeze({
   spaceBoard: "space-board",
   userProjects: "user-projects",
   userSubscriptions: "user-subscriptions",
+  subscribe: "subscribe",
+  subscriptionFree: "subscription-free",
   subscriptionPlatform: "subscription-platform",
   subscriptionDatapack: "subscription-datapack",
   projectBoard: "project-board",
@@ -99,6 +103,14 @@ const routes = [
         name: routeNames.userSubscriptions,
         component: UserSubscriptions
       },
+      {
+        path: "/subscribe",
+        name: routeNames.subscribe,
+        component: Subscribe,
+        meta: {
+          guard: null // TODO
+        }
+      },
       {
         path: "/subscription/platform",
         name: routeNames.subscriptionPlatform,

diff --git a/src/views/subscribe/Subscribe.scss b/src/views/subscribe/Subscribe.scss
@@ -0,0 +1,24 @@
+.subscribe {
+  &__title {
+    height: 32px;
+    margin: 0;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 3);
+    margin-top: calc(var(--spacing-unit) * 3);
+
+    &__text {
+      width: 560px;
+      text-align: center;
+    }
+
+    &__content {
+      display: flex;
+      gap: calc(var(--spacing-unit) * 3);
+    }
+  }
+}