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

Merge remote-tracking branch 'origin/After-Devsights-UIFixes' into After-Devsights-UIFixes

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-01-08 15:03:46 -05:00
parent 9c10181969 f470adea8f
commit fd94b3e371
6 changed files with 97 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/locales/en.json
View File

@@ -124,5 +124,21 @@
"amount": "amount",
"message": "Message (optional)",
"send": "send"
},
"paymentConfirmation": {
"success": {
"title": "Payment completed",
"message": "Your payment was successful. Thank you for supporting ",
"usernameDefault": "this user.",
"receipt": "A receipt has been sent to your email address.",
"continue": "Continue"
},
"failure": {
"title": "Payment cancelled",
"message": "The payment was cancelled. If you did not intend to cancel, please try again.",
"thanks": "Thank you for supporting",
"tryAgain": "Try again",
"return": "Return to the profile of "
}
}
}
}

18
src/locales/fr.json
View File

@@ -124,5 +124,21 @@
"amount": "Montant",
"message": "Message (facultatif)",
"send": "Envoyez"
},
"paymentConfirmation": {
"success": {
"title": "Paiement complété",
"message": "Votre paiement a été effectué avec succès. Merci de soutenir ",
"usernameDefault": "cet utilisateur.",
"receipt": "Un reçu a été envoyé à votre adresse courriel.",
"continue": "Continuer"
},
"failure": {
"title": "Paiement annulé",
"message": "Le paiement a été annulé. Si vous n'aviez pas l'intention d'annuler, veuillez réessayer.",
"thanks": "Merci de supporter",
"tryAgain": "Réessayer",
"return": "Retour au profil de "
}
}
}
}

10
src/router/router.js
View File

@@ -1,5 +1,6 @@
import { useAuthStore } from '@/stores/authStore.js';
import CTA01 from '@/views/CTA01.vue';
import PaymentFailed from '@/views/PaymentFailed.vue';
import CreatorList from '@/views/browser/CreatorList.vue';
import ContentEditorPage from '@/views/contents/ContentEditorPage.vue';
import ContentPage from '@/views/contents/ContentPage.vue';
@@ -22,7 +23,6 @@ import ProfilePage from '@/views/profile/ProfilePage.vue';
import { createRouter, createWebHistory } from 'vue-router';
import LoginView from '../views/LoginView.vue';
import PaymentCompleted from '../views/PaymentCompleted.vue';
import PaymentFailed from "@/views/PaymentFailed.vue";
import Home from '../views/main/Home.vue';
import Wallet from '../views/main/Wallet.vue';
import CreateCreator from "@/views/profile/creators/CreateCreator.vue";
@@ -136,18 +136,14 @@ const routes = [
meta: { notAuthenticated: true },
},
{
path: '/paymentcompleted',
path: '/paymentcompleted/:creatorId',
name: 'PaymentCompleted',
component: PaymentCompleted,
},
{
path: '/paymentfailed',
path: '/paymentfailed/:creatorId',
name: 'PaymentFailed',
component: PaymentFailed,
},
{
path: '/wallet',

64
src/views/PaymentCompleted.vue
View File

@@ -2,10 +2,13 @@
<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;">
<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é
{{ $t('paymentConfirmation.success.title') }}
</v-card-title>
<!-- Check Icon -->
@@ -15,37 +18,32 @@
<!-- 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>
<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>
<!-- 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 class="text-center mb-4">
<p class="text-h6">
{{ $t('paymentConfirmation.success.receipt') }}
</p>
</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}` })"
color="primary"
class="text-white px-5 py-3"
@click="router.push({ path: `/@${creatorUserName}` })"
>
Continuer
{{ $t('paymentConfirmation.success.continue') }}
</v-btn>
</v-card-actions>
</v-card>
@@ -63,27 +61,23 @@
</template>
<script setup>
import { ref, onBeforeMount } from 'vue';
import { 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();
const client = useClient();
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const creatorId = urlParams.get('creatorId');
const creatorName = ref('');
const creatorId = route.params.creatorId;
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;
const response = await client.get(`/api/creators/${creatorId}`);
creatorUserName.value = response.data.name;
} catch (error) {
console.error('Failed to fetch creator data:', error);
}
@@ -92,7 +86,7 @@ onBeforeMount(async () => {
async function getReceipt() {
try {
const response = await client.get(
`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
);
const receiptUrl = response.data.receiptUrl;

98
src/views/PaymentFailed.vue
View File

@@ -1,11 +1,16 @@
<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;">
<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 text-danger">
Échec du paiement
<v-card-title
class="text-center text-h4 font-weight-bold mb-4 text-danger"
>
{{ $t('paymentConfirmation.failure.title') }}
</v-card-title>
<!-- Cancel Icon -->
@@ -15,97 +20,52 @@
<!-- Message -->
<v-card-text class="text-center mb-4">
<p class="text-h6">Nous sommes désolés, le paiement a été annulé.</p>
<p class="text-h5 font-weight-bold">Merci de supporter {{ creatorName }}</p>
</v-card-text>
<!-- Email Input and Retry Button -->
<v-card-text>
<v-row class="d-flex flex-column align-center mb-4">
<v-col cols="12" md="8">
<v-text-field
v-model="email"
label="Entrez votre email pour vérifier le statut du paiement"
variant="underlined"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" md="4" class="text-center">
<v-btn color="primary" class="text-white" @click="getReceipt">
Réessayer
</v-btn>
</v-col>
</v-row>
<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}` })"
color="primary"
class="text-white px-5 py-3"
@click="router.push({ path: `/@${creatorUserName}` })"
>
Retour
{{ $t('paymentConfirmation.failure.return') }}
{{ creatorUserName }}
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<!-- Error Snackbar -->
<v-snackbar v-model="errorSnackBar" color="red darken-1">
Aucun statut 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';
import { onBeforeMount, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
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);
const creatorId = route.params.creatorId;
const creatorUserName = ref('');
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;
const response = await client.get(`/api/creators/${creatorId}`);
creatorUserName.value = response.data.name;
} catch (error) {
console.error("Failed to fetch creator data:", 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>

4
src/views/creators/BannerActions.vue
View File

@@ -207,8 +207,8 @@ onBeforeUnmount(() => {
v-if="creator"
:creator-id="creator.id"
:creator-name="creator.name"
:on-success-url="baseURL + '/paymentcompleted'"
:on-cancelled-url="baseURL + '/@' + creatorName"
:on-success-url="baseURL + '/paymentcompleted/' + creator.id"
:on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
></donation-button-banner>
</div>
</div>