create-gufran-expo-app 2.0.4 → 2.0.5

package/template/src/screens/auth/RegisterScreen.tsx

@@ -1,430 +0,0 @@
-import React, { useState, useRef, use } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ImageBackground,
-  TouchableOpacity,
-  Linking,
-  Platform,
-  Keyboard,
-} from 'react-native';
-import { Button, hideLoader, showLoader, TextInput } from '../../components/common';
-import { ImagePickerComponent } from '../../components/common/ImagePicker';
-import { theme } from '../../constants';
-import { Strings } from '../../constants/strings';
-import { validateEmail, validatePassword, validatePhoneNumber, validateRequired, ImagePickerResult } from '../../utils';
-import { getApiErrorInfo, useRegister } from '../../services/authService';
-import { moderateScale, verticalScale } from '../../utils/scaling';
-import { Fonts } from '../../constants/Fonts';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { StatusBar } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import Images from '../../assets/images';
-import SVG from '../../assets/icons';
-import ToastManager from '../../components/common/ToastManager';
-import { useImageUpload } from '../../hooks/useImageUpload';
-import { UploadState } from '../../hooks';
-interface RegisterScreenProps {
-  navigation: any;
-}
-
-export const RegisterScreen: React.FC<RegisterScreenProps> = ({ navigation }) => {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    phone_number: '',
-    password: '',
-    confirmPassword: '',
-  });
-  const [isChecked, setIsChecked] = useState(false);
-  const [selectedImage, setSelectedImage] = useState<string | null>(null);
-  const [lastImageResult, setLastImageResult] = useState<ImagePickerResult | null>(null);
-  const registerMutation = useRegister();
-  const [ imageUploadState, resetImageUploadState ] = useState<UploadState>({
-    isUploading: false,
-    progress: 0,
-    error: null,
-    uploadedUrl: null,
-    isRetrying: false,
-    retryCount: 0,
-  });
-
-
-  // Refs for password fields
-  const passwordRef = useRef<any>(null);
-  const confirmPasswordRef = useRef<any>(null);
-  const emailRef = useRef<any>(null);
-  const phoneRef = useRef<any>(null);
-  
-  // Image upload hook
-  const {
-    uploadState,
-    uploadImage,
-  } = useImageUpload({
-    containerName: 'user',
-    maxRetries: 3,
-    retryDelay: 1000,
-    onUploadStart: () => {
-      console.log('Upload started');
-    },
-    onUploadProgress: (progress) => {
-      resetImageUploadState(prev => ({ ...prev, progress }));
-    },
-    onUploadSuccess: (url) => {
-      resetImageUploadState(prev => ({ ...prev, uploadedUrl: url }));
-      console.log('Upload successful:', url);
-    },
-    onUploadError: (error) => {
-      resetImageUploadState(prev => ({ ...prev, error }));
-      console.error('Upload error:', error);
-      ToastManager.error('Upload Failed', error);
-    },
-    onUploadComplete: () => {
-      resetImageUploadState(prev => ({ ...prev, progress: 0 }));
-      console.log('Upload completed');
-    },
-  });
-
-  const handleImageSelected = async (result: ImagePickerResult) => {
-    setSelectedImage(result.uri);
-    setLastImageResult(result);
-    // Start upload using the hook
-    const uploadResult = await uploadImage(result);
-    if (uploadResult.success) {
-      console.log('Image uploaded successfully:', uploadResult);
-    } else {
-      console.error('Image upload failed:', uploadResult.error);
-    }
-  };
-
-
-
-  const handleImageError = (error: string) => {
-    ToastManager.error('Error', error);
-  };
-
-  const validateForm = () => {
-    if (!validateRequired(formData.name)) {
-      ToastManager.error(Strings.AUTH.NAME_REQUIRED);
-      return false;
-    }
-
-    if (!formData.email.trim()) {
-      ToastManager.error(Strings.AUTH.EMAIL_REQUIRED);
-      return false;
-    } else if (!validateEmail(formData.email)) {
-      ToastManager.error(Strings.AUTH.VALID_EMAIL_REQUIRED);
-      return false;
-    }
-    if (!formData.phone_number.trim()) {
-      ToastManager.error(Strings.AUTH.PHONE_NUMBER_REQUIRED);
-      return false;
-    } else if (!validatePhoneNumber(formData.phone_number)) {
-      ToastManager.error(Strings.AUTH.VALID_PHONE_NUMBER_REQUIRED);
-      return false;
-    }
-
-    if (!formData.password.trim()) {
-      ToastManager.error(Strings.AUTH.PASSWORD_REQUIRED);
-      return false;
-    } else if (!validatePassword(formData.password)) {
-      ToastManager.error(Strings.AUTH.PASSWORD_MIN_LENGTH);
-      return false;
-    }
-
-    if (!formData.confirmPassword.trim()) {
-      ToastManager.error(Strings.AUTH.CONFIRM_PASSWORD_REQUIRED);
-      return false;
-    } else if (formData.password !== formData.confirmPassword) {
-      ToastManager.error( Strings.AUTH.PASSWORDS_DO_NOT_MATCH);
-      return false;
-    }
-
-    return true;
-  };
-
-  const handleRegister = async () => {    
-
-    if (!validateForm()) return;
-    Keyboard.dismiss();
-    showLoader();
-    
-      await registerMutation.mutateAsync({
-        email: formData.email,
-        name: formData.name,
-        profileImage: lastImageResult?.fileName || '',
-        phoneNumber: formData.phone_number,
-        password: formData.password,
-        confirmPassword: formData.confirmPassword,
-      }, {
-        onSuccess: (response: any) => {
-          if (response.status === 409) {
-            ToastManager.error(response.data.message || 'OTP verification required');
-            navigation.navigate('OTPVerify', { email: formData.email });
-          } else {
-          navigation.navigate('OTPVerify', { email: formData.email });
-          }
-        },
-        onError: (error) => {
-          const errorInfo = getApiErrorInfo(error);
-          console.log('Register error===>>>>', errorInfo);
-            ToastManager.error(errorInfo.message);
-            console.error('Register error:', errorInfo);
-        },
-        onSettled: () => {
-          hideLoader(); 
-        }
-      });
-
-      
-  };
-
-
-
-  const onNameChange = (text: string) => {
-    const trimmedText = text.trimStart();
-    setFormData(prev => ({ ...prev, name: trimmedText }));
-  };
-
-  const onEmailChange = (text: string) => {
-    const trimmedText = text.trim();
-    setFormData(prev => ({ ...prev, email: trimmedText }));
-  };
-
-  const onPhoneChange = (text: string) => {
-    // Remove all non-numeric characters
-    const numericText = text.replace(/[^0-9]/g, '');
-    setFormData(prev => ({ ...prev, phone_number: numericText }));
-  };
-
-  const onPasswordChange = (text: string) => {
-    const trimmedText = text.trim();
-    setFormData(prev => ({ ...prev, password: trimmedText }));
-  };
-
-  const onConfirmPasswordChange = (text: string) => {
-    const trimmedText = text.trim();
-    setFormData(prev => ({ ...prev, confirmPassword: trimmedText }));
-  };
-
-
-  return (
-    <ImageBackground
-      source={Images.backgroundImage}
-      style={styles.backgroundImage}
-      resizeMode="contain"
-    >
-      <SafeAreaView edges={['top']} style={{ flex: 1 }}>
-      <StatusBar
-          barStyle="dark-content"
-          backgroundColor={theme.colors.background}
-          translucent={Platform.OS === 'android' ? true : false}
-        />
-        <KeyboardAwareScrollView
-          enableOnAndroid={true}
-          contentContainerStyle={styles.container}
-          keyboardShouldPersistTaps="handled"
-          extraScrollHeight={Platform.OS === 'ios' ? 100 : 150}
-          extraHeight={Platform.OS === 'ios' ? 100 : 150}
-          showsVerticalScrollIndicator={false}
-          enableAutomaticScroll={true}
-          scrollEventThrottle={16}
-          keyboardOpeningTime={250}
-          enableResetScrollToCoords={false}
-        >
-          <TouchableOpacity style={{marginLeft: theme.spacing.md, marginTop: theme.spacing.md}} onPress={() => navigation.reset({index: 0, routes: [{name: 'Login'}]})}>
-            <SVG.arrowLeft height={moderateScale(30)} width={moderateScale(30)} style={styles.logoIcon} />
-          </TouchableOpacity>
-          <View style={styles.logoSection}>
-            <ImagePickerComponent
-              progress={imageUploadState?.progress}
-              loading={uploadState.isUploading}
-              defaultIcon={SVG.uploadImageProfile}
-              onImageSelected={handleImageSelected}
-              onError={handleImageError}
-              imageUri={selectedImage}
-              options={{
-                allowsEditing: true,
-                aspect: [1, 1],
-                quality: 0.8,
-              }}
-              style={styles.imagePicker}
-            />
-          </View>
-
-          {/* Login Form */}
-          <View style={styles.loginSection}>
-            <Text style={styles.loginTitle}>{Strings.AUTH.SIGN_UP_TITLE}</Text>
-            <View style={styles.form}>
-              <TextInput
-                label={Strings.COMMON.NAME}
-                value={formData.name}
-                onChangeText={onNameChange}
-                placeholder={Strings.COMMON.NAME_PLACEHOLDER}
-                keyboardType="default"
-                autoCapitalize="words"
-                autoCorrect={false}
-                variant="outlined"
-                leftIcon={SVG.user}
-                maxLength={30}
-                returnKeyType="next"
-                onSubmitEditing={() => emailRef.current?.focus()}
-              />
-
-              <TextInput
-                ref={emailRef}
-                label={Strings.COMMON.EMAIL}
-                value={formData.email}
-                onChangeText={onEmailChange}
-                placeholder={Strings.COMMON.EMAIL_PLACEHOLDER}
-                keyboardType="email-address"
-                autoCapitalize="none"
-                autoCorrect={false}
-                variant="outlined"
-                leftIcon={SVG.Email}
-                maxLength={50}
-                returnKeyType="next"
-                onSubmitEditing={() => phoneRef.current?.focus()}
-              />
-
-              <TextInput
-                ref={phoneRef}
-                label={Strings.COMMON.PHONE}
-                value={formData.phone_number}
-                onChangeText={onPhoneChange}
-                placeholder={Strings.COMMON.PHONE_PLACEHOLDER}
-                keyboardType="phone-pad"
-                autoCapitalize="none"
-                autoCorrect={false}
-                variant="outlined"
-                leftIcon={SVG.phone}
-                maxLength={10}
-                returnKeyType="next"
-                onSubmitEditing={() => passwordRef.current?.focus()}
-              />
-
-              <TextInput
-
-                ref={passwordRef}
-                label={Strings.COMMON.PASSWORD}
-                value={formData.password}
-                onChangeText={onPasswordChange}
-                placeholder={Strings.COMMON.PASSWORD_PLACEHOLDER}
-                secureTextEntry
-                autoCapitalize="none"
-                autoCorrect={false}
-                leftIcon={SVG.Password}
-                showPasswordToggle
-                variant="outlined"
-                maxLength={30}
-                returnKeyType="next"
-                onSubmitEditing={() => confirmPasswordRef.current?.focus()}
-              />
-              <TextInput
-                ref={confirmPasswordRef}
-                label={Strings.COMMON.CONFIRM_PASSWORD}
-                value={formData.confirmPassword}
-                onChangeText={onConfirmPasswordChange}
-                placeholder={Strings.COMMON.PASSWORD_PLACEHOLDER}
-                secureTextEntry
-                autoCapitalize="none"
-                autoCorrect={false}
-                leftIcon={SVG.Password}
-                showPasswordToggle
-                variant="outlined"
-                maxLength={30}
-                returnKeyType="done"
-                onSubmitEditing={() => handleRegister()}
-              />
-
-              <View style={styles.TandCStyle}>
-                <TouchableOpacity  onPress={() => setIsChecked(!isChecked)}>
-                  {isChecked ? <SVG.check  width={moderateScale(25)} height={moderateScale(25)}  /> : <SVG.uncheck width={moderateScale(25)} height={moderateScale(25)}  />}
-                </TouchableOpacity>
-                <Text style={styles.TandCText}>
-                  <Text style={styles.iAgreeToStyle}>By signing up, I agree to My Sport Club{'\n'}</Text>
-                  <Text onPress={() => Linking.openURL('https://www.google.com')} style={styles.underlineTxt}>Terms & Conditions</Text>
-                  <Text style={styles.iAgreeToStyle}> | </Text>
-                  <Text onPress={() => Linking.openURL('https://www.google.com')} style={styles.underlineTxt}>Privacy Policy</Text>
-                </Text>
-              </View>
-
-              <Button
-                disabled={!isChecked}
-                title={Strings.COMMON.SIGN_UP}
-                onPress={handleRegister}
-                variant="primary"
-                size="medium"
-              />
-
-            </View>
-          </View>
-        </KeyboardAwareScrollView>
-      </SafeAreaView>
-    </ImageBackground>
-  );
-};
-
-const styles = StyleSheet.create({
-  backgroundImage: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  container: {
-    flexGrow: 1,
-  },
-  // Logo Section
-  logoSection: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: verticalScale(10),
-    marginBottom: verticalScale(30),
-  },
-  logoIcon: {
-    marginBottom: theme.spacing.md,
-  },
-  imagePicker: {
-    width: moderateScale(150),
-    height: moderateScale(150),
-  },
-  // Login Section
-  loginSection: {
-    flex: 1,
-    backgroundColor: theme.colors.background,
-    paddingHorizontal: theme.spacing.lg,
-    borderTopLeftRadius: moderateScale(30),
-    borderTopRightRadius: moderateScale(30),
-    paddingTop: moderateScale(20),
-    paddingBottom: theme.spacing.xl,
-  },
-  loginTitle: {
-    fontFamily: Fonts.outfitSemiBold,
-    fontSize: moderateScale(24),
-    color: theme.colors.black,
-    marginBottom: theme.spacing.md,
-  },
-  form: {
-    gap: theme.spacing.sm,
-    paddingBottom: theme.spacing.md,
-  },
-  TandCStyle: {
-    flex: 1,
-    flexDirection: 'row',
-    marginTop: theme.spacing.md,
-  },
-  TandCText: {
-    marginLeft: theme.spacing.sm,
-  },
-  iAgreeToStyle: {
-    fontFamily: Fonts.outfitRegular,
-    fontSize: moderateScale(15),
-    color: theme.colors.black
-  }, underlineTxt: {
-    fontFamily: Fonts.outfitSemiBold,
-    fontSize: moderateScale(15),
-    color: theme.colors.appleGreen,
-    textDecorationLine: 'underline'
-  }
-});

