On click of Download card, If the internet if Off Display no internet…

… connection page (#903) * feat(INJI-413): add internet connection off page on click of download card button * feat(INJI-357): refactor the error component to render modal or view * feat(INJI-357): add error message translation for all languages --------- Co-authored-by: Pooja Babusingh <[email protected]>
mosip · Oct 10, 2023 · 50d9376 · 50d9376
1 parent 16ef93e
commit 50d9376
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 29 deletions.
diff --git a/components/ui/Error.tsx b/components/ui/Error.tsx
@@ -6,10 +6,38 @@ import {Button, Column, Row, Text} from '.';
 import {Header} from './Header';
 import {Theme} from './styleUtils';
 import testIDProps from '../../shared/commonUtil';
+import {Modal} from './Modal';
 
 export const Error: React.FC<ErrorProps> = props => {
   const {t} = useTranslation('common');
 
+  const errorContent = () => {
+    return (
+      <View style={{alignItems: 'center'}}>
+        <View>
+          <Row align="center" style={Theme.ErrorStyles.image}>
+            {props.image}
+          </Row>
+          <Text style={Theme.ErrorStyles.title} testID="errorTitle">
+            {props.title}
+          </Text>
+          <Text style={Theme.ErrorStyles.message} testID="errorMessage">
+            {props.message}
+          </Text>
+        </View>
+        {props.tryAgain && (
+          <Button
+            onPress={props.tryAgain}
+            width={Dimensions.get('screen').width * 0.46}
+            title={t('tryAgain')}
+            type="outline"
+            testID="tryAgain"
+          />
+        )}
+      </View>
+    );
+  };
+
   useFocusEffect(
     React.useCallback(() => {
       const onBackPress = () => {
@@ -26,7 +54,20 @@ export const Error: React.FC<ErrorProps> = props => {
     }, []),
   );
 
-  return (
+  return props.isModal ? (
+    <Modal
+      isVisible={props.isVisible}
+      onDismiss={props.onDismiss}
+      style={{
+        ...Theme.ModalStyles.modal,
+        backgroundColor: Theme.Colors.whiteBackgroundColor,
+      }}
+      {...testIDProps(props.testID)}>
+      <Column fill safe align="space-evenly">
+        {errorContent()}
+      </Column>
+    </Modal>
+  ) : (
     <View
       style={{
         ...Theme.ModalStyles.modal,
@@ -36,40 +77,25 @@ export const Error: React.FC<ErrorProps> = props => {
       <Column fill safe>
         {props.goBack && <Header testID="errorHeader" goBack={props.goBack} />}
         <Column fill safe align="space-evenly">
-          <View style={{alignItems: 'center'}}>
-            <View>
-              <Row align="center" style={Theme.ErrorStyles.image}>
-                {props.image}
-              </Row>
-              <Text style={Theme.ErrorStyles.title} testID="errorTitle">
-                {props.title}
-              </Text>
-              <Text style={Theme.ErrorStyles.message} testID="errorMessage">
-                {props.message}
-              </Text>
-            </View>
-            {props.tryAgain && (
-              <Button
-                onPress={props.tryAgain}
-                width={Dimensions.get('screen').width * 0.46}
-                title={t('tryAgain')}
-                type="outline"
-                testID="tryAgain"
-              />
-            )}
-          </View>
+          {errorContent()}
         </Column>
       </Column>
     </View>
   );
 };
 
+Error.defaultProps = {
+  isModal: false,
+};
+
 export interface ErrorProps {
+  isModal?: boolean;
   isVisible: boolean;
   title: string;
   message: string;
   image: React.ReactElement;
-  goBack: () => void;
+  goBack?: () => void;
   tryAgain: null | (() => void);
   testID: string;
+  onDismiss?: () => void;
 }
diff --git a/locales/ara.json b/locales/ara.json
@@ -292,7 +292,11 @@
         "title": "بعض ميزات الأمان لن تكون متاحة",
         "message": "جهازك الحالي لا يدعم جميع ميزات الأمان.",
         "riskOkayText": "نعم"
-      }
+      },
+      "noInternetConnection": {
+        "title": "لا يوجد اتصال بالإنترنت",
+        "message": "الرجاء التحقق من اتصالك وإعادة المحاولة"
+      },
     }
   },
   "OnboardingOverlay": {

diff --git a/locales/en.json b/locales/en.json
@@ -299,6 +299,10 @@
         "title": "Some security features will be unavailable",
         "message": "Your current device does not support all the security features.",
         "riskOkayText": "Ok"
+      },
+      "noInternetConnection": {
+        "title": "No internet connection",
+        "message": "Please check your connection and retry"
       }
     }
   },

diff --git a/locales/fil.json b/locales/fil.json
@@ -291,6 +291,10 @@
         "title": "Ang ilang mga tampok sa seguridad ay hindi magagamit",
         "message": "Hindi sinusuportahan ng iyong kasalukuyang device ang lahat ng feature ng seguridad.",
         "riskOkayText": "Ok"
+      },
+      "noInternetConnection": {
+        "title": "Pakisuri ang iyong koneksyon at subukang muli",
+        "message": "Mangyaring kumonekta sa internet at subukang muli."
       }
     }
   },

