@fadyshawky/react-native-magic 2.0.4 → 2.0.5

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/screens/profile/Profile.tsx

@@ -1,5 +1,293 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Switch,
+  TouchableOpacity,
+  View,
+  Text,
+  Alert,
+  Image,
+} from 'react-native';
+import {ImageResources} from '../../common/ImageResources.g';
+import {Container} from '../../common/components/Container';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {
+  useLocalization,
+  useRTL,
+  useTranslation,
+} from '../../common/localization/LocalizationProvider';
+import {Languages} from '../../common/localization/localization';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {Theme} from '../../core/theme/types';
+import {scaleWidth, scaleHeight} from '../../core/theme/scaling';
+import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
+import {setProvidersLogout} from '../../core/store/Providers/providersSlice';
+import {setServiceLogout} from '../../core/store/Services/servicesSlice';
+import {setCategoriesLogout} from '../../core/store/Categories/categorySlice';
+import {setLogout} from '../../core/store/user/userSlice';
+import DeviceInfo from 'react-native-device-info';
+
+function SwitchButton({
+  onValueChange,
+  value,
+}: {
+  onValueChange: () => void;
+  value: boolean;
+}) {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      onPressIn={() => {
+        onValueChange();
+      }}
+      style={{
+        width: scaleWidth(100),
+        height: scaleHeight(53),
+        backgroundColor: theme.colors.mutedLavender,
+        borderRadius: theme.borderRadius.xl,
+        paddingHorizontal: scaleWidth(5),
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <View
+        style={{
+          width: scaleWidth(42),
+          height: scaleWidth(42),
+          backgroundColor: theme.colors.indigoBlue,
+          borderRadius: theme.borderRadius.xl,
+          alignSelf: value ? 'flex-end' : 'flex-start',
+        }}
+      />
+    </TouchableOpacity>
+  );
+}
 
 export function Profile(): JSX.Element {
-  return <></>;
+  const {theme, toggleTheme} = useTheme();
+  const {currentLanguage, changeLanguage} = useLocalization();
+  const t = useTranslation();
+  const isRTL = useRTL();
+  const isArabic = currentLanguage === Languages.ar;
+  const isDarkMode = theme.mode === 'dark';
+  const {language: storedLanguage} = useAppSelector(state => state.app);
+  const dispatch = useAppDispatch();
+
+  const styles = createStyles(theme);
+
+  const handleLanguageToggle = () => {
+    const newLanguage = isArabic ? Languages.en : Languages.ar;
+
+    Alert.alert(
+      t('languageChangeTitle', 'profile'),
+      t('languageChangeMessage', 'profile'),
+      [
+        {
+          text: t('cancel', 'common'),
+          style: 'cancel',
+        },
+        {
+          text: t('change', 'common'),
+          onPress: () => changeLanguage(newLanguage),
+        },
+      ],
+      {cancelable: true},
+    );
+  };
+
+  function logout(): any {
+    throw new Error('Function not implemented.');
+  }
+
+  return (
+    <Container
+      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
+      withoutPadding
+      backgroundColor={theme.colors.background}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.titleSection}>
+          <RTLAwareText style={styles.mainTitle}>
+            {t('account', 'profile')}
+          </RTLAwareText>
+        </View>
+
+        <View style={styles.menuSection}>
+          <TouchableOpacity style={styles.menuItem}>
+            <View style={styles.menuItemLeft}>
+              <Image source={ImageResources.account} style={styles.menuIcon} />
+              <RTLAwareText style={theme.text.header2}>
+                {t('editProfile', 'profile')}
+              </RTLAwareText>
+            </View>
+          </TouchableOpacity>
+
+          <RTLAwareView style={styles.menuItem}>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
+              <Image
+                source={ImageResources.en}
+                style={{
+                  ...styles.menuIcon,
+                  marginRight: scaleWidth(10),
+                  width: scaleWidth(48),
+                  height: scaleWidth(48),
+                }}
+              />
+              <SwitchButton
+                onValueChange={handleLanguageToggle}
+                value={isArabic}
+              />
+              <Image
+                tintColor={theme.colors.tintColor}
+                source={ImageResources.ar}
+                style={{
+                  ...styles.menuIcon,
+                  marginLeft: scaleWidth(10),
+                  width: scaleWidth(48),
+                  height: scaleWidth(48),
+                }}
+              />
+            </View>
+            <View style={styles.menuItemLeft}>
+              <Image
+                tintColor={theme.colors.tintColor}
+                source={ImageResources.language}
+                style={styles.menuIcon}
+              />
+              <RTLAwareText style={theme.text.header2}>
+                {t('language', 'profile')}
+              </RTLAwareText>
+            </View>
+          </RTLAwareView>
+
+          <RTLAwareView style={styles.menuItem}>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
+              <Image
+                tintColor={theme.colors.tintColor}
+                source={ImageResources.light}
+                style={{
+                  ...styles.menuIcon,
+                  marginRight: scaleWidth(10),
+                  width: scaleWidth(48),
+                  height: scaleWidth(48),
+                }}
+              />
+              <SwitchButton onValueChange={toggleTheme} value={isDarkMode} />
+              <Image
+                tintColor={theme.colors.tintColor}
+                source={ImageResources.dark}
+                style={{
+                  ...styles.menuIcon,
+                  marginLeft: scaleWidth(10),
+                  width: scaleWidth(48),
+                  height: scaleWidth(48),
+                }}
+              />
+            </View>
+            <View style={styles.menuItemLeft}>
+              <Image
+                tintColor={theme.colors.tintColor}
+                source={ImageResources.display}
+                style={styles.menuIcon}
+              />
+              <RTLAwareText style={theme.text.header2}>
+                {t('darkMode', 'profile')}
+              </RTLAwareText>
+            </View>
+          </RTLAwareView>
+
+          <TouchableOpacity
+            onPressIn={() => {
+              dispatch(setProvidersLogout());
+              dispatch(setServiceLogout());
+              dispatch(setCategoriesLogout());
+              dispatch(setLogout());
+            }}
+            style={styles.menuItem}>
+            <View style={styles.menuItemLeft}>
+              <Image
+                source={ImageResources.services}
+                style={[styles.menuIcon, styles.logoutIcon]}
+              />
+              <RTLAwareText style={[theme.text.header2, styles.logoutText]}>
+                {t('logout', 'profile')}
+              </RTLAwareText>
+            </View>
+          </TouchableOpacity>
+        </View>
+        <RTLAwareText style={{...theme.text.body1, alignSelf: 'center'}}>
+          {DeviceInfo.getVersion()}
+        </RTLAwareText>
+      </ScrollView>
+    </Container>
+  );
 }
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    titleSection: {
+      paddingHorizontal: scaleWidth(20),
+      paddingTop: scaleWidth(20),
+      paddingBottom: scaleWidth(10),
+    },
+    mainTitle: {
+      ...theme.text.header1,
+      marginBottom: scaleWidth(10),
+    },
+    menuSection: {
+      paddingHorizontal: scaleWidth(20),
+      paddingVertical: scaleWidth(10),
+    },
+    menuItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: scaleWidth(15),
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.shadow,
+    },
+    menuItemLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    menuIcon: {
+      width: scaleWidth(71),
+      height: scaleWidth(71),
+      marginRight: scaleWidth(15),
+      tintColor: theme.colors.tintColor,
+      resizeMode: 'contain',
+    },
+    menuText: {
+      ...theme.text.body1,
+    },
+    logoutText: {
+      color: theme.colors.red,
+    },
+    logoutIcon: {
+      tintColor: theme.colors.red,
+    },
+    languageOptions: {
+      flexDirection: 'row',
+      marginTop: scaleWidth(10),
+    },
+    languageOption: {
+      marginRight: scaleWidth(20),
+      paddingVertical: scaleWidth(5),
+      paddingHorizontal: scaleWidth(10),
+      borderRadius: theme.borderRadius.sm,
+    },
+    activeLanguage: {
+      backgroundColor: theme.colors.indigoBlue,
+      color: theme.colors.white,
+    },
+  });

