create-gufran-expo-app 2.0.0 → 2.0.2

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

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

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