Update colors for Payments pages
This commit is contained in:
@@ -1,69 +1,52 @@
|
||||
<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>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
|
||||
<!-- Check Icon -->
|
||||
<v-card-text class="text-center mb-4">
|
||||
<v-icon size="120" color="success">mdi-check-circle</v-icon>
|
||||
</v-card-text>
|
||||
<h1>
|
||||
{{ $t('paymentConfirmation.success.title') }}
|
||||
</h1>
|
||||
|
||||
<!-- 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>
|
||||
<p>
|
||||
<v-icon size="120" color="success">
|
||||
mdi-check-circle
|
||||
</v-icon>
|
||||
</p>
|
||||
|
||||
<!-- 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>
|
||||
<p>
|
||||
{{ $t('paymentConfirmation.success.message') }}
|
||||
|
||||
<!-- 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>
|
||||
<span v-if="creatorUserName">
|
||||
{{ creatorUserName }}
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ $t('paymentConfirmation.success.usernameDefault') }}
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ $t('paymentConfirmation.success.receipt') }}
|
||||
</p>
|
||||
|
||||
<!-- Continue Button -->
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="action-button"
|
||||
@click="router.push({ path: `/@${creatorUserName}` })">
|
||||
{{ $t('paymentConfirmation.success.continue') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {onBeforeMount, ref} from 'vue';
|
||||
import {useRoute, useRouter} from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@@ -71,8 +54,6 @@ const client = useClient();
|
||||
|
||||
const creatorId = route.params.creatorId;
|
||||
const creatorUserName = ref('');
|
||||
const email = ref('');
|
||||
const errorSnackBar = ref(false);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.v-container {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
.container {
|
||||
@apply min-h-screen;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
padding: 24px;
|
||||
.card {
|
||||
@apply bg-hSurface text-hOnSurface;
|
||||
@apply p-8;
|
||||
@apply font-sans;
|
||||
@apply rounded-3xl;
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
border-radius: 8px;
|
||||
.card-actions {
|
||||
@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>
|
||||
|
||||
@@ -1,55 +1,39 @@
|
||||
<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"
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
|
||||
<h1>
|
||||
{{ $t('paymentConfirmation.failure.title') }}
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<v-icon size="120" color="error">
|
||||
mdi-close-circle
|
||||
</v-icon>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ $t('paymentConfirmation.failure.message') }}
|
||||
</p>
|
||||
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="action-button"
|
||||
@click="router.push({ path: `/@${creatorUserName}` })"
|
||||
>
|
||||
<!-- Title Section -->
|
||||
<v-card-title
|
||||
class="text-center text-h4 font-weight-bold mb-4 text-danger"
|
||||
>
|
||||
{{ $t('paymentConfirmation.failure.title') }}
|
||||
</v-card-title>
|
||||
|
||||
<!-- Cancel Icon -->
|
||||
<v-card-text class="text-center mb-4">
|
||||
<v-icon size="120" color="error">mdi-close-circle</v-icon>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Message -->
|
||||
<v-card-text class="text-center mb-4">
|
||||
<p class="text-h6">
|
||||
{{ $t('paymentConfirmation.failure.message') }}
|
||||
</p>
|
||||
<p class="text-h5 font-weight-bold">
|
||||
{{ $t('paymentConfirmation.failure.thanks') }}
|
||||
{{ creatorUserName }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Back 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.failure.return') }}
|
||||
{{ creatorUserName }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
{{ $t('paymentConfirmation.success.continue') }}
|
||||
{{ creatorUserName }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {onBeforeMount, ref} from 'vue';
|
||||
import {useRoute, useRouter} from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@@ -69,16 +53,38 @@ onBeforeMount(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-container {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
.container {
|
||||
@apply min-h-screen;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
padding: 24px;
|
||||
.card {
|
||||
@apply bg-hSurface text-hOnSurface;
|
||||
@apply p-8;
|
||||
@apply font-sans;
|
||||
@apply rounded-3xl;
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
border-radius: 8px;
|
||||
.card-actions {
|
||||
@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>
|
||||
|
||||
Reference in New Issue
Block a user