New notification fixes (#6955)

* Replace use of backup-notification with use of home notification

* Pin notifications relative to window

* Remove unneeded isRequired condition on some home.component properties

* Refactor rendering of home notifications

* UX for multiple notifications

* Adds dismissal to provider request notification.

* Fix test failures

The e2e tests have been updated to reference `home-notification`
classnames instead of the removed `background-notification`. The
active tab proptypes and default values were updated as well.

2 files changed, 50 insertions, 26 deletions

diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index e59106537..dca4c8540 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
 import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import HomeNotification from '../../components/app/home-notification'
+import MultipleNotifications from '../../components/app/multiple-notifications'
 import WalletView from '../../components/app/wallet-view'
 import TransactionView from '../../components/app/transaction-view'
 import ProviderApproval from '../provider-approval'
-import BackupNotification from '../../components/app/backup-notification'
 
 import {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+  INITIALIZE_SEED_PHRASE_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class Home extends PureComponent {
@@ -20,15 +21,17 @@ export default class Home extends PureComponent {
   }
 
   static defaultProps = {
-    activeTab: null,
+    activeTab: {},
     unsetMigratedPrivacyMode: null,
     forceApproveProviderRequestByOrigin: null,
   }
 
   static propTypes = {
     activeTab: PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
+      origin: PropTypes.string,
+      protocol: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string,
     }),
     history: PropTypes.object,
     forgottenPassword: PropTypes.bool,
@@ -40,6 +43,8 @@ export default class Home extends PureComponent {
     viewingUnconnectedDapp: PropTypes.bool.isRequired,
     forceApproveProviderRequestByOrigin: PropTypes.func,
     shouldShowSeedPhraseReminder: PropTypes.bool,
+    showSeedPhraseBackupAfterOnboarding: PropTypes.bool,
+    rejectProviderRequestByOrigin: PropTypes.func,
   }
 
   componentWillMount () {
@@ -77,6 +82,8 @@ export default class Home extends PureComponent {
       viewingUnconnectedDapp,
       forceApproveProviderRequestByOrigin,
       shouldShowSeedPhraseReminder,
+      showSeedPhraseBackupAfterOnboarding,
+      rejectProviderRequestByOrigin,
     } = this.props
 
     if (forgottenPassword) {
@@ -98,39 +105,49 @@ export default class Home extends PureComponent {
           { !history.location.pathname.match(/^\/confirm-transaction/)
             ? (
               <TransactionView>
-                {
-                  showPrivacyModeNotification
-                    ? (
-                      <HomeNotification
+                <MultipleNotifications
+                  className
+                  notifications={[
+                    {
+                      shouldBeRendered: showPrivacyModeNotification,
+                      component: <HomeNotification
                         descriptionText={t('privacyModeDefault')}
                         acceptText={t('learnMore')}
                         onAccept={() => {
                           window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
                           unsetMigratedPrivacyMode()
                         }}
-                      />
-                    )
-                    : null
-                }
-                {
-                  viewingUnconnectedDapp
-                    ? (
-                      <HomeNotification
+                        key="home-privacyModeDefault"
+                      />,
+                    },
+                    {
+                      shouldBeRendered: viewingUnconnectedDapp,
+                      component: <HomeNotification
                         descriptionText={t('shareAddressToConnect', [activeTab.origin])}
                         acceptText={t('shareAddress')}
                         onAccept={() => {
                           forceApproveProviderRequestByOrigin(activeTab.origin)
                         }}
+                        ignoreText={t('dismiss')}
+                        onIgnore={() => rejectProviderRequestByOrigin(activeTab.origin)}
                         infoText={t('shareAddressInfo', [activeTab.origin])}
-                      />
-                    )
-                    : null
-                }
-                {
-                  shouldShowSeedPhraseReminder
-                    ? (<BackupNotification />)
-                    : null
-                }
+                        key="home-shareAddressToConnect"
+                      />,
+                    },
+                    {
+                      shouldBeRendered: shouldShowSeedPhraseReminder,
+                      component: <HomeNotification
+                        descriptionText={t('backupApprovalNotice')}
+                        acceptText={t('backupNow')}
+                        onAccept={() => {
+                          showSeedPhraseBackupAfterOnboarding()
+                          history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+                        }}
+                        infoText={t('backupApprovalInfo')}
+                        key="home-backupApprovalNotice"
+                      />,
+                    },
+                  ]}/>
               </TransactionView>
             )
             : null }
diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
index 064c914cd..434d4b7e3 100644
--- a/ui/app/pages/home/home.container.js
+++ b/ui/app/pages/home/home.container.js
@@ -7,6 +7,8 @@ import { getCurrentEthBalance } from '../../selectors/selectors'
 import {
   forceApproveProviderRequestByOrigin,
   unsetMigratedPrivacyMode,
+  showSeedPhraseBackupAfterOnboarding,
+  rejectProviderRequestByOrigin,
 } from '../../store/actions'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
@@ -17,6 +19,7 @@ const mapStateToProps = state => {
   const { activeTab, metamask, appState } = state
   const {
     approvedOrigins,
+    dismissedOrigins,
     lostAccounts,
     suggestedTokens,
     providerRequests,
@@ -34,7 +37,8 @@ const mapStateToProps = state => {
     activeTab &&
     activeTabDappProtocols.includes(activeTab.protocol) &&
     privacyMode &&
-    !approvedOrigins[activeTab.origin]
+    !approvedOrigins[activeTab.origin] &&
+    !dismissedOrigins[activeTab.origin]
   )
   const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP
 
@@ -48,12 +52,15 @@ const mapStateToProps = state => {
     activeTab,
     viewingUnconnectedDapp: isUnconnected && isPopup,
     shouldShowSeedPhraseReminder: !seedPhraseBackedUp && (parseInt(accountBalance, 16) > 0 || tokens.length > 0),
+    isPopup,
   }
 }
 
 const mapDispatchToProps = (dispatch) => ({
   unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()),
   forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)),
+  rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)),
+  showSeedPhraseBackupAfterOnboarding: () => dispatch(showSeedPhraseBackupAfterOnboarding()),
 })
 
 export default compose(