WIP

src/views/creators/CreatorHome.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="flex flex-row">
-    
-        <div class="px-4" 
-             :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
+
+    <div class="px-4"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
       <h1>TEST</h1>
-      <p>GET ME AN EDITOR NOW!</p>
+
+      <p>MODE: {{ envv }}</p>
+      <p>VITE_API_URL: {{ enva }}</p>
+      <p>VITE_STRIPE_API_KEY: {{ envb }}</p>
+
+      <donation-button :creator-id="creatorId"
+                       :creator-name="creatorName"
+                       :on-success-url="successUrl"
+                       :on-cancelled-url="cancelledUrl"
+      ></donation-button>
     </div>
-    
+
   </div>
 
 </template>
@@ -14,9 +23,24 @@
 <script setup>
 
 import {useBrandingStore} from "@/stores/brandingStore.js";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import {computed} from "vue";
+import {useRoute, useRouter} from "vue-router";
+
+const router = useRouter()
+const route = useRoute()
+const baseUrl = window.location.origin;
+const creatorSlug = route.params.creator_slug || route.path.split('/')[1];
+const successUrl = `${baseUrl}/${creatorSlug}`
+const cancelledUrl = `${baseUrl}/${creatorSlug}`
 
 const brandingStore = useBrandingStore()
+const envv = import.meta.env.MODE
+const enva = import.meta.env.VITE_API_URL
+const envb = import.meta.env.VITE_STRIPE_API_KEY
 
+const creatorId = computed(() => brandingStore.value.id)
+const creatorName = computed(() => brandingStore.value.name)
 </script>
 
 <style scoped>