feat(mahol): add monthly reward notification

Author: SugarF0x

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@vueuse/core": "^8.2.3",
     "core-js": "^3.8.3",
+    "date-fns": "^2.28.0",
     "flat": "^5.0.2",
     "pinia": "^2.0.13",
     "pinia-plugin-persistedstate": "^1.5.1",

src/router/index.ts

@@ -13,9 +13,10 @@ import {
   Job,
   QuestsMenu,
   Carriage,
+  MonthlyReward,
+  Verification,
 } from "@/views"
 import NotFound from "./NotFound.vue"
-import { Verification } from "@/views/Verification"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -70,6 +71,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "dailyReward",
     component: DailyReward,
   },
+  {
+    path: "/monthlyreward",
+    name: "monthlyReward",
+    component: MonthlyReward,
+  },
   {
     path: "/safemode",
     name: "safemode",

src/views/Mahol/Daily/DailyReward.vue

@@ -5,8 +5,7 @@ import { storeToRefs } from "pinia"
 import { onMounted } from "vue"
 
 const notificationStore = useMaholDailyStore()
-const { shouldRemindDailyReward, lastRewardClaimTimestamp, isSafeModeNotificationDismissed } =
-  storeToRefs(notificationStore)
+const { shouldRemindDailyReward, lastRewardClaimTimestamp } = storeToRefs(notificationStore)
 
 onMounted(() => {
   const claimButton = document.querySelector<HTMLButtonElement>(".mt-8.flex.justify-center button")
@@ -20,7 +19,6 @@ onMounted(() => {
 
       confirmButton.addEventListener("click", () => {
         lastRewardClaimTimestamp.value = new Date().toISOString()
-        isSafeModeNotificationDismissed.value = false
       })
     })
   })

src/views/Mahol/Monthly/Monthly.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Controls, Checkbox } from "@/components"
+import { useMaholMonthlyStore } from "./store"
+import { storeToRefs } from "pinia"
+import { onMounted } from "vue"
+
+const monthlyStore = useMaholMonthlyStore()
+const { shouldRemindMonthlyReward, lastRewardClaimTimestamp } = storeToRefs(monthlyStore)
+
+onMounted(() => {
+  const claimButton = document.querySelector<HTMLButtonElement>(".mt-8.flex.justify-center button")
+  if (!claimButton) return
+
+  claimButton.addEventListener("click", () => {
+    /** let native script hydrate dom */
+    setTimeout(() => {
+      const confirmButton = document.querySelector<HTMLButtonElement>(".swal2-actions button")
+      if (!confirmButton) return
+
+      confirmButton.addEventListener("click", () => {
+        lastRewardClaimTimestamp.value = new Date().toISOString()
+      })
+    })
+  })
+})
+</script>
+
+<template>
+  <Controls to=".max-w-7xl.mx-auto.text-center.py-12.px-4">
+    <Checkbox v-model="shouldRemindMonthlyReward">
+      <template #default> Remind about daily rewards </template>
+      <template #subtitle> Miss them daily rewards never more </template>
+    </Checkbox>
+  </Controls>
+</template>

src/views/Mahol/Monthly/index.ts

@@ -0,0 +1 @@
+export { default as MonthlyReward } from "./Monthly.vue"

src/views/Mahol/Monthly/store.ts

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia"
+import { computed, ref } from "vue"
+import { addMonths, getDay, isAfter, setDate, startOfDay } from "date-fns"
+import { MS_IN_DAY } from "@/consts"
+import { getLondonTime } from "@/utils"
+
+export const useMaholMonthlyStore = defineStore(
+  "maholMonthly",
+  () => {
+    const shouldRemindMonthlyReward = ref(false)
+
+    const lastRewardClaimTimestamp = ref(new Date().toISOString())
+
+    const isMonthlyRewardReady = computed(() => {
+      const lastClaimDate = startOfDay(new Date(new Date(lastRewardClaimTimestamp.value).valueOf() - MS_IN_DAY / 2))
+
+      const nextClaimDate = (() => {
+        const claimDay = getDay(lastClaimDate)
+        if (claimDay < 28) return setDate(lastClaimDate, 28)
+        return addMonths(setDate(lastClaimDate, 28), 1)
+      })()
+
+      return isAfter(getLondonTime().valueOf() - MS_IN_DAY / 2, nextClaimDate)
+    })
+
+    return {
+      shouldRemindMonthlyReward,
+      lastRewardClaimTimestamp,
+      isMonthlyRewardReady,
+    }
+  },
+  {
+    persist: true,
+  }
+)

src/views/Mahol/index.ts

@@ -1 +1,2 @@
 export * from "./Daily"
+export * from "./Monthly"

src/views/Notification/Items/Monthly.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import BaseItem from "./BaseItem.vue"
+
+import { Button } from "@/components"
+import { storeToRefs } from "pinia"
+import { useMaholMonthlyStore } from "@/views/Mahol/Monthly/store"
+
+const maholMonthlyStore = useMaholMonthlyStore()
+const { isMonthlyRewardReady, lastRewardClaimTimestamp } = storeToRefs(maholMonthlyStore)
+</script>
+
+<template>
+  <BaseItem v-if="isMonthlyRewardReady" @dismiss="lastRewardClaimTimestamp = new Date().toISOString()">
+    <template #title> Monthly reward available! </template>
+    <template #text> Claim your monthly reward now! </template>
+    <template #actions>
+      <Button href="/monthlyreward"> Claim </Button>
+    </template>
+  </BaseItem>
+</template>

src/views/Notification/Items/index.ts

@@ -1,2 +1,3 @@
 export { default as Daily } from "./Daily.vue"
 export { default as SafeMode } from "./SafeMode.vue"
+export { default as Monthly } from "./Monthly.vue"

src/views/Notification/Notification.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { Daily, SafeMode } from "./Items"
+import { Daily, SafeMode, Monthly } from "./Items"
 </script>
 
 <template>
   <Teleport to="main">
     <div class="notificationWrapper">
       <Daily />
+      <Monthly />
       <SafeMode />
     </div>
   </Teleport>

src/views/index.ts

@@ -12,3 +12,4 @@ export * from "./Mahol"
 export * from "./Settings"
 export * from "./Jobs"
 export * from "./Carriage"
+export * from "./Verification"

yarn.lock

@@ -2799,6 +2799,11 @@ csstype@^2.6.8:
   resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
 
+date-fns@^2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"