From 50583ef3f50b17222b7244d8f5834c48cc3de754 Mon Sep 17 00:00:00 2001 From: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:48:23 +0530 Subject: [PATCH] feat(INJI-299): add cancel confirmation dialog in otp screen Signed-off-by: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com> --- screens/Home/MyVcs/AddVcModal.tsx | 27 +++++++++++++------ screens/Home/MyVcs/AddVcModalController.ts | 14 +++++++--- screens/Home/MyVcs/AddVcModalMachine.ts | 31 +++++++++++++++++++++- screens/Home/MyVcsTabMachine.ts | 18 ++++++++++++- 4 files changed, 77 insertions(+), 13 deletions(-) diff --git a/screens/Home/MyVcs/AddVcModal.tsx b/screens/Home/MyVcs/AddVcModal.tsx index f67824bbb2..591cb8c735 100644 --- a/screens/Home/MyVcs/AddVcModal.tsx +++ b/screens/Home/MyVcs/AddVcModal.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { MessageOverlay } from '../../../components/MessageOverlay'; -import { AddVcModalProps, useAddVcModal } from './AddVcModalController'; -import { OtpVerificationModal } from './OtpVerificationModal'; -import { IdInputModal } from './IdInputModal'; -import { useTranslation } from 'react-i18next'; +import {MessageOverlay} from '../../../components/MessageOverlay'; +import {AddVcModalProps, useAddVcModal} from './AddVcModalController'; +import {OtpVerificationModal} from './OtpVerificationModal'; +import {IdInputModal} from './IdInputModal'; +import {useTranslation} from 'react-i18next'; +import {ConfirmationDialog} from '../../../components/ConfrimationDialog'; -export const AddVcModal: React.FC = (props) => { - const { t } = useTranslation('AddVcModal'); +export const AddVcModal: React.FC = props => { + const {t} = useTranslation('AddVcModal'); const controller = useAddVcModal(props); return ( @@ -22,7 +23,7 @@ export const AddVcModal: React.FC = (props) => { = (props) => { title={t('requestingCredential')} progress /> + + ); }; diff --git a/screens/Home/MyVcs/AddVcModalController.ts b/screens/Home/MyVcs/AddVcModalController.ts index f7be021758..dba0165f42 100644 --- a/screens/Home/MyVcs/AddVcModalController.ts +++ b/screens/Home/MyVcs/AddVcModalController.ts @@ -1,5 +1,5 @@ -import { useSelector } from '@xstate/react'; -import { ActorRefFrom } from 'xstate'; +import {useSelector} from '@xstate/react'; +import {ActorRefFrom} from 'xstate'; import { AddVcModalEvents, AddVcModalMachine, @@ -7,9 +7,10 @@ import { selectIsRequestingCredential, selectOtpError, selectIsAcceptingIdInput, + selectIsCancellingDownload, } from './AddVcModalMachine'; -export function useAddVcModal({ service }: AddVcModalProps) { +export function useAddVcModal({service}: AddVcModalProps) { return { isRequestingCredential: useSelector(service, selectIsRequestingCredential), @@ -17,12 +18,19 @@ export function useAddVcModal({ service }: AddVcModalProps) { isAcceptingUinInput: useSelector(service, selectIsAcceptingIdInput), isAcceptingOtpInput: useSelector(service, selectIsAcceptingOtpInput), + isDownloadCancelled: useSelector(service, selectIsCancellingDownload), INPUT_OTP: (otp: string) => service.send(AddVcModalEvents.INPUT_OTP(otp)), RESEND_OTP: () => service.send(AddVcModalEvents.RESEND_OTP()), DISMISS: () => service.send(AddVcModalEvents.DISMISS()), + + CANCEL_DOWNLOAD: () => service.send(AddVcModalEvents.CANCEL_DOWNLOAD()), + + WAIT: () => service.send(AddVcModalEvents.WAIT()), + + CANCEL: () => service.send(AddVcModalEvents.CANCEL()), }; } diff --git a/screens/Home/MyVcs/AddVcModalMachine.ts b/screens/Home/MyVcs/AddVcModalMachine.ts index 31d399a8a5..05a4850139 100644 --- a/screens/Home/MyVcs/AddVcModalMachine.ts +++ b/screens/Home/MyVcs/AddVcModalMachine.ts @@ -33,6 +33,9 @@ const model = createModel( VALIDATE_INPUT: () => ({}), READY: (idInputRef: TextInput) => ({idInputRef}), DISMISS: () => ({}), + CANCEL: () => ({}), + WAIT: () => ({}), + CANCEL_DOWNLOAD: () => ({}), SELECT_ID_TYPE: (idType: VcIdType) => ({idType}), }, }, @@ -171,6 +174,10 @@ export const AddVcModalMachine = actions: 'setOtp', target: 'requestingCredential', }, + CANCEL_DOWNLOAD: { + actions: ['printContext'], + target: 'cancelDownload', + }, DISMISS: { actions: 'resetIdInputRef', target: 'acceptingIdInput', @@ -200,6 +207,18 @@ export const AddVcModalMachine = }, }, }, + cancelDownload: { + entry: 'printContext', + on: { + CANCEL: { + actions: 'resetIdInputRef', + target: 'confirmCancel', + }, + WAIT: { + target: 'acceptingOtpInput', + }, + }, + }, requestingCredential: { invoke: { src: 'requestCredential', @@ -226,6 +245,9 @@ export const AddVcModalMachine = type: 'final', data: context => new VCMetadata(context), }, + confirmCancel: { + type: 'final', + }, }, }, { @@ -317,6 +339,8 @@ export const AddVcModalMachine = clearOtp: assign({otp: ''}), + printContext: context => console.log('>>>>>>>>> context ', context), + focusInput: context => context.idInputRef.focus(), }, @@ -336,7 +360,7 @@ export const AddVcModalMachine = requestCredential: async context => { // force wait to fix issue with hanging overlay await new Promise(resolve => setTimeout(resolve, 1000)); - + console.log('>>>>>>>> start requestCredential ', context); const response = await request( 'POST', '/residentmobileapp/credentialshare/request', @@ -347,6 +371,7 @@ export const AddVcModalMachine = transactionID: context.transactionId, }, ); + console.log('>>>>> requestCredential ', response.response.requestId); return response.response.requestId; }, }, @@ -409,3 +434,7 @@ export function selectIsRequestingOtp(state: State) { export function selectIsRequestingCredential(state: State) { return state.matches('requestingCredential'); } + +export function selectIsCancellingDownload(state: State) { + return state.matches('cancelDownload'); +} diff --git a/screens/Home/MyVcsTabMachine.ts b/screens/Home/MyVcsTabMachine.ts index d6f19632c1..fb78181394 100644 --- a/screens/Home/MyVcsTabMachine.ts +++ b/screens/Home/MyVcsTabMachine.ts @@ -139,7 +139,15 @@ export const MyVcsTabMachine = model.createMachine( invoke: { id: 'AddVcModal', src: AddVcModalMachine, - onDone: '.storing', + onDone: [ + { + cond: 'isDownloadCancelled', + target: '#idle', + }, + { + target: '.storing', + }, + ], }, on: { DISMISS: 'idle', @@ -233,6 +241,14 @@ export const MyVcsTabMachine = model.createMachine( guards: { isMinimumStorageLimitReached: (_context, event) => Boolean(event.data), isNetworkOn: (_context, event) => Boolean(event.data), + isDownloadCancelled: (context, event) => { + console.log('>>>>>>>>>>>>>> isDownloadCancelledF', Boolean(event.data)); + console.log( + '>>>>>>>>>>>>>> isDownloadCancelledF 2222>>>>>>> ', + context, + ); + return !Boolean(event.data); + }, }, }, );