@fadyshawky/react-native-magic 2.0.4 → 2.0.6

package/template/src/core/store/user/userState.ts

@@ -1,44 +1,167 @@
 import {LoadState} from '../../../../types';
 
 export interface UserState {
-  user: UserEntity;
+  user: User;
+  current_balance: number;
+  daily_commission: number;
   accessToken: string;
-  loginLoading: LoadState;
+  loginLoading: string;
+  tempToken: string;
+  favoriteCategories: number[];
+  favoriteProviders: number[];
+  history: HistoryEntity[];
+  historyDetails: HistoryDetailsEntity[];
+}
+export interface User {
+  type: string;
+  mobile_number: string;
+  full_name: string;
+  merchantStore: MerchantStore;
+  status: string;
+}
+export interface MerchantStore {
+  id: number;
+  wallet_user_id: number;
+  name: string;
+  address: string;
+  city: string;
+  region: string;
+  store_imgs?: null;
+  tax_card?: null;
+  commercial_registration?: null;
+  createdAt: string;
+  updatedAt: string;
+  id_front: string;
+  id_back: string;
+  selfie?: null;
+}
+export interface HistoryEntity {
+  id: number;
+  transaction_reference_num: string;
+  bee_transaction_id?: null;
+  fawry_transaction_id?: string | null;
+  transaction_serial_num?: string | null;
+  amount: string | number;
+  sender_fees: string;
+  reciever_fees: string;
+  sender_identifier: string;
+  reciever_identifier: string;
+  status: string;
+  sender_status: string;
+  receiver_status: string;
+  reason?: null;
+  transactionReason: string;
+  display_reason?: null;
+  sender_interchange_amount: string;
+  receiver_interchange_amount: string;
+  sender_commission: string;
+  receiver_commission: string;
+  bulk_id?: null;
+  sender_name: string;
+  receiver_name: string;
+  notification_id?: null;
+  transaction_data?: null;
+  convenience: string;
+  tips: string;
+  reference1?: null;
+  reference2?: null;
+  meta?: null;
+  createdAt: string;
+  updatedAt: string;
+  transaction_type: number;
+  sender_id: number;
+  reciever_id: number;
+  sender_scheme_id: number;
+  receiver_scheme_id: number;
+  'Transaction_type.id': number;
+  'Transaction_type.name': string;
+  'Transaction_type.name_ar'?: null;
+  'Transaction_type.request_type': string;
+  'Transaction_type.request_type_ar'?: null;
+  'Transaction_type.timeout': string;
+  'Transaction_type.on_off_us': string;
+  'Transaction_type.sender_type': string;
+  'Transaction_type.profile_type'?: null;
+  'Transaction_type.receiver_type': string;
+  'Transaction_type.tahweel_operation': string;
+  'Transaction_type.send_fees'?: string | null;
+  'Transaction_type.receive_fees': string;
+  'Transaction_type.send_limit': string;
+  'Transaction_type.receive_limit': string;
+  'Transaction_type.send_commision'?: string | null;
+  'Transaction_type.receive_commision'?: null;
+  'Transaction_type.createdAt': string;
+  'Transaction_type.updatedAt': string;
+  providerName?: string | null;
+  serviceName?: string | null;
+  totalAmount?: number | null;
+}
+export interface HistoryDetailsEntity {
+  value: string;
+  type: string;
+  label?: string;
+}
+
+export enum UserStatus {
+  ACTIVE = 'Active',
+  REGISTERED = 'Registered',
+  SUSPENDED = 'Suspended',
+  PENDING = 'Pending',
 }
 
 export interface UserPayload {
-  user: UserEntity;
+  type: string;
+  mobile_number: string;
+  full_name: string;
+  merchantStore: MerchantStore;
+  requests: HistoryEntity[];
+  data: HistoryDetailsEntity[];
+  balance: {
+    name: string;
+    value: number;
+  }[];
+  current_balance: {
+    name: string;
+    value: number;
+  }[];
+  status: UserStatus;
+  fullname: string;
   token: string;
 }
 
 export const UserInitialState: UserState = {
   user: {
-    id: 0,
-    email: '',
-    first_name: '',
-    last_name: '',
-    phone_number: '',
-    address: '',
-    role_id: 0,
-    created_at: '',
-    updated_at: '',
-    deleted_at: null,
-    roleName: '',
+    type: '',
+    mobile_number: '',
+    full_name: '',
+    status: UserStatus.PENDING,
+    merchantStore: {
+      id: 0,
+      wallet_user_id: 0,
+      name: '',
+      address: '',
+      city: '',
+      region: '',
+      createdAt: '',
+      updatedAt: '',
+      id_front: '',
+      id_back: '',
+    },
   },
+  current_balance: 0,
+  daily_commission: 0,
   accessToken: '',
   loginLoading: LoadState['needLoad'],
+  tempToken: '',
+  favoriteCategories: [],
+  favoriteProviders: [],
+  history: [],
+  historyDetails: [],
 };
 
 export interface UserEntity {
-  id: number;
-  email: string;
-  first_name: string;
-  last_name: string;
-  phone_number: string;
-  address: string;
-  role_id: number;
-  created_at: string;
-  updated_at: string;
-  deleted_at?: null;
-  roleName: string;
+  type: string;
+  status: UserStatus;
+  mobile_number: string;
+  full_name: string;
 }

