Merge pull request #750 from Anil-kumar-Majji/ui-revamp-release

INJI new UI/UX release

.env

@@ -9,3 +9,6 @@ APPLICATION_THEME=orange
 
 #environment can be changed if it is toggled
 CREDENTIAL_REGISTRY_EDIT=true
+
+#supported languages( en, fil, ar, hi, kn, ta)
+APPLICATION_LANGUAGE=en

.github/workflows/clear_artifacts.yml

@@ -1,4 +1,7 @@
 name: 'Delete old artifacts'
+on:
+  workflow_dispatch:
+name: 'Delete old artifacts'
 on:
   workflow_dispatch:
 
@@ -8,5 +11,5 @@ jobs:
     steps:
       - uses: kolpav/purge-artifacts-action@v1
         with:
-          token: ${{ secrets. access_token }}
+          token: ${{ secrets.ACTION_PAT }}
           expire-in: 2days # Setting this to 0 will delete all artifacts

android/app/src/main/res/values/colors.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <resources>
-  <color name="splashscreen_background">#ffffff</color>
+  <color name="splashscreen_background">#F59B4B</color>
   <color name="iconBackground">#FFFFFF</color>
   <color name="colorPrimary">#023c69</color>
   <color name="colorPrimaryDark">#ffffff</color>

android/app/src/main/res/values/strings.xml

@@ -4,6 +4,6 @@
   <string name="app_name_mosip">MOSIP Resident App - Mosip/Inji</string>
   <string name="app_name_newlogic">MOSIP Resident App - Newlogic</string>
   <string name="app_name_ph">MOSIP Resident App - PH</string>
-  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">cover</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
 </resources>

app.config.ts