package/template/src/screens/auth/SuccessScreen.tsx

@@ -1,201 +0,0 @@
-import React from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    TouchableOpacity,
-    Dimensions,
-    Modal,
-} from 'react-native';
-import SVG from '../../assets/icons';
-import { Fonts } from '../../constants/Fonts';
-import { theme } from '../../constants/theme';
-import { moderateScale } from '../../utils/scaling';
-import { Button } from '../../components/common';
-import { SuccessScreenProps } from '../../types/navigation';
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-interface SuccessModalProps {
-    visible: boolean;
-    userName?: string;
-    onClose: () => void;
-    onGoToHome?: () => void;
-    onSkipToAddMember?: () => void;
-}
-
-const SuccessModal: React.FC<SuccessModalProps> = ({
-    visible,
-    userName = 'Peter',
-    onClose,
-    onGoToHome,
-    onSkipToAddMember,
-}) => {
-    const handleSkipToAddMember = () => {
-        onClose();
-        onSkipToAddMember?.();
-    };
-
-    return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            transparent={true}
-            onRequestClose={onClose}
-        >
-            <TouchableOpacity
-                style={styles.modalOverlay}
-                activeOpacity={1}
-                onPress={onClose}
-            >
-                <TouchableOpacity
-                    style={styles.modalContainer}
-                    activeOpacity={1}
-                    onPress={(e) => e.stopPropagation()}
-                >
-                    <View style={styles.content}>
-                    {/* Success Icon */}
-                    <View style={styles.iconContainer}>
-                        <SVG.SuccessIcone width={moderateScale(92)} height={moderateScale(92)} />
-                    </View>
-
-                    {/* Success Message */}
-                    <Text style={styles.successTitle}>Successfully Registered!</Text>
-
-                    {/* Welcome Message */}
-                    <Text style={styles.welcomeText}>Welcome, {userName}!</Text>
-
-                    {/* Description */}
-                    <Text style={styles.descriptionText}>
-                        Join the club and explore the upcoming events, matches, and activities and more.
-                    </Text>
-
-                    {/* Action Buttons */}
-                    <View style={styles.buttonContainer}>
-                        <Button
-                            title="Go to Home"
-                            onPress={onGoToHome}
-                            variant="primary"
-                            size="medium"
-                            style={styles.goToHomeButton}
-                        />
-
-                        <TouchableOpacity
-                            style={styles.skipButton}
-                            onPress={handleSkipToAddMember}
-                            activeOpacity={0.8}
-                        >
-                            <Text style={styles.skipButtonText}>Tap to Skip & Add Member</Text>
-                        </TouchableOpacity>
-                    </View>
-                    </View>
-                </TouchableOpacity>
-            </TouchableOpacity>
-        </Modal>
-    );
-};
-
-const styles = StyleSheet.create({
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: SCREEN_WIDTH,
-        height: SCREEN_HEIGHT,
-    },
-    modalContainer: {
-        width: SCREEN_WIDTH * 0.9,
-        maxHeight: SCREEN_HEIGHT * 0.8,
-        backgroundColor: theme.colors.white,
-        borderRadius: theme.borderRadius.xl,
-        overflow: 'hidden',
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 8,
-        elevation: 8,
-        padding: theme.spacing.lg,
-    },
-    content: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    iconContainer: {
-        marginBottom: theme.spacing.xl,
-    },
-    successTitle: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.xl,
-        color: theme.colors.appleGreen,
-        textAlign: 'center',
-        marginBottom: theme.spacing.sm,
-    },
-    welcomeText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: theme.typography.fontSize.lg,
-        color: theme.colors.text,
-        textAlign: 'center',
-        marginBottom: theme.spacing.md,
-    },
-    descriptionText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.text,
-        textAlign: 'center',
-        lineHeight: theme.typography.fontSize.md * 1.5,
-        marginBottom: theme.spacing.xl,
-    },
-    buttonContainer: {
-        width: '100%',
-        gap: theme.spacing.md,
-    },
-    goToHomeButton: {
-        width: '100%',
-    },
-    skipButton: {
-        alignItems: 'center',
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.md,
-    },
-    skipButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.textSecondary,
-        textDecorationLine: 'underline',
-    },
-});
-
-// Wrapper component for backward compatibility
-const SuccessScreen: React.FC<SuccessScreenProps> = ({
-    navigation,
-}) => {
-    const [showModal, setShowModal] = React.useState(true);
-    const userName = 'Peter';
-
-    const handleGoToHome = () => {
-        setShowModal(false);
-        navigation.navigate('Home' as never);
-    };
-
-    const handleSkipToAddMember = () => {
-        setShowModal(false);
-        navigation.navigate('AddMember' as never);
-    };
-
-    return (
-        <SuccessModal
-            visible={showModal}
-            userName={userName}
-            onClose={() => setShowModal(false)}
-            onGoToHome={handleGoToHome}
-            onSkipToAddMember={handleSkipToAddMember}
-        />
-    );
-};
-
-export { SuccessModal };
-export default SuccessScreen;