@fadyshawky/react-native-magic 2.0.5 → 2.0.7

package/template/src/screens/PaymentConfirmation/PaymentConfirmation.tsx

@@ -1,326 +0,0 @@
-import {
-  RouteProp,
-  useIsFocused,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useEffect, useState} from 'react';
-import {
-  Alert,
-  Image,
-  ImageResizeMode,
-  ImageStyle,
-  ScrollView,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-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 {ImageResources} from '../../common/ImageResources.g';
-import {useTranslation} from '../../common/localization/LocalizationProvider';
-import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
-import {RootState} from '../../core/store/rootReducer';
-import {
-  payService,
-  reverseService,
-} from '../../core/store/Services/servicesActions';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleHeight} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {Theme} from '../../core/theme/types';
-import {HeaderBack, HeaderButton} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-import {omit} from 'lodash';
-import {calculateFees, makePrintData} from '../../common/utils';
-import {normalizeAndTrimWhitespace} from '../../common/helpers/stringsHelpers';
-import {decryptTripleDES} from '../../core/utils/stringUtils';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {SkypeIndicator} from 'react-native-indicators';
-import {createThemedStyles} from '../../core/theme/commonStyles';
-import {getLabel} from '../ReceiptScreen/utils/utils';
-import {getTextStyle} from '../ReceiptScreen/utils/utils';
-import {getSeparator} from '../ReceiptScreen/utils/utils';
-import SunmiPrepaid from '../../modules/SunmiPrepaid';
-
-export function PaymentConfirmation(): JSX.Element {
-  const {theme} = useTheme();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const scroll = React.useRef<KeyboardAwareScrollView>(null);
-  const t = useTranslation();
-
-  const {service} = useAppSelector((state: RootState) => state.services);
-
-  const {inquiredBill} = useAppSelector((state: RootState) => state.services);
-
-  const customProps =
-    inquiredBill?.Response?.PresSvcRs?.MsgRqHdr?.CustomProperties
-      ?.CustomProperty;
-
-  const {selectedProvider} = useAppSelector(
-    (state: RootState) => state.providers,
-  );
-  const dispatch = useAppDispatch();
-
-  const {paymentData} =
-    useRoute<RouteProp<RootStackParamList, 'PaymentConfirmation'>>().params;
-  const billInfo = inquiredBill?.BillRec?.[0]?.BillInfo;
-  let billRec: any = inquiredBill?.BillRec?.[0];
-  billRec = omit(billRec, ['BillInfo']);
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const boldTextStyle: TextStyle = {
-    ...theme.text.body1,
-    fontWeight: 'bold',
-  };
-
-  const isFocused = useIsFocused();
-
-  const [confirmationData, setConfirmationData] = useState<any[]>([]);
-
-  useEffect(() => {
-    if (!isFocused) {
-      return;
-    }
-    setConfirmationData(
-      makePrintData({
-        service,
-        BillingAcct:
-          service?.PmtType === 'POST'
-            ? billRec?.BillingAcct
-            : paymentData?.fawryInputParameters?.BillingAcct,
-        provider: selectedProvider,
-        billInfo,
-        amuont: paymentData?.amountToBePaid,
-        fees: paymentData?.fees,
-        ...(paymentData?.quantity && {quantity: paymentData?.quantity}),
-        ...(paymentData?.vatValue && {vatValue: paymentData?.vatValue}),
-      }),
-    );
-
-    return () => {
-      setConfirmationData([]);
-    };
-  }, [isFocused]);
-
-  const handleReverse = async (response: any) => {
-    try {
-      const result = await dispatch(
-        reverseService({
-          data: {
-            id: response?.payload?.data?.results?.find(
-              (k: any) => k.label === 'رقم العملية',
-            )?.value,
-          },
-        }),
-      );
-      if (result.type.includes('fulfilled')) {
-        return Alert.alert('تم إعادة الرصيد', 'تم إعادة الرصيد بنجاح', [
-          {
-            text: 'تم',
-            onPress: () => {
-              navigation.goBack();
-              setTimeout(() => {
-                navigation.goBack();
-              }, 500);
-            },
-          },
-        ]);
-      }
-    } catch (error) {
-      handleReverse(response);
-    }
-  };
-
-  const handleChargeCard = async (response: any) => {
-    try {
-      if (response?.payload?.data?.chargeValue) {
-        const writeRes = await SunmiPrepaid.writeCardCharge(
-          response?.payload?.data?.chargeValue,
-          response?.payload?.data?.cardMetadata || null,
-        );
-        if (writeRes) {
-          if (response.type.includes('fulfilled')) {
-            navigation.navigate('ReceiptScreen', {
-              type: 'print',
-            });
-          }
-        }
-      } else {
-        handleReverse(response);
-      }
-    } catch (error) {
-      handleReverse(response);
-    }
-  };
-
-  const handleSubmit = async () => {
-    try {
-      setIsLoading(true);
-      let data = {};
-      if (service?.PmtType === 'PREP' || service?.PmtType === 'VOCH') {
-        data = {
-          ...(service?.PmtType === 'VOCH' && {quantity: paymentData?.quantity}),
-          BillTypeCode: service?.BillTypeCode as number,
-          PmtType: service?.PmtType as string,
-          BillingAcct:
-            (paymentData?.fawryInputParameters?.BillingAcct as string) ??
-            undefined,
-          CurAmt: paymentData?.amountToBePaid,
-          ExtraBillingAcctKeys:
-            paymentData?.fawryInputParameters?.ExtraBillingAcctKey.filter(
-              k => !!k.Value || k.EnumValues,
-            ).length > 0
-              ? {
-                  ExtraBillingAcctKey:
-                    paymentData?.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,
-        };
-      } else {
-        data = {
-          BillTypeCode: billRec?.BillTypeCode as number,
-          PmtType: service?.PmtType as string,
-          BillingAcct: billRec?.BillingAcct as string,
-          BillRefNumber: billRec?.BillRefNumber as string,
-          CurAmt: paymentData?.amountToBePaid.toString(),
-          ExtraBillingAcctKeys: billRec?.ExtraBillingAcctKeys as string,
-          billInfo: billInfo,
-        };
-      }
-
-      const response = await dispatch(payService({data}));
-
-      if (
-        service?.AcctInputMethod === 'GASSC' ||
-        service?.AcctInputMethod === 'SC' ||
-        service?.AcctInputMethod === 'WSC'
-      ) {
-        handleChargeCard(response);
-      } else {
-        if (response.type.includes('fulfilled')) {
-          navigation.navigate('ReceiptScreen', {
-            type: 'print',
-          });
-        }
-      }
-    } catch (error) {
-      console.error('error: ', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  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(confirmationData) &&
-              confirmationData?.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('confirm', 'common')}
-            type={ButtonType.solid}
-            onPress={handleSubmit}
-          />
-          <PrimaryButton
-            label={t('back', 'common')}
-            onPress={() => {
-              navigation.goBack();
-            }}
-            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/Providers/Providers.tsx

@@ -1,166 +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, View} from 'react-native';
-import {SkypeIndicator} from 'react-native-indicators';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {LoadState} from '../../../types';
-import {Card} from '../../common/components/Cards';
-import {Container} from '../../common/components/Container';
-import {FlatListWrapper} from '../../common/components/FlatListWrapper';
-import {ImageResources} from '../../common/ImageResources.g';
-import {
-  resetProviders,
-  setSelectedProvider,
-} from '../../core/store/Providers/providersSlice';
-import {ServiceProvider} from '../../core/store/Providers/providersState';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {HeaderBack} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-import {useProvidersData} from './hooks/useProvidersData';
-
-export function Providers(): JSX.Element {
-  const dispatch = useAppDispatch();
-  const {categoryID} =
-    useRoute<RouteProp<RootStackParamList, 'Providers'>>().params;
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const {fetchData, providers, isLoading} = useProvidersData(categoryID);
-  const {theme} = useTheme();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-
-  function navigateToServices(provider: ServiceProvider) {
-    dispatch(setSelectedProvider(provider));
-    navigation.navigate('Services', {
-      providerID:
-        provider?.provider === 'Fawry'
-          ? (provider?.BillerId?.toString() as string)
-          : (provider?.id?.toString() as string),
-    });
-  }
-  const isFocused = useIsFocused();
-
-  useEffect(() => {
-    if (isFocused) {
-      fetchData();
-    }
-  }, [isFocused]);
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'ProvidersScreenID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
-      withoutPadding
-      withoutScroll
-      backgroundColor={theme.colors.background}>
-      {isLoading ? (
-        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
-      ) : (
-        <>
-          <HeaderBack
-            onPress={() => {
-              dispatch(resetProviders());
-              navigation.goBack();
-            }}
-          />
-
-          <FlatListWrapper
-            contentContainerStyle={{
-              alignItems: 'flex-start',
-              paddingBottom: scaleHeight(50),
-              paddingLeft: CommonSizes.spacing.medium,
-            }}
-            style={{
-              flex: 1,
-              alignSelf: 'flex-start',
-            }}
-            ItemSeparatorComponent={() => (
-              <View style={{height: CommonSizes.spacing.large}} />
-            )}
-            keyExtractor={(item, index) => `${item.id}-${index}`}
-            loadState={LoadState.needLoad}
-            data={providers}
-            numColumns={3}
-            renderItem={({item, index}) => {
-              return (
-                <Card
-                  cardStyle={{
-                    width: scaleWidth(187),
-                    height: scaleHeight(260),
-                  }}
-                  key={item.id}
-                  icon={{uri: item.img_url}}
-                  title={item.name || item?.BillerName}
-                  onPress={() => {
-                    navigateToServices(item);
-                  }}
-                  marginRight={
-                    (index % 3) + 1 !== 3
-                      ? CommonSizes.spacing.medium
-                      : undefined
-                  }
-                />
-              );
-            }}
-          />
-        </>
-      )}
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.large,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  searchBar: {
-    width: '90%',
-    alignSelf: 'center',
-    marginTop: CommonSizes.spacing.medium,
-  },
-  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/Providers/hooks/useProvidersData.ts

@@ -1,33 +0,0 @@
-import {useState} from 'react';
-import {getProviders} from '../../../core/store/Providers/providersActions';
-import {useAppDispatch, useAppSelector} from '../../../core/store/reduxHelpers';
-import {RootState} from '../../../core/store/rootReducer';
-export function useProvidersData(categoryID: string) {
-  const [isLoading, setIsLoading] = useState(false);
-  const dispatch = useAppDispatch();
-  const {providers} = useAppSelector((state: RootState) => state.providers);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    try {
-      await dispatch(
-        getProviders({data: {limit: 5000, category_id: Number(categoryID)}}),
-      );
-    } catch (error) {
-      console.error('Error fetching home data:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const refreshData = () => {
-    fetchData();
-  };
-
-  return {
-    isLoading,
-    refreshData,
-    fetchData,
-    providers,
-  };
-}

package/template/src/screens/Providers/types.ts

@@ -1,7 +0,0 @@
-export interface CarouselItem {
-  id: string;
-  title: string;
-  subtitle?: string;
-  imageUrl: string;
-  onPress?: (item: CarouselItem) => void;
-}