@fadyshawky/react-native-magic 2.0.3 → 2.0.5

package/template/src/screens/SingleService/hooks/useServiceData.ts

@@ -0,0 +1,164 @@
+import {useState} from 'react';
+import {useAppDispatch, useAppSelector} from '../../../core/store/reduxHelpers';
+import {RootState} from '../../../core/store/rootReducer';
+import {
+  enquireService,
+  getService,
+  payService,
+} from '../../../core/store/Services/servicesActions';
+import {BillTypeRefKeyEntity} from '../../../core/store/Services/servicesState';
+import {useNavigation} from '@react-navigation/native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {RootStackParamList} from '../../../navigation/types';
+import {
+  clearInquiry,
+  clearPayment,
+} from '../../../core/store/Services/servicesSlice';
+import {initFees} from '../../../common/utils';
+interface InputParameter {
+  BillingAcct: string;
+  ExtraBillingAcctKey: BillTypeRefKeyEntity[];
+}
+
+export function useServiceData(serviceID?: string) {
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useAppDispatch();
+  const {service} = useAppSelector((state: RootState) => state.services);
+
+  const [cardRead, setCardRead] = useState<any>(null);
+  const {selectedProvider} = useAppSelector(
+    (state: RootState) => state.providers,
+  );
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [selectedPaymentRange, setSelectedPaymentRange] = useState<any>(null);
+  const [quantity, setQuantity] = useState<string>('1');
+  const [vatValue, setVatValue] = useState<string>('');
+  const [customProperties, setCustomProperties] = useState<any>(null);
+  const [beeInputParameters, setBeeInputParameters] = useState<any>([]);
+  const [fawryInputParameters, setFawryInputParameters] =
+    useState<InputParameter>({
+      BillingAcct: '',
+      ExtraBillingAcctKey:
+        service?.BillTypeExtraRefKeys?.BillTypeRefKey?.map(i => {
+          return {...i, Value: ''};
+        }) || [],
+    });
+  const fees = initFees(service, selectedPaymentRange);
+
+  const handlePayment = async () => {
+    setIsLoading(false);
+    navigation.navigate('PaymentConfirmation', {
+      paymentData: {
+        amountToBePaid: selectedPaymentRange,
+        ...(service?.PmtType === 'VOCH' && {quantity}),
+        fawryInputParameters,
+        fees,
+        ...(vatValue && {vatValue}),
+      },
+    });
+  };
+
+  const handleEnquireService = async () => {
+    setIsLoading(true);
+    dispatch(clearInquiry());
+    dispatch(clearPayment());
+    try {
+      const data = {
+        BillTypeCode: service.BillTypeCode,
+        PmtType: service?.PmtType,
+        BillingAcct: fawryInputParameters?.BillingAcct,
+        ExtraBillingAcctKeys:
+          fawryInputParameters?.ExtraBillingAcctKey.filter(
+            k => !!k.Value || k.EnumValues,
+          ).length > 0
+            ? {
+                ExtraBillingAcctKey:
+                  fawryInputParameters?.ExtraBillingAcctKey?.filter(
+                    k => !!k.Value || k.EnumValues,
+                  ).map(item => ({
+                    ...(item.Value && {Key: item.Key}),
+                    ...(item.Value && {Value: item.Value}),
+                    ...(item.EnumValues && {
+                      EnumValues: item.EnumValues,
+                    }),
+                  })),
+              }
+            : undefined,
+        ...(service?.ServiceType === 'UTL' &&
+          customProperties && {
+            CustomProperties: {CustomProperty: customProperties},
+          }),
+      };
+
+      if (service?.PmtType === 'PREP' || service?.PmtType === 'VOCH') {
+        handlePayment();
+      } else {
+        const response = await dispatch(enquireService({data}));
+        if (response.type.includes('fulfilled')) {
+          navigation.navigate('InquiredBill');
+        }
+      }
+    } catch (error) {
+      console.log('error: ', error);
+    } finally {
+      if (service?.PmtType === 'POST') {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const fetchData = async () => {
+    if (!serviceID) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const data =
+        selectedProvider?.provider === 'Fawry'
+          ? {fawry_service_id: serviceID}
+          : {bee_service_id: serviceID};
+      const res = await dispatch(getService({data}));
+
+      setFawryInputParameters({
+        ...fawryInputParameters,
+        ExtraBillingAcctKey:
+          res.payload.service?.BillTypeExtraRefKeys?.BillTypeRefKey?.map(
+            (i: BillTypeRefKeyEntity) => {
+              return {...i, Value: ''};
+            },
+          ) || [],
+      });
+    } catch (error) {
+      console.error('Error fetching service data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshData = () => {
+    fetchData();
+  };
+
+  return {
+    beeInputParameters,
+    setBeeInputParameters,
+    fawryInputParameters,
+    setFawryInputParameters,
+    isLoading,
+    refreshData,
+    fetchData,
+    selectedPaymentRange,
+    setSelectedPaymentRange,
+    quantity,
+    setQuantity,
+    vatValue,
+    setVatValue,
+    selectedProvider,
+    handleEnquireService,
+    handlePayment,
+    fees,
+    customProperties,
+    setCustomProperties,
+  };
+}

package/template/src/screens/home/Components/PayByCode.tsx

@@ -0,0 +1,129 @@
+import React, {useState} from 'react';
+import {Modal, StyleSheet, View} from 'react-native';
+import {RTLAwareView} from '../../../common/components/RTLAwareView';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {PrimaryTextInput} from '../../../common/components/PrimaryTextInput';
+import {useTheme} from '../../../core/theme/ThemeProvider';
+import {PrimaryButton} from '../../../common/components/PrimaryButton';
+import {ButtonType} from '../../../../types';
+import {useAppDispatch} from '../../../core/store/reduxHelpers';
+import {getServiceById} from '../../../core/store/Services/servicesActions';
+import {getProviderById} from '../../../core/store/Providers/providersActions';
+import {useNavigation} from '@react-navigation/native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {RootStackParamList} from '../../../navigation/types';
+import {useTranslation} from '../../../common/localization/LocalizationProvider';
+
+export function PayByCode({
+  isVisible,
+  onClose,
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+}): JSX.Element {
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const [code, setCode] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useAppDispatch();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  const getService = async () => {
+    if (!code) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await dispatch(
+        getServiceById({data: {BillTypeCode: code}}),
+      );
+      if (response.type.includes('fulfilled')) {
+        const providerResponse = await dispatch(
+          getProviderById({
+            data: {BillerId: response.payload.service.BillerId},
+          }),
+        );
+        if (providerResponse.type.includes('fulfilled')) {
+          setCode('');
+          onClose();
+          setTimeout(() => {
+            navigation.navigate('SingleService', {
+              serviceID: undefined,
+            });
+          }, 200);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      onRequestClose={onClose}
+      visible={isVisible}
+      transparent
+      style={styles.modal}>
+      <RTLAwareView
+        style={{
+          ...styles.container,
+          backgroundColor: theme.colors.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.indigoBlue,
+        }}>
+        <PrimaryTextInput
+          value={code}
+          onChangeText={setCode}
+          placeholder={t('enterCode', 'home')}
+        />
+        <RTLAwareView
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          <PrimaryButton
+            disabled={isLoading}
+            isLoading={isLoading}
+            onPress={() => {
+              onClose();
+              setCode('');
+            }}
+            style={{width: '48%'}}
+            label={t('cancel', 'home')}
+            type={ButtonType.solid}
+          />
+          <PrimaryButton
+            disabled={isLoading}
+            isLoading={isLoading}
+            onPress={getService}
+            style={{width: '48%'}}
+            label={t('search', 'home')}
+            type={ButtonType.solid}
+          />
+        </RTLAwareView>
+      </RTLAwareView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+    backgroundColor: 'red',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: '95%',
+    // minHeight: '40%',
+    alignSelf: 'center',
+    borderRadius: CommonSizes.borderRadius.large,
+    padding: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+    marginTop: '45%',
+  },
+});

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

@@ -1,107 +1,298 @@
-import React from 'react';
+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 {
-  Dimensions,
-  RefreshControl,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {NaturalColors} from '../../core/theme/colors';
+  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 {CommonStyles} from '../../core/theme/commonStyles';
-import {CarouselSection} from './components/CarouselSection';
-import {FeaturedCarousel} from './components/FeaturedCarousel';
+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>
+  );
+}
 
-const {width} = Dimensions.get('window');
+// 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>
+  );
+}
 
 export function HomeScreen(): JSX.Element {
   const {
-    featuredItems,
-    trendingItems,
-    newItems,
-    recommendedItems,
     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 (
-    <ScrollView
+    <Container
+      ref={scroll}
+      testID={'HomeScreenID'}
+      contentContainerStyle={styles.contentContainer}
       style={styles.container}
-      refreshControl={
-        <RefreshControl refreshing={isLoading} onRefresh={refreshData} />
-      }>
-      <View style={styles.content}>
-        {/* Featured Section */}
-        <View style={styles.featuredSection}>
-          <Text style={styles.sectionTitle}>Featured</Text>
-          <FeaturedCarousel items={featuredItems} />
-        </View>
-
-        {/* Trending Section */}
-        <View style={styles.carouselSection}>
-          <Text style={styles.sectionTitle}>Trending Now</Text>
-          <CarouselSection
-            items={trendingItems}
-            imageStyle={styles.trendingImage}
+      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}
           />
-        </View>
-
-        {/* New Arrivals Section */}
-        <View style={styles.carouselSection}>
-          <Text style={styles.sectionTitle}>New Arrivals</Text>
-          <CarouselSection
-            items={newItems}
-            imageStyle={styles.newArrivalsImage}
+          <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}
+              />
+            )}
           />
-        </View>
-
-        {/* Recommended Section */}
-        <View style={styles.carouselSection}>
-          <Text style={styles.sectionTitle}>Recommended for You</Text>
-          <CarouselSection
-            items={recommendedItems}
-            imageStyle={styles.recommendedImage}
+          <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}
+              />
+            )}
           />
