97 lines
2.8 KiB
Vue
97 lines
2.8 KiB
Vue
<script setup>
|
|
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
|
|
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));
|
|
|
|
function subscribeToCreator() {
|
|
subscriptionStore.subscribeTo(props.creator.id);
|
|
}
|
|
|
|
|
|
const showUnsubscribeModal = ref(false);
|
|
|
|
function unsubscribeFromCreator() {
|
|
subscriptionStore.unsubscribeFrom(props.creator.id);
|
|
|
|
showUnsubscribeModal.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="isSubscribe">
|
|
<v-btn
|
|
class="mr-4"
|
|
:style="{
|
|
backgroundColor: colorBorder,
|
|
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: colorBorder,
|
|
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 ${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">
|
|
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: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
|
|
@click="showUnsubscribeModal = false">
|
|
<div :style="{ color: creator.colors.menu }">Non</div>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|