@fadyshawky/react-native-magic 2.0.5 → 2.0.6

package/template/src/screens/ReceiptScreen/ReceiptScreen.tsx

@@ -1,181 +0,0 @@
-import {
-  RouteProp,
-  useIsFocused,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useEffect, useRef} from 'react';
-import {ScrollView, StyleSheet, TextStyle, ViewStyle} from 'react-native';
-import {SkypeIndicator} from 'react-native-indicators';
-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 {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {normalizeAndTrimWhitespace} from '../../common/helpers/stringsHelpers';
-import {ImageResources} from '../../common/ImageResources.g';
-import {useTranslation} from '../../common/localization/LocalizationProvider';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-import {getBalance} from '../../core/store/user/userActions';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {createThemedStyles} from '../../core/theme/commonStyles';
-import {scaleHeight} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {decryptTripleDES} from '../../core/utils/stringUtils';
-import {HeaderButton} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-import {onPrint} from '../../utils/SunmiPrinter';
-import {useReceiptData} from './hooks/useReceiptData';
-import {getSeparator, getTextStyle, getLabel} from './utils/utils';
-import {reverseService} from '../../core/store/Services/servicesActions';
-
-export function ReceiptScreen(): JSX.Element {
-  const {theme} = useTheme();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const params =
-    useRoute<RouteProp<RootStackParamList, 'ReceiptScreen'>>()?.params;
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  const t = useTranslation();
-  const dispatch = useAppDispatch();
-  const isFocused = useIsFocused();
-
-  // Use combined hook
-  const {fetchData, receiptData, service, isLoading} = useReceiptData(
-    params?.type,
-    params?.historyID,
-  );
-
-  useEffect(() => {
-    if (params?.type === 'print') {
-      // For print type, data is already in the store
-      return;
-    } else if (isFocused && params?.type === 'history') {
-      fetchData();
-    }
-  }, [isFocused, params?.type]);
-
-  const handlePrint = async () => {
-    if (params?.type === 'print') {
-      dispatch(getBalance());
-      await onPrint(receiptData);
-      setTimeout(() => {
-        navigation.goBack();
-        if (service?.PmtType === 'POST') {
-          navigation.goBack();
-        }
-        navigation.goBack();
-      }, 200);
-    } else {
-      onPrint(receiptData);
-    }
-  };
-
-  const handleBackToHome = () => {
-    navigation.reset({
-      index: 0,
-      routes: [{name: 'Main'}],
-    });
-  };
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'ReceiptScreenID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources.background_2}
-      withoutPadding
-      extendedBackground
-      withoutScroll
-      bounces={true}
-      backgroundColor={theme.colors.background}>
-      {isLoading ? (
-        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
-      ) : (
-        <>
-          <HeaderButton onPress={() => navigation.goBack()} />
-          <ScrollView
-            style={styles.scrollView}
-            contentContainerStyle={[
-              styles.scrollViewContent,
-              {backgroundColor: theme.colors.surface},
-              createThemedStyles(theme).dropShadow,
-            ]}>
-            {Array.isArray(receiptData) &&
-              receiptData?.map((h, i) => (
-                <RTLAwareView
-                  key={`${h.label}-${i}`}
-                  style={styles.receiptItem}>
-                  {getSeparator(h.type, theme)}
-                  <RTLAwareView
-                    style={getTextStyle(h.type, theme)?.container as ViewStyle}>
-                    <RTLAwareText
-                      style={getTextStyle(h.type, theme)?.value as TextStyle}>
-                      {h.label === 'VouchPIN'
-                        ? decryptTripleDES(
-                            h.value,
-                            '8pe/hqinrZQV6pHNkQ0WwbD0ZHkaAbbj',
-                          )
-                        : normalizeAndTrimWhitespace(h.value)}
-                    </RTLAwareText>
-                    {h.label &&
-                      h.label !== 'VouchPIN' &&
-                      getLabel(h.type, h.label, theme)}
-                  </RTLAwareView>
-                </RTLAwareView>
-              ))}
-          </ScrollView>
-          <PrimaryButton
-            label={t('print', 'common')}
-            type={ButtonType.solid}
-            onPressIn={handlePrint}
-          />
-          {params?.type === 'print' && (
-            <PrimaryButton
-              label={t('backToHome', 'common')}
-              onPress={handleBackToHome}
-              style={styles.backToHomeButton}
-              type={ButtonType.outlineNegative}
-            />
-          )}
-        </>
-      )}
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    paddingBottom: scaleHeight(20),
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-    paddingHorizontal: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.xl,
-    justifyContent: 'flex-start',
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  scrollView: {
-    width: '100%',
-    borderRadius: CommonSizes.borderRadius.medium,
-    flexGrow: 1,
-  },
-  scrollViewContent: {
-    paddingHorizontal: CommonSizes.spacing.huge,
-    gap: CommonSizes.spacing.large,
-    paddingVertical: CommonSizes.spacing.huge,
-    flexGrow: 1,
-  },
-  receiptItem: {
-    width: '100%',
-    gap: CommonSizes.spacing.medium,
-  },
-  backToHomeButton: {
-    alignSelf: 'flex-end',
-  },
-});

