popup to cancel the download card (#944)

* feat(INJI-299): add popup component Signed-off-by: Sreenadh S <[email protected]> * feat(INJI-299): add language translations for the cancel dialog textfeilds Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): refactor confirmation dialog props Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): add cancel confirmation dialog in otp screen Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): refactor confirmation dialog flow Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): remove console logs Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): style confirmation dialog elements Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): refactor the cancel flow Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): refactor to show id modal when in not cancel download state Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-299): replace confirmation dialog with message overlay Signed-off-by: Pooja Babusingh <[email protected]> --------- Signed-off-by: Sreenadh S <[email protected]> Signed-off-by: Pooja Babusingh <[email protected]> Signed-off-by: PoojaBabusing <[email protected]> Co-authored-by: Sreenadh S <[email protected]> Co-authored-by: Pooja Babusingh <[email protected]>
mosip · Oct 20, 2023 · 3a8e2cc · 3a8e2cc
1 parent 142228b
commit 3a8e2cc
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 7 deletions.
diff --git a/locales/ara.json b/locales/ara.json
@@ -202,6 +202,12 @@
   },
   "AddVcModal": {
     "requestingCredential": "جارٍ طلب بيانات الاعتماد...",
+    "confirmationDialog": {
+      "title": "هل تريد إلغاء التنزيل؟",
+      "message": "بمجرد الإلغاء، لن يتم تنزيل بطاقتك وستحتاج إلى إعادة بدء التنزيل.",
+      "wait": "لا، سأنتظر",
+      "cancel": "نعم، إلغاء"
+    },
     "errors": {
       "input": {
         "empty": "فارغًا",

diff --git a/locales/en.json b/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",

diff --git a/locales/fil.json b/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",

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

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

diff --git a/locales/spa.json b/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",

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

diff --git a/screens/Home/MyVcs/AddVcModal.tsx b/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>
   );
 };
diff --git a/screens/Home/MyVcs/AddVcModalController.ts b/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()),
   };
 }
 

diff --git a/screens/Home/MyVcs/AddVcModalMachine.ts b/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');
+}