@fadyshawky/react-native-magic 2.0.3 → 2.0.5

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

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,41 @@
+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,
+  };
+}