Fix sharing screen progress modal in IOS (#1005)

* fix(INJI-558): fix sharing screen progress modal in ios Signed-off-by: adityankannan-tw <109274996+adityankannan-tw@users.noreply.github.com> Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com> * fix(inji-558): remove isVisible prop from Loader Component. Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * refactor(INJI-558): refactor selectors to match the state Signed-off-by: adityankannan-tw <adityan.kannan@thoughtworks.com> * fix(inji-558): remove optional field for title prop. Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> --------- Signed-off-by: adityankannan-tw <109274996+adityankannan-tw@users.noreply.github.com> Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> Signed-off-by: adityankannan-tw <adityan.kannan@thoughtworks.com> Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>
2026-01-10 05:58:01 -05:00 · 2023-11-16 13:09:36 +05:30
parent e501f9f2a1
commit 69fc9e2dde
11 changed files with 69 additions and 45 deletions
--- 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;
--- 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": "اذهب الى المنزل"
      },
--- 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"
      },
--- 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"
      },
--- 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": "घर जाओ"
      },
--- 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": "ಮನೆಗೆ ಹೋಗು"
      },
--- 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": "வீட்டிற்கு போ"
      },
--- 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) {
--- 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
--- a/screens/Scan/ScanLayout.tsx
+++ b/screens/Scan/ScanLayout.tsx
@@ -9,6 +9,7 @@ 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();

@@ -16,6 +17,22 @@ 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'}
--- 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 = {