fix(Inji-290): Modified share timeout hint as per wireframe (#800)

* fix(INJI-290): modified-share-timeout-hint-as-per-wireframe

* Updated the locals with respective texts in progressing screen
This commit is contained in:
Anil kumar M
2023-09-11 12:47:05 +05:30
committed by GitHub
parent d5be3a89d5
commit 0417a2523f
16 changed files with 84 additions and 20 deletions

View File

@@ -108,6 +108,8 @@ export interface MessageOverlayProps {
requester?: boolean;
hint?: string;
onCancel?: () => void;
onStayInProgress?: () => void;
onRetry?: () => void;
onBackdropPress?: () => void;
onShow?: () => void;
}

View File

@@ -33,30 +33,38 @@ export const ProgressingModal: React.FC<ProgressingModalProps> = (props) => {
/>
{props.progress && (
<PaginationDot
activeDotColor={'black'}
activeDotColor={Theme.Colors.LoadingDetailsLabel}
curPage={curPage}
maxPage={3}
/>
)}
</Column>
<Column style={{ display: props.hint ? 'flex' : 'none' }}>
{props.isHintVisible && (
<Column style={Theme.SelectVcOverlayStyles.timeoutHintContainer}>
<Text
align="center"
color={Theme.Colors.TimoutText}
margin="10"
color={Theme.Colors.TimoutHintText}
size="small"
style={Theme.TextStyles.bold}>
{props.hint}
</Text>
{props.onCancel && (
{props.onStayInProgress && (
<Button
type="clear"
title={t('common:cancel')}
onPress={props.onCancel}
title={t('status.stayOnTheScreen')}
onPress={props.onStayInProgress}
/>
)}
{props.onRetry && (
<Button
type="clear"
title={t('status.retry')}
onPress={props.onRetry}
/>
)}
</Column>
</Column>
)}
</Centered>
</Modal>
</React.Fragment>
@@ -65,11 +73,13 @@ export const ProgressingModal: React.FC<ProgressingModalProps> = (props) => {
export interface ProgressingModalProps {
isVisible: boolean;
isHintVisible: boolean;
title?: string;
label?: string;
hint?: string;
onCancel?: () => void;
onStayInProgress?: () => void;
onRetry?: () => void;
requester?: boolean;
progress?: boolean | number;
onBackdropPress?: () => void;
}

View File

@@ -28,7 +28,7 @@ const Colors = {
GradientColors: ['#F59B4B', '#E86E04'],
DisabledColors: ['#C7C7C7', '#C7C7C7'],
TimeoutHintBoxColor: '#FFF7E5',
TimoutText: '#8B6105',
TimoutHintText: '#8B6105',
resendCodeTimer: '#555555',
};
@@ -93,7 +93,7 @@ export const DefaultTheme = {
DisabledColors: Colors.DisabledColors,
getVidColor: Colors.Zambezi,
TimeoutHintBoxColor: Colors.TimeoutHintBoxColor,
TimoutText: Colors.TimoutText,
TimoutHintText: Colors.TimoutHintText,
walletbindingLabel: Colors.Black,
walletbindingContent: Colors.Gray40,
resendCodeTimer: Colors.resendCodeTimer,

View File

@@ -30,7 +30,7 @@ const Colors = {
Purple: '#70308C',
LightPurple: '#AEA7FF',
TimeoutHintBoxColor: '#FFF7E5',
TimoutText: '#8B6105',
TimoutHintText: '#8B6105',
resendCodeTimer: '#555555',
};
@@ -95,7 +95,7 @@ export const PurpleTheme = {
DisabledColors: Colors.DisabledColors,
getVidColor: Colors.Zambezi,
TimeoutHintBoxColor: Colors.TimeoutHintBoxColor,
TimoutText: Colors.TimoutText,
TimoutHintText: Colors.TimoutHintText,
walletbindingLabel: Colors.Black,
walletbindingContent: Colors.Gray40,
resendCodeTimer: Colors.resendCodeTimer,

View File

@@ -450,6 +450,8 @@
"establishingConnection": "اجراء اتصال",
"sharingInProgress": "جاري المشاركة",
"connectingTimeout": "يستغرق إنشاء الاتصال بعض الوقت. هل الجهاز الآخر مفتوح للاتصالات؟",
"stayOnTheScreen": "البقاء على الشاشة",
"retry": "أعد المحاولة",
"exchangingDeviceInfo": "تبادل معلومات الجهاز ...",
"exchangingDeviceInfoTimeout": "يستغرق الأمر بعض الوقت لتبادل معلومات الجهاز. قد تضطر إلى إعادة الاتصال.",
"invalid": "رمز الاستجابة السريعة غير صالح",

View File

@@ -450,6 +450,8 @@
"establishingConnection": "Establishing connection",
"sharingInProgress": "Sharing in Progress",
"connectingTimeout": "It's taking a while to establish the connection. Is the other device open for connections?",
"stayOnTheScreen": "Stay on the screen",
"retry": "Retry",
"exchangingDeviceInfo": "Exchanging device info...",
"exchangingDeviceInfoTimeout": "It's taking a while to exchange device info. You may have to reconnect.",
"invalid": "Invalid QR Code",

View File

@@ -454,6 +454,8 @@
"establishingConnection": "Pagtatatag ng Koneksyon",
"sharingInProgress": "Isinasagawa ang pagbabahagi",
"connectingTimeout": "Ito ay tumatagal ng ilang sandali upang maitaguyod ang koneksyon. Bukas ba ang ibang device para sa mga koneksyon?",
"stayOnTheScreen": "Manatili sa screen",
"retry": "Subukan muli",
"exchangingDeviceInfo": "Nagpapalitan ng impormasyon ng device...",
"exchangingDeviceInfoTimeout": "Medyo nagtatagal ang palitan ng impormasyon ng device. Maaaring kailanganin mong kumonekta muli.",
"invalid": "Di-wastong QR Code",

View File

@@ -14,7 +14,7 @@
"QRLOGIN_SUCCESFULL": "क्यूआरलॉगिन सफल",
"WALLET_BINDING_SUCCESSFULL": "सक्रियण सफल",
"WALLET_BINDING_FAILURE": "सक्रियकरण असफल",
"VC_REMOVED":"वॉलेट से हटाया गया"
"VC_REMOVED": "वॉलेट से हटाया गया"
},
"DeviceInfoList": {
"requestedBy": "द्वारा अनुरोध किया गया",
@@ -443,12 +443,15 @@
"storageLimitReached": {
"title": "अपर्याप्त ऐपडाटा",
"message": "ऐपडेटा भरा होने के कारण आप कार्ड साझा नहीं कर सकते। आगे बढ़ने के लिए ऐपडेटा साफ़ करें।"
},
}
},
"status": {
"inProgress": "चालू",
"establishingConnection": "संपर्क स्थापित करना",
"sharingInProgress": "साझाकरण प्रगति पर है",
"connectingTimeout": "कनेक्शन स्थापित करने में कुछ समय लग रहा है। क्या अन्य डिवाइस कनेक्शन के लिए खुला है?",
"stayOnTheScreen": "स्क्रीन पर बने रहें",
"retry": "पुन: प्रयास करें",
"exchangingDeviceInfo": "डिवाइस की जानकारी का आदान-प्रदान करना...",
"exchangingDeviceInfoTimeout": "डिवाइस की जानकारी का आदान-प्रदान करने में कुछ समय लग रहा है। आपको फिर से कनेक्ट करना पड़ सकता है।",
"invalid": "अमान्य क्यूआर कोड",
@@ -474,7 +477,6 @@
"message": "कार्ड को स्थानांतरित करते समय कुछ गलत हो गया। कृपया पुन: प्रयास करें।"
}
}
}
},
"SelectVcOverlay": {
"header": "शेयर कार्ड",
@@ -562,4 +564,4 @@
"description": "कृपया ऐप को अनलॉक करने के लिए फिंगरप्रिंट का उपयोग करें"
}
}
}
}

