From 589b4ef47b63980645701856fd45c1c7cb616b82 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 2 Nov 2024 01:15:22 -0400
Subject: [PATCH] Change banner donation btn

---
 src/views/creators/BannerActions.vue        | 69 ++++---------------
 src/views/creators/CreatorLayout.vue        |  2 +-
 src/views/creators/DonationButtonBanner.vue | 74 ++++++++++++---------
 3 files changed, 55 insertions(+), 90 deletions(-)

diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index 42d1c4d..fe32339 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -55,65 +55,18 @@
             </div>
           </div>
 
-          <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
+          <div class="absolute bottom-6 right-8 z-30 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
                :style="{ backgroundColor: brandingStore.colors.secondary}">
-
-            <div class="w-96 h-28 flex flex-col">
-              <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
-              <div class="flex flex-row flex-grow-[2] min-h-20">
-                <div class="rounded-tl-md w-1/2   flex items-center justify-center"
-                     :style="{ backgroundColor: brandingStore.colors.primary, opacity: 0.20 }">
-                </div>
-                <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
-                     :style="{ backgroundColor: brandingStore.colors.secondary}">
-                  <div class="absolute left-1">
-                    <div class="flex flex-row items-center justify-center space-x-5">
-                      <div class="flex flex-row items-center">
-                        <div style="display: flex; align-items: center;">
-                          <textarea class="text-3xl" rows="1" cols="6"
-                                    style="border: none; resize: none; text-align: right; outline: none;"
-                                    placeholder="0"></textarea>
-                          <div class="px-1">$</div>
-                        </div>
-
-                      </div>
-
-                      <div class="flex flex-col items-center space-y-2">
-                        <v-btn
-                            :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
-                            variant="tonal">+
-                        </v-btn>
-                        <v-btn
-                            :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
-                            variant="tonal">-
-                        </v-btn>
-                      </div>
-                    </div>
-
-                  </div>
-
-                  <v-btn variant="text"
-                         height="80px"
-                         width="200px"
-                         style="font-size: 18px;">Je supporte
-                  </v-btn>
-                </div>
-              </div>
-
-              <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
-                   :style="{ backgroundColor: brandingStore.colors.secondary, opacity: 0.80 }">
-
-                <textarea
-                    rows="1"
-                    placeholder="Message facultatif"
-                    class="w-full p-2 border border-gray-300 rounded-b-md resize-none"
-                    style="max-height: 300px; overflow-y: hidden; outline: none;"
-                    oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"
-                ></textarea>
-
-              </div>
-            </div>
+           
+            <donation-button-banner               
+                :creator-id="creatorId"
+                :creator-name="creatorName"
+                :on-success-url="successUrl"
+                :on-cancelled-url="cancelledUrl"></donation-button-banner>
           </div>
+       
+
+
         </div>
       </div>
     </div>
@@ -150,6 +103,8 @@
 import {ref, onMounted} from 'vue';
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
+import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
 
 const brandingStore = useBrandingStore()
 
diff --git a/src/views/creators/CreatorLayout.vue b/src/views/creators/CreatorLayout.vue
index f12e87f..6bf747b 100644
--- a/src/views/creators/CreatorLayout.vue
+++ b/src/views/creators/CreatorLayout.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[1500px] mx-auto">
+  <div class="flex flex-col min-h-screen max-w-[1200px] mx-auto">
     <div v-if="brandingStore.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
diff --git a/src/views/creators/DonationButtonBanner.vue b/src/views/creators/DonationButtonBanner.vue
index ce73805..32921b0 100644
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -1,16 +1,9 @@
 <template>
-  <v-btn :style="{ 
-    backgroundColor: brandingStore.colors.primary, 
-    color: 'white', 
-    borderRadius: '8px',
-     padding:'20px 24px', 
-    display: 'flex', 
-    alignItems: 'center', 
-    justifyContent: 'center' }" 
-         @click="openDonationDialog()">
-    <div class="font-bold"> Je soutiens</div>
+  <v-btn variant="text" style="font-size: x-large; height: 100%" block   @click="openDonationDialog()">
+   Je supporte
   </v-btn>
 
+
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
       <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
@@ -34,7 +27,7 @@
 
         <v-card-text>
           <v-text-field
-              v-model="tipAmount"
+              v-model="tipAmountInDollars"
               type="number"
               :min="0"
               class="p-2"
@@ -57,7 +50,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -73,9 +67,13 @@
         <div id="checkout">
         </div>
 
+        <v-spacer></v-spacer>
+
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+          <v-btn block class="ma-auto"
+                 style="width: 200px;"
+                 @click="closeDialog()">Annuler
+          </v-btn>
         </v-card-actions>
       </v-card>
     </template>
@@ -91,6 +89,14 @@ import {useBrandingStore} from "@/stores/brandingStore.js";
 
 const brandingStore = useBrandingStore()
 
+const props = defineProps({
+  creatorId: {default: 'missing-creator-id', required: true},
+  creatorName: {default: 'missing-creator-name', required: true},
+  onSuccessUrl: {default: 'missing-on-success-u', required: true},
+  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
+  iconColorClass: {default: 'text-black'}
+});
+
 const donationModal = ref(false);
 
 function openDonationDialog() {
@@ -101,9 +107,10 @@ function closeDonationDialog() {
   donationModal.value = false
 }
 
+
 const isPaymentDialogActive = ref(false);
 
-const tipAmount = ref(0);
+const tipAmountInDollars = ref(0);
 const tipMessage = ref("");
 
 let stripe = null;
@@ -114,23 +121,21 @@ onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
 });
 
-const fetchClientSecret = async () => {
-  const clientSecret = await createCheckoutSession();
-  return clientSecret;
-};
-
-
 async function createCheckoutSession() {
   const client = useClient()
-  let clientSecret = await client.post('/api/Stripe', {
-    amount: (tipAmount.value * 100),
-    tipMessage: tipMessage.value,
-    creatorId: props.creatorId
 
-  });
+  let clientSecret = await client.post(
+      `/api/tips`,
+      {
+        amount: tipAmountInDollars.value * 100,
+        currency: 'CAD',
+        message: tipMessage.value,
+        creatorId: props.creatorId,
+        checkoutSuccessUrl: props.onSuccessUrl,
+        checkoutCancelledUrl: props.onCancelledUrl
+      });
 
-  let secret = clientSecret["data"];
-  return secret;
+  return clientSecret.data;
 }
 
 function closeDialog() {
@@ -143,11 +148,10 @@ function closeDialog() {
 async function goPay() {
   isPaymentDialogActive.value = true;
 
-  checkout = await stripe.initEmbeddedCheckout({
-    fetchClientSecret,
-  });
+  const response = await createCheckoutSession()
 
-  await checkout.mount('#checkout');
+  // Redirect to the Stripe Checkout page
+  window.location.href = response.stripeCheckoutUrl
 }
 
 function preventNonNumeric(event) {
@@ -159,3 +163,9 @@ function preventNonNumeric(event) {
   }
 }
 </script>
+
+<style >
+.full-height {
+  height: 100%;
+}
+</style>