-        </View>
-      </View>
-    </ScrollView>
+        </>
+      )}
+      <PayByCode
+        isVisible={isPayByCodeModalVisible}
+        onClose={() => setIsPayByCodeModalVisible(false)}
+      />
+    </Container>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: NaturalColors.grayScale_0,
+    paddingBottom: scaleHeight(130),
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+    justifyContent: 'flex-start',
   },
-  content: {
-    paddingVertical: CommonSizes.spacing.medium,
+  contentContainer: {
+    flexGrow: 1,
   },
-  featuredSection: {
-    marginBottom: CommonSizes.spacing.large,
+  formContainer: {
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
   },
-  carouselSection: {
-    marginBottom: CommonSizes.spacing.large,
+  balanceSection: {
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    gap: CommonSizes.spacing.large,
   },
-  sectionTitle: {
-    ...CommonStyles.h2_semiBold,
-    marginHorizontal: CommonSizes.spacing.large,
-    marginBottom: CommonSizes.spacing.medium,
+  seeMoreSection: {
+    alignItems: 'center',
+    gap: CommonSizes.spacing.large,
+    alignSelf: 'center',
   },
-  trendingImage: {
-    width: width * 0.7,
-    height: 200,
-    borderRadius: CommonSizes.borderRadius.medium,
+  sectionImage: {
+    width: scaleWidth(120),
+    height: scaleHeight(70),
   },
-  newArrivalsImage: {
-    width: width * 0.5,
-    height: 180,
-    borderRadius: CommonSizes.borderRadius.medium,
+  amountText: {
+    textAlign: 'left',
   },
-  recommendedImage: {
-    width: width * 0.6,
-    height: 160,
-    borderRadius: CommonSizes.borderRadius.medium,
+  balanceCard: {
+    width: '100%',
+    borderRadius: CommonSizes.spacing.huge,
   },
 });