oneticket-sdk-vi 1.0.0

package/src/screens/auth/OTPScreen.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Keyboard, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { ms, mvs } from 'react-native-size-matters';
+import {
+  useMutateLoginOtpSend,
+  useMutateLoginUser,
+  useMutateRegisterUser,
+  useMutateSignUpOtpSend
+} from '../../services/apis/auth/hooks';
+import { UnAuthScreens, UnAuthStackRouteProp } from '../../navigation/UnAuthStack';
+import { BaseScreens, BaseStackNavigationProp } from '../../navigation/BaseStack';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Button } from '../../components/common/Button/Button';
+import { Input } from '../../components/common/Input/Input';
+import { AuthScreens } from '../../navigation/AuthStack';
+
+export default function OTPScreen() {
+  const { theme } = useTheme();
+  const { navigate, reset } = useNavigation<BaseStackNavigationProp>();
+  const [otp, setOtp] = useState<string[]>(['', '', '', '', '', '']);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const inputRefs = useRef<(TextInput | null)[]>([]);
+  const {
+    params: { prevScreen, moNumber }
+  } = useRoute<UnAuthStackRouteProp<UnAuthScreens.OTP>>();
+
+  const [countdown, setCountdown] = useState<number | null>(null);
+
+  const { mutateAsync: signUpOtp, isPending: signOtpLoading } = useMutateSignUpOtpSend(() => { });
+  const { mutateAsync: loginOtp, isPending: loginOtpLoading } = useMutateLoginOtpSend(() => { });
+
+  const { mutateAsync: registerUser, isPending: registerUserLoading } = useMutateRegisterUser((data) => {
+    if (data.status === 'success') {
+      reset({ index: 0, routes: [{ name: BaseScreens.AuthStack }] });
+    }
+  });
+
+  const { mutateAsync: loginUser, isPending: loginUserLoading } = useMutateLoginUser((data) => {
+    if (data.status === 'success') {
+      reset({ index: 0, routes: [{ name: BaseScreens.AuthStack }] });
+    }
+  });
+
+  useEffect(() => {
+    setOtp(['', '', '', '', '', '']);
+    setErrorMessage('');
+    setTimeout(() => {
+      inputRefs.current[0]?.focus();
+      Keyboard.dismiss();
+      inputRefs.current[0]?.focus();
+    }, 200);
+  }, []);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
+    if (countdown !== null && countdown > 0) {
+      timer = setInterval(() => {
+        setCountdown((prev) => (prev ? prev - 1 : null));
+      }, 1000);
+    } else if (countdown === 0) {
+      setCountdown(null);
+    }
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [countdown]);
+
+  const handleOtpChange = (value: string, index: number) => {
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    if (value.length === 1 && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyPress = (e: any, index: number) => {
+    if (e.nativeEvent.key === 'Backspace') {
+      if (otp[index] === '' && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+        const newOtp = [...otp];
+        newOtp[index - 1] = '';
+        setOtp(newOtp);
+      } else {
+        const newOtp = [...otp];
+        newOtp[index] = '';
+        setOtp(newOtp);
+      }
+    }
+  };
+
+  const handleVerify = () => {
+    const otpCode = otp.join('');
+    if (otpCode.length === 6) {
+      setErrorMessage('');
+      if (prevScreen === UnAuthScreens.SignUp) {
+        console.log("first")
+        registerUser({ moNumber, otp: parseInt(otpCode) });
+      } else {
+        loginUser({ moNumber, otp: parseInt(otpCode) });
+      }
+    } else {
+      setErrorMessage('Please enter a valid 6-digit OTP.');
+    }
+  };
+
+  const handleResendOtp = () => {
+    setCountdown(30);
+    if (prevScreen === UnAuthScreens.SignUp) {
+      signUpOtp({ moNumber });
+    } else {
+      loginOtp({ moNumber });
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 80 : 0} // Adjust this based on your header height
+    >
+      <View style={{
+        flex: 1,
+        padding: ms(20),
+        backgroundColor: theme.colors.background,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        <CustomText variant="heading2" style={{
+          marginBottom: mvs(8),
+          color: theme.colors.primary[500]
+        }}>
+          Mobile number verification
+        </CustomText>
+
+        <CustomText variant="body2" style={{
+          marginBottom: mvs(28),
+          color: theme.colors.textSecondary
+        }}>
+          Enter your OTP code
+        </CustomText>
+
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+        }}>
+          {otp.map((digit, index) => (
+            <Input
+              key={index}
+              ref={(el) => (inputRefs.current[index] = el)}
+              value={digit}
+              onChangeText={(value) => handleOtpChange(value, index)}
+              onKeyPress={(e) => handleKeyPress(e, index)}
+              keyboardType="number-pad"
+              maxLength={1}
+              variant="outlined"
+              inputStyle={{
+                textAlign: 'center',
+                fontSize: ms(16),
+                fontWeight: 'bold',
+                width: ms(46),
+                height: ms(46),
+                padding: 0
+              }}
+              containerStyle={{
+                marginHorizontal: ms(theme.spacing.xs),
+                width: ms(46),
+                height: ms(46),
+              }}
+            />
+          ))}
+        </View>
+
+        {errorMessage && (
+          <CustomText variant="caption" style={{
+            color: theme.colors.error[500],
+          }}>
+            {errorMessage}
+          </CustomText>
+        )}
+
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+          <CustomText variant="body2" style={{ color: theme.colors.textSecondary }}>
+            Didn't receive code?{' '}
+          </CustomText>
+          {countdown !== null ? (
+            <CustomText variant="body2" style={{
+              color: theme.colors.textTertiary,
+              fontWeight: 'bold'
+            }}>
+              Resend in {countdown}s
+            </CustomText>
+          ) : (
+            <Button
+              variant="text"
+              onPress={handleResendOtp}
+              style={{ paddingHorizontal: 0 }}
+            >
+              <CustomText variant="body2" style={{
+                color: theme.colors.primary[500],
+                fontWeight: 'bold'
+              }}>
+                Send again
+              </CustomText>
+            </Button>
+          )}
+        </View>
+
+        <Button
+          variant="primary"
+          size="lg"
+          onPress={handleVerify}
+          loading={registerUserLoading || loginUserLoading}
+          disabled={registerUserLoading || loginUserLoading || countdown !== null}
+          style={{
+            marginTop: mvs(20),
+            width: '100%'
+          }}
+        >
+          Verify
+        </Button>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/screens/auth/SignUpScreen.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import { View, Image, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useMutateSignUpOtpSend } from '../../services/apis/auth/hooks';
+import { UnAuthScreens, UnAuthStackNavigationProp } from '../../navigation/UnAuthStack';
+import PhoneIcon from '../../assets/icons/PhoneIcon';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Input } from '../../components/common/Input/Input';
+import { Button } from '../../components/common/Button/Button';
+import { Checkbox } from '../../components/common/Checkbox/Checkbox'; // You'll need to create this
+import PoweredBy from '../../components/common/PoweredBy/PoweredBy';
+
+export default function SignUpScreen() {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<UnAuthStackNavigationProp>();
+    const [mobile, setMobile] = useState('');
+    const [acceptedTerms, setAcceptedTerms] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<{ mobile?: string; terms?: string }>({});
+    const [isFocused, setIsFocused] = useState(false);
+    const [touched, setTouched] = useState({ mobile: false });
+
+    const { mutateAsync: signUpOtpSend, isPending: isLoading } = useMutateSignUpOtpSend(data => {
+        if (data.status === 'success') {
+            navigate(UnAuthScreens.OTP, {
+                prevScreen: UnAuthScreens.SignUp,
+                moNumber: parseFloat(mobile) || 0
+            });
+        }
+    });
+
+    const validateForm = () => {
+        let errors: { mobile?: string; terms?: string } = {};
+        if (mobile.trim().length !== 10 || !/^\d+$/.test(mobile)) {
+            errors.mobile = 'Please enter a valid 10-digit phone number';
+        }
+        if (!acceptedTerms) {
+            errors.terms = 'You must accept the terms and conditions';
+        }
+        setErrorMessage(errors);
+        return Object.keys(errors).length === 0;
+    };
+
+    const handleSignUp = () => {
+        setTouched({ mobile: true });
+        if (validateForm()) {
+            signUpOtpSend({ moNumber: parseInt(mobile) });
+        }
+    };
+
+    return (
+        <ScrollView
+            contentContainerStyle={{
+                flexGrow: 1,
+                backgroundColor: theme.colors.background,
+                padding: theme.spacing.l,
+                justifyContent: 'center',
+            }}
+            keyboardShouldPersistTaps="handled"
+        >
+            <View style={{ flex: 1, justifyContent: 'space-between' }}>
+                <View>
+                    {/* Logo Section */}
+                    {/* <View style={{ marginBottom: theme.spacing.m, alignItems: 'center' }}>
+                        <Image
+                            source={require('../../assets/images/poweredByLogo.png')}
+                            style={{ width: 160, height: 80 }}
+                            resizeMode="contain"
+                        />
+                    </View> */}
+
+                    {/* Title Section */}
+                    <View style={{ alignItems: 'center', marginBottom: theme.spacing.xl }}>
+                        <CustomText variant="heading1" style={{ color: theme.colors.primary[500] }}>
+                            Create Account
+                        </CustomText>
+                        <CustomText variant="body2" style={{ color: theme.colors.textSecondary }}>
+                            Get started with your account
+                        </CustomText>
+                    </View>
+
+                    {/* Input Section */}
+                    <View style={{ width: '100%', maxWidth: 350 }}>
+                        <Input
+                            variant="outlined"
+                            placeholder="Enter mobile number"
+                            keyboardType="phone-pad"
+                            maxLength={10}
+                            value={mobile}
+                            onFocus={() => setIsFocused(true)}
+                            onBlur={() => {
+                                setIsFocused(false);
+                                setTouched(prev => ({ ...prev, mobile: true }));
+                                validateForm();
+                            }}
+                            onChangeText={(text) => {
+                                const numericText = text.replace(/[^0-9]/g, '');
+                                setMobile(numericText);
+                            }}
+                            leftIcon={<PhoneIcon size={24} color={isFocused ? theme.colors.primary[500] : theme.colors.textTertiary} />}
+                            leftAddon={
+                                <View style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    borderRightWidth: 1,
+                                    borderRightColor: theme.colors.border,
+                                    paddingRight: theme.spacing.s,
+                                    marginRight: theme.spacing.s,
+                                }}>
+                                    <CustomText>+91</CustomText>
+                                </View>
+                            }
+                            inputStyle={{ letterSpacing: 2 }}
+                        />
+                        {touched.mobile && errorMessage.mobile && (
+                            <CustomText variant="caption" style={{ color: theme.colors.error[500], marginTop: theme.spacing.xs }}>
+                                {errorMessage.mobile}
+                            </CustomText>
+                        )}
+                    </View>
+
+                    {/* Terms Checkbox */}
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        width: '100%',
+                        maxWidth: 350,
+                        // marginTop: theme.spacing.m
+                    }}>
+                        <Checkbox
+                            value={acceptedTerms}
+                            onValueChange={setAcceptedTerms}
+                            color={theme.colors.primary[500]}
+                        />
+                        <CustomText variant="caption" style={{ marginLeft: theme.spacing.s, flex: 1 }}>
+                            By signing up, you agree to the Terms of Service and Privacy Policy.
+                        </CustomText>
+                    </View>
+                    {errorMessage.terms && (
+                        <CustomText variant="caption" style={{ color: theme.colors.error[500], marginTop: theme.spacing.xs }}>
+                            {errorMessage.terms}
+                        </CustomText>
+                    )}
+
+                    {/* Sign Up Button */}
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        onPress={handleSignUp}
+                        loading={isLoading}
+                        disabled={isLoading}
+                        style={{ marginTop: theme.spacing.l, width: '100%', maxWidth: 350 }}
+                    >
+                        Sign Up
+                    </Button>
+
+                    {/* Login Prompt */}
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        // marginTop: theme.spacing.xl
+                    }}>
+                        <CustomText variant="body2" style={{ color: theme.colors.textSecondary }}>
+                            Already have an account?
+                        </CustomText>
+                        <Button
+                            variant="text"
+                            onPress={() => navigate(UnAuthScreens.LogIn)}
+                            style={{ paddingHorizontal: theme.spacing.s }}
+                        >
+                            <CustomText variant="body2" style={{ color: theme.colors.primary[500], fontWeight: 'bold' }}>
+                                Login
+                            </CustomText>
+                        </Button>
+                    </View>
+                </View>
+
+                {/* Footer Section */}
+                <PoweredBy />
+            </View>
+        </ScrollView>
+    );
+}

