Jonathan Bourdon
ab911955ed
git-subtree-dir: frontend git-subtree-mainline:205a3bd14bgit-subtree-split:c070c0315d
119 lines
3.2 KiB
Vue
119 lines
3.2 KiB
Vue
<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">
|
|
{{ $t('paymentConfirmation.success.title') }}
|
|
</v-card-title>
|
|
|
|
<!-- Check Icon -->
|
|
<v-card-text class="text-center mb-4">
|
|
<v-icon size="120" color="success">mdi-check-circle</v-icon>
|
|
</v-card-text>
|
|
|
|
<!-- Thank You Message -->
|
|
<v-card-text class="text-center mb-4">
|
|
<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 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}` })"
|
|
>
|
|
{{ $t('paymentConfirmation.success.continue') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Error Snackbar -->
|
|
<v-snackbar v-model="errorSnackBar" color="red darken-1">
|
|
Aucun reçu 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 { 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('');
|
|
const email = ref('');
|
|
const errorSnackBar = ref(false);
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
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>
|