I modified the banner section on large screens.

2024-09-09 18:36:21 -04:00
parent 2d9c71be5e
commit 94950a3cba
5 changed files with 247 additions and 56 deletions
--- a/src/views/creators/CreatorAbout.vue
+++ b/src/views/creators/CreatorAbout.vue
@@ -4,7 +4,7 @@
        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
        @click="AboutUs = true"
    >
-      <v-icon style="font-size: 35px; height: 35px; width: 55px;">
+      <v-icon style="font-size: 30px; height: 30px; width: 55px;">
        mdi-information
      </v-icon>
    </button>
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,6 +1,6 @@
 <template>
  <!--  Bannière-->
-  <div>
+  <div class="shadow-lg rounded-2xl">
    <div class="relative z-20 -mt-2 md:mt-2">
      <div>
        <!-- Social Network UpperPart-->
@@ -26,12 +26,12 @@
          </div>
        </div>
      </div>
-      <div class="max-h-2" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
+      <div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
      <!--Banner-->
      <div class="relative">
        <div>
          <img
-              class="w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
+              class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
              :src="creator.images.banner ? creator.images.banner : '/images/placeholders/banner.png'"
              alt="Profile Banner"
              style="max-height: 425px"
@@ -40,7 +40,7 @@
      </div>

    </div>
-    <div class="max-h-2" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
+    <div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </div>
    <!--actions - Lowerpart-->
    <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
  </div>
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -0,0 +1,174 @@
+<template>
+  <v-btn :style="{ 
+    backgroundColor: colorBorder, color: 'white', 
+    borderRadius: '8px', padding:'20px 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>
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -4,8 +4,11 @@ import {computed, ref} from "vue";

 const props = defineProps({
  creator: {type: Object, required: true},
+  colorBorder: {required: true},
 });

+const colorBorder = computed(() => props.colorBorder);
+
 const subscriptionStore = useSubscriptionStore();

 const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
@@ -27,32 +30,45 @@ function unsubscribeFromCreator() {
 <template>
  <template v-if="isSubscribe">
    <v-btn
-        class="action mr-4"
-        variant="outlined"
+        class="mr-4"
+        :style="{ 
+        backgroundColor: colorBorder, 
+        color: 'white', 
+        borderRadius: '8px', 
+        padding: '20px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
        @click="subscribeToCreator"
-        color="white"
    >
-      {{ $t('subscribebutton.subscribe') }}
+      <div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
    </v-btn>
  </template>

  <template v-else>
    <v-btn
-        class="action mr-4"
-        variant="outlined"
+        class="mr-4"
+        :style="{ 
+        backgroundColor: colorBorder, 
+        color: 'white', 
+        borderRadius: '8px', 
+        padding: '20px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
        @click="showUnsubscribeModal = true"
-        style="transition: background-color 0.3s ease;"
-        color="white"
    >
-      {{ $t('subscribebutton.unsubscribe') }}
+      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
    </v-btn>
  </template>

  <v-dialog v-model="showUnsubscribeModal" max-width="500">
    <v-card class="text-center rounded-xl"
-            :style="{ 
-                border: `3px solid ${creator.colors.menu}` 
-              }">
+            :style="{ border: `3px solid ${creator.colors.menu}` }">

      <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
        <div class="flex-1 text-center">
@@ -64,22 +80,17 @@ function unsubscribeFromCreator() {
      <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
      <v-card-actions class="justify-center px-4 pb-4">
        <v-btn text class="flex-grow-1" variant="outlined"
-               style="background-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.4);"
+               :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
               @click="unsubscribeFromCreator">Oui
        </v-btn>

-        <v-btn color="secondary" class="flex-grow-1"
+        <v-btn class="flex-grow-1"
               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
-               @click="showUnsubscribeModal = false "> <div :style="{color: creator.colors.menu}">non</div>
+               @click="showUnsubscribeModal = false">
+          <div :style="{ color: creator.colors.menu }">Non</div>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
 </template>

-<style scoped>
-.action {
-  @apply py-2 px-4 rounded;
-  border: 1px solid currentColor;
-}
-</style>
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -1,63 +1,69 @@
 <template>
-  <div class="relative w-full mb-5">
-    <div class="rounded-b-2xl"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
-      <div class="relative z-20">
+  <div class="relative w-full">
+    <div class="rounded-b-2xl pt-2 pb-1"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+
+    <div class="relative z-20">
        <div class="flex flex-row items-center py-2">
          <!--Logo & User Info-->
          <div>
            <div>
              <img
-                  class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[225px] ml-15 -mt-40"
+                  class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
                  :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
                  alt="Profile Picture"
-                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '225px'}"
+                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
              />
            </div>
          </div>

-          <div class="ml-60 text-white mr-10">
+          <div class="ml-72 text-white mr-10">
            <div>
-              <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
-              <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
+              <p class="capitalize text-4xl font-bold ">{{ creator.name }}</p>
+              <div class="text-2xl text-white flex flex-row align-center">
+                {{ creator.about.title }}
+                <creator-about class="px-2" :creator="creator"></creator-about>
+              </div>
            </div>
          </div>

-          <div class="flex items-center">
-            <subscribe-button :creator="creator"></subscribe-button>
-          </div>

-          <div class="flex items-center ml-4">
-            <donation-button :color-border="creator.colors.menu"
-                             :color-accent="creator.colors.accent"
-                             :creator-id="creator.id"
-                             :creator-name="creator.name"
-                             :creator-logo="creator.images.logo"
-                             iconColorClass="text-white"
-            ></donation-button>
-          </div>
+          <div class="flex flex-row ml-auto space-x-2.5">
+            <donation-button-banner
+                :color-border="creator.colors.menu"
+                :color-accent="creator.colors.accent"
+                :creator-id="creator.id"
+                :creator-name="creator.name"
+                :creator-logo="creator.images.logo"
+                iconColorClass="text-white">
+            </donation-button-banner>

-          <div class="flex ml-auto space-x-4 items-center">
-            <publish-content-button :creator="creator"
-                                    @content-posted="addContent"
-            ></publish-content-button>
-
-            <div class="text-white">
-              {{ creator.about.title }}
+            <div class="flex flex-column">
+              <subscribe-button :creator="creator"
+                                :color-border="creator.colors.menu"
+              ></subscribe-button>
+              <div class="font-bold text-white flex justify-end mr-5 py-1.5" >{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
            </div>

-            <creator-about :creator="creator"></creator-about>
          </div>
        </div>
      </div>
    </div>
+
+
+<!--    &lt;!&ndash; a mettre dans le header&ndash;&gt;-->
+<!--    <publish-content-button :creator="creator"-->
+<!--                            @content-posted="addContent"-->
+<!--    ></publish-content-button>-->
  </div>
+
+
 </template>

 <script setup>
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
+import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
 import CreatorAbout from "@/views/creators/CreatorAbout.vue";

 const props = defineProps({