@fadyshawky/react-native-magic 2.0.4 → 2.0.6

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,5 @@
 import React from 'react';
-import {
-  Dimensions,
-  RefreshControl,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {NaturalColors} from '../../core/theme/colors';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {CommonStyles} from '../../core/theme/commonStyles';
-import {CarouselSection} from './components/CarouselSection';
-import {FeaturedCarousel} from './components/FeaturedCarousel';
-import {useHomeData} from './hooks/useHomeData';
-
-const {width} = Dimensions.get('window');
 
 export function HomeScreen(): JSX.Element {
-  const {
-    featuredItems,
-    trendingItems,
-    newItems,
-    recommendedItems,
-    isLoading,
-    refreshData,
-  } = useHomeData();
-
-  return (
-    <ScrollView
-      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}
-          />
-        </View>
-
-        {/* New Arrivals Section */}
-        <View style={styles.carouselSection}>
-          <Text style={styles.sectionTitle}>New Arrivals</Text>
-          <CarouselSection
-            items={newItems}
-            imageStyle={styles.newArrivalsImage}
-          />
-        </View>
-
-        {/* Recommended Section */}
-        <View style={styles.carouselSection}>
-          <Text style={styles.sectionTitle}>Recommended for You</Text>
-          <CarouselSection
-            items={recommendedItems}
-            imageStyle={styles.recommendedImage}
-          />
-        </View>
-      </View>
-    </ScrollView>
-  );
+  return <></>;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: NaturalColors.grayScale_0,
-  },
-  content: {
-    paddingVertical: CommonSizes.spacing.medium,
-  },
-  featuredSection: {
-    marginBottom: CommonSizes.spacing.large,
-  },
-  carouselSection: {
-    marginBottom: CommonSizes.spacing.large,
-  },
-  sectionTitle: {
-    ...CommonStyles.h2_semiBold,
-    marginHorizontal: CommonSizes.spacing.large,
-    marginBottom: CommonSizes.spacing.medium,
-  },
-  trendingImage: {
-    width: width * 0.7,
-    height: 200,
-    borderRadius: CommonSizes.borderRadius.medium,
-  },
-  newArrivalsImage: {
-    width: width * 0.5,
-    height: 180,
-    borderRadius: CommonSizes.borderRadius.medium,
-  },
-  recommendedImage: {
-    width: width * 0.6,
-    height: 160,
-    borderRadius: CommonSizes.borderRadius.medium,
-  },
-});

package/template/src/screens/home/hooks/useHomeData.ts

