From 7e2b0b58b4f3733a81f7d003bad2ed8f62ff336c Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 8 Oct 2024 23:42:19 -0400
Subject: [PATCH] Add the Subscription table - need to tweak and clean code.

---
 src/router/router.js                    |  5 ++
 src/views/creators/SubscriptionMenu.vue | 88 +++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/views/creators/SubscriptionMenu.vue

diff --git a/src/router/router.js b/src/router/router.js
index deeef2f..f3a01e7 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -23,6 +23,7 @@ import ContentPage from "@/views/contents/ContentPage.vue";
 import CreatorContent from "@/views/creators/CreatorContent.vue";
 import CreatorHome from "@/views/creators/CreatorHome.vue";
 import CTA01 from "@/views/CTA01.vue";
+import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
 
 
 const routes = [
@@ -58,6 +59,10 @@ const routes = [
                 path: 'content',
                 component: CreatorContent
             },
+            {
+                path: 'subscription',
+                component: SubscriptionMenu
+            },
         ]
     },
     {
diff --git a/src/views/creators/SubscriptionMenu.vue b/src/views/creators/SubscriptionMenu.vue
new file mode 100644
index 0000000..6f10960
--- /dev/null
+++ b/src/views/creators/SubscriptionMenu.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { ref } from 'vue';
+
+const branding = useBrandingStore();
+const selectedTier = ref(null);
+const tiers = ref([
+  {
+    id: 1,
+    name: 'Les Visionnaires',
+    description: 'Container blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablal...',
+    price: 15,
+  },
+]);
+
+// Colors
+
+const onPrimary = { color: branding.colors.onPrimary}
+const Primary = { backgroundColor: branding.colors.primary}
+
+const onSecondaryColor = { color: branding.colors.onSecondary}
+const secondaryColor = { backgroundColor: branding.colors.secondary}
+
+function selectTier(id) {
+  selectedTier.value = id;
+}
+</script>
+
+<template>
+  <v-container class="d-flex justify-center">
+    <v-row justify="center">
+      <!-- Tiers -->
+      <v-col
+          :cols="12 / Math.min(tiers.length, 3)"
+          md="4"
+          v-for="tier in tiers"
+          :key="tier.id"
+      >
+        <div class="bg-white shadow-2xl rounded-2xl">
+          <v-img src="/images/hutopymedia/loginpage/loginhutopy.png" class="rounded-t-2xl"></v-img>
+          <div class="pa-6" :style="[Primary, onPrimary]">
+            <v-card-title class="text-h4 text-center py-4 ">{{ tier.name }}</v-card-title>
+           
+           <div class="text-justify">{{ tier.description }}</div> 
+          </div>
+          <div class="text-center bg-fuchsia-800 py-10" :style="[Primary]">
+            <v-btn
+                :color="selectedTier === tier.id ? 'primary' : ''"
+                @click="selectTier(tier.id)"
+                class="mx-auto"
+                width="200px"
+                :style="{ backgroundColor: selectedTier === tier.id ? branding.colors.primary : branding.colors.secondary, color: branding.colors.onSecondary }"
+            >
+              {{ selectedTier === tier.id ? 'Sélectionné' : 'Choisir' }}
+            </v-btn>
+
+          </div>
+          <v-card-text class="text-center rounded-b-2xl" :style="[secondaryColor,onSecondaryColor]" >
+            <span class="text-h5">{{ tier.price }} $ / par mois </span>
+          </v-card-text>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <v-card-actions class="d-flex justify-center mt-10">
+    <v-btn
+        :style="{ backgroundColor: branding.colors.secondary, color: branding.colors.onBackground }"
+        width="250px"
+        variant="elevated"
+    >
+      Payer
+    </v-btn>
+
+
+  </v-card-actions>
+</template>
+
+<style scoped>
+.v-card {
+  border-radius: 12px;
+}
+
+.dotted-border {
+  border: 2px dotted ;
+  padding: 1px;
+}
+</style>