feat(Inji-435): add telemetry events for vc activation flow (#949)

* refactor(INJI-435): add enum for flow type,end event status & interact event subtype Signed-off-by: PuBHARGAVI <[email protected]> * fix(INJI-435): change flow type value to camel case in getEventType function Signed-off-by: PuBHARGAVI <[email protected]> * feat(INJI-435): add start,interact & impression events in vc activation and create an object with telemetry constants Signed-off-by: PuBHARGAVI <[email protected]> * feat(INJI-435): add end,error events in vc activation flow Signed-off-by: PuBHARGAVI <[email protected]> * feat(INJI-435): increase the pressable area of kebab icon Signed-off-by: PuBHARGAVI <[email protected]> * feat: generate impression event only after going into otp modal & track binding_auth_failed error Signed-off-by: PuBHARGAVI <[email protected]> * refactor(INJI-435): move sendImpression event from addVc modal to otp modal Signed-off-by: PuBHARGAVI <[email protected]> * fix(INJI-435): add missing impression event in issuer machine Signed-off-by: PuBHARGAVI <[email protected]> * refactor(INJI-435): return bindingAuthFailedError from state machines instead of splitting the error in tsx files Signed-off-by: PuBHARGAVI <[email protected]> * fix(INJI-435): add padding and fix the activation status overflow in all languages Signed-off-by: PuBHARGAVI <[email protected]> * refactor(INJI-435): change the telemetry sdk path in package.json Signed-off-by: PuBHARGAVI <[email protected]> * refactor(INJI-435): extract esignetMosipVcItem and existingMosipVcItem machines common functions into separate file Signed-off-by: PuBHARGAVI <[email protected]> * refactor(INJI-435): remove duplicate assignments of selectors Signed-off-by: PuBHARGAVI <[email protected]> --------- Signed-off-by: PuBHARGAVI <[email protected]> Signed-off-by: Swati Goel <[email protected]> Co-authored-by: Swati Goel <[email protected]>
mosip · Oct 30, 2023 · f41959b · f41959b
1 parent c4b81a7
commit f41959b
Show file tree

Hide file tree

Showing 42 changed files with 1,014 additions and 555 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -1,8 +1,8 @@
 fileignoreconfig:
 - filename: package.json
-  checksum: e0b34f1a1efbdf07b40a3e9e9ecd8884dd7d6835f45c57850e30988d2c6371a2
+  checksum: fdd5905228a1afbfb004c710fd6c61adf073a12840200327c0592b76bea5e7e3
 - filename: package-lock.json
-  checksum: fc26d97edecbacd0b7507032c6fc1acfcea9f01f5dbe66a2a0341506e2f0daca
+  checksum: 4515c3d663d9435eab0f56b75480c93c5209aa59befb2b71f2b3fe7c9051d80a
 - filename: components/PasscodeVerify.tsx
   checksum: 14654c0f038979fcd0d260170a45894a072f81e0767ca9a0e66935d33b5cc703
 - filename: i18n.ts
@@ -26,6 +26,13 @@ fileignoreconfig:
 - filename: screens/WelcomeScreenController.ts
   checksum: 71917c8c543a4a5b7ab61df259b785d233a80718123b0c8edf6ec81e1b3a81e0
 - filename: shared/telemetry/TelemetryUtils.js
+  checksum: ffe9aac2dcc590b98b0d588885c088eff189504ade653a77f74b67312bfd27ad
+- filename: shared/fileStorage.ts
+  checksum: 07cb337dc1d5b0f0eef56270ac4f4f589260ee5e490183c024cf98a2aeafb139
+- filename: shared/storage.ts
+  checksum: c8d874aa373bdf526bf59192139822f56915e702ef673bac4e0d7549b0fea3d0
+- filename: screens/Issuers/IssuersScreen.tsx
+  checksum: bc12c43ccc27ac04e5763fa6a6ed3cee63e4362ba5666c160b5e53269de924ab
   checksum: 9a61cd59a3718adf1f14faf3024fec66a3295ef373878a878a28e5cb1287afaa
 - filename: ios/Podfile.lock
   checksum: cc123c3e1f04d41b394ceb16843b15c08bac3ba619ae853ff322717739761a85
@@ -51,8 +58,6 @@ fileignoreconfig:
   checksum: 237a2640b7db70770d65da67c79f2929581e32f1162517e50b8d37e409f3387d
 - filename: shared/cryptoutil/cryptoUtil.ts
   checksum: b785ff3f01ab9530119072c4d38195048bfeee6155c54ea7dd031559acb722f3
-- filename: package.json
-  checksum: 1a9d02d94424c1266503d58038cae2318ab71261ab50cf930c5f98e07c0f3ccd
 - filename: machines/store.typegen.ts
   checksum: 6d22bc5c77398316b943c512c208ce0846a9fff674c1ccac79e07f21962acd5f
 - filename: machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.typegen.ts

diff --git a/components/KebabPopUpController.tsx b/components/KebabPopUpController.tsx
@@ -1,8 +1,7 @@
 import {useSelector} from '@xstate/react';
 import {ActorRefFrom} from 'xstate';
 import {
-  ExistingMosipVCItemEvents,
-  ExistingMosipVCItemMachine,
+  selectBindingAuthFailedError,
   selectEmptyWalletBindingId,
   selectIsPinned,
   selectKebabPopUp,
@@ -14,22 +13,14 @@ import {
   selectShowActivities,
   selectShowWalletBindingError,
   selectWalletBindingError,
+} from '../machines/VCItemMachine/commonSelectors';
+import {
+  ExistingMosipVCItemEvents,
+  ExistingMosipVCItemMachine,
 } from '../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';
-
 import {
   EsignetMosipVCItemEvents,
   EsignetMosipVCItemMachine,
-  selectEmptyWalletBindingId as esignetSelectEmptyWalletBindingId,
-  selectIsPinned as esignetSelectIsPinned,
-  selectKebabPopUp as esignetSelectKebabPopUp,
-  selectKebabPopUpAcceptingBindingOtp as esignetSelectKebabPopUpAcceptingBindingOtp,
-  selectKebabPopUpBindingWarning as esignetSelectKebabPopUpBindingWarning,
-  selectKebabPopUpWalletBindingInProgress as esignetSelectKebabPopUpWalletBindingInProgress,
-  selectOtpError as esignetSelectOtpError,
-  selectRemoveWalletWarning as esignetSelectRemoveWalletWarning,
-  selectShowActivities as esignetSelectShowActivities,
-  selectShowWalletBindingError as esignetSelectShowWalletBindingError,
-  selectWalletBindingError as esignetSelectWalletBindingError,
 } from '../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 import {selectActivities} from '../machines/activityLog';
 import {GlobalContext} from '../shared/GlobalContext';
@@ -56,55 +47,31 @@ export function useKebabPopUp(props) {
   const SHOW_ACTIVITY = () => service.send(vcEvents.SHOW_ACTIVITY());
   const INPUT_OTP = (otp: string) => service.send(vcEvents.INPUT_OTP(otp));
   const RESEND_OTP = () => service.send(vcEvents.RESEND_OTP());
-  let isPinned = useSelector(service, selectIsPinned);
-  let isBindingWarning = useSelector(service, selectKebabPopUpBindingWarning);
-  let isRemoveWalletWarning = useSelector(service, selectRemoveWalletWarning);
-  let isAcceptingOtpInput = useSelector(
+  const isPinned = useSelector(service, selectIsPinned);
+  const isBindingWarning = useSelector(service, selectKebabPopUpBindingWarning);
+  const isRemoveWalletWarning = useSelector(service, selectRemoveWalletWarning);
+  const isAcceptingOtpInput = useSelector(
     service,
     selectKebabPopUpAcceptingBindingOtp,
   );
-  let isWalletBindingError = useSelector(service, selectShowWalletBindingError);
-  let otpError = useSelector(service, selectOtpError);
-  let walletBindingError = useSelector(service, selectWalletBindingError);
-  let WalletBindingInProgress = useSelector(
+  const isWalletBindingError = useSelector(
+    service,
+    selectShowWalletBindingError,
+  );
+  const otpError = useSelector(service, selectOtpError);
+  const walletBindingError = useSelector(service, selectWalletBindingError);
+  const bindingAuthFailedError = useSelector(
+    service,
+    selectBindingAuthFailedError,
+  );
+  const WalletBindingInProgress = useSelector(
     service,
     selectKebabPopUpWalletBindingInProgress,
   );
-  let emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
-  let isKebabPopUp = useSelector(service, selectKebabPopUp);
-  let isShowActivities = useSelector(service, selectShowActivities);
+  const emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
+  const isKebabPopUp = useSelector(service, selectKebabPopUp);
+  const isShowActivities = useSelector(service, selectShowActivities);
 
-  if (props.vcMetadata.isFromOpenId4VCI()) {
-    isPinned = useSelector(service, esignetSelectIsPinned);
-    isBindingWarning = useSelector(
-      service,
-      esignetSelectKebabPopUpBindingWarning,
-    );
-    isRemoveWalletWarning = useSelector(
-      service,
-      esignetSelectRemoveWalletWarning,
-    );
-    isAcceptingOtpInput = useSelector(
-      service,
-      esignetSelectKebabPopUpAcceptingBindingOtp,
-    );
-    isWalletBindingError = useSelector(
-      service,
-      esignetSelectShowWalletBindingError,
-    );
-    otpError = useSelector(service, esignetSelectOtpError);
-    walletBindingError = useSelector(service, esignetSelectWalletBindingError);
-    WalletBindingInProgress = useSelector(
-      service,
-      esignetSelectKebabPopUpWalletBindingInProgress,
-    );
-    emptyWalletBindingId = useSelector(
-      service,
-      esignetSelectEmptyWalletBindingId,
-    );
-    isKebabPopUp = useSelector(service, esignetSelectKebabPopUp);
-    isShowActivities = useSelector(service, esignetSelectShowActivities);
-  }
   const {appService} = useContext(GlobalContext);
   const activityLogService = appService.children.get('activityLog');
 
@@ -124,6 +91,7 @@ export function useKebabPopUp(props) {
     isAcceptingOtpInput,
     isWalletBindingError,
     walletBindingError,
+    bindingAuthFailedError,
     otpError,
     WalletBindingInProgress,
     emptyWalletBindingId,

diff --git a/components/Passcode.tsx b/components/Passcode.tsx
@@ -5,13 +5,19 @@ import {PasscodeVerify} from '../components/PasscodeVerify';
 import {Column, Text} from '../components/ui';
 import {Theme} from '../components/ui/styleUtils';
 import {
+  TelemetryConstants,
   getImpressionEventData,
   sendImpressionEvent,
 } from '../shared/telemetry/TelemetryUtils';
 
 export const Passcode: React.FC<PasscodeProps> = props => {
   useEffect(() => {
-    sendImpressionEvent(getImpressionEventData('App Login', 'Passcode'));
+    sendImpressionEvent(
+      getImpressionEventData(
+        TelemetryConstants.FlowType.appLogin,
+        TelemetryConstants.Screens.passcode,
+      ),
+    );
   }, []);
 
   return (

diff --git a/components/VC/MosipVCItem/MosipVCItem.tsx b/components/VC/MosipVCItem/MosipVCItem.tsx
@@ -75,9 +75,14 @@ export const MosipVCItem: React.FC<
               emptyWalletBindingId={emptyWalletBindingId}
               showOnlyBindedVc={props.showOnlyBindedVc}
             />
-            <View style={Theme.Styles.verticalLine} />
+            <Row style={Theme.Styles.verticalLineWrapper}>
+              <View style={Theme.Styles.verticalLine} />
+            </Row>
             <Row style={Theme.Styles.kebabIcon}>
-              <Pressable onPress={KEBAB_POPUP} accessible={false}>
+              <Pressable
+                onPress={KEBAB_POPUP}
+                accessible={false}
+                style={Theme.Styles.kebabPressableContainer}>
                 <KebabPopUp
                   vcMetadata={props.vcMetadata}
                   iconName="dots-three-horizontal"

diff --git a/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx b/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
@@ -14,10 +14,8 @@ const WalletUnverifiedIcon: React.FC = () => {
       size={Theme.ICON_MID_SIZE}
       type="material-community"
       containerStyle={{
-        marginStart: 1,
-        marginEnd: 1,
+        marginEnd: 5,
         bottom: 1,
-        marginRight: -2,
       }}
     />
   );
@@ -29,7 +27,10 @@ const WalletVerifiedIcon: React.FC = () => {
       name="verified-user"
       color={Theme.Colors.VerifiedIcon}
       size={Theme.ICON_MID_SIZE}
-      containerStyle={{marginStart: 10, bottom: 1, marginLeft: 10}}
+      containerStyle={{
+        marginEnd: 5,
+        bottom: 1,
+      }}
     />
   );
 };
@@ -39,29 +40,18 @@ const WalletUnverifiedActivationDetails: React.FC<
 > = props => {
   const {t} = useTranslation('VcDetails');
   return (
-    <Row
-      width={Dimensions.get('screen').width * 0.8}
-      align="space-between"
-      crossAlign="center">
-      <Row
-        crossAlign="center"
-        style={{
-          flex: 1,
-          maxWidth: 255,
-        }}>
-        {props.verifiableCredential && <WalletUnverifiedIcon />}
-        <Text
-          color={Theme.Colors.Details}
-          testID="activationPending"
-          weight="regular"
-          margin="8"
-          style={
-            !props.verifiableCredential
-              ? Theme.Styles.loadingTitle
-              : Theme.Styles.statusLabel
-          }
-          children={t('offlineAuthDisabledHeader')}></Text>
-      </Row>
+    <Row style={Theme.Styles.vcActivationDetailsWrapper}>
+      {props.verifiableCredential && <WalletUnverifiedIcon />}
+      <Text
+        color={Theme.Colors.Details}
+        testID="activationPending"
+        weight="regular"
+        style={
+          !props.verifiableCredential
+            ? Theme.Styles.loadingTitle
+            : Theme.Styles.statusLabel
+        }
+        children={t('offlineAuthDisabledHeader')}></Text>
     </Row>
   );
 };
@@ -71,29 +61,20 @@ const WalletVerifiedActivationDetails: React.FC<
 > = props => {
   const {t} = useTranslation('WalletBinding');
   return (
-    <Row
-      width={Dimensions.get('screen').width * 0.8}
-      align="space-between"
-      crossAlign="center">
-      <Row
-        crossAlign="center"
-        style={{
-          flex: 1,
-        }}>
-        <WalletVerifiedIcon />
-        <Text
-          color={Theme.Colors.statusLabel}
-          testID="activated"
-          weight="regular"
-          size="smaller"
-          margin="8 10 10 5"
-          style={
-            !props.verifiableCredential
-              ? Theme.Styles.loadingTitle
-              : Theme.Styles.statusLabel
-          }
-          children={t('profileAuthenticated')}></Text>
-      </Row>
+    <Row style={Theme.Styles.vcActivationDetailsWrapper}>
+      <WalletVerifiedIcon />
+      <Text
+        color={Theme.Colors.statusLabel}
+        testID="activated"
+        weight="regular"
+        size="smaller"
+        margin="0 0 0 5"
+        style={
+          !props.verifiableCredential
+            ? Theme.Styles.loadingTitle
+            : Theme.Styles.statusLabel
+        }
+        children={t('profileAuthenticated')}></Text>
     </Row>
   );
 };
@@ -102,7 +83,7 @@ export const MosipVCItemActivationStatus: React.FC<
   ExistingMosipVCItemActivationStatusProps
 > = props => {
   return (
-    <Row margin="0 0 0 -6">
+    <Row style={Theme.Styles.vcActivationStatusContainer}>
       {props.emptyWalletBindingId ? (
         <WalletUnverifiedActivationDetails
           verifiableCredential={props.verifiableCredential}

diff --git a/components/VC/MosipVCItem/VcItemController.tsx b/components/VC/MosipVCItem/VcItemController.tsx
@@ -1,23 +1,20 @@
 import {useContext, useRef} from 'react';
 import {GlobalContext} from '../../../shared/GlobalContext';
 import {
-  createExistingMosipVCItemMachine,
-  ExistingMosipVCItemEvents,
   selectContext,
   selectEmptyWalletBindingId,
   selectGeneratedOn,
-  selectIsSavingFailedInIdle,
   selectKebabPopUp,
   selectVerifiableCredential,
+} from '../../../machines/VCItemMachine/commonSelectors';
+import {
+  createExistingMosipVCItemMachine,
+  ExistingMosipVCItemEvents,
+  selectIsSavingFailedInIdle,
 } from '../../../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';
 import {
   createEsignetMosipVCItemMachine,
   EsignetMosipVCItemEvents,
-  selectContext as esignetSelectContext,
-  selectEmptyWalletBindingId as esignetSelectEmptyWalletBindingId,
-  selectGeneratedOn as esignetSelectGeneratedOn,
-  selectKebabPopUp as esignetSelectKebabPopUp,
-  selectVerifiableCredentials as esignetSelectVerifiableCredentials,
 } from '../../../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 import {useInterpret, useSelector} from '@xstate/react';
 import {EsignetMosipVCItemProps, ExistingMosipVCItemProps} from './MosipVCItem';
@@ -40,29 +37,18 @@ export function useVcItemController(
 
   const service = useInterpret(machine.current, {devTools: __DEV__});
 
-  let context = useSelector(service, selectContext);
-  let verifiableCredential = useSelector(service, selectVerifiableCredential);
-  let emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
-  let isKebabPopUp = useSelector(service, selectKebabPopUp);
+  const context = useSelector(service, selectContext);
+  const verifiableCredential = useSelector(service, selectVerifiableCredential);
+  const emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
+  const isKebabPopUp = useSelector(service, selectKebabPopUp);
   let DISMISS = () => service.send(ExistingMosipVCItemEvents.DISMISS());
   let KEBAB_POPUP = () => service.send(ExistingMosipVCItemEvents.KEBAB_POPUP());
   const isSavingFailedInIdle = useSelector(service, selectIsSavingFailedInIdle);
   const storeErrorTranslationPath = 'errors.savingFailed';
-  let generatedOn = useSelector(service, selectGeneratedOn);
+  const generatedOn = useSelector(service, selectGeneratedOn);
   if (props.vcMetadata.isFromOpenId4VCI()) {
-    context = useSelector(service, esignetSelectContext);
-    isKebabPopUp = useSelector(service, esignetSelectKebabPopUp);
-    generatedOn = useSelector(service, esignetSelectGeneratedOn);
-    emptyWalletBindingId = useSelector(
-      service,
-      esignetSelectEmptyWalletBindingId,
-    );
     DISMISS = () => service.send(EsignetMosipVCItemEvents.DISMISS());
     KEBAB_POPUP = () => service.send(EsignetMosipVCItemEvents.KEBAB_POPUP());
-    verifiableCredential = useSelector(
-      service,
-      esignetSelectVerifiableCredentials,
-    );
   }
   return {
     service,

diff --git a/components/VidItem.tsx b/components/VidItem.tsx
@@ -5,9 +5,11 @@ import {CheckBox} from 'react-native-elements';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {ActorRefFrom} from 'xstate';
 import {
-  createExistingMosipVCItemMachine,
   selectVerifiableCredential,
   selectGeneratedOn,
+} from '../machines/VCItemMachine/commonSelectors';
+import {
+  createExistingMosipVCItemMachine,
   selectId,
   ExistingMosipVCItemMachine,
 } from '../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';