feat(payment): put plans storage values into env + get price data fro…

…m Paddle instead of hard coding them
bimdata · Nov 5, 2021 · 6de3d9e · 6de3d9e
1 parent 177003e
commit 6de3d9e
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 112 deletions.
diff --git a/.env.example b/.env.example
@@ -14,8 +14,8 @@ VUE_APP_AUTHORIZED_IDENTITY_PROVIDERS=bimdataconnect
 
 # Mapbox auth token
 VUE_APP_MAPBOX_TOKEN=pk.eyJ1IjoiYmltZGF0YSIsImEiOiJjanRrM3ljcW8yeHB1NGFwODNjZGY1czd2In0.EvPADmXo97ZLl4A_7vs59A
-# Maximum size (in bytes) for any individual file to upload (here: 1GB)
-VUE_APP_MAX_UPLOAD_SIZE=1000000000
+# Maximum size (in bytes) for any individual file to upload (here: 1GB = 1024^3)
+VUE_APP_MAX_UPLOAD_SIZE=1073741824
 
 # External pages/applications
 VUE_APP_URL_BIMDATACONNECT=https://connect-staging.bimdata.io
@@ -24,7 +24,17 @@ VUE_APP_URL_MARKETPLACE=https://marketplace-staging.bimdata.io
 VUE_APP_URL_OLD_PLATFORM=https://platform-old-staging.bimdata.io
 
 # Subscription config
-VUE_APP_SUBSCRIPTION_ENABLED=false
-VUE_APP_PLATFORM_SUBSCRIPTION_PLAN_ID=
-VUE_APP_DATAPACK_SUBSCRIPTION_PLAN_ID=
-VUE_APP_PLATFORM_SUBSCRIPTION_STORAGE=10737418240
+# Subscription feature will be enabled if "true"
+VUE_APP_SUBSCRIPTION_ENABLED=true
+# Plans/Product IDs from Paddle
+VUE_APP_PRO_PLAN_ID=
+VUE_APP_DATAPACK_PLAN_ID=
+
+# Amount of storage available with free plan
+# => 300 MB = 300 * 1024^2
+VUE_APP_FREE_PLAN_STORAGE=314572800
+
+# Amount of base storage available with pro plan
+# => 10 GB = 10 * 1024^3
+VUE_APP_PRO_PLAN_STORAGE=10737418240
+
diff --git a/src/components/specific/subscriptions/free-plan-card/FreePlanCard.vue b/src/components/specific/subscriptions/free-plan-card/FreePlanCard.vue
@@ -9,9 +9,9 @@
       </div>
       <div class="free-plan-card__separator"></div>
       <div class="free-plan-card__bullets">
-        <div class="free-plan-card__bullets__bullet">
+        <div class="free-plan-card__bullets__bullet size">
           <img src="/static/bullet-mark.svg" />
-          <span>{{ $t("FreePlanCard.bullet1") }}</span>
+          <span>{{ size }}</span>
         </div>
         <div class="free-plan-card__bullets__bullet">
           <img src="/static/bullet-mark.svg" />
@@ -39,18 +39,24 @@
 </template>
 
 <script>
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import routeNames from "@/router/route-names.js";
+import { formatBytes } from "@/utils/files.js";
 
 export default {
   setup() {
     const router = useRouter();
 
+    const size = ref(formatBytes(process.env.VUE_APP_FREE_PLAN_STORAGE));
+
     const goToSubscriptionFree = () => {
       router.push({ name: routeNames.subscriptionFree });
     };
 
     return {
+      // References
+      size,
       // Methods
       goToSubscriptionFree
     };

diff --git a/src/components/specific/subscriptions/free-plan-info/FreePlanInfo.scss b/src/components/specific/subscriptions/free-plan-info/FreePlanInfo.scss
diff --git a/src/components/specific/subscriptions/free-plan-info/FreePlanInfo.vue b/src/components/specific/subscriptions/free-plan-info/FreePlanInfo.vue
diff --git a/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.scss b/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.scss
@@ -41,6 +41,10 @@
       align-items: center;
       gap: var(--spacing-unit);
       font-weight: bold;
+
+      &.size::after {
+        content: "**";
+      }
     }
   }
 

diff --git a/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.vue b/src/components/specific/subscriptions/pro-plan-card/ProPlanCard.vue
@@ -5,20 +5,20 @@
         {{ $t("ProPlanCard.title") }}
       </div>
       <div class="pro-plan-card__price">
