Merge pull request #236 from srikanth716/bugfix158

bugfix#158
idpass · Nov 11, 2022 · 60d5172 · 60d5172
2 parents 67e5b47 + c34d84b
commit 60d5172
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 9 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -108,7 +108,8 @@
   "GetIdInputModal": {
     "header": "To retrieve your UIN or VID, enter your Application {{vcLabel}} number",
     "getUIN": "Get UIN/VID",
-    "applicationId": "Application {{vcLabel}} number"
+    "applicationId": "Application {{vcLabel}} number",
+    "qstnMarkToolTip" : "Application {{vcLabel}} Number is printed on the acknowledgment provided after enrollment"
   },
   "OtpVerificationModal": {
     "enterOtp": "Enter the 6-digit verification code we sent you"

diff --git a/screens/Home/MyVcs/GetIdInputModal.tsx b/screens/Home/MyVcs/GetIdInputModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, Input } from 'react-native-elements';
+import { Dimensions } from 'react-native';
+import { Icon, Input, Tooltip } from 'react-native-elements';
 import { Button, Column, Row, Text } from '../../../components/ui';
 import { Modal } from '../../../components/ui/Modal';
 import { Theme } from '../../../components/ui/styleUtils';
@@ -38,11 +39,39 @@ export const GetIdInputModal: React.FC<GetIdInputModalProps> = (props) => {
                 value={controller.id}
                 keyboardType="number-pad"
                 rightIcon={
-                  controller.isInvalid ? (
-                    <Icon name="error" size={18} color="red" />
-                  ) : (
-                    <Icon name="help" size={18} />
-                  )
+                  <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}

diff --git a/screens/Home/MyVcs/GetIdInputModalController.ts b/screens/Home/MyVcs/GetIdInputModalController.ts
@@ -14,6 +14,7 @@ import {
   selectOtpError,
   selectId,
   selectIdError,
+  selectIconColor,
   selectIdInputRef,
 } from './GetVcModalMachine';
 
@@ -27,13 +28,18 @@ export function useGetIdInputModal({ service }: GetIdInputModalProps) {
     vcLabel: useSelector(settingsService, selectVcLabel),
     idError: useSelector(service, selectIdError),
     otpError: useSelector(service, selectOtpError),
+    iconColor: useSelector(service, selectIconColor),
 
     isInvalid: useSelector(service, selectIsInvalid),
     isAcceptingOtpInput: useSelector(service, selectIsAcceptingOtpInput),
     isRequestingOtp: useSelector(service, selectIsRequestingOtp),
 
     INPUT_ID: (id: string) => service.send(GetVcModalEvents.INPUT_ID(id)),
     VALIDATE_INPUT: () => service.send(GetVcModalEvents.VALIDATE_INPUT()),
+    ACTIVATE_ICON_COLOR: () =>
+      service.send(GetVcModalEvents.ACTIVATE_ICON_COLOR()),
+    DEACTIVATE_ICON_COLOR: () =>
+      service.send(GetVcModalEvents.DEACTIVATE_ICON_COLOR()),
     INPUT_OTP: (otp: string) => service.send(GetVcModalEvents.INPUT_OTP(otp)),
     READY: (input: TextInput) => service.send(GetVcModalEvents.READY(input)),
     DISMISS: () => service.send(GetVcModalEvents.DISMISS()),

diff --git a/screens/Home/MyVcs/GetVcModal.tsx b/screens/Home/MyVcs/GetVcModal.tsx
@@ -27,7 +27,7 @@ export const GetVcModal: React.FC<GetVcModalProps> = (props) => {
       <MessageOverlay
         isVisible={controller.isRequestingCredential}
         title={t('retrievingId')}
-        hasProgress
+        progress
       />
     </React.Fragment>
   );

diff --git a/screens/Home/MyVcs/GetVcModalMachine.ts b/screens/Home/MyVcs/GetVcModalMachine.ts
@@ -21,13 +21,16 @@ const model = createModel(
     otp: '',
     otpError: '',
     transactionId: '',
+    iconColor: false,
     child: null,
   },
   {
     events: {
       INPUT_ID: (id: string) => ({ id }),
       INPUT_OTP: (otp: string) => ({ otp }),
       VALIDATE_INPUT: () => ({}),
+      ACTIVATE_ICON_COLOR: () => ({}),
+      DEACTIVATE_ICON_COLOR: () => ({}),
       READY: (idInputRef: TextInput) => ({ idInputRef }),
       DISMISS: () => ({}),
       GOT_ID: (id: string) => ({ id }),
@@ -93,6 +96,12 @@ export const GetVcModalMachine =
                     target: 'requestingOtp',
                   },
                 ],
+                ACTIVATE_ICON_COLOR: {
+                  actions: 'setIconColorActivate',
+                },
+                DEACTIVATE_ICON_COLOR: {
+                  actions: 'setIconColorDeactivate',
+                },
               },
             },
             invalid: {
@@ -124,6 +133,12 @@ export const GetVcModalMachine =
                     target: 'requestingOtp',
                   },
                 ],
+                ACTIVATE_ICON_COLOR: {
+                  actions: 'setIconColorActivate',
+                },
+                DEACTIVATE_ICON_COLOR: {
+                  actions: 'setIconColorDeactivate',
+                },
               },
             },
             requestingOtp: {
@@ -256,6 +271,10 @@ export const GetVcModalMachine =
 
         clearOtp: assign({ otp: '' }),
 
+        setIconColorActivate: assign({ iconColor: true }),
+
+        setIconColorDeactivate: assign({ iconColor: false }),
+
         focusInput: (context) => context.idInputRef.focus(),
       },
 
@@ -313,6 +332,10 @@ export function selectOtpError(state: State) {
   return state.context.otpError;
 }
 
+export function selectIconColor(state: State) {
+  return state.context.iconColor;
+}
+
 export function selectIsAcceptingIdInput(state: State) {
   return state.matches('acceptingIdInput');
 }

diff --git a/screens/Home/MyVcs/GetVcModalMachine.typegen.ts b/screens/Home/MyVcs/GetVcModalMachine.typegen.ts
@@ -51,6 +51,8 @@ export interface Typegen0 {
       | 'error.platform.GetVcModal.requestingUinVid:invocation[0]'
       | 'xstate.after(100)#GetVcModal.acceptingIdInput.focusing';
     forwardToParent: 'DISMISS';
+    setIconColorActivate: 'ACTIVATE_ICON_COLOR';
+    setIconColorDeactivate: 'DEACTIVATE_ICON_COLOR';
     setId: 'INPUT_ID';
     setIdBackendError:
       | 'error.platform.GetVcModal.acceptingIdInput.requestingOtp:invocation[0]'

diff --git a/screens/Home/MyVcs/IdInputModal.tsx b/screens/Home/MyVcs/IdInputModal.tsx
@@ -74,7 +74,11 @@ export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
                   keyboardType="number-pad"
                   rightIcon={
                     controller.isInvalid ? (
-                      <Icon name="error" size={18} color="red" />
+                      <Icon
+                        name="error"
+                        size={18}
+                        color={Theme.Colors.errorMessage}
+                      />
                     ) : null
                   }
                   errorStyle={{ color: Theme.Colors.errorMessage }}