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 1/4] 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';

From 015f99180fb10bdf38ed0ffd537b551573d002f5 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Thu, 28 Mar 2024 00:19:36 -0400
Subject: [PATCH 2/4] fixed the stripePayment component

---
 index.html                      |  2 +-
 src/App.vue                     |  5 +--
 src/views/StripePayment.vue     | 78 +++++++++++++++++++--------------
 src/views/main/CreatorFolio.vue | 27 +++---------
 4 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/index.html b/index.html
index 243f446..7846ff0 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>Hutopy</title>
 </head>
 
 <body>
diff --git a/src/App.vue b/src/App.vue
index 74ca03d..c9d62a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,5 @@
   </RouterView>
 </template>
 
-<script>
-export default {
-  name: 'App',
-};
+<script setup>
 </script>
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 4dbdf93..a9a1584 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -1,35 +1,42 @@
 <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>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-text-field 
+          label="Montant ($)"
+          v-model="price"
+          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
+        </v-text-field>
+      </v-col>
 
-      <template v-slot:default="{ isPaymentDialogActive }">
+      <v-col>
+        <v-btn
+          @click="goPay()"
+          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
+          >Envoyez
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+      <template v-slot:default>
         <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>
+            <div id="checkout">
+                <!-- Checkout will insert the payment form here -->
+            </div>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    text="Annuler"
+                    @click="closeDialog()"
+                ></v-btn>
+            </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
+  </v-container>
+  
+
 </template>
 
 <script setup>
@@ -40,7 +47,8 @@ import { onMounted, ref } from "vue";
   let stripe = null;
   const client = useClient();
   const price = ref(0);
-  const isPaymentDialogActive = ref(true);
+  const isPaymentDialogActive = ref(false);
+  var checkout;
 
   onMounted(async () => {
     // I removed api key to push. Need to get it from backend.
@@ -58,16 +66,22 @@ import { onMounted, ref } from "vue";
     });
 
     let secret = clientSecret["data"];
-    console.log(secret)
     return secret;
   }
 
+  function closeDialog(){
+    isPaymentDialogActive.value = false;
+    checkout.destroy();
+  }
+
   async function goPay() {
     isPaymentDialogActive.value = true;
-    const checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
-    });
 
-    checkout.mount('#checkout');
+    checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+  });
+
+    await 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 1784e21..396fb8e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -474,28 +474,13 @@
               </h1>
             </v-container>
 
-            <v-row style=" margin-top: 30px; ">
-              <v-col cols="6" style="background-color: #f4f4f4">
-                <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
-                  <v-form @submit.prevent>
-                    <v-text-field label="Montant ($)"
-                      style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
-                  </v-form>
-                </v-sheet>
-              </v-col>
-              <v-col cols="6" class="d-flex align-center">
-                <v-btn
-                  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-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 class="mt-12 ml-2 mr-4 mb-4" style="background-color: #f4f4f4;">
+                <StripePayment></StripePayment>
             </v-row>
-            <v-row>
-              <StripePayment></StripePayment>
+
+            <v-row class="ml-2 mb-2 mr-2">
+              <v-textarea style="color: rgba(0, 109, 119)"
+                label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
 
           </v-card>

From 0f364ddec1d110c9c4c6a9aea2a0ba4e564e3f8c Mon Sep 17 00:00:00 2001
From: Kamigen <46357922+Edouard127@users.noreply.github.com>
Date: Sat, 30 Mar 2024 21:32:11 -0400
Subject: [PATCH 3/4] Merge conflicts

---
 src/views/LoginView.vue        | 26 +++++++++---------------
 src/views/main/ContactView.vue | 20 ++++++++++++++++++
 src/views/main/HomeView.vue    | 37 +++++++++++-----------------------
 3 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 701d1bf..46cca27 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -96,34 +96,28 @@
 
 
 <script setup>
-import { useClient } from '@/plugins/clientPlugin';
-import { useAuthStore } from '@/plugins/store/authStore';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import {authStore} from '@/plugins/store/authStore';
+import {ref} from 'vue';
+import {useRouter} from 'vue-router';
+import {useClient} from "@/plugins/clientPlugin.js";
 
-const authStore = useAuthStore();
-const client = useClient();
+const api = useClient()
+
+const store = authStore();
 const router = useRouter()
 
 let user = ref({});
 let errorSnackBar = ref(false);
 
-const goHome = () => {
-    router.push('/');
-
-}
-
-
-
 async function login() {
     try {
-        await authStore.login(client, user.value.email, user.value.password)
+        await store.login(api, user.value.email, user.value.password)
         router.push('/');
     } catch (error) {
         errorSnackBar.value = true;
     }
 }
-
 </script>
 
 <style scoped>
@@ -453,4 +447,4 @@ async function login() {
 
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index 77f82f6..9bf9dec 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -154,6 +154,26 @@
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      first_name: '',
+      last_name: '',
+      email: '',
+      message: '',
+      social_media: '',
+      phone_number: ''
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit('submit', this.email)
+    }
+  }
+}
+</script>
+
 
 <script setup>
 import FooterLayout from '@/layouts/FooterLayout.vue';
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index d7e7f91..b982958 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -1,7 +1,6 @@
 <template>
   <v-app style="background-color: #F4F4F4;">
 
