many fixes and improvements - rework for modules/ and common/
feat(emailer): add Postmark and Resend providers
This commit is contained in:
@@ -1,147 +1,155 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<!-- Navigation Link at the top -->
|
||||
<div class="navigation-link">
|
||||
<button class="link-button" @click="goBack()">
|
||||
<v-icon :icon="mdiArrowLeft" />
|
||||
{{ t('returnToCreator') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<!-- Navigation Link at the top -->
|
||||
<div class="navigation-link">
|
||||
<button
|
||||
class="link-button"
|
||||
@click="goBack()"
|
||||
>
|
||||
<v-icon :icon="mdiArrowLeft" />
|
||||
{{ t('returnToCreator') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
{{ t('title') }}
|
||||
</h1>
|
||||
<h1 v-html="titleWithCreatorName"></h1>
|
||||
|
||||
<p>
|
||||
<v-icon size="120" color="success" :icon="mdiCheckCircle" />
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:icon="mdiCheckCircle"
|
||||
color="success"
|
||||
size="120"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ t('message') }}
|
||||
<p>
|
||||
{{ t('message') }}
|
||||
</p>
|
||||
|
||||
<span v-if="brandingStore.value?.name">
|
||||
{{ brandingStore.value.name }}
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ t('usernameDefault') }}
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ t('receipt') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('receipt') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useBrandingStore } from '@/stores/brandingStore.js';
|
||||
import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useBrandingStore } from '@/stores/brandingStore.js';
|
||||
import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const brandingStore = useBrandingStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const brandingStore = useBrandingStore();
|
||||
|
||||
function goBack() {
|
||||
// Navigate back to the creator's page
|
||||
const creatorName = route.params.creator?.split('/')[0] || '';
|
||||
router.push(`/@${creatorName}`);
|
||||
}
|
||||
const creatorName = computed(() => {
|
||||
return route.params.creator?.split('/')[0] || t('usernameDefault');
|
||||
});
|
||||
|
||||
const titleWithCreatorName = computed(() => {
|
||||
return t('title', { creatorName: creatorName.value });
|
||||
});
|
||||
|
||||
function goBack() {
|
||||
// Navigate back to the creator's page
|
||||
const creatorNameParam = route.params.creator?.split('/')[0] || '';
|
||||
router.push(`/@${creatorNameParam}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"title": "Payment Successful!",
|
||||
"message": "Your payment has been processed successfully.",
|
||||
"usernameDefault": "the creator",
|
||||
"receipt": "A receipt has been sent to your email.",
|
||||
"continue": "Continue to",
|
||||
"returnToCreator": "Return to creator page"
|
||||
},
|
||||
"fr": {
|
||||
"title": "Paiement réussi !",
|
||||
"message": "Votre paiement a été traité avec succès.",
|
||||
"usernameDefault": "le créateur",
|
||||
"receipt": "Un reçu a été envoyé à votre email.",
|
||||
"continue": "Continuer vers",
|
||||
"returnToCreator": "Retourner à la page du créateur"
|
||||
},
|
||||
"es": {
|
||||
"title": "¡Pago exitoso!",
|
||||
"message": "Su pago ha sido procesado con éxito.",
|
||||
"usernameDefault": "el creador",
|
||||
"receipt": "Se ha enviado un recibo a su correo electrónico.",
|
||||
"continue": "Continuar a",
|
||||
"returnToCreator": "Volver a la página del creador"
|
||||
}
|
||||
"en": {
|
||||
"title": "{creatorName} thanks you!",
|
||||
"message": "Your payment has been processed successfully.",
|
||||
"usernameDefault": "The creator",
|
||||
"receipt": "A receipt has been sent to your email.",
|
||||
"returnToCreator": "Return to creator page"
|
||||
},
|
||||
"fr": {
|
||||
"title": "{creatorName} vous remercie !",
|
||||
"message": "Votre paiement a été traité avec succès.",
|
||||
"usernameDefault": "Le créateur",
|
||||
"receipt": "Un reçu a été envoyé à votre email.",
|
||||
"returnToCreator": "Retourner à la page du créateur"
|
||||
},
|
||||
"es": {
|
||||
"title": "¡{creatorName} te agradece!",
|
||||
"message": "Su pago ha sido procesado con éxito.",
|
||||
"usernameDefault": "El creador",
|
||||
"receipt": "Se ha enviado un recibo a su correo electrónico.",
|
||||
"returnToCreator": "Volver a la página del creador"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
@apply flex items-center justify-center;
|
||||
@apply p-5;
|
||||
@apply w-full;
|
||||
@apply mx-auto;
|
||||
@apply max-w-[1024px];
|
||||
}
|
||||
.container {
|
||||
@apply flex items-center justify-center;
|
||||
@apply p-5;
|
||||
@apply w-full;
|
||||
@apply mx-auto;
|
||||
@apply max-w-[1024px];
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-hSurface text-hOnSurface;
|
||||
@apply p-8;
|
||||
@apply font-sans;
|
||||
@apply rounded-2xl;
|
||||
@apply shadow-2xl;
|
||||
@apply relative;
|
||||
@apply w-full;
|
||||
@apply max-w-2xl;
|
||||
@apply mx-auto;
|
||||
}
|
||||
.card {
|
||||
@apply bg-hSurface text-hOnSurface;
|
||||
@apply p-8;
|
||||
@apply font-sans;
|
||||
@apply rounded-2xl;
|
||||
@apply shadow-2xl;
|
||||
@apply relative;
|
||||
@apply w-full;
|
||||
@apply max-w-2xl;
|
||||
@apply mx-auto;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
@apply absolute inset-0;
|
||||
@apply rounded-2xl;
|
||||
@apply p-[1px];
|
||||
content: '';
|
||||
background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
|
||||
mask: linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card::before {
|
||||
@apply absolute inset-0;
|
||||
@apply rounded-2xl;
|
||||
@apply p-[1px];
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 64, 64, 1) 0%,
|
||||
rgba(64, 64, 64, 0) 20%,
|
||||
rgba(64, 64, 64, 0.5) 100%
|
||||
);
|
||||
mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navigation-link {
|
||||
@apply flex items-center;
|
||||
@apply mb-6;
|
||||
}
|
||||
.navigation-link {
|
||||
@apply flex items-center text-hutopyPrimary;
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
@apply flex items-center gap-2;
|
||||
@apply text-hutopyPrimary hover:text-hutopySecondary;
|
||||
@apply transition-colors;
|
||||
@apply duration-300;
|
||||
@apply font-medium;
|
||||
}
|
||||
.link-button {
|
||||
@apply flex items-center gap-2;
|
||||
@apply text-hutopyPrimary hover:text-hutopySecondary;
|
||||
@apply transition-colors;
|
||||
@apply duration-300;
|
||||
@apply text-xl;
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-6xl;
|
||||
@apply font-medium;
|
||||
@apply mb-8;
|
||||
@apply text-center;
|
||||
}
|
||||
h1 {
|
||||
@apply text-6xl;
|
||||
@apply font-medium;
|
||||
@apply mb-8;
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-lg;
|
||||
@apply font-medium;
|
||||
@apply mb-8;
|
||||
@apply text-center;
|
||||
}
|
||||
p {
|
||||
@apply text-lg;
|
||||
@apply font-medium;
|
||||
@apply mb-8;
|
||||
@apply text-center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user