package/template/src/core/theme/colors.ts

@@ -23,6 +23,7 @@ export enum PrimaryColors {
 }
 
 export enum NaturalColors {
+  background_2 = '#F9F9F9',
   grayScale_0 = '#FAFAFA',
   grayScale_25 = '#A3AAAD',
   grayScale_50 = '#949C9E',
@@ -97,3 +98,14 @@ export enum AlertColors {
   discover_600 = '#472661',
   discover_700 = '#2F1940',
 }
+
+export enum BaseColors {
+  white = '#FFFFFF',
+  black = '#000000',
+  gray = '#808080',
+  red = '#FF0000',
+  green = '#00FF00',
+  blue = '#0000FF',
+  yellow = '#FFFF00',
+  purple = '#800080',
+}

package/template/src/core/theme/themes.ts

@@ -143,7 +143,7 @@ const commonTextStyles = {
   },
   button: {
     fontFamily: Fonts.regular,
-    fontSize: CommonSizes.font.bodyXLarge,
+    fontSize: CommonSizes.font.bodyLarge,
   },
   cards: {
     fontFamily: Fonts.bold,

package/template/src/core/utils/stringUtils.ts

@@ -0,0 +1,114 @@
+/**
+ * Safely converts any value to a string
+ * This is especially useful for error messages that might be objects
+ */
+import CryptoJS from 'crypto-js';
+
+export const ensureString = (value: any): string => {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof value === 'object') {
+    try {
+      // Try to extract a message property if it exists
+      if (value.message && typeof value.message === 'string') {
+        return value.message;
+      }
+
+      // Otherwise stringify the object
+      return JSON.stringify(value);
+    } catch (e) {
+      return '[Object]';
+    }
+  }
+
+  // For numbers, booleans, etc.
+  return String(value);
+};
+
+export function decryptTripleDES(
+  encryptedBase64: string,
+  secretKeyBase64: string,
+) {
+  try {
+    // Decode the key from base64
+    const decodedKey = CryptoJS.enc.Base64.parse(secretKeyBase64);
+
+    // Decode the encrypted value from base64
+    const encryptedWordArray = CryptoJS.enc.Base64.parse(encryptedBase64);
+
+    // Decrypt using Triple DES
+    const decrypted = CryptoJS.TripleDES.decrypt(
+      {ciphertext: encryptedWordArray},
+      decodedKey,
+      {
+        mode: CryptoJS.mode.ECB,
+        padding: CryptoJS.pad.Pkcs7,
+      },
+    );
+
+    let decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
+
+    if (!decryptedText) {
+      throw new Error('Decryption resulted in empty string');
+    }
+
+    decryptedText = decryptedText.replace(/(.{4})/g, '$1-');
+    if (decryptedText.endsWith('-')) {
+      decryptedText = decryptedText.slice(0, -1);
+    }
+
+    return decryptedText;
+  } catch (error) {
+    throw new Error(`Decryption failed`);
+  }
+}
+
+// Example usage:
+// const decrypted = decryptBase64('encrypted_base64_string', 'your_secret_key');
+
+/**
+ * Converts a camelCase string to PascalCase with specific formatting
+ * Example: billerId -> BillerId
+ * @param str The camelCase string to convert
+ * @returns The converted PascalCase string
+ */
+export const toPascalCase = (str: string): string => {
+  if (!str) return '';
+
+  // Split by capital letters and convert to array
+  const words = str.split(/(?=[A-Z])/);
+
+  // Capitalize first letter of each word and join
+  return words
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+};
+
+// Example usage:
+// toPascalCase('billerId') => 'BillerId'
+// toPascalCase('customerName') => 'CustomerName'
+// toPascalCase('accountNumber') => 'AccountNumber'
+
+/**
+ * Converts a PascalCase string to camelCase
+ * Example: BillerId -> billerId
+ * @param str The PascalCase string to convert
+ * @returns The converted camelCase string
+ */
+export const toCamelCase = (str: string): string => {
+  if (!str) return '';
+
+  // Convert first character to lowercase and keep the rest as is
+  return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+// Example usage:
+// toCamelCase('BillerId') => 'billerId'
+// toCamelCase('CustomerName') => 'customerName'
+// toCamelCase('AccountNumber') => 'accountNumber'

package/template/src/navigation/AuthStack.tsx

@@ -1,6 +1,7 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {useTranslation} from '../common/localization/LocalizationProvider';
 import {Login} from '../screens/Login/Login';
+import {OTPScreen} from '../screens/OTP/OTPScreen';
 import {Splash} from '../screens/splash/Splash';
 
 const Stack = createNativeStackNavigator();
@@ -23,6 +24,13 @@ export function AuthStack() {
         headerShown: false,
       },
     },
+    {
+      id: 'OTP',
+      component: OTPScreen,
+      options: {
+        headerShown: false,
+      },
+    },
   ];
 
   return (

package/template/src/navigation/HeaderComponents.tsx

@@ -1,18 +1,69 @@
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {useRTL} from '../common/localization/LocalizationProvider';
 import {CommonSizes} from '../core/theme/commonSizes';
 import {screenWidth} from '../core/theme/commonStyles';
 import {scaleWidth} from '../core/theme/scaling';
+import {useTheme} from '../core/theme/ThemeProvider';
+import {RootStackParamList} from './types';
+export function Header() {
+  return (
+    <View style={styles.headerBase}>
+      <Image source={0} style={styles.logo} />
+    </View>
+  );
+}
+
+export function HeaderBack({onPress}: {onPress: () => void}) {
+  return (
+    <View style={styles.headerWithBack}>
+      <BackButton onPress={onPress} />
+      <Image source={0} style={styles.logo} />
+      <View style={{width: 40}} />
+    </View>
+  );
+}
 
 export function HeaderButton({onPress}: {onPress: () => void}) {
   return (
     <View style={styles.headerWithBack}>
+      <BackButton onPress={onPress} />
       <View style={styles.logo} />
       <View style={{width: 40}} />
     </View>
   );
 }
 
+export function WebViewHeader({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<RootStackParamList>;
+}) {
+  return (
+    <View style={styles.webViewHeader}>
+      {/* <BackButton navigation={navigation} /> */}
+    </View>
+  );
+}
+
+function BackButton({onPress}: {onPress: () => void}) {
+  const {theme} = useTheme();
+  const isRTL = useRTL();
+  return (
+    <TouchableOpacity style={styles.backButton} onPressIn={onPress}>
+      <Image
+        tintColor={theme.colors.PlatinateBlue_100}
+        style={{
+          ...styles.backIcon,
+          transform: [{rotate: isRTL ? '180deg' : '0deg'}],
+        }}
+        source={0}
+      />
+    </TouchableOpacity>
+  );
+}
+
 const styles = StyleSheet.create({
   headerBase: {
     width: '100%',

package/template/src/navigation/MainNavigation.tsx

@@ -7,6 +7,8 @@ import {useAppSelector} from '../core/store/reduxHelpers';
 import {AuthStack} from './AuthStack';
 import {AppMainNavigator} from './MainStack';
 import {navigationRef} from './RootNavigation';
+import {NewColors} from '../core/theme/colors';
+import {Fonts} from '../core/theme/fonts';
 
 function AppNavigator() {
   const routeNameRef = useRef<string | undefined>(undefined);
@@ -22,7 +24,7 @@ function AppNavigator() {
         dark: false,
         colors: {
           primary: '#000',
-          background: 'white',
+          background: NewColors.background,
           card: '#fff',
           text: '#000',
           border: '#000',

package/template/src/navigation/MainStack.tsx

@@ -1,52 +1,52 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import React from 'react';
+import {useTranslation} from '../common/localization/LocalizationProvider';
+
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {Profile} from '../screens';
 import {HomeScreen} from '../screens/home/HomeScreen';
-import {Profile} from '../screens/profile/Profile';
-import {Settings} from '../screens/Settings/Settings';
 import {TabBar} from './TabBar';
 
-const MainScreens = [
-  {
-    id: 'Home',
-    component: HomeScreen,
-    options: {
-      tabBarLabel: 'Profile',
-    },
-  },
-  {
-    id: 'Profile',
-    component: Profile,
-    options: {
-      tabBarLabel: 'Profile',
-    },
-  },
-];
-
-const AppStack = [
-  {
-    id: 'Main',
-    component: MainTabs,
-    options: {
-      headerShown: false,
-    },
-  },
-  {
-    id: 'Settings',
-    component: Settings,
-    options: {},
-  },
-];
-
+const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
 
-const Tab = createBottomTabNavigator();
+export function AppMainNavigator() {
+  const t = useTranslation();
+
+  const MainScreens = [
+    {
+      id: 'Main',
+      component: HomeScreen,
+      options: {
+        tabBarLabel: t('tabs.Main', 'mainNavigation'),
+        headerShown: false,
+        icon: 0,
+        selectedIcon: 0,
+      },
+    },
+    {
+      id: 'Account',
+      component: Profile,
+      options: {
+        tabBarLabel: t('tabs.Account', 'mainNavigation'),
+        headerShown: false,
+        icon: 0,
+        selectedIcon: 0,
+      },
+    },
+  ];
 
-function MainTabs() {
   return (
     <Tab.Navigator
-      initialRouteName="Home"
-      tabBar={props => <TabBar {...props} />}>
+      initialRouteName="Main"
+      backBehavior="history"
+      detachInactiveScreens
+      tabBar={props => {
+        return <TabBar {...props} />;
+      }}
+      screenOptions={{
+        tabBarHideOnKeyboard: true,
+      }}>
       {MainScreens.map(s => (
         <Tab.Screen
           key={s.id}
@@ -58,20 +58,3 @@ function MainTabs() {
     </Tab.Navigator>
   );
 }
-
-export function AppMainNavigator() {
-  return (
-    <Stack.Navigator screenOptions={{animation: 'none'}}>
-      {AppStack.map(s => {
-        return (
-          <Stack.Screen
-            key={s.id}
-            name={s.id}
-            component={s.component}
-            options={s.options}
-          />
-        );
-      })}
-    </Stack.Navigator>
-  );
-}