Revert "revert(INJI-299): popup to cancel the download card"

This reverts commit 697947e.

Signed-off-by: Swati Goel <[email protected]>

locales/ara.json

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

locales/en.json

@@ -205,6 +205,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

@@ -203,6 +203,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

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

locales/kan.json

@@ -200,6 +200,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

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

screens/Home/MyVcs/AddVcModal.tsx

@@ -5,6 +5,7 @@ import {OtpVerificationModal} from './OtpVerificationModal';
 import {IdInputModal} from './IdInputModal';
 import {useTranslation} from 'react-i18next';
 import {GET_INDIVIDUAL_ID} from '../../../shared/constants';
+import {Button, Column} from '../../../components/ui';
 
 export const AddVcModal: React.FC<AddVcModalProps> = props => {
   const {t} = useTranslation('AddVcModal');
@@ -15,7 +16,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
     );
   };
 
@@ -34,7 +36,9 @@ export const AddVcModal: React.FC<AddVcModalProps> = props => {
       />
 
       <OtpVerificationModal
-        isVisible={controller.isAcceptingOtpInput}
+        isVisible={
+          controller.isAcceptingOtpInput || controller.isDownloadCancelled
+        }
         onDismiss={controller.DISMISS}
         onInputDone={controller.INPUT_OTP}
         error={controller.otpError}
@@ -46,6 +50,26 @@ export const AddVcModal: React.FC<AddVcModalProps> = props => {
         title={t('requestingCredential')}
         progress
       />
+
+      <MessageOverlay
+        isVisible={controller.isDownloadCancelled}
+        title={t('confirmationDialog.title')}
+        message={t('confirmationDialog.message')}
+        customHeight={250}>
+        <Column>
+          <Button
+            type="gradient"
+            title={t('confirmationDialog.wait')}
+            onPress={controller.WAIT}
+            margin={[0, 0, 8, 0]}
+          />
+          <Button
+            type="clear"
+            title={t('confirmationDialog.cancel')}
+            onPress={controller.CANCEL}
+          />
+        </Column>
+      </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

@@ -42,6 +42,8 @@ const model = createModel(
       VALIDATE_INPUT: () => ({}),
       READY: (idInputRef: TextInput) => ({idInputRef}),
       DISMISS: () => ({}),
+      CANCEL: () => ({}),
+      WAIT: () => ({}),
       SELECT_ID_TYPE: (idType: VcIdType) => ({idType}),
     },
   },
@@ -185,8 +187,7 @@ export const AddVcModalMachine =
               target: 'requestingCredential',
             },
             DISMISS: {
-              actions: 'resetIdInputRef',
-              target: 'acceptingIdInput',
+              target: 'cancelDownload',
             },
             RESEND_OTP: {
               target: '.resendOTP',
@@ -213,6 +214,16 @@ export const AddVcModalMachine =
             },
           },
         },
+        cancelDownload: {
+          on: {
+            CANCEL: {
+              actions: ['resetIdInputRef', 'forwardToParent'],
+            },
+            WAIT: {
+              target: 'acceptingOtpInput',
+            },
+          },
+        },
         requestingCredential: {
           invoke: {
             src: 'requestCredential',
@@ -366,7 +377,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(
             API_URLS.credentialRequest.method,
             API_URLS.credentialRequest.buildURL(),
@@ -439,3 +449,7 @@ export function selectIsRequestingOtp(state: State) {
 export function selectIsRequestingCredential(state: State) {
   return state.matches('requestingCredential');
 }
+
+export function selectIsCancellingDownload(state: State) {
+  return state.matches('cancelDownload');
+}