- Removes BannerActions
- Fix router for Documentations - Clean login
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
|
||||
import BannerActions from "@/views/creators/BannerActions.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const branding = useBrandingStore()
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<v-btn :style="{
|
||||
backgroundColor: brandingStore.colors.primary,
|
||||
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 ${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="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: 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-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<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 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>
|
||||
@@ -1,90 +0,0 @@
|
||||
<script setup>
|
||||
import {computed, ref} from "vue";
|
||||
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
const subscriptionStore = useSubscriptionStore();
|
||||
|
||||
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
|
||||
|
||||
function subscribeToCreator() {
|
||||
subscriptionStore.subscribeTo(brandingStore.value.id);
|
||||
}
|
||||
|
||||
const showUnsubscribeModal = ref(false);
|
||||
|
||||
function unsubscribeFromCreator() {
|
||||
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
|
||||
showUnsubscribeModal.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="isSubscribe">
|
||||
<v-btn
|
||||
class="mr-4"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.secondary,
|
||||
color: 'white',
|
||||
borderRadius: '8px',
|
||||
padding: '0px 24px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'background-color 0.3s ease'
|
||||
}"
|
||||
@click="subscribeToCreator"
|
||||
>
|
||||
<div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-btn
|
||||
class="mr-4"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.secondary,
|
||||
color: 'white',
|
||||
borderRadius: '8px',
|
||||
padding: '0px 24px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'background-color 0.3s ease'
|
||||
}"
|
||||
@click="showUnsubscribeModal = true"
|
||||
>
|
||||
<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 ${brandingStore.colors.primary}` }">
|
||||
|
||||
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
|
||||
<div class="flex-1 text-center">
|
||||
Déabonnement
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-title>Confirmation</v-card-title>
|
||||
<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="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
|
||||
@click="unsubscribeFromCreator">Oui
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="flex-grow-1"
|
||||
:style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
|
||||
variant="outlined"
|
||||
@click="showUnsubscribeModal = false">
|
||||
<div :style="{ color: brandingStore.colors.primary }">Non</div>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<script setup>
|
||||
import BannerActionsMd from "@/views/creators/banner/bannerlower/BannerActionsMd.vue";
|
||||
import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm.vue";
|
||||
import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
|
||||
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<banner-actions-sm class="d-sm-none"
|
||||
></banner-actions-sm>
|
||||
|
||||
<banner-actions-md class="d-none d-sm-flex d-md-none"
|
||||
></banner-actions-md>
|
||||
|
||||
<banner-actions-lg class="d-none d-md-flex d-lg-none"
|
||||
></banner-actions-lg>
|
||||
|
||||
<banner-actions-xl class="d-none d-lg-flex"
|
||||
></banner-actions-xl>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div class="relative w-full">
|
||||
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
|
||||
:style="{ backgroundColor: brandingStore.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
|
||||
|
||||
<!-- Logo & User Info -->
|
||||
<div class="relative z-20">
|
||||
<div class="flex flex-row items-center py-2">
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
|
||||
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row ml-auto space-x-2.5">
|
||||
<donation-button-banner></donation-button-banner>
|
||||
|
||||
<div class="flex flex-column">
|
||||
<!-- Bouton abonnement affiché seulement si non abonné -->
|
||||
<subscribe-button></subscribe-button>
|
||||
|
||||
<div class="font-bold text-white flex justify-end mr-5 py-1.5">
|
||||
{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conteneur sticky -->
|
||||
<div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
|
||||
:style="{ backgroundColor: brandingStore.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
|
||||
<div class="shadow-3xl flex flex-row items-center py-2 px-2">
|
||||
<div>
|
||||
<img
|
||||
class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
|
||||
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-5 text-white">
|
||||
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
|
||||
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
|
||||
</div>
|
||||
<div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
|
||||
|
||||
<donation-button-banner-slim></donation-button-banner-slim>
|
||||
|
||||
<!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
|
||||
<subscribe-button-slim
|
||||
v-if="!isSubscribed">
|
||||
</subscribe-button-slim>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, computed} from 'vue';
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
|
||||
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
|
||||
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
|
||||
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
const subscriptionStore = useSubscriptionStore()
|
||||
|
||||
// Calculer si l'utilisateur est abonné
|
||||
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(brandingStore.value.id));
|
||||
|
||||
const isSticky = ref(false);
|
||||
const mainContainer = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
isSticky.value = !entry.isIntersecting;
|
||||
},
|
||||
{threshold: 0}
|
||||
);
|
||||
|
||||
if (mainContainer.value) {
|
||||
observer.observe(mainContainer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="rounded-b-2xl"
|
||||
:style="{ backgroundColor: brandingStore.colors.bannerBottom }">
|
||||
<div>
|
||||
|
||||
<!-- Logo-Name-Followers -->
|
||||
<div class="flex flex-row relative z-20">
|
||||
<div>
|
||||
<img
|
||||
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
|
||||
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: brandingStore.colors.accent, height: '150px'}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
|
||||
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
|
||||
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-2">
|
||||
<subscribe-button></subscribe-button>
|
||||
<div class="flex space-x-2">
|
||||
<donation-button iconColorClass="text-white"
|
||||
></donation-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
|
||||
</script>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div
|
||||
:style="{backgroundColor: brandingStore.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.colors.accent}`}">
|
||||
<div>
|
||||
<!-- Logo-Name-Followers-->
|
||||
<div class="flex flex-row relative z-20">
|
||||
|
||||
<div class="flex flex-column text-white capitalize px-2 mt-1">
|
||||
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
|
||||
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Title-info-donation-->
|
||||
<div class="flex flex-row items-center justify-between w-full px-4">
|
||||
|
||||
<div>
|
||||
<subscribe-button></subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="flex ml-auto space-x-4">
|
||||
<donation-button iconColorClass="text-white"
|
||||
></donation-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user