feat(payment): dev on payment view

bimdata · Oct 29, 2021 · 55f0022 · 55f0022
1 parent ed2ffa9
commit 55f0022
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 65 deletions.
diff --git a/src/components/specific/payment/storage-preview/StoragePreview.vue b/src/components/specific/payment/storage-preview/StoragePreview.vue
@@ -10,15 +10,25 @@
       />
     </div>
     <div class="storage-preview__actual">
-      <ProgressBar class="m-b-12" componentWidth="100%" :progressPercent="36">
+      <ProgressBar
+        class="m-b-12"
+        componentWidth="100%"
+        :progressPercent="spaceInfo.remainingSizePercent"
+      >
         <template #text-left-above>
-          {{ $t("StoragePreview.actualStorage") }}
+          <span>
+            {{ $t("StoragePreview.actualStorage") }}
+          </span>
         </template>
         <template #text-left-below>
-          <span>125MB</span>
+          <span>
+            {{ formatBytes(spaceInfo.smartDataSize) }}
+          </span>
         </template>
         <template #text-right-below>
-          <span>500MB</span>
+          <span>
+            {{ formatBytes(spaceInfo.smartDataSizeAvailable) }}
+          </span>
         </template>
       </ProgressBar>
       <BIMDataText color="color-tertiary-dark">
@@ -28,10 +38,14 @@
     <div class="storage-preview__new">
       <ProgressBar class="m-b-12" componentWidth="100%" :progressPercent="15">
         <template #text-left-above>
-          {{ $t("StoragePreview.newStorage") }}
+          <span>
+            {{ $t("StoragePreview.newStorage") }}
+          </span>
         </template>
         <template #text-left-below>
-          <span>125MB</span>
+          <span>
+            {{ formatBytes(spaceInfo.smartDataSize) }}
+          </span>
         </template>
         <template #text-right-below>
           <span>10GB</span>
@@ -45,6 +59,9 @@
 </template>
 
 <script>
+import { ref, watch } from "vue";
+import { usePayment } from "@/state/payment.js";
+import { formatBytes } from "@/utils/files.js";
 // Components
 import ProgressBar from "@/components/generic/progress-bar/ProgressBar.vue";
 
@@ -53,10 +70,30 @@ export default {
     ProgressBar
   },
   props: {
-    // TODO
+    space: {
+      type: Object,
+      required: true
+    }
   },
-  setup() {
-    // TODO
+  setup(props) {
+    const { retrieveSpaceInformation } = usePayment();
+
+    const spaceInfo = ref({});
+
+    watch(
+      () => props.space,
+      async () => {
+        spaceInfo.value = await retrieveSpaceInformation(props.space);
+      },
+      { immediate: true }
+    );
+
+    return {
+      // References
+      spaceInfo,
+      // Methods
+      formatBytes
+    };
   }
 };
 </script>

