95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<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);
|
|
}
|
|
|
|
// Référence pour contrôler l'affichage du modal
|
|
const showUnsubscribeModal = ref(false);
|
|
|
|
function unsubscribeFromCreator() {
|
|
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
|
|
// Fermer le modal après désabonnement
|
|
showUnsubscribeModal.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="isSubscribe">
|
|
<v-btn
|
|
:style="{
|
|
width: '150px',
|
|
height: '28px',
|
|
backgroundColor: brandingStore.colors.secondary,
|
|
color: 'white',
|
|
borderRadius: '8px 0 0 8px',
|
|
padding: '10px 24px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'background-color 0.3s ease'
|
|
}"
|
|
@click="subscribeToCreator"
|
|
>
|
|
<div>Follow</div>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<v-btn
|
|
:style="{
|
|
width: '150px',
|
|
height: '28px',
|
|
backgroundColor: brandingStore.colors.secondary,
|
|
color: 'white',
|
|
borderRadius: '8px 0 0 8px',
|
|
padding: '10px 24px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'background-color 0.3s ease'
|
|
}"
|
|
@click="showUnsubscribeModal = true"
|
|
>
|
|
<div>{{ $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.secondary}` }">
|
|
|
|
<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.secondary, color: brandingStore.colors.secondary }"
|
|
variant="outlined"
|
|
@click="showUnsubscribeModal = false">
|
|
<div :style="{ color: brandingStore.colors.secondary }">Non</div>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|