From eef07babe8ea29f4ddcf87be2017c5c561d4066f Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Wed, 20 Mar 2024 01:13:33 -0400
Subject: [PATCH] Added basic stripe form WIP

---
 package-lock.json               |  9 ++++
 package.json                    |  1 +
 src/views/StripePayment.vue     | 73 +++++++++++++++++++++++++++++++++
 src/views/main/CreatorFolio.vue |  7 +++-
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/views/StripePayment.vue

diff --git a/package-lock.json b/package-lock.json
index bf6ac4c..915a947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "@stripe/stripe-js": "^3.0.10",
         "axios": "^1.6.7",
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
@@ -841,6 +842,14 @@
         "win32"
       ]
     },
+    "node_modules/@stripe/stripe-js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.10.tgz",
+      "integrity": "sha512-CFRNha+aPXR8GrqJss2TbK1j4aSGZXQY8gx0hvaYiSp+dU7EK/Zs5uwFTSAgV+t8H4+jcZ/iBGajAvoMYOwy+A==",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
diff --git a/package.json b/package.json
index 295825f..1a647ed 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@stripe/stripe-js": "^3.0.10",
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
new file mode 100644
index 0000000..4dbdf93
--- /dev/null
+++ b/src/views/StripePayment.vue
@@ -0,0 +1,73 @@
+<template>
+    <v-dialog max-width="720">
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-container>
+          <v-text-field
+              v-model="price"
+            ></v-text-field>
+          <v-btn
+            v-bind="activatorProps"
+            color="surface-variant"
+            text="Checkout"
+            variant="flat"
+            @click="goPay()"
+          ></v-btn>
+      </v-container>
+      </template>
+
+      <template v-slot:default="{ isPaymentDialogActive }">
+        <v-card>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              text="Close Dialog"
+              @click="isPaymentDialogActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+</template>
+
+<script setup>
+import { useClient } from '@/plugins/clientPlugin';
+import { loadStripe } from '@stripe/stripe-js';
+import { onMounted, ref } from "vue";
+
+  let stripe = null;
+  const client = useClient();
+  const price = ref(0);
+  const isPaymentDialogActive = ref(true);
+
+  onMounted(async () => {
+    // I removed api key to push. Need to get it from backend.
+    stripe = await loadStripe('');
+  })
+
+  const fetchClientSecret = async () => {
+    const clientSecret = await createCheckoutSession();
+    return clientSecret;
+  };
+
+  async function createCheckoutSession() {
+    let clientSecret = await client.post('/api/Stripe', {
+      price: price.value * 100
+    });
+
+    let secret = clientSecret["data"];
+    console.log(secret)
+    return secret;
+  }
+
+  async function goPay() {
+    isPaymentDialogActive.value = true;
+    const checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+    });
+
+    checkout.mount('#checkout');
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 6936fe2..1784e21 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -488,12 +488,15 @@
                   style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
                   class="mt-4" block>Envoyez</v-btn>
               </v-col>
-            </v-row>
+                          </v-row>
 
             <v-row>
               <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
                 label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
+            <v-row>
+              <StripePayment></StripePayment>
+            </v-row>
 
           </v-card>
 
@@ -577,7 +580,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-
+import StripePayment from '../StripePayment.vue';
 
 
 import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';