Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d

frontend/src/views/PaymentFailed.vue

@@ -0,0 +1,84 @@
+<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"
+          >
+            {{ $t('paymentConfirmation.failure.title') }}
+          </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">
+              {{ $t('paymentConfirmation.failure.message') }}
+            </p>
+            <p class="text-h5 font-weight-bold">
+              {{ $t('paymentConfirmation.failure.thanks') }}
+              {{ creatorUserName }}
+            </p>
+          </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}` })"
+            >
+              {{ $t('paymentConfirmation.failure.return') }}
+              {{ creatorUserName }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+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 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);
+  }
+});
+</script>
+
+<style scoped>
+.v-container {
+  max-width: 800px;
+  margin: auto;
+}
+
+.v-card {
+  padding: 24px;
+}
+
+.v-btn {
+  border-radius: 8px;
+}
+</style>