CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notifi

Browse Source
This commit is contained in:
Abin Toppo
2025-10-13 14:02:32 +05:30
parent ae35611bdb
commit bb5ae9af4b
14 changed files with 396 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/app/release/CircleCollect.apk
BIN
View File
Binary file not shown.
android/app/release/baselineProfiles/0/app-release.dm
BIN
View File
Binary file not shown.
android/app/release/baselineProfiles/1/app-release.dm
BIN
View File
Binary file not shown.
android/app/release/output-metadata.json
+37
View File
@@ -0,0 +1,37 @@
{
"version": 3,
"artifactType": {
"type": "APK",
"kind": "Directory"
},
"applicationId": "com.circlecollect",
"variantName": "release",
"elements": [
{
"type": "SINGLE",
"filters": [],
"attributes": [],
"versionCode": 1,
"versionName": "1.0",
"outputFile": "app-release.apk"
}
],
"elementType": "File",
"baselineProfiles": [
{
"minApi": 28,
"maxApi": 30,
"baselineProfiles": [
"baselineProfiles/1/app-release.dm"
]
},
{
"minApi": 31,
"maxApi": 2147483647,
"baselineProfiles": [
"baselineProfiles/0/app-release.dm"
]
}
],
"minSdkVersionForDexing": 24
}
android/appKeyStore
BIN
View File
Binary file not shown.
package-lock.json
Generated
+14
View File
@@ -38,6 +38,7 @@
"react-native-inset-shadow": "^1.0.3", "react-native-inset-shadow": "^1.0.3",
"react-native-keychain": "^10.0.0", "react-native-keychain": "^10.0.0",
"react-native-linear-gradient": "^2.8.3", "react-native-linear-gradient": "^2.8.3",
"react-native-material-ripple": "^0.9.1",
"react-native-paper": "^5.14.5", "react-native-paper": "^5.14.5",
"react-native-reanimated": "^4.1.2", "react-native-reanimated": "^4.1.2",
"react-native-safe-area-context": "^5.6.1", "react-native-safe-area-context": "^5.6.1",
@@ -12932,6 +12933,19 @@
"react-native": "*" "react-native": "*"
} }
}, },
"node_modules/react-native-material-ripple": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/react-native-material-ripple/-/react-native-material-ripple-0.9.1.tgz",
"integrity": "sha512-dHjARdKoGD3LXwPh2TkURabywM5BfdpKc/AHplJTfBMalhVZ2bc7iJoJmNhNnmT/TZ+B3szL6uV1mO7Pv8zNeA==",
"license": "BSD-3-Clause",
"dependencies": {
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-paper": { "node_modules/react-native-paper": {
"version": "5.14.5", "version": "5.14.5",
"license": "MIT", "license": "MIT",
package.json
+1
View File
@@ -40,6 +40,7 @@
"react-native-inset-shadow": "^1.0.3", "react-native-inset-shadow": "^1.0.3",
"react-native-keychain": "^10.0.0", "react-native-keychain": "^10.0.0",
"react-native-linear-gradient": "^2.8.3", "react-native-linear-gradient": "^2.8.3",
"react-native-material-ripple": "^0.9.1",
"react-native-paper": "^5.14.5", "react-native-paper": "^5.14.5",
"react-native-reanimated": "^4.1.2", "react-native-reanimated": "^4.1.2",
"react-native-safe-area-context": "^5.6.1", "react-native-safe-area-context": "^5.6.1",
src/components/common/Header.tsx
+3 -3
View File
@@ -33,12 +33,12 @@ const Header: React.FC<HeaderProps> = ({
return ( return (
<View style={styles.header}> <View style={styles.header}>
{showBack && ( {/* {showBack && (
<TouchableOpacity onPress={handleBack} style={{padding:6}}> <TouchableOpacity onPress={handleBack} style={{padding:6}}>
<Ionicons name="arrow-back" size={24} color={arrowColor} /> <Ionicons name="arrow-back" size={24} color={arrowColor} />
</TouchableOpacity> </TouchableOpacity>
)} )} */}
<Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text> <Text style={[styles.headerTitle, {color:colors.black}]}>{title}</Text>
<View>{rightAction}</View> <View>{rightAction}</View>
</View> </View>
); );
src/screens/LoginScreen.tsx
+188 -162
View File
@@ -1,6 +1,4 @@
// src/screens/LoginScreen.tsx import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect } from "react";
import { import {
View, View,
Text, Text,
@@ -12,27 +10,34 @@ import {
Animated, Animated,
StatusBar, StatusBar,
ActivityIndicator, ActivityIndicator,
} from "react-native"; Dimensions,
import { LOGIN_URL } from "../utils/ApiUrls"; } from 'react-native';
import axios from "axios"; import { LOGIN_URL } from '../utils/ApiUrls';
import { useNavigation } from "@react-navigation/native"; import axios from 'axios';
import type { StackNavigationProp } from "@react-navigation/stack"; import { useNavigation } from '@react-navigation/native';
import { RootStackParamList } from "../navigation/AppNavigator"; import type { StackNavigationProp } from '@react-navigation/stack';
import LinearGradient from "react-native-linear-gradient"; import { RootStackParamList } from '../navigation/AppNavigator';
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from '@react-native-vector-icons/ionicons'; import Ionicons from '@react-native-vector-icons/ionicons';
import CustomAlert from "../components/CostomAlart"; import MaterialRipple from 'react-native-material-ripple'; // For the button ripple effect
import colors from "../components/colors"; // Centralized colors from your file import CustomAlert from '../components/CostomAlart';
import colors from '../components/colors';
const { width } = Dimensions.get('window');
const BLOCK_SIZE = width / 3;
// Note: You will need to install react-native-material-ripple
// npm install react-native-material-ripple
export default function LoginScreen() { export default function LoginScreen() {
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>(); const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
const [mobile, setMobile] = useState(""); const [mobile, setMobile] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [alertInfo, setAlertInfo] = useState({ const [alertInfo, setAlertInfo] = useState({
visible: false, visible: false,
title: "", title: '',
message: "", message: '',
buttons: [] as { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[], buttons: [] as { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
alertType: 'info' as 'info' | 'success' | 'error', alertType: 'info' as 'info' | 'success' | 'error',
}); });
@@ -50,12 +55,12 @@ export default function LoginScreen() {
const showAlert = ( const showAlert = (
title: string, title: string,
message: string, message: string,
buttons: { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[], buttons: { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
alertType: 'info' | 'success' | 'error' = 'info' alertType: 'info' | 'success' | 'error' = 'info',
) => { ) => {
setAlertInfo({ visible: true, title, message, buttons, alertType }); setAlertInfo({ visible: true, title, message, buttons, alertType });
}; };
const hideAlert = () => { const hideAlert = () => {
setAlertInfo({ ...alertInfo, visible: false }); setAlertInfo({ ...alertInfo, visible: false });
}; };
@@ -64,68 +69,70 @@ export default function LoginScreen() {
if (mobile.length === 10) { if (mobile.length === 10) {
setLoading(true); setLoading(true);
try { try {
console.log("Login api call:");
// FIX: Used the imported LOGIN_URL constant instead of a string literal
const res = await axios.get(LOGIN_URL, { params: { mobile } }); const res = await axios.get(LOGIN_URL, { params: { mobile } });
console.log("Login response:", res.data);
if (res.data.statusCode === 200) { if (res.data.statusCode === 200) {
navigation.navigate("OtpVarify", { mobile }); navigation.navigate('OtpVarify', { mobile });
} else { } else {
showAlert( showAlert('Login Failed', res.data.message || 'Could not send OTP.', [{ text: 'Try Again', onPress: hideAlert }], 'error');
"Login Failed",
res.data.message || "Could not send OTP.",
[{ text: "Try Again", onPress: hideAlert }],
'error'
);
} }
} catch (error: any) { } catch (error: any) {
console.error("Login error:", error); showAlert('An Error Occurred', 'Failed to send OTP. Please check your connection and try again.', [{ text: 'OK', onPress: hideAlert }], 'error');
showAlert(
"An Error Occurred",
"Failed to send OTP. Please check your connection and try again.",
[{ text: "OK", onPress: hideAlert }],
'error'
);
} finally { } finally {
setLoading(false); setLoading(false);
} }
} else { } else {
showAlert( showAlert('Invalid Number', 'Please enter a valid 10-digit mobile number.', [{ text: 'Got it', onPress: hideAlert }], 'info');
"Invalid Number",
"Please enter a valid 10-digit mobile number.",
[{ text: "Got it", onPress: hideAlert }],
'info'
);
} }
}; };
const colorsBlocks = [
colors.pastelPink,
colors.pastelBlue,
colors.pastelGreen,
colors.pastelOrange,
colors.pastelBlue,
colors.pastelPink,
colors.pastelGreen,
colors.pastelOrange,
colors.pastelPink,
];
return ( return (
<LinearGradient colors={[colors.pastelBlue, colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}> <View style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />
{/* Funky grid blocks background (Unchanged) */}
<View style={styles.gridContainer}>
{colorsBlocks.map((bgColor, index) => (
<View
key={index}
style={[
styles.gridBlock,
{ backgroundColor: bgColor },
index % 2 === 0 ? styles.elevatedBlock : {},
]}
/>
))}
</View>
<KeyboardAvoidingView <KeyboardAvoidingView
style={styles.container} style={styles.keyboardAvoidingContainer}
behavior={Platform.OS === "ios" ? "padding" : "height"} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
> >
<StatusBar barStyle="dark-content" /> <View style={styles.contentContainer}>
<View style={styles.topSection}>
<View style={[styles.shape, styles.shape1]} /> <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
<View style={[styles.shape, styles.shape2]} /> <Text style={styles.brand}>CircleCollect</Text>
<View style={[styles.shape, styles.shape3]} /> <Text style={styles.title}>Welcome Back!</Text>
<Text style={styles.subtitle}>
Let's get you signed in to your community.
</Text>
</Animated.View>
</View>
<View style={styles.topSection}>
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}> <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
<Text style={styles.brand}>CircleCollect</Text> <View style={styles.inputWrapper}>
<Text style={styles.title}>Welcome!</Text> <Ionicons name="call-outline" size={24} color={colors.textLight} style={styles.inputIcon} />
<Text style={styles.subtitle}>
Glad to see you again. Let's get you signed in to your community.
</Text>
</Animated.View>
</View>
<View style={styles.formSection}>
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
<View style={styles.inputContainer}>
<Ionicons name="call-outline" size={22} color={colors.textLight} style={styles.inputIcon} />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder="Enter your mobile number" placeholder="Enter your mobile number"
@@ -134,24 +141,41 @@ export default function LoginScreen() {
onChangeText={setMobile} onChangeText={setMobile}
keyboardType="phone-pad" keyboardType="phone-pad"
maxLength={10} maxLength={10}
selectionColor={colors.textLight}
/> />
</View> </View>
</Animated.View> </Animated.View>
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
<MaterialRipple
onPress={handleContinue}
disabled={loading}
rippleColor={colors.white}
style={styles.button}
rippleCentered
rippleContainerBorderRadius={30}
>
<LinearGradient
colors={[colors.pastelPink, colors.pastelOrange]}
style={styles.buttonGradient}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
>
{loading ? (
<ActivityIndicator color={colors.white} />
) : (
<View style={styles.buttonContent}>
<Text style={styles.buttonText}>Continue</Text>
<Ionicons name="arrow-forward-circle-outline" size={22} color={colors.white} style={{marginLeft: 8}} />
</View>
)}
</LinearGradient>
</MaterialRipple>
<Text style={styles.footerText}>
Your privacy is our priority. Your information is always secure.
</Text>
</Animated.View>
</View> </View>
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
<TouchableOpacity onPress={handleContinue} disabled={loading} activeOpacity={0.8} style={styles.button}>
{loading ? (
<ActivityIndicator color={colors.white} />
) : (
<Text style={styles.buttonText}>Continue with Mobile</Text>
)}
</TouchableOpacity>
<Text style={styles.footerText}>
Your privacy is our priority. Your information is always secure.
</Text>
</Animated.View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
<CustomAlert <CustomAlert
@@ -161,127 +185,129 @@ export default function LoginScreen() {
buttons={alertInfo.buttons} buttons={alertInfo.buttons}
alertType={alertInfo.alertType} alertType={alertInfo.alertType}
/> />
</LinearGradient> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
gradientContainer: {
flex: 1,
},
container: { container: {
flex: 1, flex: 1,
},
gridContainer: {
...StyleSheet.absoluteFillObject,
flexDirection: 'row',
flexWrap: 'wrap',
},
gridBlock: {
width: BLOCK_SIZE,
height: BLOCK_SIZE,
margin: 2,
borderRadius: 16,
},
elevatedBlock: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.15,
shadowRadius: 10,
elevation: 7,
},
keyboardAvoidingContainer: {
flex: 1,
},
contentContainer: {
flex: 1,
justifyContent: 'space-between',
padding: 24, padding: 24,
justifyContent: "space-between",
},
shape: {
position: 'absolute',
borderRadius: 1000,
opacity: 0.6,
},
shape1: {
width: 400,
height: 400,
backgroundColor: colors.pastelPink,
top: -150,
left: -100,
},
shape2: {
width: 300,
height: 300,
backgroundColor: colors.pastelBlue,
bottom: -100,
right: -120,
},
shape3: {
width: 200,
height: 200,
backgroundColor: colors.pastelGreen,
bottom: '40%',
left: -80,
opacity: 0.5
}, },
topSection: { topSection: {
flex: 0.8, flex: 0.8,
justifyContent: "center", justifyContent: 'center',
alignItems: 'center' alignItems: 'center',
},
formSection: {
flex: 1,
justifyContent: 'flex-start'
}, },
brand: { brand: {
fontSize: 24, fontSize: 28,
fontWeight: "600", fontWeight: '700',
color: colors.primary, color: colors.primary,
textAlign: "center", textAlign: 'center',
letterSpacing: 1.5, letterSpacing: 2,
marginBottom: 16, marginBottom: 16,
textShadowColor: 'rgba(0, 0, 0, 0.1)',
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 2,
}, },
title: { title: {
fontSize: 38, fontSize: 40,
fontWeight: "bold", fontWeight: 'bold',
color: colors.textDark, color: colors.textDark,
textAlign: "center", textAlign: 'center',
marginBottom: 12, marginBottom: 14,
}, },
subtitle: { subtitle: {
fontSize: 16, fontSize: 16,
color: colors.textLight, color: colors.textDark,
textAlign: "center", textAlign: 'center',
lineHeight: 24, lineHeight: 26,
maxWidth: 320, maxWidth: 320,
}, },
inputContainer: { inputWrapper: {
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
backgroundColor: colors.white, backgroundColor: 'rgba(255, 255, 255, 0.85)',
borderRadius: 16, borderRadius: 36,
borderWidth: 1, borderWidth: 2,
borderColor: colors.inputBorder, borderColor: colors.pastelPink,
paddingHorizontal: 16, paddingHorizontal: 20,
marginTop: 32, shadowColor: colors.primary,
shadowColor: colors.black, shadowOffset: { width: 0, height: 6 },
shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2,
shadowOpacity: 0.05, shadowRadius: 14,
shadowRadius: 10, elevation: 8,
elevation: 3,
}, },
inputIcon: { inputIcon: {
marginRight: 12, marginRight: 16,
}, },
input: { input: {
flex: 1, flex: 1,
fontSize: 18,
fontWeight: '600',
color: colors.textLight,
height: 58, height: 58,
fontSize: 16,
color: colors.textDark,
}, },
bottomSection: { bottomSection: {
paddingBottom: Platform.OS === "ios" ? 20 : 10, alignItems: 'center',
paddingHorizontal: 10 paddingBottom: Platform.OS === 'ios' ? 20 : 10,
}, },
button: { button: {
backgroundColor: colors.primary, width: '100%',
paddingVertical: 18,
borderRadius: 30, borderRadius: 30,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
shadowColor: colors.primary, shadowColor: colors.primary,
shadowOffset: { width: 0, height: 8 }, shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.3, shadowOpacity: 0.4,
shadowRadius: 15, shadowRadius: 20,
elevation: 8, elevation: 14,
marginTop: 20,
},
buttonGradient: {
borderRadius: 30,
paddingVertical: 18,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
}, },
buttonText: { buttonText: {
color: colors.white, color: colors.white,
fontWeight: "700", fontWeight: '800',
fontSize: 16, fontSize: 18,
}, },
footerText: { footerText: {
textAlign: "center", fontSize: 14,
color: colors.textLight, color: 'rgba(0,0,0,0.5)',
fontSize: 12, marginTop: 28,
marginTop: 20, textAlign: 'center',
maxWidth: 300,
}, },
}); });
src/screens/OtpVarificationScreen.tsx
+141 -80
View File
@@ -1,4 +1,4 @@
import { RouteProp, useNavigation, useRoute } from "@react-navigation/native"; import { CommonActions, RouteProp, useNavigation, useRoute } from "@react-navigation/native";
import axios from "axios"; import axios from "axios";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import {
@@ -13,16 +13,18 @@ import {
TextInputKeyPressEventData, TextInputKeyPressEventData,
KeyboardAvoidingView, KeyboardAvoidingView,
StatusBar, StatusBar,
Dimensions,
} from "react-native"; } from "react-native";
import { RootStackParamList } from "../navigation/AppNavigator"; import { RootStackParamList } from "../navigation/AppNavigator";
import * as Keychain from "react-native-keychain"; import * as Keychain from "react-native-keychain";
import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls"; import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
import colors from "../components/colors"; import colors from "../components/colors";
import LinearGradient from "react-native-linear-gradient";
import CustomAlert from "../components/CostomAlart"; import CustomAlert from "../components/CostomAlart";
import { getFcmToken } from "../utils/firebase/firebaseServices"; import { getFcmToken } from "../utils/firebase/firebaseServices";
const CELL_COUNT = 6; const CELL_COUNT = 6;
const { width } = Dimensions.get('window');
const BLOCK_SIZE = width / 3;
type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">; type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;
interface AlertButton { interface AlertButton {
@@ -53,21 +55,21 @@ export default function OtpVerificationScreen() {
const route = useRoute<OtpVerifyRouteProp>(); const route = useRoute<OtpVerifyRouteProp>();
const { mobile } = route.params; const { mobile } = route.params;
const navigation = useNavigation<any>(); const navigation = useNavigation<any>();
// Refs for auto-closing logic // Refs for auto-closing logic
const successActionRef = useRef<(() => void) | null>(null); const successActionRef = useRef<(() => void) | null>(null);
const successTimerRef = useRef<number | null>(null); const successTimerRef = useRef<number | null>(null);
const fade = useRef(new Animated.Value(0)).current; const fade = useRef(new Animated.Value(0)).current;
const slide = useRef(new Animated.Value(24)).current; const slide = useRef(new Animated.Value(30)).current;
const ctaScale = useRef(new Animated.Value(1)).current; const ctaScale = useRef(new Animated.Value(1)).current;
useEffect(() => { useEffect(() => {
Animated.parallel([ Animated.parallel([
Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }), Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }), Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
]).start(); ]).start();
}, [fade, slide]); }, []);
useEffect(() => { useEffect(() => {
if (timer <= 0) return; if (timer <= 0) return;
@@ -77,8 +79,8 @@ export default function OtpVerificationScreen() {
const hideAlert = () => { const hideAlert = () => {
if (successTimerRef.current) { if (successTimerRef.current) {
clearTimeout(successTimerRef.current); clearTimeout(successTimerRef.current);
successTimerRef.current = null; successTimerRef.current = null;
} }
setAlertConfig(prev => ({ ...prev, visible: false })); setAlertConfig(prev => ({ ...prev, visible: false }));
}; };
@@ -91,12 +93,12 @@ export default function OtpVerificationScreen() {
autoCloseAction?: () => void autoCloseAction?: () => void
) => { ) => {
setAlertConfig({ visible: true, title, message, buttons, alertType }); setAlertConfig({ visible: true, title, message, buttons, alertType });
if (alertType === 'success' && autoCloseAction) { if (alertType === 'success' && autoCloseAction) {
successActionRef.current = autoCloseAction; successActionRef.current = autoCloseAction;
successTimerRef.current = setTimeout(() => { successTimerRef.current = setTimeout(() => {
successActionRef.current?.(); successActionRef.current?.();
}, 2000); // Auto-close after 2 seconds }, 2000);
} }
}; };
@@ -130,14 +132,18 @@ export default function OtpVerificationScreen() {
await saveToken(jwt); await saveToken(jwt);
await getFcmToken(res.data?.data?.userId); await getFcmToken(res.data?.data?.userId);
let hasActionRun = false; let hasActionRun = false;
const successAction = () => { const successAction = () => {
if (hasActionRun) return; if (hasActionRun) return;
hasActionRun = true; hasActionRun = true;
hideAlert(); hideAlert();
navigation.replace("Home"); navigation.dispatch(
}; CommonActions.reset({
index: 0,
routes: [{ name: 'Home' }],
})
);
};
triggerAlert( triggerAlert(
'Success!', 'Success!',
@@ -162,20 +168,18 @@ export default function OtpVerificationScreen() {
try { try {
setIsResending(true); setIsResending(true);
setTimer(30); setTimer(30);
await axios.get(`${LOGIN_URL}?mobile=${mobile}`, { await axios.get(LOGIN_URL, { params: { mobile } })
headers: { "Content-Type": "application/json", Accept: "*/*" },
});
setCode(Array(CELL_COUNT).fill("")); setCode(Array(CELL_COUNT).fill(""));
inputs.current[0]?.focus(); inputs.current[0]?.focus();
let hasActionRun = false; let hasActionRun = false;
const successAction = () => { const successAction = () => {
if (hasActionRun) return; if (hasActionRun) return;
hasActionRun = true; hasActionRun = true;
hideAlert(); hideAlert();
}; };
triggerAlert( triggerAlert(
'OTP Sent', 'OTP Sent',
'A new code has been sent to your mobile number.', 'A new code has been sent to your mobile number.',
@@ -233,73 +237,130 @@ export default function OtpVerificationScreen() {
inputs.current[idx - 1]?.focus(); inputs.current[idx - 1]?.focus();
} }
}; };
const colorsBlocks = [
colors.pastelPink,
colors.pastelBlue,
colors.pastelGreen,
colors.pastelOrange,
colors.pastelBlue,
colors.pastelPink,
colors.pastelGreen,
colors.pastelOrange,
colors.pastelPink,
];
return ( return (
<LinearGradient colors={[colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}> <View style={styles.container}>
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : undefined}> <StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />
<StatusBar barStyle="dark-content" backgroundColor={colors.pastelGreen} />
<View style={styles.gridContainer}>
{colorsBlocks.map((bgColor, index) => (
<View
key={index}
style={[
styles.gridBlock,
{ backgroundColor: bgColor },
index % 2 === 0 ? styles.elevatedBlock : {},
]}
/>
))}
</View>
<KeyboardAvoidingView style={styles.keyboardAvoidingContainer} behavior={Platform.OS === "ios" ? "padding" : undefined}>
<CustomAlert {...alertConfig} /> <CustomAlert {...alertConfig} />
<View style={styles.topSection}> <View style={styles.contentPanel}>
<Text style={styles.title}>Verify Your Code 🔒</Text> <View style={styles.topSection}>
<Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text> <Text style={styles.title}>Verify Your Code</Text>
<Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>
<Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}> <Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}>
{Array.from({ length: CELL_COUNT }).map((_, i) => ( {Array.from({ length: CELL_COUNT }).map((_, i) => (
<TextInput <TextInput
key={`otp-${i}`} key={`otp-${i}`}
ref={(r) => { inputs.current[i] = r; }} ref={(r) => { inputs.current[i] = r; }}
style={[styles.cell, code[i] ? styles.cellFilled : null]} style={[styles.cell, code[i] ? styles.cellFilled : null]}
keyboardType="number-pad" keyboardType="number-pad"
maxLength={i === 0 ? CELL_COUNT : 1} maxLength={i === 0 ? CELL_COUNT : 1}
value={code[i]} value={code[i]}
onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))} onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
onKeyPress={(e) => handleKeyPress(i, e)} onKeyPress={(e) => handleKeyPress(i, e)}
placeholder="•" placeholder="•"
placeholderTextColor="#BDBDBD" placeholderTextColor="#BDBDBD"
textContentType="oneTimeCode" textContentType="oneTimeCode"
/> />
))} ))}
</Animated.View>
</View>
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
<Pressable
onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
onPress={() => onSubmit(code.join(""), mobile)}
style={styles.button}
>
<Text style={styles.buttonText}>Verify & Continue</Text>
</Pressable>
{timer > 0 ? (
<Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
) : (
<Pressable onPress={resendOtp} disabled={isResending}>
<Text style={[styles.footerText, { color: colors.pastelPink, fontWeight: '600' }]}>
{isResending ? "Resending..." : "Resend Code"}
</Text>
</Pressable>
)}
</Animated.View> </Animated.View>
</View> </View>
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
<Pressable
onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
onPress={() => onSubmit(code.join(""), mobile)}
style={styles.button}
>
<Text style={styles.buttonText}>Verify & Continue</Text>
</Pressable>
{timer > 0 ? (
<Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
) : (
<Pressable onPress={resendOtp} disabled={isResending}>
<Text style={[styles.footerText, { color: colors.primary, fontWeight: '600' }]}>
{isResending ? "Resending..." : "Resend Code"}
</Text>
</Pressable>
)}
</Animated.View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</LinearGradient> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
gradientContainer: { flex: 1 }, container: { flex: 1 },
container: { flex: 1, padding: 24, justifyContent: "space-between" }, gridContainer: {
topSection: { flex: 1, justifyContent: "center", alignItems: 'center' }, ...StyleSheet.absoluteFillObject,
flexDirection: 'row',
flexWrap: 'wrap',
},
gridBlock: {
width: BLOCK_SIZE,
height: BLOCK_SIZE,
margin: 2,
borderRadius: 16,
},
elevatedBlock: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.15,
shadowRadius: 10,
elevation: 7,
},
keyboardAvoidingContainer: { flex: 1, justifyContent: 'center' },
contentPanel: {
marginHorizontal: 24,
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderRadius: 32,
padding: 28,
shadowColor: '#000',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.14,
shadowRadius: 24,
elevation: 12,
},
topSection: { alignItems: 'center', marginBottom: 24 },
title: { fontSize: 28, fontWeight: "bold", color: colors.textDark, textAlign: 'center', marginBottom: 12 }, title: { fontSize: 28, fontWeight: "bold", color: colors.textDark, textAlign: 'center', marginBottom: 12 },
subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 }, subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 },
otpRow: { flexDirection: "row", justifyContent: "space-between", width: '100%', paddingHorizontal: 10 }, otpRow: { flexDirection: "row", justifyContent: "space-between", width: '100%', paddingHorizontal: 10 },
cell: { width: 48, height: 56, borderRadius: 12, borderWidth: 1.5, borderColor: colors.inputBorder, backgroundColor: colors.white, textAlign: "center", fontSize: 22, fontWeight: '700', color: colors.textDark, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 }, cell: { width: 48, height: 56, borderRadius: 12, borderWidth: 1.5, borderColor: colors.inputBorder, backgroundColor: colors.white, textAlign: "center", fontSize: 22, fontWeight: '700', color: colors.textDark, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 },
cellFilled: { borderColor: colors.primary, backgroundColor: '#F7F2FF' }, cellFilled: { borderColor: colors.primary, backgroundColor: '#F7F2FF' },
bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10 }, bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10, paddingTop: 10 },
button: { backgroundColor: colors.primary, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 }, button: { backgroundColor: colors.pastelPink, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 ,borderWidth:2, borderColor:colors.pastelPink},
buttonText: { color: colors.white, fontWeight: "700", fontSize: 16 }, buttonText: { color: colors.white, fontWeight: "700", fontSize: 16 },
footerText: { textAlign: "center", color: colors.textLight, fontSize: 14, marginTop: 20 }, footerText: { textAlign: "center", color: colors.textLight, fontSize: 14, marginTop: 20 },
}); });
src/screens/SplashScreen.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ const SplashScreen = () => {
<Animated.Text style={[styles.title, { opacity: fadeAnim }]}> <Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
Circle Collect Circle Collect
</Animated.Text> </Animated.Text>
<ActivityIndicator size="large" color={colors.Home} style={{ marginTop: 20 }} /> <ActivityIndicator size="large" color={colors.pastelPink} style={{ marginTop: 20 }} />
</View> </View>
); );
}; };
src/screens/home/user-home/CycleDashboard.tsx
+1 -1
View File
@@ -164,7 +164,7 @@ const CycleDashboard = ({ data }: { data: CycleDashboardData }) => {
</View> </View>
<View style={styles.summaryBox}> <View style={styles.summaryBox}>
<Text style={styles.summaryLabel}>Cycles</Text> <Text style={styles.summaryLabel}>Cycles</Text>
<Text style={styles.summaryValue}>{data.currentCycle}/{data.totalCycles}</Text> <Text style={styles.summaryValue}>{data.currentCycle}/{data.totalParticipants}</Text>
</View> </View>
</View> </View>
</View> </View>
src/screens/home/user-home/GroupDetails.tsx
+8 -6
View File
@@ -86,6 +86,7 @@ const GroupDetails = () => {
const getCycleDashboard = async () => { const getCycleDashboard = async () => {
try { try {
const response = await apiCall(`${BASE_URL}payments/groups/${group.id}/cycle-dashboard`, "GET") as any; const response = await apiCall(`${BASE_URL}payments/groups/${group.id}/cycle-dashboard`, "GET") as any;
console.log("Cycle Dashboard Response: ", response);
const responseData = response.data; const responseData = response.data;
setCycleDashboardData(responseData); setCycleDashboardData(responseData);
@@ -117,6 +118,7 @@ const GroupDetails = () => {
const handleContribution = async () => { const handleContribution = async () => {
try { try {
const res = await apiCall(`${CONTRIBUTE}${group.id}/calculate-contribution`, 'GET') as any; const res = await apiCall(`${CONTRIBUTE}${group.id}/calculate-contribution`, 'GET') as any;
console.log("Contribution Calculation Response: ", res);
setPayable(res.data); setPayable(res.data);
} catch (error) { } catch (error) {
console.log("Error in handleContribution: ", error); console.log("Error in handleContribution: ", error);
@@ -169,20 +171,20 @@ const GroupDetails = () => {
} }
contentContainerStyle={styles.scrollContent} contentContainerStyle={styles.scrollContent}
> >
<Header title={group.name} /> <Header title={cycleDashboardData?.groupName || group?.name} />
<Text style={styles.description}>{group.description}</Text> <Text style={styles.description}>{group.description}</Text>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<View style={styles.statBox}> <View style={styles.statBox}>
<Text style={styles.statValue}>{group.members.length ?? 0}</Text> <Text style={styles.statValue}>{memberData.length ?? 0}</Text>
<Text style={styles.statLabel}>Members</Text> <Text style={styles.statLabel}>Members</Text>
</View> </View>
<View style={styles.statBox}> <View style={styles.statBox}>
<Text style={styles.statValue}>₹{group.collected}</Text> <Text style={styles.statValue}>₹{cycleDashboardData?.contributionAmount|| group.collected}</Text>
<Text style={styles.statLabel}>Contribution</Text> <Text style={styles.statLabel}>Contribution</Text>
</View> </View>
<View style={styles.statBox}> <View style={styles.statBox}>
<Text style={styles.statValue}>₹{group.goal}</Text> <Text style={styles.statValue}>₹{cycleDashboardData?.contributionAmount*memberData.length|| group.goal}</Text>
<Text style={styles.statLabel}>Total Amount</Text> <Text style={styles.statLabel}>Total Amount</Text>
</View> </View>
</View> </View>
@@ -203,7 +205,7 @@ const GroupDetails = () => {
<View style={styles.membersHeader}> <View style={styles.membersHeader}>
<Text style={styles.sectionTitle}>Members</Text> <Text style={styles.sectionTitle}>Members</Text>
<View style={styles.statusBadge}> <View style={styles.statusBadge}>
<Text style={styles.statusText}>{group.status}</Text> <Text style={styles.statusText}>{cycleDashboardData?.status || group?.status}</Text>
</View> </View>
</View> </View>
@@ -219,7 +221,7 @@ const GroupDetails = () => {
))} ))}
{/* Button at the bottom inside scroll (no absolute positioning) */} {/* Button at the bottom inside scroll (no absolute positioning) */}
{group.status === 'ACTIVE' && !payable?.hasPaid && ( {cycleDashboardData?.status === 'ACTIVE' && !payable?.hasPaid && (
<TouchableOpacity onPress={() => setOpenModal(true)} style={styles.button}> <TouchableOpacity onPress={() => setOpenModal(true)} style={styles.button}>
<Text style={styles.buttonText}>Contribute</Text> <Text style={styles.buttonText}>Contribute</Text>
</TouchableOpacity> </TouchableOpacity>
src/screens/profile/Profile.tsx
+2 -2
View File
@@ -381,7 +381,7 @@ const Profile = () => {
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerTitle}>User Profile</Text> <Text style={styles.headerTitle}>User Profile</Text>
<TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}> <TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
<Ionicons name="log-out-outline" size={24} color={colors.primary} /> <Ionicons name="log-out-outline" size={24} color={colors.black} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* if (fetching || !user) { {/* if (fetching || !user) {
@@ -707,7 +707,7 @@ const styles = StyleSheet.create({
borderBottomRightRadius: 20, borderBottomRightRadius: 20,
}, },
headerTitle: { headerTitle: {
fontSize: 22, fontWeight: "600", color: colors.primary fontSize: 22, fontWeight: "600", color: colors.black
}, },
refreshButton: { refreshButton: {
padding: 4, padding: 4,