@fadyshawky/react-native-magic 2.0.3 → 2.0.5

package/template/src/screens/Categories/hooks/useCategoriesData.ts

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

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

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

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

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