From 3b95b61d0f6bf3d4ee38d2ca1b4ba1191a4d7319 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Tue, 15 Nov 2022 18:28:50 +0530
Subject: [PATCH] bugfix #187

---
 locales/en.json                        |  16 +--
 screens/Home/MyVcs/GetIdInputModal.tsx | 149 ++++++++++++++-----------
 screens/Home/MyVcs/IdInputModal.tsx    |   6 +
 3 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index d0b9ed382b..f91964e872 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -19,12 +19,12 @@
     "allowCameraButton": "Allow access to camera"
   },
   "VcDetails": {
-    "idType":"ID type",
-    "nationalCard":"National Identity Card",
+    "idType": "ID type",
+    "nationalCard": "National Identity Card",
     "generatedOn": "Generated on",
-    "uin":"UIN",
-    "vid":"VID",
-    "idtype":"Idtype",
+    "uin": "UIN",
+    "vid": "VID",
+    "idtype": "Idtype",
     "status": "Status",
     "valid": "Valid",
     "photo": "Photo",
@@ -103,12 +103,14 @@
     "header": "Enter the MOSIP-provided UIN or VID of the {{vcLabel}} you wish to retrieve",
     "generateVc": "Generate {{vcLabel}}",
     "enterId": "Enter your {{idType}}",
-    "noUIN/VID": "Don't have your UIN/VID? Get it here"
+    "noUIN/VID": "Don't have your UIN/VID? Get it here",
+    "requestingOTP": "Requesting OTP..."
   },
   "GetIdInputModal": {
     "header": "To retrieve your UIN or VID, enter your Application {{vcLabel}} number",
     "getUIN": "Get UIN/VID",
     "applicationId": "Application {{vcLabel}} number",
+    "requestingOTP": "Requesting OTP...",
     "qstnMarkToolTip" : "Application {{vcLabel}} Number is printed on the acknowledgment provided after enrollment"
   },
   "OtpVerificationModal": {
@@ -292,4 +294,4 @@
       "allowAccess": "Allow access to camera"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/screens/Home/MyVcs/GetIdInputModal.tsx b/screens/Home/MyVcs/GetIdInputModal.tsx
index 1b04057790..f8acc2d38b 100644
--- a/screens/Home/MyVcs/GetIdInputModal.tsx
+++ b/screens/Home/MyVcs/GetIdInputModal.tsx
@@ -8,7 +8,9 @@ import {
   GetIdInputModalProps,
   useGetIdInputModal,
 } from './GetIdInputModalController';
+import { KeyboardAvoidingView, Platform } from 'react-native';
 import { useTranslation } from 'react-i18next';
+import { MessageOverlay } from '../../../components/MessageOverlay';
 
 export const GetIdInputModal: React.FC<GetIdInputModalProps> = (props) => {
   const { t } = useTranslation('GetIdInputModal');
@@ -20,74 +22,87 @@ export const GetIdInputModal: React.FC<GetIdInputModalProps> = (props) => {
 
   return (
     <Modal onDismiss={props.onDismiss} isVisible={props.isVisible}>
-      <Column fill align="space-between" padding="32 24">
-        <Text align="center">
-          {t('header', { vcLabel: controller.vcLabel.singular })}
-        </Text>
-        <Column>
-          <Row crossAlign="flex-end">
-            <Column fill>
-              <Input
-                placeholder={!controller.id ? inputLabel : ''}
-                label={controller.id ? inputLabel : ''}
-                labelStyle={{
-                  color: controller.isInvalid
-                    ? Theme.Colors.errorMessage
-                    : Theme.Colors.textValue,
-                }}
-                style={Theme.Styles.placeholder}
-                value={controller.id}
-                keyboardType="number-pad"
-                rightIcon={
-                  <Tooltip
-                    popover={
-                      <Text>
-                        {t('qstnMarkToolTip', {
-                          vcLabel: controller.vcLabel.singular,
-                        })}
-                      </Text>
-                    }
-                    width={Dimensions.get('screen').width * 0.8}
-                    height={Dimensions.get('screen').height * 0.2}
-                    backgroundColor={'lightgray'}
-                    withPointer={true}
-                    skipAndroidStatusBar={true}
-                    onOpen={controller.ACTIVATE_ICON_COLOR}
-                    onClose={controller.DEACTIVATE_ICON_COLOR}>
-                    {controller.isInvalid ? (
-                      <Icon
-                        name="error"
-                        size={18}
-                        color={
-                          !controller.iconColor
-                            ? Theme.Colors.errorMessage
-                            : Theme.Colors.Icon
-                        }
-                      />
-                    ) : (
-                      <Icon
-                        name={'help'}
-                        size={18}
-                        color={!controller.iconColor ? null : Theme.Colors.Icon}
-                      />
-                    )}
-                  </Tooltip>
-                }
-                errorStyle={{ color: Theme.Colors.errorMessage }}
-                errorMessage={controller.idError}
-                onChangeText={controller.INPUT_ID}
-                ref={(node) => !controller.idInputRef && controller.READY(node)}
-              />
-            </Column>
-          </Row>
-          <Button
-            title={t('getUIN', { vcLabel: controller.vcLabel.singular })}
-            margin="24 0 0 0"
-            onPress={controller.VALIDATE_INPUT}
-            loading={controller.isRequestingOtp}
-          />
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <Column fill align="space-between" padding="32 24">
+          <Text align="center">
+            {t('header', { vcLabel: controller.vcLabel.singular })}
+          </Text>
+          <Column>
+            <Row crossAlign="flex-end">
+              <Column fill>
+                <Input
+                  placeholder={!controller.id ? inputLabel : ''}
+                  label={controller.id ? inputLabel : ''}
+                  labelStyle={{
+                    color: controller.isInvalid
+                      ? Theme.Colors.errorMessage
+                      : Theme.Colors.textValue,
+                  }}
+                  style={Theme.Styles.placeholder}
+                  value={controller.id}
+                  keyboardType="number-pad"
+                  rightIcon={
+                    <Tooltip
+                      popover={
+                        <Text>
+                          {t('qstnMarkToolTip', {
+                            vcLabel: controller.vcLabel.singular,
+                          })}
+                        </Text>
+                      }
+                      width={Dimensions.get('screen').width * 0.8}
+                      height={Dimensions.get('screen').height * 0.2}
+                      backgroundColor={'lightgray'}
+                      withPointer={true}
+                      skipAndroidStatusBar={true}
+                      onOpen={controller.ACTIVATE_ICON_COLOR}
+                      onClose={controller.DEACTIVATE_ICON_COLOR}>
+                      {controller.isInvalid ? (
+                        <Icon
+                          name="error"
+                          size={18}
+                          color={
+                            !controller.iconColor
+                              ? Theme.Colors.errorMessage
+                              : Theme.Colors.Icon
+                          }
+                        />
+                      ) : (
+                        <Icon
+                          name={'help'}
+                          size={18}
+                          color={
+                            !controller.iconColor ? null : Theme.Colors.Icon
+                          }
+                        />
+                      )}
+                    </Tooltip>
+                  }
+                  errorStyle={{ color: Theme.Colors.errorMessage }}
+                  errorMessage={controller.idError}
+                  onChangeText={controller.INPUT_ID}
+                  ref={(node) =>
+                    !controller.idInputRef && controller.READY(node)
+                  }
+                />
+              </Column>
+            </Row>
+            <Button
+              title={t('getUIN', { vcLabel: controller.vcLabel.singular })}
+              margin="24 0 0 0"
+              onPress={controller.VALIDATE_INPUT}
+              loading={controller.isRequestingOtp}
+            />
+          </Column>
         </Column>
-      </Column>
+        <MessageOverlay
+          isVisible={controller.isRequestingOtp}
+          title={t('requestingOTP')}
+          progress
+        />
+      </KeyboardAvoidingView>
     </Modal>
   );
 };
diff --git a/screens/Home/MyVcs/IdInputModal.tsx b/screens/Home/MyVcs/IdInputModal.tsx
index 4cd147ead2..53bca65e4c 100644
--- a/screens/Home/MyVcs/IdInputModal.tsx
+++ b/screens/Home/MyVcs/IdInputModal.tsx
@@ -10,6 +10,7 @@ import { KeyboardAvoidingView, Platform, TextInput } from 'react-native';
 import { TouchableOpacity } from 'react-native';
 import { individualId } from '../../../shared/constants';
 import { GET_INDIVIDUAL_ID } from '../../../shared/constants';
+import { MessageOverlay } from '../../../components/MessageOverlay';
 
 export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
   const { t } = useTranslation('IdInputModal');
@@ -104,6 +105,11 @@ export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
             )}
           </Column>
         </Column>
+        <MessageOverlay
+          isVisible={controller.isRequestingOtp}
+          title={t('requestingOTP')}
+          progress
+        />
       </KeyboardAvoidingView>
     </Modal>
   );