@fadyshawky/react-native-magic 2.0.5 → 2.0.7

package/template/src/modules/SunmiPrepaid.ts

@@ -1,122 +0,0 @@
-import {NativeModules} from 'react-native';
-
-const {SunmiPrepaid} = NativeModules;
-
-export interface PrepaidResponse {
-  success: boolean;
-  message: string;
-  billingAcct: string;
-  extraBillingAcctKey: any[];
-  customProperties: any[];
-}
-
-export interface ServiceStatus {
-  isInitialized: boolean;
-}
-
-function checkMeeterFeedBack(response: any): {Key: string; Value: string}[] {
-  let chunksNum;
-  if (response.meterFeedback.length % 1024 == 0)
-    chunksNum = response.meterFeedback.length / 1024;
-  else {
-    chunksNum = response.meterFeedback.length / 1024 + 1;
-  }
-
-  let tmp = [];
-
-  for (let i = 1; i <= chunksNum; i++) {
-    let meterFeedbackKey = 'ESCFBT0';
-    meterFeedbackKey += i;
-    let chunkLength = i * 1024;
-    let previousChunkLength = (i - 1) * 1024;
-    if (chunkLength > response.meterFeedback.length)
-      chunkLength = response.meterFeedback.length;
-    let chunkData = response.meterFeedback.substring(
-      previousChunkLength,
-      chunkLength,
-    );
-    tmp.push({Key: meterFeedbackKey, Value: chunkData});
-  }
-  return tmp;
-}
-
-class SunmiPrepaidModule {
-  async initializePrepaid(): Promise<PrepaidResponse> {
-    try {
-      return await SunmiPrepaid.initializePrepaid();
-    } catch (error) {
-      throw new Error(`Failed to initialize prepaid service: ${error}`);
-    }
-  }
-
-  async forceCardFacadeDetection(): Promise<PrepaidResponse> {
-    try {
-      return await SunmiPrepaid.forceCardFacadeDetection();
-    } catch (error) {
-      throw new Error(`Failed to force card facade detection: ${error}`);
-    }
-  }
-
-  async readCardMetadata(
-    extraKeys: any,
-    type: string,
-  ): Promise<PrepaidResponse> {
-    try {
-      const response = await SunmiPrepaid.readCardMetadata(type);
-
-      let keysArray = [
-        {Key: 'Key1', Value: response.vendor},
-        {Key: 'Key2', Value: response.sectorIdentifier},
-        {Key: 'Key3', Value: response.meterIdentifier},
-      ];
-
-      let propertiesArray = [
-        {
-          Key:
-            type === 'SC' || type === 'GASSC'
-              ? 'ElectrictyCompany'
-              : 'WaterCompany',
-          Value: response.companyIdentifier,
-        },
-        {Key: 'ClientIdentifier', Value: response.clientIdentifier},
-        {Key: 'CardMetadata', Value: response.metaData},
-      ];
-
-      if (response.meterFeedback.length < 1024) {
-        propertiesArray.push({
-          Key: 'ESCFBT01',
-          Value: response.meterFeedback,
-        });
-      } else {
-        propertiesArray.push(...checkMeeterFeedBack(response));
-      }
-
-      if (response.metaData) {
-        propertiesArray.push({Key: 'CardMetadata', Value: response.metaData});
-      }
-
-      return {
-        success: true,
-        message: 'success',
-        billingAcct: response.identifier,
-        extraBillingAcctKey: keysArray,
-        customProperties: propertiesArray,
-      };
-    } catch (error) {
-      throw new Error(`Failed to read card metadata: ${error}`);
-    }
-  }
-
-  async writeCardCharge(
-    billEncryptInfo: string,
-    cardMetadata: string,
-  ): Promise<PrepaidResponse> {
-    try {
-      return await SunmiPrepaid.writeCardCharge(billEncryptInfo, cardMetadata);
-    } catch (error) {
-      throw new Error(`Failed to write card charge: ${error}`);
-    }
-  }
-}
-
-export default new SunmiPrepaidModule();

package/template/src/screens/Categories/Categories.tsx

