jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add contact information section to AboutCreator.vue and integrate phone/email updates in ProfilePage.vue

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-04-24 04:08:25 -04:00
parent c1c1f30b37
commit cc3df49848
2 changed files with 124 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/views/profile/ProfilePage.vue
View File

@@ -2,6 +2,7 @@
import {ref, markRaw} from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useClient} from '@/plugins/api.js';
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
@@ -10,6 +11,8 @@ import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.
import ChangeNameDialog from '@/views/profile/creators/ChangeNameDialog.vue';
import ChangeSlugDialog from '@/views/profile/creators/ChangeSlugDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
import ChangePhoneDialog from '@/views/profile/creators/ChangePhoneDialog.vue';
import ChangeEmailDialog from '@/views/profile/creators/ChangeEmailDialog.vue';
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
@@ -25,6 +28,7 @@ const {t} = useI18n();
const userProfileStore = useUserProfileStore()
const creatorProfileStore = useCreatorProfileStore();
const baseURL = window.location.origin;
const client = useClient();
// ### Fullname
const dialogEditFullnameShown = ref(false)
@@ -86,6 +90,8 @@ const componentsMap = {
ChangeNameDialog: markRaw(ChangeNameDialog),
ChangeTitleDialog: markRaw(ChangeTitleDialog),
ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
ChangePhoneDialog: markRaw(ChangePhoneDialog),
ChangeEmailDialog: markRaw(ChangeEmailDialog),
};
function requestCancel() {
@@ -178,6 +184,17 @@ function downloadQRCode() {
console.error('Error in downloadQRCode:', error);
}
}
async function deconfigureStripe() {
try {
await client.post(`/api/membership/stripe-account`, {
stripeAccountId: '',
});
await creatorProfileStore.fetchCreatorProfile();
} catch (error) {
console.error('Error deconfiguring stripe:', error);
}
}
</script>
<template>
@@ -246,6 +263,23 @@ function downloadQRCode() {
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- PHONE NUMBER -->
<button class="action" @click="openDialog('ChangePhoneDialog')">
<span class="label">{{ t('phoneNumber') }}</span>
<span class="value" :class="{ 'not-set': !creatorProfileStore.creator.presentation?.phoneNumber }">
{{ creatorProfileStore.creator.presentation?.phoneNumber || t('notSet') }}
</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- EMAIL -->
<button class="action" @click="openDialog('ChangeEmailDialog')">
<span class="label">{{ t('email') }}</span>
<span class="value" :class="{ 'not-set': !creatorProfileStore.creator.presentation?.email }">
{{ creatorProfileStore.creator.presentation?.email || t('notSet') }}
</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
@@ -262,10 +296,18 @@ function downloadQRCode() {
<span class="value" :class="{ 'configured': creatorProfileStore.creator.acceptDonation }">
{{ creatorProfileStore.creator.acceptDonation ? t('configured') : t('notConfigured') }}
</span>
<button class="configure-stripe-button" @click="openDialog('ChangeStripeIdDialog')">
<v-icon>mdi-credit-card</v-icon>
{{ t('configureStripe') }}
</button>
<div class="stripe-actions">
<button class="configure-stripe-button" @click="openDialog('ChangeStripeIdDialog')">
<v-icon>mdi-credit-card</v-icon>
{{ t('configureStripe') }}
</button>
<button v-if="creatorProfileStore.creator.acceptDonation"
class="deconfigure-stripe-button"
@click="deconfigureStripe">
<v-icon>mdi-credit-card-off</v-icon>
{{ t('deconfigureStripe') }}
</button>
</div>
</div>
</div>
@@ -485,6 +527,10 @@ function downloadQRCode() {
@apply flex items-center justify-center;
}
.value.not-set {
@apply text-gray-400;
}
.chevron {
@apply text-hOnBackground w-[40px] text-right;
@apply flex items-center justify-end;
@@ -539,12 +585,22 @@ function downloadQRCode() {
@apply text-green-500;
}
.stripe-actions {
@apply flex items-center gap-2 ml-4;
}
.configure-stripe-button {
@apply flex items-center justify-center gap-2 px-4 py-2 rounded-lg;
@apply bg-hutopyPrimary text-hOnPrimary;
@apply hover:bg-hutopySecondary;
@apply transition-colors duration-300;
@apply ml-4;
}
.deconfigure-stripe-button {
@apply flex items-center justify-center gap-2 px-4 py-2 rounded-lg;
@apply bg-red-600 text-white;
@apply hover:bg-red-700;
@apply transition-colors duration-300;
}
</style>
@@ -573,7 +629,10 @@ function downloadQRCode() {
"configured": "Configured",
"notConfigured": "Not Configured",
"notSet": "Not Set",
"configureStripe": "Configure Stripe Account"
"configureStripe": "Configure Stripe",
"phoneNumber": "Phone Number",
"title": "Title",
"deconfigureStripe": "Remove Stripe"
},
"fr": {
"personalInfo": "Informations Personnelles",
@@ -598,7 +657,10 @@ function downloadQRCode() {
"configured": "Configuré",
"notConfigured": "Non Configuré",
"notSet": "Non Défini",
"configureStripe": "Configurer le Compte Stripe"
"configureStripe": "Configurer Stripe",
"phoneNumber": "Numéro de téléphone",
"title": "Titre",
"deconfigureStripe": "Retirer Stripe"
},
"es": {
"personalInfo": "Información Personal",
@@ -623,7 +685,10 @@ function downloadQRCode() {
"configured": "Configurado",
"notConfigured": "No Configurado",
"notSet": "No Establecido",
"configureStripe": "Configurar Cuenta Stripe"
"configureStripe": "Configurar Stripe",
"phoneNumber": "Número de teléfono",
"title": "Título",
"deconfigureStripe": "Eliminar Stripe"
}
}
</i18n>