Update colors for Payments pages
This commit is contained in:
@@ -1,63 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container class="py-10">
|
<div class="container">
|
||||||
<v-row class="d-flex flex-column align-center">
|
<div class="card">
|
||||||
<v-col cols="10">
|
|
||||||
<v-card
|
<h1>
|
||||||
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') }}
|
{{ $t('paymentConfirmation.success.title') }}
|
||||||
</v-card-title>
|
</h1>
|
||||||
|
|
||||||
<!-- Check Icon -->
|
<p>
|
||||||
<v-card-text class="text-center mb-4">
|
<v-icon size="120" color="success">
|
||||||
<v-icon size="120" color="success">mdi-check-circle</v-icon>
|
mdi-check-circle
|
||||||
</v-card-text>
|
</v-icon>
|
||||||
|
|
||||||
<!-- 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>
|
</p>
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<!-- Email Input and Receipt Button -->
|
<p>
|
||||||
<v-card-text class="text-center mb-4">
|
{{ $t('paymentConfirmation.success.message') }}
|
||||||
<p class="text-h6">
|
|
||||||
|
<span v-if="creatorUserName">
|
||||||
|
{{ creatorUserName }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span v-else>
|
||||||
|
{{ $t('paymentConfirmation.success.usernameDefault') }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
{{ $t('paymentConfirmation.success.receipt') }}
|
{{ $t('paymentConfirmation.success.receipt') }}
|
||||||
</p>
|
</p>
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<!-- Continue Button -->
|
<!-- Continue Button -->
|
||||||
<v-card-actions class="justify-center">
|
<div class="card-actions">
|
||||||
<v-btn
|
<button
|
||||||
color="primary"
|
class="action-button"
|
||||||
class="text-white px-5 py-3"
|
@click="router.push({ path: `/@${creatorUserName}` })">
|
||||||
@click="router.push({ path: `/@${creatorUserName}` })"
|
|
||||||
>
|
|
||||||
{{ $t('paymentConfirmation.success.continue') }}
|
{{ $t('paymentConfirmation.success.continue') }}
|
||||||
</v-btn>
|
</button>
|
||||||
</v-card-actions>
|
</div>
|
||||||
</v-card>
|
|
||||||
</v-col>
|
</div>
|
||||||
</v-row>
|
</div>
|
||||||
|
|
||||||
<!-- 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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -71,8 +54,6 @@ const client = useClient();
|
|||||||
|
|
||||||
const creatorId = route.params.creatorId;
|
const creatorId = route.params.creatorId;
|
||||||
const creatorUserName = ref('');
|
const creatorUserName = ref('');
|
||||||
const email = ref('');
|
|
||||||
const errorSnackBar = ref(false);
|
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
try {
|
try {
|
||||||
@@ -83,36 +64,41 @@ onBeforeMount(async () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.v-container {
|
.container {
|
||||||
max-width: 800px;
|
@apply min-h-screen;
|
||||||
margin: auto;
|
@apply flex items-center justify-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-card {
|
.card {
|
||||||
padding: 24px;
|
@apply bg-hSurface text-hOnSurface;
|
||||||
|
@apply p-8;
|
||||||
|
@apply font-sans;
|
||||||
|
@apply rounded-3xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-btn {
|
.card-actions {
|
||||||
border-radius: 8px;
|
@apply flex items-center justify-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@apply text-6xl;
|
||||||
|
@apply font-medium;
|
||||||
|
@apply mb-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@apply text-lg;
|
||||||
|
@apply font-medium;
|
||||||
|
@apply mb-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
@apply bg-hPrimary text-hOnPrimary;
|
||||||
|
@apply p-4 m-4;
|
||||||
|
@apply text-lg;
|
||||||
|
@apply rounded-xl;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,49 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container class="py-10">
|
|
||||||
<v-row class="d-flex flex-column align-center">
|
<div class="container">
|
||||||
<v-col cols="10">
|
<div class="card">
|
||||||
<v-card
|
|
||||||
class="elevation-3"
|
<h1>
|
||||||
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') }}
|
{{ $t('paymentConfirmation.failure.title') }}
|
||||||
</v-card-title>
|
</h1>
|
||||||
|
|
||||||
<!-- Cancel Icon -->
|
<p>
|
||||||
<v-card-text class="text-center mb-4">
|
<v-icon size="120" color="error">
|
||||||
<v-icon size="120" color="error">mdi-close-circle</v-icon>
|
mdi-close-circle
|
||||||
</v-card-text>
|
</v-icon>
|
||||||
|
</p>
|
||||||
|
|
||||||
<!-- Message -->
|
<p>
|
||||||
<v-card-text class="text-center mb-4">
|
|
||||||
<p class="text-h6">
|
|
||||||
{{ $t('paymentConfirmation.failure.message') }}
|
{{ $t('paymentConfirmation.failure.message') }}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-h5 font-weight-bold">
|
|
||||||
{{ $t('paymentConfirmation.failure.thanks') }}
|
|
||||||
{{ creatorUserName }}
|
|
||||||
</p>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<!-- Back Button -->
|
<div class="card-actions">
|
||||||
<v-card-actions class="justify-center">
|
<button
|
||||||
<v-btn
|
class="action-button"
|
||||||
color="primary"
|
|
||||||
class="text-white px-5 py-3"
|
|
||||||
@click="router.push({ path: `/@${creatorUserName}` })"
|
@click="router.push({ path: `/@${creatorUserName}` })"
|
||||||
>
|
>
|
||||||
{{ $t('paymentConfirmation.failure.return') }}
|
{{ $t('paymentConfirmation.success.continue') }}
|
||||||
{{ creatorUserName }}
|
{{ creatorUserName }}
|
||||||
</v-btn>
|
</button>
|
||||||
</v-card-actions>
|
</div>
|
||||||
</v-card>
|
</div>
|
||||||
</v-col>
|
</div>
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -69,16 +53,38 @@ onBeforeMount(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.v-container {
|
.container {
|
||||||
max-width: 800px;
|
@apply min-h-screen;
|
||||||
margin: auto;
|
@apply flex items-center justify-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-card {
|
.card {
|
||||||
padding: 24px;
|
@apply bg-hSurface text-hOnSurface;
|
||||||
|
@apply p-8;
|
||||||
|
@apply font-sans;
|
||||||
|
@apply rounded-3xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-btn {
|
.card-actions {
|
||||||
border-radius: 8px;
|
@apply flex items-center justify-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@apply text-6xl;
|
||||||
|
@apply font-medium;
|
||||||
|
@apply mb-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@apply text-lg;
|
||||||
|
@apply font-medium;
|
||||||
|
@apply mb-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
@apply bg-hPrimary text-hOnPrimary;
|
||||||
|
@apply p-4 m-4;
|
||||||
|
@apply text-lg;
|
||||||
|
@apply rounded-xl;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user