refactor: add HighlightStatus type and update Shortcuts component to …

…display highlight notifications

src/bridges/checks/checkHighlightStatus.ts

@@ -1,26 +1,38 @@
-import { releaseNotesVersion } from '../../utils/config'
+const checkHighlightStatus = async (remoteVersion: string) => {
+  // figma.clientStorage.deleteAsync('highlight_version')
+  const localVersion = await figma.clientStorage.getAsync('highlight_version')
+  console.log('localVersion', localVersion)
+  console.log('remoteVersion', remoteVersion)
 
-const checkHighlightStatus = async () => {
-  // figma.clientStorage.deleteAsync(`${version}_isRead`)
-  const isRead = await figma.clientStorage.getAsync(
-    `${releaseNotesVersion}_isRead`
-  )
-
-  if (isRead === undefined || !isRead)
-    figma.ui.postMessage({
-      type: 'CHECK_HIGHLIGHT_STATUS',
+  if (localVersion === undefined)
+    return figma.ui.postMessage({
+      type: 'PUSH_HIGHLIGHT_STATUS',
       data:
         figma.payments !== undefined
           ? figma.payments.getUserFirstRanSecondsAgo() > 60
-            ? 'UNREAD_RELEASE_NOTE'
-            : 'READ_RELEASE_NOTE'
-          : 'READ_RELEASE_NOTE',
-    })
-  else
-    figma.ui.postMessage({
-      type: 'CHECK_HIGHLIGHT_STATUS',
-      data: 'READ_RELEASE_NOTE',
+            ? 'DISPLAY_HIGHLIGHT_DIALOG'
+            : 'NO_HIGHLIGHT'
+          : 'NO_HIGHLIGHT',
     })
+  else {
+    const remoteMajorVersion = remoteVersion.split('.')[0],
+      remoteMinorVersion = remoteVersion.split('.')[1]
+
+    const localMajorVersion = localVersion.split('.')[0],
+      localMinorVersion = localVersion.split('.')[1]
+
+    if (remoteMajorVersion !== localMajorVersion)
+      return figma.ui.postMessage({
+        type: 'PUSH_HIGHLIGHT_STATUS',
+        data: 'DISPLAY_HIGHLIGHT_DIALOG',
+      })
+
+    if (remoteMinorVersion !== localMinorVersion)
+      return figma.ui.postMessage({
+        type: 'PUSH_HIGHLIGHT_STATUS',
+        data: 'DISPLAY_HIGHLIGHT_NOTIFICATION',
+      })
+  }
 }
 
 export default checkHighlightStatus

src/bridges/loadUI.ts

@@ -44,9 +44,8 @@ const loadUI = async () => {
     themeColors: true,
   })
 
-  checkUserConsent()
-    .then(() => checkEditorType())
-    .then(() => checkHighlightStatus())
+  checkUserConsent().then(() => checkEditorType())
+
   processSelection()
 
   await checkPlanStatus()
@@ -81,6 +80,7 @@ const loadUI = async () => {
         figma.ui.resize(windowSize.w, windowSize.h)
       },
       CHECK_USER_CONSENT: () => checkUserConsent(),
+      CHECK_HIGHLIGHT_STATUS: () => checkHighlightStatus(msg.version),
       CREATE_PALETTE: () => createPalette(msg),
       UPDATE_SCALE: () => updateScale(msg),
       UPDATE_VIEW: () => updateView(msg),

src/types/app.ts

@@ -1,3 +1,5 @@
+import { HighlightStatus } from './management'
+
 export interface Feature {
   name: string
   description: string
@@ -45,3 +47,8 @@ export interface windowSize {
   w: number
   h: number
 }
+
+export interface HighlightDigest {
+  version: string
+  status: HighlightStatus
+}

src/types/management.ts

@@ -54,3 +54,8 @@ export type FetchStatus =
   | 'COMPLETE'
   | 'SIGN_IN_FIRST'
   | 'NO_RESULT'
+
+export type HighlightStatus =
+  | 'NO_HIGHLIGHT'
+  | 'DISPLAY_HIGHLIGHT_NOTIFICATION'
+  | 'DISPLAY_HIGHLIGHT_DIALOG'

src/ui/App.tsx

@@ -10,6 +10,7 @@ import { supabase } from '../bridges/publication/authentication'
 import { locals } from '../content/locals'
 import {
   EditorType,
+  HighlightDigest,
   Language,
   PlanStatus,
   Service,
@@ -35,7 +36,11 @@ import {
 import { PriorityContext } from '../types/management'
 import { ActionsList, TextColorsThemeHexModel } from '../types/models'
 import { UserSession } from '../types/user'
-import features, { trialTime, userConsentVersion } from '../utils/config'
+import features, {
+  announcementsWorkerUrl,
+  trialTime,
+  userConsentVersion,
+} from '../utils/config'
 import {
   trackEditorEvent,
   trackExportEvent,
@@ -86,6 +91,7 @@ export interface AppStates {
   lang: Language
   figmaUserId: string
   mustUserConsent: boolean
+  highlight: HighlightDigest
   isLoaded: boolean
   onGoingStep: string
 }
@@ -180,13 +186,39 @@ class App extends React.Component<Record<string, never>, AppStates> {
       userConsent: userConsent,
       figmaUserId: '',
       mustUserConsent: true,
+      highlight: {
+        version: '',
+        status: 'NO_HIGHLIGHT',
+      },
       isLoaded: false,
       onGoingStep: '',
     }
   }
 
-  componentDidMount = () => {
+  componentDidMount = async () => {
     setTimeout(() => this.setState({ isLoaded: true }), 1000)
+    fetch(
+      `${announcementsWorkerUrl}/?action=get_version&database_id=${process.env.REACT_APP_NOTION_ANNOUNCEMENTS_ID}`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        parent.postMessage(
+          {
+            pluginMessage: {
+              type: 'CHECK_HIGHLIGHT_STATUS',
+              version: data.version,
+            },
+          },
+          '*'
+        )
+        this.setState({
+          highlight: {
+            version: data.version,
+            status: 'NO_HIGHLIGHT',
+          },
+        })
+      })
+      .catch((error) => console.error(error))
     supabase.auth.onAuthStateChange((event, session) => {
       const actions: ActionsList = {
         SIGNED_IN: () => {
@@ -283,13 +315,18 @@ class App extends React.Component<Record<string, never>, AppStates> {
           )
         }
 
-        const checkHighlightStatus = () =>
+        const handleHighlight = () => {
           this.setState({
             priorityContainerContext:
-              e.data.pluginMessage.data === 'READ_RELEASE_NOTE'
+              e.data.pluginMessage.data !== 'DISPLAY_HIGHLIGHT_DIALOG'
                 ? 'EMPTY'
                 : 'HIGHLIGHT',
+            highlight: {
+              version: this.state.highlight.version,
+              status: e.data.pluginMessage.data,
+            },
           })
+        }
 
         const checkPlanStatus = () =>
           this.setState({
@@ -737,7 +774,7 @@ class App extends React.Component<Record<string, never>, AppStates> {
           CHECK_USER_AUTHENTICATION: () => checkUserAuthentication(),
           CHECK_USER_CONSENT: () => checkUserConsent(),
           CHECK_EDITOR_TYPE: () => checkEditorType(),
-          CHECK_HIGHLIGHT_STATUS: () => checkHighlightStatus(),
+          PUSH_HIGHLIGHT_STATUS: () => handleHighlight(),
           CHECK_PLAN_STATUS: () => checkPlanStatus(),
           EMPTY_SELECTION: () => updateWhileEmptySelection(),
           COLOR_SELECTED: () => updateWhileColorSelected(),
@@ -871,7 +908,13 @@ class App extends React.Component<Record<string, never>, AppStates> {
                 this.setState({ ...this.state, ...e })
               }
               onClose={() =>
-                this.setState({ priorityContainerContext: 'EMPTY' })
+                this.setState({
+                  priorityContainerContext: 'EMPTY',
+                  highlight: {
+                    version: this.state.highlight.version,
+                    status: 'NO_HIGHLIGHT',
+                  },
+                })
               }
             />
           </Feature>