View File

@@ -448,6 +448,8 @@
"establishingConnection": "ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದು",
"sharingInProgress": "ಹಂಚಿಕೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ",
"connectingTimeout": "ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇತರ ಸಾಧನವು ಸಂಪರ್ಕಗಳಿಗಾಗಿ ತೆರೆದಿದೆಯೇ?",
"stayOnTheScreen": "ಪರದೆಯ ಮೇಲೆ ಇರಿ",
"retry": "ಮರುಪ್ರಯತ್ನಿಸಿ",
"exchangingDeviceInfo": "ಸಾಧನದ ಮಾಹಿತಿಯನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ...",
"exchangingDeviceInfoTimeout": "ಸಾಧನದ ಮಾಹಿತಿಯನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿದೆ. ನೀವು ಮರುಸಂಪರ್ಕಿಸಬೇಕಾಗಬಹುದು.",
"invalid": "ಅಮಾನ್ಯವಾದ QR ಕೋಡ್",

View File

@@ -383,6 +383,8 @@
"status": {
"connecting": "Conectando...",
"connectingTimeout": "Está tomando tiempo establecer la conexión. ¿El otro dispositivo está abierto para conexiones?",
"stayOnTheScreen": "Quédate en la pantalla",
"retry": "Rever",
"exchangingDeviceInfo": "Intercambiando información del dispositivo...",
"exchangingDeviceInfoTimeout": "Está tomando tiempo intercambiar la información del dispositivo. Es posible que tengas que reconectar.",
"invalid": "Código QR inválido",

View File

@@ -448,6 +448,8 @@
"establishingConnection": "இணைப்பை நிறுவுதல்",
"sharingInProgress": "பகிர்தல் செயல்பாட்டில் உள்ளது",
"connectingTimeout": "இணைப்பை ஏற்படுத்த சிறிது நேரம் ஆகும். மற்ற சாதனம் இணைப்புகளுக்குத் திறந்திருக்கிறதா?",
"stayOnTheScreen": "திரையில் இருங்கள்",
"retry": "மீண்டும் முயற்சிக்கவும்",
"exchangingDeviceInfo": "சாதனத் தகவலைப் பரிமாறிக் கொள்கிறது...",
"exchangingDeviceInfoTimeout": "சாதனத் தகவலைப் பரிமாறிக்கொள்ள சிறிது நேரம் ஆகும். நீங்கள் மீண்டும் இணைக்க வேண்டியிருக்கலாம்.",
"invalid": "தவறான QR குறியீடு",

View File

@@ -52,6 +52,7 @@ const model = createModel(
receiverInfo: {} as DeviceInfo,
selectedVc: {} as VC,
bleError: {} as BLEError,
stayInProgress: false,
createdVp: null as VC,
reason: '',
loggers: [] as EmitterSubscription[],
@@ -73,6 +74,8 @@ const model = createModel(
VC_REJECTED: () => ({}),
VC_SENT: () => ({}),
CANCEL: () => ({}),
STAY_IN_PROGRESS: () => ({}),
RETRY: () => ({}),
DISMISS: () => ({}),
CONNECTED: () => ({}),
DISCONNECT: () => ({}),
@@ -437,15 +440,23 @@ export const scanMachine =
after: {
CONNECTION_TIMEOUT: {
target: '#scan.connecting.timeout',
actions: [],
actions: 'setStayInProgress',
internal: false,
},
},
},
timeout: {
on: {
STAY_IN_PROGRESS: {
actions: 'setStayInProgress',
},
CANCEL: {
target: '#scan.reviewing.cancelling',
actions: 'setCloseTimeoutHint',
},
RETRY: {
target: '#scan.reviewing.cancelling',
actions: 'setCloseTimeoutHint',
},
},
},
@@ -820,6 +831,14 @@ export const scanMachine =
),
}),
setStayInProgress: assign({
stayInProgress: (context) => !context.stayInProgress,
}),
setCloseTimeoutHint: assign({
stayInProgress: (context) => (context.stayInProgress = false),
}),
resetShouldVerifyPresence: assign({
selectedVc: (context) => ({
...context.selectedVc,

View File

@@ -93,13 +93,14 @@ export interface Typegen0 {
| 'SCREEN_BLUR'
| 'xstate.after(DESTROY_TIMEOUT)#scan.clearingConnection'
| 'xstate.init';
resetShouldVerifyPresence: 'CANCEL' | 'CONNECTED' | 'DISMISS';
resetShouldVerifyPresence: 'CANCEL' | 'CONNECTED' | 'DISMISS' | 'RETRY';
sendScanData: 'SCAN';
setBleError: 'BLE_ERROR';
setChildRef:
| 'DISCONNECT'
| 'DISMISS'
| 'xstate.after(DESTROY_TIMEOUT)#scan.clearingConnection';
setCloseTimeoutHint: 'CANCEL' | 'RETRY';
setCreatedVp: 'done.invoke.scan.reviewing.creatingVp:invocation[0]';
setLinkCode: 'SCAN';
setReadyForBluetoothStateCheck: 'BLUETOOTH_PERMISSION_ENABLED';
@@ -109,6 +110,9 @@ export interface Typegen0 {
setSenderInfo: 'CONNECTED';
setShareLogTypeUnverified: 'ACCEPT_REQUEST';
setShareLogTypeVerified: 'FACE_VALID';
setStayInProgress:
| 'STAY_IN_PROGRESS'
| 'xstate.after(CONNECTION_TIMEOUT)#scan.connecting.inProgress';
setUri: 'SCAN';
storeLoginItem: 'done.invoke.QrLogin';
storingActivityLog: 'STORE_RESPONSE';

View File

@@ -23,6 +23,10 @@ export function selectQrLoginRef(state: State) {
return state.context.QrLoginRef;
}
export function selectStayInProgress(state: State) {
return state.context.stayInProgress;
}
export function selectIsScanning(state: State) {
return state.matches('findingConnection');
}

View File

@@ -42,8 +42,10 @@ export const ScanLayout: React.FC = () => {
hint={controller.statusOverlay?.hint}
label={controller.statusOverlay?.message}
onCancel={controller.statusOverlay?.onCancel}
onStayInProgress={controller.statusOverlay?.onStayInProgress}
isHintVisible={controller.isStayInProgress}
onRetry={controller.statusOverlay?.onRetry}
progress={controller.statusOverlay?.progress}
onBackdropPress={controller.statusOverlay?.onBackdropPress}
requester={controller.statusOverlay?.requester}
/>

View File

@@ -18,6 +18,7 @@ import {
selectIsSent,
selectReceiverInfo,
selectIsDone,
selectStayInProgress,
} from '../../machines/bleShare/scan/selectors';
import {
selectIsAccepted,
@@ -91,12 +92,17 @@ export function useScanLayout() {
const isSendingVcTimeout = useSelector(scanService, selectIsSendingVcTimeout);
const onCancel = () => scanService.send(ScanEvents.CANCEL());
const onStayInProgress = () =>
scanService.send(ScanEvents.STAY_IN_PROGRESS());
const onRetry = () => scanService.send(ScanEvents.RETRY());
let statusOverlay: Pick<
MessageOverlayProps,
| 'title'
| 'message'
| 'hint'
| 'onCancel'
| 'onStayInProgress'
| 'onRetry'
| 'progress'
| 'onBackdropPress'
| 'requester'
@@ -112,6 +118,8 @@ export function useScanLayout() {
title: t('status.sharingInProgress'),
hint: t('status.connectingTimeout'),
onCancel,
onStayInProgress,
onRetry,
progress: true,
};
} else if (isExchangingDeviceInfo) {
@@ -218,6 +226,7 @@ export function useScanLayout() {
isDone,
isDisconnected: useSelector(scanService, selectIsDisconnected),
statusOverlay,
isStayInProgress: useSelector(scanService, selectStayInProgress),
DISMISS,
};
}