[INJI-606]: vc activation literal changes and code optimisation (#1200)

* [INJI-606]: vc activation literal changes and code optimisation Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJI-606]: vc activation literal changes and code optimisation Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJI-606]: vc pinning for sunbird credential Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> --------- Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com>
2026-01-09 13:38:01 -05:00 · 2024-01-24 13:47:28 +05:30
parent ee2b07a0d7
commit a379c7a6e7
18 changed files with 120 additions and 56 deletions
--- a/components/ProfileIcon.tsx
+++ b/components/ProfileIcon.tsx
@@ -1,22 +1,22 @@
 import {Theme} from './ui/styleUtils';
-import {Icon} from 'react-native-elements';
 import {View} from 'react-native';
 import React from 'react';
+import {Icon} from 'react-native-elements';
+import {SvgImage} from './ui/svg';

-export const ProfileIcon: React.FC = () => {
+export const ProfileIcon: React.FC = props => {
  return (
-    <View
-      style={{
-        alignSelf: 'center',
-        justifyContent: 'center',
-        width: 90,
-        height: 90,
-        borderRadius: 15,
-        borderWidth: 0.3,
-        borderColor: Theme.Colors.Icon,
-        backgroundColor: Theme.Colors.whiteBackgroundColor,
-      }}>
-      <Icon name="person" color={Theme.Colors.Icon} size={40} />
-    </View>
+    <>
+      <View style={Theme.Styles.ProfileIconContainer}>
+        {props?.isPinned && SvgImage.pinIcon()}
+        <View
+          style={[
+            Theme.Styles.ProfileIconInnerStyle,
+            !props?.isPinned && Theme.Styles.ProfileIconPinnedStyle,
+          ]}>
+          <Icon name="person" color={Theme.Colors.Icon} size={40} />
+        </View>
+      </View>
+    </>
  );
 };
--- a/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
+++ b/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
@@ -5,7 +5,8 @@ import {VerifiableCredential} from '../../../types/VC/ExistingMosipVC/vc';
 import {Row, Text} from '../../ui';
 import {Theme} from '../../ui/styleUtils';
 import {View} from 'react-native';
-import {ACTIVATION_NOT_NEEDED} from '../../../shared/openId4VCI/Utils';
+import {isActivationNeeded} from '../../../shared/openId4VCI/Utils';
+import {VCMetadata} from '../../../shared/VCMetadata';

 const WalletUnverifiedIcon: React.FC = () => {
  return (
@@ -82,7 +83,11 @@ const WalletVerifiedActivationDetails: React.FC<
              ? Theme.Styles.loadingTitle
              : Theme.Styles.statusLabel
          }
-          children={t('profileAuthenticated')}></Text>
+          children={
+            isActivationNeeded(props?.vcMetadata.issuer)
+              ? t('profileAuthenticated')
+              : t('credentialActivated')
+          }></Text>
      </View>
    </Row>
  );
@@ -94,7 +99,7 @@ export const MosipVCItemActivationStatus: React.FC<
  return (
    <Row style={Theme.Styles.vcActivationStatusContainer}>
      {props.emptyWalletBindingId &&
-      ACTIVATION_NOT_NEEDED.indexOf(props?.vcMetadata.issuer) === -1 ? (
+      isActivationNeeded(props?.vcMetadata.issuer) ? (
        <WalletUnverifiedActivationDetails
          verifiableCredential={props.verifiableCredential}
        />
@@ -102,6 +107,7 @@ export const MosipVCItemActivationStatus: React.FC<
        <WalletVerifiedActivationDetails
          verifiableCredential={props.verifiableCredential}
          showOnlyBindedVc={props.showOnlyBindedVc}
+          vcMetadata={props.vcMetadata}
        />
      )}
    </Row>
@@ -117,6 +123,7 @@ interface ExistingMosipVCItemActivationStatusProps {
 interface WalletVerifiedDetailsProps {
  showOnlyBindedVc: boolean;
  verifiableCredential: VerifiableCredential;
+  vcMetadata: VCMetadata;
 }

 interface WalletUnVerifiedDetailsProps {
--- a/components/VC/Views/VCCardView.tsx
+++ b/components/VC/Views/VCCardView.tsx
@@ -21,8 +21,8 @@ import {getCredentialIssuersWellKnownConfig} from '../../../shared/openId4VCI/Ut
 import {
  CARD_VIEW_ADD_ON_FIELDS,
  CARD_VIEW_DEFAULT_FIELDS,
-} from '../../../shared/constants';
-import {isVCLoaded} from '../common/VCUtils';
+  isVCLoaded,
+} from '../common/VCUtils';

 export const VCCardView: React.FC<
  ExistingMosipVCItemProps | EsignetMosipVCItemProps
--- a/components/VC/Views/VCDetailView.tsx
+++ b/components/VC/Views/VCDetailView.tsx
@@ -20,14 +20,12 @@ import {WalletBindingResponse} from '../../../shared/cryptoutil/cryptoUtil';
 import {logoType} from '../../../machines/issuersMachine';
 import {SvgImage} from '../../ui/svg';
 import {
-  ACTIVATION_NOT_NEEDED,
  getCredentialIssuersWellKnownConfig,
+  isActivationNeeded,
 } from '../../../shared/openId4VCI/Utils';
 import {
  DETAIL_VIEW_ADD_ON_FIELDS,
  DETAIL_VIEW_DEFAULT_FIELDS,
-} from '../../../shared/constants';
-import {
  fieldItemIterator,
  isVCLoaded,
  setBackgroundColour,
@@ -152,7 +150,7 @@ export const VCDetailView: React.FC<

      {props.activeTab !== 1 ? (
        props.isBindingPending &&
-        ACTIVATION_NOT_NEEDED.indexOf(props.vc.vcMetadata.issuer) === -1 ? (
+        isActivationNeeded(props.vc.vcMetadata.issuer) ? (
          <Column style={Theme.Styles.openCardBgContainer} padding="10">
            <Column margin={'0 0 4 0'} crossAlign={'flex-start'}>
              <Icon
@@ -209,7 +207,11 @@ export const VCDetailView: React.FC<
                weight="bold"
                size="smaller"
                margin="10 10 10 10"
-                children={t('profileAuthenticated')}></Text>
+                children={
+                  isActivationNeeded(props.vc.vcMetadata.issuer)
+                    ? t('profileAuthenticated')
+                    : t('credentialActivated')
+                }></Text>
            </Row>
          </Column>
        )
--- a/components/VC/common/VCUtils.tsx
+++ b/components/VC/common/VCUtils.tsx
@@ -15,6 +15,26 @@ import {CREDENTIAL_REGISTRY_EDIT} from 'react-native-dotenv';
 import {getIDType} from '../../../shared/openId4VCI/Utils';
 import {VCVerification} from '../../VCVerification';

+export const CARD_VIEW_DEFAULT_FIELDS = ['fullName'];
+export const DETAIL_VIEW_DEFAULT_FIELDS = [
+  'fullName',
+  'gender',
+  'phone',
+  'dateOfBirth',
+  'email',
+  'address',
+];
+
+//todo UIN & VID to be removed once we get the fields in the wellknown endpoint
+export const CARD_VIEW_ADD_ON_FIELDS = ['UIN', 'VID'];
+export const DETAIL_VIEW_ADD_ON_FIELDS = [
+  'UIN',
+  'VID',
+  'status',
+  'credentialRegistry',
+  'idType',
+];
+
 export const getFieldValue = (
  verifiableCredential: VerifiableCredential,
  field: string,
--- a/components/ui/svg.tsx
+++ b/components/ui/svg.tsx
@@ -80,6 +80,7 @@ export class SvgImage {
      />
    );
  }
+
  static pinIcon() {
    return (
      <PinICon
@@ -203,7 +204,7 @@ export class SvgImage {
      </ImageBackground>
    ) : (
      <>
-        <ProfileIcon />
+        <ProfileIcon isPinned={props?.isPinned} />
      </>
    );
  }
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -411,6 +411,23 @@ export const DefaultTheme = {
      borderRadius: 6,
      backgroundColor: Colors.LightOrange,
    },
+    ProfileIconContainer: {
+      alignSelf: 'center',
+      justifyContent: 'center',
+      width: 90,
+      height: 90,
+      borderRadius: 15,
+      borderWidth: 0.3,
+      borderColor: Colors.Orange,
+      backgroundColor: Colors.White,
+    },
+    ProfileIconInnerStyle: {
+      flex: 1,
+    },
+    ProfileIconPinnedStyle: {
+      alignSelf: 'center',
+      justifyContent: 'center',
+    },
    IconContainer: {
      padding: 6,
      width: 36,
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -416,6 +416,23 @@ export const PurpleTheme = {
      borderRadius: 6,
      backgroundColor: Colors.LightPurple,
    },
+    ProfileIconContainer: {
+      alignSelf: 'center',
+      justifyContent: 'center',
+      width: 90,
+      height: 90,
+      borderRadius: 15,
+      borderWidth: 0.3,
+      borderColor: Colors.Purple,
+      backgroundColor: Colors.White,
+    },
+    ProfileIconInnerStyle: {
+      flex: 1,
+    },
+    ProfileIconPinnedStyle: {
+      alignSelf: 'center',
+      justifyContent: 'center',
+    },
    IconContainer: {
      padding: 6,
      width: 36,
--- a/locales/ara.json
+++ b/locales/ara.json
@@ -64,6 +64,7 @@
    "vid": "VID",
    "enableVerification": "تفعيل",
    "profileAuthenticated": "يتم تمكين بيانات الاعتماد للمصادقة عبر الإنترنت.",
+    "credentialActivated": "مفعل",
    "offlineAuthDisabledHeader": "التنشيط معلق لتسجيل الدخول عبر الإنترنت!",
    "offlineAuthDisabledMessage": "الرجاء النقر فوق الزر أدناه لتنشيط بيانات الاعتماد هذه لاستخدامها في تسجيل الدخول عبر الإنترنت.",
    "verificationEnabledSuccess": "تم التنشيط لتسجيل الدخول عبر الإنترنت",
@@ -98,7 +99,8 @@
  },
  "WalletBinding": {
    "inProgress": "في تَقَدم",
-    "profileAuthenticated": "تم التنشيط لتسجيل الدخول عبر الإنترنت"
+    "profileAuthenticated": "تم التنشيط لتسجيل الدخول عبر الإنترنت",
+    "credentialActivated": "مفعل"
  },
  "BindingVcWarningOverlay": {
    "alert": "يرجى تأكيد",
--- a/locales/en.json
+++ b/locales/en.json
@@ -64,6 +64,7 @@
    "vid": "VID",
    "enableVerification": "Activate",
    "profileAuthenticated": "Credentials are enabled for online authentication.",
+    "credentialActivated": "Activated",
    "offlineAuthDisabledHeader": "Activation pending for online login",
    "offlineAuthDisabledMessage": "Please click the button below to activate this credential to be used for online login.",
    "verificationEnabledSuccess": "Activated for online login",
@@ -98,7 +99,8 @@
  },
  "WalletBinding": {
    "inProgress": "In progress",
-    "profileAuthenticated": "Activated for online login"
+    "profileAuthenticated": "Activated for online login",
+    "credentialActivated": "Activated"
  },
  "BindingVcWarningOverlay": {
    "alert": "Alert",
--- a/locales/fil.json
+++ b/locales/fil.json
@@ -63,6 +63,7 @@
    "vid": "VID",
    "enableVerification": "I-activate",
    "profileAuthenticated": "Ang mga kredensyal ay pinagana para sa online na pagpapatotoo.",
+    "credentialActivated": "Na-activate",
    "offlineAuthDisabledHeader": "Nakabinbin ang pag-activate para sa online na pag-login!",
    "offlineAuthDisabledMessage": "Mangyaring i-click ang pindutan sa ibaba upang i-activate ang kredensyal na ito upang magamit para sa online na pag-login.",
    "verificationEnabledSuccess": "Na-activate para sa online na pag-login",
@@ -97,7 +98,8 @@
  },
  "WalletBinding": {
    "inProgress": "Isinasagawa",
-    "profileAuthenticated": "Na-activate para sa online na pag-login"
+    "profileAuthenticated": "Na-activate para sa online na pag-login",
+    "credentialActivated": "Na-activate"
  },
  "BindingVcWarningOverlay": {
    "alert": "Pakikumpirma",
--- a/locales/hin.json
+++ b/locales/hin.json
@@ -64,6 +64,7 @@
    "vid": "VID",
    "enableVerification": "सक्रिय",
    "profileAuthenticated": "ऑनलाइन प्रमाणीकरण के लिए क्रेडेंशियल सक्षम हैं।",
+    "credentialActivated": "सक्रिय",
    "offlineAuthDisabledHeader": "ऑनलाइन लॉगिन के लिए सक्रियण लंबित है!",
    "offlineAuthDisabledMessage": "ऑनलाइन लॉगिन के लिए उपयोग किए जाने वाले इस क्रेडेंशियल को सक्रिय करने के लिए कृपया नीचे दिए गए बटन पर क्लिक करें।",
    "verificationEnabledSuccess": "ऑनलाइन लॉगिन के लिए सक्रिय",
@@ -95,7 +96,8 @@
  },
  "WalletBinding": {
    "inProgress": "चालू",
-    "profileAuthenticated": "ऑनलाइन लॉगिन के लिए सक्रिय"
+    "profileAuthenticated": "ऑनलाइन लॉगिन के लिए सक्रिय",
+    "credentialActivated": "सक्रिय"
  },
  "BindingVcWarningOverlay": {
    "alert": "कृपया पुष्टि करें",
--- a/locales/kan.json
+++ b/locales/kan.json
@@ -64,6 +64,7 @@
    "vid": "VID",
    "enableVerification": "ಸಕ್ರಿಯಗೊಳಿಸಿ",
    "profileAuthenticated": "ಆನ್‌ಲೈನ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.",
+    "credentialActivated": "ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
    "offlineAuthDisabledHeader": "ಆನ್‌ಲೈನ್ ಲಾಗಿನ್‌ಗಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ ಬಾಕಿ ಉಳಿದಿದೆ!",
    "offlineAuthDisabledMessage": "ಆನ್‌ಲೈನ್ ಲಾಗಿನ್‌ಗಾಗಿ ಬಳಸಲು ಈ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ದಯವಿಟ್ಟು ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.",
    "verificationEnabledSuccess": "ಆನ್‌ಲೈನ್ ಲಾಗಿನ್‌ಗಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
@@ -94,7 +95,8 @@
  },
  "WalletBinding": {
    "inProgress": "ಪ್ರಗತಿಯಲ್ಲಿದೆ",
-    "profileAuthenticated": "ಆನ್‌ಲೈನ್ ಲಾಗಿನ್‌ಗಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ"
+    "profileAuthenticated": "ಆನ್‌ಲೈನ್ ಲಾಗಿನ್‌ಗಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
+    "credentialActivated": "ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ"
  },
  "BindingVcWarningOverlay": {
    "alert": "ದಯವಿಟ್ಟು ದ್ರುಡೀಕರಿಸಿ",
--- a/locales/tam.json
+++ b/locales/tam.json
@@ -64,6 +64,7 @@
    "vid": "VID",
    "enableVerification": "செயல்படுத்த",
    "profileAuthenticated": "ஆன்லைன் அங்கீகாரத்திற்காக நற்சான்றிதழ்கள் இயக்கப்பட்டுள்ளன.",
+    "credentialActivated": "செயல்படுத்தப்பட்டது",
    "offlineAuthDisabledHeader": "ஆன்லைன் உள்நுழைவுக்கான செயல்படுத்தல் நிலுவையில் உள்ளது",
    "offlineAuthDisabledMessage": "இந்த நற்சான்றிதழை ஆன்லைன் உள்நுழைவுக்குப் பயன்படுத்த, கீழே உள்ள பொத்தானைக் கிளிக் செய்யவும்.",
    "verificationEnabledSuccess": "ஆன்லைன் உள்நுழைவுக்காக செயல்படுத்தப்பட்டது",
@@ -94,7 +95,8 @@
  },
  "WalletBinding": {
    "inProgress": "செயல்பாட்டில் உள்ளது",
-    "profileAuthenticated": "சுயவிவரம் அங்கீகரிக்கப்பட்டது"
+    "profileAuthenticated": "சுயவிவரம் அங்கீகரிக்கப்பட்டது",
+    "credentialActivated": "செயல்படுத்தப்பட்டது"
  },
  "BindingVcWarningOverlay": {
    "alert": "தயவுசெய்து உறுதிப்படுத்தவும்",
--- a/screens/Home/MyVcs/WalletBinding.tsx
+++ b/screens/Home/MyVcs/WalletBinding.tsx
@@ -19,7 +19,7 @@ import {
  sendErrorEvent,
 } from '../../../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../../../shared/telemetry/TelemetryConstants';
-import {ACTIVATION_NOT_NEEDED} from '../../../shared/openId4VCI/Utils';
+import {isActivationNeeded} from '../../../shared/openId4VCI/Utils';

 export const WalletBinding: React.FC<WalletBindingProps> = props => {
  const controller = useKebabPopUp(props);
@@ -59,7 +59,7 @@ export const WalletBinding: React.FC<WalletBindingProps> = props => {
  const {t} = useTranslation('WalletBinding');

  return controller.emptyWalletBindingId &&
-    ACTIVATION_NOT_NEEDED.indexOf(props?.vcMetadata.issuer) === -1 ? (
+    isActivationNeeded(props?.vcMetadata.issuer) ? (
    <ListItem bottomDivider onPress={controller.ADD_WALLET_BINDING_ID}>
      <ListItem.Content>
        <ListItem.Title {...testIDProps('pendingActivationOrActivated')}>
@@ -120,7 +120,11 @@ export const WalletBinding: React.FC<WalletBindingProps> = props => {
            weight="bold"
            size="small"
            margin="10 10 10 10"
-            children={t('profileAuthenticated')}></Text>
+            children={
+              isActivationNeeded(props?.vcMetadata.issuer)
+                ? t('profileAuthenticated')
+                : t('credentialActivated')
+            }></Text>
        </Row>
      </Row>
    </ListItem>
--- a/screens/Scan/SendVcScreen.tsx
+++ b/screens/Scan/SendVcScreen.tsx
@@ -118,6 +118,7 @@ export const SendVcScreen: React.FC = () => {

          <Button
            type="gradient"
+            styles={{marginTop: 12}}
            title={t('acceptRequest')}
            disabled={controller.selectedIndex == null}
            onPress={controller.ACCEPT_REQUEST}
--- a/shared/constants.ts
+++ b/shared/constants.ts
@@ -98,24 +98,3 @@ export type IndividualId = {
 export const NETWORK_REQUEST_FAILED = 'Network request failed';
 export const REQUEST_TIMEOUT = 'request timedout';
 export const BIOMETRIC_CANCELLED = 'User has cancelled biometric';
-
-export const CARD_VIEW_DEFAULT_FIELDS = ['fullName'];
-
-export const DETAIL_VIEW_DEFAULT_FIELDS = [
-  'fullName',
-  'gender',
-  'phone',
-  'dateOfBirth',
-  'email',
-  'address',
-];
-
-//todo UIN & VID to be removed once we get the fields in the wellknown endpoint
-export const CARD_VIEW_ADD_ON_FIELDS = ['UIN', 'VID'];
-export const DETAIL_VIEW_ADD_ON_FIELDS = [
-  'UIN',
-  'VID',
-  'status',
-  'credentialRegistry',
-  'idType',
-];
--- a/shared/openId4VCI/Utils.ts
+++ b/shared/openId4VCI/Utils.ts
@@ -34,6 +34,10 @@ export const getIDType = (verifiableCredential: VerifiableCredential) => {

 export const ACTIVATION_NOT_NEEDED = [Issuers.Sunbird];

+export const isActivationNeeded = (issuer: string) => {
+  return ACTIVATION_NOT_NEEDED.indexOf(issuer) === -1;
+};
+
 export const Issuers_Key_Ref = 'OpenId4VCI_KeyPair';

 export const getIdentifier = (context, credential) => {