Control visibility of warning indicator

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"

src/popup/component/NewExtensionWarning/index.js

@@ -1,18 +1,20 @@
-import differenceInDays from 'date-fns/differenceInDays'
-import { NEW_EXTENSION_RELEASE_DATE } from '../../../../config'
+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 { saveLocal } from "../../../background/storage/localStorage";
+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)
-    props.handleClick()
-  }
+    saveLocal(DISMISSED_NEW_EXTENSION_WARNING, new Date().toISOString());
+    props.handleClick();
+  };
 
   return (
     <div className="indicator">
@@ -21,13 +23,13 @@ export const NewExtensionWarning = (props) => {
       </div>
       <div className="indicator-content">
         {getLanguage('newExtensionNotice')}
-        {isDismissingEnabled &&
+        {canDismiss && (
           <div>
             <button className="indicator-reminder" onClick={handleClick}>
               {getLanguage('remindMe')}
             </button>
           </div>
-        }
+        )}
       </div>
     </div>
   );

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) => {