feat: added change log prompt for PWA updates (#4098)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/composables/pwa.ts

@@ -1,7 +1,7 @@
-import { watch } from "vue"
-import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import { pwaNeedsRefresh, refreshAppForPWAUpdate } from "@modules/pwa"
+import { watch } from "vue"
 
 export const usePwaPrompt = function () {
   const toast = useToast()
@@ -11,28 +11,33 @@ export const usePwaPrompt = function () {
     pwaNeedsRefresh,
     (value) => {
       if (value) {
-        toast.show(`${t("app.new_version_found")}`, {
-          duration: 0,
-          action: [
-            {
-              text: `${t("action.dismiss")}`,
-              onClick: (_, toastObject) => {
-                toastObject.goAway(0)
-              },
-            },
-            {
-              text: `${t("app.reload")}`,
-              onClick: (_, toastObject) => {
-                toastObject.goAway(0)
-                refreshAppForPWAUpdate()
-              },
-            },
-          ],
-        })
+        showUpdateToast()
       }
     },
     {
       immediate: true,
     }
   )
+
+  function showUpdateToast() {
+    toast.show(`${t("app.new_version_found")}`, {
+      position: "bottom-left",
+      duration: 0,
+      action: [
+        {
+          text: `${t("action.dismiss")}`,
+          onClick: (_, toastObject) => {
+            toastObject.goAway(0)
+          },
+        },
+        {
+          text: `${t("app.reload")}`,
+          onClick: (_, toastObject) => {
+            toastObject.goAway(0)
+            refreshAppForPWAUpdate()
+          },
+        },
+      ],
+    })
+  }
 }

packages/hoppscotch-common/src/composables/whats-new.ts

@@ -0,0 +1,61 @@
+import { toast as sonner } from "@hoppscotch/ui"
+import { markRaw } from "vue"
+
+import WhatsNewDialog from "~/components/app/WhatsNewDialog.vue"
+import { getService } from "~/modules/dioc"
+import { PersistenceService } from "~/services/persistence"
+import { version as hoppscotchCommonPkgVersion } from "./../../package.json"
+
+export const useWhatsNewDialog = async function () {
+  const persistenceService = getService(PersistenceService)
+
+  const versionFromLocalStorage = persistenceService.getLocalConfig("hopp_v")
+
+  // Set new entry `hopp_v` under `localStorage` if not present
+  if (!versionFromLocalStorage) {
+    persistenceService.setLocalConfig("hopp_v", hoppscotchCommonPkgVersion)
+    return
+  }
+
+  // Already on the latest version
+  if (versionFromLocalStorage === hoppscotchCommonPkgVersion) {
+    return
+  }
+
+  const getMajorVersion = (v: string) => v.split(".").slice(0, 2).join(".")
+
+  const majorVersionFromLocalStorage = getMajorVersion(versionFromLocalStorage)
+  const hoppscotchCommonPkgMajorVersion = getMajorVersion(
+    hoppscotchCommonPkgVersion
+  )
+
+  // Skipping the minor version update. e.g. 2024.1.0 -> 2024.1.1
+  // Checking major version update. e.g. 2024.1 -> 2024.2
+
+  // Show the release notes during a major version update
+  if (majorVersionFromLocalStorage !== hoppscotchCommonPkgMajorVersion) {
+    const notesUrl = await getReleaseNotes(hoppscotchCommonPkgMajorVersion)
+    if (notesUrl) {
+      sonner.custom(markRaw(WhatsNewDialog), {
+        componentProps: {
+          notesUrl,
+          version: hoppscotchCommonPkgVersion,
+        },
+      })
+    }
+  }
+
+  persistenceService.setLocalConfig("hopp_v", hoppscotchCommonPkgVersion)
+}
+
+async function getReleaseNotes(v: string): Promise<string | undefined> {
+  try {
+    const { release_notes } = await fetch(
+      `https://releases.hoppscotch.com/releases/${v}.json`
+    ).then((res) => res.json())
+
+    return release_notes
+  } catch (_) {
+    return undefined
+  }
+}