From d5cadd713d5d8d7bb4e054c5792b4f2519f8fae4 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Mon, 22 Apr 2024 16:59:11 -0400
Subject: [PATCH 1/2] #30 Added tipMessage and redirect to a PaymentCompleted
 page

---
 src/router/index.js             |   6 ++
 src/views/PayementCompleted.vue |  44 +++++++++++++
 src/views/StripePayment.vue     |   7 +-
 src/views/main/CreatorFolio.vue | 111 ++------------------------------
 4 files changed, 61 insertions(+), 107 deletions(-)
 create mode 100644 src/views/PayementCompleted.vue

diff --git a/src/router/index.js b/src/router/index.js
index 2b03b06..f8f90f4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import LoginView from '../views/LoginView.vue'
 import SignupView from '../views/SignupView.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
+import PaymentCompleted from '../views/PayementCompleted.vue'
 import HomeView from '../views/main/HomeView.vue'
 import YourProfile from '../views/main/YourProfile.vue'
 
@@ -26,6 +27,11 @@ const router = createRouter({
       name: 'creatorfolio',
       component: CreatorFolio
     },
+    {
+      path: '/paymentcompleted',
+      name: 'PayementCompleted',
+      component: PaymentCompleted
+    },
     {
       path: '/yourprofile',
       name: 'yourprofile',
diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
new file mode 100644
index 0000000..ea9ff99
--- /dev/null
+++ b/src/views/PayementCompleted.vue
@@ -0,0 +1,44 @@
+<script setup>
+
+</script>
+
+<template>
+  <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+    <v-container>
+      <v-row justify="center">
+        <!-- Icon Check -->
+        <v-col cols="12" class="text-center">
+          <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+        </v-col>
+      </v-row>
+
+      <!-- Informations -->
+      <v-row justify="center">
+        <v-col cols="12">
+          <v-card-text style="font-weight: 600;">
+            Paiement complété
+          </v-card-text>
+          <v-card-text style="margin-top: -24px;">
+            Transaction : #
+          </v-card-text>
+
+          <v-card-text style="font-size: 1.2rem; text-align: center;">
+            Merci de supporter
+          </v-card-text>
+          <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+            Guillaume Mousseau
+          </v-card-text>
+        </v-col>
+      </v-row>
+
+      <!-- Ok btn -->
+      <v-row>
+        <v-col cols="12">
+          <v-card-actions class="justify-end">
+            <v-btn @click="this.$router.push({path: '/creatorfolio'})">Ok</v-btn>
+          </v-card-actions>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 3c5d9f0..49526c3 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -2,7 +2,7 @@
   <v-container>
 
     <v-row>
-      <v-text-field label="Message"
+      <v-text-field label="Message" v-model="tipMessage"
         style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
       </v-text-field>
     </v-row>
@@ -54,6 +54,7 @@ import { onMounted, ref } from "vue";
 let stripe = null;
 const client = useClient();
 const price = ref(0);
+const tipMessage = ref("");
 const isPaymentDialogActive = ref(false);
 var checkout;
 
@@ -69,7 +70,9 @@ const fetchClientSecret = async () => {
 
 async function createCheckoutSession() {
   let clientSecret = await client.post('/api/Stripe', {
-    price: price.value * 100
+    price: (price.value * 100).toFixed(2),
+    tipMessage: tipMessage.value,
+    creatorId: "96d86c20-b7d0-4433-a7fb-42e57ad1515c"
   });
 
   let secret = clientSecret["data"];
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index f038fec..d3e2aac 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -62,14 +62,14 @@
       <!-- User informations Name title and description  -->
       <v-row class="social-container-mobile">
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row justify="center name-info-mobile">
-            <v-typography>{{ name }}</v-typography>
+          <v-row>
+            {{ name }}
           </v-row>
         </v-col>
         <v-spacer xs="12" sm="4"></v-spacer>
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row justify="center name-info-mobile">
-            <v-typography>{{ title }}</v-typography>
+          <v-row>
+            {{ title }}
           </v-row>
         </v-col>
       </v-row>
@@ -78,7 +78,7 @@
           class="social-icon-group-mobile">
           <v-expansion-panels style="min-width: 320px;">
             <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink" style="color: white;" :key="i"
+              <v-expansion-panel class="background-pink" style="color: white;"
                 text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                 title="À propos : Ma mission est claire :"></v-expansion-panel>
             </v-col>
@@ -263,7 +263,7 @@
                   style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
                   <v-expansion-panels style="min-width: 320px;">
                     <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink" style="color: white;" :key="i"
+                      <v-expansion-panel class="background-pink" style="color: white;"
                         text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                         title="À propos : Ma mission est claire :">
                       </v-expansion-panel>
@@ -384,105 +384,6 @@
     </template>
 
     <FooterLayout></FooterLayout>
-
-    <!-- Approuve btn -->
-    <v-dialog v-model="accepted" max-width="500">
-      <template v-slot:activator="{ on }">
-        <div class="text-center pa-4">
-          <v-btn @click="accepted = true" v-on="on">
-            Approuve
-          </v-btn>
-        </div>
-      </template>
-
-
-      <!-- Approuve and decline Modale -->
-      <!-- Completed paiement -->
-      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
-        <v-container>
-          <v-row justify="center">
-            <!-- Icon Check -->
-            <v-col cols="12" class="text-center">
-              <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
-            </v-col>
-          </v-row>
-
-          <!-- Informations -->
-          <v-row justify="center">
-            <v-col cols="12">
-              <v-card-text style="font-weight: 600;">
-                Paiement complété
-              </v-card-text>
-              <v-card-text style="margin-top: -24px;">
-                Transaction : #
-              </v-card-text>
-
-              <v-card-text style="font-size: 1.2rem; text-align: center;">
-                Merci de supporter
-              </v-card-text>
-              <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
-                Guillaume Mousseau
-              </v-card-text>
-            </v-col>
-          </v-row>
-
-          <!-- Ok btn -->
-          <v-row>
-            <v-col cols="12">
-              <v-card-actions class="justify-end">
-                <v-btn text @click="accepted = false">Ok</v-btn>
-              </v-card-actions>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </v-dialog>
-
-    <!-- Decline btn -->
-    <v-dialog v-model="decline" max-width="500">
-      <template v-slot:activator="{ on }">
-        <div class="text-center pa-4">
-          <v-btn @click="decline = true" v-on="on">
-            Decline
-          </v-btn>
-        </div>
-      </template>
-
-      <!-- Decline paiement -->
-
-      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
-        <v-container>
-          <v-row justify="center">
-            <!-- Icon Cancel -->
-            <v-col cols="12" class="text-center">
-              <v-icon color="black" size="250">mdi-cancel</v-icon>
-            </v-col>
-          </v-row>
-
-          <!-- Informations -->
-          <v-row justify="center">
-            <v-col cols="12">
-              <v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
-                Paiement refusé
-              </v-card-text>
-              <v-card-text style="font-size: 1rem; text-align: center;">
-                Une erreur s'est produit
-              </v-card-text>
-            </v-col>
-          </v-row>
-
-          <!-- Ok btn -->
-          <v-row>
-            <v-col cols="12">
-              <v-card-actions class="justify-end">
-                <v-btn text @click="decline = false">Ok</v-btn>
-              </v-card-actions>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </v-dialog>
-
   </div>
 </template>
 

From e0894766d71ca38e38e3682a9eb31b7ab3e9851b Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Wed, 24 Apr 2024 19:38:25 -0400
Subject: [PATCH 2/2] #30 changes to reflect the backend

---
 src/views/StripePayment.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 49526c3..5346ef0 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -70,9 +70,9 @@ const fetchClientSecret = async () => {
 
 async function createCheckoutSession() {
   let clientSecret = await client.post('/api/Stripe', {
-    price: (price.value * 100).toFixed(2),
+    amount: (price.value * 100),
     tipMessage: tipMessage.value,
-    creatorId: "96d86c20-b7d0-4433-a7fb-42e57ad1515c"
+    creatorId: "5b122430-442a-4967-98b6-6c7787c70c91"
   });
 
   let secret = clientSecret["data"];