@fadyshawky/react-native-magic 2.0.5 → 2.0.6

package/template/src/screens/home/HomeScreen.tsx

@@ -1,298 +1,5 @@
-import {useIsFocused, useNavigation} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useEffect, useRef} from 'react';
-import {Image, ImageURISource, StyleSheet, View, ViewStyle} from 'react-native';
-import {SkypeIndicator} from 'react-native-indicators';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {ButtonType} from '../../../types';
-import {Card} from '../../common/components/Cards';
-import {Container} from '../../common/components/Container';
-import {FlatListWrapper} from '../../common/components/FlatListWrapper';
-import {PrimaryButton} from '../../common/components/PrimaryButton';
-import {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {ImageResources} from '../../common/ImageResources.g';
-import {
-  useRTL,
-  useTranslation,
-} from '../../common/localization/LocalizationProvider';
-import {
-  clearSelectedCategory,
-  setSelectedCategory,
-} from '../../core/store/Categories/categorySlice';
-import {Category} from '../../core/store/Categories/categoryState';
-import {setSelectedProvider} from '../../core/store/Providers/providersSlice';
-import {ServiceProvider} from '../../core/store/Providers/providersState';
-import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
-import {RootState} from '../../core/store/rootReducer';
-import {UserStatus} from '../../core/store/user/userState';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {HomeHeader} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-import {useHomeData} from './hooks/useHomeData';
-import {PayByCode} from './Components/PayByCode';
-
-// Props for balance section component
-interface BalanceSectionProps {
-  title: string;
-  image: ImageURISource;
-  amount?: string;
-  style?: ViewStyle;
-}
-
-// Balance section component
-function BalanceSections({
-  title,
-  image,
-  amount,
-  style,
-}: BalanceSectionProps): JSX.Element {
-  const {theme} = useTheme();
-  const t = useTranslation();
-
-  return (
-    <View style={[styles.balanceSection, style]}>
-      <Image
-        style={{...styles.sectionImage, tintColor: theme.colors.tintColor}}
-        source={image}
-        resizeMode="contain"
-      />
-      <RTLAwareText style={[theme.text.balanceAmount, styles.amountText]}>
-        <RTLAwareText style={theme.text.balanceLabel}>
-          {t('currency') + '\n'}
-        </RTLAwareText>
-        {amount}
-      </RTLAwareText>
-      <RTLAwareText style={theme.text.balanceTitle}>{title}</RTLAwareText>
-    </View>
-  );
-}
-
-// Props for see more section component
-interface SeeMoreSectionProps {
-  title: string;
-  image: ImageURISource;
-  style?: ViewStyle;
-}
-
-// See more section component
-function SeeMoreSection({
-  title,
-  image,
-  style,
-}: SeeMoreSectionProps): JSX.Element {
-  const {theme} = useTheme();
-  return (
-    <View style={[styles.seeMoreSection, style]}>
-      <RTLAwareText style={theme.text.balanceTitle}>{title}</RTLAwareText>
-      <Image
-        style={{...styles.sectionImage, tintColor: theme.colors.tintColor}}
-        source={image}
-        resizeMode="contain"
-      />
-    </View>
-  );
-}
-
-// Balance card component
-function BalanceCard(): JSX.Element {
-  const {theme} = useTheme();
-  const t = useTranslation();
-  const isRTL = useRTL();
-  const {current_balance, daily_commission} = useAppSelector(
-    (state: RootState) => state.user,
-  );
-
-  return (
-    <RTLAwareView
-      style={[
-        styles.balanceCard,
-        {backgroundColor: theme.colors.balanceBackground},
-      ]}>
-      <RTLAwareView
-        style={{
-          width: '100%',
-          flexDirection: 'row',
-          justifyContent: 'space-evenly',
-          paddingVertical: CommonSizes.spacing.large,
-        }}>
-        <BalanceSections
-          title={t('currentBalance', 'home')}
-          image={ImageResources.balance}
-          amount={`${current_balance?.toFixed(2) ?? 0}`}
-        />
-        <BalanceSections
-          title={t('dailyCommission', 'home')}
-          image={ImageResources.commission}
-          amount={`${daily_commission ?? 0}`}
-        />
-      </RTLAwareView>
-    </RTLAwareView>
-  );
-}
+import React from 'react';
 
 export function HomeScreen(): JSX.Element {
-  const {
-    isLoading,
-    refreshData,
-    fetchData,
-    user,
-    categories,
-    loadState,
-    homeProviders,
-    isPayByCodeModalVisible,
-    setIsPayByCodeModalVisible,
-  } = useHomeData();
-  const dispatch = useAppDispatch();
-
-  const t = useTranslation();
-
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-
-  const {theme} = useTheme();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  const isFocused = useIsFocused();
-
-  useEffect(() => {
-    if (user.status === UserStatus.REGISTERED) {
-      navigation.navigate('ForceChangePassword');
-    }
-  }, [user.status]);
-
-  useEffect(() => {
-    if (categories.length === 0) {
-      fetchData();
-    }
-  }, [isFocused]);
-
-  function navigateToServices(provider: ServiceProvider) {
-    dispatch(clearSelectedCategory());
-    setTimeout(() => {
-      dispatch(setSelectedProvider(provider));
-      navigation.navigate('Services', {
-        providerID:
-          provider?.provider === 'Fawry'
-            ? provider?.BillerId?.toString()
-            : (provider?.id?.toString() as string),
-      });
-    }, 200);
-  }
-
-  function navigateToProviders(category: Category) {
-    dispatch(setSelectedCategory(category));
-    navigation.navigate('Providers', {
-      categoryID: category.id?.toString(),
-    });
-  }
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'HomeScreenID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
-      withoutPadding
-      backgroundColor={theme.colors.background}>
-      {isLoading ? (
-        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
-      ) : (
-        <>
-          <HomeHeader onPress={refreshData} />
-          <PrimaryButton
-            label={t('payByCode', 'home')}
-            type={ButtonType.solid}
-            onPress={() => setIsPayByCodeModalVisible(!isPayByCodeModalVisible)}
-          />
-          <BalanceCard />
-          <PrimaryButton
-            onPressIn={async () => {
-              navigation.navigate('Categories');
-            }}
-            label={t('allServices', 'common')}
-            type={ButtonType.solid}
-          />
-          <FlatListWrapper
-            keyExtractor={(item, index) => `${item.id}-${index}`}
-            loadState={loadState}
-            data={categories?.slice(1, 6)}
-            horizontal
-            renderItem={({item}) => (
-              <Card
-                key={item.id}
-                icon={{uri: item.img_url}}
-                title={item.name}
-                onPress={() => {
-                  navigateToProviders(item);
-                }}
-                marginRight={CommonSizes.spacing.extraLarge}
-              />
-            )}
-          />
-          <FlatListWrapper
-            keyExtractor={(item, index) => `${item.id}-${index}`}
-            loadState={loadState}
-            data={homeProviders?.slice(0, 5)}
-            horizontal
-            renderItem={({item}) => (
-              <Card
-                key={item.id}
-                icon={{uri: item.img_url}}
-                title={item.name || item.BillerName}
-                onPress={() => navigateToServices(item)}
-                marginRight={CommonSizes.spacing.extraLarge}
-              />
-            )}
-          />
-        </>
-      )}
-      <PayByCode
-        isVisible={isPayByCodeModalVisible}
-        onClose={() => setIsPayByCodeModalVisible(false)}
-      />
-    </Container>
-  );
+  return <></>;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    paddingBottom: scaleHeight(130),
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-    paddingHorizontal: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.large,
-    justifyContent: 'flex-start',
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  formContainer: {
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.large,
-  },
-  balanceSection: {
-    alignItems: 'center',
-    justifyContent: 'space-evenly',
-    gap: CommonSizes.spacing.large,
-  },
-  seeMoreSection: {
-    alignItems: 'center',
-    gap: CommonSizes.spacing.large,
-    alignSelf: 'center',
-  },
-  sectionImage: {
-    width: scaleWidth(120),
-    height: scaleHeight(70),
-  },
-  amountText: {
-    textAlign: 'left',
-  },
-  balanceCard: {
-    width: '100%',
-    borderRadius: CommonSizes.spacing.huge,
-  },
-});

