107 lines
3.8 KiB
Vue
107 lines
3.8 KiB
Vue
<template>
|
|
|
|
<v-container>
|
|
<div class="margin-top-mobile">
|
|
<v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
|
|
<v-col cols="12" xxl="4" xl="4" lg="5" md="7" sm="9"> <v-card class="custom-dialog"
|
|
style="background-color: white;">
|
|
<v-container>
|
|
<!-- Title Card -->
|
|
<v-card-text style="font-weight: 600; margin-top: 20px; margin-bottom: 20px; font-size: 2rem;"
|
|
class="text-center">
|
|
Paiement complété
|
|
</v-card-text>
|
|
<v-row justify="center">
|
|
|
|
<!-- Icon Check -->
|
|
<v-col cols="12" class="text-center">
|
|
<v-icon color=#a30e79 size="150">mdi-check-circle</v-icon>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- Informations -->
|
|
<v-row justify="center">
|
|
<v-col cols="12">
|
|
<v-card-text style="font-size: 1.2rem; text-align: center;">
|
|
Merci de supporter
|
|
</v-card-text>
|
|
<v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center; margin-bottom: 10px;">
|
|
{{ creatorName }}
|
|
</v-card-text>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- Ok btn -->
|
|
<v-row>
|
|
<v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
|
|
<v-text-field variant="underlined" style=" margin-right: 10px;" v-model="email"
|
|
label="Email"></v-text-field>
|
|
<v-btn color="#6b0065" variant="outlined" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
|
|
</v-row>
|
|
<v-col cols="12">
|
|
|
|
<v-card-actions class="justify-center">
|
|
<v-btn color="white" outlined elevation="2"
|
|
style="font-size: 2rem; width: 175px; height: 45px; margin-bottom: 25px; background-color: #a30e79;"
|
|
@click="router.push({ path: `/${creatorUserName}` })">Ok</v-btn>
|
|
</v-card-actions>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-snackbar v-model="errorSnackBar">
|
|
Aucun reçu trouvé pour ce email.
|
|
<template v-slot:actions>
|
|
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</v-container>
|
|
|
|
</template>
|
|
|
|
<script async setup>
|
|
import { useClient } from '@/plugins/api.js';
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter()
|
|
const client = useClient();
|
|
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const creatorId = urlParams.get('creatorId')
|
|
const creatorName = ref("");
|
|
const creatorUserName = ref("");
|
|
const email = ref("");
|
|
const errorSnackBar = ref(false);
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
const creatorResponse = await client.get(`/api/Users?UserId=${creatorId}`);
|
|
creatorName.value = creatorResponse.data.firstName + " " + creatorResponse.data.lastName;
|
|
creatorUserName.value = creatorResponse.data.userName;
|
|
})
|
|
|
|
async function getReceipt() {
|
|
const receiptResponse = await client.get(`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`);
|
|
const receiptUrl = receiptResponse.data.receiptUrl;
|
|
|
|
if (receiptUrl === "") {
|
|
errorSnackBar.value = true;
|
|
return;
|
|
}
|
|
window.open(receiptUrl);
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media (min-width: 200px) and (max-width: 960px) {
|
|
.margin-top-mobile {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
</style>
|