solidtime/resources/js/Components/Common/User/UserTimezoneMismatchModal.vue

<script setup lang="ts">
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { onMounted, ref } from 'vue';
import { getUserTimezone } from '@/packages/ui/src/utils/settings';
import { getDayJsInstance } from '@/packages/ui/src/utils/time';
import { useForm, usePage } from '@inertiajs/vue3';
import type { User } from '@/types/models';
import { useSessionStorage } from '@vueuse/core';

const show = defineModel('show', { default: false });
const saving = defineModel('saving', { default: false });

const timezone = ref('');
const userTimezone = ref('');

const page = usePage<{
    auth: {
        user: User;
    };
}>();

const hideTimezoneMismatchModal = useSessionStorage<boolean>('hide-timezone-mismatch-modal', false);

onMounted(() => {
    timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
    userTimezone.value = getUserTimezone();

    if (
        getDayJsInstance()().tz(timezone.value).format() !==
            getDayJsInstance()().tz(userTimezone.value).format() &&
        !hideTimezoneMismatchModal.value
    ) {
        show.value = true;
    }
});

function submit() {
    saving.value = true;
    const form = useForm({
        _method: 'PUT',
        timezone: timezone.value,
        name: page.props.auth.user.name,
        email: page.props.auth.user.email,
        week_start: page.props.auth.user.week_start,
    });

    form.post(route('user-profile-information.update'), {
        errorBag: 'updateProfileInformation',
        preserveScroll: true,
        onSuccess: () => {
            saving.value = false;
            show.value = false;
            location.reload();
        },
    });
}

function cancel() {
    show.value = false;
    hideTimezoneMismatchModal.value = true;
}
</script>

<template>
    <DialogModal closeable :show="show" @close="show = false">
        <template #title>
            <div class="flex justify-center">
                <span> Timezone mismatch detected </span>
            </div>
        </template>
        <template #content>
            <div class="flex items-center space-x-4">
                <div class="col-span-6 sm:col-span-4 flex-1 space-y-2">
                    <p>
                        The timezone of your device does not match the timezone in your user
                        settings. <br />
                        <strong
                            >We highly recommend that you update your timezone settings to your
                            current timezone.</strong
                        >
                    </p>

                    <p>
                        Want to change your timezone setting from
                        <strong>{{ userTimezone }}</strong> to <strong>{{ timezone }}</strong
                        >.
                    </p>
                </div>
            </div>
        </template>
        <template #footer>
            <SecondaryButton @click="cancel"> Cancel</SecondaryButton>
            <PrimaryButton
                class="ms-3"
                :class="{ 'opacity-25': saving }"
                :disabled="saving"
                @click="submit()">
                Update timezone
            </PrimaryButton>
        </template>
    </DialogModal>
</template>

<style scoped></style>