Add localization support for various components, including dialogs and views, in English, Spanish, and French. Implemented translations for user profile management, payment processes, and creator functionalities. Updated existing components to utilize the new translation system.

frontend/src/views/PaymentCompleted.vue

@@ -3,7 +3,7 @@
     <div class="card">
 
       <h1>
-        {{ $t('paymentConfirmation.success.title') }}
+        {{ t('title') }}
       </h1>
 
       <p>
@@ -13,28 +13,28 @@
       </p>
 
       <p>
-        {{ $t('paymentConfirmation.success.message') }}
+        {{ t('message') }}
 
         <span v-if="creatorUserName">
           {{ creatorUserName }}
         </span>
 
         <span v-else>
-          {{ $t('paymentConfirmation.success.usernameDefault') }}
+          {{ t('usernameDefault') }}
         </span>
 
       </p>
 
       <p>
-        {{ $t('paymentConfirmation.success.receipt') }}
+        {{ t('receipt') }}
       </p>
 
       <!-- Continue Button -->
       <div class="card-actions">
         <button
             class="action-button"
-            @click="router.push({ path: `/@${creatorUserName}` })">
-          {{ $t('paymentConfirmation.success.continue') }}
+            @click="goBack()">
+          {{ t('continue') }}
         </button>
       </div>
 
@@ -44,25 +44,21 @@
 </template>
 
 <script setup>
-import {useClient} from '@/plugins/api.js';
-import {onBeforeMount, ref} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import {useRouter, useRoute} from 'vue-router';
+import {useTranslations} from '@/translations/translations';
 
 const router = useRouter();
 const route = useRoute();
-const client = useClient();
+const t = useTranslations();
 
-const creatorId = route.params.creatorId;
-const creatorUserName = ref('');
-
-onBeforeMount(async () => {
-  try {
-    const response = await client.get(`/api/creators/${creatorId}`);
-    creatorUserName.value = response.data.name;
-  } catch (error) {
-    console.error('Failed to fetch creator data:', error);
+function goBack() {
+  const returnUrl = route.query.returnUrl;
+  if (returnUrl) {
+    router.push(returnUrl);
+  } else {
+    router.back();
   }
-});
+}
 
 </script>