153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<template>
|
|
<v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
|
|
<v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
|
|
</v-btn>
|
|
|
|
|
|
<v-dialog v-model="donationModal" max-width="500">
|
|
<v-form>
|
|
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
|
|
<div class="py-4 text-2xl font-bold border-b mb-2">
|
|
Je Soutiens!
|
|
</div>
|
|
|
|
<div class="flex flex-row align-center px-3">
|
|
<img
|
|
:src="creatorLogo"
|
|
alt="Profile Image"
|
|
class="rounded-full"
|
|
width="40"
|
|
height="40"
|
|
:style="{ border: `2px solid ${colorAccent}` }">
|
|
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
|
|
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
|
|
<v-card-text>
|
|
<v-text-field v-model="tipAmount"
|
|
class="p-2"
|
|
label="Montant"
|
|
density="comfortable"
|
|
variant="outlined"
|
|
hide-details
|
|
clearable
|
|
></v-text-field>
|
|
|
|
<v-textarea v-model="tipMessage"
|
|
label="Message (facultatif)"
|
|
class="p-2"
|
|
density="comfortable"
|
|
variant="outlined"
|
|
hide-details
|
|
clearable
|
|
></v-textarea>
|
|
|
|
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
|
|
@click="goPay()" class="w-full mt-5">
|
|
Envoyez
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-form>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
|
|
<template v-slot:default>
|
|
<v-card>
|
|
|
|
<div id="checkout">
|
|
</div>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useClient} from '@/plugins/api.js';
|
|
import {loadStripe} from '@stripe/stripe-js';
|
|
import {computed, onMounted, ref} from 'vue';
|
|
|
|
const props = defineProps({
|
|
colorBorder: {required: true},
|
|
colorAccent: {required: true},
|
|
creatorId: {type: String, required: true},
|
|
creatorName: {type: String, required: true},
|
|
creatorLogo: {required: true},
|
|
iconColorClass: {default: 'text-black'}
|
|
});
|
|
|
|
const colorBorder = computed(() => props.colorBorder)
|
|
const colorAccent = computed(() => props.colorAccent)
|
|
const creatorId = computed(() => props.creatorId)
|
|
const creatorName = computed(() => props.creatorName)
|
|
const creatorLogo = computed(() => props.creatorLogo)
|
|
|
|
const donationModal = ref(false);
|
|
|
|
function openDonationDialog() {
|
|
donationModal.value = true
|
|
}
|
|
|
|
function closeDonationDialog() {
|
|
donationModal.value = false
|
|
}
|
|
|
|
|
|
const isPaymentDialogActive = ref(false);
|
|
|
|
const tipAmount = ref(0);
|
|
const tipMessage = ref("");
|
|
|
|
let stripe = null;
|
|
let checkout;
|
|
|
|
|
|
onMounted(async () => {
|
|
stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
|
|
});
|
|
|
|
const fetchClientSecret = async () => {
|
|
const clientSecret = await createCheckoutSession();
|
|
return clientSecret;
|
|
};
|
|
|
|
|
|
async function createCheckoutSession() {
|
|
const client = useClient()
|
|
let clientSecret = await client.post('/api/Stripe', {
|
|
amount: (tipAmount.value * 100),
|
|
tipMessage: tipMessage.value,
|
|
creatorId: props.creatorId
|
|
|
|
});
|
|
|
|
let secret = clientSecret["data"];
|
|
return secret;
|
|
}
|
|
|
|
function closeDialog() {
|
|
isPaymentDialogActive.value = false;
|
|
if (checkout) {
|
|
checkout.destroy();
|
|
}
|
|
}
|
|
|
|
async function goPay() {
|
|
isPaymentDialogActive.value = true;
|
|
|
|
checkout = await stripe.initEmbeddedCheckout({
|
|
fetchClientSecret,
|
|
});
|
|
|
|
await checkout.mount('#checkout');
|
|
}
|
|
</script>
|