Control visibility of warning indicator

oasisprotocol · Aug 30, 2023 · 5a03395 · 5a03395
1 parent 586c282
commit 5a03395
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/src/constant/storageKey.js b/src/constant/storageKey.js
@@ -21,6 +21,6 @@ export const ADDRESS_BOOK_CONFIG = "ADDRESS_BOOK_CONFIG"
 
 
 /**
- * store user decision whether to display the new extension warning
+ * Date when the user decides to dismiss the new extension warning.
  */
-export const NEW_EXTENSION_WARNING_DISMISSED = "NEW_EXTENSION_WARNING_DISMISSED"
+export const DISMISSED_NEW_EXTENSION_WARNING = "DISMISSED_NEW_EXTENSION_WARNING"
diff --git a/src/popup/component/NewExtensionWarning/index.js b/src/popup/component/NewExtensionWarning/index.js
@@ -2,15 +2,15 @@ import differenceInDays from 'date-fns/differenceInDays'
 import { NEW_EXTENSION_RELEASE_DATE } from '../../../../config'
 import warningIconSrc from '../../../assets/images/warning.svg';
 import { getLanguage } from '../../../i18n';
-import { NEW_EXTENSION_WARNING_DISMISSED } from "../../../constant/storageKey";
+import { DISMISSED_NEW_EXTENSION_WARNING } from "../../../constant/storageKey";
 import { saveLocal } from "../../../background/storage/localStorage";
 import './index.scss';
 
-const isDismissingEnabled = NEW_EXTENSION_RELEASE_DATE ? differenceInDays(new Date(NEW_EXTENSION_RELEASE_DATE), new Date()) > 3 : true;
+const canDismiss = NEW_EXTENSION_RELEASE_DATE ? differenceInDays(new Date(NEW_EXTENSION_RELEASE_DATE), new Date()) > 3 : true;
 
 export const NewExtensionWarning = (props) => {
   const handleClick = () => {
-    saveLocal(NEW_EXTENSION_WARNING_DISMISSED, true)
+    saveLocal(DISMISSED_NEW_EXTENSION_WARNING, new Date())
     props.handleClick()
   }
 
@@ -21,7 +21,7 @@ export const NewExtensionWarning = (props) => {
       </div>
       <div className="indicator-content">
         {getLanguage('newExtensionNotice')}
-        {isDismissingEnabled &&
+        {canDismiss &&
           <div>
             <button className="indicator-reminder" onClick={handleClick}>
               {getLanguage('remindMe')}

diff --git a/src/reducers/appReducer.js b/src/reducers/appReducer.js
@@ -1,6 +1,7 @@
-import { DEFAULT_LANGUAGE,  } from "../../config";
-import { NEW_EXTENSION_WARNING_DISMISSED } from "../constant/storageKey";
-import { getLocal } from "../background/storage/localStorage";
+import differenceInDays from 'date-fns/differenceInDays'
+import { DEFAULT_LANGUAGE, NEW_EXTENSION_RELEASE_DATE } from "../../config";
+import { DISMISSED_NEW_EXTENSION_WARNING } from "../constant/storageKey";
+import { getLocal, removeLocal } from "../background/storage/localStorage";
 
 const SET_LANGUAGE = "SET_LANGUAGE"
 const HIDE_NEW_EXTENSION_WARNING = "HIDE_NEW_EXTENSION_WARNING"
@@ -19,9 +20,32 @@ export function hideNewExtensionWarning() {
     };
 }
 
+function shouldShowNewExtensionWarning() {
+    const dismissed = getLocal(DISMISSED_NEW_EXTENSION_WARNING);
+    if (!dismissed || !NEW_EXTENSION_RELEASE_DATE) {
+        return !dismissed;
+    }
+
+    const dismissedDate = new Date(dismissed);
+    const releaseDate = new Date(NEW_EXTENSION_RELEASE_DATE);
+    // Always show the warning if the release date is less than or equal to 3 days away
+    if (differenceInDays(releaseDate, new Date()) <= 3) {
+        return true;
+    }
+    // Show the warning and reset the dismissed date
+    // if it was set more than two weeks before the release date
+    if (differenceInDays(releaseDate, dismissedDate) > 14) {
+        removeLocal(DISMISSED_NEW_EXTENSION_WARNING);
+        return true;
+    }
+
+    return false;
+}
+
+
 const initState = {
     language: DEFAULT_LANGUAGE,
-    showNewExtensionWarning: !getLocal(NEW_EXTENSION_WARNING_DISMISSED)
+    showNewExtensionWarning: shouldShowNewExtensionWarning()
 };
 
 const appReducer = (state = initState, action) => {