feat(payment): finish routing integration + refactor space-creator

src/components/specific/dashboard/dashboard-subscription-tile/DashboardSubscriptionTile.vue

@@ -29,7 +29,7 @@
     </div>
     <BIMDataButton
       class="dashboard-subscription-tile__btn"
-      @click="goToPayment"
+      @click="goToSubscriptionPlatform"
     >
       <span>
         {{ $t("DashboardSubscriptionTile.subscribeButtonText") }}
@@ -47,7 +47,7 @@
 
 <script>
 import { useRouter } from "vue-router";
-import { routeNames } from "@/router";
+import { routeNames } from "@/router/index.js";
 
 export default {
   setup() {
@@ -57,13 +57,13 @@ export default {
       router.push({ name: routeNames.userSubscriptions });
     };
 
-    const goToPayment = () => {
-      router.push({ name: routeNames.payment });
+    const goToSubscriptionPlatform = () => {
+      router.push({ name: routeNames.subscriptionPlatform });
     };
 
     return {
       // Methods
-      goToPayment,
+      goToSubscriptionPlatform,
       goToUserSubscriptions
     };
   }

src/components/specific/payment/platform-sub-form/PlatformSubForm.vue

@@ -5,34 +5,42 @@
 </template>
 
 <script>
-import { onMounted } from "vue";
+import { onMounted, watch } from "vue";
 import { usePayment } from "@/state/payment.js";
 
 export default {
   props: {
     space: {
       type: Object,
-      required: true
+      default: null
     }
   },
   setup(props) {
     const { generatePlatformSubscriptionLink } = usePayment();
 
     onMounted(async () => {
-      const subLink = await generatePlatformSubscriptionLink(props.space);
+      watch(
+        () => props.space,
+        async space => {
+          if (space) {
+            const link = await generatePlatformSubscriptionLink(space);
 
-      Paddle.Checkout.open({
-        // Checkout params
-        method: "inline",
-        referring_domain: "platform",
-        override: subLink,
+            Paddle.Checkout.open({
+              // Checkout params
+              method: "inline",
+              referring_domain: "platform",
+              override: link,
 
-        // Checkout frame
-        frameTarget: "paddle-checkout-container",
-        frameInitialHeight: 416,
-        frameStyle:
-          "width:100%; min-width:312px; background-color: transparent; border: none;"
-      });
+              // Checkout frame
+              frameTarget: "paddle-checkout-container",
+              frameInitialHeight: 416,
+              frameStyle:
+                "width:100%; min-width:312px; background-color: transparent; border: none;"
+            });
+          }
+        },
+        { immediate: true }
+      );
     });
   }
 };

src/components/specific/payment/orga-space-cards/OrgaSpaceCards.scss → src/components/specific/payment/space-creator/SpaceCreator.scss

@@ -1,16 +1,20 @@
-.orga-space-cards {
+.space-creator {
   display: grid;
   grid-template-columns: 400px 400px;
   gap: calc(var(--spacing-unit) * 4);
+
   &::v-deep(.bimdata-card) {
     overflow: inherit;
+
     h3 {
-      margin: 12px 0 18px;
+      margin: 12px 0 18px 6px;
       font-size: 20px;
     }
+
     .bimdata-radio > span {
       font-size: 13px;
     }
+
     .bimdata-card__content {
       padding: 24px 48px;
       height: 100%;
@@ -20,29 +24,36 @@
     }
   }
 }
+
 .orga-card,
 .space-card {
   position: relative;
-  &::after {
-    content: "";
+
+  &::before {
     width: 34px;
     height: 34px;
+
     position: absolute;
     top: calc(-34px / 2);
     left: calc(50% - (34px / 2));
-    background-color: var(--color-secondary);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
+
+    font-weight: bold;
+    background-color: var(--color-secondary);
   }
 }
+
 .orga-card {
-  &::after {
+  &::before {
     content: "1";
   }
 }
+
 .space-card {
-  &::after {
+  &::before {
     content: "2";
   }
 }