Show 3box deprecation message in whats new (#15763)

* Show 3box deprecation message in whats new

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Add . after message

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Change deprecation notification message and remove date

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

app/_locales/en/messages.json

@@ -2334,6 +2334,16 @@
   "notifications13Title": {
     "message": "Add Popular Networks"
   },
+  "notifications14ActionText": {
+    "message": "Show backup settings"
+  },
+  "notifications14Description": {
+    "message": "We're deprecating our 3Box data feature in early October. To backup and restore your wallet manually, use the \"Backup now\" button in Advanced Settings.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes 3box deprecation."
+  },
+  "notifications14Title": {
+    "message": "3Box Deprecation"
+  },
   "notifications1Description": {
     "message": "MetaMask Mobile users can now swap tokens inside their mobile wallet. Scan the QR code to get the mobile app and start swapping.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."

shared/notifications/index.js

@@ -70,6 +70,10 @@ export const UI_NOTIFICATIONS = {
     id: 13,
     date: '2022-09-15',
   },
+  14: {
+    id: 14,
+    date: null,
+  },
 };
 
 export const getTranslatedUINotifications = (t, locale) => {
@@ -195,5 +199,16 @@ export const getTranslatedUINotifications = (t, locale) => {
         new Date(UI_NOTIFICATIONS[13].date),
       ),
     },
+    14: {
+      ...UI_NOTIFICATIONS[14],
+      title: t('notifications14Title'),
+      description: t('notifications14Description'),
+      actionText: t('notifications14ActionText'),
+      date: UI_NOTIFICATIONS[14].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[14].date),
+          )
+        : '',
+    },
   };
 };

test/e2e/fixtures/address-entry/state.json

@@ -79,6 +79,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/connected-state/state.json

@@ -69,6 +69,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-rpc/state.json

@@ -65,6 +65,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-token/state.json

@@ -82,6 +82,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/eip-1559-v2-dapp/state.json

@@ -66,6 +66,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/eip-1559-v2/state.json

@@ -66,6 +66,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/import-ui/state.json

@@ -119,6 +119,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/imported-account/state.json

@@ -65,6 +65,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/localization/state.json

@@ -65,6 +65,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/metrics-enabled/state.json

@@ -69,6 +69,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/navigate-transactions/state.json

@@ -65,6 +65,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/onboarding/state.json

@@ -39,6 +39,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit-v2/state.json

@@ -66,6 +66,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit/state.json

@@ -66,6 +66,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/special-settings/state.json

@@ -59,6 +59,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/threebox-enabled/state.json

@@ -75,6 +75,9 @@
         },
         "13": {
           "isShown": true
+        },
+        "14": {
+          "isShown": true
         }
       }
     },

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -58,6 +58,10 @@ function getActionFunctionById(id, history) {
       updateViewedNotifications({ 13: true });
       history.push(`${EXPERIMENTAL_ROUTE}#show-custom-network`);
     },
+    14: () => {
+      updateViewedNotifications({ 14: true });
+      history.push(`${ADVANCED_ROUTE}#backup-userdata`);
+    },
   };
 
   return actionFunctions[id];

ui/selectors/selectors.js

@@ -817,6 +817,7 @@ function getAllowedAnnouncementIds(state) {
   const supportsWebHid = window.navigator.hid !== undefined;
   const currentlyUsingLedgerLive =
     getLedgerTransportType(state) === LEDGER_TRANSPORT_TYPES.LIVE;
+  const { threeBoxSyncingAllowed } = state.metamask;
 
   return {
     1: false,
@@ -832,6 +833,7 @@ function getAllowedAnnouncementIds(state) {
     11: true,
     12: false,
     13: true,
+    14: threeBoxSyncingAllowed,
   };
 }