"Add email and SMS notifications configuration to UserProfile.vue; implement editable fields with validation and backend integration."
This commit is contained in:
Jeppe Bundgaard
@@ -94,6 +94,9 @@ export const getSessionData = async () => {
|
||||
SessionUser.user.email.value = response.data.data.email;
|
||||
SessionUser.user.phone.number.value = response.data.data.phone.number;
|
||||
SessionUser.user.phone.country_code.value = response.data.data.phone.country_code;
|
||||
SessionUser.user.notifications.wash_certificate_email.value = response.data.data.notifications.wash_certificate_email;
|
||||
SessionUser.user.notifications.email_notifications_enabled.value = response.data.data.notifications.email_notifications_enabled;
|
||||
SessionUser.user.notifications.sms_notifications_enabled.value = response.data.data.notifications.sms_notifications_enabled;
|
||||
SessionUser.user.created_at.value = response.data.data.created_at;
|
||||
SessionUser.user.updated_at.value = response.data.data.updated_at;
|
||||
SessionUser.user.display_name.value = response.data.data.display_name;
|
||||
@@ -181,6 +184,41 @@ export const SessionUser = {
|
||||
created_at: ref(null),
|
||||
updated_at: ref(null),
|
||||
cached_at: ref(null),
|
||||
notifications: {
|
||||
wash_certificate_email: ref(null),
|
||||
email_notifications_enabled: ref(null),
|
||||
sms_notifications_enabled: ref(null),
|
||||
setEmailNotificationsEnabled: (enabled) => {
|
||||
return SessionUser.request("/account/notifications", "PUT", {
|
||||
email_notifications_enabled: enabled,
|
||||
}).then(() => {
|
||||
SessionUser.user.notifications.email_notifications_enabled.value = enabled;
|
||||
}).catch((error) => {
|
||||
parseError(error, 'user_notifications');
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
setSmsNotificationsEnabled: (enabled) => {
|
||||
return SessionUser.request("/account/notifications", "PUT", {
|
||||
sms_notifications_enabled: enabled,
|
||||
}).then(() => {
|
||||
SessionUser.user.notifications.sms_notifications_enabled.value = enabled;
|
||||
}).catch((error) => {
|
||||
parseError(error, 'user_notifications');
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
setWashCertificateEmail: (email) => {
|
||||
return SessionUser.request("/account/notifications", "PUT", {
|
||||
wash_certificate_email: email,
|
||||
}).then(() => {
|
||||
SessionUser.user.notifications.wash_certificate_email.value = email;
|
||||
}).catch((error) => {
|
||||
parseError(error, 'user_notifications');
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/** The user's permissions */
|
||||
permissions: ref([]),
|
||||
@@ -346,6 +384,9 @@ export const SessionUser = {
|
||||
SessionUser.user.email.value = null;
|
||||
SessionUser.user.phone.number.value = null;
|
||||
SessionUser.user.phone.country_code.value = null;
|
||||
SessionUser.user.notifications.wash_certificate_email.value = null;
|
||||
SessionUser.user.notifications.email_notifications_enabled.value = null;
|
||||
SessionUser.user.notifications.sms_notifications_enabled.value = null;
|
||||
SessionUser.user.created_at.value = null;
|
||||
SessionUser.user.updated_at.value = null;
|
||||
SessionUser.user.cached_at.value = null;
|
||||
|
||||
@@ -11,6 +11,7 @@ import MicrosoftAuthenticationBox
|
||||
from "@/views/dashboards/userDashboard/profile/displays/MicrosoftAuthentication/MicrosoftAuthenticationBox.vue";
|
||||
import ShowErrorField from "@/components/global/ShowErrorField.vue";
|
||||
import { parseError, removeError, addError } from "@/components/request/HandleGlobalError.vue";
|
||||
import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
|
||||
|
||||
const isLoading = ref(false);
|
||||
/** Email */
|
||||
@@ -357,6 +358,54 @@ const onClickSavePhoneNumber = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
const onClickSaveWashCertificateEmail = async () => {
|
||||
// Show the wash certificate email input dialog
|
||||
await Swal.fire({
|
||||
title: 'Indtast e-mailadresse til booking bekræftelser',
|
||||
input: 'text',
|
||||
inputLabel: 'E-mailadresse',
|
||||
inputPlaceholder: 'E-mailadresse',
|
||||
showCancelButton: true,
|
||||
preConfirm: (value) => {
|
||||
if (!value) {
|
||||
Swal.showValidationMessage('Indtast venligst en e-mailadresse');
|
||||
return;
|
||||
}
|
||||
// Validate the email address
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(value)) {
|
||||
Swal.showValidationMessage('Indtast venligst en gyldig e-mailadresse');
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
Swal.showLoading();
|
||||
return value;
|
||||
},
|
||||
allowOutsideClick: () => !Swal.isLoading(),
|
||||
showLoaderOnConfirm: true,
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const email = result.value;
|
||||
// Send the change wash certificate email request
|
||||
SessionUser.user.notifications.setWashCertificateEmail(email).then(() => {
|
||||
Swal.fire({
|
||||
title: 'E-mailadresse gemt',
|
||||
text: 'Din e-mailadresse til booking bekræftelser er blevet gemt.',
|
||||
icon: 'success',
|
||||
});
|
||||
}).catch((error) => {
|
||||
Swal.fire({
|
||||
title: 'Fejl',
|
||||
text: SessionUser.functions.parseErrorMessage(error),
|
||||
icon: 'error',
|
||||
});
|
||||
}).finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@@ -444,6 +493,79 @@ const onClickSavePhoneNumber = async () => {
|
||||
</button>
|
||||
</div>
|
||||
</ConfigurationCategory>
|
||||
<!-- Notifications - email notifications -->
|
||||
<ConfigurationCategory
|
||||
class="mt-2"
|
||||
module="Brugerprofil"
|
||||
title="Notifikationer"
|
||||
subtitle="E-mail"
|
||||
description="Dine notifikationsindstillinger"
|
||||
icon="fas fa-bell"
|
||||
>
|
||||
<!-- Email to booking confirmation -->
|
||||
<ConfigurationInput
|
||||
:title="'E-mail til bookinger'"
|
||||
description="Den e-mailadresse, der modtager booking bekræftelser og vaskecertifikater."
|
||||
v-bind:value="SessionUser.user.notifications.wash_certificate_email"
|
||||
:disabled="true"
|
||||
/>
|
||||
<!-- Change email to booking confirmation -->
|
||||
<button
|
||||
class="button is-link is-small mt-2"
|
||||
@click="onClickSaveWashCertificateEmail"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span>
|
||||
<i class="fas fa-edit"></i>
|
||||
<span class="ml-2">Rediger e-mail til booking bekræftelse</span>
|
||||
</span>
|
||||
</button>
|
||||
<hr class="my-4"/>
|
||||
<!-- Enable/disable email notifications -->
|
||||
<ConfigurationSwitch
|
||||
:title="'E-mail notifikationer'"
|
||||
description="Modtag e-mails med bookingbekræftelser og vaskecertifikater."
|
||||
v-bind:value="SessionUser.user.notifications.email_notifications_enabled.value"
|
||||
:on-switch="(value) => SessionUser.user.notifications.setEmailNotificationsEnabled(value)"
|
||||
/>
|
||||
</ConfigurationCategory>
|
||||
<!-- Notifications - SMS notifications -->
|
||||
<ConfigurationCategory
|
||||
class="mt-2"
|
||||
module="Brugerprofil"
|
||||
title="Notifikationer"
|
||||
subtitle="SMS"
|
||||
description="Dine notifikationsindstillinger"
|
||||
icon="fas fa-sms"
|
||||
>
|
||||
<!-- Phone number for SMS notifications -->
|
||||
<ConfigurationInput
|
||||
:title="'Telefonnummer til SMS notifikationer'"
|
||||
description="Det telefonnummer, der modtager SMS notifikationer."
|
||||
v-bind:value="SessionUser.user.phone.number"
|
||||
:disabled="true"
|
||||
/>
|
||||
<!-- Change phone number for SMS notifications -->
|
||||
<button
|
||||
class="button is-link is-small mt-2"
|
||||
@click="onClickSavePhoneNumber"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span>
|
||||
<i class="fas fa-edit"></i>
|
||||
<span class="ml-2">Rediger telefonnummer til SMS notifikationer</span>
|
||||
</span>
|
||||
</button>
|
||||
<hr class="my-4"/>
|
||||
<!-- Enable/disable SMS notifications -->
|
||||
<ConfigurationSwitch
|
||||
:title="'SMS notifikationer'"
|
||||
description="Modtag SMS notifikationer ved forskellige begivenheder."
|
||||
v-bind:value="SessionUser.user.notifications.sms_notifications_enabled.value"
|
||||
:on-switch="(value) => SessionUser.user.notifications.setSmsNotificationsEnabled(value)"
|
||||
/>
|
||||
</ConfigurationCategory>
|
||||
<template v-if="false">
|
||||
<!-- Microsoft -->
|
||||
<ConfigurationCategory
|
||||
class="mt-2"
|
||||
@@ -454,6 +576,7 @@ const onClickSavePhoneNumber = async () => {
|
||||
>
|
||||
<MicrosoftAuthenticationBox/>
|
||||
</ConfigurationCategory>
|
||||
</template>
|
||||
<!-- Default department -->
|
||||
<ConfigurationCategory
|
||||
v-if="SessionUser.user.customer_number.value > 0"
|
||||
|
||||
Reference in New Issue
Block a user