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

Add donate btn

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-12 14:13:49 -04:00
parent 071b65b89e
commit 0818595cf3
4 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/contents/ContentCard.vue
View File

@@ -76,10 +76,9 @@
icon icon
@click="toggleComments"> @click="toggleComments">
<v-icon>mdi-comment-outline</v-icon> <v-icon>mdi-comment-outline</v-icon>
</v-btn> </v-btn>
<v-btn variant="plain" icon @click="donate">
<v-icon>mdi-gift-outline</v-icon> <donation-button creator="creator"></donation-button>
</v-btn>
</div> </div>
<div :class="{'hidden': !commentsVisible}"> <div :class="{'hidden': !commentsVisible}">
@@ -101,6 +100,7 @@ import MessageList from "@/views/messages/MessageList.vue";
import PostMessage from "@/views/messages/PostMessage.vue"; import PostMessage from "@/views/messages/PostMessage.vue";
import YoutubePlayer from './YoutubePlayer.vue'; import YoutubePlayer from './YoutubePlayer.vue';
import ImageViewer from './ImageViewer.vue'; import ImageViewer from './ImageViewer.vue';
import DonationButton from "@/views/creators/donation-button.vue";
const props = defineProps({ const props = defineProps({
content: { content: {

1
src/views/creators/CreatorBanner.vue
View File

@@ -1,5 +1,4 @@
<template> <template>
<!-- Bannière--> <!-- Bannière-->
<div class="relative bottom-4 z-20 m"> <div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col"> <div class="relative flex flex-col">

2
src/views/creators/CreatorPage.vue
View File

@@ -3,7 +3,7 @@
<creator-banner :creator="creator"></creator-banner> <creator-banner :creator="creator"></creator-banner>
<donation-popup :creator-id="creator.id"></donation-popup> <!-- <donation-popup :creator-id="creator.id"></donation-popup>-->
<div class="max-w-[800px] mx-auto flex flex-row justify-center "> <div class="max-w-[800px] mx-auto flex flex-row justify-center ">
<div class="w-full h-full mx-1"> <div class="w-full h-full mx-1">

11
src/views/creators/donation-button.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<v-btn variant="text" icon class="text-white" @click="donationModal = true"> <v-btn variant="text" icon @click="donationModal = true">
<v-icon class="text-2xl">mdi-gift-outline</v-icon> <v-icon class="text-2xl">mdi-gift-outline</v-icon>
</v-btn> </v-btn>
@@ -75,6 +75,7 @@ const donationModal = ref(false);
const isPaymentDialogActive = ref(false); // Ajout de cette ligne const isPaymentDialogActive = ref(false); // Ajout de cette ligne
const price = ref(0); const price = ref(0);
const tipMessage = ref(""); const tipMessage = ref("");
let stripe = null; let stripe = null;
let checkout; let checkout;
@@ -82,11 +83,12 @@ const client = useClient();
const props = defineProps({ const props = defineProps({
creator: {type: Object, required: true}, creator: {type: Object, required: true},
}); });
onMounted(async () => { onMounted(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY); stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
console.log(props.creator.id)
}); });
const fetchClientSecret = async () => { const fetchClientSecret = async () => {
@@ -94,11 +96,14 @@ const fetchClientSecret = async () => {
return clientSecret; return clientSecret;
}; };
async function createCheckoutSession() { async function createCheckoutSession() {
let clientSecret = await client.post('/api/Stripe', { let clientSecret = await client.post('/api/Stripe', {
amount: (price.value * 100), amount: (price.value * 100),
tipMessage: tipMessage.value, tipMessage: tipMessage.value,
creatorId: props.creatorId creatorId: props.creator.id
}); });
let secret = clientSecret["data"]; let secret = clientSecret["data"];