package/template/src/services/SunmiPrinterInternal.js

@@ -0,0 +1,268 @@
+import {NativeModules, Platform} from 'react-native';
+
+const {SunmiPrinterInternal} = NativeModules;
+
+// Create a wrapper with error handling
+const SunmiPrinterInternalWrapper = {
+  // Check if the module is available
+  isAvailable: () => {
+    return (
+      !!SunmiPrinterInternal &&
+      typeof SunmiPrinterInternal === 'object' &&
+      Object.keys(SunmiPrinterInternal).length > 0
+    );
+  },
+
+  // Get the status of the printer
+  getStatus: async () => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      return {
+        connected: false,
+        error: 'SunmiPrinterInternal module is not available',
+      };
+    }
+
+    try {
+      if (SunmiPrinterInternal.getStatus) {
+        return await SunmiPrinterInternal.getStatus();
+      } else {
+        return {
+          connected: false,
+          error: 'getStatus method is not available',
+        };
+      }
+    } catch (error) {
+      console.error('Error getting printer status:', error);
+      return {
+        connected: false,
+        error: error.message || 'Unknown error',
+      };
+    }
+  },
+
+  // Print text
+  printText: async text => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printText) {
+      console.error('printText method is not available');
+      throw new Error('printText method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printText(text);
+    } catch (error) {
+      console.error('Error printing text:', error);
+      throw error;
+    }
+  },
+
+  // Print text with font
+  printTextWithFont: async (text, typeface = '', fontSize = 24) => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printTextWithFont) {
+      console.error('printTextWithFont method is not available');
+      throw new Error('printTextWithFont method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printTextWithFont(
+        text,
+        typeface,
+        fontSize,
+      );
+    } catch (error) {
+      console.error('Error printing text with font:', error);
+      throw error;
+    }
+  },
+
+  // Print bold text
+  printBoldText: async text => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printBoldText) {
+      console.error('printBoldText method is not available');
+      throw new Error('printBoldText method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printBoldText(text);
+    } catch (error) {
+      console.error('Error printing bold text:', error);
+      throw error;
+    }
+  },
+
+  // Print barcode
+  printBarCode: async (
+    data,
+    symbology = 8,
+    height = 80,
+    width = 2,
+    textPosition = 2,
+  ) => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printBarCode) {
+      console.error('printBarCode method is not available');
+      throw new Error('printBarCode method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printBarCode(
+        data,
+        symbology,
+        height,
+        width,
+        textPosition,
+      );
+    } catch (error) {
+      console.error('Error printing barcode:', error);
+      throw error;
+    }
+  },
+
+  // Print QR code
+  printQRCode: async (data, moduleSize = 8, errorLevel = 0) => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printQRCode) {
+      console.error('printQRCode method is not available');
+      throw new Error('printQRCode method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printQRCode(
+        data,
+        moduleSize,
+        errorLevel,
+      );
+    } catch (error) {
+      console.error('Error printing QR code:', error);
+      throw error;
+    }
+  },
+
+  // Print image
+  printImage: async base64Image => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.printImage) {
+      console.error('printImage method is not available');
+      throw new Error('printImage method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.printImage(base64Image);
+    } catch (error) {
+      console.error('Error printing image:', error);
+      throw error;
+    }
+  },
+
+  // Line wrap
+  lineWrap: async (lines = 3) => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.lineWrap) {
+      console.error('lineWrap method is not available');
+      throw new Error('lineWrap method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.lineWrap(lines);
+    } catch (error) {
+      console.error('Error line wrapping:', error);
+      throw error;
+    }
+  },
+
+  // Cut paper
+  cutPaper: async () => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    if (!SunmiPrinterInternal.cutPaper) {
+      console.error('cutPaper method is not available');
+      throw new Error('cutPaper method is not available');
+    }
+
+    try {
+      return await SunmiPrinterInternal.cutPaper();
+    } catch (error) {
+      console.error('Error cutting paper:', error);
+      throw error;
+    }
+  },
+
+  // Print receipt
+  printReceipt: async receiptData => {
+    if (!SunmiPrinterInternalWrapper.isAvailable()) {
+      console.error('SunmiPrinterInternal module is not available');
+      throw new Error('SunmiPrinterInternal module is not available');
+    }
+
+    try {
+      // Print header
+      await SunmiPrinterInternalWrapper.printBoldText(receiptData.header);
+      await SunmiPrinterInternalWrapper.lineWrap(1);
+
+      // Print items
+      for (const item of receiptData.items) {
+        await SunmiPrinterInternalWrapper.printText(
+          `${item.name} x${item.quantity} $${item.price}`,
+        );
+      }
+
+      await SunmiPrinterInternalWrapper.lineWrap(1);
+
+      // Print total
+      await SunmiPrinterInternalWrapper.printBoldText(
+        `Total: $${receiptData.total}`,
+      );
+
+      // Print footer
+      await SunmiPrinterInternalWrapper.lineWrap(2);
+      await SunmiPrinterInternalWrapper.printText(receiptData.footer);
+
+      // Cut paper
+      await SunmiPrinterInternalWrapper.lineWrap(3);
+      if (SunmiPrinterInternal.cutPaper) {
+        await SunmiPrinterInternalWrapper.cutPaper();
+      }
+
+      return true;
+    } catch (error) {
+      console.error('Error printing receipt:', error);
+      throw error;
+    }
+  },
+};
+
+export default SunmiPrinterInternalWrapper;

package/template/src/types/sunmiPrepaid.d.ts

@@ -0,0 +1,20 @@
+declare module 'SunmiPrepaid' {
+  interface PrepaidResponse {
+    success: boolean;
+    message: string;
+  }
+
+  interface ServiceStatus {
+    isInitialized: boolean;
+  }
+
+  export interface SunmiPrepaidInterface {
+    initializePrepaid(): Promise<PrepaidResponse>;
+    initializeUtilityType(utilityType: string): Promise<PrepaidResponse>;
+    forceCardFacadeDetection(): Promise<PrepaidResponse>;
+    getServiceStatus(): Promise<ServiceStatus>;
+  }
+
+  const SunmiPrepaid: SunmiPrepaidInterface;
+  export default SunmiPrepaid;
+}