258 lines
8.1 KiB
Vue
258 lines
8.1 KiB
Vue
<script setup>
|
|
import XIcon from '@/assets/icons/x.svg';
|
|
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
|
import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
|
|
import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
|
|
import {ref} from 'vue';
|
|
import LogoPicker from '../creators/CreatorLogoEditor.vue';
|
|
import Socials from './creators/Socials.vue';
|
|
|
|
const creatorProfileStore = useCreatorProfileStore();
|
|
|
|
const dialog = ref(false);
|
|
const currentComponent = ref('');
|
|
|
|
const componentsMap = {
|
|
LogoPicker,
|
|
Socials,
|
|
ChangeTitle,
|
|
ChangeStripeID,
|
|
};
|
|
|
|
function requestCancel() {
|
|
currentComponent.value = null;
|
|
dialog.value = false;
|
|
}
|
|
|
|
const openDialog = (component) => {
|
|
currentComponent.value = componentsMap[component];
|
|
dialog.value = true;
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
currentComponent.value = null;
|
|
dialog.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog v-model="dialog" max-width="800px">
|
|
<v-card
|
|
:style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"
|
|
>
|
|
<v-card-text>
|
|
<component
|
|
:is="currentComponent"
|
|
:creator="creatorProfileStore.creator"
|
|
@closeRequested="closeDialog"
|
|
@requestAccept="requestAccept"
|
|
@requestCancel="requestCancel"
|
|
></component>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Lorsque l'utilisateur n'a pas de creator name-->
|
|
<v-card rounded="xl" class="w-full">
|
|
<h1 class="uppercase">
|
|
{{ $t('creatorinfopage.informations') }}
|
|
</h1>
|
|
|
|
<!-- INFOS -->
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="flex-none pa-2 min-w-32 text-left">
|
|
{{ $t('creatorinfopage.name') }}
|
|
</span>
|
|
|
|
<span class="flex-auto text-left pr-6 capitalize">
|
|
{{ creatorProfileStore.creator.name }}
|
|
</span>
|
|
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
|
|
</button>
|
|
</div>
|
|
|
|
<!-- TITLE -->
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@click="openDialog('ChangeTitle')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="flex-none pa-2 min-w-32 text-left">{{
|
|
$t('creatorinfopage.title')
|
|
}}</span>
|
|
<span class="flex-auto text-left pr-6 capitalize">`{{
|
|
creatorProfileStore.creator.title
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- STRIPE -->
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@click="openDialog('ChangeStripeID')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
|
|
>
|
|
<span class="flex-none pa-2 min-w-32 text-left"
|
|
>Stripe Account ID</span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.stripeId
|
|
}}</span>
|
|
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</v-card>
|
|
|
|
<v-card rounded="xl" class="w-full">
|
|
<div class="uppercase">
|
|
{{ $t('creatorinfopage.socialnetwork') }}
|
|
</div>
|
|
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="pa-2 min-w-32 text-left">
|
|
<v-icon>mdi-facebook</v-icon>
|
|
</span>
|
|
|
|
<span class="flex-auto text-left pr-6">
|
|
{{ creatorProfileStore.creator.socials?.facebookUrl }}
|
|
</span>
|
|
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="flex-none pa-2 min-w-32 text-left">
|
|
<v-icon>mdi-instagram</v-icon></span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.instagramUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="flex-none pa-2 w-9 h-9 text-left ml-0.5">
|
|
<XIcon></XIcon>
|
|
</span>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.xUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="pa-2 min-w-32 text-left"
|
|
><v-icon>mdi-linkedin</v-icon></span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.linkedInUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="flex-none pa-2 min-w-32 text-left">
|
|
<XIcon class="w-5 h-5"></XIcon>
|
|
</span>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.tikTokUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="pa-2 min-w-32 text-left"
|
|
><v-icon>mdi-youtube</v-icon></span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.youtubeUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
|
>
|
|
<span class="pa-2 min-w-32 text-left"
|
|
><v-icon>mdi-reddit</v-icon></span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.redditUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
|
|
>
|
|
<span class="pa-2 min-w-32 text-left"
|
|
><v-icon>mdi-web</v-icon></span
|
|
>
|
|
<span class="flex-auto text-left pr-6">{{
|
|
creatorProfileStore.creator.socials?.websiteUrl
|
|
}}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</v-card>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
.HoverBtn:hover {
|
|
@apply bg-[#A6147D] text-white;
|
|
@apply hover:opacity-90;
|
|
}
|
|
</style>
|