Guide users to rate

Author: sheepzh

src/app/components/About/Description.tsx

@@ -6,6 +6,7 @@ import InstallationLink from "./InstallationLink"
 import packageInfo from "@src/package"
 import { locale } from "@i18n"
 import "./description.sass"
+import metaService from "@service/meta-service"
 
 const INSTALLATION_STYLE: StyleValue = {
     display: "flex",
@@ -63,7 +64,9 @@ const _default = defineComponent(() => {
                 <ElText size="large">
                     🌟&ensp;
                     {t(msg => msg.about.text.greet)}&ensp;
-                    <a href={webstoreUrl} target="_blank">{t(msg => msg.about.text.rate)}</a>
+                    <a href={webstoreUrl} target="_blank" onClick={() => metaService.saveFlag("rateOpen")}>
+                        {t(msg => msg.about.text.rate)}
+                    </a>
                 </ElText>
             </div>
             <div>

src/app/components/Dashboard/index.tsx

@@ -16,12 +16,33 @@ import WeekOnWeek from "./components/WeekOnWeek"
 import TopKVisit from "./components/TopKVisit"
 import CalendarHeatmapChart from "./components/CalendarHeatmapChart"
 import { useRouter } from "vue-router"
+import { useRequest } from "@app/hooks/useRequest"
+import metaService from "@service/meta-service"
+import { t } from "@app/locale"
+import { WEBSTORE_PAGE } from "@util/constant/url"
+import { getDayLength } from "@util/time"
+
+const INSTALL_DAY_MIN_LIMIT = 30
 
 const _default = defineComponent(() => {
     const router = useRouter()
     const jump2Help = () => router.push({ path: "/other/help" })
     const isNotEnOrZhCn = locale !== "en" && locale !== "zh_CN"
     const showHelp = isTranslatingLocale() || isNotEnOrZhCn
+    const { data: showRate, refresh } = useRequest(async () => {
+        if (!WEBSTORE_PAGE) return false
+        const installTime = await metaService.getInstallTime()
+        if (!installTime) return false
+        const installedDays = getDayLength(installTime, new Date())
+        if (installedDays < INSTALL_DAY_MIN_LIMIT) return false
+        const rateOpen = await metaService.getFlag("rateOpen")
+        return !rateOpen
+    })
+
+    const handleRate = async () => {
+        await metaService.saveFlag("rateOpen")
+        refresh()
+    }
 
     return () => (
         <ContentContainer>
@@ -41,8 +62,14 @@ const _default = defineComponent(() => {
                     <CalendarHeatmapChart />
                 </DashboardCard>
             </ElRow>
-            <ElRow v-show={showHelp}>
-                <span class="help-us-link" onClick={jump2Help}>
+            <ElRow v-show={showHelp || showRate.value}>
+                <span class="help-us-link" v-show={showRate.value}>
+                    🌟 {t(msg => msg.about.text.greet)}&ensp;
+                    <a href={WEBSTORE_PAGE} target="_blank" onClick={handleRate}>
+                        {t(msg => msg.about.text.rate)}
+                    </a>
+                </span>
+                <span class="help-us-link" v-show={!showRate.value} onClick={jump2Help}>
                     💡 Help us translate this extension/addon into your native language!
                 </span>
             </ElRow>

src/app/components/Dashboard/style/index.sass

@@ -23,3 +23,10 @@
     font-size: 14px
     width: 100%
     cursor: pointer
+.help-us-link
+    a
+        font-size: inherit
+        font-family: inherit
+        color: var(--el-text-color-primary)
+    a:visited
+        color: var(--el-text-color-primary)

src/service/meta-service.ts

@@ -71,6 +71,20 @@ async function getLastBackUp(type: timer.backup.Type): Promise<{ ts: number, msg
     return meta?.backup?.[type]
 }
 
+async function saveFlag(flag: timer.ExtensionMetaFlag) {
+    if (!flag) return
+    const meta = await db.getMeta()
+    if (!meta.flag) meta.flag = {}
+    meta.flag[flag] = true
+    await db.update(meta)
+}
+
+async function getFlag(flag: timer.ExtensionMetaFlag) {
+    if (!flag) return false
+    const meta = await db.getMeta()
+    return !!meta?.flag?.[flag]
+}
+
 class MetaService {
     getInstallTime = getInstallTime
     updateInstallTime = updateInstallTime
@@ -92,6 +106,11 @@ class MetaService {
      * @since 1.4.7
      */
     getLastBackUp = getLastBackUp
+    /**
+     * @since 2.2.0
+     */
+    saveFlag = saveFlag
+    getFlag = getFlag
 }
 
 export default new MetaService()

types/timer/index.d.ts

@@ -51,6 +51,8 @@ declare namespace timer {
         | 'sk'
         | 'mn'
 
+    type ExtensionMetaFlag = "rateOpen"
+
     type ExtensionMeta = {
         installTime?: number
         appCounter?: { [routePath: string]: number }
@@ -69,5 +71,7 @@ declare namespace timer {
                 msg?: string
             }
         }
+        // Flags
+        flag?: Partial<Record<ExtensionMetaFlag, boolean>>
     }
 }