Merge pull request #1391 from Hirobreak/update-popup

update for popup when receiving large image

Author: danieltigse

email_mailbox/src/components/Panel.js

@@ -12,6 +12,7 @@ import MigrationPopupWrapper from './MigrationPopupWrapper';
 import PasswordChangedPopupWrapper from './PasswordChangedPopupWrapper';
 import RestoreBackupPopupWrapper from './RestoreBackupPopupWrapper';
 import SuspendedAccountPopup from './SuspendedAccountPopup';
+import UpdatePopup from './UpdatePopup';
 import { MAILBOX_POPUP_TYPES } from './PanelWrapper';
 import { mySettings } from '../utils/electronInterface';
 import UserGuide from './UserGuide';
@@ -48,6 +49,7 @@ const Panel = props => (
       )}
     {!props.isHiddenMailboxPopup &&
       renderMailboxPopup({
+        data: props.mailboxPopupData,
         type: props.mailboxPopupType,
         isHidden: props.isHiddenMailboxPopup,
         ...props
@@ -56,7 +58,7 @@ const Panel = props => (
   </div>
 );
 
-const renderMailboxPopup = ({ type, isHidden, ...props }) => {
+const renderMailboxPopup = ({ data, type, isHidden, ...props }) => {
   switch (type) {
     case MAILBOX_POPUP_TYPES.ACCOUNT_DELETED: {
       const Accountdeletedpopup = PopupHOC(AccountDeletedPopup);
@@ -67,6 +69,20 @@ const renderMailboxPopup = ({ type, isHidden, ...props }) => {
         />
       );
     }
+    case MAILBOX_POPUP_TYPES.BIG_UPDATE_AVAILABLE: {
+      const BigUpdatePopup = PopupHOC(UpdatePopup);
+      return (
+        <BigUpdatePopup
+          {...data}
+          isHidden={isHidden}
+          popupPosition={{ left: '50%', top: '50%' }}
+          theme={'dark'}
+          onUpdateNow={props.onUpdateNow}
+          onTogglePopup={props.onCloseMailboxPopup}
+          isClosable={true}
+        />
+      );
+    }
     case MAILBOX_POPUP_TYPES.CREATING_BACKUP_FILE: {
       const Creatingbackupfilepopup = PopupHOC(CreatingBackupFilePopup);
       return (
@@ -153,7 +169,9 @@ const defineWrapperClass = (isOpenSideBar, isOpenActivityPanel) => {
 };
 
 renderMailboxPopup.propTypes = {
+  data: PropTypes.object,
   onCloseMailboxPopup: PropTypes.func,
+  onUpdateNow: PropTypes.func,
   isHidden: PropTypes.bool,
   props: PropTypes.object,
   type: PropTypes.string
@@ -164,6 +182,7 @@ Panel.propTypes = {
   isOpenActivityPanel: PropTypes.bool,
   isOpenSideBar: PropTypes.bool,
   isOpenWelcome: PropTypes.bool,
+  mailboxPopupData: PropTypes.object,
   mailboxPopupType: PropTypes.string,
   onClickCloseWelcome: PropTypes.func,
   onClickThreadBack: PropTypes.func,

email_mailbox/src/components/PanelWrapper.js

@@ -7,7 +7,7 @@ import {
   Event,
   checkUserGuideSteps
 } from '../utils/electronEventInterface';
-import { processPendingEvents } from '../utils/ipc';
+import { checkForUpdates, processPendingEvents } from '../utils/ipc';
 import { LabelType, getPendingRestoreStatus } from '../utils/electronInterface';
 import { SectionType } from '../utils/const';
 import {
@@ -21,6 +21,7 @@ import { USER_GUIDE_STEPS } from './UserGuide';
 
 const MAILBOX_POPUP_TYPES = {
   ACCOUNT_DELETED: 'account-deleted',
+  BIG_UPDATE_AVAILABLE: 'big-update-available',
   CREATING_BACKUP_FILE: 'creating-backup-file',
   DEVICE_REMOVED: 'device-removed',
   MIGRATE_ALICE: 'migrate-alice',
@@ -42,6 +43,7 @@ class PanelWrapper extends Component {
       isOpenSideBar: true,
       isOpenWelcome: true,
       mailboxPopupType: undefined,
+      mailboxPopupData: undefined,
       sectionSelected: {
         type: SectionType.MAILBOX,
         params: {
@@ -72,13 +74,15 @@ class PanelWrapper extends Component {
         isOpenSideBar={this.state.isOpenSideBar}
         isOpenWelcome={this.state.isOpenWelcome}
         mailboxPopupType={this.state.mailboxPopupType}
+        mailboxPopupData={this.state.mailboxPopupData}
         onClickCloseWelcome={this.handleCloseWelcome}
         onClickSection={this.handleClickSection}
         onClickThreadBack={this.handleClickThreadBack}
         onCloseMailboxPopup={this.handleCloseMailboxPopup}
         onToggleActivityPanel={this.handleToggleActivityPanel}
         onToggleSideBar={this.handleToggleSideBar}
         sectionSelected={this.state.sectionSelected}
+        onUpdateNow={this.handleUpdateNow}
         {...this.props}
       />
     );
@@ -90,6 +94,11 @@ class PanelWrapper extends Component {
     this.handleCheckRestoreBackup();
   }
 
+  handleUpdateNow = () => {
+    checkForUpdates(true);
+    this.handleCloseMailboxPopup();
+  };
+
   handleClickSection = (type, params) => {
     switch (type) {
       case SectionType.MAILBOX:
@@ -189,7 +198,8 @@ class PanelWrapper extends Component {
   handleCloseMailboxPopup = () => {
     this.setState({
       isHiddenMailboxPopup: true,
-      mailboxPopupType: undefined
+      mailboxPopupType: undefined,
+      mailboxPopupData: undefined
     });
   };
 
@@ -210,6 +220,7 @@ class PanelWrapper extends Component {
     addEvent(Event.ACCOUNT_DELETED, this.accountDeletedListenerCallback);
     addEvent(Event.SET_SECTION_TYPE, this.setSectionTypeListenerCallback);
     addEvent(Event.SUSPENDED_ACCOUNT, this.suspendedAccountListenerCallback);
+    addEvent(Event.BIG_UPDATE_AVAILABLE, this.handleBigUpdateListenerCallback);
     addEvent(
       Event.REACTIVATED_ACCOUNT,
       this.reactivatedAccountListenerCallback
@@ -266,7 +277,8 @@ class PanelWrapper extends Component {
   enableWindowListenerCallback = () => {
     this.setState({
       isHiddenMailboxPopup: true,
-      mailboxPopupType: undefined
+      mailboxPopupType: undefined,
+      mailboxPopupData: undefined
     });
   };
 
@@ -501,6 +513,14 @@ class PanelWrapper extends Component {
     });
   };
 
+  handleBigUpdateListenerCallback = data => {
+    this.setState({
+      isHiddenMailboxPopup: false,
+      mailboxPopupType: MAILBOX_POPUP_TYPES.BIG_UPDATE_AVAILABLE,
+      mailboxPopupData: data
+    });
+  };
+
   reactivatedAccountListenerCallback = () => {
     const isShowingPopup = !this.state.isHiddenMailboxPopup;
     const isVisibleSuspendedAccountPopup =

email_mailbox/src/components/UpdatePopup.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import string from '../lang';
+import './updatepopup.scss';
+
+const { title, buttons } = string.popups.new_update;
+
+const UpdatePopup = props => {
+  return (
+    <div className="popup-content update-popup">
+      <div className="popup-title">
+        <h1>{title}</h1>
+      </div>
+      <div className="popup-img">
+        <img alt="update preview" src={props.largeImageUrl} />
+      </div>
+      <div className="popup-subtitle">
+        <p>{props.title}</p>
+      </div>
+      <div className="popup-paragraph">
+        <p>{props.body}</p>
+      </div>
+      <div className="popup-buttons">
+        <button
+          className="button-a popup-confirm-button"
+          onClick={props.onUpdateNow}
+        >
+          <span>{buttons.update}</span>
+        </button>
+        <button
+          className="button-a popup-cancel-button"
+          onClick={props.onTogglePopup}
+        >
+          <span>{buttons.later}</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+UpdatePopup.propTypes = {
+  body: PropTypes.string,
+  largeImageUrl: PropTypes.string,
+  title: PropTypes.string,
+  onTogglePopup: PropTypes.func,
+  onUpdateNow: PropTypes.func
+};
+
+export default UpdatePopup;

email_mailbox/src/components/updatepopup.scss

@@ -0,0 +1,52 @@
+.update-popup {
+
+  .popup-title {
+    font-size: 18px;
+    margin-top: 15px;
+  }
+
+  .popup-img {
+    margin: 20px 0px 26px 0px;
+
+    > img {
+      width: 100%;
+    }
+  }
+
+  .popup-subtitle {
+    color: #484747;
+    font-size: 18px;
+    height: 35px;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+
+    > p {
+      margin: 0px;
+      padding: 0px;
+    }
+  }
+
+  .popup-paragraph {
+    margin-top: 0px !important;
+    margin: 0px;
+
+    > p {
+      margin: 0px;
+    }
+  }
+
+  .popup-buttons {
+    width: 100%;
+    align-items: center;
+    flex-direction: column !important;
+
+    .popup-cancel-button {
+      margin-top: 2px;
+      color: #5d5b5b !important;
+      font-size: 12px !important;
+      font-weight: 600;
+    }
+  }
+
+}

email_mailbox/src/lang/de.json

@@ -477,6 +477,13 @@
       "cancelSyncLabel": "Synchronisation abbrechen",
       "continueLabel": "Fortfahren"
     },
+    "new_update": {
+      "title": "New Update",
+      "buttons": {
+        "update": "Update Now",
+        "later": "Maybe Later"
+      }
+    },
     "permanently_delete": {
       "title": "Warnung!",
       "message": "Diese Elemente werden dauerhaft gelöscht und können nicht wiederhergestellt werden. Sind Sie sicher?",

email_mailbox/src/lang/en.json

@@ -501,6 +501,13 @@
         "upgrade": "Unable to upgrade account!"
       }
     },
+    "new_update": {
+      "title": "New Update",
+      "buttons": {
+        "update": "Update Now",
+        "later": "Maybe Later"
+      }
+    },
     "permanently_delete": {
       "title": "Warning!",
       "message": "This elements will be permanently deleted and you will not be able to recover them. Are you sure?",

email_mailbox/src/lang/es.json

@@ -501,6 +501,13 @@
         "upgrade": "No fue posible actualizar la cuenta!"
       }
     },
+    "new_update": {
+      "title": "Nueva Actualización",
+      "buttons": {
+        "update": "Actualizar",
+        "later": "Tal vez Después"
+      }
+    },
     "permanently_delete": {
       "title": "Advertencia!",
       "message": "Estos elementos se eliminarán permanentemente y no podrás recuperarlos. ¿Estás seguro?",

email_mailbox/src/lang/fr.json

@@ -477,6 +477,13 @@
       "cancelSyncLabel": "Annuler la synchronisation",
       "continueLabel": "Continuer"
     },
+    "new_update": {
+      "title": "New Update",
+      "buttons": {
+        "update": "Update Now",
+        "later": "Maybe Later"
+      }
+    },
     "permanently_delete": {
       "title": "Attention !",
       "message": "Ces éléments seront supprimés de façon permanente et vous ne pourrez pas les récupérer. Êtes-vous sûr ?",

email_mailbox/src/lang/ru.json

@@ -477,6 +477,13 @@
       "cancelSyncLabel": "Отменить синхронизацию",
       "continueLabel": "Продолжить"
     },
+    "new_update": {
+      "title": "New Update",
+      "buttons": {
+        "update": "Update Now",
+        "later": "Maybe Later"
+      }
+    },
     "permanently_delete": {
       "title": "Предупреждение!",
       "message": "Эти элементы будут удалены навсегда и вы не сможете восстановить их. Вы уверены?",

email_mailbox/src/utils/electronEventInterface.js

@@ -1243,11 +1243,18 @@ const handlePeerRecoveryEmailConfirmed = () => {
 
 const handleNewAnnouncementEvent = async ({ rowid, params }) => {
   const { code } = params;
-  const { title } = await getNews({ code });
+  const updateAnnouncement = await getNews({ code });
+  if (!updateAnnouncement) return { rowid };
+  if (updateAnnouncement.largeImageUrl) {
+    emitter.emit(Event.BIG_UPDATE_AVAILABLE, {
+      ...updateAnnouncement
+    });
+    return { rowid };
+  }
   const messageData = {
     ...Messages.news.announcement,
     type: MessageType.ANNOUNCEMENT,
-    description: title
+    description: updateAnnouncement.title
   };
   emitter.emit(Event.DISPLAY_MESSAGE, messageData);
   return { rowid };
@@ -1832,6 +1839,7 @@ export const sendMailboxEvent = (eventName, eventData) => {
 
 export const Event = {
   ACCOUNT_DELETED: 'account-deleted',
+  BIG_UPDATE_AVAILABLE: 'big-update-available',
   DEVICE_REMOVED: 'device-removed',
   DISABLE_WINDOW: 'add-window-overlay',
   DISPLAY_MESSAGE: 'display-message',