Fix sharing screen progress modal in IOS (mosip#1005)

* fix(INJI-558): fix sharing screen progress modal in ios Signed-off-by: adityankannan-tw <[email protected]> Co-authored-by: Vijay <[email protected]> * fix(inji-558): remove isVisible prop from Loader Component. Signed-off-by: Vijay <[email protected]> * refactor(INJI-558): refactor selectors to match the state Signed-off-by: adityankannan-tw <[email protected]> * fix(inji-558): remove optional field for title prop. Signed-off-by: Vijay <[email protected]> --------- Signed-off-by: adityankannan-tw <[email protected]> Signed-off-by: Vijay <[email protected]> Signed-off-by: adityankannan-tw <[email protected]> Co-authored-by: Vijay <[email protected]> Signed-off-by: PuBHARGAVI <[email protected]>
tw-mosip · Nov 21, 2023 · 576aad2 · 576aad2
1 parent e501f9f
commit 576aad2
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 45 deletions.
diff --git a/components/ui/Loader.tsx b/components/ui/Loader.tsx
@@ -64,7 +64,33 @@ export const Loader: React.FC<LoaderProps> = props => {
             />
           </View>
         </Column>
+        {(props.isHintVisible || props.isBleErrorVisible) && (
+          <Column style={Theme.SelectVcOverlayStyles.timeoutHintContainer}>
+            <Text
+              align="center"
+              margin="10"
+              color={Theme.Colors.TimoutHintText}
+              size="small"
+              style={Theme.TextStyles.bold}>
+              {props.hint}
+            </Text>
+            {props.onStayInProgress && (
+              <Button
+                type="clear"
+                title={t('status.stayOnTheScreen')}
+                onPress={props.onStayInProgress}
+              />
+            )}
 
+            {props.onRetry && (
+              <Button
+                type="clear"
+                title={t('status.retry')}
+                onPress={props.onRetry}
+              />
+            )}
+          </Column>
+        )}
         <Column style={{display: props.hint ? 'flex' : 'none'}}>
           <Column style={Theme.SelectVcOverlayStyles.timeoutHintContainer}>
             <Text
@@ -88,12 +114,15 @@ export const Loader: React.FC<LoaderProps> = props => {
 };
 
 export interface LoaderProps {
-  isVisible: boolean;
   title: string;
   subTitle?: string;
   label?: string;
   hint?: string;
+  onStayInProgress?: () => void;
+  isHintVisible?: boolean;
+  isBleErrorVisible?: boolean;
   onCancel?: () => void;
+  onRetry?: () => void;
   requester?: boolean;
   progress?: boolean | number;
   onBackdropPress?: () => void;

diff --git a/locales/ara.json b/locales/ara.json
@@ -508,12 +508,12 @@
       "sent": "تم إرسال بطاقة ...",
       "sentHint": "في انتظار أن يحفظ المستلم بطاقة أو يتجاهلها",
       "sharing": {
-        "title": "جاري المشاركة",
+        "title": "جاري المشاركة...",
         "timeoutHint": "تأخرت المشاركة، ربما بسبب مشكلة في الاتصال.",
-        "hint": "يرجى الانتظار حتى نشارك البطاقة المختارة."
+        "hint": "يرجى الانتظار حتى نشارك البطاقة المختارة..."
       },
       "accepted": {
-        "title": "تمت مشاركة المعرف بنجاح",
+        "title": "تمت مشاركة المعرف بنجاح!",
         "message": "تمت مشاركة هويتك بنجاح مع",
         "gotohome": "اذهب الى المنزل"
       },

diff --git a/locales/en.json b/locales/en.json
@@ -509,12 +509,12 @@
       "sent": "Card has been sent...",
       "sentHint": "Waiting for receiver to save or discard your Card",
       "sharing": {
-        "title": "Sharing in progress",
-        "hint": "Please wait while we share the chosen card.",
+        "title": "Sharing in progress...",
+        "hint": "Please wait while we share the chosen card...",
         "timeoutHint": "Sharing is delayed, possibly due to a connection issue."
       },
       "accepted": {
-        "title": "ID shared successfully",
+        "title": "ID shared successfully!",
         "message": "Your ID has been successfully shared with",
         "gotohome": "Go to Home"
       },

diff --git a/locales/fil.json b/locales/fil.json
@@ -511,12 +511,12 @@
       "sent": "Naipadala na ang card...",
       "sentHint": "Naghihintay para sa receiver na i-save o itapon ang iyong card",
       "sharing": {
-        "title": "Isinasagawa ang pagbabahagi",
+        "title": "Isinasagawa ang pagbabahagi...",
         "timeoutHint": "Naantala ang pagbabahagi, posibleng dahil sa isang isyu sa koneksyon.",
-        "hint": "Mangyaring maghintay habang ibinabahagi namin ang napiling card."
+        "hint": "Mangyaring maghintay habang ibinabahagi namin ang napiling card..."
       },
       "accepted": {
-        "title": "Matagumpay na naibahagi ang ID",
+        "title": "Matagumpay na naibahagi ang ID!",
         "message": "Ang iyong ID ay matagumpay na naibahagi sa",
         "gotohome": "Pumunta sa bahay"
       },

diff --git a/locales/hin.json b/locales/hin.json
@@ -508,12 +508,12 @@
       "sent": "कार्ड भेज दिया गया है...",
       "sentHint": "आपके {{vcLabel }} को सहेजने या छोड़ने के लिए रिसीवर की प्रतीक्षा की जा रही है",
       "sharing": {
-        "title": "साझाकरण प्रगति पर है",
+        "title": "साझाकरण प्रगति पर है...",
         "timeoutHint": "संभवतः किसी कनेक्शन समस्या के कारण साझाकरण में देरी हो रही है।",
-        "hint": "कृपया तब तक प्रतीक्षा करें जब तक हम चयनित कार्ड साझा नहीं करते।"
+        "hint": "कृपया तब तक प्रतीक्षा करें जब तक हम चयनित कार्ड साझा नहीं करते।..."
       },
       "accepted": {
-        "title": "आईडी सफलतापूर्वक साझा की गई",
+        "title": "आईडी सफलतापूर्वक साझा की गई!",
         "message": "आपकी आईडी सफलतापूर्वक साझा कर दी गई है",
         "gotohome": "घर जाओ"
       },

diff --git a/locales/kan.json b/locales/kan.json
@@ -506,12 +506,12 @@
       "sent": "ಕಾರ್ಡ್ ಅನ್ನು ಕಳುಹಿಸಲಾಗಿದೆ...",
       "sentHint": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಉಳಿಸಲು ಅಥವಾ ತ್ಯಜಿಸಲು ರಿಸೀವರ್‌ಗಾಗಿ ನಿರೀಕ್ಷಿಸಲಾಗುತ್ತಿದೆ",
       "sharing": {
-        "title": "ಹಂಚಿಕೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ",
+        "title": "ಹಂಚಿಕೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ...",
         "timeoutHint": "ಬಹುಶಃ ಸಂಪರ್ಕದ ಸಮಸ್ಯೆಯಿಂದಾಗಿ ಹಂಚಿಕೆ ವಿಳಂಬವಾಗಿದೆ.",
-        "hint": "ನಾವು ಆಯ್ಕೆಮಾಡಿದ ಕಾರ್ಡ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುವವರೆಗೆ ದಯವಿಟ್ಟು ನಿರೀಕ್ಷಿಸಿ."
+        "hint": "ನಾವು ಆಯ್ಕೆಮಾಡಿದ ಕಾರ್ಡ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುವವರೆಗೆ ದಯವಿಟ್ಟು ನಿರೀಕ್ಷಿಸಿ..."
       },
       "accepted": {
-        "title": "ಐಡಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ",
+        "title": "ಐಡಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ!",
         "message": "ನಿಮ್ಮ ಐಡಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ",
         "gotohome": "ಮನೆಗೆ ಹೋಗು"
       },

diff --git a/locales/tam.json b/locales/tam.json
@@ -506,12 +506,12 @@
       "sent": "அட்டை அனுப்பப்பட்டது...",
       "sentHint": "ரிசீவர் உங்கள் அட்டை ஐ சேமிக்க அல்லது நிராகரிக்க காத்திருக்கிறது",
       "sharing": {
-        "title": "பகிர்தல் செயல்பாட்டில் உள்ளது",
+        "title": "பகிர்தல் செயல்பாட்டில் உள்ளது...",
         "timeoutHint": "இணைப்புச் சிக்கல் காரணமாகப் பகிர்தல் தாமதமாகலாம்.",
-        "hint": "தேர்ந்தெடுத்த கார்டைப் பகிரும் வரை காத்திருக்கவும்."
+        "hint": "தேர்ந்தெடுத்த கார்டைப் பகிரும் வரை காத்திருக்கவும்..."
       },
       "accepted": {
-        "title": "ஐடி வெற்றிகரமாகப் பகிரப்பட்டது",
+        "title": "ஐடி வெற்றிகரமாகப் பகிரப்பட்டது!",
         "message": "உங்கள் ஐடி வெற்றிகரமாகப் பகிரப்பட்டது",
         "gotohome": "வீட்டிற்கு போ"
       },

diff --git a/machines/bleShare/scan/selectors.ts b/machines/bleShare/scan/selectors.ts
@@ -60,11 +60,11 @@ export function selectIsInvalid(state: State) {
 }
 
 export function selectIsLocationDenied(state: State) {
-  return state.matches('checkingLocationService.denied');
+  return state.matches('checkingLocationState.denied');
 }
 
 export function selectIsLocationDisabled(state: State) {
-  return state.matches('checkingLocationService.disabled');
+  return state.matches('checkingLocationState.disabled');
 }
 
 export function selectIsShowQrLogin(state: State) {

diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx
@@ -1,6 +1,6 @@
 import React, {useLayoutEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Image, View, TextInput, ScrollView} from 'react-native';
+import {FlatList, Image, TextInput, View} from 'react-native';
 import {Issuer} from '../../components/openId4VCI/Issuer';
 import {Error} from '../../components/ui/Error';
 import {Header} from '../../components/ui/Header';
@@ -169,7 +169,6 @@ export const IssuersScreen: React.FC<
   if (controller.loadingReason) {
     return (
       <Loader
-        isVisible
         title={t('loaders.loading')}
         subTitle={t(`loaders.subTitle.${controller.loadingReason}`)}
         progress

diff --git a/screens/Scan/ScanLayout.tsx b/screens/Scan/ScanLayout.tsx
@@ -9,13 +9,30 @@ import {SCAN_ROUTES} from '../../routes/routesConstants';
 import {SharingSuccessModal} from './SuccessfullySharedModal';
 import {Theme} from '../../components/ui/styleUtils';
 import {Icon} from 'react-native-elements';
+import {Loader} from '../../components/ui/Loader';
 
 const ScanStack = createNativeStackNavigator();
 
 export const ScanLayout: React.FC = () => {
   const {t} = useTranslation('ScanScreen');
   const controller = useScanLayout();
 
+  if (controller.statusOverlay != null && !controller.isAccepted) {
+    return (
+      <Loader
+        title={controller.statusOverlay?.title}
+        hint={controller.statusOverlay?.hint}
+        onCancel={controller.statusOverlay?.onButtonPress}
+        onStayInProgress={controller.statusOverlay?.onStayInProgress}
+        isHintVisible={controller.isStayInProgress}
+        isBleErrorVisible={controller.isBleError}
+        onRetry={controller.statusOverlay?.onRetry}
+        progress={controller.statusOverlay?.progress}
+        requester={controller.statusOverlay?.requester}
+      />
+    );
+  }
+
   return (
     <React.Fragment>
       <ScanStack.Navigator initialRouteName="ScanScreen">
@@ -46,19 +63,6 @@ export const ScanLayout: React.FC = () => {
         />
       </ScanStack.Navigator>
 
-      <ProgressingModal
-        isVisible={controller.statusOverlay != null && !controller.isAccepted}
-        title={controller.statusOverlay?.title}
-        hint={controller.statusOverlay?.hint}
-        onCancel={controller.statusOverlay?.onButtonPress}
-        onStayInProgress={controller.statusOverlay?.onStayInProgress}
-        isHintVisible={controller.isStayInProgress}
-        isBleErrorVisible={controller.isBleError}
-        onRetry={controller.statusOverlay?.onRetry}
-        progress={controller.statusOverlay?.progress}
-        requester={controller.statusOverlay?.requester}
-      />
-
       <SharingSuccessModal
         isVisible={controller.isAccepted}
         testId={'sharingSuccessModal'}

diff --git a/screens/Scan/ScanLayoutController.ts b/screens/Scan/ScanLayoutController.ts
@@ -133,19 +133,11 @@ export function useScanLayout() {
       onButtonPress: CANCEL,
       progress: true,
     };
-  } else if (isSent) {
-    statusOverlay = {
-      message: t('status.sent'),
-      hint: t('status.sentHint'),
-      progress: false,
-      onButtonPress: CANCEL,
-    };
-  } else if (isSendingVc) {
+  } else if (isSendingVc || isSent) {
     statusOverlay = {
       title: t('status.sharing.title'),
       hint: t('status.sharing.hint'),
       progress: true,
-      onButtonPress: CANCEL,
     };
   } else if (isSendingVcTimeout) {
     statusOverlay = {