package/src/screens/auth/SuccessScreen.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { ms, mvs } from 'react-native-size-matters';
+import { AuthScreens, AuthStackNavigationProp, AuthStackRouteProp } from '../../navigation/AuthStack';
+import { MetroScreens } from '../../navigation/metro/MetroStack';
+import { MetroTabScreens } from '../../navigation/metro/MetroTabs';
+import { MetroWithTabsScreens } from '../../navigation/metro/MetroWithTabsStack';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Button } from '../../components/common/Button/Button';
+
+const SuccessScreen = () => {
+    const { theme } = useTheme();
+    const { reset } = useNavigation<AuthStackNavigationProp>();
+    const { params: {
+        title,
+        message,
+        buttonText,
+        showButton = false,
+        isSuccess,
+        navigateTo = true
+    } } = useRoute<AuthStackRouteProp<AuthScreens.Success>>();
+
+    useEffect(() => {
+        if (!showButton) {
+            const timer = setTimeout(() => {
+                if (navigateTo) {
+                    console.log('in success useeffect')
+                    reset({
+                        index: 0, routes: [{ name: AuthScreens.MetroStack }]
+                    });
+                }
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [navigateTo, showButton, reset]);
+
+    return (
+        <View style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors.background
+        }}>
+            <View style={{
+                alignItems: 'center',
+                marginTop: mvs(-20)
+            }}>
+                <View style={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: mvs(16)
+                }}>
+                </View>
+
+                <CustomText variant="heading1" style={{
+                    textAlign: 'center',
+                    marginBottom: mvs(8)
+                }}>
+                    {title}
+                </CustomText>
+
+                <CustomText variant="body2" style={{
+                    color: theme.colors.textSecondary,
+                    textAlign: 'center'
+                }}>
+                    {message}
+                </CustomText>
+
+                {showButton && (
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        onPress={() => navigateTo && reset({
+                            index: 0, routes: [{ name: AuthScreens.MetroStack }]
+                        })}
+                        style={{
+                            marginTop: mvs(24),
+                            width: '80%'
+                        }}
+                    >
+                        {buttonText}
+                    </Button>
+                )}
+            </View>
+        </View>
+    );
+};
+
+export default SuccessScreen;

package/src/screens/common/Faq/Components/CategoryButton.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Pressable, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface CategoryButtonProps {
+    label: string;
+    isActive: boolean;
+    onPress: () => void;
+    activeColor?: string;
+    inactiveColor?: string;
+    textSize?: number;
+    customStyle?: object;
+}
+
+export const CategoryButton: React.FC<CategoryButtonProps> = ({
+    label,
+    isActive,
+    onPress,
+    activeColor,
+    inactiveColor,
+    textSize = 14,
+    customStyle = {},
+}) => {
+    const { theme } = useTheme();
+
+    const styles = StyleSheet.create({
+        container: {
+            paddingHorizontal: ms(theme.spacing.m),
+            paddingVertical: mvs(theme.spacing.s),
+            borderRadius: 20,
+            borderWidth: 1,
+            marginRight: ms(theme.spacing.s),
+        },
+        text: {
+            fontWeight: '500',
+            textTransform: 'capitalize',
+        },
+    });
+
+    return (
+        <Pressable
+            onPress={onPress}
+            style={[
+                styles.container,
+                {
+                    backgroundColor: isActive
+                        ? activeColor || theme.colors.primary[500]
+                        : inactiveColor || theme.colors.background,
+                    borderColor: isActive
+                        ? activeColor || theme.colors.primary[500]
+                        : theme.colors.borderLight,
+                },
+                customStyle,
+            ]}
+        >
+            <Text
+                style={[
+                    styles.text,
+                    {
+                        color: isActive ? theme.colors.white : theme.colors.text,
+                        fontSize: ms(textSize),
+                    }
+                ]}
+            >
+                {label}
+            </Text>
+        </Pressable>
+    );
+};