@@ -1,39 +1,34 @@
-import {useState, useEffect} from 'react';
-import {CarouselItem} from '../types';
-
+import {useState} from 'react';
+import {getCategories} from '../../../core/store/Categories/categoryActions';
+import {clearSelectedCategory} from '../../../core/store/Categories/categorySlice';
+import {getHomeProviders} from '../../../core/store/Providers/providersActions';
+import {useAppDispatch, useAppSelector} from '../../../core/store/reduxHelpers';
+import {RootState} from '../../../core/store/rootReducer';
+import {getBalance} from '../../../core/store/user/userActions';
+import {clearSelectedProvider} from '../../../core/store/Providers/providersSlice';
 export function useHomeData() {
   const [isLoading, setIsLoading] = useState(false);
-  const [featuredItems, setFeaturedItems] = useState<CarouselItem[]>([]);
-  const [trendingItems, setTrendingItems] = useState<CarouselItem[]>([]);
-  const [newItems, setNewItems] = useState<CarouselItem[]>([]);
-  const [recommendedItems, setRecommendedItems] = useState<CarouselItem[]>([]);
+  const dispatch = useAppDispatch();
+  const {categories, loadState} = useAppSelector(
+    (state: RootState) => state.categories,
+  );
+  const [isPayByCodeModalVisible, setIsPayByCodeModalVisible] = useState(false);
+  const {homeProviders} = useAppSelector((state: RootState) => state.providers);
+  const {user} = useAppSelector((state: RootState) => state.user);
 
   const fetchData = async () => {
     setIsLoading(true);
     try {
-      // Simulate API calls
-      // Replace with actual API calls in production
-      setFeaturedItems([
-        {
-          id: '1',
-          title: 'Featured Item 1',
-          subtitle: 'Discover amazing features',
-          imageUrl: 'https://picsum.photos/800/400',
-        },
-        // Add more items...
-      ]);
-
-      setTrendingItems([
-        {
-          id: '1',
-          title: 'Trending Item 1',
-          subtitle: 'Hot right now',
-          imageUrl: 'https://picsum.photos/700/400',
-        },
-        // Add more items...
-      ]);
-
-      // Similar for newItems and recommendedItems...
+      const balance = await dispatch(getBalance());
+      if (balance.type.includes('fulfilled')) {
+        const categoryResponse = await dispatch(
+          getCategories({data: {limit: 30}}),
+        );
+        if (categoryResponse.type.includes('fulfilled')) {
+          const category_id = categoryResponse?.payload?.categories?.[0]?.id;
+          await dispatch(getHomeProviders({data: {category_id: category_id}}));
+        }
+      }
     } catch (error) {
       console.error('Error fetching home data:', error);
     } finally {
@@ -45,16 +40,15 @@ export function useHomeData() {
     fetchData();
   };
 
-  useEffect(() => {
-    fetchData();
-  }, []);
-
   return {
     isLoading,
-    featuredItems,
-    trendingItems,
-    newItems,
-    recommendedItems,
     refreshData,
+    fetchData,
+    categories,
+    user,
+    homeProviders,
+    loadState,
+    isPayByCodeModalVisible,
+    setIsPayByCodeModalVisible,
   };
 }

package/template/src/screens/index.tsx

@@ -0,0 +1,24 @@
+// Authentication Screens
+export {Login} from './Login/Login';
+export {OTPScreen as OTP} from './OTP/OTPScreen';
+export {ForceChangePasswordScreen as ForceChangePassword} from './ForceChangePassword/ForceChangePasswordScreen';
+
+// Main Navigation Screens
+export {HomeScreen as Home} from './home/HomeScreen';
+export {Profile} from './profile/Profile';
+export {Splash} from './splash/Splash';
+
+// Service Related Screens
+export {Categories} from './Categories/Categories';
+export {Services} from './Services/Services';
+export {SingleService} from './SingleService/SingleService';
+export {Providers} from './Providers/Providers';
+export {InquiredBill} from './InquiredBill/InquiredBill';
+export {PaymentConfirmation} from './PaymentConfirmation/PaymentConfirmation';
+
+// History and Receipt Screens
+export {History} from './History/History';
+export {Favorites} from './Favorites/Favorites';
+
+// Device and Card Related Screens
+export {ReceiptScreen} from './ReceiptScreen/ReceiptScreen';

package/template/src/common/components/Stepper.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import {View, Text, StyleSheet, Image, Pressable} from 'react-native';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {Theme} from '../../core/theme/types';
-import {PrimaryColors} from '../../core/theme/colors';
-import {ImageResources} from '../ImageResources.g';
-
-interface Step {
-  title: string;
-}
-
-interface StepperProps {
-  steps: Step[];
-  currentStep: number;
-  orientation?: 'horizontal' | 'vertical';
-  onStepPress?: (index: number) => void;
-}
-
-const STEP_SIZE = 64;
-
-const Stepper: React.FC<StepperProps> = ({
-  steps,
-  currentStep,
-  orientation = 'horizontal',
-  onStepPress,
-}) => {
-  const {theme} = useTheme();
-  const isDarkMode = theme.mode === 'dark';
-  const styles = createStyles(theme, orientation, isDarkMode);
-
-  return (
-    <View style={styles.container}>
-      {steps.map((step, index) => {
-        const isCompleted = index < currentStep;
-        const isActive = index === currentStep;
-        const isLastStep = index === steps.length - 1;
-
-        const connectorStyle = [
-          styles.connector,
-          (isCompleted || isActive) && styles.connectorCompleted,
-        ];
-
-        return (
-          <React.Fragment key={index}>
-            <Pressable
-              style={styles.stepContainer}
-              onPress={() => onStepPress?.(index)}>
-              <View
-                style={[
-                  styles.circle,
-                  isCompleted && styles.circleCompleted,
-                  isActive && styles.circleActive,
-                ]}>
-                {isCompleted ? (
-                  <Image source={0} style={styles.icon} />
-                ) : (
-                  <Text style={styles.stepNumber}>{index + 1}</Text>
-                )}
-              </View>
-              <Text
-                style={[
-                  styles.title,
-                  (isCompleted || isActive) && styles.titleActive,
-                ]}>
-                {step.title}
-              </Text>
-            </Pressable>
-            {!isLastStep && <View style={connectorStyle} />}
-          </React.Fragment>
-        );
-      })}
-    </View>
-  );
-};
-
-const createStyles = (
-  theme: Theme,
-  orientation: 'horizontal' | 'vertical',
-  isDarkMode: boolean,
-) =>
-  StyleSheet.create({
-    container: {
-      flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-      alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',
-    },
-    stepContainer: {
-      alignItems: 'center',
-      flex: orientation === 'horizontal' ? 1 : undefined,
-    },
-    circle: {
-      width: STEP_SIZE,
-      height: STEP_SIZE,
-      borderRadius: STEP_SIZE / 2,
-      borderWidth: 1,
-      borderColor: isDarkMode
-        ? theme.colors.grayScale_400
-        : theme.colors.grayScale_50,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'transparent',
-    },
-    circleCompleted: {
-      backgroundColor: PrimaryColors.PlatinateBlue_400,
-      borderColor: PrimaryColors.PlatinateBlue_400,
-    },
-    circleActive: {
-      borderColor: PrimaryColors.PlatinateBlue_400,
-    },
-    icon: {
-      width: STEP_SIZE / 2,
-      height: STEP_SIZE / 2,
-      tintColor: theme.colors.grayScale_0,
-    },
-    stepNumber: {
-      ...theme.text.bodyXLargeRegular,
-      color: isDarkMode
-        ? theme.colors.grayScale_400
-        : theme.colors.grayScale_50,
-    },
-    title: {
-      ...theme.text.bodyMediumRegular,
-      marginTop: theme.spacing.small,
-      color: isDarkMode
-        ? theme.colors.grayScale_400
-        : theme.colors.grayScale_50,
-    },
-    titleActive: {
-      color: theme.colors.cetaceanBlue_700,
-    },
-    connector: {
-      backgroundColor: isDarkMode
-        ? theme.colors.grayScale_400
-        : theme.colors.grayScale_50,
-      ...(orientation === 'horizontal'
-        ? {
-            height: 1,
-            flex: 1,
-            marginHorizontal: -STEP_SIZE / 4,
-            top: STEP_SIZE / 2,
-          }
-        : {
-            width: 1,
-            flex: 1,
-            marginVertical: -STEP_SIZE / 4,
-            left: '50%',
-          }),
-    },
-    connectorCompleted: {
-      backgroundColor: PrimaryColors.PlatinateBlue_400,
-    },
-  });
-
-export default Stepper;

package/template/src/common/components/Svg.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import Svg, {G, Path, Defs, ClipPath, SvgProps} from 'react-native-svg';
-
-const SvgComponent: React.FC<SvgProps> = props => (
-  <Svg width={'100%'} height={'100%'} fill="none" {...props}>
-    <G clipPath="url(#a)">
-      <Path fill="#F9FCFF" d="M0 0h428v925H0z" />
-      <Path
-        fill="#F3F2FF"
-        d="M293.588 913.49c-11.664-7.299-22.732-17.683-25.003-31.28-1.327-8.116.619-16.401.321-24.632-1.302-34.39-41.04-60.387-36.303-94.477 3.225-23.054 26.005-38.157 48.084-45.307 22.079-7.15 46.135-9.803 65.558-22.544 11.677-7.647 20.94-18.492 32.704-26.016 31.368-20.054 78.287-8.983 97.328 23.023 13.438 22.55 13.203 50.707 8.916 76.621-7.313 43.969-24.299 113.518-59.201 144.845-32.956 29.629-98.321 21.076-132.404-.233Z"
-      />
-      <Path
-        fill="#EEF8FF"
-        d="M80.103-35.495c11.658 7.31 22.718 17.702 24.977 31.301 1.32 8.117-.633 16.4-.342 24.631 1.274 34.392 40.991 60.422 36.225 94.508-3.244 23.051-26.037 38.135-48.122 45.267-22.085 7.132-46.143 9.764-65.577 22.489-11.683 7.638-20.955 18.474-32.725 25.989-31.385 20.028-78.294 8.917-97.31-23.105-13.419-22.56-13.16-50.717-8.852-76.628C-104.272 64.994-87.228-4.54-52.301-35.838c32.98-29.602 98.34-20.994 132.404.343Z"
-      />
-    </G>
-    <Defs>
-      <ClipPath id="a">
-        <Path fill="#fff" d="M0 0h428v925H0z" />
-      </ClipPath>
-    </Defs>
-  </Svg>
-);
-
-export default SvgComponent;

package/template/src/common/hooks/useDebounce.ts

@@ -1,17 +0,0 @@
-import {useEffect, useState} from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/template/src/common/hooks/usePrevious.ts

@@ -1,11 +0,0 @@
-import {useEffect, useRef} from 'react';
-
-export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}

package/template/src/common/urls/emailUrl.ts

@@ -1,20 +0,0 @@
-import {BaseUrlOpener} from './baseUrlOpener';
-
-export class EmailUrl extends BaseUrlOpener {
-  constructor(private email: string | null) {
-    super();
-  }
-
-  protected generateUrl(): string | null {
-    if (this.email == null) {
-      return null;
-    } else {
-      let url = this.email;
-      if (!url.startsWith('mailto')) {
-        url = 'mailto://' + url;
-      }
-
-      return url;
-    }
-  }
-}

package/template/src/common/urls/mapUrl.ts

@@ -1,22 +0,0 @@
-import {isIos} from '../../core/theme/commonConsts';
-import {BaseUrlOpener} from './baseUrlOpener';
-
-export class MapUrl extends BaseUrlOpener {
-  constructor(
-    private latitude: number,
-    private longitude: number,
-    private address: string,
-  ) {
-    super();
-  }
-
-  protected generateUrl(): string | null {
-    if (isIos) {
-      return `https://maps.apple.com/?q=${encodeURIComponent(
-        this.address,
-      )}&sll=${this.latitude},${this.longitude}`;
-    } else {
-      return `geo:${this.latitude}, ${this.longitude}`;
-    }
-  }
-}

package/template/src/common/utils/listHandlers.ts

@@ -1,30 +0,0 @@
-import {LoadState} from '../../../types';
-import {DEFAULT_PAGE_SIZE} from '../helpers/calculatePage';
-
-export function commonListFulfilledHandler<T>(
-  loadState: LoadState,
-  payloadList: T[],
-  storedList: T[],
-) {
-  const newLoadState =
-    payloadList.length >= DEFAULT_PAGE_SIZE
-      ? LoadState.idle
-      : LoadState.allIsLoaded;
-
-  let newData: T[] = [];
-
-  switch (loadState) {
-    case LoadState.firstLoad:
-    case LoadState.pullToRefresh:
-    case LoadState.refreshing:
-      newData = [...payloadList];
-      break;
-    case LoadState.loadingMore:
-      newData = [...storedList].concat(payloadList);
-      break;
-    default:
-      throw new Error(`LoadState ${loadState} is not valid in this context.`);
-  }
-
-  return {data: newData, error: null, loadState: newLoadState};
-}

package/template/src/common/utils/serializeQueryParams.ts

@@ -1,10 +0,0 @@
-export function serializeQueryParams(obj: any): string {
-  const str = [];
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
-      str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
-    }
-  }
-
-  return str.join('&');
-}

package/template/src/common/validations/hooks/useDatesError.ts

@@ -1,40 +0,0 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {datesValidation} from '../commonValidations';
-
-export function useDatesError(
-  fromDate: Date,
-  toDate: Date,
-  fromLabel: string,
-  toLabel: string,
-  currentField: 'from' | 'to',
-) {
-  const [error, setError] = useState<string | null>(null);
-  const didMountRef = useRef(false);
-
-  const recheckValue = useCallback(() => {
-    const result = datesValidation(
-      fromDate,
-      toDate,
-      fromLabel,
-      toLabel,
-      currentField,
-    );
-    setError(result);
-
-    return result;
-  }, [currentField, fromDate, fromLabel, toDate, toLabel]);
-
-  useEffect(() => {
-    if (didMountRef.current) {
-      recheckValue();
-    } else {
-      didMountRef.current = true;
-    }
-  }, [recheckValue]);
-
-  return {
-    error,
-    setError,
-    recheckValue,
-  };
-}