-        {{ $t("ProPlanCard.price") }}
+        {{ proPlanPrice }} {{ $t("ProPlanCard.priceUnit") }}
       </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 class="pro-plan-card__bullets__bullet size">
+          <img src="/static/bullet-mark.svg" />
+          <span>{{ size }}</span>
         </div>
         <div class="pro-plan-card__bullets__bullet">
-          <img src="/static/platform-sub-info-bullet-mark.svg" />
+          <img src="/static/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" />
+          <img src="/static/bullet-mark.svg" />
           <span>{{ $t("ProPlanCard.bullet3") }}</span>
         </div>
       </div>
@@ -32,25 +32,44 @@
         {{ $t("ProPlanCard.buttonText") }}
       </BIMDataButton>
       <div class="pro-plan-card__note">
-        {{ $t("ProPlanCard.note") }}
+        {{ $t("ProPlanCard.note", { price: datapackPrice }) }}
       </div>
     </template>
   </BIMDataCard>
 </template>
 
 <script>
+import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { usePaddle } from "@/composables/paddle.js";
 import routeNames from "@/router/route-names.js";
+import { formatBytes } from "@/utils/files.js";
 
 export default {
   setup() {
     const router = useRouter();
+    const { getProPlanPrice, getDatapackPrice } = usePaddle();
+
+    const proPlanPrice = ref(0);
+    const datapackPrice = ref(0);
+    const size = ref(formatBytes(process.env.VUE_APP_PRO_PLAN_STORAGE));
+
+    getProPlanPrice().then(({ price, currency }) => {
+      proPlanPrice.value = `${price}${currency}`;
+    });
+    getDatapackPrice().then(({ price, currency }) => {
+      datapackPrice.value = `${price}${currency}`;
+    });
 
     const goToSubscriptionPro = () => {
       router.push({ name: routeNames.subscriptionPro });
     };
 
     return {
+      // References
+      datapackPrice,
+      proPlanPrice,
+      size,
       // Methods
       goToSubscriptionPro
     };

diff --git a/src/components/specific/subscriptions/pro-plan-info/ProPlanInfo.scss b/src/components/specific/subscriptions/pro-plan-info/ProPlanInfo.scss
@@ -7,39 +7,39 @@
   align-items: center;
   gap: var(--spacing-unit);
 
-  .heading {
+  &__heading {
     width: 300px;
   }
 
-  .title,
-  .sub-title {
+  &__title,
+  &__sub-title {
     margin: 0;
   }
 
-  .price {
-    :first-child {
+  &__price {
+    &__value {
       font-size: 40px;
       font-weight: bold;
     }
-    :last-child {
+    &__unit {
       color: var(--color-tertiary-dark);
     }
   }
 
-  .bullet-list {
+  &__bullets {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing-unit) / 2);
 
-    .bullets-head {
+    &__head {
       font-weight: bold;
       margin-bottom: calc(var(--spacing-unit) / 2);
       &::after {
         content: ":";
       }
     }
 
-    .bullet {
+    &__bullet {
       display: flex;
       align-items: center;
       gap: var(--spacing-unit);

diff --git a/src/components/specific/subscriptions/pro-plan-info/ProPlanInfo.vue b/src/components/specific/subscriptions/pro-plan-info/ProPlanInfo.vue
@@ -1,27 +1,39 @@
 <template>
   <div class="pro-plan-info">
     <img
-      class="heading"
+      class="pro-plan-info__heading"
       src="/static/platform-heading.svg"
       alt="BIMData Platform"
     />
-    <h1 class="title">
+    <h1 class="pro-plan-info__title">
       {{ $t("ProPlanInfo.title") }}
     </h1>
-    <h3 class="sub-title">
+    <h3 class="pro-plan-info__sub-title">
       {{ $t("ProPlanInfo.subTitle") }}
     </h3>
-    <div class="price">
-      <span> {{ unitPrice }}{{ currency }} </span>
-      <span>{{ $t("ProPlanInfo.priceUnit") }}</span>
+    <div class="pro-plan-info__price">
+      <span class="pro-plan-info__price__value">
+        {{ proPlanPrice }}
+      </span>
+      <span class="pro-plan-info__price__unit">
+        {{ $t("ProPlanInfo.priceUnit") }}
+      </span>
     </div>
-    <div class="bullet-list">
-      <div class="bullets-head">
+    <div class="pro-plan-info__bullets">
+      <div class="pro-plan-info__bullets__head">
         {{ $t("ProPlanInfo.bulletsHead") }}
       </div>
-      <div class="bullet" v-for="bullet of bullets" :key="bullet">
+      <div class="pro-plan-info__bullets__bullet">
         <img src="/static/bullet-mark.svg" />
-        {{ $t(`ProPlanInfo.${bullet}`) }}
+        {{ $t("ProPlanInfo.bullet1", { size }) }}
+      </div>
+      <div
+        class="pro-plan-info__bullets__bullet"
+        v-for="i of [2, 3, 4, 5, 6, 7, 8, 9, 10]"
+        :key="i"
+      >
+        <img src="/static/bullet-mark.svg" />
+        {{ $t(`ProPlanInfo.bullet${i}`) }}
       </div>
     </div>
   </div>
@@ -30,38 +42,24 @@
 <script>
 import { ref } from "vue";
 import { usePaddle } from "@/composables/paddle.js";
-
-const bullets = [
-  "bullet1",
-  "bullet2",
-  "bullet3",
-  "bullet4",
-  "bullet5",
-  "bullet6",
-  "bullet7",
-  "bullet8",
-  "bullet9",
-  "bullet10"
-];
+import { formatBytes } from "@/utils/files.js";
 
 export default {
   setup() {
-    const { getPlatformPrice } = usePaddle();
+    const { getProPlanPrice } = usePaddle();
 
-    const unitPrice = ref(0);
-    const currency = ref("");
+    const proPlanPrice = ref(0);
+    const size = ref(formatBytes(process.env.VUE_APP_PRO_PLAN_STORAGE));
 
-    // Get localized platform subscription price from Paddle
-    getPlatformPrice().then(({ price, currency: curr }) => {
-      unitPrice.value = price;
-      currency.value = curr;
+    // Get localized pro plan price from Paddle
+    getProPlanPrice().then(({ price, currency }) => {
+      proPlanPrice.value = `${price}${currency}`;
     });
 
     return {
       // References
-      bullets,
-      currency,
-      unitPrice
+      proPlanPrice,
+      size
     };
   }
 };

diff --git a/src/components/specific/subscriptions/subscribe-card/SubscribeCard.vue b/src/components/specific/subscriptions/subscribe-card/SubscribeCard.vue
@@ -8,7 +8,7 @@
         {{ $t("SubscribeCard.title") }}
       </div>
       <div class="subscribe-card__center__text">
-        {{ $t("SubscribeCard.text") }}
+        {{ $t("SubscribeCard.text", { size }) }}
       </div>
     </div>
     <div class="subscribe-card__end">
@@ -28,8 +28,10 @@
 </template>
 
 <script>
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import routeNames from "@/router/route-names.js";
+import { formatBytes } from "@/utils/files.js";
 
 export default {
   props: {
@@ -42,11 +44,15 @@ export default {
   setup() {
     const router = useRouter();
 
+    const size = ref(formatBytes(process.env.VUE_APP_PRO_PLAN_STORAGE));
+
     const goToSubscribe = () => {
       router.push({ name: routeNames.subscribe });
     };
 
     return {
+      // References
+      size,
       // Methods
       goToSubscribe
     };

diff --git a/src/composables/paddle.js b/src/composables/paddle.js
@@ -24,24 +24,20 @@ const getPrices = productID => {
   });
 };
 
-const getPlatformPrice = async () => {
-  const response = await getPrices(
-    process.env.VUE_APP_PLATFORM_SUBSCRIPTION_PLAN_ID
-  );
+const getProPlanPrice = async () => {
+  const response = await getPrices(process.env.VUE_APP_PRO_PLAN_ID);
   return getPrice(response);
 };
 
 const getDatapackPrice = async () => {
-  const response = await getPrices(
-    process.env.VUE_APP_DATAPACK_SUBSCRIPTION_PLAN_ID
-  );
+  const response = await getPrices(process.env.VUE_APP_DATAPACK_PLAN_ID);
   return getPrice(response);
 };
 
 export function usePaddle() {
   return {
     loadCheckout,
-    getPlatformPrice,
+    getProPlanPrice,
     getDatapackPrice
   };
 }