move TimezonMismatchModal to ui package

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

@@ -1,19 +1,11 @@
 <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 { ref } from 'vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import type { User } from '@/types/models';
-import { useSessionStorage } from '@vueuse/core';
+import TimezoneMismatchModal from '@/packages/ui/src/TimezoneMismatchModal.vue';
 
 const show = defineModel('show', { default: false });
-const saving = defineModel('saving', { default: false });
-
-const timezone = ref('');
-const userTimezone = ref('');
+const saving = ref(false);
 
 const page = usePage<{
     auth: {
@@ -21,27 +13,11 @@ const page = usePage<{
     };
 }>();
 
-const hideTimezoneMismatchModal = useSessionStorage<boolean>('hide-timezone-mismatch-modal', false);
-
-onMounted(() => {
-    timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    userTimezone.value = getUserTimezone();
-
-    const now = getDayJsInstance()();
-
-    if (
-        now.tz(timezone.value).format() !== now.tz(userTimezone.value).format() &&
-        !hideTimezoneMismatchModal.value
-    ) {
-        show.value = true;
-    }
-});
-
-function submit() {
+function handleUpdate(timezone: string) {
     saving.value = true;
     const form = useForm({
         _method: 'PUT',
-        timezone: timezone.value,
+        timezone: timezone,
         name: page.props.auth.user.name,
         email: page.props.auth.user.email,
         week_start: page.props.auth.user.week_start,
@@ -55,53 +31,15 @@ function submit() {
             show.value = false;
             location.reload();
         },
+        onError: () => {
+            saving.value = false;
+        },
     });
 }
-
-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>
+    <TimezoneMismatchModal v-model:show="show" :saving="saving" @update="handleUpdate" />
 </template>
 
 <style scoped></style>