feat: do not display push notifications while in barcode view.

The notifications are not removed, they are stacked into a queue then displayed when the `state.app.shouldNotificationBeDisplayed` is set back to `true`

src/components/NotificationHandler.js

@@ -3,13 +3,15 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import {
   clearNotifications,
+  shouldNotificationBeDisplayed,
   startSound,
   stopSound,
 } from '../redux/App/actions';
 import NotificationModal from './NotificationModal';
 import {
   selectNotificationsToDisplay,
   selectNotificationsWithSound,
+  selectShouldNotificationBeDisplayed
 } from '../redux/App/selectors';
 import { AppState } from 'react-native';
 
@@ -25,6 +27,7 @@ const NOTIFICATION_DURATION_MS = 10000;
 export default function NotificationHandler() {
   const notificationsToDisplay = useSelector(selectNotificationsToDisplay);
   const notificationsWithSound = useSelector(selectNotificationsWithSound);
+  const shouldNotificationBeDisplayed = useSelector(selectShouldNotificationBeDisplayed);
 
   const dispatch = useDispatch();
 
@@ -44,14 +47,19 @@ export default function NotificationHandler() {
     // but it's very limited, e.g. handlers set via setTimeout are not executed
     // so we do not play sound in that case, because we will not be able to stop it
     if (
+      shouldNotificationBeDisplayed &&
       notificationsWithSound.length > 0 &&
       AppState.currentState === 'active'
     ) {
       dispatch(startSound());
     } else {
       dispatch(stopSound());
     }
-  }, [notificationsWithSound, dispatch]);
+  }, [notificationsWithSound, shouldNotificationBeDisplayed, dispatch]);
+
+  if (!shouldNotificationBeDisplayed) {
+    return null;
+  }
 
   return (
     <NotificationModal

src/navigation/courier/barcode/Barcode.js

@@ -19,6 +19,7 @@ import { phonecall } from 'react-native-communications';
 import BottomModal from '../../../components/BottomModal';
 import { navigateToTask } from '../../utils';
 import { selectTasks } from '../../../redux/Courier';
+import { shouldNotificationBeDisplayed } from '../../../redux/App/actions';
 
 async function _fetchBarcode(httpClient, barcode) {
   if (barcode) {
@@ -76,7 +77,13 @@ function TextSection({ title, value, variant = 'data' }) {
   );
 }
 
-function BarcodePage({ t, httpClient, navigation, taskLists }) {
+function BarcodePage({
+  t,
+  httpClient,
+  navigation,
+  taskLists,
+  shouldNotificationBeDisplayed,
+}) {
   const [barcode, setBarcode] = useState(null);
   const [entity, setEntity] = useState(null);
   const [clientActionsQueue, setClientActionsQueue] = useState([]);
@@ -186,6 +193,13 @@ function BarcodePage({ t, httpClient, navigation, taskLists }) {
     }
   }
 
+  useEffect(() => {
+    shouldNotificationBeDisplayed(false);
+    return () => {
+      shouldNotificationBeDisplayed(true);
+    };
+  }, []);
+
   useEffect(() => {
     async function processActions() {
       if (clientActionsQueue.length === 0) return;
@@ -341,8 +355,11 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps(_dispatch) {
-  return {};
+function mapDispatchToProps(dispatch) {
+  return {
+    shouldNotificationBeDisplayed: should =>
+      dispatch(shouldNotificationBeDisplayed(should)),
+  };
 }
 
 export default connect(

src/redux/App/actions.js

@@ -42,6 +42,7 @@ export const SAVE_PUSH_NOTIFICATION_TOKEN_SUCCESS =
   '@app/SAVE_PUSH_NOTIFICATION_TOKEN_SUCCESS';
 export const DELETE_PUSH_NOTIFICATION_TOKEN_SUCCESS =
   '@app/DELETE_PUSH_NOTIFICATION_TOKEN_SUCCESS';
+export const SHOULD_NOTIFICATION_BE_DISPLAYED = '@app/SHOULD_NOTIFICATION_BE_DISPLAYED';
 
 export const LOGIN = '@app/LOGIN';
 export const SET_LOADING = '@app/SET_LOADING';
@@ -165,6 +166,9 @@ export const savePushNotificationTokenSuccess = createFsAction(
 export const deletePushNotificationTokenSuccess = createFsAction(
   DELETE_PUSH_NOTIFICATION_TOKEN_SUCCESS,
 );
+export const shouldNotificationBeDisplayed = createFsAction(
+  SHOULD_NOTIFICATION_BE_DISPLAYED,
+)
 
 const _loadMyStoresSuccess = createFsAction(LOAD_MY_STORES_SUCCESS);
 

src/redux/App/reducers.js

@@ -43,6 +43,7 @@ import {
   RESET_PASSWORD_REQUEST_SUCCESS,
   RESUME_CHECKOUT_AFTER_ACTIVATION,
   SAVE_PUSH_NOTIFICATION_TOKEN_SUCCESS,
+  SHOULD_NOTIFICATION_BE_DISPLAYED,
   SET_BACKGROUND_GEOLOCATION_ENABLED,
   SET_BASE_URL,
   SET_CURRENT_ROUTE,
@@ -70,6 +71,7 @@ const initialState = {
   currentRoute: null,
   pushNotificationToken: null,
   pushNotificationTokenSaved: null,
+  shouldNotificationBeDisplayed: true,
   loading: false,
   notifications: [],
   lastAuthenticationError: null,
@@ -194,6 +196,13 @@ export default (state = initialState, action = {}) => {
       return updateNotifications(state, event, params);
     }
 
+    case SHOULD_NOTIFICATION_BE_DISPLAYED: {
+      return {
+        ...state,
+        shouldNotificationBeDisplayed: action.payload,
+      }
+    }
+
     case CLEAR_NOTIFICATIONS:
       return {
         ...state,

src/redux/App/selectors.js

@@ -229,3 +229,4 @@ export const selectNotificationsToDisplay = createSelector(
 export const selectSettingsLatLng = state => state.app.settings.latlng;
 export const selectStripePublishableKey = state =>
   state.app.settings.stripe_publishable_key;
+export const selectShouldNotificationBeDisplayed = state => state.app.shouldNotificationBeDisplayed;