Error management + feedback for user

src/views/creators/DonationButtonBanner.vue

@@ -1,59 +1,81 @@
 <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
   </v-btn>
 
-
   <v-dialog v-model="donationModal" max-width="500">
     <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">
           <img
-              :src="brandingStore.value.images.logo"
+            :src="brandingStore.value.images.logo"
-              alt="Profile Image"
+            alt="Profile Image"
-              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-btn>
         </div>
 
         <v-card-text>
           <v-text-field
-              v-model="tipAmountInDollars"
+            v-model="tipAmountInDollars"
-              type="number"
+            type="number"
-              :min="0"
+            autofocus
-              class="p-2"
+            placeholder="0"
-              label="Montant"
+            :min="0"
-              density="comfortable"
+            class="p-2"
-              variant="outlined"
+            label="Montant"
-              hide-details
+            density="comfortable"
-              clearable
+            variant="outlined"
-              inputmode="numeric"
+            hide-details
-              @keydown="preventNonNumeric"
+            clearable
-              prepend-inner-icon="mdi-currency-usd"
+            inputmode="numeric"
+            @keydown="preventNonNumeric"
+            prepend-inner-icon="mdi-currency-usd"
           ></v-text-field>
 
-          <v-textarea v-model="tipMessage"
+          <v-textarea
-                      label="Message (facultatif)"
+            v-model="tipMessage"
-                      class="p-2"
+            label="Message (facultatif)"
-                      density="comfortable"
+            class="p-2"
-                      variant="outlined"
+            density="comfortable"
-                      hide-details
+            variant="outlined"
-                      clearable
+            hide-details
+            clearable
           ></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
           </v-btn>
         </v-card-text>
@@ -63,84 +85,89 @@
 
   <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
     <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-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-card-actions>
       </v-card>
     </template>
   </v-dialog>
-
 </template>
 
 <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({
-  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);
 
 function openDonationDialog() {
-  donationModal.value = true
+  donationModal.value = true;
 }
 
 function closeDonationDialog() {
-  donationModal.value = false
+  donationModal.value = false;
 }
 
-
 const isPaymentDialogActive = ref(false);
 
-const tipAmountInDollars = ref(0);
+const tipAmountInDollars = ref('');
-const tipMessage = ref("");
+const tipMessage = ref('');
 
 let stripe = null;
 let checkout;
 
-
 onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
 });
 
 async function createCheckoutSession() {
-  const client = useClient()
+  const client = useClient();
+  try {
+    let clientSecret = await client.post(`/api/tips`, {
+      creatorId: props.creatorId,
+      amount: tipAmountInDollars.value * 100,
+      currency: 'CAD',
+      message: tipMessage.value,
+      checkoutSuccessUrl: props.onSuccessUrl,
+      checkoutCancelledUrl: props.onCancelledUrl,
+    });
 
-  let clientSecret = await client.post(
+    return clientSecret.data;
-      `/api/tips`,
+  } catch (error) {
-      {
+    console.error(error);
-        amount: tipAmountInDollars.value * 100,
+    errorMessage.value = 'Une erreur est survenue. Veuillez réessayer.';
-        currency: 'CAD',
+  }
-        message: tipMessage.value,
-        creatorId: props.creatorId,
-        checkoutSuccessUrl: props.onSuccessUrl,
-        checkoutCancelledUrl: props.onCancelledUrl
-      });
-
-  return clientSecret.data;
 }
 
 function closeDialog() {
   isPaymentDialogActive.value = false;
+  errorMessage.value = '';
+
   if (checkout) {
     checkout.destroy();
   }
@@ -149,10 +176,10 @@ function closeDialog() {
 async function goPay() {
   isPaymentDialogActive.value = true;
 
-  const response = await createCheckoutSession()
+  const response = await createCheckoutSession();
 
   // Redirect to the Stripe Checkout page
-  window.location.href = response.stripeCheckoutUrl
+  window.location.href = response.stripeCheckoutUrl;
 }
 
 function preventNonNumeric(event) {
@@ -165,8 +192,17 @@ function preventNonNumeric(event) {
 }
 </script>
 
-<style >
+<style>
 .full-height {
   height: 100%;
 }
+
+.error-message {
+  color: white;
+  background-color: red;
+  border-radius: 4px;
+  text-align: center;
+  width: 100%;
+  padding: 5px;
+}
 </style>