diff --git a/src/components/specific/payment/subscription-form/SubscriptionForm.vue b/src/components/specific/payment/subscription-form/SubscriptionForm.vue
@@ -10,16 +10,12 @@ import { useUser } from "@/state/user.js";
 
 export default {
   props: {
-    organization: {
-      type: Object,
-      required: true
-    },
     space: {
       type: Object,
       required: true
     }
   },
-  setup() {
+  setup(props) {
     const { user } = useUser();
 
     onMounted(() => {
@@ -28,13 +24,13 @@ export default {
         product: 12403,
         method: "inline",
         disableLogout: true,
-        referring_domain: "platform self service",
+        referring_domain: "platform",
 
         // User data
         email: user.value.email,
         // passthrough: {
-        //   organization_id: "1663",
-        //   cloud_id: "673"
+        //   organization_id: props.space.organization.id,
+        //   cloud_id: props.space.id
         // },
 
         // Checkout frame

diff --git a/src/components/specific/subscription/storage-informations/StorageInformations.vue b/src/components/specific/subscription/storage-informations/StorageInformations.vue
@@ -50,13 +50,11 @@
 import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { routeNames } from "@/router";
-
 import { usePayment } from "@/state/payment.js";
-
+import { formatBytes } from "@/utils/files.js";
+// Components
 import ProgressBar from "@/components/generic/progress-bar/ProgressBar";
 
-import { formatBytesV2 } from "@/utils/files.js";
-
 export default {
   components: {
     ProgressBar
@@ -91,8 +89,8 @@ export default {
     return {
       // References
       spaceInformation,
-      formatBytes: formatBytesV2,
       // Methods
+      formatBytes,
       goToPayment
     };
   }

diff --git a/src/services/PaymentService.js b/src/services/PaymentService.js
@@ -21,10 +21,14 @@ class PaymentService {
     }
   }
 
-  retrieveOrganizationPlatformSubscriptions(organization) {
-    return privateApiClient.get(
-      `/payment/organization/${organization.id}/platform-subscription`
-    );
+  async retrieveOrganizationPlatformSubscriptions(organization) {
+    try {
+      return await privateApiClient.get(
+        `/payment/organization/${organization.id}/platform-subscription`
+      );
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   async retrieveSpaceInformation(space) {
@@ -53,6 +57,7 @@ class PaymentService {
 
     // calculation of the remaining size
     const remainingSizePercent = 100 - size.remainingSmartDataSizePercent;
+
     return {
       remainingSizePercent,
       isPlatformPaid,
@@ -61,6 +66,16 @@ class PaymentService {
       ...size
     };
   }
+
+  async generatePlatformSubscription(space) {
+    try {
+      return await privateApiClient.post(
+        `/payment/organization/${space.organization.id}/cloud/${space.id}/subscription/generate-platform-subscription`
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  }
 }
 
 const service = new PaymentService();

diff --git a/src/state/payment.js b/src/state/payment.js
@@ -42,15 +42,15 @@ const retrieveSpaceInformation = space => {
   return PaymentService.retrieveSpaceInformation(space);
 };
 
-const subscribeDataPack = async () => {
-  // TODO
+const generatePlatformSubscription = space => {
+  return PaymentService.generatePlatformSubscription(space);
 };
 
-const updateDataPack = async () => {
+const createDataPackSubscription = async () => {
   // TODO
 };
 
-const createPaddleSubscriptionUrl = async () => {
+const updateDataPackSubscription = async () => {
   // TODO
 };
 
@@ -61,8 +61,8 @@ export function usePayment() {
     retrieveOrganizationPlaformSubscriptions,
     retrievePlaformSubscriptionPayments,
     retrieveSpaceInformation,
-    subscribeDataPack,
-    updateDataPack,
-    createPaddleSubscriptionUrl
+    generatePlatformSubscription,
+    createDataPackSubscription,
+    updateDataPackSubscription
   };
 }
diff --git a/src/utils/files.js b/src/utils/files.js
@@ -3,23 +3,7 @@ function fileExtension(fileName) {
   return parts.length > 1 ? parts[parts.length - 1] : "";
 }
 
-function formatBytes(bytes) {
-  if (bytes >= 1000000000000) {
-    return `${Number(bytes / 1000000000000).toFixed(2)} TB`;
-  }
-  if (bytes >= 1000000000) {
-    return `${Number(bytes / 1000000000).toFixed(2)} GB`;
-  }
-  if (bytes >= 1000000) {
-    return `${Number(bytes / 1000000).toFixed(2)} MB`;
-  }
-  if (bytes >= 1000) {
-    return `${Number(bytes / 1000).toFixed(2)} KB`;
-  }
-  return `${bytes} B`;
-}
-
-function formatBytesV2(bytes, decimals = 2) {
+function formatBytes(bytes, decimals = 2) {
   if (bytes) {
     const dm = decimals < 0 ? 0 : decimals;
     const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -39,4 +23,4 @@ function generateFileKey(fileName, fileSize) {
   return key;
 }
 
-export { fileExtension, formatBytes, formatBytesV2, generateFileKey };
+export { fileExtension, formatBytes, generateFileKey };
diff --git a/src/views/payment/Payment.vue b/src/views/payment/Payment.vue
@@ -15,13 +15,10 @@
         <SubscriptionInfo />
       </div>
       <div class="payment__content__center">
-        <SubscriptionForm
-          :organization="selectedOrganization"
-          :space="selectedSpace"
-        />
+        <SubscriptionForm :space="selectedSpace" />
       </div>
       <div class="payment__content__right">
-        <StoragePreview />
+        <StoragePreview :space="selectedSpace" />
       </div>
     </div>
   </div>

diff --git a/src/views/space-board/SpaceBoard.vue b/src/views/space-board/SpaceBoard.vue
@@ -17,15 +17,6 @@
       <template #right>
         <div class="flex items-center">
           <StorageInformations :space="space" />
-          <!-- <BIMDataButton
-          data-test="btn-filter"
-          class="space-board__header__btn-filter"
-          fill
-          squared
-          icon
-        >
-          <BIMDataIcon name="filter" size="s" />
-        </BIMDataButton> -->
           <BIMDataButton
             data-test="btn-sort"
             class="space-board__header__btn-sort m-r-12"