popup to cancel the download card

locales/ara.json

@@ -202,6 +202,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "جارٍ طلب بيانات الاعتماد...",
+    "confirmationDialog": {
+      "title": "هل تريد إلغاء التنزيل؟",
+      "message": "بمجرد الإلغاء، لن يتم تنزيل بطاقتك وستحتاج إلى إعادة بدء التنزيل.",
+      "wait": "لا، سأنتظر",
+      "cancel": "نعم، إلغاء"
+    },
     "errors": {
       "input": {
         "empty": "فارغًا",

locales/en.json

@@ -209,6 +209,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "Requesting credential...",
+    "confirmationDialog": {
+      "title": "Do you want to cancel downloading?",
+      "message": "Once cancelled, your card will not be downloaded and you need to reinitiate the download.",
+      "wait": "No, I’ll wait",
+      "cancel": "Yes, Cancel"
+    },
     "errors": {
       "input": {
         "empty": "The input cannot be empty",

locales/fil.json

@@ -201,6 +201,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "Humihiling ng kredensyal...",
+    "confirmationDialog": {
+      "title": "Gusto mo bang kanselahin ang pag-download?",
+      "message": "Kapag nakansela, hindi na mada-download ang iyong card at kailangan mong simulan muli ang pag-download.",
+      "wait": "Hindi, maghihintay ako",
+      "cancel": "Oo, Kanselahin"
+    },
     "errors": {
       "input": {
         "empty": "Hindi maaaring walang laman ang input",

locales/hin.json

@@ -200,6 +200,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "क्रेडेंशियल का अनुरोध कर रहा है...",
+    "confirmationDialog": {
+      "title": "क्या आप डाउनलोडिंग रद्द करना चाहते हैं?",
+      "message": "एक बार रद्द होने पर, आपका कार्ड डाउनलोड नहीं किया जाएगा और आपको डाउनलोड फिर से शुरू करना होगा।",
+      "wait": "नहीं, मैं इंतजार करूंगा",
+      "cancel": "हाँ, रद्द करें"
+    },
     "errors": {
       "input": {
         "empty": "इनपुट खाली नहीं हो सकता",

locales/kan.json

@@ -198,6 +198,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "ರುಜುವಾತುಗಳನ್ನು ವಿನಂತಿಸಲಾಗುತ್ತಿದೆ...",
+    "confirmationDialog": {
+      "title": "ನೀವು ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದನ್ನು ರದ್ದುಗೊಳಿಸಲು ಬಯಸುವಿರಾ?",
+      "message": "ಒಮ್ಮೆ ರದ್ದುಗೊಳಿಸಿದರೆ, ನಿಮ್ಮ ಕಾರ್ಡ್ ಡೌನ್‌ಲೋಡ್ ಆಗುವುದಿಲ್ಲ ಮತ್ತು ನೀವು ಡೌನ್‌ಲೋಡ್ ಅನ್ನು ಮರುಪ್ರಾರಂಭಿಸಬೇಕಾಗುತ್ತದೆ.",
+      "wait": "ಇಲ್ಲ, ನಾನು ಕಾಯುತ್ತೇನೆ",
+      "cancel": "ಹೌದು, ರದ್ದುಮಾಡಿ"
+    },
     "errors": {
       "input": {
         "empty": "ಇನ್‌ಪುಟ್ ಖಾಲಿ ಇರುವಂತಿಲ್ಲ",

locales/spa.json

@@ -117,6 +117,12 @@
 	},
 	"AddVcModal": {
 		"requestingCredential": "Solicitando credencial...",
+    "confirmationDialog": {
+      "title": "Quieres cancelar la descarga?",
+      "message": "OUna vez cancelada, su tarjeta no se descargará y deberá reiniciar la descarga.",
+      "wait": "No, esperaré",
+      "cancel": "Sí, cancelar"
+    },
 		"errors": {
 			"input": {
 				"empty": "El campo no puede estar vacío",

locales/tam.json

@@ -198,6 +198,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "நற்சான்றிதழைக் கோருகிறது...",
+    "confirmationDialog": {
+      "title": "பதிவிறக்குவதை ரத்துசெய்ய விரும்புகிறீர்களா?",
+      "message": "ரத்துசெய்யப்பட்டதும், உங்கள் கார்டு பதிவிறக்கம் செய்யப்படாது மேலும் நீங்கள் பதிவிறக்கத்தை மீண்டும் தொடங்க வேண்டும்.",
+      "wait": "இல்லை, நான் காத்திருப்பேன்",
+      "cancel": "ஆம், ரத்துசெய்"
+    },
     "errors": {
       "input": {
         "empty": "உள்ளீடு காலியாக இருக்க முடியாது",

screens/Home/MyVcs/AddVcModal.tsx

@@ -15,7 +15,8 @@ export const AddVcModal: React.FC<AddVcModalProps> = props => {
       GET_INDIVIDUAL_ID({id: '', idType: 'UIN'});
     }
     return (
-      !controller.isAcceptingOtpInput && !controller.isRequestingCredential
+      (!controller.isAcceptingOtpInput && !controller.isRequestingCredential) ||
+      !controller.isDownloadCancelled
     );
   };
 
@@ -46,6 +47,26 @@ export const AddVcModal: React.FC<AddVcModalProps> = props => {
         title={t('requestingCredential')}
         progress
       />
+
+      <MessageOverlay
+        isVisible={controller.isDownloadCancelled}
+        title={t('confirmationDialog.title')}
+        message={t('confirmationDialog.message')}>
+        <Row>
+          <Button
+            fill
+            type="clear"
+            title={t('confirmationDialog.wait')}
+            onPress={controller.WAIT}
+            margin={[0, 8, 0, 0]}
+          />
+          <Button
+            fill
+            title={t('confirmationDialog.cancel')}
+            onPress={controller.CANCEL}
+          />
+        </Row>
+      </MessageOverlay>
     </React.Fragment>
   );
 };

screens/Home/MyVcs/AddVcModalController.ts

@@ -1,28 +1,34 @@
-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()),
+
+    WAIT: () => service.send(AddVcModalEvents.WAIT()),
+
+    CANCEL: () => service.send(AddVcModalEvents.CANCEL()),
   };
 }
 

screens/Home/MyVcs/AddVcModalMachine.ts

@@ -41,6 +41,8 @@ const model = createModel(
       VALIDATE_INPUT: () => ({}),
       READY: (idInputRef: TextInput) => ({idInputRef}),
       DISMISS: () => ({}),
+      CANCEL: () => ({}),
+      WAIT: () => ({}),
       SELECT_ID_TYPE: (idType: VcIdType) => ({idType}),
     },
   },
@@ -184,8 +186,7 @@ export const AddVcModalMachine =
               target: 'requestingCredential',
             },
             DISMISS: {
-              actions: 'resetIdInputRef',
-              target: 'acceptingIdInput',
+              target: 'cancelDownload',
             },
             RESEND_OTP: {
               target: '.resendOTP',
@@ -212,6 +213,16 @@ export const AddVcModalMachine =
             },
           },
         },
+        cancelDownload: {
+          on: {
+            CANCEL: {
+              actions: ['resetIdInputRef', 'forwardToParent'],
+            },
+            WAIT: {
+              target: 'acceptingOtpInput',
+            },
+          },
+        },
         requestingCredential: {
           invoke: {
             src: 'requestCredential',
@@ -361,7 +372,6 @@ export const AddVcModalMachine =
         requestCredential: async context => {
           // force wait to fix issue with hanging overlay
           await new Promise(resolve => setTimeout(resolve, 1000));
-
           const response = await request(
             'POST',
             '/residentmobileapp/credentialshare/request',
@@ -434,3 +444,7 @@ export function selectIsRequestingOtp(state: State) {
 export function selectIsRequestingCredential(state: State) {
   return state.matches('requestingCredential');
 }
+
+export function selectIsCancellingDownload(state: State) {
+  return state.matches('cancelDownload');
+}