@fadyshawky/react-native-magic 2.0.4 → 2.0.6

package/template/src/navigation/TabBar.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
-import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
-import {CommonStyles} from '../core/theme/commonStyles';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
 } from '@react-navigation/bottom-tabs';
-import {ImageSourcePropType} from 'react-native';
 import {toString} from 'lodash';
-import {NaturalColors, PrimaryColors} from '../core/theme/colors';
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {RTLAwareText} from '../common/components/RTLAwareText';
+import {RTLAwareView} from '../common/components/RTLAwareView';
+import {
+  useRTL,
+  useTranslation,
+} from '../common/localization/LocalizationProvider';
+import {BlackColors, NewColors} from '../core/theme/colors';
+import {CommonSizes} from '../core/theme/commonSizes';
+import {CommonStyles} from '../core/theme/commonStyles';
+import {scaleHeight, scaleWidth} from '../core/theme/scaling';
+import {useTheme} from '../core/theme/ThemeProvider';
 
 interface TabBarOptions extends BottomTabNavigationOptions {
   selectedIcon: ImageSourcePropType;
@@ -16,58 +29,94 @@ interface TabBarOptions extends BottomTabNavigationOptions {
 }
 
 export function TabBar({state, descriptors, navigation}: BottomTabBarProps) {
-  return (
-    <View style={styles.container}>
-      {state.routes.map((route, index) => {
-        const {options} = descriptors[route.key] as unknown as {
-          options: TabBarOptions;
-        };
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const isRTL = useRTL();
+  const tabArray = ['Main', 'Financials', 'Account'];
 
-        const isFocused = state.index === index;
+  // Create a copy of routes array to avoid modifying the original
+  const routesToRender = [...state.routes].filter(r =>
+    tabArray.includes(r.name),
+  );
+
+  // If RTL, reverse the order of tabs
+  if (isRTL) {
+    routesToRender.reverse();
+  }
+
+  return (
+    state.index <= 3 && (
+      <RTLAwareView style={styles.container}>
+        {routesToRender.map((route, index) => {
+          // Calculate the correct index in the original array for focused state
+          const originalIndex = isRTL ? state.routes.length - 1 - index : index;
+          const isFocused = state.index === originalIndex;
 
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
+          const {options} = descriptors[route.key] as unknown as {
+            options: TabBarOptions;
+          };
 
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
+          // Get localized tab name
+          let label = route.name;
+          if (options.tabBarLabel !== undefined) {
+            label = options.tabBarLabel as string;
+          } else if (options.title !== undefined) {
+            label = options.title;
+          } else {
+            // Try to get localized name from mainNavigation translations
+            const localizedName = t(`tabs.${route.name}`, 'mainNavigation');
+            if (localizedName !== `tabs.${route.name}`) {
+              label = localizedName;
+            }
           }
-        };
 
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
 
-        return (
-          <TouchableOpacity
-            key={route.key}
-            accessibilityRole="button"
-            accessibilityState={isFocused ? {selected: true} : {}}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={styles.tabButton}>
-            <Image source={isFocused ? options.selectedIcon : options.icon} />
-            <Text style={[styles.label, isFocused && styles.labelFocused]}>
-              {toString(label)}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
+            }
+          };
+
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+
+          return (
+            <TouchableOpacity
+              key={route.key}
+              accessibilityRole="button"
+              accessibilityState={isFocused ? {selected: true} : {}}
+              accessibilityLabel={
+                options.tabBarAccessibilityLabel || label?.toString()
+              }
+              testID={options.tabBarTestID}
+              onPressIn={onPress}
+              onLongPress={onLongPress}
+              style={styles.tabButton}>
+              <Image
+                style={{
+                  width: scaleWidth(57),
+                  height: scaleHeight(63),
+                  resizeMode: 'contain',
+                }}
+                source={isFocused ? options.selectedIcon : options.icon}
+              />
+              <RTLAwareText style={[theme.text.navBar]}>
+                {toString(label)}
+              </RTLAwareText>
+            </TouchableOpacity>
+          );
+        })}
+      </RTLAwareView>
+    )
   );
 }
 
@@ -75,20 +124,23 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    height: 100,
-    borderTopLeftRadius: 50,
-    borderTopRightRadius: 50,
+    height: scaleHeight(130),
+    borderTopLeftRadius: CommonSizes.borderRadius.huge,
+    borderTopRightRadius: CommonSizes.borderRadius.huge,
     justifyContent: 'space-evenly',
-    ...CommonStyles.shadow,
+    ...CommonStyles.dropShadow,
+    backgroundColor: BlackColors.indigoBlue,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   tabButton: {
     flex: 1,
     alignItems: 'center',
   },
-  label: {
-    color: NaturalColors.grayScale_50,
-  },
+  label: {},
   labelFocused: {
-    color: PrimaryColors.PlatinateBlue_700,
+    color: NewColors.blueNormalActive,
   },
 });

package/template/src/navigation/types.ts

@@ -8,4 +8,28 @@ export type RootStackParamList = {
   Profile: undefined;
   Settings: undefined;
   Splash: undefined;
+  OTP: {phone?: string};
+  ForceChangePassword: undefined;
+  Services: {providerID: string};
+  SingleService: {serviceID?: string};
+  InquiredBill: undefined;
+  Loading: undefined;
+  PaymentConfirmation: {
+    paymentData: {
+      amountToBePaid: string;
+      billInfo: any;
+      fees: number;
+      currencyCode: string;
+      billRec: {
+        BillingAcct: string;
+        BillerId: string;
+        BillTypeCode: number;
+        BillRefNumber: string;
+        BillStatus: string;
+      };
+    };
+  };
+  Categories: undefined;
+  Providers: {categoryID: string};
+  ReceiptScreen: {type: 'print' | 'history'; historyID?: string};
 };

package/template/src/screens/Login/Login.tsx

@@ -1,39 +1,44 @@
 import {useNavigation} from '@react-navigation/native';
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import {toLower} from 'lodash';
 import React, {useRef, useState} from 'react';
-import {
-  findNodeHandle,
-  NativeSyntheticEvent,
-  StyleSheet,
-  Text,
-  TextInputFocusEventData,
-} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
+import {Container} from '../../common/components/Container';
 import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
-import {localization} from '../../common/localization/localization';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {
+  useRTL,
+  useTranslation,
+} from '../../common/localization/LocalizationProvider';
+import {phoneValidations} from '../../common/validations/authValidations';
 import {emptyValidation} from '../../common/validations/commonValidations';
 import {useInputError} from '../../common/validations/hooks/useInputError';
-import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {CommonStyles} from '../../core/theme/commonStyles';
+import {Fonts} from '../../core/theme/fonts';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {Header} from '../../navigation/HeaderComponents';
 import type {RootStackParamList} from '../../navigation/types';
 
 export function Login(): JSX.Element {
   const dispatch = useAppDispatch();
-  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const isRTL = useRTL();
 
-  const {error: emailError, recheckValue: recheckEmail} = useInputError(
-    email,
-    emailValidations,
+  const {error: phoneError, recheckValue: recheckPhone} = useInputError(
+    phone,
+    phoneValidations,
   );
   const {error: passwordError, recheckValue: recheckPassword} = useInputError(
     password,
@@ -41,111 +46,104 @@ export function Login(): JSX.Element {
   );
 
   async function loginUser() {
-    const emailValid = recheckEmail() === null;
+    const phoneValid = recheckPhone() === null;
     const passwordValid = recheckPassword() === null;
 
-    if (!emailValid || !passwordValid) {
+    if (!phoneValid || !passwordValid) {
       return;
     }
+    try {
+      setLoading(true);
+      const result = await dispatch(
+        userLogin({
+          phone: phone,
+          password,
+        }),
+      );
 
-    setLoading(true);
-    await dispatch(
-      userLogin({
-        email: toLower(email),
-        password,
-      }),
-    );
-    setLoading(false);
-  }
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  function scrollToInput(reactNode: any) {
-    // Add a 'scroll' ref to your ScrollView
-
-    // setTimeout(() => {
-    scroll.current?.scrollToFocusedInput(reactNode);
-    // }, 500);
+      if (userLogin.fulfilled.match(result)) {
+        navigation.navigate('OTP', {phone: phone});
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
   }
 
-  const goToRegistration = () => {
-    navigation.navigate('Registration');
-  };
-
   const goToForgotPassword = () => {
     navigation.navigate('ForgotPassword');
   };
 
   return (
-    <KeyboardAwareScrollView
+    <Container
       ref={scroll}
-      resetScrollToCoords={{x: 0, y: 0}}
-      scrollEnabled={true}
-      enableOnAndroid={true}
-      testID={'MainPageID'}
+      testID={'LoginScreenID'}
       contentContainerStyle={styles.contentContainer}
-      contentInsetAdjustmentBehavior={'automatic'}
-      style={styles.container}>
-      <Text style={CommonStyles.h1_semiBold}>{localization.login.Login}</Text>
+      style={styles.container}
+      backgroundImage={0}
+      withoutPadding
+      extendedBackground
+      backgroundColor={theme.colors.background_2}>
+      <Header />
+      <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
+        {t('welcome', 'login')}
+      </RTLAwareText>
       <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        autoCapitalize="none"
-        value={email}
-        onChangeText={setEmail}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.Email}
-        placeholder={localization.login.EnterEmail}
-        error={emailError}
+        value={phone}
+        onChangeText={setPhone}
+        error={phoneError}
+        keyboardType="numeric"
+        placeholder={t('EnterPhone', 'login')}
       />
       <PrimaryTextInput
-        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
-          scrollToInput(findNodeHandle(event.target));
-        }}
-        clearButtonMode="never"
         value={password}
-        secureTextEntry
         onChangeText={setPassword}
-        containerStyle={CommonStyles.textInputContainer}
-        label={localization.login.Password}
-        placeholder={localization.login.EnterPassword}
         error={passwordError}
+        secureTextEntry={true}
+        keyboardType="numeric"
+        placeholder={t('EnterPassword', 'login')}
       />
+
+      <RTLAwareView
+        style={{width: '100%', alignItems: isRTL ? 'flex-start' : 'flex-end'}}>
+        <PrimaryButton
+          label={t('forgetPassword', 'login')}
+          onPressIn={goToForgotPassword}
+          type={ButtonType.borderless}
+        />
+      </RTLAwareView>
       <PrimaryButton
+        label={t('Login', 'login')}
+        onPressIn={loginUser}
         isLoading={loading}
-        onPress={loginUser}
-        label={localization.login.continue}
+        disabled={loading}
         type={ButtonType.solid}
       />
-    </KeyboardAwareScrollView>
+    </Container>
   );
 }
 
 const styles = StyleSheet.create({
-  imageContainer: {
-    ...CommonStyles.flex1,
-    justifyContent: 'flex-end',
-  },
   container: {
     flexGrow: 1,
-    borderTopRightRadius: CommonSizes.borderRadius.lg,
-    borderTopLeftRadius: CommonSizes.borderRadius.lg,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.xl,
+    justifyContent: 'flex-start',
   },
   contentContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.lg,
-    paddingVertical: 26,
-    gap: 16,
+    flexGrow: 1,
   },
-  forgotPassword: {
-    ...CommonStyles.normalText,
-    textAlign: 'right',
-    marginTop: 8,
-    marginBottom: 24,
+  formContainer: {
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
   },
-  registerLink: {
-    ...CommonStyles.normalText,
+  title: {
     textAlign: 'center',
-    marginTop: 16,
+    fontSize: CommonSizes.font.bodyLarge,
+    fontWeight: 'bold',
+    fontFamily: Fonts.regular,
   },
 });

package/template/src/screens/OTP/OTPScreen.tsx

@@ -0,0 +1,169 @@
+import {useNavigation, useRoute} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {Container} from '../../common/components/Container';
+import {OTPInput} from '../../common/components/OTPInput';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {
+  useRTL,
+  useTranslation,
+} from '../../common/localization/LocalizationProvider';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {verifyOTP} from '../../core/store/user/userActions';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {HeaderBack} from '../../navigation/HeaderComponents';
+import type {RootStackParamList} from '../../navigation/types';
+
+export function OTPScreen(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const [otp, setOTP] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [resendDisabled, setResendDisabled] = useState(false);
+  const [timer, setTimer] = useState(60);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const route = useRoute();
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+  const {theme} = useTheme();
+  const {phone} = route.params as {phone: string};
+  const t = useTranslation();
+  const isRTL = useRTL();
+
+  const {error: otpError, recheckValue: recheckOTP} = useInputError(
+    otp,
+    value => (value.length === 6 ? null : 'Please enter a valid OTP code'),
+  );
+
+  async function handleVerifyOTP() {
+    const otpValid = recheckOTP() === null;
+
+    if (!otpValid) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      const result = await dispatch(
+        verifyOTP({
+          verification_code: otp?.toString(),
+          mobile_number: phone,
+          device_token: undefined,
+          scheme_id: 1,
+        }),
+      );
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const handleResendOTP = () => {
+    if (resendDisabled) return;
+
+    setResendDisabled(true);
+    setTimer(60);
+
+    // Add your resend OTP logic here
+    // dispatch(resendOTP());
+
+    const interval = setInterval(() => {
+      setTimer(prevTimer => {
+        if (prevTimer <= 1) {
+          clearInterval(interval);
+          setResendDisabled(false);
+          return 0;
+        }
+        return prevTimer - 1;
+      });
+    }, 1000);
+  };
+
+  return (
+    <Container
+      ref={scroll}
+      testID={'OTPScreenID'}
+      contentContainerStyle={styles.contentContainer}
+      style={styles.container}
+      backgroundImage={0}
+      withoutPadding
+      extendedBackground
+      backgroundColor={theme.colors.background_2}>
+      <HeaderBack onPress={() => navigation.goBack()} />
+      <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
+        {t('title', 'otp')}
+      </RTLAwareText>
+      <RTLAwareText style={{...theme.text.body2, textAlign: 'center'}}>
+        {t('subtitle', 'otp')}
+      </RTLAwareText>
+      <View style={styles.inputContainer}>
+        <OTPInput value={otp} onChange={setOTP} error={otpError} />
+        {otpError && (
+          <RTLAwareText style={[theme.text.body2, styles.errorText]}>
+            {otpError}
+          </RTLAwareText>
+        )}
+      </View>
+      <RTLAwareView style={styles.resendContainer}>
+        <RTLAwareText style={{...theme.text.body2}}>
+          {resendDisabled
+            ? t('resendIn', 'otp').replace('{0}', timer?.toString())
+            : t('didntReceiveCode', 'otp')}
+        </RTLAwareText>
+        <PrimaryButton
+          label={t('resend', 'otp')}
+          onPressIn={handleResendOTP}
+          disabled={resendDisabled}
+          type={ButtonType.borderless}
+          style={styles.resendButton}
+        />
+      </RTLAwareView>
+      <PrimaryButton
+        label={t('verify', 'otp')}
+        onPressIn={handleVerifyOTP}
+        isLoading={loading}
+        disabled={loading || otp.length < 4}
+        type={ButtonType.solid}
+      />
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.medium,
+    gap: 8,
+    justifyContent: 'flex-start',
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  inputContainer: {
+    width: '100%',
+    marginTop: CommonSizes.spacing.large,
+  },
+  resendContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: CommonSizes.spacing.small,
+  },
+  resendButton: {
+    marginLeft: CommonSizes.spacing.small,
+  },
+  errorText: {
+    color: '#FF4444',
+    marginTop: CommonSizes.spacing.small,
+    textAlign: 'center',
+  },
+});