From aa66419f2ab070eaa7514ae9a463f0ccad61f5a2 Mon Sep 17 00:00:00 2001 From: srikanth716 Date: Wed, 9 Nov 2022 16:23:52 +0530 Subject: [PATCH 1/4] bugfix#158 --- components/ui/themes/DefaultTheme.ts | 4 ++ locales/en.json | 19 ++------- screens/Home/MyVcs/GetIdInputModal.tsx | 40 ++++++++++++++++--- .../Home/MyVcs/GetIdInputModalController.ts | 6 +++ screens/Home/MyVcs/GetVcModal.tsx | 2 +- screens/Home/MyVcs/GetVcModalMachine.ts | 23 +++++++++++ .../Home/MyVcs/GetVcModalMachine.typegen.ts | 2 + screens/Home/MyVcs/IdInputModal.tsx | 6 ++- 8 files changed, 79 insertions(+), 23 deletions(-) diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 5c81856137..a68a36c3ba 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -573,6 +573,10 @@ export const DefaultTheme = { CloseCard: require('../../../assets/ID-closed.png'), ProfileIcon: require('../../../assets/placeholder-photo.png'), MosipLogo: require('../../../assets/mosip-logo.png'), + ApplicationIdToolTip: { + width: 300, + height: 100, + }, elevation(level: ElevationLevel): ViewStyle { // https://ethercreative.github.io/react-native-shadow-generator/ diff --git a/locales/en.json b/locales/en.json index c9fcbe6691..72a65ba3ef 100644 --- a/locales/en.json +++ b/locales/en.json @@ -5,7 +5,6 @@ "deviceRefNumber": "Device reference number", "name": "Name" }, - "FaceScanner": {}, "OIDcAuth": { "title": "OIDC Authentication", "text": "To be replaced with the OIDC provider UI", @@ -108,7 +107,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" @@ -181,7 +181,6 @@ "ReceiveVcScreen": { "header": "{{vcLabel}} details", "acceptRequest": "Accept request and receive {{vcLabel}}", - "acceptRequestAndVerify": "Accept request and verify", "reject": "Reject" }, "RequestScreen": { @@ -260,11 +259,7 @@ "rejected": { "title": "Notice", "message": "Your {{vcLabel}} was rejected by {{receiver}}" - } - } - }, - "VerifyIdentityOverlay": { - "status": { + }, "verifyingIdentity": "Verifying identity..." }, "errors": { @@ -283,12 +278,6 @@ "cancel": "Cancel", "save": "Save", "editLabel": "Edit {{label}}", - "tryAgain": "Try again", - "camera": { - "errors": { - "missingPermission": "This app uses the camera to scan the QR code of another device." - }, - "allowAccess": "Allow access to camera" - } + "tryAgain": "Try again" } } \ No newline at end of file diff --git a/screens/Home/MyVcs/GetIdInputModal.tsx b/screens/Home/MyVcs/GetIdInputModal.tsx index 0a9295f23f..dad6c4a416 100644 --- a/screens/Home/MyVcs/GetIdInputModal.tsx +++ b/screens/Home/MyVcs/GetIdInputModal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, Input } from 'react-native-elements'; +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 +38,39 @@ export const GetIdInputModal: React.FC = (props) => { value={controller.id} keyboardType="number-pad" rightIcon={ - controller.isInvalid ? ( - - ) : ( - - ) + + {t('qstnMarkToolTip', { + vcLabel: controller.vcLabel.singular, + })} + + } + width={Theme.ApplicationIdToolTip.width} + height={Theme.ApplicationIdToolTip.height} + backgroundColor={'lightgray'} + withPointer={true} + skipAndroidStatusBar={true} + onOpen={controller.ACTIVATE_ICON_COLOR} + onClose={controller.DEACTIVATE_ICON_COLOR}> + {controller.isInvalid ? ( + + ) : ( + + )} + } errorStyle={{ color: Theme.Colors.errorMessage }} errorMessage={controller.idError} diff --git a/screens/Home/MyVcs/GetIdInputModalController.ts b/screens/Home/MyVcs/GetIdInputModalController.ts index a151b7d7b8..f6e4a9132f 100644 --- 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,6 +28,7 @@ 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), @@ -34,6 +36,10 @@ export function useGetIdInputModal({ service }: GetIdInputModalProps) { 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 index d52726678e..891ab6c302 100644 --- a/screens/Home/MyVcs/GetVcModal.tsx +++ b/screens/Home/MyVcs/GetVcModal.tsx @@ -27,7 +27,7 @@ export const GetVcModal: React.FC = (props) => { ); diff --git a/screens/Home/MyVcs/GetVcModalMachine.ts b/screens/Home/MyVcs/GetVcModalMachine.ts index 6615da911e..d3e173cb54 100644 --- a/screens/Home/MyVcs/GetVcModalMachine.ts +++ b/screens/Home/MyVcs/GetVcModalMachine.ts @@ -21,6 +21,7 @@ const model = createModel( otp: '', otpError: '', transactionId: '', + iconColor: false, child: null, }, { @@ -28,6 +29,8 @@ const model = createModel( 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 index d0483a794e..7d38b9e0b8 100644 --- 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 index 901c2f6886..4cd147ead2 100644 --- a/screens/Home/MyVcs/IdInputModal.tsx +++ b/screens/Home/MyVcs/IdInputModal.tsx @@ -74,7 +74,11 @@ export const IdInputModal: React.FC = (props) => { keyboardType="number-pad" rightIcon={ controller.isInvalid ? ( - + ) : null } errorStyle={{ color: Theme.Colors.errorMessage }} From 6e8f500110bbda26ee0563b9d235423338f47a3f Mon Sep 17 00:00:00 2001 From: srikanth716 Date: Wed, 9 Nov 2022 16:46:35 +0530 Subject: [PATCH 2/4] bugfix#158 --- locales/en.json | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/locales/en.json b/locales/en.json index 72a65ba3ef..cf8ad290fa 100644 --- a/locales/en.json +++ b/locales/en.json @@ -5,6 +5,7 @@ "deviceRefNumber": "Device reference number", "name": "Name" }, + "FaceScanner": {}, "OIDcAuth": { "title": "OIDC Authentication", "text": "To be replaced with the OIDC provider UI", @@ -181,6 +182,7 @@ "ReceiveVcScreen": { "header": "{{vcLabel}} details", "acceptRequest": "Accept request and receive {{vcLabel}}", + "acceptRequestAndVerify": "Accept request and verify", "reject": "Reject" }, "RequestScreen": { @@ -259,7 +261,11 @@ "rejected": { "title": "Notice", "message": "Your {{vcLabel}} was rejected by {{receiver}}" - }, + } + } + }, + "VerifyIdentityOverlay": { + "status": { "verifyingIdentity": "Verifying identity..." }, "errors": { @@ -278,6 +284,12 @@ "cancel": "Cancel", "save": "Save", "editLabel": "Edit {{label}}", - "tryAgain": "Try again" + "tryAgain": "Try again", + "camera": { + "errors": { + "missingPermission": "This app uses the camera to scan the QR code of another device." + }, + "allowAccess": "Allow access to camera" + } } } \ No newline at end of file From bbb0b3174c6eb1d8c6d679f59f3a6ae4021c2d4c Mon Sep 17 00:00:00 2001 From: srikanth716 Date: Fri, 11 Nov 2022 16:15:02 +0530 Subject: [PATCH 3/4] bugfix#158 --- components/ui/themes/DefaultTheme.ts | 4 ---- locales/en.json | 2 +- screens/Home/MyVcs/GetIdInputModal.tsx | 5 +++-- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index a68a36c3ba..5c81856137 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -573,10 +573,6 @@ export const DefaultTheme = { CloseCard: require('../../../assets/ID-closed.png'), ProfileIcon: require('../../../assets/placeholder-photo.png'), MosipLogo: require('../../../assets/mosip-logo.png'), - ApplicationIdToolTip: { - width: 300, - height: 100, - }, elevation(level: ElevationLevel): ViewStyle { // https://ethercreative.github.io/react-native-shadow-generator/ diff --git a/locales/en.json b/locales/en.json index cf8ad290fa..d0b9ed382b 100644 --- a/locales/en.json +++ b/locales/en.json @@ -109,7 +109,7 @@ "header": "To retrieve your UIN or VID, enter your Application {{vcLabel}} number", "getUIN": "Get UIN/VID", "applicationId": "Application {{vcLabel}} number", - "qstnMarkToolTip" : "Application {{vcLabel}} Number is printed on the acknowledgment provided after enrollment" + "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 index dad6c4a416..24a75a056b 100644 --- a/screens/Home/MyVcs/GetIdInputModal.tsx +++ b/screens/Home/MyVcs/GetIdInputModal.tsx @@ -1,4 +1,5 @@ import React from 'react'; +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'; @@ -46,8 +47,8 @@ export const GetIdInputModal: React.FC = (props) => { })} } - width={Theme.ApplicationIdToolTip.width} - height={Theme.ApplicationIdToolTip.height} + width={Dimensions.get('screen').width * 0.8} + height={Dimensions.get('screen').height * 0.15} backgroundColor={'lightgray'} withPointer={true} skipAndroidStatusBar={true} From c34d84bb6b556eb469b726d6851a6c4cd66364d9 Mon Sep 17 00:00:00 2001 From: srikanth716 Date: Fri, 11 Nov 2022 16:22:57 +0530 Subject: [PATCH 4/4] bugfix#158 --- screens/Home/MyVcs/GetIdInputModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/screens/Home/MyVcs/GetIdInputModal.tsx b/screens/Home/MyVcs/GetIdInputModal.tsx index 24a75a056b..1b04057790 100644 --- a/screens/Home/MyVcs/GetIdInputModal.tsx +++ b/screens/Home/MyVcs/GetIdInputModal.tsx @@ -48,7 +48,7 @@ export const GetIdInputModal: React.FC = (props) => { } width={Dimensions.get('screen').width * 0.8} - height={Dimensions.get('screen').height * 0.15} + height={Dimensions.get('screen').height * 0.2} backgroundColor={'lightgray'} withPointer={true} skipAndroidStatusBar={true}