-
     <div style="background-color: #F4F4F4;">
 
       <!--PC -->
@@ -193,14 +192,14 @@
             <!-- Colonne de droite -->
             <v-col cols="3">
               <v-img src="../../../images/homepage/grinding.png"
-                style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
+                style="margin-bottom: 4%; border-radius: 30px; width: 80vw;"></v-img>
               <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
             </v-col>
             <v-col cols="3" style>
               <v-img src="../../../images/homepage/microphone.png"
                 style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
               <v-img src="../../../images/homepage/girlvr.png"
-                style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
+                style="border-radius: 30px; min-width: 250px; max-height: 350px;"></v-img>
             </v-col>
           </v-row>
         </v-container>
@@ -247,7 +246,6 @@
 
                 </v-col>
 
-
                 <v-col>
                   <router-link :to="{ name: 'creatorfolio' }">
                     <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
@@ -259,11 +257,7 @@
                       Inscription
                     </v-btn>
                   </RouterLink>
-
-
                 </v-col>
-
-
               </v-row>
 
 
@@ -405,27 +399,22 @@
   </v-app>
 </template>
 
-<script async setup>
+<script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { useClient } from '@/plugins/clientPlugin';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
+import {useClient} from "@/plugins/clientPlugin.js";
+import {ref} from "vue";
+import {useRouter} from "vue-router";
 
+const api = useClient()
 const router = useRouter()
-const client = useClient();
+const itemList = ref([]);
+const errorNoAccessSnackBar = ref(false);
 