@@ -1,141 +0,0 @@
-import {useIsFocused, useNavigation} 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 {useTranslation} from '../../common/localization/LocalizationProvider';
-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 {useCategoriesData} from './hooks/useCategoriesData';
-import {setSelectedCategory} from '../../core/store/Categories/categorySlice';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-
-export function Categories(): JSX.Element {
-  const {isLoading, fetchData, categories} = useCategoriesData();
-  const t = useTranslation();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const {theme} = useTheme();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  const isFocused = useIsFocused();
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (isFocused && categories.length === 0) {
-      fetchData();
-    }
-  }, [isFocused]);
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'CategoriesScreenID'}
-      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={navigation.goBack} />
-          <FlatListWrapper
-            contentContainerStyle={{
-              alignItems: 'center',
-              paddingBottom: scaleHeight(50),
-            }}
-            style={{
-              flex: 1,
-              alignSelf: 'center',
-            }}
-            ItemSeparatorComponent={() => (
-              <View style={{height: CommonSizes.spacing.large}} />
-            )}
-            keyExtractor={(item, index) => `${item.id}-${index}`}
-            loadState={
-              isLoading ? LoadState['loadingMore'] : LoadState['pullToRefresh']
-            }
-            data={categories}
-            numColumns={3}
-            renderItem={({item, index}) => (
-              <Card
-                cardStyle={{
-                  width: scaleWidth(187),
-                  height: scaleHeight(260),
-                }}
-                key={item.id}
-                icon={{uri: item.img_url}}
-                title={item.name}
-                onPress={() => {
-                  dispatch(setSelectedCategory(item));
-                  navigation.navigate('Providers', {
-                    categoryID: item?.id?.toString(),
-                  });
-                }}
-                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/Categories/hooks/useCategoriesData.ts

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

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

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

package/template/src/screens/Favorites/Favorites.tsx

@@ -1,130 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useCallback, useRef} from 'react';
-import {StyleSheet} from 'react-native';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
-import {Container} from '../../common/components/Container';
-import {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {ImageResources} from '../../common/ImageResources.g';
-import {
-  useRTL,
-  useTranslation,
-} from '../../common/localization/LocalizationProvider';
-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 {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleHeight} from '../../core/theme/scaling';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {Header} from '../../navigation/HeaderComponents';
-import {RootStackParamList} from '../../navigation/types';
-
-export function Favorites(): JSX.Element {
-  const dispatch = useAppDispatch();
-  const {favoriteProviders = []} = useAppSelector(
-    (state: RootState) => state.user,
-  );
-  const {favoriteCategories = []} = useAppSelector(
-    (state: RootState) => state.user,
-  );
-  const {providers} = useAppSelector((state: RootState) => state.providers);
-  const {categories} = useAppSelector((state: RootState) => state.categories);
-  const t = useTranslation();
-  const isRTL = useRTL();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const {theme} = useTheme();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-
-  const navigateToServices = useCallback(
-    (provider: ServiceProvider) => {
-      dispatch(setSelectedProvider(provider));
-      navigation.navigate('Services', {
-        providerID: provider?.id?.toString() as string,
-      });
-    },
-    [dispatch, navigation],
-  );
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'FavoritesScreenID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
-      withoutPadding
-      backgroundColor={theme.colors.background}>
-      <Header />
-
-      <RTLAwareView style={styles.sectionHeader}>
-        <RTLAwareText style={theme.text.header2}>
-          {t('favoriteCategories', 'common')}
-        </RTLAwareText>
-      </RTLAwareView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    paddingBottom: scaleHeight(150),
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.medium,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  searchBar: {
-    width: '90%',
-    alignSelf: 'center',
-    marginTop: CommonSizes.spacing.medium,
-  },
-  sectionHeader: {
-    width: '90%',
-    marginVertical: CommonSizes.spacing.medium,
-  },
-  carouselContainer: {
-    height: scaleHeight(570),
-    width: '100%',
-  },
-  gridPage: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
-    overflow: 'hidden',
-  },
-  paginationContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: CommonSizes.spacing.small,
-  },
-  paginationDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#cccccc',
-    marginHorizontal: 4,
-  },
-  paginationDotActive: {
-    backgroundColor: '#666666',
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-  },
-  emptyContainer: {
-    height: scaleHeight(150),
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/template/src/screens/ForceChangePassword/ForceChangePasswordScreen.tsx

@@ -1,155 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import React, {useRef, useState} from 'react';
-import {StyleSheet, Text} 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 {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
-import {ImageResources} from '../../common/ImageResources.g';
-import {useInputError} from '../../common/validations/hooks/useInputError';
-import {useAppDispatch} from '../../core/store/reduxHelpers';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {useTheme} from '../../core/theme/ThemeProvider';
-import {Header} from '../../navigation/HeaderComponents';
-import type {RootStackParamList} from '../../navigation/types';
-import {resetPassword} from '../../core/store/user/userActions';
-import {
-  useTranslation,
-  useRTL,
-} from '../../common/localization/LocalizationProvider';
-import {RTLAwareText} from '../../common/components/RTLAwareText';
-import {RTLAwareView} from '../../common/components/RTLAwareView';
-
-export function ForceChangePasswordScreen(): JSX.Element {
-  const dispatch = useAppDispatch();
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const scroll = useRef<KeyboardAwareScrollView>(null);
-  const {theme} = useTheme();
-  const t = useTranslation();
-  const isRTL = useRTL();
-
-  const {error: currentPasswordError, recheckValue: recheckCurrentPassword} =
-    useInputError(currentPassword, value =>
-      value.length < 6 ? 'Password must be at least 6 characters' : null,
-    );
-
-  const {error: newPasswordError, recheckValue: recheckNewPassword} =
-    useInputError(newPassword, value => {
-      if (value.length < 6) return 'Password must be at least 6 characters';
-      if (value === currentPassword)
-        return 'New password must be different from current password';
-      return null;
-    });
-
-  const {error: confirmPasswordError, recheckValue: recheckConfirmPassword} =
-    useInputError(confirmPassword, value =>
-      value !== newPassword ? 'Passwords do not match' : null,
-    );
-
-  async function handleChangePassword() {
-    const currentPasswordValid = recheckCurrentPassword() === null;
-    const newPasswordValid = recheckNewPassword() === null;
-    const confirmPasswordValid = recheckConfirmPassword() === null;
-
-    if (!currentPasswordValid || !newPasswordValid || !confirmPasswordValid) {
-      return;
-    }
-
-    setLoading(true);
-    try {
-      // Add your change password logic here
-      const response = await dispatch(
-        resetPassword({
-          mpin: currentPassword,
-          new_mpin: newPassword,
-          confirm_mpin: confirmPassword,
-        }),
-      );
-
-      if (resetPassword.fulfilled.match(response)) {
-        navigation.goBack();
-      }
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <Container
-      ref={scroll}
-      testID={'ForceChangePasswordID'}
-      contentContainerStyle={styles.contentContainer}
-      style={styles.container}
-      backgroundImage={ImageResources.background_2}
-      withoutPadding
-      extendedBackground
-      backgroundColor={theme.colors.background}>
-      <Header />
-      <RTLAwareText style={{...theme.text.body2, textAlign: 'center'}}>
-        {t('forceChange.subtitle', 'password')}
-      </RTLAwareText>
-      <PrimaryTextInput
-        label={t('forceChange.currentPassword', 'password')}
-        value={currentPassword}
-        onChangeText={setCurrentPassword}
-        error={currentPasswordError}
-        placeholder={t('forceChange.enterCurrentPassword', 'password')}
-        secureTextEntry={true}
-        keyboardType="numeric"
-      />
-      <PrimaryTextInput
-        label={t('forceChange.newPassword', 'password')}
-        value={newPassword}
-        onChangeText={setNewPassword}
-        error={newPasswordError}
-        placeholder={t('forceChange.enterNewPassword', 'password')}
-        secureTextEntry={true}
-        keyboardType="numeric"
-      />
-      <PrimaryTextInput
-        label={t('forceChange.confirmPassword', 'password')}
-        value={confirmPassword}
-        onChangeText={setConfirmPassword}
-        error={confirmPasswordError}
-        placeholder={t('forceChange.confirmNewPassword', 'password')}
-        secureTextEntry={true}
-        keyboardType="numeric"
-      />
-      <PrimaryButton
-        label={t('forceChange.changePassword', 'password')}
-        onPressIn={handleChangePassword}
-        isLoading={loading}
-        disabled={loading}
-        type={ButtonType.solid}
-      />
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
-    paddingHorizontal: CommonSizes.spacing.large,
-    justifyContent: 'flex-start',
-    gap: CommonSizes.spacing.large,
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  formContainer: {
-    width: '100%',
-    marginTop: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.medium,
-  },
-});