feat(INJI-299): add cancel confirmation dialog in otp screen

Signed-off-by: Pooja Babusingh <[email protected]>
tw-mosip · Oct 18, 2023 · 50583ef · 50583ef
1 parent c2486b2
commit 50583ef
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 13 deletions.
diff --git 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<AddVcModalProps> = (props) => {
-  const { t } = useTranslation('AddVcModal');
+export const AddVcModal: React.FC<AddVcModalProps> = props => {
+  const {t} = useTranslation('AddVcModal');
   const controller = useAddVcModal(props);
 
   return (
@@ -22,7 +23,7 @@ export const AddVcModal: React.FC<AddVcModalProps> = (props) => {
 
       <OtpVerificationModal
         isVisible={controller.isAcceptingOtpInput}
-        onDismiss={controller.DISMISS}
+        onDismiss={controller.CANCEL_DOWNLOAD}
         onInputDone={controller.INPUT_OTP}
         error={controller.otpError}
         resend={controller.RESEND_OTP}
@@ -33,6 +34,16 @@ export const AddVcModal: React.FC<AddVcModalProps> = (props) => {
         title={t('requestingCredential')}
         progress
       />
+
+      <ConfirmationDialog
+        isVisible={controller.isDownloadCancelled}
+        title={t('confirmationDialog.title')}
+        message={t('confirmationDialog.message')}
+        waitButtonText={t('confirmationDialog.wait')}
+        onWaitButtonPress={controller.WAIT}
+        cancelButtonText={t('confirmationDialog.cancel')}
+        onCancelButtonPress={controller.CANCEL}
+      />
     </React.Fragment>
   );
 };
diff --git a/screens/Home/MyVcs/AddVcModalController.ts b/screens/Home/MyVcs/AddVcModalController.ts
@@ -1,28 +1,36 @@
-import { useSelector } from '@xstate/react';
-import { ActorRefFrom } from 'xstate';
+import {useSelector} from '@xstate/react';
+import {ActorRefFrom} from 'xstate';
 import {
   AddVcModalEvents,
   AddVcModalMachine,
   selectIsAcceptingOtpInput,
   selectIsRequestingCredential,
   selectOtpError,
   selectIsAcceptingIdInput,
+  selectIsCancellingDownload,
 } from './AddVcModalMachine';
 
-export function useAddVcModal({ service }: AddVcModalProps) {
+export function useAddVcModal({service}: AddVcModalProps) {
   return {
     isRequestingCredential: useSelector(service, selectIsRequestingCredential),
 
     otpError: useSelector(service, selectOtpError),
 
     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
@@ -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
@@ -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);
+      },
     },
   },
 );