package/template/src/screens/ReceiptScreen/hooks/useReceiptData.ts

@@ -1,46 +0,0 @@
-import {useState} from 'react';
-import {useAppSelector, useAppDispatch} from '../../../core/store/reduxHelpers';
-import {RootState} from '../../../core/store/rootReducer';
-import {fetchHistoryDetails} from '../../../core/store/user/userActions';
-
-type ReceiptType = 'print' | 'history';
-
-export function useReceiptData(type: ReceiptType, historyID?: string) {
-  const [isLoading, setIsLoading] = useState(false);
-  const dispatch = useAppDispatch();
-
-  // Get data from services store for print type
-  const {paymentResponse, service} = useAppSelector(
-    (state: RootState) => state.services,
-  );
-
-  // State for history data
-  const [historyDetails, setHistoryDetails] = useState<any[]>([]);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    try {
-      if (type === 'print') {
-        // For print type, data is already in the store
-        return;
-      } else if (type === 'history' && historyID) {
-        // For history type, fetch data from API
-        const result = await dispatch(fetchHistoryDetails({trxRef: historyID}));
-        if (fetchHistoryDetails.fulfilled.match(result)) {
-          setHistoryDetails(result.payload.data);
-        }
-      }
-    } catch (error) {
-      console.error('Error fetching receipt data:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return {
-    fetchData,
-    isLoading,
-    receiptData: type === 'print' ? paymentResponse : historyDetails,
-    service: type === 'print' ? service : undefined,
-  };
-}

package/template/src/screens/ReceiptScreen/utils/utils.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import {View, TextStyle, Image} from 'react-native';
-import {RTLAwareText} from '../../../common/components/RTLAwareText';
-import {CommonSizes} from '../../../core/theme/commonSizes';
-import {scaleWidth} from '../../../core/theme/scaling';
-import {ImageResources} from '../../../common/ImageResources.g';
-import {scaleHeight} from '../../../core/theme/scaling';
-
-export function getTextStyle(type: string, theme: any) {
-  switch (type) {
-    case 'body':
-      return {
-        value: {
-          ...theme.text.body2,
-          width: '60%',
-          textAlign: 'left',
-        },
-        label: {
-          ...theme.text.body2,
-          width: '40%',
-          textAlign: 'right',
-        },
-        container: {
-          width: '100%',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        },
-      };
-    case 'header1':
-      return {
-        value: {
-          ...theme.text.body2,
-          width: '100%',
-          textAlign: 'center',
-        },
-        label: {},
-        container: {
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      };
-    case 'header2':
-      return {
-        value: {
-          ...theme.text.body2,
-          width: '100%',
-          textAlign: 'center',
-        },
-        label: {},
-        container: {
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      };
-    case 'description':
-      return {
-        value: {
-          ...theme.text.body2,
-          width: '100%',
-          textAlign: 'center',
-        },
-        label: {
-          ...theme.text.body2,
-          width: '100%',
-          textAlign: 'center',
-        },
-        container: {
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      };
-    case 'body_title':
-      return {
-        value: {
-          ...theme.text.body1,
-          width: '60%',
-          textAlign: 'left',
-        },
-        label: {
-          ...theme.text.body1,
-          width: '40%',
-          textAlign: 'right',
-        },
-        container: {
-          width: '100%',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        },
-      };
-  }
-}
-
-export function getSeparator(type: string, theme: any) {
-  switch (type) {
-    default:
-      return (
-        <View
-          style={{
-            height: 2,
-            width: '100%',
-            backgroundColor: theme.colors.mutedLavender,
-            marginVertical: CommonSizes.spacing.medium,
-          }}
-        />
-      );
-    case 'image':
-      return (
-        <Image
-          style={{
-            width: scaleWidth(292),
-            height: scaleHeight(66),
-            alignSelf: 'center',
-            tintColor:
-              theme.mode === 'dark'
-                ? theme.colors.mutedLavender
-                : theme.colors.black,
-          }}
-          source={ImageResources.receipt_logo}
-        />
-      );
-    case 'body':
-      return <></>;
-    case 'header1':
-      return <></>;
-    case 'header2':
-      return <></>;
-  }
-}
-
-export function getLabel(type: string, label: string, theme: any) {
-  switch (type) {
-    default:
-      return (
-        <RTLAwareText style={getTextStyle(type, theme)?.label as TextStyle}>
-          {label}
-        </RTLAwareText>
-      );
-    case 'description':
-      return !!!label ? (
-        <></>
-      ) : (
-        <RTLAwareText style={getTextStyle(type, theme)?.label as TextStyle}>
-          {label}
-        </RTLAwareText>
-      );
-    case 'header1':
-      return <></>;
-    case 'header2':
-      return <></>;
-  }
-}

package/template/src/screens/Services/Services.tsx

@@ -1,144 +0,0 @@
-import {
-  RouteProp,
-  useIsFocused,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useEffect, useRef} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {LoadState} from '../../../types';
-import {Container} from '../../common/components/Container';
-import {FlatListWrapper} from '../../common/components/FlatListWrapper';
-import {ImageResources} from '../../common/ImageResources.g';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-import {resetServices} from '../../core/store/Services/servicesSlice';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {createThemedStyles} from '../../core/theme/commonStyles';
-import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {HeaderBack} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-import {useServicesData} from './hooks/useServicesData';
-import {SkypeIndicator} from 'react-native-indicators';
-
-export function Services(): JSX.Element {
-  const {theme} = useTheme();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-
-  const dispatch = useAppDispatch();
-
-  const {providerID} =
-    useRoute<RouteProp<RootStackParamList, 'Services'>>().params;
-  const {isLoading, refreshData, fetchData, services} =
-    useServicesData(providerID);
-  const isFocused = useIsFocused();
-
-  useEffect(() => {
-    if (isFocused) {
-      fetchData();
-    }
-  }, [isFocused]);
-  return (
-    <Container
-      ref={scroll}
-      testID={'ServicesScreenID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
-      withoutPadding
-      extendedBackground
-      withoutScroll
-      backgroundColor={theme.colors.background}>
-      {isLoading ? (
-        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
-      ) : (
-        <>
-          <HeaderBack
-            onPress={() => {
-              dispatch(resetServices());
-              navigation.goBack();
-            }}
-          />
-          <FlatListWrapper
-            loadState={LoadState.allIsLoaded}
-            contentContainerStyle={{paddingHorizontal: undefined}}
-            data={services}
-            keyExtractor={item => item.id?.toString() || item.Id?.toString()}
-            ItemSeparatorComponent={() => (
-              <View style={{height: theme.spacing.md}} />
-            )}
-            renderItem={({item}) => {
-              return (
-                <TouchableOpacity
-                  onPress={() => {
-                    navigation.navigate('SingleService', {serviceID: item.id});
-                  }}
-                  style={{
-                    paddingVertical: CommonSizes.spacing.large,
-                    borderWidth: 1,
-                    borderColor: theme.colors.indigoBlue,
-                    paddingHorizontal: CommonSizes.spacing.large,
-                    borderRadius: CommonSizes.borderRadius.large,
-                    backgroundColor: theme.colors.surface,
-                    ...createThemedStyles(theme).dropShadow,
-                    overflow: 'hidden',
-                  }}>
-                  <Text style={{...theme.text.header2, width: '100%'}}>
-                    {item.name || item.Name}
-                  </Text>
-                </TouchableOpacity>
-              );
-            }}
-          />
-        </>
-      )}
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    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%',
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    paddingVertical: CommonSizes.spacing.large,
-    borderRadius: CommonSizes.spacing.huge,
-  },
-});

package/template/src/screens/Services/hooks/useServicesData.ts

@@ -1,41 +0,0 @@
-import {useState} from 'react';
-import {useAppDispatch, useAppSelector} from '../../../core/store/reduxHelpers';
-import {RootState} from '../../../core/store/rootReducer';
-import {getServices} from '../../../core/store/Services/servicesActions';
-export function useServicesData(providerID: string) {
-  const [isLoading, setIsLoading] = useState(false);
-  const dispatch = useAppDispatch();
-  const {services} = useAppSelector((state: RootState) => state.services);
-  const {selectedProvider} = useAppSelector(
-    (state: RootState) => state.providers,
-  );
-  const {selectedCategory} = useAppSelector(
-    (state: RootState) => state.categories,
-  );
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    try {
-      const data =
-        selectedProvider?.provider === 'Fawry'
-          ? {fawry_provider_id: providerID, category_id: selectedCategory?.id}
-          : {bee_provider_id: providerID, category_id: selectedCategory?.id};
-      const response = await dispatch(getServices({data}));
-    } catch (error) {
-      console.error('Error fetching services data:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const refreshData = () => {
-    fetchData();
-  };
-
-  return {
-    isLoading,
-    refreshData,
-    fetchData,
-    services,
-  };
-}