package/template/src/screens/profile/Profile.tsx

@@ -1,293 +1,5 @@
-import React, {useState} from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Switch,
-  TouchableOpacity,
-  View,
-  Text,
-  Alert,
-  Image,
-} from 'react-native';
-import {ImageResources} from '../../common/ImageResources.g';
-import {Container} from '../../common/components/Container';
-import {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {
-  useLocalization,
-  useRTL,
-  useTranslation,
-} from '../../common/localization/LocalizationProvider';
-import {Languages} from '../../common/localization/localization';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {Theme} from '../../core/theme/types';
-import {scaleWidth, scaleHeight} from '../../core/theme/scaling';
-import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
-import {setProvidersLogout} from '../../core/store/Providers/providersSlice';
-import {setServiceLogout} from '../../core/store/Services/servicesSlice';
-import {setCategoriesLogout} from '../../core/store/Categories/categorySlice';
-import {setLogout} from '../../core/store/user/userSlice';
-import DeviceInfo from 'react-native-device-info';
-
-function SwitchButton({
-  onValueChange,
-  value,
-}: {
-  onValueChange: () => void;
-  value: boolean;
-}) {
-  const {theme} = useTheme();
-  return (
-    <TouchableOpacity
-      onPressIn={() => {
-        onValueChange();
-      }}
-      style={{
-        width: scaleWidth(100),
-        height: scaleHeight(53),
-        backgroundColor: theme.colors.mutedLavender,
-        borderRadius: theme.borderRadius.xl,
-        paddingHorizontal: scaleWidth(5),
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <View
-        style={{
-          width: scaleWidth(42),
-          height: scaleWidth(42),
-          backgroundColor: theme.colors.indigoBlue,
-          borderRadius: theme.borderRadius.xl,
-          alignSelf: value ? 'flex-end' : 'flex-start',
-        }}
-      />
-    </TouchableOpacity>
-  );
-}
+import React from 'react';
 
 export function Profile(): JSX.Element {
-  const {theme, toggleTheme} = useTheme();
-  const {currentLanguage, changeLanguage} = useLocalization();
-  const t = useTranslation();
-  const isRTL = useRTL();
-  const isArabic = currentLanguage === Languages.ar;
-  const isDarkMode = theme.mode === 'dark';
-  const {language: storedLanguage} = useAppSelector(state => state.app);
-  const dispatch = useAppDispatch();
-
-  const styles = createStyles(theme);
-
-  const handleLanguageToggle = () => {
-    const newLanguage = isArabic ? Languages.en : Languages.ar;
-
-    Alert.alert(
-      t('languageChangeTitle', 'profile'),
-      t('languageChangeMessage', 'profile'),
-      [
-        {
-          text: t('cancel', 'common'),
-          style: 'cancel',
-        },
-        {
-          text: t('change', 'common'),
-          onPress: () => changeLanguage(newLanguage),
-        },
-      ],
-      {cancelable: true},
-    );
-  };
-
-  function logout(): any {
-    throw new Error('Function not implemented.');
-  }
-
-  return (
-    <Container
-      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
-      withoutPadding
-      backgroundColor={theme.colors.background}>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.titleSection}>
-          <RTLAwareText style={styles.mainTitle}>
-            {t('account', 'profile')}
-          </RTLAwareText>
-        </View>
-
-        <View style={styles.menuSection}>
-          <TouchableOpacity style={styles.menuItem}>
-            <View style={styles.menuItemLeft}>
-              <Image source={ImageResources.account} style={styles.menuIcon} />
-              <RTLAwareText style={theme.text.header2}>
-                {t('editProfile', 'profile')}
-              </RTLAwareText>
-            </View>
-          </TouchableOpacity>
-
-          <RTLAwareView style={styles.menuItem}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Image
-                source={ImageResources.en}
-                style={{
-                  ...styles.menuIcon,
-                  marginRight: scaleWidth(10),
-                  width: scaleWidth(48),
-                  height: scaleWidth(48),
-                }}
-              />
-              <SwitchButton
-                onValueChange={handleLanguageToggle}
-                value={isArabic}
-              />
-              <Image
-                tintColor={theme.colors.tintColor}
-                source={ImageResources.ar}
-                style={{
-                  ...styles.menuIcon,
-                  marginLeft: scaleWidth(10),
-                  width: scaleWidth(48),
-                  height: scaleWidth(48),
-                }}
-              />
-            </View>
-            <View style={styles.menuItemLeft}>
-              <Image
-                tintColor={theme.colors.tintColor}
-                source={ImageResources.language}
-                style={styles.menuIcon}
-              />
-              <RTLAwareText style={theme.text.header2}>
-                {t('language', 'profile')}
-              </RTLAwareText>
-            </View>
-          </RTLAwareView>
-
-          <RTLAwareView style={styles.menuItem}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Image
-                tintColor={theme.colors.tintColor}
-                source={ImageResources.light}
-                style={{
-                  ...styles.menuIcon,
-                  marginRight: scaleWidth(10),
-                  width: scaleWidth(48),
-                  height: scaleWidth(48),
-                }}
-              />
-              <SwitchButton onValueChange={toggleTheme} value={isDarkMode} />
-              <Image
-                tintColor={theme.colors.tintColor}
-                source={ImageResources.dark}
-                style={{
-                  ...styles.menuIcon,
-                  marginLeft: scaleWidth(10),
-                  width: scaleWidth(48),
-                  height: scaleWidth(48),
-                }}
-              />
-            </View>
-            <View style={styles.menuItemLeft}>
-              <Image
-                tintColor={theme.colors.tintColor}
-                source={ImageResources.display}
-                style={styles.menuIcon}
-              />
-              <RTLAwareText style={theme.text.header2}>
-                {t('darkMode', 'profile')}
-              </RTLAwareText>
-            </View>
-          </RTLAwareView>
-
-          <TouchableOpacity
-            onPressIn={() => {
-              dispatch(setProvidersLogout());
-              dispatch(setServiceLogout());
-              dispatch(setCategoriesLogout());
-              dispatch(setLogout());
-            }}
-            style={styles.menuItem}>
-            <View style={styles.menuItemLeft}>
-              <Image
-                source={ImageResources.services}
-                style={[styles.menuIcon, styles.logoutIcon]}
-              />
-              <RTLAwareText style={[theme.text.header2, styles.logoutText]}>
-                {t('logout', 'profile')}
-              </RTLAwareText>
-            </View>
-          </TouchableOpacity>
-        </View>
-        <RTLAwareText style={{...theme.text.body1, alignSelf: 'center'}}>
-          {DeviceInfo.getVersion()}
-        </RTLAwareText>
-      </ScrollView>
-    </Container>
-  );
+  return <></>;
 }
-
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
-    titleSection: {
-      paddingHorizontal: scaleWidth(20),
-      paddingTop: scaleWidth(20),
-      paddingBottom: scaleWidth(10),
-    },
-    mainTitle: {
-      ...theme.text.header1,
-      marginBottom: scaleWidth(10),
-    },
-    menuSection: {
-      paddingHorizontal: scaleWidth(20),
-      paddingVertical: scaleWidth(10),
-    },
-    menuItem: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingVertical: scaleWidth(15),
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.shadow,
-    },
-    menuItemLeft: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    menuIcon: {
-      width: scaleWidth(71),
-      height: scaleWidth(71),
-      marginRight: scaleWidth(15),
-      tintColor: theme.colors.tintColor,
-      resizeMode: 'contain',
-    },
-    menuText: {
-      ...theme.text.body1,
-    },
-    logoutText: {
-      color: theme.colors.red,
-    },
-    logoutIcon: {
-      tintColor: theme.colors.red,
-    },
-    languageOptions: {
-      flexDirection: 'row',
-      marginTop: scaleWidth(10),
-    },
-    languageOption: {
-      marginRight: scaleWidth(20),
-      paddingVertical: scaleWidth(5),
-      paddingHorizontal: scaleWidth(10),
-      borderRadius: theme.borderRadius.sm,
-    },
-    activeLanguage: {
-      backgroundColor: theme.colors.indigoBlue,
-      color: theme.colors.white,
-    },
-  });