-let itemList = ref([]);
-let errorNoAccessSnackBar = ref(false);
-
-async function callBackend() {
+const callBackend = async () => {
   try {
-    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
-    const responseItems = response.data.items;
-    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
-    itemList.value = orderedResponseItems
-
+    const response = await api.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
+    itemList.value = response.data.items;
   } catch (error) {
     errorNoAccessSnackBar.value = true;
   }
@@ -434,8 +423,6 @@ async function callBackend() {
 const goToLoginPage = () => {
   router.push('/login');
 }
-
-
 </script>
 
 <style src="../../cssstyle/index.css"></style>

From abab4587d163307577993b2a3c423dc5a2c1cdd7 Mon Sep 17 00:00:00 2001
From: Kamigen <46357922+Edouard127@users.noreply.github.com>
Date: Sat, 30 Mar 2024 21:35:19 -0400
Subject: [PATCH 4/4] Refactor!: Codebase

---
 .env.development                              |  1 +
 .env.production                               |  1 +
 src/layouts/DefaultLayout.vue                 | 10 +++---
 src/main.js                                   |  2 +-
 src/plugins/api.js                            | 35 +++++++++++++++++++
 src/plugins/clientPlugin.js                   | 34 ------------------
 .../store/authStore.js => stores/auth.js}     |  7 ++--
 src/views/LoginView.vue                       | 16 +++++----
 src/views/StripePayment.vue                   |  8 ++---
 src/views/main/HomeView.vue                   | 13 ++++---
 tailwind.config.js                            |  3 --
 11 files changed, 64 insertions(+), 66 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 src/plugins/api.js
 delete mode 100644 src/plugins/clientPlugin.js
 rename src/{plugins/store/authStore.js => stores/auth.js} (97%)

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..d823d9f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5001/api/v1
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..5a800a5
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_API_URL=todo
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 59379ed..7690bad 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -118,18 +118,18 @@
 </template>
 
 <script setup>
-import { useAuthStore } from '@/plugins/store/authStore';
+import { auth } from '@/stores/auth.js';
 import { useRouter } from 'vue-router';
 
-const authStore = useAuthStore();
+const store = auth();
 const router = useRouter()
 
 const logout = () => {
-  authStore.logout();
+  store.logout();
   router.push('/login');
 }
 
-const user = authStore.user;
+const user = store.user;
 </script>
 
-<style src="../cssstyle/index.css"></style>
\ No newline at end of file
+<style src="../cssstyle/index.css"></style>
diff --git a/src/main.js b/src/main.js
index e55acf4..39f62fb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,7 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
-import clientPlugin from './plugins/clientPlugin'
+import clientPlugin from './plugins/api.js'
 
 const vuetify = createVuetify({
   components,
diff --git a/src/plugins/api.js b/src/plugins/api.js
new file mode 100644
index 0000000..ee75e5b
--- /dev/null
+++ b/src/plugins/api.js
@@ -0,0 +1,35 @@
+import axios from "axios";
+import {inject} from "vue";
+
+const key = Symbol("api");
+
+export default function(app) {
+    if (!import.meta.env.VITE_API_URL) throw new Error("VITE_API_URL is not provided")
+
+    // You create a .env.development file and a .env file
+    // depending on the environment, the correct file will be used
+    const api = axios.create({
+        baseURL: import.meta.env.VITE_API_URL,
+        timeout: 2000,
+    });
+
+    const requestInterceptor = (config) => {
+        const token = localStorage.getItem("jwt");
+        if (token) config.headers["Authorization"] = `Bearer ${token}`;
+        return config;
+    }
+
+    api.interceptors.request.use(requestInterceptor);
+
+    // This is a local injection, to use it in your components you can do this:
+    // const api = inject("api")
+    // api.get("/some-endpoint")
+    app.provide(key, api)
+}
+
+export function useClient() {
+    const api = inject(key)
+    if (!api) throw new Error("api is not provided")
+    return api;
+}
+
diff --git a/src/plugins/clientPlugin.js b/src/plugins/clientPlugin.js
deleted file mode 100644
index c5faed0..0000000
--- a/src/plugins/clientPlugin.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import axios from "axios";
-import { inject } from 'vue';
-
-const clientKey = Symbol('client');
-
-export default {
-    //todo: Need to have the baseURL in the config for later ( dev and prod env. )
-    install: (app) => {
-        const axiosInstance = axios.create({
-            baseURL: 'https://localhost:5001/',
-            timeout: 2000,
-        });
-
-        axiosInstance.interceptors.request.use((config) => {
-            const token = localStorage.getItem('jwt');
-            if (token) {
-                config.headers.Authorization = `Bearer ${token}`;
-            }
-            return config;
-        }, (error) => {
-            return Promise.reject(error);
-        });
-
-        app.provide(clientKey, axiosInstance);
-    }
-};
-
-export function useClient() {
-    const client = inject(clientKey);
-    if (!client) {
-        throw new Error('Axios instance is not provided');
-    }
-    return client;
-}
\ No newline at end of file
diff --git a/src/plugins/store/authStore.js b/src/stores/auth.js
similarity index 97%
rename from src/plugins/store/authStore.js
rename to src/stores/auth.js
index cf0fef0..bc2c12f 100644
--- a/src/plugins/store/authStore.js
+++ b/src/stores/auth.js
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 const baseUrl = '/api/Users';
 
-export const useAuthStore = defineStore({
+export const auth = defineStore({
     id: 'auth',
     state: () => ({
         user: null,
@@ -26,9 +26,6 @@ export const useAuthStore = defineStore({
             } catch (error) {
                 throw new Error('Login failed.')
             }
-
-
-
         },
         logout() {
             localStorage.setItem('jwt', '');
@@ -52,4 +49,4 @@ export const useAuthStore = defineStore({
             clearTimeout(this.refreshTokenTimeout);
         }
     }
-});
\ No newline at end of file
+});
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 701d1bf..8218cd6 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -96,13 +96,15 @@
 
 
 <script setup>
-import { useClient } from '@/plugins/clientPlugin';
-import { useAuthStore } from '@/plugins/store/authStore';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import {auth} from '@/stores/auth.js';
+import {ref} from 'vue';
+import {useRouter} from 'vue-router';
+import {useClient} from "@/plugins/api.js";
 
-const authStore = useAuthStore();
-const client = useClient();
+const api = useClient()
+
+const store = auth();
 const router = useRouter()
 
 let user = ref({});
@@ -453,4 +455,4 @@ async function login() {
 
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index a9a1584..0a2eb34 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -2,7 +2,7 @@
   <v-container>
     <v-row>
       <v-col>
-        <v-text-field 
+        <v-text-field
           label="Montant ($)"
           v-model="price"
           style="color: rgb(0, 109, 119); background-color: #f4f4f4">
@@ -35,12 +35,12 @@
       </template>
     </v-dialog>
   </v-container>
-  
+
 
 </template>
 
 <script setup>
-import { useClient } from '@/plugins/clientPlugin';
+import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
@@ -84,4 +84,4 @@ import { onMounted, ref } from "vue";
     await checkout.mount('#checkout');
   }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index d7e7f91..57b3ca5 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -15,7 +15,7 @@
               <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
               <RouterLink :to="{ name: 'login' }">
                 <v-btn size="large"
-                  style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
+                  style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
                   light elevation="0">
                   Connexion
                 </v-btn>
@@ -193,14 +193,14 @@
             <!-- Colonne de droite -->
             <v-col cols="3">
               <v-img src="../../../images/homepage/grinding.png"
-                style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
+                style="margin-bottom: 4%; border-radius: 30px; width: 80vw;"></v-img>
               <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
             </v-col>
             <v-col cols="3" style>
               <v-img src="../../../images/homepage/microphone.png"
                 style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
               <v-img src="../../../images/homepage/girlvr.png"
-                style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
+                style="border-radius: 30px; min-width: 250px; max-height: 350px;"></v-img>
             </v-col>
           </v-row>
         </v-container>
@@ -408,10 +408,9 @@
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { useClient } from '@/plugins/clientPlugin';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
+import {useClient} from "@/plugins/api.js";
+import {ref} from "vue";
+import {useRouter} from "vue-router";
 
 const router = useRouter()
 const client = useClient();
diff --git a/tailwind.config.js b/tailwind.config.js
index 88f0441..a28ce71 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,9 +7,6 @@ export default {
   theme: {
     extend: {},
   },
-  theme: {
-    extend: {},
-  },
   plugins: [],
 }