jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chnage Ui PaymentCompleted

Browse Source
This commit is contained in:
PascalMarchesseault
2025-01-03 16:35:07 -05:00
parent 0572dfbce5
commit fc9f4cf70b
2 changed files with 124 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/PayementCompleted.vue
View File

@@ -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
View 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>