Chnage Ui PaymentCompleted
This commit is contained in:
PascalMarchesseault
@@ -1,106 +0,0 @@
|
|||||||
<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>
|
|
||||||
124
src/views/PaymentCompleted.vue
Normal file
124
src/views/PaymentCompleted.vue
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<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">
|
||||||
|
Paiement complété
|
||||||
|
</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">Merci de supporter</p>
|
||||||
|
<p class="text-h5 font-weight-bold">{{ creatorName }}</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>
|
||||||
|
|
||||||
|
<!-- Continue Button -->
|
||||||
|
<v-card-actions class="justify-center">
|
||||||
|
<v-btn
|
||||||
|
color="primary"
|
||||||
|
class="text-white px-5 py-3"
|
||||||
|
@click="router.push({ path: `/${creatorUserName}` })"
|
||||||
|
>
|
||||||
|
Continuer
|
||||||
|
</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 { ref, onBeforeMount } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useClient } from '@/plugins/api.js';
|
||||||
|
|
||||||
|
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 () => {
|
||||||
|
try {
|
||||||
|
const response = await client.get(`/api/Users?UserId=${creatorId}`);
|
||||||
|
creatorName.value = `${response.data.firstName} ${response.data.lastName}`;
|
||||||
|
creatorUserName.value = response.data.userName;
|
||||||
|
} 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>
|
||||||
Reference in New Issue
Block a user