@@ -6,7 +6,7 @@ export default {
   icon: './assets/icon.png',
   splash: {
     image: './assets/splash.png',
-    resizeMode: 'contain',
+    resizeMode: 'cover',
     backgroundColor: '#ffffff',
   },
   updates: {

components/ActivityLogText.tsx

@@ -14,6 +14,7 @@ export const ActivityLogText: React.FC<{ activity: ActivityLog }> = (props) => {
     <TextItem
       label={getActionLabel(activity, i18n.language)}
       text={`${activity.vcLabel} ${t(activity.type)}`}
+      topDivider
     />
   );
 };

components/DeviceInfoList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TextItem } from './ui/TextItem';
+import { Text } from './ui';
 
 export const DeviceInfoList: React.FC<DeviceInfoProps> = (props) => {
   const { t } = useTranslation('DeviceInfoList');
@@ -17,7 +17,6 @@ export const DeviceInfoList: React.FC<DeviceInfoProps> = (props) => {
 };
 
 interface DeviceInfoProps {
-  of: 'sender' | 'receiver';
   deviceInfo: DeviceInfo;
 }
 

components/EditableListItem.tsx

@@ -18,24 +18,27 @@ export const EditableListItem: React.FC<EditableListItemProps> = (props) => {
   }, [props.credentialRegistryResponse]);
 
   return (
-    <ListItem
-      bottomDivider
-      onPress={() => setIsEditing(true)}
-      style={{ display: props.display }}>
+    <ListItem bottomDivider topDivider onPress={() => setIsEditing(true)}>
       <Icon
         name={props.Icon}
-        type="antdesign"
-        size={20}
-        style={Theme.Styles.profileIconBg}
+        containerStyle={Theme.Styles.settingsIconBg}
+        type={props.IconType}
+        size={22}
         color={Theme.Colors.Icon}
       />
       <ListItem.Content>
         <ListItem.Title>
-          <Text color={Theme.Colors.profileLabel}>{props.label}</Text>
+          <Text weight="semibold" color={Theme.Colors.profileLabel}>
+            {props.label}
+          </Text>
         </ListItem.Title>
         <Text color={Theme.Colors.profileValue}>{props.value}</Text>
       </ListItem.Content>
-
+      <Icon
+        name="chevron-right"
+        size={21}
+        color={Theme.Colors.profileLanguageValue}
+      />
       <Overlay
         overlayStyle={{ padding: 24, elevation: 6 }}
         isVisible={isEditing}
@@ -91,6 +94,7 @@ interface EditableListItemProps {
   label: string;
   value: string;
   Icon: string;
+  IconType?: string;
   onEdit: (newValue: string) => void;
   display?: 'none' | 'flex';
   credentialRegistryResponse: string;

components/HelpScreen.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Pressable } from 'react-native';
+import { Modal } from './ui/Modal';
+import { ScrollView } from 'react-native-gesture-handler';
+import { MainRouteProps } from '../routes/main';
+import { Column, Text } from './ui';
+import { Theme } from './ui/styleUtils';
+
+export const HelpScreen: React.FC<HelpScreenProps & MainRouteProps> = (
+  props
+) => {
+  const { t } = useTranslation('HelpScreen');
+
+  const [showHelpPage, setShowHelpPage] = useState(false);
+
+  return (
+    <React.Fragment>
+      <Pressable
+        onPress={() => {
+          setShowHelpPage(!showHelpPage);
+        }}>
+        {props.triggerComponent}
+      </Pressable>
+      <Modal
+        isVisible={showHelpPage}
+        headerTitle={t('header')}
+        headerElevation={2}
+        onDismiss={() => {
+          setShowHelpPage(!showHelpPage);
+        }}>
+        <ScrollView>
+          <Column fill padding="10" align="space-between">
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('whatIsDigitalCredential?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-1')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('whatCanDoWithDigitalCredential?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-2')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('howToAddCard?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-3')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('howToRemoveCardFromWallet?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-4')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('canWeAddMultipleCards?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-5')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('howToShareCard?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-6')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('howToActivateCardForOnlineLogin?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-7')}</Text>
+            <Text margin="7" style={Theme.TextStyles.header}>
+              {t('howToViewActivity?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetailes}>{t('detail-8')}</Text>
+          </Column>
+        </ScrollView>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+interface HelpScreenProps {
+  triggerComponent: React.ReactElement;
+}

components/KebabPopUp.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { BottomSheet, Icon, ListItem } from 'react-native-elements';
+import { Theme } from '../components/ui/styleUtils';
+import { Centered, Column, Row, Text } from '../components/ui';
+import { WalletBinding } from '../screens/Home/MyVcs/WalletBinding';
+import { Pressable } from 'react-native';
+import { useKebabPopUp } from './KebabPopUpController';
+import { ActorRefFrom } from 'xstate';
+import { vcItemMachine } from '../machines/vcItem';
+import { useTranslation } from 'react-i18next';
+import { HistoryTab } from '../screens/Home/MyVcs/HistoryTab';
+import { RemoveVcWarningOverlay } from '../screens/Home/MyVcs/RemoveVcWarningOverlay';
+
+export const KebabPopUp: React.FC<KebabPopUpProps> = (props) => {
+  const controller = useKebabPopUp(props);
+  const { t } = useTranslation('HomeScreenKebabPopUp');
+  return (
+    <Column>
+      <Icon
+        name={props.iconName}
+        type={props.iconType}
+        color={Theme.Colors.GrayIcon}
+      />
+      <BottomSheet
+        isVisible={props.isVisible}
+        containerStyle={Theme.KebabPopUpStyles.kebabPopUp}>
+        <Row style={Theme.KebabPopUpStyles.kebabHeaderStyle}>
+          <Text weight="bold">{t('title')}</Text>
+          <Icon
+            name="close"
+            onPress={props.onDismiss}
+            color={Theme.Colors.Details}
+            size={25}
+          />
+        </Row>
+        <Column>
+          <ListItem bottomDivider>
+            <ListItem.Content>
+              <ListItem.Title>
+                <Pressable onPress={controller.PIN_CARD}>
+                  <Text size="small" weight="bold">
+                    {props.vcKey.split(':')[4] == 'true'
+                      ? t('unPinCard')
+                      : t('pinCard')}
+                  </Text>
+                </Pressable>
+              </ListItem.Title>
+            </ListItem.Content>
+          </ListItem>
+
+          <WalletBinding
+            label={t('offlineAuthenticationDisabled!')}
+            content={t('offlineAuthDisabledMessage')}
+            service={props.service}
+          />
+
+          <HistoryTab
+            service={props.service}
+            label={t('viewActivityLog')}
+            vcKey={props.vcKey}
+          />
+
+          <ListItem bottomDivider>
+            <ListItem.Content>
+              <ListItem.Title>
+                <Pressable onPress={() => controller.REMOVE(props.vcKey)}>
+                  <Text size="small" weight="bold">
+                    {t('removeFromWallet')}
+                  </Text>
+                </Pressable>
+              </ListItem.Title>
+            </ListItem.Content>
+          </ListItem>
+
+          <RemoveVcWarningOverlay
+            isVisible={controller.isRemoveWalletWarning}
+            onConfirm={controller.CONFIRM}
+            onCancel={controller.CANCEL}
+          />
+        </Column>
+      </BottomSheet>
+    </Column>
+  );
+};
+
+export interface KebabPopUpProps {
+  iconName: string;
+  iconType?: string;
+  vcKey: string;
+  isVisible: boolean;
+  onDismiss: () => void;
+  service: ActorRefFrom<typeof vcItemMachine>;
+}

components/KebabPopUpController.tsx

@@ -0,0 +1,80 @@
+import { useSelector } from '@xstate/react';
+import { ActorRefFrom } from 'xstate';
+import {
+  selectKebabPopUpWalletBindingInProgress,
+  selectKebabPopUp,
+  selectKebabPopUpAcceptingBindingOtp,
+  selectKebabPopUpBindingWarning,
+  selectRemoveWalletWarning,
+  selectEmptyWalletBindingId,
+  selectIsPinned,
+  selectOtpError,
+  selectShowWalletBindingError,
+  selectWalletBindingError,
+  VcItemEvents,
+  vcItemMachine,
+  selectShowActivities,
+} from '../machines/vcItem';
+import { selectActivities } from '../machines/activityLog';
+import { GlobalContext } from '../shared/GlobalContext';
+import { useContext } from 'react';
+
+export function useKebabPopUp(props) {
+  const service = props.service as ActorRefFrom<typeof vcItemMachine>;
+  const PIN_CARD = () => service.send(VcItemEvents.PIN_CARD());
+  const KEBAB_POPUP = () => service.send(VcItemEvents.KEBAB_POPUP());
+  const ADD_WALLET_BINDING_ID = () =>
+    service.send(VcItemEvents.ADD_WALLET_BINDING_ID());
+  const CONFIRM = () => service.send(VcItemEvents.CONFIRM());
+  const REMOVE = (vcKey: string) => service.send(VcItemEvents.REMOVE(vcKey));
+  const DISMISS = () => service.send(VcItemEvents.DISMISS());
+  const CANCEL = () => service.send(VcItemEvents.CANCEL());
+  const SHOW_ACTIVITY = () => service.send(VcItemEvents.SHOW_ACTIVITY());
+  const INPUT_OTP = (otp: string) => service.send(VcItemEvents.INPUT_OTP(otp));
+  const isPinned = useSelector(service, selectIsPinned);
+  const isBindingWarning = useSelector(service, selectKebabPopUpBindingWarning);
+  const isRemoveWalletWarning = useSelector(service, selectRemoveWalletWarning);
+  const isAcceptingOtpInput = useSelector(
+    service,
+    selectKebabPopUpAcceptingBindingOtp
+  );
+  const isWalletBindingError = useSelector(
+    service,
+    selectShowWalletBindingError
+  );
+  const otpError = useSelector(service, selectOtpError);
+  const walletBindingError = useSelector(service, selectWalletBindingError);
+  const WalletBindingInProgress = useSelector(
+    service,
+    selectKebabPopUpWalletBindingInProgress
+  );
+  const emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
+  const isKebabPopUp = useSelector(service, selectKebabPopUp);
+  const isShowActivities = useSelector(service, selectShowActivities);
+  const { appService } = useContext(GlobalContext);
+  const activityLogService = appService.children.get('activityLog');
+
+  return {
+    isPinned,
+    PIN_CARD,
+    KEBAB_POPUP,
+    ADD_WALLET_BINDING_ID,
+    CONFIRM,
+    DISMISS,
+    REMOVE,
+    CANCEL,
+    INPUT_OTP,
+    SHOW_ACTIVITY,
+    isBindingWarning,
+    isAcceptingOtpInput,
+    isWalletBindingError,
+    walletBindingError,
+    otpError,
+    WalletBindingInProgress,
+    emptyWalletBindingId,
+    isKebabPopUp,
+    isShowActivities,
+    isRemoveWalletWarning,
+    activities: useSelector(activityLogService, selectActivities),
+  };
+}