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

Error management + feedback for user

Browse Source
This commit is contained in:
Karl Carriere
2024-12-17 09:48:12 -05:00
parent 70a63d06b9
commit 762bddbec7
1 changed files with 113 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/views/creators/DonationButtonBanner.vue
View File

@@ -1,16 +1,20 @@
<template> <template>
<v-btn
<v-btn variant="text" style="font-size: x-large; height: 100%" block @click="openDonationDialog()"> variant="text"
style="font-size: x-large; height: 100%"
block
@click="openDonationDialog()"
>
Je Soutiens Je Soutiens
</v-btn> </v-btn>
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }"> <v-card
<div class="py-4 text-2xl font-bold border-b mb-2"> class="text-center rounded-xl"
Je Soutiens :style="{ border: `3px solid ${brandingStore.colors.primary}` }"
</div> >
<div class="py-4 text-2xl font-bold border-b mb-2">Je Soutiens</div>
<div class="flex flex-row align-center px-3"> <div class="flex flex-row align-center px-3">
<img <img
@@ -19,9 +23,17 @@
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${brandingStore.colors.secondary}` }"> :style="{ border: `2px solid ${brandingStore.colors.secondary}` }"
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div> />
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <div class="capitalize px-2 text-2xl">
{{ brandingStore.value.name }}
</div>
<v-btn
icon
@click="closeDonationDialog()"
class="ml-auto"
variant="text"
>
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</div> </div>
@@ -30,6 +42,8 @@
<v-text-field <v-text-field
v-model="tipAmountInDollars" v-model="tipAmountInDollars"
type="number" type="number"
autofocus
placeholder="0"
:min="0" :min="0"
class="p-2" class="p-2"
label="Montant" label="Montant"
@@ -42,7 +56,8 @@
prepend-inner-icon="mdi-currency-usd" prepend-inner-icon="mdi-currency-usd"
></v-text-field> ></v-text-field>
<v-textarea v-model="tipMessage" <v-textarea
v-model="tipMessage"
label="Message (facultatif)" label="Message (facultatif)"
class="p-2" class="p-2"
density="comfortable" density="comfortable"
@@ -51,9 +66,16 @@
clearable clearable
></v-textarea> ></v-textarea>
<v-btn variant="outlined" <v-btn
:style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }" variant="outlined"
@click="goPay()" class="w-full mt-5"> :style="{
borderColor: brandingStore.colors.primary,
color: brandingStore.colors.primary,
backgroundColor: brandingStore.colors.secondary,
}"
@click="goPay()"
class="w-full mt-5"
>
Envoyez Envoyez
</v-btn> </v-btn>
</v-card-text> </v-card-text>
@@ -63,84 +85,89 @@
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent> <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default> <template v-slot:default>
<v-card> <v-card :style="{ padding: '20px' }">
<div id="checkout"></div>
<div id="checkout"> <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
</div>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-card-actions> <v-card-actions>
<v-btn block class="ma-auto" <v-btn
style="width: 200px;" block
@click="closeDialog()">Annuler class="ma-auto"
style="width: 200px"
@click="closeDialog()"
>Annuler
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</template> </template>
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js'; import { useBrandingStore } from '@/stores/brandingStore.js';
import {onMounted, ref} from 'vue'; import { loadStripe } from '@stripe/stripe-js';
import {useBrandingStore} from "@/stores/brandingStore.js"; import { onMounted, ref } from 'vue';
const brandingStore = useBrandingStore() const brandingStore = useBrandingStore();
const props = defineProps({ const props = defineProps({
creatorId: {default: 'missing-creator-id', required: true}, creatorId: { default: 'missing-creator-id', required: true },
creatorName: {default: 'missing-creator-name', required: true}, creatorName: { default: 'missing-creator-name', required: true },
onSuccessUrl: {default: 'missing-on-success-u', required: true}, onSuccessUrl: { default: 'missing-on-success-u', required: true },
onCancelledUrl: {default: 'missing-on-cancelled-url', required: true}, onCancelledUrl: { default: 'missing-on-cancelled-url', required: true },
iconColorClass: {default: 'text-black'} iconColorClass: { default: 'text-black' },
}); });
const errorMessage = ref('');
const donationModal = ref(false); const donationModal = ref(false);
function openDonationDialog() { function openDonationDialog() {
donationModal.value = true donationModal.value = true;
} }
function closeDonationDialog() { function closeDonationDialog() {
donationModal.value = false donationModal.value = false;
} }
const isPaymentDialogActive = ref(false); const isPaymentDialogActive = ref(false);
const tipAmountInDollars = ref(0); const tipAmountInDollars = ref('');
const tipMessage = ref(""); const tipMessage = ref('');
let stripe = null; let stripe = null;
let checkout; let checkout;
onMounted(async () => { onMounted(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY); stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
}); });
async function createCheckoutSession() { async function createCheckoutSession() {
const client = useClient() const client = useClient();
try {
let clientSecret = await client.post( let clientSecret = await client.post(`/api/tips`, {
`/api/tips`, creatorId: props.creatorId,
{
amount: tipAmountInDollars.value * 100, amount: tipAmountInDollars.value * 100,
currency: 'CAD', currency: 'CAD',
message: tipMessage.value, message: tipMessage.value,
creatorId: props.creatorId,
checkoutSuccessUrl: props.onSuccessUrl, checkoutSuccessUrl: props.onSuccessUrl,
checkoutCancelledUrl: props.onCancelledUrl checkoutCancelledUrl: props.onCancelledUrl,
}); });
return clientSecret.data; return clientSecret.data;
} catch (error) {
console.error(error);
errorMessage.value = 'Une erreur est survenue. Veuillez réessayer.';
}
} }
function closeDialog() { function closeDialog() {
isPaymentDialogActive.value = false; isPaymentDialogActive.value = false;
errorMessage.value = '';
if (checkout) { if (checkout) {
checkout.destroy(); checkout.destroy();
} }
@@ -149,10 +176,10 @@ function closeDialog() {
async function goPay() { async function goPay() {
isPaymentDialogActive.value = true; isPaymentDialogActive.value = true;
const response = await createCheckoutSession() const response = await createCheckoutSession();
// Redirect to the Stripe Checkout page // Redirect to the Stripe Checkout page
window.location.href = response.stripeCheckoutUrl window.location.href = response.stripeCheckoutUrl;
} }
function preventNonNumeric(event) { function preventNonNumeric(event) {
@@ -165,8 +192,17 @@ function preventNonNumeric(event) {
} }
</script> </script>
<style > <style>
.full-height { .full-height {
height: 100%; height: 100%;
} }
.error-message {
color: white;
background-color: red;
border-radius: 4px;
text-align: center;
width: 100%;
padding: 5px;
}
</style> </style>