From cb3d0b13acd4e1831142648e7379e11a4a521249 Mon Sep 17 00:00:00 2001
From: Karl Carriere <kcarriere@devsights.com>
Date: Mon, 6 Jan 2025 12:36:32 -0500
Subject: [PATCH] Update paymentcompleted.vue

---
 src/locales/en.json                  | 11 ++++-
 src/locales/fr.json                  | 11 ++++-
 src/router/router.js                 |  8 +---
 src/views/PaymentCompleted.vue       | 64 +++++++++++++---------------
 src/views/creators/BannerActions.vue |  4 +-
 5 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index ee5c76b..082dfb4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -124,5 +124,14 @@
     "amount": "amount",
     "message": "Message (optional)",
     "send": "send"
+  },
+  "paymentConfirmation": {
+    "success": {
+      "title": "Payment completed",
+      "message": "Your payment was successful. Thank you for supporting ",
+      "usernameDefault": "this user.",
+      "receipt": "A receipt has been sent to your email address.",
+      "continue": "Continue"
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d0f4e65..0ce75ea 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -124,5 +124,14 @@
     "amount": "Montant",
     "message": "Message (facultatif)",
     "send": "Envoyez"
+  },
+  "paymentConfirmation": {
+    "success": {
+      "title": "Paiement complété",
+      "message": "Votre paiement a été effectué avec succès. Merci de soutenir ",
+      "usernameDefault": "cet utilisateur.",
+      "receipt": "Un reçu a été envoyé à votre adresse courriel.",
+      "continue": "Continuer"
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/router/router.js b/src/router/router.js
index b838545..8a673ad 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,5 +1,6 @@
 import { useAuthStore } from '@/stores/authStore.js';
 import CTA01 from '@/views/CTA01.vue';
+import PaymentFailed from '@/views/PaymentFailed.vue';
 import CreatorList from '@/views/browser/CreatorList.vue';
 import ContentEditorPage from '@/views/contents/ContentEditorPage.vue';
 import ContentPage from '@/views/contents/ContentPage.vue';
@@ -22,7 +23,6 @@ import ProfilePage from '@/views/profile/ProfilePage.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/LoginView.vue';
 import PaymentCompleted from '../views/PaymentCompleted.vue';
-import PaymentFailed from "@/views/PaymentFailed.vue";
 import Home from '../views/main/Home.vue';
 import Wallet from '../views/main/Wallet.vue';
 
@@ -135,18 +135,14 @@ const routes = [
     meta: { notAuthenticated: true },
   },
   {
-    path: '/paymentcompleted',
+    path: '/paymentcompleted/:creatorId',
     name: 'PaymentCompleted',
     component: PaymentCompleted,
-   
-    
   },
   {
     path: '/paymentfailed',
     name: 'PaymentFailed',
     component: PaymentFailed,
-
-
   },
   {
     path: '/wallet',
diff --git a/src/views/PaymentCompleted.vue b/src/views/PaymentCompleted.vue
index f0e6434..d6c9fba 100644
--- a/src/views/PaymentCompleted.vue
+++ b/src/views/PaymentCompleted.vue
@@ -2,10 +2,13 @@
   <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">
-            Paiement complété
+            {{ $t('paymentConfirmation.success.title') }}
           </v-card-title>
 
           <!-- Check Icon -->
@@ -15,37 +18,32 @@
 
           <!-- Thank You Message -->
           <v-card-text class="text-center mb-4">
-            <p class="text-h6">Merci de supporter</p>
-            <p class="text-h5 font-weight-bold">{{ creatorName }}</p>
+            <p class="text-h6">
+              {{ $t('paymentConfirmation.success.message') }}
+              <span class="text-h5 font-weight-bold" v-if="creatorUserName">{{
+                creatorUserName
+              }}</span>
+              <span class="text-h6" v-else>{{
+                $t('paymentConfirmation.success.usernameDefault')
+              }}</span>
+            </p>
           </v-card-text>
 
           <!-- Email Input and Receipt Button -->
-          <v-card-text>
-            <v-row class="d-flex flex-column align-center">
-              <v-col cols="12" sm="10" md="8" lg="6">
-                <v-text-field
-                    v-model="email"
-                    label="Entrez votre email pour recevoir le reçu"
-                    variant="underlined"
-                    hide-details
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" class="text-center">
-                <v-btn color="primary" class="text-white" @click="getReceipt">
-                  Télécharger le reçu
-                </v-btn>
-              </v-col>
-            </v-row>
+          <v-card-text class="text-center mb-4">
+            <p class="text-h6">
+              {{ $t('paymentConfirmation.success.receipt') }}
+            </p>
           </v-card-text>
 
           <!-- Continue Button -->
           <v-card-actions class="justify-center">
             <v-btn
-                color="primary"
-                class="text-white px-5 py-3"
-                @click="router.push({ path: `/${creatorUserName}` })"
+              color="primary"
+              class="text-white px-5 py-3"
+              @click="router.push({ path: `/@${creatorUserName}` })"
             >
-              Continuer
+              {{ $t('paymentConfirmation.success.continue') }}
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -63,27 +61,23 @@
 </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 client = useClient();
+const route = useRoute();
 
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-const creatorId = urlParams.get('creatorId');
-
-const creatorName = ref('');
+const creatorId = route.params.creatorId;
 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;
+    const response = await client.get(`/api/creators/${creatorId}`);
+    creatorUserName.value = response.data.name;
   } catch (error) {
     console.error('Failed to fetch creator data:', error);
   }
@@ -92,7 +86,7 @@ onBeforeMount(async () => {
 async function getReceipt() {
   try {
     const response = await client.get(
-        `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
+      `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
     );
     const receiptUrl = response.data.receiptUrl;
 
diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index def6045..c540cd9 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -207,8 +207,8 @@ onBeforeUnmount(() => {
             v-if="creator"
             :creator-id="creator.id"
             :creator-name="creator.name"
-            :on-success-url="baseURL + '/paymentcompleted'"
-            :on-cancelled-url="baseURL + '/@' + creatorName"
+            :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
+            :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
           ></donation-button-banner>
         </div>
       </div>