Merged PR 33: To follow the backend changes

Related work items: #30

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',

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>

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
+    amount: (price.value * 100),
+    tipMessage: tipMessage.value,
+    creatorId: "5b122430-442a-4967-98b6-6c7787c70c91"
   });
 
   let secret = clientSecret["data"];

src/views/main/CreatorFolio.vue

@@ -64,14 +64,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-row>
-            <v-typography>{{ name }}</v-typography>
+            {{ 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-row>
-            <v-typography>{{ title }}</v-typography>
+            {{ title }}
           </v-row>
         </v-col>
       </v-row>
@@ -80,7 +80,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>
@@ -268,7 +268,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>
@@ -389,105 +389,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>