diff --git a/locales/hin.json b/locales/hin.json
@@ -291,7 +291,11 @@
         "title": "कुछ सुरक्षा सुविधाएँ अनुपलब्ध होंगी",
         "message": "आपका वर्तमान उपकरण सभी सुरक्षा सुविधाओं का समर्थन नहीं करता है.",
         "riskOkayText": "ठीक है"
-      }
+      },
+      "noInternetConnection": {
+        "title": "कोई इंटरनेट कनेक्शन नहीं",
+        "message": "कृपया अपना कनेक्शन जांचें और पुनः प्रयास करें"
+      },
     }
   },
   "OnboardingOverlay": {

diff --git a/locales/kan.json b/locales/kan.json
@@ -288,7 +288,11 @@
         "title": "ಕೆಲವು ಭದ್ರತಾ ವೈಶಿಷ್ಟ್ಯಗಳು ಲಭ್ಯವಿರುವುದಿಲ್ಲ",
         "message": "ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಸಾಧನವು ಎಲ್ಲಾ ಭದ್ರತಾ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.",
         "riskOkayText": "ಸರಿ"
-      }
+      },
+      "noInternetConnection": {
+        "title": "ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕವಿಲ್ಲ",
+        "message": "ದಯವಿಟ್ಟು ನಿಮ್ಮ ಸಂಪರ್ಕವನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಮರುಪ್ರಯತ್ನಿಸಿ"
+      },
     }
   },
   "OnboardingOverlay": {

diff --git a/locales/spa.json b/locales/spa.json
@@ -201,7 +201,11 @@
 				"title": "Algunas funciones de seguridad no estarán disponibles",
 				"message": "Su dispositivo actual no admite todas las funciones de seguridad.",
 				"riskOkayText": "De acuerdo"
-			}
+			},
+      "noInternetConnection": {
+        "title": "Sin conexión a Internet",
+        "message": "Por favor verifique su conexión y vuelva a intentarlo"
+      },
 		}
 	},
 	"OnboardingOverlay": {

diff --git a/locales/tam.json b/locales/tam.json
@@ -288,6 +288,10 @@
         "title": "சில பாதுகாப்பு அம்சங்கள் கிடைக்காது",
         "message": "உங்கள் தற்போதைய சாதனம் அனைத்து பாதுகாப்பு அம்சங்களையும் ஆதரிக்கவில்லை.",
         "riskOkayText": "சரி"
+      },
+      "noInternetConnection": {
+        "title": "இணைய இணைப்பு இல்லை",
+        "message": "உங்கள் இணைப்பைச் சரிபார்த்து மீண்டும் முயற்சிக்கவும்"
       }
     }
   },

diff --git a/screens/Home/MyVcsTab.tsx b/screens/Home/MyVcsTab.tsx
@@ -16,6 +16,7 @@ import {groupBy} from '../../shared/javascript';
 import {isOpenId4VCIEnabled} from '../../shared/openId4VCI/Utils';
 import {VcItemContainer} from '../../components/VC/VcItemContainer';
 import {BannerNotification} from '../../components/BannerNotification';
+import {Error} from '../../components/ui/Error';
 
 const pinIconProps = {iconName: 'pushpin', iconType: 'antdesign'};
 
@@ -200,6 +201,18 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
         buttonText={t('common:ok')}
         customHeight={'auto'}
       />
