feat(settings/user/birthday): implement

2025-12-30 18:11:50 +01:00
parent cfcaeff8ed
commit dad1d3d21e
3 changed files with 95 additions and 1 deletions
--- a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+
+const store = useSettingsStore();
+const confirmationModal = useConfirmationModal();
+
+const BIRTHDAY_DAY = 25;
+const BIRTHDAY_MONTH = 4;
+const BIRTHDAY_YEAR = 2002;
+
+const handleActivateB = () => {
+  store.closeSubMenu();
+};
+
+const handleActivateA = () => {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+
+  const isBirthdayToday =
+    today.getMonth() === BIRTHDAY_MONTH - 1 && today.getDate() === BIRTHDAY_DAY;
+
+  let text: string;
+  if (isBirthdayToday) {
+    text = $t("settings.user.birthday.confirmation.today");
+  } else {
+    let nextBirthday = new Date(currentYear, BIRTHDAY_MONTH - 1, BIRTHDAY_DAY);
+    if (nextBirthday < today) {
+      nextBirthday = new Date(
+        currentYear + 1,
+        BIRTHDAY_MONTH - 1,
+        BIRTHDAY_DAY,
+      );
+    }
+
+    const diffTime = nextBirthday.getTime() - today.getTime();
+    const daysUntilBirthday = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    text = $t("settings.user.birthday.confirmation.future", {
+      days: daysUntilBirthday,
+    });
+  }
+
+  confirmationModal.open({
+    text,
+    onClosed: () => store.closeSubMenu(),
+  });
+  setTimeout(() => {
+    confirmationModal.close();
+  }, 2000);
+};
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <!-- date format may change based on the language (d/m/y is superior btw) -->
+  <NumberInput
+    :model-value="BIRTHDAY_MONTH"
+    title="Month"
+    :x="1 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="BIRTHDAY_DAY"
+    title="Day"
+    :x="5 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="BIRTHDAY_YEAR"
+    title="Day"
+    :digits="4"
+    :x="9 * 16"
+    :disabled="true"
+  />
+
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleActivateB"
+    @activate-a="handleActivateA"
+  />
+</template>