feat(billings-table): add 'Manage datapacks' button to billing action…

… menu
bimdata · Dec 2, 2021 · 4316f03 · 4316f03
1 parent a5ad269
commit 4316f03
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 26 deletions.
diff --git a/...onents/specific/subscriptions/billings-table/billing-actions-cell/BillingActionsCell.scss b/...onents/specific/subscriptions/billings-table/billing-actions-cell/BillingActionsCell.scss
@@ -14,11 +14,5 @@
 
     display: flex;
     flex-direction: column;
-
-    a {
-      height: 32px;
-      justify-content: flex-start;
-      text-decoration: none;
-    }
   }
 }
diff --git a/...ponents/specific/subscriptions/billings-table/billing-actions-cell/BillingActionsCell.vue b/...ponents/specific/subscriptions/billings-table/billing-actions-cell/BillingActionsCell.vue
@@ -12,33 +12,24 @@
 
     <transition name="fade">
       <div class="billing-actions-cell__menu" v-show="showMenu">
-        <a
-          class="
-            bimdata-btn bimdata-btn__ghost bimdata-btn__ghost--default
-            billing-actions-cell__menu__btn
-          "
-          target="blank"
-          :href="billing.update_url"
-        >
+        <BIMDataButton ghost squared @click="goToSubscriptionDatapack">
+          {{ $t("BillingActionsCell.datapackButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton ghost squared @click="openUpdateUrl">
           {{ $t("BillingActionsCell.updateButtonText") }}
-        </a>
-        <a
-          class="
-            bimdata-btn bimdata-btn__ghost bimdata-btn__ghost--high
-            billing-actions-cell__menu__btn
-          "
-          target="blank"
-          :href="billing.cancel_url"
-        >
+        </BIMDataButton>
+        <BIMDataButton color="high" ghost squared @click="openCancelUrl">
           {{ $t("BillingActionsCell.cancelButtonText") }}
-        </a>
+        </BIMDataButton>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-import { useToggle } from "@/composables/toggle";
+import { useRouter } from "vue-router";
+import { useToggle } from "@/composables/toggle.js";
+import routeNames from "@/router/route-names.js";
 
 export default {
   props: {
@@ -47,18 +38,40 @@ export default {
       required: true
     }
   },
-  setup() {
+  setup(props) {
+    const router = useRouter();
+
     const {
       isOpen: showMenu,
       close: closeMenu,
       toggle: toggleMenu
     } = useToggle();
 
+    const goToSubscriptionDatapack = () => {
+      router.push({
+        name: routeNames.subscriptionDatapack,
+        query: {
+          space: props.billing.cloud?.id
+        }
+      });
+    };
+
+    const openUpdateUrl = () => {
+      window.open(props.billing.update_url);
+    };
+
+    const openCancelUrl = () => {
+      window.open(props.billing.cancel_url);
+    };
+
     return {
       // References
       showMenu,
       // Methods
       closeMenu,
+      goToSubscriptionDatapack,
+      openCancelUrl,
+      openUpdateUrl,
       toggleMenu
     };
   }

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
@@ -113,6 +113,7 @@
 
   "BillingActionsCell": {
     "updateButtonText": "Modify the payment card",
+    "datapackButtonText": "Manage datapacks",
     "cancelButtonText": "Cancel this payment"
   },
 

diff --git a/src/i18n/lang/fr.json b/src/i18n/lang/fr.json
@@ -117,6 +117,7 @@
 
   "BillingActionsCell": {
     "updateButtonText": "Modifier la carte de paiement",
+    "datapackButtonText": "Gérer mes datapacks",
     "cancelButtonText": "Annuler ce paiement"
   },