IO-1138 Offline detection.

bodyshop_translations.babel

@@ -12968,6 +12968,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>nointernet</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>nointernet_sub</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>none</name>
                                         <definition_loaded>false</definition_loaded>

client/src/App/App.container.jsx

@@ -14,6 +14,7 @@ if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
 export default function AppContainer() {
   const { t } = useTranslation();
+
   return (
     <ApolloProvider client={client}>
       <ConfigProvider

client/src/App/App.jsx

@@ -1,3 +1,4 @@
+import { Button, Result } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +9,8 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import AboutPage from "../pages/about/about.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
+import { setOnline } from "../redux/application/application.actions";
+import { selectOnline } from "../redux/application/application.selectors";
 import { checkUserSession } from "../redux/user/user.actions";
 import { selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
@@ -27,12 +30,14 @@ const MobilePaymentContainer = lazy(() =>
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
+  online: selectOnline,
 });
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
+  setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({ checkUserSession, currentUser }) {
+export function App({ checkUserSession, currentUser, online, setOnline }) {
   useEffect(() => {
     checkUserSession();
   }, [checkUserSession]);
@@ -42,10 +47,38 @@ export function App({ checkUserSession, currentUser }) {
 
   const { t } = useTranslation();
 
+  window.addEventListener("offline", function (e) {
+    console.log("Internet connection lost.");
+    setOnline(false);
+  });
+
+  window.addEventListener("online", function (e) {
+    setOnline(true);
+  });
+
   if (currentUser.authorized === null) {
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
+  if (!online)
+    return (
+      <Result
+        status="warning"
+        title={t("general.labels.nointernet")}
+        subTitle={t("general.labels.nointernet_sub")}
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            {t("general.actions.refresh")}
+          </Button>
+        }
+      />
+    );
+
   return (
     <Switch>
       <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>

client/src/redux/application/application.actions.js

@@ -48,3 +48,8 @@ export const setPartnerVersion = (version) => ({
   type: ApplicationActionTypes.SET_PARTNER_VERSION,
   payload: version,
 });
+
+export const setOnline = (isOnline) => ({
+  type: ApplicationActionTypes.SET_ONLINE_STATUS,
+  payload: isOnline,
+});

client/src/redux/application/application.reducer.js

@@ -2,6 +2,7 @@ import ApplicationActionTypes from "./application.types";
 
 const INITIAL_STATE = {
   loading: false,
+  online: true,
   breadcrumbs: [],
   recentItems: [],
   selectedHeader: "home",
@@ -21,6 +22,11 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
         ...state,
         selectedHeader: action.payload,
       };
+    case ApplicationActionTypes.SET_ONLINE_STATUS:
+      return {
+        ...state,
+        online: action.payload,
+      };
     case ApplicationActionTypes.ADD_RECENT_ITEM:
       return {
         ...state,

client/src/redux/application/application.selectors.js

@@ -40,3 +40,7 @@ export const selectJobReadOnly = createSelector(
   [selectApplication],
   (application) => application.jobReadOnly
 );
+export const selectOnline = createSelector(
+  [selectApplication],
+  (application) => application.online
+);

client/src/redux/application/application.types.js

@@ -9,5 +9,6 @@ const ApplicationActionTypes = {
   SET_SELECTED_HEADER: "SET_SELECTED_HEADER",
   SET_JOB_READONLY: "SET_JOB_READONLY",
   SET_PARTNER_VERSION: "SET_PARTNER_VERSION",
+  SET_ONLINE_STATUS: "SET_ONLINE_STATUS",
 };
 export default ApplicationActionTypes;

client/src/translations/en_us/common.json

@@ -821,6 +821,8 @@
 				"monday": "Monday",
 				"na": "N/A",
 				"no": "No",
+				"nointernet": "It looks like you're not connected to the internet.",
+				"nointernet_sub": "Please check your connection and try again. ",
 				"none": "None",
 				"out": "Out",
 				"password": "Password",

client/src/translations/es/common.json

@@ -821,6 +821,8 @@
 				"monday": "",
 				"na": "N / A",
 				"no": "",
+				"nointernet": "",
+				"nointernet_sub": "",
 				"none": "",
 				"out": "Afuera",
 				"password": "",

client/src/translations/fr/common.json

@@ -821,6 +821,8 @@
 				"monday": "",
 				"na": "N / A",
 				"no": "",
+				"nointernet": "",
+				"nointernet_sub": "",
 				"none": "",
 				"out": "En dehors",
 				"password": "",