Add slim menu

src/views/creators/DonationButtonBannerSlim.vue

@@ -0,0 +1,174 @@
+<template>
+  <v-btn :style="{ 
+    backgroundColor: colorBorder, color: 'white', 
+    borderRadius: '8px', padding:'0px 24px', 
+    display: 'flex', alignItems: 'center', 
+    justifyContent: 'center' }" @click="openDonationDialog()">
+    <div class="font-bold"> Je soutiens </div>
+  </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"
+              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: 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');
+}
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
+</script>