Update PaymentFailed.vue

src/locales/en.json

@@ -132,6 +132,13 @@
       "usernameDefault": "this user.",
       "receipt": "A receipt has been sent to your email address.",
       "continue": "Continue"
+    },
+    "failure": {
+      "title": "Payment cancelled",
+      "message": "The payment was cancelled. If you did not intend to cancel, please try again.",
+      "thanks": "Thank you for supporting",
+      "tryAgain": "Try again",
+      "return": "Return to the profile of "
     }
   }
 }

src/locales/fr.json

@@ -132,6 +132,13 @@
       "usernameDefault": "cet utilisateur.",
       "receipt": "Un reçu a été envoyé à votre adresse courriel.",
       "continue": "Continuer"
+    },
+    "failure": {
+      "title": "Paiement annulé",
+      "message": "Le paiement a été annulé. Si vous n'aviez pas l'intention d'annuler, veuillez réessayer.",
+      "thanks": "Merci de supporter",
+      "tryAgain": "Réessayer",
+      "return": "Retour au profil de "
     }
   }
 }

src/router/router.js

@@ -140,7 +140,7 @@ const routes = [
     component: PaymentCompleted,
   },
   {
-    path: '/paymentfailed',
+    path: '/paymentfailed/:creatorId',
     name: 'PaymentFailed',
     component: PaymentFailed,
   },

src/views/PaymentCompleted.vue

@@ -66,8 +66,8 @@ import { onBeforeMount, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const router = useRouter();
-const client = useClient();
 const route = useRoute();
+const client = useClient();
 
 const creatorId = route.params.creatorId;
 const creatorUserName = ref('');

src/views/PaymentFailed.vue

@@ -2,10 +2,15 @@
   <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;">
+        <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">
+          <v-card-title
-            Échec du paiement
+            class="text-center text-h4 font-weight-bold mb-4 text-danger"
+          >
+            {{ $t('paymentConfirmation.failure.title') }}
           </v-card-title>
 
           <!-- Cancel Icon -->
@@ -15,27 +20,13 @@
 
           <!-- 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-h6">
-            <p class="text-h5 font-weight-bold">Merci de supporter {{ creatorName }}</p>
+              {{ $t('paymentConfirmation.failure.message') }}
-          </v-card-text>
+            </p>
-
+            <p class="text-h5 font-weight-bold">
-          <!-- Email Input and Retry Button -->
+              {{ $t('paymentConfirmation.failure.thanks') }}
-          <v-card-text>
+              {{ creatorUserName }}
-            <v-row class="d-flex flex-column align-center mb-4">
+            </p>
-              <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 -->
@@ -43,69 +34,38 @@
             <v-btn
               color="primary"
               class="text-white px-5 py-3"
-                @click="router.push({ path: `/${creatorUserName}` })"
+              @click="router.push({ path: `/@${creatorUserName}` })"
             >
-              Retour
+              {{ $t('paymentConfirmation.failure.return') }}
+              {{ creatorUserName }}
             </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';
+import { onBeforeMount, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const router = useRouter();
+const route = useRoute();
 const client = useClient();
 
-const queryString = window.location.search;
+const creatorId = route.params.creatorId;
-const urlParams = new URLSearchParams(queryString);
+const creatorUserName = ref('');
-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}`);
+    const response = await client.get(`/api/creators/${creatorId}`);
-    creatorName.value = `${response.data.firstName} ${response.data.lastName}`;
+    creatorUserName.value = response.data.name;
-    creatorUserName.value = response.data.userName;
   } catch (error) {
-    console.error("Failed to fetch creator data:", 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>