Added FailedPayment.vue

src/views/PaymentFailed.vue

@@ -0,0 +1,124 @@
+<template>
+  <v-container class="py-10">
+    <v-row class="d-flex flex-column align-center">
+      <v-col cols="10" >
+        <v-card class="elevation-3" style="background-color: white; border-radius: 12px;">
+          <!-- Title Section -->
+          <v-card-title class="text-center text-h4 font-weight-bold mb-4 text-danger">
+            Échec du paiement
+          </v-card-title>
+
+          <!-- Cancel Icon -->
+          <v-card-text class="text-center mb-4">
+            <v-icon size="120" color="error">mdi-close-circle</v-icon>
+          </v-card-text>
+
+          <!-- Message -->
+          <v-card-text class="text-center mb-4">
+            <p class="text-h6">Nous sommes désolés, le paiement a été annulé.</p>
+            <p class="text-h5 font-weight-bold">Merci de supporter {{ creatorName }}</p>
+          </v-card-text>
+
+          <!-- Email Input and Retry Button -->
+          <v-card-text>
+            <v-row class="d-flex flex-column align-center mb-4">
+              <v-col cols="12" md="8">
+                <v-text-field
+                    v-model="email"
+                    label="Entrez votre email pour vérifier le statut du paiement"
+                    variant="underlined"
+                    hide-details
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="4" class="text-center">
+                <v-btn color="primary" class="text-white" @click="getReceipt">
+                  Réessayer
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <!-- Back Button -->
+          <v-card-actions class="justify-center">
+            <v-btn
+                color="primary"
+                class="text-white px-5 py-3"
+                @click="router.push({ path: `/${creatorUserName}` })"
+            >
+              Retour
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Error Snackbar -->
+    <v-snackbar v-model="errorSnackBar" color="red darken-1">
+      Aucun statut trouvé pour cet email.
+      <template v-slot:actions>
+        <v-btn color="white" text @click="errorSnackBar = false">Fermer</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { useRouter } from 'vue-router';
+import { useClient } from '@/plugins/api.js';
+
+const router = useRouter();
+const client = useClient();
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const creatorId = urlParams.get('creatorId');
+
+const creatorName = ref("");
+const creatorUserName = ref("");
+const email = ref("");
+const errorSnackBar = ref(false);
+
+onBeforeMount(async () => {
+  try {
+    const response = await client.get(`/api/Users?UserId=${creatorId}`);
+    creatorName.value = `${response.data.firstName} ${response.data.lastName}`;
+    creatorUserName.value = response.data.userName;
+  } catch (error) {
+    console.error("Failed to fetch creator data:", error);
+  }
+});
+
+async function getReceipt() {
+  try {
+    const response = await client.get(
+        `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
+    );
+    const receiptUrl = response.data.receiptUrl;
+
+    if (!receiptUrl) {
+      errorSnackBar.value = true;
+    } else {
+      window.open(receiptUrl, '_blank');
+    }
+  } catch (error) {
+    console.error("Failed to fetch receipt:", error);
+    errorSnackBar.value = true;
+  }
+}
+</script>
+
+<style scoped>
+.v-container {
+  max-width: 800px;
+  margin: auto;
+}
+
+.v-card {
+  padding: 24px;
+}
+
+.v-btn {
+  border-radius: 8px;
+}
+</style>