social-media/src/views/creators/DonationButton.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 ${brandingStore.colors.primary}` }">
        <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"
              alt="Profile Image"
              class="rounded-full"
              width="40"
              height="40"
              :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">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </div>

        <v-card-text>
          <v-text-field
              v-model="tipAmountInDollars"
              type="number"
              :min="0"
              class="p-2"
              label="Montant"
              density="comfortable"
              variant="outlined"
              hide-details
              clearable
              inputmode="numeric"
              @keydown="preventNonNumeric"
              prepend-inner-icon="mdi-currency-usd"
          ></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: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                 @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-spacer></v-spacer>

        <v-card-actions>
          <v-btn block 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 {loadStripe} from '@stripe/stripe-js';
import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";

const brandingStore = useBrandingStore()

const props = defineProps({
  creatorId: {default: 'missing-creator-id', required: true},
  creatorName: {default: 'missing-creator-name', required: true},
  onSuccessUrl: {default: 'missing-on-success-u', required: true},
  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
  iconColorClass: {default: 'text-black'}
});

const donationModal = ref(false);

function openDonationDialog() {
  donationModal.value = true
}

function closeDonationDialog() {
  donationModal.value = false
}


const isPaymentDialogActive = ref(false);

const tipAmountInDollars = ref(0);
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()

  let clientSecret = await client.post(
      `/api/tips`,
      {
        amount: tipAmountInDollars.value * 100,
        currency: 'CAD',
        message: tipMessage.value,
        creatorId: props.creatorId,
        checkoutSuccessUrl: props.onSuccessUrl,
        checkoutCancelledUrl: props.onCancelledUrl
      });

  return clientSecret.data;
}

function closeDialog() {
  isPaymentDialogActive.value = false;
  if (checkout) {
    checkout.destroy();
  }
}

async function goPay() {
  isPaymentDialogActive.value = true;

  const response = await createCheckoutSession()

  // Redirect to the Stripe Checkout page
  window.location.href = response.stripeCheckoutUrl
}

function preventNonNumeric(event) {
  const key = event.key;
  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];

  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
    event.preventDefault();
  }
}
</script>