+      {controller.isNetworkOff && (
+        <Error
+          testID={`networkOffError`}
+          isVisible={controller.isNetworkOff}
+          isModal={true}
+          title={t('errors.noInternetConnection.title')}
+          message={t('errors.noInternetConnection.message')}
+          onDismiss={controller.DISMISS}
+          tryAgain={controller.TRY_AGAIN}
+          image={<Image source={Theme.NoInternetConnection} />}
+        />
+      )}
     </React.Fragment>
   );
 };
diff --git a/screens/Home/MyVcsTabController.ts b/screens/Home/MyVcsTabController.ts
@@ -25,6 +25,7 @@ import {
   selectGetVcModal,
   selectIsSavingFailedInIdle,
   selectIsMinimumStorageLimitReached,
+  selectIsNetworkOff,
 } from './MyVcsTabMachine';
 import {
   selectShowHardwareKeystoreNotExistsAlert,
@@ -55,6 +56,7 @@ export function useMyVcsTab(props: HomeScreenTabProps) {
       service,
       selectIsMinimumStorageLimitReached,
     ),
+    isNetworkOff: useSelector(service, selectIsNetworkOff),
     showHardwareKeystoreNotExistsAlert: useSelector(
       settingsService,
       selectShowHardwareKeystoreNotExistsAlert,
@@ -78,6 +80,8 @@ export function useMyVcsTab(props: HomeScreenTabProps) {
 
     DISMISS: () => service.send(MyVcsTabEvents.DISMISS()),
 
+    TRY_AGAIN: () => service.send(MyVcsTabEvents.TRY_AGAIN()),
+
     DOWNLOAD_ID: () => service.send(MyVcsTabEvents.ADD_VC()),
 
     GET_VC: () => service.send(MyVcsTabEvents.GET_VC()),

diff --git a/screens/Home/MyVcsTabMachine.ts b/screens/Home/MyVcsTabMachine.ts
@@ -18,6 +18,7 @@ import {GetVcModalMachine} from './MyVcs/GetVcModalMachine';
 import Storage from '../../shared/storage';
 import {VCMetadata} from '../../shared/VCMetadata';
 import {EsignetMosipVCItemMachine} from '../../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
+import NetInfo from '@react-native-community/netinfo';
 
 const model = createModel(
   {
@@ -34,6 +35,7 @@ const model = createModel(
         vcItemActor,
       }),
       DISMISS: () => ({}),
+      TRY_AGAIN: () => ({}),
       STORE_RESPONSE: (response?: unknown) => ({response}),
       STORE_ERROR: (error: Error) => ({error}),
       ADD_VC: () => ({}),
@@ -65,8 +67,23 @@ export const MyVcsTabMachine = model.createMachine(
     initial: 'idle',
     states: {
       addVc: {
-        initial: 'checkStorage',
+        initial: 'checkNetwork',
         states: {
+          checkNetwork: {
+            invoke: {
+              src: 'checkNetworkStatus',
+              onDone: [
+                {
+                  cond: 'isNetworkOn',
+                  target: 'checkStorage',
+                },
+                {
+                  target: 'networkOff',
+                },
+              ],
+            },
+          },
+
           checkStorage: {
             invoke: {
               src: 'checkStorageAvailability',
@@ -86,6 +103,12 @@ export const MyVcsTabMachine = model.createMachine(
               DISMISS: '#idle',
             },
           },
+          networkOff: {
+            on: {
+              DISMISS: '#idle',
+              TRY_AGAIN: 'checkNetwork',
+            },
+          },
         },
       },
       idle: {
@@ -170,6 +193,10 @@ export const MyVcsTabMachine = model.createMachine(
           Storage.isMinimumLimitReached('minStorageRequired'),
         );
       },
+      checkNetworkStatus: async () => {
+        const state = await NetInfo.fetch();
+        return state.isConnected;
+      },
     },
 
     actions: {
@@ -205,6 +232,7 @@ export const MyVcsTabMachine = model.createMachine(
 
     guards: {
       isMinimumStorageLimitReached: (_context, event) => Boolean(event.data),
+      isNetworkOn: (_context, event) => Boolean(event.data),
     },
   },
 );
@@ -237,3 +265,6 @@ export function selectIsSavingFailedInIdle(state: State) {
 export function selectIsMinimumStorageLimitReached(state: State) {
   return state.matches('addVc.storageLimitReached');
 }
+export function selectIsNetworkOff(state: State) {
+  return state.matches('addVc.networkOff');
+}